release 20231123

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/Pages.tsx

@@ -15,7 +15,8 @@ import CampaignPreview from 'src/pages/Campaign/preview';
 import Dashboard from 'src/pages/Dashboard';
 import Project from 'src/pages/Dashboard/Project';
 import LoginPage from 'src/pages/LoginPage';
-import NotFound from 'src/pages/NotFound';
+import NotFound from 'src/pages/NotFound/NotFound';
+import MediaNotFound from 'src/pages/NotFound/MediaNotFound';
 import Service from 'src/pages/Service';
 import Catalog from 'src/pages/Services';
 import Manual from 'src/pages/Manual';
@@ -72,6 +73,10 @@ const Pages = () => {
                   element={<Service />}
                 />
                 {/* No route found */}
+                <Route
+                  path={`/${langPrefix}/media/oops`}
+                  element={<MediaNotFound />}
+                />
                 <Route path={`/${langPrefix}/oops`} element={<NotFound />} />
                 <Route index element={<Dashboard />} />
               </Route>

src/common/components/BugDetail/BugStateDropdown.tsx

@@ -238,9 +238,9 @@ const BugStateDropdown = ({ bug }: { bug: Bug }) => {
               content={t('__BUGS_PAGE_BUG_DETAIL_NEED_REVIEW_TOOLTIP')}
             >
               <Select isCompact disabled>
-                <StyledItem>
+                <SelectedItem>
                   {t('__BUGS_PAGE_BUG_DETAIL_NEED_REVIEW')}
-                </StyledItem>
+                </SelectedItem>
               </Select>
             </Tooltip>
           ) : (

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/components/ErrorBoundary/ErrorBoundaryPage.tsx

@@ -35,7 +35,11 @@ const ErrorBoundaryPage = () => {
                 </Paragraph>
 
                 <Paragraph style={{ marginTop: theme.space.lg }}>
-                  <Button isPrimary onClick={() => window.location.reload()}>
+                  <Button
+                    isPrimary
+                    isAccent
+                    onClick={() => window.location.reload()}
+                  >
                     {t('__ERROR_PAGE_BUTTON')}
                   </Button>
                 </Paragraph>

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/templates/Container.tsx

@@ -0,0 +1,31 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.div<{
+  excludeMarginTop?: boolean;
+  excludeMarginBottom?: boolean;
+}>`
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  padding-bottom: ${({ theme }) =>
+    theme.components.chrome.header
+      .height}; /* Fix to prevent page bottom for being cut because of the chrome fixed header height */
+  margin: ${({ theme }) => theme.space.xxl} auto;
+  ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
+  ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+    margin: ${({ theme }) => theme.space.md} auto;
+    ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
+    ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
+  }
+`;

src/features/templates/Page.tsx

@@ -1,38 +1,8 @@
 import React from 'react';
 import { GoogleTagManager } from 'src/common/GoogleTagManager';
-import styled from 'styled-components';
 import { Logged } from './Logged';
 import ErrorBoundary from '../../common/components/ErrorBoundary';
-
-const Container = styled.div<{
-  excludeMarginTop?: boolean;
-  excludeMarginBottom?: boolean;
-}>`
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: ${({ theme }) => theme.palette.grey[100]};
-  padding-bottom: ${({ theme }) =>
-    theme.components.chrome.header
-      .height}; /* Fix to prevent page bottom for being cut because of the chrome fixed header height */
-  margin: ${({ theme }) => theme.space.xxl} auto;
-  ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
-  ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
-
-  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
-    margin: ${({ theme }) => theme.space.md} auto;
-    ${({ excludeMarginTop }) => excludeMarginTop && `margin-top: 0;`}
-    ${({ excludeMarginBottom }) => excludeMarginBottom && `margin-bottom: 0;`}
-  }
-`;
+import { Container } from './Container';
 
 export const Page = ({
   children,

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);
+  },
+};