feat(insight-modal):set-max-length-for-description-to-350

AppQuality · Oct 3, 2023 · f628235 · f628235
1 parent 1965b26
commit f628235
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/pages/UxDashboard/UxForm/FormProvider.tsx b/src/pages/UxDashboard/UxForm/FormProvider.tsx
@@ -81,6 +81,7 @@ export interface FormValuesInterface {
 
 export const sentimentNoteMaxChar = 100;
 export const videoCitMaxChar = 150;
+export const insightDescriptionMaxChar = 350;
 const FormProvider = ({ children }: { children: ReactNode }) => {
   const { add } = siteWideMessageStore();
   const { id } = useParams<{ id: string }>();
@@ -179,7 +180,12 @@ const FormProvider = ({ children }: { children: ReactNode }) => {
       object().shape({
         id: number(),
         title: string().required("Campo obbligatorio"),
-        description: string().required("Campo obbligatorio"),
+        description: string()
+          .max(
+            insightDescriptionMaxChar,
+            `Massimo ${insightDescriptionMaxChar} caratteri`
+          )
+          .required("Campo obbligatorio"),
         severity: object()
           .shape({
             id: number().required("Campo obbligatorio"),

diff --git a/src/pages/UxDashboard/UxForm/Insights/InsightModal.tsx b/src/pages/UxDashboard/UxForm/Insights/InsightModal.tsx
@@ -19,7 +19,10 @@ import styled from "styled-components";
 import SeverityField from "../components/fields/SeverityField";
 import ClusterField from "../components/fields/ClusterField";
 import VideoParts from "../VideoParts";
-import { FormValuesInterface } from "../FormProvider";
+import {
+  FormValuesInterface,
+  insightDescriptionMaxChar,
+} from "../FormProvider";
 import { useMemo } from "react";
 import { fieldName } from ".";
 
@@ -160,8 +163,16 @@ const InsightModal = ({ remove }: InsightModalProps) => {
             <div data-qa="insight-description">
               <TextareaField
                 height="8em"
+                counterMax={insightDescriptionMaxChar}
                 name={`${fieldName}[${insightIndex}].description`}
-                label="Description"
+                label={
+                  <div>
+                    Descrizione{" "}
+                    <strong>
+                      (Massimo {insightDescriptionMaxChar} caratteri)
+                    </strong>
+                  </div>
+                }
               />
             </div>
           </BSCol>