Merge pull request #988 from AppQuality/develop

UN-REACT Cosa lascio in produzione?
AppQuality · Sep 23, 2024 · 9c52403 · 9c52403
2 parents b924fd8 + fb084e7
commit 9c52403
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 88 deletions.
diff --git a/src/features/api/index.ts b/src/features/api/index.ts
@@ -1131,9 +1131,8 @@ export type DeleteCampaignsByCidUsersApiArg = {
   };
 };
 export type GetCampaignsByCidUxApiResponse = /** status 200 OK */ {
-  version: number;
-  goal: string;
-  users: number;
+  goal?: string;
+  users?: number;
   findings?: {
     /** this field is the Finding ID */
     id: number;
@@ -1142,7 +1141,8 @@ export type GetCampaignsByCidUxApiResponse = /** status 200 OK */ {
     comment?: string;
     severity: {
       id: number;
-      name?: string;
+      name: string;
+      style: string;
     };
     cluster:
       | {
@@ -1167,11 +1167,11 @@ export type GetCampaignsByCidUxApiResponse = /** status 200 OK */ {
     value: number;
     comment: string;
   }[];
-  methodology: {
+  methodology?: {
     type: string;
     description: string;
   };
-  questions: {
+  questions?: {
     text: string;
   }[];
 };

diff --git a/src/features/templates/Page.tsx b/src/features/templates/Page.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { GoogleTagManager } from 'src/common/GoogleTagManager';
+import { useNavigate } from 'react-router-dom';
+import i18n from 'src/i18n';
 import { Logged } from './Logged';
 import ErrorBoundary from '../../common/components/ErrorBoundary';
 import { Container } from './Container';
+import { usePathWithoutLocale } from '../navigation/usePathWithoutLocale';
 
 export const Page = ({
   children,
@@ -22,19 +25,34 @@ export const Page = ({
   excludeMarginBottom?: boolean;
   className?: string;
   isMinimal?: boolean;
-}) => (
-  <GoogleTagManager title={title}>
-    <ErrorBoundary>
-      <Logged route={route} pageHeader={pageHeader} isMinimal={isMinimal}>
-        <Container
-          id="container"
-          className={className}
-          excludeMarginTop={excludeMarginTop}
-          excludeMarginBottom={excludeMarginBottom}
-        >
-          {children}
-        </Container>
-      </Logged>
-    </ErrorBoundary>
-  </GoogleTagManager>
-);
+}) => {
+  // remove the following lines (30-40) to manage the correct language routing - i18n routes translation profilemodal language
+  const { language } = i18n;
+  const navigate = useNavigate();
+  const pathWithoutLocale = usePathWithoutLocale();
+  const path = pathWithoutLocale ? `${pathWithoutLocale}` : '/';
+
+  useEffect(() => {
+    if (language !== 'en') {
+      i18n.changeLanguage('en');
+      navigate(path, { replace: true });
+    }
+  }, [language]);
+
+  return (
+    <GoogleTagManager title={title}>
+      <ErrorBoundary>
+        <Logged route={route} pageHeader={pageHeader} isMinimal={isMinimal}>
+          <Container
+            id="container"
+            className={className}
+            excludeMarginTop={excludeMarginTop}
+            excludeMarginBottom={excludeMarginBottom}
+          >
+            {children}
+          </Container>
+        </Logged>
+      </ErrorBoundary>
+    </GoogleTagManager>
+  );
+};
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -993,6 +993,7 @@
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_DESCRIPTION_HEADER": "There are observations on",
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_HEADER": "Analyzed User Contributions",
   "_TOAST_DELETED_MESSAGE": "successfully deleted",
+  "_TOAST_DELETED_MESSAGE_SUBJECT": "Insight",
   "_TOAST_GENERIC_ERROR_MESSAGE": "Something went wrong",
   "_TOAST_PUBLISHED_MESSAGE": "successfully published",
   "_TOAST_UNPUBLISHED_MESSAGE": "successfully unpublished",

diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json
@@ -992,7 +992,8 @@
   "_CAMPAIGN_WIDGET_UX_TEST_PROGRESS_MONITORING_HEADER": "Andamento Test",
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_DESCRIPTION_HEADER": "Hai aggiunto osservazioni su",
   "_CAMPAIGN_WIDGET_UX_USER_ANALYSIS_HEADER": "Contributi utente analizzati",
-  "_TOAST_DELETED_MESSAGE": "cancellato con successo",
+  "_TOAST_DELETED_MESSAGE": "eliminata con successo",
+  "_TOAST_DELETED_MESSAGE_SUBJECT": "Scoperta",
   "_TOAST_GENERIC_ERROR_MESSAGE": "Qualcosa è andato storto",
   "_TOAST_PUBLISHED_MESSAGE": "pubblicata con successo",
   "_TOAST_UNPUBLISHED_MESSAGE": "nascosta con successo",

diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/General/GoalCard.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/General/GoalCard.tsx
@@ -1,20 +1,20 @@
 import {
+  Accordion,
+  Col,
   ContainerCard,
+  Grid,
   MD,
   Row,
-  Col,
   getColor,
-  Accordion,
-  Grid,
 } from '@appquality/unguess-design-system';
-import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { appTheme } from 'src/app/theme';
-import { useGetCampaignsByCidUxQuery } from 'src/features/api';
 import { Divider } from 'src/common/components/divider';
+import { useGetCampaignsByCidUxQuery } from 'src/features/api';
 import { WidgetSpecialCard } from 'src/pages/Campaign/widgetCards/common/StyledSpecialCard';
-import { ReactComponent as TargetIcon } from './assets/target.svg';
+import styled from 'styled-components';
 import { CircleList } from './List';
+import { ReactComponent as TargetIcon } from './assets/target.svg';
 
 const CardContent = styled.div`
   padding: ${({ theme }) => theme.space.base * 2}px 0;
@@ -86,11 +86,12 @@ export const GoalCard = ({
           </Accordion.Header>
           <Accordion.Panel style={{ padding: 0 }}>
             <CircleList>
-              {data.questions.map((question) => (
-                <CircleList.Item>
-                  <MD isBold>{question.text}</MD>
-                </CircleList.Item>
-              ))}
+              {data.questions &&
+                data.questions.map((question) => (
+                  <CircleList.Item>
+                    <MD isBold>{question.text}</MD>
+                  </CircleList.Item>
+                ))}
             </CircleList>
           </Accordion.Panel>
         </Accordion.Section>

diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/General/Methodology.tsx
@@ -1,27 +1,27 @@
 import {
+  Anchor,
+  Col,
+  Grid,
   MD,
   Row,
-  Col,
   SM,
-  getColor,
-  Grid,
-  Anchor,
   Skeleton,
+  getColor,
 } from '@appquality/unguess-design-system';
-import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 import { appTheme } from 'src/app/theme';
+import { Divider } from 'src/common/components/divider';
 import {
   useGetCampaignsByCidQuery,
   useGetCampaignsByCidUxQuery,
 } from 'src/features/api';
-import { Divider } from 'src/common/components/divider';
 import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
-import { Link } from 'react-router-dom';
 import { WidgetSpecialCard } from 'src/pages/Campaign/widgetCards/common/StyledSpecialCard';
+import styled from 'styled-components';
+import { MethodologyNote } from './Note';
 import { ReactComponent as CampaignInfo } from './assets/campaignInfo.svg';
 import { ReactComponent as UserGroup } from './assets/userGroup.svg';
-import { MethodologyNote } from './Note';
 
 const Summary = styled.div`
   margin: ${({ theme }) => theme.space.base * 2}px 0;
@@ -106,10 +106,12 @@ export const Methodology = ({
               <CampaignInfo />
             </Col>
             <Col xs={12} sm={9} alignSelf="start" style={{ margin: 0 }}>
-              <MethodologyNote
-                title={cpData.type.name}
-                text={data.methodology.description}
-              />
+              {data.methodology && (
+                <MethodologyNote
+                  title={cpData.type.name}
+                  text={data.methodology.description}
+                />
+              )}
             </Col>
           </StyledRow>
         </Summary>
@@ -128,12 +130,14 @@ export const Methodology = ({
               <UserGroup />
             </Col>
             <Col xs={12} sm={9} style={{ margin: 0 }}>
-              <MethodologyNote
-                title={`${t('__CAMPAIGN_PAGE_METHODOLOGY_USERS_NUMBER', {
-                  count: data.users,
-                })}`}
-                text={getStudyText(data.methodology.type)}
-              />
+              {data.methodology && (
+                <MethodologyNote
+                  title={`${t('__CAMPAIGN_PAGE_METHODOLOGY_USERS_NUMBER', {
+                    count: data.users,
+                  })}`}
+                  text={getStudyText(data.methodology.type)}
+                />
+              )}
             </Col>
           </StyledRow>
         </Summary>

diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/utils.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/utils.tsx
@@ -28,9 +28,7 @@ function getSeverityIcon(
 }
 
 function getSeverityTag(
-  severity?: NonNullable<
-    GetCampaignsByCidUxApiResponse['findings']
-  >[number]['severity'],
+  severity?: { name?: string },
   text?: string,
   children?: React.ReactNode
 ) {
@@ -96,11 +94,7 @@ function getClusterTag(
   return null;
 }
 
-function getSeverity(
-  severity: NonNullable<
-    GetCampaignsByCidUxApiResponse['findings']
-  >[number]['severity']
-) {
+function getSeverity(severity: { name?: string }) {
   const severityName = severity.name?.toLowerCase().replaceAll(' ', '-');
   switch (severityName) {
     case 'minor-issue':
@@ -134,9 +128,9 @@ function getClusterName(
 }
 
 export {
-  getSeverityIcon,
-  getSeverityTag,
+  getClusterName,
   getClusterTag,
   getSeverity,
-  getClusterName,
+  getSeverityIcon,
+  getSeverityTag,
 };
diff --git a/src/pages/Dashboard/campaigns-list/CampaignAnchorTitle.tsx b/src/pages/Dashboard/campaigns-list/CampaignAnchorTitle.tsx
@@ -0,0 +1,23 @@
+import { Anchor, Span, theme } from '@appquality/unguess-design-system';
+import { CampaignWithOutput } from 'src/features/api';
+import { getLocalizeDashboardRoute } from 'src/hooks/useLocalizeDashboardUrl';
+
+export const CampaignAnchorTitle = ({
+  campaign,
+}: {
+  campaign: CampaignWithOutput;
+}) => {
+  const cpUrl = getLocalizeDashboardRoute({
+    campaignId: campaign.id,
+    cpFamily: campaign.family.name,
+    outputs: campaign.outputs || [],
+  });
+
+  return (
+    <Anchor href={cpUrl}>
+      <Span isBold style={{ color: theme.palette.grey[800] }}>
+        {campaign.customer_title ?? campaign.title}
+      </Span>
+    </Anchor>
+  );
+};
diff --git a/src/pages/Dashboard/campaigns-list/table.tsx b/src/pages/Dashboard/campaigns-list/table.tsx
@@ -1,15 +1,9 @@
-import {
-  Anchor,
-  GroupedTable,
-  Span,
-  theme,
-  Tooltip,
-} from '@appquality/unguess-design-system';
+import { GroupedTable, Tooltip } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { CampaignWithOutput } from 'src/features/api';
-import { getLocalizeDashboardRoute } from 'src/hooks/useLocalizeDashboardUrl';
 import { getStatusInfo } from 'src/common/components/utils/getStatusInfo';
 import { CampaignStatus } from 'src/types';
+import { CampaignAnchorTitle } from './CampaignAnchorTitle';
 
 export const TableList = ({
   campaigns,
@@ -43,22 +37,10 @@ export const TableList = ({
           t
         );
 
-        const cpUrl = getLocalizeDashboardRoute({
-          campaignId: campaign.id,
-          cpFamily: campaign.family.name,
-          outputs: campaign.outputs || [],
-        });
-
         const cpStartDate = new Date(campaign.start_date).toLocaleDateString();
 
         return {
-          name: (
-            <Anchor href={cpUrl}>
-              <Span isBold style={{ color: theme.palette.grey[800] }}>
-                {campaign.customer_title ?? campaign.title}
-              </Span>
-            </Anchor>
-          ),
+          name: <CampaignAnchorTitle campaign={campaign} />,
           type: campaign.family.name,
           testType: campaign.type.name,
           startDate: cpStartDate,

diff --git a/src/pages/Insights/Collection/Lightbox.tsx b/src/pages/Insights/Collection/Lightbox.tsx
@@ -179,7 +179,7 @@ export const LightboxContainer = ({
                 </>
               )}
               <SM isBold style={{ color: appTheme.palette.blue[600] }}>
-                {video?.tester.name} (T{video?.tester.id})
+                T{video?.tester.id}
               </SM>
               <StyledPipe />
               <SM style={{ display: 'flex', alignItems: 'center' }}>

diff --git a/src/pages/Insights/Collection/components/UsecaseSection.tsx b/src/pages/Insights/Collection/components/UsecaseSection.tsx
@@ -93,7 +93,7 @@ export const UsecaseSection = ({
             isRound
             size="medium"
           >
-            <ObservationsIcon width={24} color={appTheme.palette.grey[600]} />
+            <ObservationsIcon color={appTheme.palette.grey[600]} />
           </Tag>{' '}
           <MD
             isBold

diff --git a/src/pages/Insights/InsightsDrawer/components/ConfirmDeleteModal.tsx b/src/pages/Insights/InsightsDrawer/components/ConfirmDeleteModal.tsx
@@ -32,7 +32,9 @@ export const ConfirmDeleteModal = ({
       .then(() => {
         notificationProps = {
           type: 'success',
-          message: `${`Insight "${title}" ${t('_TOAST_DELETED_MESSAGE')}`}`,
+          message: `${`${t('_TOAST_DELETED_MESSAGE_SUBJECT')} "${title}" ${t(
+            '_TOAST_DELETED_MESSAGE'
+          )}`}`,
         };
       })
       .catch((e) => {