[NOREF] - Fix CSV TeamRole translation and RTE parsing (#887)

* Added csv support for array nested translations * Added condition to strip rte tags from csv content
CMS-Enterprise · Jan 5, 2024 · 3832b46 · 3832b46
1 parent 5f8c595
commit 3832b46
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 21 deletions.
diff --git a/src/components/shared/IconInitial/index.tsx b/src/components/shared/IconInitial/index.tsx
@@ -55,7 +55,7 @@ const IconInitial = ({
           {teamRoles &&
             modelLeadFirst!
               .map(role => {
-                return collaboratorsT(`teamRole.options.${role}`);
+                return collaboratorsT(`teamRoles.options.${role}`);
               })
               .join(', ')}
         </p>

diff --git a/src/hooks/useFetchCSVData.tsx b/src/hooks/useFetchCSVData.tsx
@@ -81,15 +81,20 @@ export const headerFormatter = (dataField: string, allPlanTranslation: any) => {
   return translation;
 };
 
-const parentFieldsToTranslate = ['archived', 'status'];
+const parentFieldsToTranslate: string[] = ['archived', 'status'];
+const unwindSections: string[] = ['collaborators'];
 
 /**
  * @param transformObj Data obj to transform from gql query for all/single model plan
  * @param allPlanTranslation Parent level obj containing all model plan tranlsation objects
  */
 
 // Recursive function to map through data and apply translation transforms
-export const dataFormatter = (transformObj: any, allPlanTranslation: any) => {
+export const dataFormatter = (
+  transformObj: any,
+  allPlanTranslation: any,
+  parentKey?: string
+) => {
   const mappedObj: any = { ...transformObj };
 
   getKeys(transformObj).forEach((key: any) => {
@@ -110,6 +115,7 @@ export const dataFormatter = (transformObj: any, allPlanTranslation: any) => {
         ? formatDateUtc(transformObj[key], 'MM/dd/yyyy')
         : transformObj[key];
     }
+
     // Translates any enum values - either single value or an array
     else if (allPlanTranslation?.[key]?.options) {
       if (Array.isArray(transformObj[key])) {
@@ -120,26 +126,36 @@ export const dataFormatter = (transformObj: any, allPlanTranslation: any) => {
         mappedObj[key] = allPlanTranslation[key].options[transformObj[key]];
       }
     }
+
     // Translates and predefined/custom date field to human readable date
     else if (
       allPlanTranslation?.[key]?.dataType === 'date' &&
       transformObj[key]
     ) {
       mappedObj[key] = formatDateLocal(transformObj[key], 'MM/dd/yyyy');
     }
+
+    // If parent is an array - ex: Collaborators, Discussions etc
+    else if (parentKey && unwindSections.includes(parentKey)) {
+      mappedObj[key] = i18next.t<string>(
+        `${parentKey}:${key}.options.${transformObj[key]}`
+      );
+    }
+
     // Converts any arrays of entered text into a comma-separated array - ex: Previous names
     else if (
       Array.isArray(transformObj[key]) &&
       !allPlanTranslation?.[key]?.options
     ) {
       mappedObj[key] = transformObj[key].join(', ');
 
-      // TODO: Remove once/if discussion translations work has been completed
+      // TODO: Remove once/if discussion translations work has been completed - can use parentKey and unwindSections once translations are implemented
     } else if (key === 'userRole') {
       mappedObj[key] = i18next.t<string>(
         `discussions:userRole.${transformObj[key]}`
       );
     }
+
     // If the value is a nested task list item - Basics, Payments, etc - apply it to the current value
     else if (
       transformObj[key] &&
@@ -149,6 +165,15 @@ export const dataFormatter = (transformObj: any, allPlanTranslation: any) => {
       mappedObj[key] = transformObj[key];
     }
 
+    // Strip html tags from TipTap RTE rawContent value
+    else if (
+      transformObj[key] &&
+      typeof transformObj[key] === 'string' &&
+      key === 'rawContent'
+    ) {
+      mappedObj[key] = transformObj[key].replace(/<[^>]*>?/gm, '');
+    }
+
     // If the current value can be further iterated and translated, call the recursive function again
     if (
       transformObj[key] &&
@@ -158,7 +183,8 @@ export const dataFormatter = (transformObj: any, allPlanTranslation: any) => {
     ) {
       mappedObj[key] = dataFormatter(
         transformObj[key],
-        allPlanTranslation?.[key]
+        allPlanTranslation?.[key],
+        key
       );
     }
   });

diff --git a/src/i18n/en-US/modelPlan/collaborators.ts b/src/i18n/en-US/modelPlan/collaborators.ts
@@ -9,10 +9,10 @@ export const collaborators: TranslationCollaborators = {
     dataType: 'string',
     formType: 'select'
   },
-  teamRole: {
-    gqlField: 'teamRole',
-    goField: 'TeamRole',
-    dbField: 'team_role',
+  teamRoles: {
+    gqlField: 'teamRoles',
+    goField: 'TeamRoles',
+    dbField: 'team_roles',
     label: 'Team member role(s)',
     dataType: 'enum',
     formType: 'select',

diff --git a/src/types/translation.ts b/src/types/translation.ts
@@ -472,7 +472,7 @@ export type TranslationPayments = {
 
 // Collaborators
 export type TranslationCollaborators = {
-  teamRole: TranslationFieldPropertiesWithOptions<TeamRole>;
+  teamRoles: TranslationFieldPropertiesWithOptions<TeamRole>;
   username: TranslationFieldProperties;
 };
 

diff --git a/src/utils/export/CsvData.ts b/src/utils/export/CsvData.ts
@@ -368,8 +368,8 @@ const csvFields = [
   {
     label: `${i18next.t<string>(
       'collaboratorsMisc:csvTitle'
-    )} ${i18next.t<string>('collaborators:teamRole.label')}`,
-    value: 'collaborators.teamRole'
+    )} ${i18next.t<string>('collaborators:teamRoles.label')}`,
+    value: 'collaborators.teamRoles'
   },
 
   // Discussions

diff --git a/src/views/ModelPlan/Collaborators/AddCollaborator/index.tsx b/src/views/ModelPlan/Collaborators/AddCollaborator/index.tsx
@@ -45,7 +45,7 @@ const Collaborators = () => {
   const { t: collaboratorsT } = useTranslation('collaborators');
   const { t: collaboratorsMiscT } = useTranslation('collaboratorsMisc');
   const { t: miscellaneousT } = useTranslation('miscellaneous');
-  const { teamRole: teamRoleConfig } = usePlanTranslation('collaborators');
+  const { teamRoles: teamRolesConfig } = usePlanTranslation('collaborators');
 
   const history = useHistory();
 
@@ -125,7 +125,7 @@ const Collaborators = () => {
                     collaborator: commonName,
                     role: teamRoles
                       ?.map((role: TeamRole) => {
-                        return collaboratorsT(`teamRole.options.${role}`);
+                        return collaboratorsT(`teamRoles.options.${role}`);
                       })
                       .join(', ')
                   })}
@@ -164,7 +164,7 @@ const Collaborators = () => {
                     collaborator: commonName,
                     role: teamRoles
                       ?.map((role: TeamRole) => {
-                        return collaboratorsT(`teamRole.options.${role}`);
+                        return collaboratorsT(`teamRoles.options.${role}`);
                       })
                       .join(', ')
                   })}
@@ -315,7 +315,7 @@ const Collaborators = () => {
                         error={!!flatErrors.teamRoles}
                       >
                         <Label htmlFor="collaborator-role">
-                          {collaboratorsT('teamRole.label')}
+                          {collaboratorsT('teamRoles.label')}
                         </Label>
 
                         <FieldErrorMsg>{flatErrors.teamRoles}</FieldErrorMsg>
@@ -326,7 +326,7 @@ const Collaborators = () => {
                           name="role"
                           selectedLabel={collaboratorsMiscT('roles')}
                           options={composeMultiSelectOptions(
-                            teamRoleConfig.options,
+                            teamRolesConfig.options,
                             undefined,
                             isModelLead && isLastModelLead(allCollaborators)
                               ? TeamRole.MODEL_LEAD
@@ -336,12 +336,14 @@ const Collaborators = () => {
                             setFieldValue('teamRoles', value);
                           }}
                           initialValues={initialValues.teamRoles}
-                          tagOrder={teamRoleConfig.options[TeamRole.MODEL_LEAD]}
+                          tagOrder={
+                            teamRolesConfig.options[TeamRole.MODEL_LEAD]
+                          }
                           disabledOption={
                             isModelLead && isLastModelLead(allCollaborators)
                           }
                           disabledLabel={
-                            teamRoleConfig.options[TeamRole.MODEL_LEAD]
+                            teamRolesConfig.options[TeamRole.MODEL_LEAD]
                           }
                         />
                       </FieldGroup>

diff --git a/src/views/ModelPlan/Collaborators/table.tsx b/src/views/ModelPlan/Collaborators/table.tsx
@@ -60,7 +60,7 @@ const CollaboratorsTable = ({
           ];
           return modelLeadFirst
             .map((role: TeamRole) => {
-              return collaboratorsT(`teamRole.options.${role}`);
+              return collaboratorsT(`teamRoles.options.${role}`);
             })
             .join(', ');
         }

diff --git a/src/views/ModelPlan/ReadOnly/Team/index.tsx b/src/views/ModelPlan/ReadOnly/Team/index.tsx
@@ -39,7 +39,7 @@ const MemberCards = ({ collaborator }: { collaborator: CollaboratorsType }) => {
         <p className="margin-y-0">
           {collaborator.teamRoles
             .map((role: TeamRole) => {
-              return collaboratorsT(`teamRole.options.${role}`);
+              return collaboratorsT(`teamRoles.options.${role}`);
             })
             .join(', ')}
         </p>