fix: (backport) remove an extra editing xblock modal on unit page (#2111) (#2130)

src/course-unit/CourseUnit.test.jsx

@@ -709,12 +709,6 @@ describe('<CourseUnit />', () => {
       userEvent.click(problemButton);
     });
 
-    await waitFor(() => {
-      expect(screen.getByRole('heading', {
-        name: new RegExp(`${addComponentMessages.blockEditorModalTitle.defaultMessage}`, 'i'),
-      })).toBeInTheDocument();
-    });
-
     axiosMock
       .onGet(getCourseUnitApiUrl(blockId))
       .reply(200, courseUnitIndexMock);

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

@@ -252,13 +252,7 @@ const AddComponent = ({
             />
           </div>
         </StandardModal>
-        <StandardModal
-          title={intl.formatMessage(messages.blockEditorModalTitle)}
-          isOpen={isXBlockEditorModalOpen}
-          onClose={closeXBlockEditorModal}
-          isOverflowVisible={false}
-          size="xl"
-        >
+        {isXBlockEditorModalOpen && (
           <div className="editor-page">
             <EditorPage
               courseId={courseId}
@@ -271,7 +265,7 @@ const AddComponent = ({
               returnFunction={/* istanbul ignore next */ () => onXBlockSave}
             />
           </div>
-        </StandardModal>
+        )}
       </div>
     );
   }

src/course-unit/add-component/messages.js

@@ -36,11 +36,6 @@ const messages = defineMessages({
     defaultMessage: 'Select video',
     description: 'Video picker modal title.',
   },
-  blockEditorModalTitle: {
-    id: 'course-authoring.course-unit.modal.block-editor-title.text',
-    defaultMessage: 'Edit component',
-    description: 'Block editor modal title.',
-  },
   modalContainerTitle: {
     id: 'course-authoring.course-unit.modal.container.title',
     defaultMessage: 'Add {componentTitle} component',

src/course-unit/xblock-container-iframe/index.tsx

@@ -218,13 +218,7 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
           />
         </div>
       </StandardModal>
-      <StandardModal
-        title={intl.formatMessage(messages.blockEditorModalTitle)}
-        isOpen={isXBlockEditorModalOpen}
-        onClose={closeXBlockEditorModal}
-        isOverflowVisible={false}
-        size="xl"
-      >
+      {isXBlockEditorModalOpen && (
         <div className="editor-page">
           <EditorPage
             courseId={courseId}
@@ -237,7 +231,7 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
             returnFunction={/* istanbul ignore next */ () => onXBlockSave}
           />
         </div>
-      </StandardModal>
+      )}
       {Object.keys(accessManagedXBlockData).length ? (
         <ConfigureModal
           isXBlockComponent

src/course-unit/xblock-container-iframe/messages.ts

@@ -19,11 +19,6 @@ const messages = defineMessages({
     id: 'course-authoring.course-unit.xblock.video-editor.title',
     defaultMessage: 'Select video',
   },
-  blockEditorModalTitle: {
-    id: 'course-authoring.course-unit.xblock.editor.title',
-    defaultMessage: 'Edit component',
-    description: 'Block editor modal title.',
-  },
 });
 
 export default messages;