feat: Allow rename of MERIT tasks (M2-10595) (#2206)

🔗 [Jira Ticket M2-10595](https://mindlogger.atlassian.net/browse/M2-10595)

Changes include:

- Add `<NameDescription />` to enable editing MERIT task name and description.

Author: divbzero

src/modules/Builder/features/PerformanceTasks/Flanker/Flanker.tsx

@@ -12,11 +12,13 @@ import { RoundSettings } from './RoundSettings';
 export const Flanker = () => {
   const { t } = useTranslation();
 
+  const dataTestid = 'builder-activity-flanker';
+
   return (
     <Box sx={{ overflowY: 'auto' }}>
       <StyledPerformanceTaskBody sx={{ p: theme.spacing(2.4, 6.4) }}>
         <StyledHeadlineLarge sx={{ mb: theme.spacing(3) }}>{t('flanker')}</StyledHeadlineLarge>
-        <NameDescription />
+        <NameDescription data-testid={dataTestid} />
         <GeneralSettings />
         <RoundSettings uiType={RoundTypeEnum.Practice} />
         <RoundSettings uiType={RoundTypeEnum.Test} />

src/modules/Builder/features/PerformanceTasks/GyroscopeAndTouch/GyroscopeAndTouch.test.tsx

@@ -199,7 +199,7 @@ describe('GyroscopeAndTouch', () => {
     test('Panels: are rendered correctly', () => {
       renderGyroscopeOrTouch(isGyroscope);
 
-      expect(screen.getByTestId('builder-activity-flanker-common')).toBeVisible();
+      expect(screen.getByTestId(`${mockedTestid}-common`)).toBeVisible();
       expect(screen.getByTestId(mockedTestid)).toBeVisible();
       expect(screen.getByTestId(`${mockedTestid}-overview-instruction`));
       expect(screen.getByTestId(`${mockedTestid}-practice-round-instruction`));
@@ -210,11 +210,11 @@ describe('GyroscopeAndTouch', () => {
       renderGyroscopeOrTouch(isGyroscope);
       expandAllPanels();
 
+      expect(screen.getByTestId(`${mockedTestid}-name`).querySelector('input')).toHaveValue(
+        isGyroscope ? 'CST Gyroscope' : 'CST Touch',
+      );
       expect(
-        screen.getByTestId('builder-activity-flanker-name').querySelector('input'),
-      ).toHaveValue(isGyroscope ? 'CST Gyroscope' : 'CST Touch');
-      expect(
-        screen.getByTestId('builder-activity-flanker-description').querySelector('textarea'),
+        screen.getByTestId(`${mockedTestid}-description`).querySelector('textarea'),
       ).toHaveTextContent(
         `This Activity contains Stability Tracker (${isGyroscope ? 'Gyroscope' : 'Touch'}) Item.`,
       );
@@ -265,7 +265,7 @@ describe('GyroscopeAndTouch', () => {
 
     test.each`
       testId                                                      | inputType     | error                                       | description
-      ${'builder-activity-flanker-name'}                          | ${'input'}    | ${'Activity Name is required'}              | ${'Validation: Activity Name is required'}
+      ${`${mockedTestid}-name`}                                   | ${'input'}    | ${'Activity Name is required'}              | ${'Validation: Activity Name is required'}
       ${`${mockedTestid}-overview-instruction-instruction`}       | ${'textarea'} | ${'Overview Instruction is required'}       | ${'Validation: Overview Instruction is required'}
       ${`${mockedTestid}-practice-round-instruction-instruction`} | ${'textarea'} | ${'Practice Round Instruction is required'} | ${'Validation: Practice Round Instruction is required'}
       ${`${mockedTestid}-test-round-instruction-instruction`}     | ${'textarea'} | ${'Test Round Instruction is required'}     | ${'Validation: Test Round Instruction is required'}

src/modules/Builder/features/PerformanceTasks/GyroscopeAndTouch/GyroscopeAndTouch.tsx

@@ -20,7 +20,7 @@ export const GyroscopeAndTouch = ({ type }: GyroscopeAndTouchProps) => {
     <Box sx={{ overflowY: 'auto' }}>
       <StyledPerformanceTaskBody sx={{ p: theme.spacing(2.4, 6.4) }}>
         <StyledHeadlineLarge sx={{ mb: theme.spacing(3) }}>{t(type || '')}</StyledHeadlineLarge>
-        <NameDescription />
+        <NameDescription data-testid={dataTestid} />
         <GeneralSettings />
         <StyledTitleLarge sx={{ mb: theme.spacing(2.4) }}>{t('instructions')}</StyledTitleLarge>
         <Instruction

src/modules/Builder/features/PerformanceTasks/NameDescription/NameDescription.tsx

@@ -3,17 +3,19 @@ import { useTranslation } from 'react-i18next';
 import { ToggleContainerUiType, ToggleItemContainer } from 'modules/Builder/components';
 
 import { NameDescriptionContent } from './NameDescriptionContent';
+import { NameDescriptionProps } from './NameDescription.types';
 
-export const NameDescription = () => {
+export const NameDescription = ({ 'data-testid': dataTestid }: NameDescriptionProps) => {
   const { t } = useTranslation();
 
   return (
     <ToggleItemContainer
       uiType={ToggleContainerUiType.PerformanceTask}
       title={t('nameAndDescription')}
       Content={NameDescriptionContent}
+      contentProps={{ 'data-testid': dataTestid }}
       headerToggling
-      data-testid="builder-activity-flanker-common"
+      data-testid={`${dataTestid}-common`}
     />
   );
 };

src/modules/Builder/features/PerformanceTasks/NameDescription/NameDescription.types.ts

@@ -0,0 +1,3 @@
+export type NameDescriptionProps = {
+  'data-testid'?: string;
+};

src/modules/Builder/features/PerformanceTasks/NameDescription/NameDescriptionContent/NameDescriptionContent.tsx

@@ -6,12 +6,15 @@ import { useCurrentActivity, useCustomFormContext } from 'modules/Builder/hooks'
 import { InputController } from 'shared/components/FormComponents';
 import { MAX_NAME_LENGTH, MAX_DESCRIPTION_LENGTH, TEXTAREA_ROWS_COUNT } from 'shared/consts';
 
-export const NameDescriptionContent = () => {
+import { NameDescriptionContentProps } from './NameDescriptionContent.types';
+
+export const NameDescriptionContent = ({
+  'data-testid': dataTestid,
+}: NameDescriptionContentProps) => {
   const { t } = useTranslation();
   const { control } = useCustomFormContext();
   const { fieldName } = useCurrentActivity();
 
-  const dataTestid = 'builder-activity-flanker';
   const commonProps = {
     control,
     fullWidth: true,

src/modules/Builder/features/PerformanceTasks/NameDescription/NameDescriptionContent/NameDescriptionContent.types.ts

@@ -0,0 +1,3 @@
+export type NameDescriptionContentProps = {
+  'data-testid'?: string;
+};

src/modules/Builder/features/PerformanceTasks/Unity/Unity.tsx

@@ -7,6 +7,7 @@ import { ToggleContainerUiType, ToggleItemContainer } from 'modules/Builder/comp
 import { Svg } from 'shared/components';
 import { useCurrentActivity, useCustomFormContext } from 'modules/Builder/hooks';
 
+import { NameDescription } from '../NameDescription';
 import { StyledPerformanceTaskBody } from '../PerformanceTasks.styles';
 import UnityFileModal from './UnityFileModal/UnityFileModal';
 import { UnityFilePreview } from './UnityFilePreview';
@@ -92,6 +93,7 @@ export const Unity = () => {
         <StyledHeadlineLarge sx={{ mb: theme.spacing(3) }}>
           {t('performanceTasks.unity')}
         </StyledHeadlineLarge>
+        <NameDescription data-testid={dataTestid} />
         <StyledTitleLarge sx={{ mb: theme.spacing(2.4) }}>
           {t('unityInstructions')}
         </StyledTitleLarge>