Prototype ux filters

src/app/store.ts

@@ -8,6 +8,7 @@ import filterReducer from '../features/campaignsFilter/campaignsFilterSlice';
 import expressReducer from '../features/express/expressSlice';
 import { strapiSlice } from '../features/backoffice/strapi';
 import bugsPageReducer from '../features/bugsPage/bugsPageSlice';
+import uxFilterReducer from '../features/uxFilters';
 
 export const store = configureStore({
   reducer: {
@@ -17,6 +18,7 @@ export const store = configureStore({
     filters: filterReducer,
     express: expressReducer,
     bugsPage: bugsPageReducer,
+    uxFilters: uxFilterReducer,
     [unguessApiSlice.reducerPath]: unguessApiSlice.reducer,
     [strapiSlice.reducerPath]: strapiSlice.reducer,
   },

src/common/components/CustomStatusDrawer/formModel.ts

@@ -1,5 +1,6 @@
 import * as Yup from 'yup';
 import { BugCustomStatus } from 'src/features/api';
+import { t } from 'i18next';
 
 export interface CustomStatusFormProps {
   custom_statuses: BugCustomStatus[];
@@ -10,8 +11,8 @@ export const validationSchema = Yup.object().shape({
     Yup.object().shape({
       id: Yup.number(),
       name: Yup.string()
-        .max(17, '__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_MAX')
-        .required('__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_REQUIRED'),
+        .max(17, t('__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_MAX'))
+        .required(t('__BUGS_PAGE_CUSTOM_STATUS_DRAWER_CUSTOM_STATUS_REQUIRED')),
       color: Yup.string(),
       phase: Yup.object().shape({
         id: Yup.number().required(),

src/common/schema.ts

@@ -77,6 +77,14 @@ export interface paths {
       };
     };
   };
+  '/campaigns/{cid}/clusters': {
+    get: operations['get-campaigns-cid-clusters'];
+    parameters: {
+      path: {
+        cid: string;
+      };
+    };
+  };
   '/campaigns/{cid}/custom_statuses': {
     get: operations['get-campaigns-cid-custom-statuses'];
     delete: operations['delete-campaigns-cid-custom_statuses'];
@@ -521,6 +529,11 @@ export interface components {
     CampaignWithOutput: components['schemas']['Campaign'] & {
       outputs?: components['schemas']['Output'][];
     };
+    /** Cluster */
+    Cluster: {
+      id?: number;
+      name?: string;
+    };
     /**
      * Coin
      * @description A coin package is a set of coins (free or paid).
@@ -1247,6 +1260,26 @@ export interface operations {
       500: components['responses']['Error'];
     };
   };
+  'get-campaigns-cid-clusters': {
+    parameters: {
+      path: {
+        cid: string;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          'application/json': {
+            items?: components['schemas']['Cluster'][];
+          };
+        };
+      };
+      400: components['responses']['Error'];
+      403: components['responses']['Error'];
+      500: components['responses']['Error'];
+    };
+  };
   'get-campaigns-cid-custom-statuses': {
     parameters: {
       path: {
@@ -1636,6 +1669,8 @@ export interface operations {
       };
       query: {
         showAsCustomer?: boolean;
+        /** filterBy[<fieldName>]=<fieldValue> */
+        filterBy?: components['parameters']['filterBy'];
       };
     };
     responses: {

src/features/api/index.ts

@@ -97,6 +97,12 @@ const injectedRtkApi = api.injectEndpoints({
     >({
       query: (queryArg) => ({ url: `/campaigns/${queryArg.cid}/bugTypes` }),
     }),
+    getCampaignsByCidClusters: build.query<
+      GetCampaignsByCidClustersApiResponse,
+      GetCampaignsByCidClustersApiArg
+    >({
+      query: (queryArg) => ({ url: `/campaigns/${queryArg.cid}/clusters` }),
+    }),
     getCampaignsByCidCustomStatuses: build.query<
       GetCampaignsByCidCustomStatusesApiResponse,
       GetCampaignsByCidCustomStatusesApiArg
@@ -231,7 +237,10 @@ const injectedRtkApi = api.injectEndpoints({
     >({
       query: (queryArg) => ({
         url: `/campaigns/${queryArg.cid}/ux`,
-        params: { showAsCustomer: queryArg.showAsCustomer },
+        params: {
+          showAsCustomer: queryArg.showAsCustomer,
+          filterBy: queryArg.filterBy,
+        },
       }),
     }),
     getCampaignsByCidWidgets: build.query<
@@ -438,6 +447,9 @@ const injectedRtkApi = api.injectEndpoints({
         body: queryArg.body,
       }),
     }),
+    getMediaById: build.query<GetMediaByIdApiResponse, GetMediaByIdApiArg>({
+      query: (queryArg) => ({ url: `/media/${queryArg.id}` }),
+    }),
   }),
   overrideExisting: false,
 });
@@ -611,6 +623,12 @@ export type GetCampaignsByCidBugTypesApiArg = {
   /** Campaign id */
   cid: string;
 };
+export type GetCampaignsByCidClustersApiResponse = /** status 200 OK */ {
+  items?: Cluster[];
+};
+export type GetCampaignsByCidClustersApiArg = {
+  cid: string;
+};
 export type GetCampaignsByCidCustomStatusesApiResponse =
   /** status 200 OK */ BugCustomStatus[];
 export type GetCampaignsByCidCustomStatusesApiArg = {
@@ -814,6 +832,8 @@ export type GetCampaignsByCidUxApiArg = {
   /** Campaign id */
   cid: string;
   showAsCustomer?: boolean;
+  /** filterBy[<fieldName>]=<fieldValue> */
+  filterBy?: any;
 };
 export type GetCampaignsByCidWidgetsApiResponse =
   /** status 200 OK */
@@ -1092,6 +1112,10 @@ export type DeleteWorkspacesByWidUsersApiArg = {
     include_shared?: boolean;
   };
 };
+export type GetMediaByIdApiResponse = unknown;
+export type GetMediaByIdApiArg = {
+  id: string;
+};
 export type Error = {
   message: string;
   code: number;
@@ -1293,6 +1317,10 @@ export type BugAdditionalField = {
   name: string;
   value: string;
 } & (BugAdditionalFieldRegex | BugAdditionalFieldSelect);
+export type Cluster = {
+  id: number;
+  name: string;
+};
 export type ReportExtensions =
   | 'pdf'
   | 'doc'
@@ -1439,6 +1467,7 @@ export const {
   usePatchCampaignsByCidBugsAndBidMutation,
   useGetCampaignsByCidBugsAndBidSiblingsQuery,
   useGetCampaignsByCidBugTypesQuery,
+  useGetCampaignsByCidClustersQuery,
   useGetCampaignsByCidCustomStatusesQuery,
   usePatchCampaignsByCidCustomStatusesMutation,
   useDeleteCampaignsByCidCustomStatusesMutation,
@@ -1477,4 +1506,5 @@ export const {
   useGetWorkspacesByWidUsersQuery,
   usePostWorkspacesByWidUsersMutation,
   useDeleteWorkspacesByWidUsersMutation,
+  useGetMediaByIdQuery,
 } = injectedRtkApi;

src/features/uxFilters/clusterFilter.ts

@@ -0,0 +1,58 @@
+import { useAppSelector } from 'src/app/hooks';
+
+export type ClusterFilterType = {
+  clusters: {
+    available: { id: number; name: string }[];
+    selected: { id: number; name: string }[];
+  };
+};
+
+export const ClusterFilter = {
+  reset: (state: ClusterFilterType) => ({
+    clusters: {
+      ...ClusterFilter.getCurrent(state),
+      selected: [],
+    },
+  }),
+  getCurrent: (state?: ClusterFilterType) => ({
+    available: state?.clusters?.available ? state.clusters.available : [],
+    selected: state?.clusters?.selected ? state.clusters.selected : [],
+  }),
+  setAvailable: (
+    state: ClusterFilterType,
+    clusters?: { id: number; name: string }[]
+  ) => ({
+    clusters: {
+      ...ClusterFilter.getCurrent(state),
+      ...(clusters ? { available: clusters } : {}),
+    },
+  }),
+  filter: (
+    state: ClusterFilterType,
+    clusters?: { id: number; name: string }[]
+  ) => ({
+    clusters: {
+      ...ClusterFilter.getCurrent(state),
+      ...(clusters ? { selected: clusters } : {}),
+    },
+  }),
+  getValues: () => {
+    const uxDataSlice = useAppSelector((state) => state.uxFilters);
+
+    if (!uxDataSlice.currentCampaign) return undefined;
+
+    if (!uxDataSlice.campaigns[uxDataSlice.currentCampaign].clusters)
+      return undefined;
+
+    const campaign: ClusterFilterType =
+      uxDataSlice.campaigns[uxDataSlice.currentCampaign];
+
+    if (!campaign.clusters.selected) return undefined;
+    return campaign.clusters.selected;
+  },
+  getIds: () => {
+    const values = ClusterFilter.getValues();
+    if (!values) return undefined;
+    return values.map((t) => t.id);
+  },
+};

src/features/uxFilters/index.ts

@@ -0,0 +1,96 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { useAppSelector } from 'src/app/hooks';
+import { ClusterFilter, ClusterFilterType } from './clusterFilter';
+import { SeverityFilter, SeverityFilterType } from './severityFilter';
+import { InsightState, InsightStateType } from './insights';
+
+export interface FilterState {
+  currentCampaign?: number;
+  campaigns: {
+    [campaign_id: string]: ClusterFilterType &
+      SeverityFilterType &
+      InsightStateType;
+  };
+}
+
+const initialState: FilterState = {
+  campaigns: {},
+};
+
+const filtersSlice = createSlice({
+  name: 'uxfilters',
+  initialState,
+  reducers: {
+    selectUxCampaign: (state, action) => {
+      const { campaignId, filters } = action.payload;
+      state.campaigns[campaignId as number] = {
+        ...(state.campaigns[campaignId as number]
+          ? state.campaigns[campaignId as number]
+          : {}),
+        ...ClusterFilter.setAvailable(
+          state.campaigns[campaignId as number],
+          filters.clusters
+        ),
+        ...SeverityFilter.setAvailable(
+          state.campaigns[campaignId as number],
+          filters.severities
+        ),
+        ...InsightState.setAvailable(
+          state.campaigns[campaignId as number],
+          filters.insights
+        ),
+      };
+      state.currentCampaign = campaignId;
+    },
+    updateFilters: (state, action) => {
+      const { filters } = action.payload;
+      if (!state.currentCampaign) return;
+
+      state.campaigns[state.currentCampaign] = {
+        ...state.campaigns[state.currentCampaign],
+        ...ClusterFilter.filter(
+          state.campaigns[state.currentCampaign],
+          filters.clusters
+        ),
+        ...SeverityFilter.filter(
+          state.campaigns[state.currentCampaign],
+          filters.severities
+        ),
+      };
+    },
+    resetFilters(state) {
+      if (!state.currentCampaign) return;
+      state.campaigns[state.currentCampaign] = {
+        ...state.campaigns[state.currentCampaign],
+        ...ClusterFilter.reset(state.campaigns[state.currentCampaign]),
+        ...SeverityFilter.reset(state.campaigns[state.currentCampaign]),
+      };
+    },
+  },
+});
+
+export const getSelectedUxFiltersIds = () => ({
+  clusters: ClusterFilter.getIds(),
+  severities: SeverityFilter.getIds(),
+});
+
+export const getSelectedUxFilters = () => ({
+  clusters: ClusterFilter.getValues(),
+  severities: SeverityFilter.getValues(),
+});
+
+export const getCurrentUxData = () => {
+  const { currentCampaign, campaigns } = useAppSelector(
+    (state) => state.uxFilters
+  );
+  if (!currentCampaign || !campaigns[currentCampaign as number]) return null;
+
+  const campaign = campaigns[currentCampaign as number];
+  if (!campaign) return false;
+  return campaign;
+};
+
+export const { selectUxCampaign, updateFilters, resetFilters } =
+  filtersSlice.actions;
+
+export default filtersSlice.reducer;

src/features/uxFilters/insights.ts

@@ -0,0 +1,41 @@
+import { useAppSelector } from 'src/app/hooks';
+
+export type InsightStateType = {
+  insights: {
+    available: { id: number; name: string }[];
+  };
+};
+
+export const InsightState = {
+  getCurrent: (state?: InsightStateType) => ({
+    available: state?.insights?.available ? state.insights.available : [],
+  }),
+  setAvailable: (
+    state: InsightStateType,
+    insights?: { id: number; name: string }[]
+  ) => ({
+    insights: {
+      ...InsightState.getCurrent(state),
+      ...(insights ? { available: insights } : {}),
+    },
+  }),
+  getValues: () => {
+    const uxDataSlice = useAppSelector((state) => state.uxFilters);
+
+    if (!uxDataSlice.currentCampaign) return undefined;
+
+    if (!uxDataSlice.campaigns[uxDataSlice.currentCampaign].insights)
+      return undefined;
+
+    const campaign: InsightStateType =
+      uxDataSlice.campaigns[uxDataSlice.currentCampaign];
+
+    if (!campaign.insights.available) return undefined;
+    return campaign.insights.available;
+  },
+  getIndex: (id: number) => {
+    const values = InsightState.getValues();
+    if (!values) return undefined;
+    return values.findIndex((t) => t.id === id);
+  },
+};