chore(dashboard): should use locale-specific display for filter categ…

…ories
cryostatio · Aug 15, 2023 · c54e6b5 · c54e6b5
1 parent 5cbdc8a
commit c54e6b5
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 22 deletions.
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -22,6 +22,7 @@
   "DOWNLOAD": "Download",
   "EDIT": "Edit",
   "FILTER_NAME": "Name",
+  "FILTER_TOPIC": "Topic",
   "HELP": "Help",
   "HOUR": "Hour",
   "HOUR_one": "Hour",

diff --git a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisFilters.tsx
@@ -30,6 +30,7 @@ import {
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { AutomatedAnalysisNameFilter } from './Filters/AutomatedAnalysisNameFilter';
 import { AutomatedAnalysisTopicFilter } from './Filters/AutomatedAnalysisTopicFilter';
@@ -50,12 +51,19 @@ export interface AutomatedAnalysisFiltersProps {
   updateFilters: (target: string, updateFilterOptions: UpdateFilterOptions) => void;
 }
 
-export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> = ({ updateFilters, ...props }) => {
+export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> = ({
+  updateFilters,
+  target,
+  evaluations,
+  filters,
+  ..._props
+}) => {
   const dispatch = useDispatch<StateDispatch>();
+  const { t } = useTranslation();
 
   const currentCategory = useSelector((state: RootState) => {
     const targetAutomatedAnalysisFilters = state.automatedAnalysisFilters.targetFilters.filter(
-      (targetFilter) => targetFilter.target === props.target
+      (targetFilter) => targetFilter.target === target
     );
     if (!targetAutomatedAnalysisFilters.length) {
       return 'Name';
@@ -72,33 +80,47 @@ export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> =
   const onCategorySelect = React.useCallback(
     (category) => {
       setIsCategoryDropdownOpen(false);
-      dispatch(automatedAnalysisUpdateCategoryIntent(props.target, category));
+      dispatch(automatedAnalysisUpdateCategoryIntent(target, category));
     },
-    [dispatch, setIsCategoryDropdownOpen, props.target]
+    [dispatch, setIsCategoryDropdownOpen, target]
   );
 
   const onDelete = React.useCallback(
     (category: string | ToolbarChipGroup, value) =>
-      updateFilters(props.target, { filterKey: category as string, filterValue: value, deleted: true }),
-    [updateFilters, props.target]
+      updateFilters(target, { filterKey: category as string, filterValue: value, deleted: true }),
+    [updateFilters, target]
   );
 
   const onDeleteGroup = React.useCallback(
     (category: string | ToolbarChipGroup) =>
-      updateFilters(props.target, { filterKey: category as string, deleted: true, deleteOptions: { all: true } }),
-    [updateFilters, props.target]
+      updateFilters(target, { filterKey: category as string, deleted: true, deleteOptions: { all: true } }),
+    [updateFilters, target]
   );
 
   const onNameInput = React.useCallback(
-    (inputName: string) => updateFilters(props.target, { filterKey: currentCategory, filterValue: inputName }),
-    [updateFilters, currentCategory, props.target]
+    (inputName: string) => updateFilters(target, { filterKey: currentCategory, filterValue: inputName }),
+    [updateFilters, currentCategory, target]
   );
 
   const onTopicInput = React.useCallback(
     (inputTopic: string) => {
-      updateFilters(props.target, { filterKey: currentCategory, filterValue: inputTopic });
+      updateFilters(target, { filterKey: currentCategory, filterValue: inputTopic });
     },
-    [updateFilters, currentCategory, props.target]
+    [updateFilters, currentCategory, target]
+  );
+
+  const getCategoryDisplay = React.useCallback(
+    (category: string) => {
+      switch (category) {
+        case 'Name':
+          return t('FILTER_NAME', { ns: 'common' });
+        case 'Topic':
+          return t('FILTER_TOPIC', { ns: 'common' });
+        default:
+          throw new Error(`Unknown Automated Analysis Filter Category: ${category}`);
+      }
+    },
+    [t]
   );
 
   const categoryDropdown = React.useMemo(() => {
@@ -108,7 +130,7 @@ export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> =
         position={DropdownPosition.left}
         toggle={
           <DropdownToggle aria-label={currentCategory} onToggle={onCategoryToggle}>
-            <FilterIcon /> {currentCategory}
+            <FilterIcon /> {getCategoryDisplay(currentCategory)}
           </DropdownToggle>
         }
         isOpen={isCategoryDropdownOpen}
@@ -119,37 +141,37 @@ export const AutomatedAnalysisFilters: React.FC<AutomatedAnalysisFiltersProps> =
         ))}
       />
     );
-  }, [isCategoryDropdownOpen, currentCategory, onCategoryToggle, onCategorySelect]);
+  }, [isCategoryDropdownOpen, currentCategory, onCategoryToggle, onCategorySelect, getCategoryDisplay]);
 
   const filterDropdownItems = React.useMemo(
     () => [
       <AutomatedAnalysisNameFilter
         key={'name'}
-        evaluations={props.evaluations}
-        filteredNames={props.filters.Name}
+        evaluations={evaluations}
+        filteredNames={filters.Name}
         onSubmit={onNameInput}
       />,
       <AutomatedAnalysisTopicFilter
         key={'topic'}
-        evaluations={props.evaluations}
-        filteredTopics={props.filters.Topic}
+        evaluations={evaluations}
+        filteredTopics={filters.Topic}
         onSubmit={onTopicInput}
-      ></AutomatedAnalysisTopicFilter>,
+      />,
     ],
-    [props.evaluations, props.filters.Name, props.filters.Topic, onNameInput, onTopicInput]
+    [evaluations, filters.Name, filters.Topic, onNameInput, onTopicInput]
   );
 
   return (
     <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
       <ToolbarGroup variant="filter-group">
         <ToolbarItem>
           {categoryDropdown}
-          {Object.keys(props.filters)
+          {Object.keys(filters)
             .filter((f) => f !== 'Score')
             .map((filterKey, i) => (
               <ToolbarFilter
                 key={filterKey}
-                chips={props.filters[filterKey]}
+                chips={filters[filterKey]}
                 deleteChip={onDelete}
                 deleteChipGroup={onDeleteGroup}
                 categoryName={filterKey}