refactor: Problem type handling to support localization

- Updated hooks and components to utilize localized problem titles and descriptions.
- Introduced `getProblemTypes` and `getAdvanceProblems` functions for internationalization support.
- Enhanced tests to verify localized titles and descriptions for problem types.
- Added new messages for various problem types and their descriptions.
- Refactored `TypeCard`, `TypeRow`, and `SelectTypeModal` components to use localized strings.
- Improved test coverage for problem type selection and rendering.

Author: papphelix

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+
+import { ProblemTypeKeys } from '@src/editors/data/constants/problem';
 import {
   render, screen, fireEvent, initializeMocks,
 } from '../../../../../../testUtils';
 import AnswersContainer from './AnswersContainer';
-import { ProblemTypeKeys } from '../../../../../data/constants/problem';
-// Import actions after mocking to access mocked functions
 import { actions } from '../../../../../data/redux';
 
 const { useAnswerContainer } = require('./hooks');

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
+import { getProblemTypes } from '@src/editors/data/constants/problem';
 import messages from './messages';
-import { ProblemTypes } from '../../../../../data/constants/problem';
 import AnswersContainer from './AnswersContainer';
 
 // This widget should be connected, grab all answers from store, update them as needed.
@@ -12,15 +12,21 @@ const AnswerWidget = ({
   problemType,
 }) => {
   const intl = useIntl();
-  const problemStaticData = ProblemTypes[problemType];
+
+  const localizedProblemTypes = getProblemTypes(intl.formatMessage);
+  const localizedProblemStaticData = localizedProblemTypes[problemType];
+
   return (
     <div>
       <div className="mt-4 text-primary-500">
         <div className="h4">
           <FormattedMessage {...messages.answerWidgetTitle} />
         </div>
         <div className="small">
-          {intl.formatMessage(messages.answerHelperText, { helperText: problemStaticData.description })}
+          <FormattedMessage
+            {...messages.answerHelperText}
+            values={{ helperText: localizedProblemStaticData.description }}
+          />
         </div>
       </div>
       <AnswersContainer problemType={problemType} />

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js

@@ -3,18 +3,19 @@ import { useState, useEffect } from 'react';
 import {
   includes, isEmpty, isFinite, isNaN, isNil,
 } from 'lodash';
+import {
+  ProblemTypeKeys,
+  ProblemTypes,
+  RichTextProblems,
+  ShowAnswerTypesKeys,
+  getProblemTypes,
+} from '@src/editors/data/constants/problem';
 // This 'module' self-import hack enables mocking during tests.
 // See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
 // should be re-thought and cleaned up to avoid this pattern.
 // eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 import messages from './messages';
-import {
-  ProblemTypeKeys,
-  ProblemTypes,
-  RichTextProblems,
-  ShowAnswerTypesKeys,
-} from '../../../../../data/constants/problem';
 import { fetchEditorContent } from '../hooks';
 
 export const state = {
@@ -232,6 +233,7 @@ export const typeRowHooks = ({
   typeKey,
   updateField,
   updateAnswer,
+  formatMessage,
 }) => {
   const clearPreviouslySelectedAnswers = () => {
     let currentAnswerTitles;
@@ -312,8 +314,17 @@ export const typeRowHooks = ({
       updateAnswersToCorrect();
     }
 
-    if (blockTitle === ProblemTypes[problemType].title) {
-      setBlockTitle(ProblemTypes[typeKey].title);
+    // Check if blockTitle matches either the localized or non-localized problem type title
+    const localizedProblemTypes = formatMessage ? getProblemTypes(formatMessage) : null;
+    const currentTitle = localizedProblemTypes
+      ? localizedProblemTypes[problemType].title
+      : ProblemTypes[problemType].title;
+
+    if (blockTitle === currentTitle) {
+      const newTitle = localizedProblemTypes
+        ? localizedProblemTypes[typeKey].title
+        : ProblemTypes[typeKey].title;
+      setBlockTitle(newTitle);
     }
     updateField({ problemType: typeKey });
   };

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.test.js

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
+import * as problemConstants from '@src/editors/data/constants/problem';
+import { ProblemTypeKeys, ProblemTypes } from '@src/editors/data/constants/problem';
 import { MockUseState } from '../../../../../testUtils';
 import messages from './messages';
 import { keyStore } from '../../../../../utils';
 import * as hooks from './hooks';
-import { ProblemTypeKeys, ProblemTypes } from '../../../../../data/constants/problem';
 import * as editHooks from '../hooks';
 
 jest.mock('react', () => {
@@ -381,6 +382,32 @@ describe('Problem settings hooks', () => {
       expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(3, { ...typeRowProps.answers[2], title: 'testC' });
       expect(typeRowProps.updateField).toHaveBeenCalledWith({ problemType: ProblemTypeKeys.TEXTINPUT });
     });
+
+    test('test typeRowHooks sets localized block title when formatMessage is provided', () => {
+      const mockSetBlockTitle = jest.fn();
+      const mockUpdateField = jest.fn();
+      const mockUpdateAnswer = jest.fn();
+      const mockFormatMessage = (msg) => `localized-${msg.id || msg.defaultMessage || msg}`;
+      const props = {
+        answers: [],
+        blockTitle: 'localized-problem.multiplechoiceresponse.title', // Simulate a localized title
+        correctAnswerCount: 1,
+        problemType: ProblemTypeKeys.SINGLESELECT,
+        setBlockTitle: mockSetBlockTitle,
+        typeKey: ProblemTypeKeys.MULTISELECT,
+        updateField: mockUpdateField,
+        updateAnswer: mockUpdateAnswer,
+        formatMessage: mockFormatMessage,
+      };
+      jest.spyOn(problemConstants, 'getProblemTypes').mockImplementation((fmt) => ({
+        [ProblemTypeKeys.SINGLESELECT]: { title: fmt({ id: 'problem.multiplechoiceresponse.title' }) },
+        [ProblemTypeKeys.MULTISELECT]: { title: fmt({ id: 'problem.choiceresponse.title' }) },
+      }));
+      const hook = hooks.typeRowHooks(props);
+      hook.onClick();
+      expect(mockSetBlockTitle).toHaveBeenCalledWith('localized-problem.choiceresponse.title');
+      expect(mockUpdateField).toHaveBeenCalledWith({ problemType: ProblemTypeKeys.MULTISELECT });
+    });
   });
   test('test handleConfirmEditorSwitch hook', () => {
     const switchEditor = jest.fn();

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+
+import { ProblemTypeKeys } from '@src/editors/data/constants/problem';
 import {
   render, screen, initializeMocks,
 } from '@src/testUtils';
 import * as hooks from './hooks';
 import { SettingsWidgetInternal as SettingsWidget } from '.';
-import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 
 jest.mock('./settingsComponents/GeneralFeedback', () => 'GeneralFeedback');
 jest.mock('./settingsComponents/GroupFeedback', () => 'GroupFeedback');

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { ProblemTypeKeys, getProblemTypes } from '@src/editors/data/constants/problem';
 import SettingsOption from '../SettingsOption';
-import { ProblemTypeKeys, ProblemTypes } from '../../../../../../data/constants/problem';
 import messages from '../messages';
 import TypeRow from './TypeRow';
 
@@ -16,14 +17,15 @@ const TypeCard = ({
   updateAnswer,
 }) => {
   const intl = useIntl();
+  const localizedProblemTypes = getProblemTypes(intl.formatMessage);
   const problemTypeKeysArray = Object.values(ProblemTypeKeys).filter(key => key !== ProblemTypeKeys.ADVANCED);
 
   if (problemType === ProblemTypeKeys.ADVANCED) { return null; }
 
   return (
     <SettingsOption
       title={intl.formatMessage(messages.typeSettingTitle)}
-      summary={ProblemTypes[problemType].title}
+      summary={localizedProblemTypes[problemType].title}
     >
       {problemTypeKeysArray.map((typeKey, i) => (
         <TypeRow
@@ -32,7 +34,7 @@ const TypeCard = ({
           correctAnswerCount={correctAnswerCount}
           key={typeKey}
           typeKey={typeKey}
-          label={ProblemTypes[typeKey].title}
+          label={localizedProblemTypes[typeKey].title}
           selected={typeKey !== problemType}
           problemType={problemType}
           lastRow={(i + 1) === problemTypeKeysArray.length}

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
+import { ProblemTypeKeys } from '@src/editors/data/constants/problem';
 import { render, screen, initializeMocks } from '@src/testUtils';
 import TypeCard from './TypeCard';
-import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
 
 describe('TypeCard', () => {
   const props = {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon } from '@openedx/paragon';
 import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Check } from '@openedx/paragon/icons';
 import { typeRowHooks } from '../hooks';
 
@@ -19,6 +20,8 @@ const TypeRow = ({
   updateField,
   updateAnswer,
 }) => {
+  const intl = useIntl();
+
   const { onClick } = typeRowHooks({
     answers,
     blockTitle,
@@ -28,6 +31,7 @@ const TypeRow = ({
     typeKey,
     updateField,
     updateAnswer,
+    formatMessage: intl.formatMessage,
   });
 
   return (

src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.tsx

@@ -71,6 +71,7 @@ const SelectTypeWrapper: React.FC<Props> = ({
                 updateField,
                 setBlockTitle,
                 defaultSettings,
+                formatMessage: intl.formatMessage,
               })}
               disabled={!selected}
             >

src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/messages.ts

@@ -27,6 +27,134 @@ const messages = defineMessages({
     defaultMessage: 'Select',
     description: 'Screen reader label for select button.',
   },
+
+  // Problem Type Titles
+  singleSelectTitle: {
+    id: 'authoring.problemeditor.problemtype.singleselect.title',
+    defaultMessage: 'Single select',
+    description: 'Title for single select problem type',
+  },
+  multiSelectTitle: {
+    id: 'authoring.problemeditor.problemtype.multiselect.title',
+    defaultMessage: 'Multi-select',
+    description: 'Title for multi-select problem type',
+  },
+  dropdownTitle: {
+    id: 'authoring.problemeditor.problemtype.dropdown.title',
+    defaultMessage: 'Dropdown',
+    description: 'Title for dropdown problem type',
+  },
+  numericalInputTitle: {
+    id: 'authoring.problemeditor.problemtype.numeric.title',
+    defaultMessage: 'Numerical input',
+    description: 'Title for numerical input problem type',
+  },
+  textInputTitle: {
+    id: 'authoring.problemeditor.problemtype.textinput.title',
+    defaultMessage: 'Text input',
+    description: 'Title for text input problem type',
+  },
+  advancedProblemTitle: {
+    id: 'authoring.problemeditor.problemtype.advanced.title',
+    defaultMessage: 'Advanced Problem',
+    description: 'Title for advanced problem type',
+  },
+
+  // Advanced Problem Type Titles
+  blankProblemTitle: {
+    id: 'authoring.problemeditor.advancedproblemtype.blank.title',
+    defaultMessage: 'Blank problem',
+    description: 'Title for blank advanced problem type',
+  },
+  circuitSchematicTitle: {
+    id: 'authoring.problemeditor.advancedproblemtype.circuitschematic.title',
+    defaultMessage: 'Circuit schematic builder',
+    description: 'Title for circuit schematic builder advanced problem type',
+  },
+  customJavaScriptTitle: {
+    id: 'authoring.problemeditor.advancedproblemtype.jsinput.title',
+    defaultMessage: 'Custom JavaScript display and grading',
+    description: 'Title for custom JavaScript display and grading advanced problem type',
+  },
+  customPythonTitle: {
+    id: 'authoring.problemeditor.advancedproblemtype.customgrader.title',
+    defaultMessage: 'Custom Python-evaluated input',
+    description: 'Title for custom Python-evaluated input advanced problem type',
+  },
+  imageMappedTitle: {
+    id: 'authoring.problemeditor.advancedproblemtype.image.title',
+    defaultMessage: 'Image mapped input',
+    description: 'Title for image mapped input advanced problem type',
+  },
+  mathExpressionTitle: {
+    id: 'authoring.problemeditor.advancedproblemtype.formula.title',
+    defaultMessage: 'Math expression input',
+    description: 'Title for math expression input advanced problem type',
+  },
+  problemWithHintTitle: {
+    id: 'authoring.problemeditor.advancedproblemtype.problemwithhint.title',
+    defaultMessage: 'Problem with adaptive hint',
+    description: 'Title for problem with adaptive hint advanced problem type',
+  },
+
+  // Problem Type Descriptions
+  singleSelectDescription: {
+    id: 'authoring.problemeditor.problemtype.singleselect.description',
+    defaultMessage: 'Learners must select the correct answer from a list of possible options.',
+    description: 'Preview description for single select problem type',
+  },
+  multiSelectDescription: {
+    id: 'authoring.problemeditor.problemtype.multiselect.description',
+    defaultMessage: 'Learners must select all correct answers from a list of possible options.',
+    description: 'Preview description for multi-select problem type',
+  },
+  dropdownDescription: {
+    id: 'authoring.problemeditor.problemtype.dropdown.description',
+    defaultMessage: 'Learners must select the correct answer from a list of possible options',
+    description: 'Preview description for dropdown problem type',
+  },
+  numericalInputDescription: {
+    id: 'authoring.problemeditor.problemtype.numeric.description',
+    defaultMessage: 'Specify one or more correct numeric answers, submitted in a response field.',
+    description: 'Preview description for numerical input problem type',
+  },
+  textInputDescription: {
+    id: 'authoring.problemeditor.problemtype.textinput.description',
+    defaultMessage: 'Specify one or more correct text answers, including numbers and special characters, submitted in a response field.',
+    description: 'Preview description for text input problem type',
+  },
+  advancedProblemDescription: {
+    id: 'authoring.problemeditor.problemtype.advanced.description',
+    defaultMessage: 'An Advanced Problem Type',
+    description: 'Description for advanced problem type',
+  },
+
+  // Problem Type Instructions
+  singleSelectInstruction: {
+    id: 'authoring.problemeditor.problemtype.singleselect.instruction',
+    defaultMessage: 'Enter your single select answers below and select which choices are correct. Learners must choose one correct answer.',
+    description: 'Instruction for single select problem type',
+  },
+  multiSelectInstruction: {
+    id: 'authoring.problemeditor.problemtype.multiselect.instruction',
+    defaultMessage: 'Enter your multi select answers below and select which choices are correct. Learners must choose all correct answers.',
+    description: 'Instruction for multi-select problem type',
+  },
+  dropdownInstruction: {
+    id: 'authoring.problemeditor.problemtype.dropdown.instruction',
+    defaultMessage: 'Enter your dropdown answers below and select which choice is correct. Learners must select one correct answer.',
+    description: 'Instruction for dropdown problem type',
+  },
+  numericalInputInstruction: {
+    id: 'authoring.problemeditor.problemtype.numeric.instruction',
+    defaultMessage: 'Enter correct numerical input answers below. Learners must enter one correct answer.',
+    description: 'Instruction for numerical input problem type',
+  },
+  textInputInstruction: {
+    id: 'authoring.problemeditor.problemtype.textinput.instruction',
+    defaultMessage: 'Enter your text input answers below and select which choices are correct. Learners must enter one correct answer.',
+    description: 'Instruction for text input problem type',
+  },
 });
 
 export default messages;