Fixes

src/common/schema.ts

@@ -775,6 +775,7 @@ export interface components {
           deviceType: string;
         };
         uploaderId: number;
+        usecaseTitle: string;
       })[];
     };
     /** Observation */

src/features/api/index.ts

@@ -1883,6 +1883,7 @@ export type Insight = {
       deviceType: string;
     };
     uploaderId: number;
+    usecaseTitle: string;
   })[];
 };
 export type Grape = {

src/locales/en/translation.json

@@ -778,13 +778,15 @@
   "__INSIGHTS_PAGE_CLOSE_DRAWER_BUTTON": "Close",
   "__INSIGHTS_PAGE_COLLECTION_GROUP_BY_USECASE": "Group by Use Case",
   "__INSIGHTS_PAGE_COLLECTION_UNGROUP": "Show all",
-  "__INSIGHTS_PAGE_DRAWER_PUBLISH": "Publish",
-  "__INSIGHTS_PAGE_DRAWER_UNPUBLISH": "Unpublish",
-  "__INSIGHTS_PAGE_INSIGHTS_DRAWER_PUBLISHED_INSIGHTS": "Published insights",
   "__INSIGHTS_PAGE_DELETE_MODAL_BODY_TEXT": "Are you sure to delete this insight?",
   "__INSIGHTS_PAGE_DELETE_MODAL_CONTINUE_BUTTON": "Delete",
   "__INSIGHTS_PAGE_DELETE_MODAL_HEADER_TITLE": "Delete insight",
   "__INSIGHTS_PAGE_DELETE_MODAL_QUIT_BUTTON": "Cancel",
+  "__INSIGHTS_PAGE_DRAWER_PUBLISH": "Publish",
+  "__INSIGHTS_PAGE_DRAWER_UNPUBLISH": "Unpublish",
+  "__INSIGHTS_PAGE_INSIGHT_ACCORDION_DESCRIPTION_LABEL": "Description",
+  "__INSIGHTS_PAGE_INSIGHT_ACCORDION_OBSERVATIONS_DESCRIPTION": "<0>Observations in this insight: {{count}}</0>",
+  "__INSIGHTS_PAGE_INSIGHT_ACCORDION_OBSERVATIONS_LABEL": "Observations",
   "__INSIGHTS_PAGE_INSIGHT_FORM_BUTTON_CREATE": "Create insight",
   "__INSIGHTS_PAGE_INSIGHT_FORM_BUTTON_DELETE": "Delete",
   "__INSIGHTS_PAGE_INSIGHT_FORM_BUTTON_EDIT": "Edit",
@@ -804,6 +806,8 @@
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_TITLE_LABEL": "Title Insight",
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_TITLE_PLACEHOLDER": "Insert a title",
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_USECASE_LABEL": "Use Case",
+  "__INSIGHTS_PAGE_INSIGHT_FORM_TITLE": "Insight build",
+  "__INSIGHTS_PAGE_INSIGHTS_DRAWER_PUBLISHED_INSIGHTS": "Published insights",
   "__INSIGHTS_PAGE_INSIGHTS_DRAWER_TITLE": "Insight",
   "__INSIGHTS_PAGE_NAVIGATION_LABEL": "Navigate to:",
   "__INSIGHTS_PAGE_OPEN_DRAWER_BUTTON": "Here you will find your insights",

src/locales/it/translation.json

@@ -807,13 +807,15 @@
   "__INSIGHTS_PAGE_CLOSE_DRAWER_BUTTON": "Close drawer",
   "__INSIGHTS_PAGE_COLLECTION_GROUP_BY_USECASE": "Organizza per Use Case",
   "__INSIGHTS_PAGE_COLLECTION_UNGROUP": "",
-  "__INSIGHTS_PAGE_DRAWER_PUBLISH": "Non pubblicato! Clicca per rendere visibile l'insight in dashboard.",
-  "__INSIGHTS_PAGE_DRAWER_UNPUBLISH": "Pubblicato in dashboard! Clicca per nascondere l'insight.",
-  "__INSIGHTS_PAGE_INSIGHTS_DRAWER_PUBLISHED_INSIGHTS": "Published insights",
   "__INSIGHTS_PAGE_DELETE_MODAL_BODY_TEXT": "Sei sicuro di voler eliminare questo insight",
   "__INSIGHTS_PAGE_DELETE_MODAL_CONTINUE_BUTTON": "Elimina",
   "__INSIGHTS_PAGE_DELETE_MODAL_HEADER_TITLE": "Elimina insight",
   "__INSIGHTS_PAGE_DELETE_MODAL_QUIT_BUTTON": "Annulla",
+  "__INSIGHTS_PAGE_DRAWER_PUBLISH": "Non pubblicato! Clicca per rendere visibile l'insight in dashboard.",
+  "__INSIGHTS_PAGE_DRAWER_UNPUBLISH": "Pubblicato in dashboard! Clicca per nascondere l'insight.",
+  "__INSIGHTS_PAGE_INSIGHT_ACCORDION_DESCRIPTION_LABEL": "",
+  "__INSIGHTS_PAGE_INSIGHT_ACCORDION_OBSERVATIONS_DESCRIPTION": "<0>Observations in this insight: {{count}}</0>",
+  "__INSIGHTS_PAGE_INSIGHT_ACCORDION_OBSERVATIONS_LABEL": "",
   "__INSIGHTS_PAGE_INSIGHT_FORM_BUTTON_CREATE": "",
   "__INSIGHTS_PAGE_INSIGHT_FORM_BUTTON_DELETE": "",
   "__INSIGHTS_PAGE_INSIGHT_FORM_BUTTON_EDIT": "",
@@ -834,6 +836,8 @@
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_TITLE_LABEL": "",
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_TITLE_PLACEHOLDER": "",
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_USECASE_LABEL": "",
+  "__INSIGHTS_PAGE_INSIGHT_FORM_TITLE": "",
+  "__INSIGHTS_PAGE_INSIGHTS_DRAWER_PUBLISHED_INSIGHTS": "Published insights",
   "__INSIGHTS_PAGE_INSIGHTS_DRAWER_TITLE": "",
   "__INSIGHTS_PAGE_NAVIGATION_LABEL": "Naviga in:",
   "__INSIGHTS_PAGE_OPEN_DRAWER_BUTTON": "",

src/pages/Insights/Collection/ObservationCard.tsx

@@ -5,6 +5,7 @@ import {
   IconButton,
   Label,
   SM,
+  Span,
   SpecialCard,
   Tag,
 } from '@appquality/unguess-design-system';
@@ -67,6 +68,7 @@ export const ObservationCard = ({
   const { t } = useTranslation();
   const [isLightboxOpen, setIsLightboxOpen] = useState(false);
   const { values, setFieldValue } = useFormikContext<InsightFormValues>();
+  const quotesMaxChars = 50;
 
   const severity = observation.tags.find(
     (tag) => tag.group.name === 'severity'
@@ -110,6 +112,13 @@ export const ObservationCard = ({
     }
   };
 
+  const getQuotesWithEllipsis = (quotes: string, maxChars: number = 50) => {
+    if (quotes.length > maxChars) {
+      return `${quotes.slice(0, maxChars)}...`;
+    }
+    return quotes;
+  };
+
   return (
     <FieldArray name="observations">
       {(arrayHelpers) => (
@@ -168,7 +177,19 @@ export const ObservationCard = ({
                 }}
               >
                 <Quotes isChecked={isChecked}>
-                  &quot;{observation.quotes}&quot;
+                  &quot;
+                  {observation.quotes &&
+                  observation.quotes.length > quotesMaxChars ? (
+                    <Span title={observation.quotes}>
+                      {getQuotesWithEllipsis(
+                        observation.quotes,
+                        quotesMaxChars
+                      )}
+                    </Span>
+                  ) : (
+                    observation.quotes
+                  )}
+                  &quot;
                 </Quotes>
               </SpecialCard.Header.Title>
               <SpecialCard.Header.Text style={{ marginTop: 'auto' }}>

src/pages/Insights/InsightsDrawer/InsightAccordion.tsx

@@ -1,9 +1,10 @@
-import { Accordion, MD, Tag, SM, LG } from '@appquality/unguess-design-system';
+import { Accordion, MD, Tag, LG } from '@appquality/unguess-design-system';
 import { useFormikContext } from 'formik';
 import { appTheme } from 'src/app/theme';
 import { Divider } from 'src/common/components/divider';
 import { GetCampaignsByCidInsightsApiResponse } from 'src/features/api';
 import { ReactComponent as ObservationIcon } from '@zendeskgarden/svg-icons/src/16/speech-bubble-conversation-stroke.svg';
+import { Trans, useTranslation } from 'react-i18next';
 import { InsightFormValues } from '../FormProvider';
 import { AccordionLabel } from './components/AccordionLabel';
 import { ButtonsFooter } from './components/ButtonsFooter';
@@ -13,6 +14,7 @@ const Insight = ({
 }: {
   insight: GetCampaignsByCidInsightsApiResponse[number];
 }) => {
+  const { t } = useTranslation();
   const { values } = useFormikContext<InsightFormValues>();
   const isCurrent = values.id === insight.id;
   return (
@@ -39,7 +41,7 @@ const Insight = ({
                     marginBottom: appTheme.space.xs,
                   }}
                 >
-                  Description
+                  {t('__INSIGHTS_PAGE_INSIGHT_ACCORDION_DESCRIPTION_LABEL')}
                 </MD>
                 <MD style={{ paddingBottom: appTheme.space.xs }}>
                   {insight.description}
@@ -54,9 +56,14 @@ const Insight = ({
               }}
             >
               <ObservationIcon color={appTheme.palette.grey[600]} />{' '}
-              Observations
+              {t('__INSIGHTS_PAGE_INSIGHT_ACCORDION_OBSERVATIONS_LABEL')}
             </LG>
-            <MD>Observations in this insight: {insight.observations.length}</MD>
+            <Trans i18nKey="__INSIGHTS_PAGE_INSIGHT_ACCORDION_OBSERVATIONS_DESCRIPTION">
+              <MD>
+                Observations in this insight:{' '}
+                {{ count: insight.observations.length }}
+              </MD>
+            </Trans>
             <div style={{ marginBottom: appTheme.space.md }}>
               {insight.observations.map((o) => (
                 <div

src/pages/Insights/InsightsDrawer/components/ButtonsFooter.tsx

@@ -89,7 +89,7 @@ export const ButtonsFooter = ({
                 uploaderId: o.uploaderId,
                 mediaId: o.video.id,
                 deviceType: o.video.deviceType,
-                usecaseTitle: '', // TODO: @sinatragianpaolo add usecaseTitle to API GET /campaigns/{cid}/insights observations
+                usecaseTitle: o.usecaseTitle,
               })),
             })
           }