Merge pull request #696 from AppQuality/fix-ux-filters-tags-counters

🔧 fix(FiltersTags.tsx): import useCallback from react

Author: marcbon

src/pages/Campaign/useWidgets/Experience/widgets/Insights/filters/FiltersTags.tsx

@@ -10,6 +10,7 @@ import {
 } from 'src/features/uxFilters';
 import { styled } from 'styled-components';
 import { getSeverity } from '../utils';
+import { useFilterData } from './useFilterData';
 
 const buttonHeight = appTheme.space.lg; // 32
 const sectionMargin = appTheme.space.sm; // 12
@@ -73,9 +74,10 @@ const StyledButton = styled(Button)`
 
 export const FiltersTags = () => {
   const { t } = useTranslation();
-  const data = getCurrentUxData();
-
   const dispatch = useAppDispatch();
+  const data = getCurrentUxData();
+  const { counters: severitiesCounters } = useFilterData('severities');
+  const { counters: clustersCounters } = useFilterData('clusters');
 
   if (!data || !data.clusters || !data.severities) return null;
 
@@ -114,14 +116,16 @@ export const FiltersTags = () => {
               color={getSeverityInfo(getSeverity(item) as Severities, t).color}
               size="large"
             >
-              {item.name}
+              {data.severities.available.find((s) => s.id === item.id)?.name} (
+              {severitiesCounters[item.id] ?? 0})
               <Tag.Close onClick={removeSeverity(item.id)} />
             </Tag>
           ))}
 
           {data.clusters.selected.map((item) => (
             <Tag key={item.id} size="large" hue={appTheme.palette.grey[200]}>
-              {item.name}
+              {data.clusters.available.find((s) => s.id === item.id)?.name} (
+              {clustersCounters[item.id] ?? 0})
               <Tag.Close onClick={removeUseCase(item.id)} />
             </Tag>
           ))}

src/pages/Campaign/useWidgets/Experience/widgets/Insights/filters/SeverityFilter.tsx

@@ -2,8 +2,9 @@ import { CounterMultiselect } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch } from 'src/app/hooks';
 import { getCurrentUxData, updateFilters } from 'src/features/uxFilters';
-import { appTheme } from 'src/app/theme';
+import { getSeverityInfo } from 'src/common/components/utils/getSeverityInfo';
 import { useFilterData } from './useFilterData';
+import { getSeverity } from '../utils';
 
 export const SeverityFilter = () => {
   const { t } = useTranslation();
@@ -45,10 +46,7 @@ export const SeverityFilter = () => {
           className: `dropdown-severities-item-${item.name.toLowerCase()}`,
           label: `${item.name} (${counters[item.id] ?? 0})`,
           style: {
-            color:
-              appTheme.colors.bySeverity[
-                item.name.toLocaleLowerCase() as Severities
-              ],
+            color: getSeverityInfo(getSeverity(item) as Severities, t).color,
           },
           disabled:
             !counters[item.id] &&