refactor: constant name and replace hardcoded string with constant

src/course-unit/add-component/AddComponent.jsx

@@ -5,7 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { useToggle } from '@openedx/paragon';
 
 import { getCourseSectionVertical } from '../data/selectors';
-import { COMPONENT_ICON_TYPES } from '../constants';
+import { COMPONENT_TYPES } from '../constants';
 import ComponentModalView from './add-component-modals/ComponentModalView';
 import AddComponentButton from './add-component-btn';
 import messages from './messages';
@@ -20,32 +20,32 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
 
   const handleCreateNewXBlock = (type, moduleName) => {
     switch (type) {
-    case COMPONENT_ICON_TYPES.discussion:
-    case COMPONENT_ICON_TYPES.dragAndDrop:
+    case COMPONENT_TYPES.discussion:
+    case COMPONENT_TYPES.dragAndDrop:
       handleCreateNewCourseXBlock({ type, parentLocator: blockId });
       break;
-    case COMPONENT_ICON_TYPES.problem:
-    case COMPONENT_ICON_TYPES.video:
+    case COMPONENT_TYPES.problem:
+    case COMPONENT_TYPES.video:
       handleCreateNewCourseXBlock({ type, parentLocator: blockId }, ({ courseKey, locator }) => {
         navigate(`/course/${courseKey}/editor/${type}/${locator}`);
       });
       break;
     // TODO: The library functional will be a bit different of current legacy (CMS)
     //  behaviour and this ticket is on hold (blocked by other development team).
-    case COMPONENT_ICON_TYPES.library:
+    case COMPONENT_TYPES.library:
       handleCreateNewCourseXBlock({ type, category: 'library_content', parentLocator: blockId });
       break;
-    case COMPONENT_ICON_TYPES.advanced:
+    case COMPONENT_TYPES.advanced:
       handleCreateNewCourseXBlock({
         type: moduleName, category: moduleName, parentLocator: blockId,
       });
       break;
-    case COMPONENT_ICON_TYPES.openassessment:
+    case COMPONENT_TYPES.openassessment:
       handleCreateNewCourseXBlock({
         boilerplate: moduleName, category: type, parentLocator: blockId,
       });
       break;
-    case COMPONENT_ICON_TYPES.html:
+    case COMPONENT_TYPES.html:
       handleCreateNewCourseXBlock({
         type,
         boilerplate: moduleName,
@@ -75,21 +75,21 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
           }
 
           switch (type) {
-          case COMPONENT_ICON_TYPES.advanced:
+          case COMPONENT_TYPES.advanced:
             modalParams = {
               open: openAdvanced,
               close: closeAdvanced,
               isOpen: isOpenAdvanced,
             };
             break;
-          case COMPONENT_ICON_TYPES.html:
+          case COMPONENT_TYPES.html:
             modalParams = {
               open: openHtml,
               close: closeHtml,
               isOpen: isOpenHtml,
             };
             break;
-          case COMPONENT_ICON_TYPES.openassessment:
+          case COMPONENT_TYPES.openassessment:
             modalParams = {
               open: openOpenAssessment,
               close: closeOpenAssessment,

src/course-unit/add-component/AddComponent.test.jsx

@@ -14,7 +14,7 @@ import { executeThunk } from '../../utils';
 import { fetchCourseSectionVerticalData } from '../data/thunk';
 import { getCourseSectionVerticalApiUrl } from '../data/api';
 import { courseSectionVerticalMock } from '../__mocks__';
-import { COMPONENT_ICON_TYPES } from '../constants';
+import { COMPONENT_TYPES } from '../constants';
 import AddComponent from './AddComponent';
 import messages from './messages';
 
@@ -88,7 +88,7 @@ describe('<AddComponent />', () => {
         ...courseSectionVerticalMock,
         component_templates: [
           ...courseSectionVerticalMock.component_templates.map((component) => {
-            if (component.type === 'discussion') {
+            if (component.type === COMPONENT_TYPES.discussion) {
               return {
                 ...component,
                 templates: [],
@@ -104,7 +104,7 @@ describe('<AddComponent />', () => {
     const { queryByRole, getByRole } = renderComponent();
 
     Object.keys(componentTemplates).map((component) => {
-      if (componentTemplates[component].type === 'discussion') {
+      if (componentTemplates[component].type === COMPONENT_TYPES.discussion) {
         return expect(queryByRole('button', {
           name: new RegExp(`${messages.buttonText.defaultMessage} ${componentTemplates[component].display_name}`, 'i'),
         })).not.toBeInTheDocument();
@@ -153,7 +153,7 @@ describe('<AddComponent />', () => {
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
       parentLocator: '123',
-      type: 'discussion',
+      type: COMPONENT_TYPES.discussion,
     });
   });
 
@@ -168,7 +168,7 @@ describe('<AddComponent />', () => {
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
       parentLocator: '123',
-      type: 'drag-and-drop-v2',
+      type: COMPONENT_TYPES.dragAndDrop,
     });
   });
 
@@ -183,7 +183,7 @@ describe('<AddComponent />', () => {
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
       parentLocator: '123',
-      type: 'problem',
+      type: COMPONENT_TYPES.problem,
     }, expect.any(Function));
   });
 
@@ -198,7 +198,7 @@ describe('<AddComponent />', () => {
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
       parentLocator: '123',
-      type: 'video',
+      type: COMPONENT_TYPES.video,
     }, expect.any(Function));
   });
 
@@ -214,7 +214,7 @@ describe('<AddComponent />', () => {
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
       parentLocator: '123',
       category: 'library_content',
-      type: 'library',
+      type: COMPONENT_TYPES.library,
     });
   });
 
@@ -249,7 +249,7 @@ describe('<AddComponent />', () => {
     await waitFor(() => {
       expect(getByText(/Add advanced component/i)).toBeInTheDocument();
       componentTemplates.forEach((componentTemplate) => {
-        if (componentTemplate.type === COMPONENT_ICON_TYPES.advanced) {
+        if (componentTemplate.type === COMPONENT_TYPES.advanced) {
           componentTemplate.templates.forEach((template) => {
             expect(within(modalContainer).getByRole('radio', { name: template.display_name })).toBeInTheDocument();
           });
@@ -270,7 +270,7 @@ describe('<AddComponent />', () => {
     await waitFor(() => {
       expect(getByText(/Add text component/i)).toBeInTheDocument();
       componentTemplates.forEach((componentTemplate) => {
-        if (componentTemplate.type === COMPONENT_ICON_TYPES.html) {
+        if (componentTemplate.type === COMPONENT_TYPES.html) {
           componentTemplate.templates.forEach((template) => {
             expect(within(modalContainer).getByRole('radio', { name: template.display_name })).toBeInTheDocument();
           });
@@ -292,7 +292,7 @@ describe('<AddComponent />', () => {
     await waitFor(() => {
       expect(getByText(/Add open response component/i)).toBeInTheDocument();
       componentTemplates.forEach((componentTemplate) => {
-        if (componentTemplate.type === COMPONENT_ICON_TYPES.openassessment) {
+        if (componentTemplate.type === COMPONENT_TYPES.openassessment) {
           componentTemplate.templates.forEach((template) => {
             expect(within(modalContainer).getByRole('radio', { name: template.display_name })).toBeInTheDocument();
           });
@@ -348,8 +348,8 @@ describe('<AddComponent />', () => {
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
       parentLocator: '123',
-      type: 'html',
-      boilerplate: 'html',
+      type: COMPONENT_TYPES.html,
+      boilerplate: COMPONENT_TYPES.html,
     }, expect.any(Function));
   });
 
@@ -374,7 +374,7 @@ describe('<AddComponent />', () => {
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
     expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
       parentLocator: '123',
-      category: 'openassessment',
+      category: COMPONENT_TYPES.openassessment,
       boilerplate: 'peer-assessment',
     });
   });
@@ -388,7 +388,7 @@ describe('<AddComponent />', () => {
           ...courseSectionVerticalMock,
           component_templates: [
             ...courseSectionVerticalMock.component_templates.map((component) => {
-              if (component.type === 'advanced') {
+              if (component.type === COMPONENT_TYPES.advanced) {
                 return {
                   ...component,
                   support_legend: { show_legend: false },
@@ -431,7 +431,7 @@ describe('<AddComponent />', () => {
           ...courseSectionVerticalMock,
           component_templates: [
             ...courseSectionVerticalMock.component_templates.map((component) => {
-              if (component.type === 'advanced') {
+              if (component.type === COMPONENT_TYPES.advanced) {
                 return {
                   ...component,
                   support_legend: { show_legend: true },

src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { Icon } from '@openedx/paragon';
 import { EditNote as EditNoteIcon } from '@openedx/paragon/icons';
 
-import { COMPONENT_ICON_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../constants';
+import { COMPONENT_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../constants';
 
 const AddComponentIcon = ({ type }) => {
   const icon = COMPONENT_TYPE_ICON_MAP[type] || EditNoteIcon;
@@ -11,7 +11,7 @@ const AddComponentIcon = ({ type }) => {
 };
 
 AddComponentIcon.propTypes = {
-  type: PropTypes.oneOf(Object.values(COMPONENT_ICON_TYPES)).isRequired,
+  type: PropTypes.oneOf(Object.values(COMPONENT_TYPES)).isRequired,
 };
 
 export default AddComponentIcon;

src/course-unit/constants.js

@@ -34,7 +34,7 @@ export const CLIPBOARD_STATUS = {
   error: 'error',
 };
 
-export const COMPONENT_ICON_TYPES = {
+export const COMPONENT_TYPES = {
   advanced: 'advanced',
   discussion: 'discussion',
   library: 'library',
@@ -54,14 +54,14 @@ export const TYPE_ICONS_MAP = {
 };
 
 export const COMPONENT_TYPE_ICON_MAP = {
-  [COMPONENT_ICON_TYPES.advanced]: ScienceIcon,
-  [COMPONENT_ICON_TYPES.discussion]: QuestionAnswerOutlineIcon,
-  [COMPONENT_ICON_TYPES.library]: LibraryIcon,
-  [COMPONENT_ICON_TYPES.html]: TextFieldsIcon,
-  [COMPONENT_ICON_TYPES.openassessment]: EditNoteIcon,
-  [COMPONENT_ICON_TYPES.problem]: HelpOutlineIcon,
-  [COMPONENT_ICON_TYPES.video]: VideoCameraIcon,
-  [COMPONENT_ICON_TYPES.dragAndDrop]: BackHandIcon,
+  [COMPONENT_TYPES.advanced]: ScienceIcon,
+  [COMPONENT_TYPES.discussion]: QuestionAnswerOutlineIcon,
+  [COMPONENT_TYPES.library]: LibraryIcon,
+  [COMPONENT_TYPES.html]: TextFieldsIcon,
+  [COMPONENT_TYPES.openassessment]: EditNoteIcon,
+  [COMPONENT_TYPES.problem]: HelpOutlineIcon,
+  [COMPONENT_TYPES.video]: VideoCameraIcon,
+  [COMPONENT_TYPES.dragAndDrop]: BackHandIcon,
 };
 
 export const getUnitReleaseStatus = (intl) => ({

src/course-unit/course-xblock/CourseXBlock.jsx

@@ -15,7 +15,7 @@ import { scrollToElement } from '../../course-outline/utils';
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import { getCanEdit, getCourseId } from '../data/selectors';
 import { copyToClipboard } from '../data/thunk';
-import { COMPONENT_ICON_TYPES } from '../constants';
+import { COMPONENT_TYPES } from '../constants';
 import XBlockContent from './xblock-content/XBlockContent';
 import XBlockMessages from './xblock-messages/XBlockMessages';
 import RenderErrorAlert from './render-error-alert';
@@ -54,9 +54,9 @@ const CourseXBlock = ({
 
   const handleEdit = () => {
     switch (type) {
-    case COMPONENT_ICON_TYPES.html:
-    case COMPONENT_ICON_TYPES.problem:
-    case COMPONENT_ICON_TYPES.video:
+    case COMPONENT_TYPES.html:
+    case COMPONENT_TYPES.problem:
+    case COMPONENT_TYPES.video:
       navigate(`/course/${courseId}/editor/${type}/${id}`);
       break;
     default:

src/course-unit/course-xblock/CourseXBlock.test.jsx

@@ -16,7 +16,7 @@ import { getCourseSectionVerticalApiUrl, getXBlockBaseApiUrl } from '../data/api
 import { fetchCourseSectionVerticalData } from '../data/thunk';
 import { executeThunk } from '../../utils';
 import { getCourseId } from '../data/selectors';
-import { COMPONENT_ICON_TYPES, PUBLISH_TYPES } from '../constants';
+import { COMPONENT_TYPES, PUBLISH_TYPES } from '../constants';
 import { courseSectionVerticalMock, courseVerticalChildrenMock } from '../__mocks__';
 import renderErrorAlertMessages from './render-error-alert/messages';
 import CourseXBlock from './CourseXBlock';
@@ -253,7 +253,7 @@ describe('<CourseXBlock />', () => {
   describe('edit', () => {
     it('navigates to editor page on edit HTML xblock', () => {
       const { getByText, getByRole } = renderComponent({
-        type: COMPONENT_ICON_TYPES.html,
+        type: COMPONENT_TYPES.html,
       });
 
       const editButton = getByRole('button', { name: messages.blockAltButtonEdit.defaultMessage });
@@ -267,7 +267,7 @@ describe('<CourseXBlock />', () => {
 
     it('navigates to editor page on edit Video xblock', () => {
       const { getByText, getByRole } = renderComponent({
-        type: COMPONENT_ICON_TYPES.video,
+        type: COMPONENT_TYPES.video,
       });
 
       const editButton = getByRole('button', { name: messages.blockAltButtonEdit.defaultMessage });
@@ -281,7 +281,7 @@ describe('<CourseXBlock />', () => {
 
     it('navigates to editor page on edit Problem xblock', () => {
       const { getByText, getByRole } = renderComponent({
-        type: COMPONENT_ICON_TYPES.problem,
+        type: COMPONENT_TYPES.problem,
       });
 
       const editButton = getByRole('button', { name: messages.blockAltButtonEdit.defaultMessage });