Add dropdown for filtering

Signed-off-by: ibolton336 <[email protected]>
konveyor · Oct 31, 2023 · 0191dc8 · 0191dc8
1 parent 0ac3cb5
commit 0191dc8
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
@@ -421,6 +421,7 @@ export interface Target {
   labels?: TargetLabel[];
   image?: RulesetImage;
   ruleset: Ruleset;
+  provider?: string;
 }
 
 export interface Metadata {

diff --git a/client/src/app/pages/applications/analysis-wizard/set-targets.tsx b/client/src/app/pages/applications/analysis-wizard/set-targets.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   Title,
   TextContent,
@@ -15,12 +15,15 @@ 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";
 
 export const SetTargets: React.FC = () => {
   const { t } = useTranslation();
 
   const { targets } = useFetchTargets();
 
+  const [provider, setProvider] = useState("Java");
+
   const targetOrderSetting = useSetting("ui.target.order");
 
   const { watch, setValue, getValues } =
@@ -131,6 +134,19 @@ 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>
       <Gallery hasGutter>
         {targetOrderSetting.isSuccess
@@ -139,7 +155,7 @@ export const SetTargets: React.FC = () => {
 
               const isSelected = selectedTargets?.includes(id);
 
-              if (matchingTarget) {
+              if (matchingTarget && matchingTarget.provider === provider) {
                 return (
                   <GalleryItem key={index}>
                     <TargetCard

diff --git a/client/src/app/pages/migration-targets/migration-targets.tsx b/client/src/app/pages/migration-targets/migration-targets.tsx
@@ -36,10 +36,12 @@ import { CustomTargetForm } from "./components/custom-target-form";
 import { useSetting, useSettingMutation } from "@app/queries/settings";
 import { useDeleteTargetMutation, useFetchTargets } from "@app/queries/targets";
 import { Target } from "@app/api/models";
+import { SimpleSelect } from "@app/components/SimpleSelect";
 
 export const MigrationTargets: React.FC = () => {
   const { t } = useTranslation();
   const { pushNotification } = React.useContext(NotificationsContext);
+  const [provider, setProvider] = useState("Java");
 
   const { targets, refetch: refetchTargets } = useFetchTargets();
 
@@ -164,12 +166,26 @@ export const MigrationTargets: React.FC = () => {
             </TextContent>
           </GridItem>
           <GridItem span={2}></GridItem>
-          <GridItem span={10}>
+          <GridItem span={12}>
             <TextContent>
               <Text>{t("terms.customTargetsDetails")}</Text>
             </TextContent>
           </GridItem>
-          <GridItem span={2} className="button-align">
+          <GridItem span={2} className={spacing.mtSm}>
+            <SimpleSelect
+              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);
+              }}
+            />
+          </GridItem>
+          <GridItem span={2} className={spacing.mtSm}>
             <Button
               id="clear-repository"
               isInline
@@ -216,7 +232,7 @@ export const MigrationTargets: React.FC = () => {
                   const matchingTarget = targets.find(
                     (target) => target.id === id
                   );
-                  if (matchingTarget) {
+                  if (matchingTarget && matchingTarget.provider === provider) {
                     return (
                       <SortableItem
                         key={id}