🌱 Refactor table filterCategories definitions, rename the prop `key…

…` to `categoryKey` (#1800) Key prop is a special prop used internally by React. Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>
konveyor · Mar 28, 2024 · 7f7375a · 7f7375a
1 parent c2361a9
commit 7f7375a
Show file tree

Hide file tree

Showing 30 changed files with 76 additions and 76 deletions.
diff --git a/client/src/app/components/FilterToolbar/FilterToolbar.tsx b/client/src/app/components/FilterToolbar/FilterToolbar.tsx
@@ -32,7 +32,7 @@ export interface IBasicFilterCategory<
   TFilterCategoryKey extends string, // Unique identifiers for each filter category (inferred from key properties if possible)
 > {
   /** For use in the filterValues state object. Must be unique per category. */
-  key: TFilterCategoryKey;
+  categoryKey: TFilterCategoryKey;
   /** Title of the filter as displayed in the filter selection dropdown and filter chip groups. */
   title: string;
   /** Type of filter component to use to select the filter's content. */
@@ -119,22 +119,22 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
   const [isCategoryDropdownOpen, setIsCategoryDropdownOpen] =
     React.useState(false);
   const [currentFilterCategoryKey, setCurrentFilterCategoryKey] =
-    React.useState(filterCategories[0].key);
+    React.useState(filterCategories[0].categoryKey);
 
   const onCategorySelect = (
     category: FilterCategory<TItem, TFilterCategoryKey>
   ) => {
-    setCurrentFilterCategoryKey(category.key);
+    setCurrentFilterCategoryKey(category.categoryKey);
     setIsCategoryDropdownOpen(false);
   };
 
   const setFilterValue = (
     category: FilterCategory<TItem, TFilterCategoryKey>,
     newValue: FilterValue
-  ) => setFilterValues({ ...filterValues, [category.key]: newValue });
+  ) => setFilterValues({ ...filterValues, [category.categoryKey]: newValue });
 
   const currentFilterCategory = filterCategories.find(
-    (category) => category.key === currentFilterCategoryKey
+    (category) => category.categoryKey === currentFilterCategoryKey
   );
 
   const filterGroups = filterCategories.reduce(
@@ -157,8 +157,8 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
               .map((filterCategory) => {
                 return (
                   <DropdownItem
-                    id={`filter-category-${filterCategory.key}`}
-                    key={filterCategory.key}
+                    id={`filter-category-${filterCategory.categoryKey}`}
+                    key={filterCategory.categoryKey}
                     onClick={() => onCategorySelect(filterCategory)}
                   >
                     {filterCategory.title}
@@ -171,8 +171,8 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
     } else {
       return filterCategories.map((category) => (
         <DropdownItem
-          id={`filter-category-${category.key}`}
-          key={category.key}
+          id={`filter-category-${category.categoryKey}`}
+          key={category.categoryKey}
           onClick={() => onCategorySelect(category)}
         >
           {category.title}
@@ -215,13 +215,13 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
 
         {filterCategories.map((category) => (
           <FilterControl<TItem, TFilterCategoryKey>
-            key={category.key}
+            key={category.categoryKey}
             category={category}
-            filterValue={filterValues[category.key]}
+            filterValue={filterValues[category.categoryKey]}
             setFilterValue={(newValue) => setFilterValue(category, newValue)}
             showToolbarItem={
               showFiltersSideBySide ||
-              currentFilterCategory?.key === category.key
+              currentFilterCategory?.categoryKey === category.categoryKey
             }
             isDisabled={isDisabled}
           />

diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx
@@ -356,7 +356,7 @@ export const MultiselectFilterControl = <TItem,>({
 
   return (
     <ToolbarFilter
-      id={`filter-control-${category.key}`}
+      id={`filter-control-${category.categoryKey}`}
       chips={chips}
       deleteChip={(_, chip) => onFilterClear(chip)}
       deleteChipGroup={onFilterClearAll}

diff --git a/client/src/app/components/FilterToolbar/SearchFilterControl.tsx b/client/src/app/components/FilterToolbar/SearchFilterControl.tsx
@@ -40,7 +40,7 @@ export const SearchFilterControl = <TItem, TFilterCategoryKey extends string>({
     setFilterValue(trimmedValue ? [trimmedValue.replace(/\s+/g, " ")] : []);
   };
 
-  const id = `${category.key}-input`;
+  const id = `${category.categoryKey}-input`;
   return (
     <ToolbarFilter
       chips={filterValue || []}

diff --git a/client/src/app/components/FilterToolbar/SelectFilterControl.tsx b/client/src/app/components/FilterToolbar/SelectFilterControl.tsx
@@ -82,7 +82,7 @@ export const SelectFilterControl = <TItem, TFilterCategoryKey extends string>({
 
   return (
     <ToolbarFilter
-      id={`filter-control-${category.key}`}
+      id={`filter-control-${category.categoryKey}`}
       chips={chips}
       deleteChip={(_, chip) => onFilterClear(chip as string)}
       categoryName={category.title}

diff --git a/client/src/app/hooks/table-controls/filtering/getFilterHubRequestParams.ts b/client/src/app/hooks/table-controls/filtering/getFilterHubRequestParams.ts
@@ -98,7 +98,7 @@ export const getFilterHubRequestParams = <
     const { filterValues } = filterState;
     objectKeys(filterValues).forEach((categoryKey) => {
       const filterCategory = filterCategories?.find(
-        (category) => category.key === categoryKey
+        (category) => category.categoryKey === categoryKey
       );
       const filterValue = filterValues[categoryKey];
       if (!filterCategory || !filterValue) return;

diff --git a/client/src/app/hooks/table-controls/filtering/getLocalFilterDerivedState.ts b/client/src/app/hooks/table-controls/filtering/getLocalFilterDerivedState.ts
@@ -48,7 +48,7 @@ export const getLocalFilterDerivedState = <
       const values = filterValues[categoryKey];
       if (!values || values.length === 0) return true;
       const filterCategory = filterCategories.find(
-        (category) => category.key === categoryKey
+        (category) => category.categoryKey === categoryKey
       );
       let itemValue = (item as any)[categoryKey];
       if (filterCategory?.getItemValue) {

diff --git a/client/src/app/pages/applications/analysis-wizard/custom-rules.tsx b/client/src/app/pages/applications/analysis-wizard/custom-rules.tsx
@@ -118,7 +118,7 @@ export const CustomRules: React.FC = () => {
 
   const filterCategories: FilterCategory<IReadFile, "name">[] = [
     {
-      key: "name",
+      categoryKey: "name",
       title: t("terms.name"),
       type: FilterType.search,
       placeholderText:

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -338,7 +338,7 @@ export const ApplicationsTable: React.FC = () => {
     }),
     filterCategories: [
       {
-        key: "name",
+        categoryKey: "name",
         title: t("terms.name"),
         type: FilterType.multiselect,
         placeholderText:
@@ -353,7 +353,7 @@ export const ApplicationsTable: React.FC = () => {
         ].map((name) => ({ key: name, value: name })),
       },
       {
-        key: "archetypes",
+        categoryKey: "archetypes",
         title: t("terms.archetypes"),
         type: FilterType.multiselect,
         placeholderText:
@@ -382,7 +382,7 @@ export const ApplicationsTable: React.FC = () => {
         logicOperator: "OR",
       },
       {
-        key: "businessService",
+        categoryKey: "businessService",
         title: t("terms.businessService"),
         placeholderText:
           t("actions.filterBy", {
@@ -398,7 +398,7 @@ export const ApplicationsTable: React.FC = () => {
         getItemValue: (item) => item.businessService?.name || "",
       },
       {
-        key: "identities",
+        categoryKey: "identities",
         title: t("terms.credentialType"),
         placeholderText:
           t("actions.filterBy", {
@@ -423,7 +423,7 @@ export const ApplicationsTable: React.FC = () => {
         },
       },
       {
-        key: "repository",
+        categoryKey: "repository",
         title: t("terms.repositoryType"),
         placeholderText:
           t("actions.filterBy", {
@@ -437,7 +437,7 @@ export const ApplicationsTable: React.FC = () => {
         getItemValue: (item) => item?.repository?.kind || "",
       },
       {
-        key: "binary",
+        categoryKey: "binary",
         title: t("terms.artifact"),
         placeholderText:
           t("actions.filterBy", {
@@ -458,7 +458,7 @@ export const ApplicationsTable: React.FC = () => {
         },
       },
       {
-        key: "tags",
+        categoryKey: "tags",
         title: t("terms.tags"),
         type: FilterType.multiselect,
         placeholderText:
@@ -483,7 +483,7 @@ export const ApplicationsTable: React.FC = () => {
         },
       },
       {
-        key: "risk",
+        categoryKey: "risk",
         title: t("terms.risk"),
         type: FilterType.multiselect,
         placeholderText:

diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-facts.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-facts.tsx
@@ -33,7 +33,7 @@ export const ApplicationFacts: React.FC<IApplicationRiskProps> = ({
 
   const filterCategories: FilterCategory<Fact, "source">[] = [
     {
-      key: "source",
+      categoryKey: "source",
       title: t("terms.source"),
       type: FilterType.multiselect,
       placeholderText: t("terms.source"),

diff --git a/client/src/app/pages/applications/components/application-tags/application-tags.tsx b/client/src/app/pages/applications/components/application-tags/application-tags.tsx
@@ -130,7 +130,7 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
     "source" | "tagCategory"
   >[] = [
     {
-      key: "source",
+      categoryKey: "source",
       title: t("terms.source"),
       type: FilterType.multiselect,
       placeholderText: t("terms.source"),
@@ -142,7 +142,7 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
       logicOperator: "OR",
     },
     {
-      key: "tagCategory",
+      categoryKey: "tagCategory",
       title: t("terms.tagCategory"),
       type: FilterType.multiselect,
       placeholderText: t("terms.tagCategory"),

diff --git a/client/src/app/pages/applications/manage-imports-details/manage-imports-details.tsx b/client/src/app/pages/applications/manage-imports-details/manage-imports-details.tsx
@@ -101,7 +101,7 @@ export const ManageImportsDetails: React.FC = () => {
     "Application Name"
   >[] = [
     {
-      key: "Application Name",
+      categoryKey: "Application Name",
       title: "Application Name",
       type: FilterType.search,
       placeholderText: "Filter by application name...",

diff --git a/client/src/app/pages/applications/manage-imports/manage-imports.tsx b/client/src/app/pages/applications/manage-imports/manage-imports.tsx
@@ -96,7 +96,7 @@ export const ManageImports: React.FC = () => {
     hasActionsColumn: true,
     filterCategories: [
       {
-        key: "filename",
+        categoryKey: "filename",
         title: t("terms.filename"),
         type: FilterType.search,
         placeholderText:

diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -217,7 +217,7 @@ const Archetypes: React.FC = () => {
 
     filterCategories: [
       {
-        key: "name",
+        categoryKey: "name",
         title: t("terms.name"),
         type: FilterType.search,
         placeholderText:
@@ -229,7 +229,7 @@ const Archetypes: React.FC = () => {
         },
       },
       {
-        key: "application.name",
+        categoryKey: "application.name",
         title: t("terms.applicationName"),
         type: FilterType.multiselect,
         logicOperator: "OR",

diff --git a/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx b/client/src/app/pages/assessment-management/assessment-settings/assessment-settings-page.tsx
@@ -117,7 +117,7 @@ const AssessmentSettings: React.FC = () => {
     hasActionsColumn: true,
     filterCategories: [
       {
-        key: "name",
+        categoryKey: "name",
         title: t("terms.name"),
         type: FilterType.search,
         placeholderText:

diff --git a/client/src/app/pages/controls/business-services/business-services.tsx b/client/src/app/pages/controls/business-services/business-services.tsx
@@ -95,7 +95,7 @@ export const BusinessServices: React.FC = () => {
     hasActionsColumn: true,
     filterCategories: [
       {
-        key: "name",
+        categoryKey: "name",
         title: t("terms.name"),
         type: FilterType.search,
         placeholderText:
@@ -107,7 +107,7 @@ export const BusinessServices: React.FC = () => {
         },
       },
       {
-        key: "description",
+        categoryKey: "description",
         title: t("terms.description"),
         type: FilterType.search,
         placeholderText:
@@ -119,7 +119,7 @@ export const BusinessServices: React.FC = () => {
         },
       },
       {
-        key: "owner",
+        categoryKey: "owner",
         title: t("terms.createdBy"),
         type: FilterType.search,
         placeholderText:

diff --git a/client/src/app/pages/controls/job-functions/job-functions.tsx b/client/src/app/pages/controls/job-functions/job-functions.tsx
@@ -61,7 +61,7 @@ export const JobFunctions: React.FC = () => {
 
   const filterCategories: FilterCategory<JobFunction, "name">[] = [
     {
-      key: "name",
+      categoryKey: "name",
       title: t("terms.name"),
       type: FilterType.search,
       placeholderText:

diff --git a/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx b/client/src/app/pages/controls/stakeholder-groups/stakeholder-groups.tsx
@@ -115,7 +115,7 @@ export const StakeholderGroups: React.FC = () => {
     hasActionsColumn: true,
     filterCategories: [
       {
-        key: "name",
+        categoryKey: "name",
         title: t("terms.name"),
         type: FilterType.search,
         placeholderText:
@@ -127,7 +127,7 @@ export const StakeholderGroups: React.FC = () => {
         },
       },
       {
-        key: "description",
+        categoryKey: "description",
         title: t("terms.description"),
         type: FilterType.search,
         placeholderText:
@@ -139,7 +139,7 @@ export const StakeholderGroups: React.FC = () => {
         },
       },
       {
-        key: "stakeholders",
+        categoryKey: "stakeholders",
         title: t("terms.stakeholders"),
         type: FilterType.search,
         placeholderText:

diff --git a/client/src/app/pages/controls/stakeholders/stakeholders.tsx b/client/src/app/pages/controls/stakeholders/stakeholders.tsx
@@ -112,7 +112,7 @@ export const Stakeholders: React.FC = () => {
     hasActionsColumn: true,
     filterCategories: [
       {
-        key: "email",
+        categoryKey: "email",
         title: t("terms.email"),
         type: FilterType.search,
         placeholderText:
@@ -124,7 +124,7 @@ export const Stakeholders: React.FC = () => {
         },
       },
       {
-        key: "name",
+        categoryKey: "name",
         title: t("terms.name"),
         type: FilterType.search,
         placeholderText:
@@ -136,7 +136,7 @@ export const Stakeholders: React.FC = () => {
         },
       },
       {
-        key: "jobFunction",
+        categoryKey: "jobFunction",
         title: t("terms.jobFunction"),
         type: FilterType.search,
         placeholderText:
@@ -148,7 +148,7 @@ export const Stakeholders: React.FC = () => {
         },
       },
       {
-        key: "stakeholderGroups",
+        categoryKey: "stakeholderGroups",
         title: t("terms.stakeholderGroups"),
         type: FilterType.search,
         placeholderText:

diff --git a/client/src/app/pages/controls/tags/tags.tsx b/client/src/app/pages/controls/tags/tags.tsx
@@ -170,7 +170,7 @@ export const Tags: React.FC = () => {
     "tags" | "rank" | "color"
   >[] = [
     {
-      key: "tags",
+      categoryKey: "tags",
       title: t("terms.name"),
       type: FilterType.multiselect,
       placeholderText:
@@ -208,7 +208,7 @@ export const Tags: React.FC = () => {
       ),
     },
     {
-      key: "rank",
+      categoryKey: "rank",
       title: t("terms.rank"),
       type: FilterType.search,
       placeholderText:
@@ -220,7 +220,7 @@ export const Tags: React.FC = () => {
       },
     },
     {
-      key: "color",
+      categoryKey: "color",
       title: t("terms.color"),
       type: FilterType.search,
       placeholderText: