👻 use pf5 select for set-targets (#1526)

Also pulled the select out of the text-content wrapper which was throwing off some styles. --------- Signed-off-by: gitdallas <[email protected]> Signed-off-by: Dallas <[email protected]> Co-authored-by: Ian Bolton <[email protected]>
konveyor · Nov 22, 2023 · c8990d4 · c8990d4
1 parent d215b73
commit c8990d4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/client/src/app/components/SimpleSelectTypeahead.tsx b/client/src/app/components/SimpleSelectTypeahead.tsx
@@ -25,7 +25,9 @@ export interface ISimpleSelectBasicProps {
   toggleId?: string;
   toggleAriaLabel?: string;
   selectMultiple?: boolean;
+  width?: number;
   noResultsFoundText?: string;
+  hideClearButton?: boolean;
 }
 
 export const SimpleSelectTypeahead: React.FC<ISimpleSelectBasicProps> = ({
@@ -37,7 +39,9 @@ export const SimpleSelectTypeahead: React.FC<ISimpleSelectBasicProps> = ({
   toggleId,
   toggleAriaLabel,
   selectMultiple = false,
+  width,
   noResultsFoundText,
+  hideClearButton = false,
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string | string[]>(
@@ -190,7 +194,8 @@ export const SimpleSelectTypeahead: React.FC<ISimpleSelectBasicProps> = ({
       variant="typeahead"
       onClick={onToggleClick}
       isExpanded={isOpen}
-      isFullWidth
+      isFullWidth={!width}
+      style={{ width: width && width + "px" }}
     >
       <TextInputGroup isPlain>
         <TextInputGroupMain
@@ -199,7 +204,9 @@ export const SimpleSelectTypeahead: React.FC<ISimpleSelectBasicProps> = ({
           onChange={onTextInputChange}
           onKeyDown={onInputKeyDown}
           onBlur={() => {
-            setInputValue("");
+            selectMultiple
+              ? setInputValue("")
+              : setInputValue(selected.toString());
           }}
           id="typeahead-select-input"
           autoComplete="off"
@@ -243,7 +250,7 @@ export const SimpleSelectTypeahead: React.FC<ISimpleSelectBasicProps> = ({
               <TimesIcon aria-hidden />
             </Button>
           )}
-          {!selectMultiple && !!inputValue && (
+          {!hideClearButton && !selectMultiple && !!inputValue && (
             <Button
               variant="plain"
               onClick={() => {
@@ -264,13 +271,13 @@ export const SimpleSelectTypeahead: React.FC<ISimpleSelectBasicProps> = ({
   );
   return (
     <>
-      <div>selected: {[selected].join(",")}</div>
       <Select
         id={id}
         isOpen={isOpen}
         selected={selected}
         onSelect={onSelect}
         onOpenChange={() => {
+          setFilterValue("");
           setIsOpen(false);
         }}
         toggle={toggle}

diff --git a/client/src/app/pages/applications/analysis-wizard/set-targets.tsx b/client/src/app/pages/applications/analysis-wizard/set-targets.tsx
@@ -16,7 +16,7 @@ import { AnalysisWizardFormValues } from "./schema";
 import { useSetting } from "@app/queries/settings";
 import { useFetchTargets } from "@app/queries/targets";
 import { Target } from "@app/api/models";
-import { SimpleSelect } from "@app/components/SimpleSelect";
+import { SimpleSelectTypeahead } from "@app/components/SimpleSelectTypeahead";
 
 export const SetTargets: React.FC = () => {
   const { t } = useTranslation();
@@ -135,20 +135,28 @@ export const SetTargets: React.FC = () => {
           {t("wizard.terms.setTargets")}
         </Title>
         <Text>{t("wizard.label.setTargets")}</Text>
-        <SimpleSelect
-          width={200}
-          variant="typeahead"
-          id="action-select"
-          toggleId="action-select-toggle"
-          toggleAriaLabel="Action select dropdown toggle"
-          aria-label={"Select provider"}
-          value={provider}
-          options={["Java", "Go"]}
-          onChange={(selection) => {
-            setProvider(selection as string);
-          }}
-        />
       </TextContent>
+      <SimpleSelectTypeahead
+        width={200}
+        value={provider}
+        toggleAriaLabel="Action select dropdown toggle"
+        toggleId="action-select-toggle"
+        hideClearButton
+        id="action-select"
+        options={[
+          {
+            value: "Java",
+            children: "Java",
+          },
+          {
+            value: "Go",
+            children: "Go",
+          },
+        ]}
+        onChange={(selection) => {
+          setProvider(selection as string);
+        }}
+      />
       {values.selectedTargets.length === 0 &&
         values.customRulesFiles.length === 0 &&
         !values.sourceRepository && (
@@ -158,7 +166,6 @@ export const SetTargets: React.FC = () => {
             title={t("wizard.label.skipTargets")}
           />
         )}
-
       <Gallery hasGutter>
         {targetOrderSetting.isSuccess
           ? targetOrderSetting.data.map((id, index) => {