🔧 chore(translation): add new translation key for Use Case label

src/locales/en/translation.json

@@ -800,6 +800,7 @@
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_TITLE_ERROR": "Title is required",
   "__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_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

@@ -830,6 +830,7 @@
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_TITLE_ERROR": "",
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_TITLE_LABEL": "",
   "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_TITLE_PLACEHOLDER": "",
+  "__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_USECASE_LABEL": "",
   "__INSIGHTS_PAGE_INSIGHTS_DRAWER_TITLE": "",
   "__INSIGHTS_PAGE_NAVIGATION_LABEL": "Naviga in:",
   "__INSIGHTS_PAGE_OPEN_DRAWER_BUTTON": "",

src/pages/Insights/Collection/ObservationCard.tsx

@@ -36,7 +36,7 @@ export const ObservationCard = ({
 }) => {
   const { t } = useTranslation();
   const [isLightboxOpen, setIsLightboxOpen] = useState(false);
-  const { values } = useFormikContext<InsightFormValues>();
+  const { values, setFieldValue } = useFormikContext<InsightFormValues>();
 
   const severity = observation.tags.find(
     (tag) => tag.group.name === 'severity'
@@ -61,8 +61,25 @@ export const ObservationCard = ({
   ) => {
     if (isChecked) {
       remove(values.observations.findIndex((obs) => obs.id === observation.id));
+      setFieldValue(
+        'usecases',
+        values.usecases.filter(
+          (usecase) => usecase.name !== observation.usecaseTitle
+        )
+      );
     } else {
       push(observation);
+      // Add usecase to the list of usecases avoiding duplicates
+      if (
+        !values.usecases.some(
+          (usecase) => usecase.name === observation.usecaseTitle
+        )
+      ) {
+        setFieldValue('usecases', [
+          ...values.usecases,
+          { name: observation.usecaseTitle },
+        ]);
+      }
     }
   };
 

src/pages/Insights/FormProvider.tsx

@@ -11,7 +11,7 @@ import * as Yup from 'yup';
 
 export type InsightFormValues = Omit<
   GetCampaignsByCidInsightsApiResponse[number],
-  'severity' | 'observations' | 'usecases'
+  'severity' | 'observations'
 > & {
   severity: number;
   observations: Grape['observations'];
@@ -28,6 +28,7 @@ const FormProvider = ({ children }: { children: React.ReactNode }) => {
     description: '',
     severity: 0,
     observations: [],
+    usecases: [],
   };
 
   const validationSchema = Yup.object().shape({

src/pages/Insights/InsightsDrawer/InsightForm.tsx

@@ -1,6 +1,7 @@
 import {
   Button,
   Col,
+  Ellipsis,
   Grid,
   Input,
   Label,
@@ -9,6 +10,7 @@ import {
   Row,
   SM,
   Skeleton,
+  Tag,
   Textarea,
 } from '@appquality/unguess-design-system';
 import { Field, FieldProps, useFormikContext } from 'formik';
@@ -167,6 +169,24 @@ const InsightForm = () => {
           )}
         </div>
       )}
+      <div>
+        <Label>{t('__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_USECASE_LABEL')}</Label>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: appTheme.space.xs,
+            marginTop: appTheme.space.xs,
+            flexWrap: 'wrap',
+          }}
+        >
+          {values.usecases.map((usecase) => (
+            <Tag key={usecase.id}>
+              <Ellipsis>{usecase.name}</Ellipsis>
+            </Tag>
+          ))}
+        </div>
+      </div>
       <div>
         <Label>
           {t('__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_OBSERVATIONS_LABEL')}