Add language options from providers & select by app tags

Move to simple multi select menu in set targets step

Drive target selection options from targets list

Address missing checkbox on deselect

Add provider to target card header

Signed-off-by: Ian Bolton <[email protected]>

Author: ibolton336

client/src/app/api/models.ts

@@ -425,7 +425,7 @@ export interface Target {
   labels?: TargetLabel[];
   image?: RulesetImage;
   ruleset: Ruleset;
-  provider?: string;
+  provider?: string[];
 }
 
 export interface Metadata {

client/src/app/components/SimpleSelectCheckbox.tsx

@@ -0,0 +1,130 @@
+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: "show-all", label: "Show All", children: "Show All" }, ...options]
+  );
+
+  React.useEffect(() => {
+    setSelectedItems(value || []);
+  }, [value]);
+
+  React.useEffect(() => {
+    const updatedOptions = [
+      { value: "show-all", label: "Show All", children: "Show 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 === "show-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 === "show-all"
+                ? selectedItems.length === options.length
+                : selectedItems.includes(option.value as string)
+            }
+            {...option}
+          >
+            {option.children || option.value}
+          </SelectOption>
+        ))}
+      </SelectList>
+    </Select>
+  );
+};

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>

client/src/app/pages/applications/analysis-wizard/analysis-wizard.tsx

@@ -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}

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(Boolean);
+
+  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="Filter by 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

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) {

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}