From 92f3f67cdb28d5863424c70f53f1f639ffbab761 Mon Sep 17 00:00:00 2001 From: kahboom Date: Thu, 7 Mar 2024 23:09:17 +0000 Subject: [PATCH 1/8] feat(ui): add pf labels to search bar --- src/modules/components/SearchForm.tsx | 173 +++++++++++++++----------- 1 file changed, 100 insertions(+), 73 deletions(-) diff --git a/src/modules/components/SearchForm.tsx b/src/modules/components/SearchForm.tsx index 87e9abf..c4ec017 100644 --- a/src/modules/components/SearchForm.tsx +++ b/src/modules/components/SearchForm.tsx @@ -1,6 +1,9 @@ import { Button, + Flex, + FlexItem, Form, + FormGroup, FormHelperText, FormSelect, FormSelectOption, @@ -148,81 +151,105 @@ export function SearchForm({ defaultValues, onSubmit, isLoading }: FormProps) { return (
- - - ( - - {ATTRIBUTES.map(attribute => ( - - ))} - - )} - /> - - + - ( - <> - - {fieldState.invalid && ( - - - } - variant={fieldState.invalid ? "error" : "success"} - > - {fieldState.invalid - ? fieldState.error?.message - : inputConfigByAttribute[watchAttribute].helperText} - - - - )} - - )} - /> - - + ( + + + {ATTRIBUTES.map(attribute => ( + + ))} + + + )} + /> + + + - - - + + ( + + + {fieldState.invalid && ( + + + } + variant={fieldState.invalid ? "error" : "success"} + > + {fieldState.invalid + ? fieldState.error?.message + : inputConfigByAttribute[watchAttribute].helperText} + + + + )} + + )} + /> + + + + + + + + + +
); } From 679b34bee2faee51bd64f5f475337bc47c428736 Mon Sep 17 00:00:00 2001 From: kahboom Date: Thu, 7 Mar 2024 23:36:53 +0000 Subject: [PATCH 2/8] feat(ui): add helper text --- src/modules/components/SearchForm.tsx | 86 +++++++++++++++++++++------ 1 file changed, 68 insertions(+), 18 deletions(-) diff --git a/src/modules/components/SearchForm.tsx b/src/modules/components/SearchForm.tsx index c4ec017..8e25f9e 100644 --- a/src/modules/components/SearchForm.tsx +++ b/src/modules/components/SearchForm.tsx @@ -7,16 +7,16 @@ import { FormHelperText, FormSelect, FormSelectOption, - Grid, - GridItem, HelperText, HelperTextItem, + Popover, TextInput, } from "@patternfly/react-core"; import { ReactNode, useEffect } from "react"; import { Controller, RegisterOptions, useForm } from "react-hook-form"; import { Attribute, ATTRIBUTES } from "../api/rekor_api"; -import { ExclamationCircleIcon } from "@patternfly/react-icons"; +import { ExclamationCircleIcon, HelpIcon } from "@patternfly/react-icons"; +import styles from "@patternfly/react-styles/css/components/Form/form"; export interface FormProps { defaultValues?: FormInputs; @@ -164,6 +164,61 @@ export function SearchForm({ defaultValues, onSubmit, isLoading }: FormProps) { + The{" "} + + name + {" "} + of a{" "} + + Person + + + } + bodyContent={ +
+ Often composed of{" "} + + givenName + {" "} + and{" "} + + familyName + + . +
+ } + > + + + } > - - - + Search + From 518a05353c24d47c1019930aa2e5362d29301150 Mon Sep 17 00:00:00 2001 From: kahboom Date: Fri, 8 Mar 2024 12:45:38 +0000 Subject: [PATCH 3/8] fix: attempt to fix preload console error for svg fix(ux): make search button smaller --- src/modules/components/SearchForm.tsx | 89 ++++++++++++++------------- src/pages/index.tsx | 5 +- 2 files changed, 48 insertions(+), 46 deletions(-) diff --git a/src/modules/components/SearchForm.tsx b/src/modules/components/SearchForm.tsx index 8e25f9e..3999962 100644 --- a/src/modules/components/SearchForm.tsx +++ b/src/modules/components/SearchForm.tsx @@ -12,7 +12,7 @@ import { Popover, TextInput, } from "@patternfly/react-core"; -import { ReactNode, useEffect } from "react"; +import { ReactNode, useEffect, useState } from "react"; import { Controller, RegisterOptions, useForm } from "react-hook-form"; import { Attribute, ATTRIBUTES } from "../api/rekor_api"; import { ExclamationCircleIcon, HelpIcon } from "@patternfly/react-icons"; @@ -121,6 +121,47 @@ export function SearchForm({ defaultValues, onSubmit, isLoading }: FormProps) { value: "", }, }); + const [attrHelperHeader, setAttrHelperHeader] = useState( +
+ The{" "} + + name + {" "} + of a{" "} + + Person + +
, + ); + const [attrHelperBody, setAttrHelperBody] = useState( +
+ Often composed of{" "} + + givenName + {" "} + and{" "} + + familyName + + . +
, + ); useEffect(() => { if (defaultValues) { @@ -166,51 +207,12 @@ export function SearchForm({ defaultValues, onSubmit, isLoading }: FormProps) { fieldId={"rekor-search-attribute"} labelIcon={ - The{" "} - - name - {" "} - of a{" "} - - Person - - - } - bodyContent={ -
- Often composed of{" "} - - givenName - {" "} - and{" "} - - familyName - - . -
- } + headerContent={attrHelperHeader} + bodyContent={attrHelperBody} > + + } isRequired fieldId="rekor-endpoint-override" > @@ -73,7 +89,9 @@ export function Settings({ type="text" onChange={handleChangeBaseUrl} placeholder={ - baseUrl === undefined ? "https://rekor.sigstore.dev" : baseUrl + baseUrl === undefined + ? "https://private.rekor.example.com" + : baseUrl } aria-label="override rekor endpoint" /> From 9a083fdc55141698746f87b9b69cf931417a8386 Mon Sep 17 00:00:00 2001 From: kahboom Date: Fri, 8 Mar 2024 15:03:20 +0000 Subject: [PATCH 8/8] chore(ux): update link to gitsign for helper text --- src/modules/components/SearchForm.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/components/SearchForm.tsx b/src/modules/components/SearchForm.tsx index 77e41c7..e393dcf 100644 --- a/src/modules/components/SearchForm.tsx +++ b/src/modules/components/SearchForm.tsx @@ -73,14 +73,14 @@ const inputConfigByAttribute: Record = { <> Only compatible with{" "} - sigstore/gitsign + gitsign {" "} entries