Merge branch 'main' into fix-personae

konveyor · Jul 10, 2023 · 8df5543 · 8df5543
2 parents 3a4cd21 + 4cdfa66
commit 8df5543
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 31 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -346,6 +346,7 @@
     "unknown": "Unknown",
     "unsuitableForContainers": "Unsuitable for containers",
     "uploadApplicationFile": "Upload your application file",
+    "url": "URL",
     "user": "User",
     "version": "Version",
     "workPriority": "Work priority",

diff --git a/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx b/client/src/app/pages/applications/applications-table-analyze/applications-table-analyze.tsx
@@ -455,24 +455,18 @@ export const ApplicationsTableAnalyze: React.FC = () => {
     ? [
         <ConditionalTooltip
           key="delete-app-tooltip"
-          isTooltipEnabled={
-            selectedRows.length < 1 ||
-            selectedRows.some(
-              (application) => application.migrationWave !== null
-            )
-          }
+          isTooltipEnabled={selectedRows.some(
+            (application) => application.migrationWave !== null
+          )}
           content={
             "Cannot delete application(s) assigned to migration wave(s)."
           }
         >
           <DropdownItem
             key="applications-bulk-delete"
-            isDisabled={
-              selectedRows.length < 1 ||
-              selectedRows.some(
-                (application) => application.migrationWave !== null
-              )
-            }
+            isDisabled={selectedRows.some(
+              (application) => application.migrationWave !== null
+            )}
             onClick={() => {
               openBulkDeleteModal(selectedRows);
             }}

diff --git a/...rc/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx b/...rc/app/pages/applications/applications-table-assessment/applications-table-assessment.tsx
@@ -631,24 +631,18 @@ export const ApplicationsTable: React.FC = () => {
     ? [
         <ConditionalTooltip
           key="delete-app-tooltip"
-          isTooltipEnabled={
-            selectedRows.length < 1 ||
-            selectedRows.some(
-              (application) => application.migrationWave !== null
-            )
-          }
+          isTooltipEnabled={selectedRows.some(
+            (application) => application.migrationWave !== null
+          )}
           content={
             "Cannot delete application(s) assigned to migration wave(s)."
           }
         >
           <DropdownItem
             key="applications-bulk-delete"
-            isDisabled={
-              selectedRows.length < 1 ||
-              selectedRows.some(
-                (application) => application.migrationWave !== null
-              )
-            }
+            isDisabled={selectedRows.some(
+              (application) => application.migrationWave !== null
+            )}
             onClick={() => {
               openBulkDeleteModal(selectedRows);
             }}

diff --git a/client/src/app/pages/external/jira/trackers.tsx b/client/src/app/pages/external/jira/trackers.tsx
@@ -118,10 +118,22 @@ export const JiraTrackers: React.FC = () => {
           return item?.name || "";
         },
       },
+      {
+        key: "url",
+        title: t("terms.url"),
+        type: FilterType.search,
+        placeholderText:
+          t("actions.filterBy", {
+            what: t("terms.url").toLowerCase(),
+          }) + "...",
+        getItemValue: (item) => {
+          return item?.url || "";
+        },
+      },
     ],
     getSortValues: (tracker) => ({
       name: tracker.name || "",
-      url: "", // TODO
+      url: tracker.url || "",
     }),
     sortableColumns: ["name", "url"],
     hasPagination: true,

diff --git a/client/src/app/shared/components/FilterToolbar/FilterControl.tsx b/client/src/app/shared/components/FilterToolbar/FilterControl.tsx
@@ -29,6 +29,7 @@ export const FilterControl = <TItem, TFilterCategoryKey extends string>({
   if (category.type === FilterType.select) {
     return (
       <SelectFilterControl
+        isScrollable
         category={category as ISelectFilterCategory<TItem, TFilterCategoryKey>}
         {...props}
       />
@@ -49,6 +50,7 @@ export const FilterControl = <TItem, TFilterCategoryKey extends string>({
   if (category.type === FilterType.multiselect) {
     return (
       <MultiselectFilterControl
+        isScrollable
         category={
           category as IMultiselectFilterCategory<TItem, TFilterCategoryKey>
         }

diff --git a/client/src/app/shared/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/shared/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -13,12 +13,16 @@ import {
   IMultiselectFilterCategory,
   OptionPropsWithKey,
 } from "./FilterToolbar";
+import { css } from "@patternfly/react-styles";
+
+import "./select-overrides.css";
 
 export interface IMultiselectFilterControlProps<
   TItem,
   TFilterCategoryKey extends string
 > extends IFilterControlProps<TItem, TFilterCategoryKey> {
   category: IMultiselectFilterCategory<TItem, TFilterCategoryKey>;
+  isScrollable?: boolean;
 }
 
 export const MultiselectFilterControl = <
@@ -30,6 +34,7 @@ export const MultiselectFilterControl = <
   setFilterValue,
   showToolbarItem,
   isDisabled = false,
+  isScrollable = false,
 }: React.PropsWithChildren<
   IMultiselectFilterControlProps<TItem, TFilterCategoryKey>
 >): JSX.Element | null => {
@@ -47,10 +52,12 @@ export const MultiselectFilterControl = <
   const getChipFromOptionValue = (
     optionValue: string | SelectOptionObject | undefined
   ) => (optionValue ? optionValue.toString() : "");
+
   const getOptionKeyFromChip = (chip: string) =>
     category.selectOptions.find(
       (optionProps) => optionProps.value.toString() === chip
     )?.key;
+
   const getOptionValueFromOptionKey = (optionKey: string) =>
     category.selectOptions.find((optionProps) => optionProps.key === optionKey)
       ?.value;
@@ -71,6 +78,7 @@ export const MultiselectFilterControl = <
       }
     }
   };
+
   const onFilterClear = (chip: string) => {
     const optionKey = getOptionKeyFromChip(chip);
     const newValue = filterValue
@@ -83,6 +91,7 @@ export const MultiselectFilterControl = <
   const selections = filterValue
     ? filterValue.map(getOptionValueFromOptionKey)
     : null;
+
   const chips = selections ? selections.map(getChipFromOptionValue) : [];
 
   const renderSelectOptions = (options: OptionPropsWithKey[]) =>
@@ -111,23 +120,25 @@ export const MultiselectFilterControl = <
 
   return (
     <ToolbarFilter
+      id={`filter-control-${category.key}`}
       chips={chips}
       deleteChip={(_, chip) => onFilterClear(chip as string)}
       categoryName={category.title}
       showToolbarItem={showToolbarItem}
     >
       <Select
-        variant={SelectVariant.checkbox}
+        className={css(isScrollable && "isScrollable")}
         aria-label={category.title}
         toggleId={`${category.key}-filter-value-select`}
         onToggle={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)}
         selections={selections || []}
         onSelect={(_, value) => onFilterSelect(value)}
         isOpen={isFilterDropdownOpen}
         placeholderText={category.placeholderText}
+        isDisabled={isDisabled || category.selectOptions.length === 0}
+        variant={SelectVariant.checkbox}
         hasInlineFilter
         onFilter={onOptionsFilter}
-        isDisabled={isDisabled || category.selectOptions.length === 0}
       >
         {renderSelectOptions(category.selectOptions)}
       </Select>

diff --git a/client/src/app/shared/components/FilterToolbar/SelectFilterControl.tsx b/client/src/app/shared/components/FilterToolbar/SelectFilterControl.tsx
@@ -6,13 +6,17 @@ import {
   SelectOptionObject,
 } from "@patternfly/react-core/deprecated";
 import { IFilterControlProps } from "./FilterControl";
-import { ISelectFilterCategory } from "./FilterToolbar";
+import { ISelectFilterCategory, OptionPropsWithKey } from "./FilterToolbar";
+import { css } from "@patternfly/react-styles";
+
+import "./select-overrides.css";
 
 export interface ISelectFilterControlProps<
   TItem,
   TFilterCategoryKey extends string
 > extends IFilterControlProps<TItem, TFilterCategoryKey> {
   category: ISelectFilterCategory<TItem, TFilterCategoryKey>;
+  isScrollable?: boolean;
 }
 
 export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
@@ -21,6 +25,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
   setFilterValue,
   showToolbarItem,
   isDisabled = false,
+  isScrollable = false,
 }: React.PropsWithChildren<
   ISelectFilterControlProps<TItem, TFilterCategoryKey>
 >): JSX.Element | null => {
@@ -32,13 +37,16 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
     category.selectOptions.find(
       (optionProps) => optionProps.value === optionValue
     )?.key;
+
   const getChipFromOptionValue = (
     optionValue: string | SelectOptionObject | undefined
   ) => (optionValue ? optionValue.toString() : "");
+
   const getOptionKeyFromChip = (chip: string) =>
     category.selectOptions.find(
       (optionProps) => optionProps.value.toString() === chip
     )?.key;
+
   const getOptionValueFromOptionKey = (optionKey: string) =>
     category.selectOptions.find((optionProps) => optionProps.key === optionKey)
       ?.value;
@@ -48,6 +56,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
     setFilterValue(optionKey ? [optionKey] : null);
     setIsFilterDropdownOpen(false);
   };
+
   const onFilterClear = (chip: string) => {
     const optionKey = getOptionKeyFromChip(chip);
     const newValue = filterValue
@@ -60,8 +69,14 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
   const selections = filterValue
     ? filterValue.map(getOptionValueFromOptionKey)
     : null;
+
   const chips = selections ? selections.map(getChipFromOptionValue) : [];
 
+  const renderSelectOptions = (options: OptionPropsWithKey[]) =>
+    options.map((optionProps) => (
+      <SelectOption {...optionProps} key={optionProps.key} />
+    ));
+
   return (
     <ToolbarFilter
       id={`filter-control-${category.key}`}
@@ -71,6 +86,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
       showToolbarItem={showToolbarItem}
     >
       <Select
+        className={css(isScrollable && "isScrollable")}
         aria-label={category.title}
         toggleId={`${category.key}-filter-value-select`}
         onToggle={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)}
@@ -80,9 +96,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
         placeholderText="Any"
         isDisabled={isDisabled || category.selectOptions.length === 0}
       >
-        {category.selectOptions.map((optionProps) => (
-          <SelectOption {...optionProps} key={optionProps.key} />
-        ))}
+        {renderSelectOptions(category.selectOptions)}
       </Select>
     </ToolbarFilter>
   );

diff --git a/client/src/app/shared/components/FilterToolbar/select-overrides.css b/client/src/app/shared/components/FilterToolbar/select-overrides.css
@@ -0,0 +1,4 @@
+.pf-v5-c-select.isScrollable .pf-v5-c-select__menu {
+  max-height: 60vh;
+  overflow-y: auto;
+}