✨ Add provider dropdown for targets (#1500)

[MTA-1536](https://issues.redhat.com/browse/MTA-1536) --------- Signed-off-by: ibolton336 <[email protected]>
konveyor · Nov 2, 2023 · 1d22ed1 · 1d22ed1
1 parent b66abc1
commit 1d22ed1
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 48 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
@@ -180,6 +196,8 @@ export const MigrationTargets: React.FC = () => {
             </Button>
           </GridItem>
         </Grid>
+      </PageSection>
+      <PageSection>
         <Modal
           id="create-edit-custom-tarrget-modal"
           title={t(
@@ -198,52 +216,54 @@ export const MigrationTargets: React.FC = () => {
             onCancel={() => setCreateUpdateModalState(null)}
           />
         </Modal>
-      </PageSection>
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragStart={handleDragStart}
-        onDragOver={handleDragOver}
-      >
-        <SortableContext
-          items={targetOrderSetting.isSuccess ? targetOrderSetting.data : []}
-          strategy={rectSortingStrategy}
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
         >
-          <DndGrid>
-            {targetOrderSetting.isSuccess &&
-              targetOrderSetting.data.map((id) => {
-                const matchingTarget = targets.find(
-                  (target) => target.id === id
-                );
-                if (matchingTarget) {
-                  return (
-                    <SortableItem
-                      key={id}
-                      id={id}
-                      onEdit={() => {
-                        if (matchingTarget) {
-                          setCreateUpdateModalState(matchingTarget);
-                        }
-                      }}
-                      onDelete={() => {
-                        const matchingTarget = targets.find(
-                          (target) => target.id === id
-                        );
-                        if (matchingTarget?.id) {
-                          deleteTarget(matchingTarget.id);
-                        }
-                      }}
-                    />
+          <SortableContext
+            items={targetOrderSetting.isSuccess ? targetOrderSetting.data : []}
+            strategy={rectSortingStrategy}
+          >
+            <DndGrid>
+              {targetOrderSetting.isSuccess &&
+                targetOrderSetting.data.map((id) => {
+                  const matchingTarget = targets.find(
+                    (target) => target.id === id
                   );
-                } else {
-                  return null;
-                }
-              })}
-            <div ref={targetsEndRef} />
-          </DndGrid>
-          <DragOverlay>{activeId ? <Item id={activeId} /> : null}</DragOverlay>
-        </SortableContext>
-      </DndContext>
+                  if (matchingTarget && matchingTarget.provider === provider) {
+                    return (
+                      <SortableItem
+                        key={id}
+                        id={id}
+                        onEdit={() => {
+                          if (matchingTarget) {
+                            setCreateUpdateModalState(matchingTarget);
+                          }
+                        }}
+                        onDelete={() => {
+                          const matchingTarget = targets.find(
+                            (target) => target.id === id
+                          );
+                          if (matchingTarget?.id) {
+                            deleteTarget(matchingTarget.id);
+                          }
+                        }}
+                      />
+                    );
+                  } else {
+                    return null;
+                  }
+                })}
+              <div ref={targetsEndRef} />
+            </DndGrid>
+            <DragOverlay>
+              {activeId ? <Item id={activeId} /> : null}
+            </DragOverlay>
+          </SortableContext>
+        </DndContext>
+      </PageSection>
     </>
   );
 };