Add language options from providers & select by app tags

ibolton336 · ibolton336 · commit 9a172172b53e · 2024-06-12T15:48:12.000-04:00
Move to simple multi select menu in set targets step

Drive target selection options from targets list

Add kind support for tasks

Address missing checkbox on deselect

Add provider to target card header

Signed-off-by: Ian Bolton &lt;ibolton@redhat.com&gt;
diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
@@ -310,7 +310,8 @@ export interface Task {
   createTime?: string;
   application: { id: number };
   name: string;
-  addon: string;
+  kind?: string;
+  addon?: string;
   data: TaskData;
   error?: string;
   image?: string;
@@ -377,7 +378,8 @@ export interface TaskgroupTask {
 export interface Taskgroup {
   id?: number;
   name: string;
-  addon: string;
+  kind?: string;
+  addon?: string;
   data: TaskData;
   tasks: TaskgroupTask[];
 }
@@ -425,7 +427,7 @@ export interface Target {
   labels?: TargetLabel[];
   image?: RulesetImage;
   ruleset: Ruleset;
-  provider?: string;
+  provider?: string[];
 }
 
 export interface Metadata {
diff --git a/client/src/app/components/SimpleSelectCheckbox.tsx b/client/src/app/components/SimpleSelectCheckbox.tsx
@@ -0,0 +1,133 @@
+import React from "react";
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggle,
+  Badge,
+  SelectOptionProps,
+  MenuToggleElement,
+} from "@patternfly/react-core";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+
+export interface ISimpleSelectBasicProps {
+  onChange: (selection: string | string[]) => void;
+  options: SelectOptionProps[];
+  value?: string[];
+  placeholderText?: string;
+  id?: string;
+  toggleId?: string;
+  toggleAriaLabel?: string;
+  selectMultiple?: boolean;
+  width?: number;
+  noResultsFoundText?: string;
+  hideClearButton?: false;
+}
+
+export const SimpleSelectCheckbox: React.FC<ISimpleSelectBasicProps> = ({
+  onChange,
+  options,
+  value,
+  placeholderText = "Select...",
+  id,
+  toggleId,
+  toggleAriaLabel,
+  width,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selectedItems, setSelectedItems] = React.useState<string[]>([]);
+  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(
+    [
+      { value: "select-all", label: "Select All", children: "Select All" },
+      ...options,
+    ]
+  );
+
+  React.useEffect(() => {
+    setSelectedItems(value || []);
+  }, [value]);
+
+  React.useEffect(() => {
+    const updatedOptions = [
+      { value: "select-all", label: "Select All", children: "Select All" },
+      ...options,
+    ];
+    setSelectOptions(updatedOptions);
+  }, [options]);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    selectionValue: string | number | undefined
+  ) => {
+    const value = selectionValue as string;
+    if (value === "select-all") {
+      if (selectedItems.length === options.length) {
+        setSelectedItems([]);
+        onChange([]);
+      } else {
+        const allItemValues = options.map((option) => option.value as string);
+        setSelectedItems(allItemValues);
+        onChange(allItemValues);
+      }
+    } else {
+      if (selectedItems.includes(value)) {
+        const newSelections = selectedItems.filter((item) => item !== value);
+        setSelectedItems(newSelections);
+        onChange(newSelections);
+      } else {
+        const newSelections = [...selectedItems, value];
+        setSelectedItems(newSelections);
+        onChange(newSelections);
+      }
+    }
+  };
+
+  return (
+    <Select
+      role="menu"
+      id={id}
+      isOpen={isOpen}
+      selected={selectedItems}
+      onSelect={onSelect}
+      onOpenChange={setIsOpen}
+      toggle={(toggleref: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleref}
+          onClick={onToggleClick}
+          style={{ width: width && width + "px" }}
+          isExpanded={isOpen}
+          id={toggleId}
+        >
+          <span className={spacing.mrSm}>{placeholderText}</span>
+          {selectedItems.length > 0 && (
+            <Badge isRead>{selectedItems.length}</Badge>
+          )}
+        </MenuToggle>
+      )}
+      aria-label={toggleAriaLabel}
+    >
+      <SelectList>
+        {selectOptions.map((option, index) => (
+          <SelectOption
+            hasCheckbox
+            key={option.value}
+            isFocused={index === 0}
+            onClick={() => onSelect(undefined, option.value)}
+            isSelected={
+              option.value === "select-all"
+                ? selectedItems.length === options.length
+                : selectedItems.includes(option.value as string)
+            }
+            {...option}
+          >
+            {option.children || option.value}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+};
diff --git a/client/src/app/components/target-card/target-card.tsx b/client/src/app/components/target-card/target-card.tsx
@@ -25,7 +25,7 @@ import {
   SelectVariant,
   SelectOptionObject,
 } from "@patternfly/react-core/deprecated";
-import { GripVerticalIcon } from "@patternfly/react-icons";
+import { GripVerticalIcon, InfoCircleIcon } from "@patternfly/react-icons";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import { useTranslation } from "react-i18next";
 
@@ -86,6 +86,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
 
   const handleCardClick = (event: React.MouseEvent) => {
     // Stop 'select' event propagation
+    event.preventDefault();
     const eventTarget: any = event.target;
     if (eventTarget.type === "button") return;
 
@@ -110,16 +111,25 @@ export const TargetCard: React.FC<TargetCardProps> = ({
   return (
     <Card
       onClick={handleCardClick}
-      isSelectable={!!cardSelected}
+      isSelectable
       isSelected={isCardSelected}
       className="pf-v5-l-stack pf-v5-l-stack__item pf-m-fill"
     >
       <CardHeader
         selectableActions={{
           selectableActionId: "" + target.id,
+          selectableActionAriaLabelledby: `${target.name}-selectable-action-label`,
           isChecked: isCardSelected,
         }}
-      />
+      >
+        <Label
+          id={`${target.provider}-selectable-action-label`}
+          variant="outline"
+          icon={<InfoCircleIcon />}
+        >
+          {target.provider}
+        </Label>
+      </CardHeader>
       <CardBody>
         <Flex>
           <FlexItem>
diff --git a/client/src/app/pages/applications/analysis-wizard/analysis-wizard.tsx b/client/src/app/pages/applications/analysis-wizard/analysis-wizard.tsx
@@ -72,7 +72,7 @@ const defaultTaskData: TaskData = {
 
 export const defaultTaskgroup: Taskgroup = {
   name: `taskgroup.analyzer`,
-  addon: "analyzer",
+  kind: "analyzer",
   data: {
     ...defaultTaskData,
   },
@@ -359,7 +359,7 @@ export const AnalysisWizard: React.FC<IAnalysisWizard> = ({
           isDisabled={!isStepEnabled(StepId.SetTargets)}
           footer={{ isNextDisabled: !isStepEnabled(StepId.SetTargets + 1) }}
         >
-          <SetTargets />
+          <SetTargets applications={applications} />
         </WizardStep>,
         <WizardStep
           key={StepId.Scope}
diff --git a/client/src/app/pages/applications/analysis-wizard/set-targets.tsx b/client/src/app/pages/applications/analysis-wizard/set-targets.tsx
@@ -7,6 +7,7 @@ import {
   GalleryItem,
   Form,
   Alert,
+  SelectOptionProps,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
@@ -15,24 +16,53 @@ import { TargetCard } from "@app/components/target-card/target-card";
 import { AnalysisWizardFormValues } from "./schema";
 import { useSetting } from "@app/queries/settings";
 import { useFetchTargets } from "@app/queries/targets";
-import { Target } from "@app/api/models";
-import { SimpleSelectTypeahead } from "@app/components/SimpleSelectTypeahead";
-
-export const SetTargets: React.FC = () => {
+import { Application, TagCategory, Target } from "@app/api/models";
+import { useFetchTagCategories } from "@app/queries/tags";
+import { SimpleSelectCheckbox } from "@app/components/SimpleSelectCheckbox";
+interface SetTargetsProps {
+  applications: Application[];
+}
+
+export const SetTargets: React.FC<SetTargetsProps> = ({ applications }) => {
   const { t } = useTranslation();
 
   const { targets } = useFetchTargets();
 
-  const [provider, setProvider] = useState("Java");
-
   const targetOrderSetting = useSetting("ui.target.order");
 
   const { watch, setValue, getValues } =
     useFormContext<AnalysisWizardFormValues>();
+
   const values = getValues();
   const formLabels = watch("formLabels");
   const selectedTargets = watch("selectedTargets");
 
+  const { tagCategories, isFetching, fetchError } = useFetchTagCategories();
+
+  const findCategoryForTag = (tagId: number) => {
+    return tagCategories.find(
+      (category: TagCategory) =>
+        category.tags?.some((categoryTag) => categoryTag.id === tagId)
+    );
+  };
+
+  const initialProviders = Array.from(
+    new Set(
+      applications
+        .flatMap((app) => app.tags || [])
+        .map((tag) => {
+          return {
+            category: findCategoryForTag(tag.id),
+            tag,
+          };
+        })
+        .filter((tagWithCat) => tagWithCat?.category?.name === "Language")
+        .map((tagWithCat) => tagWithCat.tag.name)
+    )
+  ).filter((name) => name !== undefined);
+
+  const [provider, setProvider] = useState(initialProviders);
+
   const handleOnSelectedCardTargetChange = (selectedLabelName: string) => {
     const otherSelectedLabels = formLabels?.filter((formLabel) => {
       return formLabel.name !== selectedLabelName;
@@ -124,6 +154,10 @@ export const SetTargets: React.FC = () => {
     }
   };
 
+  const allProviders = targets.flatMap((target) => target.provider);
+
+  const languageOptions = Array.from(new Set(allProviders));
+
   return (
     <Form
       onSubmit={(event) => {
@@ -136,26 +170,21 @@ export const SetTargets: React.FC = () => {
         </Title>
         <Text>{t("wizard.label.setTargets")}</Text>
       </TextContent>
-      <SimpleSelectTypeahead
-        width={200}
+      <SimpleSelectCheckbox
+        placeholderText="Select a language..."
+        width={300}
         value={provider}
-        toggleAriaLabel="Action select dropdown toggle"
-        toggleId="action-select-toggle"
-        hideClearButton
-        id="action-select"
-        options={[
-          {
-            value: "Java",
-            children: "Java",
-          },
-          {
-            value: "Go",
-            children: "Go",
-          },
-        ]}
+        options={languageOptions?.map((language): SelectOptionProps => {
+          return {
+            children: <div>{language}</div>,
+
+            value: language,
+          };
+        })}
         onChange={(selection) => {
-          setProvider(selection as string);
+          setProvider(selection as string[]);
         }}
+        toggleId="language-select-toggle"
       />
       {values.selectedTargets.length === 0 &&
         values.customRulesFiles.length === 0 &&
@@ -172,8 +201,10 @@ export const SetTargets: React.FC = () => {
               const matchingTarget = targets.find((target) => target.id === id);
 
               const isSelected = selectedTargets?.includes(id);
-
-              if (matchingTarget && matchingTarget.provider === provider) {
+              if (
+                matchingTarget &&
+                provider?.some((p) => matchingTarget?.provider?.includes(p))
+              ) {
                 return (
                   <GalleryItem key={index}>
                     <TargetCard
diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -148,7 +148,7 @@ export const ApplicationsTable: React.FC = () => {
     tasks.find((task: Task) => task.application?.id === application.id);
 
   const { tasks, hasActiveTasks } = useFetchTasks(
-    { addon: "analyzer" },
+    { kind: "analyzer", addon: "analyzer" },
     isAnalyzeModalOpen
   );
 
diff --git a/client/src/app/pages/migration-targets/components/custom-target-form.tsx b/client/src/app/pages/migration-targets/components/custom-target-form.tsx
@@ -307,7 +307,7 @@ export const CustomTargetForm: React.FC<CustomTargetFormProps> = ({
             },
           }),
       },
-      provider: providerType || "Java",
+      provider: [providerType] || ["Java"],
     };
 
     if (target) {
diff --git a/client/src/app/pages/migration-targets/migration-targets.tsx b/client/src/app/pages/migration-targets/migration-targets.tsx
@@ -235,7 +235,10 @@ export const MigrationTargets: React.FC = () => {
                   const matchingTarget = targets.find(
                     (target) => target.id === id
                   );
-                  if (matchingTarget && matchingTarget.provider === provider) {
+                  if (
+                    matchingTarget &&
+                    matchingTarget.provider?.includes(provider)
+                  ) {
                     return (
                       <SortableItem
                         key={id}
diff --git a/client/src/app/queries/tasks.ts b/client/src/app/queries/tasks.ts
