Fix-campaign-insights

src/features/api/api.ts

@@ -32,6 +32,7 @@ export const apiSlice = createApi({
     'VideoTags',
     'Observations',
     'Insights',
+    'Clusters',
   ],
   endpoints: () => ({}),
 });

src/features/api/apiTags.ts

@@ -196,9 +196,11 @@ unguessApi.enhanceEndpoints({
     getCampaignsByCidInsights: {
       providesTags: ['Insights'],
     },
-
+    getCampaignsByCidClusters: {
+      providesTags: ['Clusters'],
+    },
     patchInsightsByIid: {
-      invalidatesTags: ['Insights'],
+      invalidatesTags: ['Insights', 'Clusters'],
     },
     deleteInsightsByIid: {
       invalidatesTags: ['Insights'],

src/features/bugsPage/severityFilter.ts

@@ -1,9 +1,15 @@
 import { useAppSelector } from 'src/app/hooks';
 
+type Tag = {
+  id: number;
+  name: string;
+  style?: string;
+};
+
 export type SeverityFilterType = {
   severities: {
-    available: { id: number; name: string }[];
-    selected: { id: number; name: string }[];
+    available: Tag[];
+    selected: Tag[];
   };
 };
 
@@ -18,19 +24,13 @@ export const SeverityFilter = {
     available: state ? state.severities.available : [],
     selected: state ? state.severities.selected : [],
   }),
-  setAvailable: (
-    state: SeverityFilterType,
-    severities: { id: number; name: string }[]
-  ) => ({
+  setAvailable: (state: SeverityFilterType, severities: Tag[]) => ({
     severities: {
       ...SeverityFilter.getCurrent(state),
       ...(severities ? { available: severities } : {}),
     },
   }),
-  filter: (
-    state: SeverityFilterType,
-    severities?: { id: number; name: string }[]
-  ) => ({
+  filter: (state: SeverityFilterType, severities?: Tag[]) => ({
     severities: {
       ...SeverityFilter.getCurrent(state),
       ...(severities ? { selected: severities } : {}),

src/features/uxFilters/clusterFilter.ts

@@ -1,9 +1,15 @@
 import { useAppSelector } from 'src/app/hooks';
 
+type Tag = {
+  id: number;
+  name: string;
+  style?: string;
+};
+
 export type ClusterFilterType = {
   clusters: {
-    available: { id: number; name: string }[];
-    selected: { id: number; name: string }[];
+    available: Tag[];
+    selected: Tag[];
   };
 };
 
@@ -18,19 +24,13 @@ export const ClusterFilter = {
     available: state?.clusters?.available ? state.clusters.available : [],
     selected: state?.clusters?.selected ? state.clusters.selected : [],
   }),
-  setAvailable: (
-    state: ClusterFilterType,
-    clusters?: { id: number; name: string }[]
-  ) => ({
+  setAvailable: (state: ClusterFilterType, clusters?: Tag[]) => ({
     clusters: {
       ...ClusterFilter.getCurrent(state),
       ...(clusters ? { available: clusters } : {}),
     },
   }),
-  filter: (
-    state: ClusterFilterType,
-    clusters?: { id: number; name: string }[]
-  ) => ({
+  filter: (state: ClusterFilterType, clusters?: Tag[]) => ({
     clusters: {
       ...ClusterFilter.getCurrent(state),
       ...(clusters ? { selected: clusters } : {}),

src/features/uxFilters/severityFilter.ts

@@ -1,9 +1,15 @@
 import { useAppSelector } from 'src/app/hooks';
 
+type Tag = {
+  id: number;
+  name: string;
+  style?: string;
+};
+
 export type SeverityFilterType = {
   severities: {
-    available: { id: number; name: string }[];
-    selected: { id: number; name: string }[];
+    available: Tag[];
+    selected: Tag[];
   };
 };
 
@@ -18,19 +24,13 @@ export const SeverityFilter = {
     available: state?.severities?.available ? state.severities.available : [],
     selected: state?.severities?.selected ? state.severities.selected : [],
   }),
-  setAvailable: (
-    state: SeverityFilterType,
-    severities?: { id: number; name: string }[]
-  ) => ({
+  setAvailable: (state: SeverityFilterType, severities?: Tag[]) => ({
     severities: {
       ...SeverityFilter.getCurrent(state),
       ...(severities ? { available: severities } : {}),
     },
   }),
-  filter: (
-    state: SeverityFilterType,
-    severities?: { id: number; name: string }[]
-  ) => ({
+  filter: (state: SeverityFilterType, severities?: Tag[]) => ({
     severities: {
       ...SeverityFilter.getCurrent(state),
       ...(severities ? { selected: severities } : {}),

src/pages/Campaign/useWidgets/Experience/useUxData.tsx

@@ -3,6 +3,7 @@ import {
   GetCampaignsByCidUxApiResponse,
   useGetCampaignsByCidClustersQuery,
   useGetCampaignsByCidUxQuery,
+  useGetCampaignsByCidVideoTagsQuery,
 } from 'src/features/api';
 import { useTranslation } from 'react-i18next';
 import { SeverityFilterType } from 'src/features/bugsPage/severityFilter';
@@ -27,12 +28,24 @@ export const useUxData = ({
     uxData?: GetCampaignsByCidUxApiResponse;
   }>();
 
-  const severitiesData = [
-    { id: 1, name: t('__INSIGHT_SEVERITY_MINOR') },
-    { id: 2, name: t('__INSIGHT_SEVERITY_MAJOR') },
-    { id: 3, name: t('__INSIGHT_SEVERITY_POSITIVE') },
-    { id: 4, name: t('__INSIGHT_SEVERITY_OBSERVATION') },
-  ];
+  const {
+    data: tags,
+    isLoading: isLoadingTags,
+    isFetching: isFetchingTags,
+    isError: isErrorTags,
+  } = useGetCampaignsByCidVideoTagsQuery({
+    cid: campaignId.toString(),
+  });
+
+  const severities = tags?.filter((tag) => tag.group.name === 'severity');
+  const severitiesData = severities
+    ?.map((severity) => severity.tags)
+    .flat()
+    .map((tag) => ({
+      id: tag.id,
+      name: tag.name,
+      style: tag.style,
+    }));
 
   const clustersData = [{ id: 0, name: t('__INSIGHT_CLUSTER_GENERAL') }];
 
@@ -71,8 +84,12 @@ export const useUxData = ({
   }, [uxData, clusters]);
 
   return {
-    isLoading: isLoadingCampaign || isFetchingCampaign,
-    isError: isErrorCampaign,
+    isLoading:
+      isLoadingCampaign ||
+      isFetchingCampaign ||
+      isLoadingTags ||
+      isFetchingTags,
+    isError: isErrorCampaign || isErrorTags,
     data: campaignData,
   };
 };

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

@@ -2,15 +2,16 @@ import { Button, Tag } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch } from 'src/app/hooks';
 import { appTheme } from 'src/app/theme';
-import { getSeverityInfo } from 'src/common/components/utils/getSeverityInfo';
 import {
   getCurrentUxData,
   resetFilters,
   updateFilters,
 } from 'src/features/uxFilters';
 import { styled } from 'styled-components';
-import { getSeverity } from '../utils';
+import { useParams } from 'react-router-dom';
+import { getSeverityTag } from '../utils';
 import { useFilterData } from './useFilterData';
+import { useUxData } from '../../../useUxData';
 
 const Wrapper = styled.div`
   position: relative;
@@ -58,11 +59,15 @@ const ScrollingContainer = styled.div`
 `;
 
 export const FiltersTags = () => {
+  const { campaignId } = useParams();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const data = getCurrentUxData();
   const { counters: severitiesCounters } = useFilterData('severities');
   const { counters: clustersCounters } = useFilterData('clusters');
+  const { data: { filters } = {} } = useUxData({
+    campaignId: campaignId ? Number(campaignId) : 0,
+  });
 
   if (!data || !data.clusters || !data.severities) return null;
 
@@ -93,18 +98,16 @@ export const FiltersTags = () => {
       <Inner>
         <ScrollingContainer>
           {data.severities.selected.map((item) => (
-            <Tag
-              key={item.id}
-              hue={`${
-                getSeverityInfo(getSeverity(item) as Severities, t).color
-              }10`}
-              color={getSeverityInfo(getSeverity(item) as Severities, t).color}
-              size="large"
-            >
-              {data.severities.available.find((s) => s.id === item.id)?.name} (
-              {severitiesCounters[item.id] ?? 0})
-              <Tag.Close onClick={removeSeverity(item.id)} />
-            </Tag>
+            <>
+              {getSeverityTag(
+                filters?.severities?.find((s) => s.id === item.id),
+                undefined,
+                <>
+                  &nbsp;({severitiesCounters[item.id] ?? 0})
+                  <Tag.Close onClick={removeSeverity(item.id)} />
+                </>
+              )}
+            </>
           ))}
 
           {data.clusters.selected.map((item) => (

src/pages/Campaign/useWidgets/Experience/widgets/Insights/filters/useFilterData.ts

@@ -16,6 +16,7 @@ interface Insight {
   severity: {
     id: number;
     name?: string;
+    style?: string;
   };
   cluster:
     | {

src/pages/Campaign/useWidgets/Experience/widgets/Insights/utils.tsx

@@ -12,49 +12,58 @@ function getSeverityIcon(
     GetCampaignsByCidUxApiResponse['findings']
   >[number]['severity']
 ) {
-  switch (severity.id) {
-    case 1:
+  const severityName = severity.name?.toLowerCase().replaceAll(' ', '-');
+  switch (severityName) {
+    case 'minor-issue':
       return <MinorIssueIcon />;
-    case 2:
+    case 'major-issue':
       return <MajorIssueIcon />;
-    case 3:
+    case 'positive-finding':
       return <PositiveFindingIcon />;
-    case 4:
+    case 'observation':
       return <ObservationIcon />;
     default:
       return null;
   }
 }
 
 function getSeverityTag(
-  severity: NonNullable<
+  severity?: NonNullable<
     GetCampaignsByCidUxApiResponse['findings']
   >[number]['severity'],
-  text?: string
+  text?: string,
+  children?: React.ReactNode
 ) {
-  switch (severity.id) {
-    case 1:
+  if (!severity) return null;
+
+  const severityName = severity.name?.toLowerCase().replaceAll(' ', '-');
+  switch (severityName) {
+    case 'minor-issue':
       return (
         <SeverityTag hasBackground severity="high">
           <Ellipsis>{text ?? severity.name}</Ellipsis>
+          {children}
         </SeverityTag>
       );
-    case 2:
+    case 'major-issue':
       return (
         <SeverityTag hasBackground severity="critical">
           <Ellipsis>{text ?? severity.name}</Ellipsis>
+          {children}
         </SeverityTag>
       );
-    case 3:
+    case 'positive-finding':
       return (
         <SeverityTag hasBackground severity="low">
           <Ellipsis>{text ?? severity.name}</Ellipsis>
+          {children}
         </SeverityTag>
       );
-    case 4:
+    case 'observation':
       return (
         <SeverityTag hasBackground severity="medium">
           <Ellipsis>{text ?? severity.name}</Ellipsis>
+          {children}
         </SeverityTag>
       );
 
@@ -92,14 +101,15 @@ function getSeverity(
     GetCampaignsByCidUxApiResponse['findings']
   >[number]['severity']
 ) {
-  switch (severity.id) {
-    case 1:
+  const severityName = severity.name?.toLowerCase().replaceAll(' ', '-');
+  switch (severityName) {
+    case 'minor-issue':
       return 'high'; // Minor
-    case 2:
+    case 'major-issue':
       return 'critical'; // Major
-    case 3:
+    case 'positive-finding':
       return 'low'; // Positive
-    case 4:
+    case 'observation':
       return 'medium'; // Observation
     default:
       return 'medium'; // Observation