refactor: replace paragon deprecated components

Author: dcoa

src/courseware/course/sequence/Unit/ContentIFrame.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
 import { StrictDict } from '@edx/react-unit-test-utils';
-import { ModalDialog, Modal } from '@openedx/paragon';
+import { ModalDialog } from '@openedx/paragon';
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 import PageLoading from '@src/generic/PageLoading';
@@ -66,21 +66,6 @@ const ContentIFrame = ({
     onLoad: handleIFrameLoad,
   };
 
-  let modalContent;
-  if (modalOptions.isOpen) {
-    modalContent = modalOptions.body
-      ? <div className="unit-modal">{ modalOptions.body }</div>
-      : (
-        <iframe
-          title={modalOptions.title}
-          allow={IFRAME_FEATURE_POLICY}
-          frameBorder="0"
-          src={modalOptions.url}
-          style={{ width: '100%', height: modalOptions.height }}
-        />
-      );
-  }
-
   return (
     <>
       {(shouldShowContent && !hasLoaded) && (
@@ -101,28 +86,28 @@ const ContentIFrame = ({
           <iframe title={title} {...contentIFrameProps} data-testid={testIDs.contentIFrame} />
         </div>
       )}
-      {modalOptions.isOpen && (modalOptions.isFullscreen
-        ? (
-          <ModalDialog
+      {modalOptions.isOpen && 
+          (<ModalDialog
             dialogClassName="modal-lti"
             onClose={handleModalClose}
-            size="fullscreen"
+            size={ modalOptions.isFullscreen ? 'fullscreen': 'md'}
             isOpen
             hasCloseButton={false}
           >
             <ModalDialog.Body className={modalOptions.modalBodyClassName}>
-              {modalContent}
+            {modalOptions.body
+              ? <div className="unit-modal">{ modalOptions.body }</div>
+              : (
+                <iframe
+                  title={modalOptions.title}
+                  allow={IFRAME_FEATURE_POLICY}
+                  frameBorder="0"
+                  src={modalOptions.url}
+                  style={{ width: '100%', height: modalOptions.height }}
+                />
+              )}
             </ModalDialog.Body>
           </ModalDialog>
-
-        ) : (
-          <Modal
-            body={modalContent}
-            dialogClassName="modal-lti"
-            onClose={handleModalClose}
-            open
-          />
-        )
       )}
     </>
   );

src/courseware/course/sequence/Unit/ContentIFrame.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
-import { ModalDialog, Modal } from '@openedx/paragon';
+import { ModalDialog } from '@openedx/paragon';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import PageLoading from '@src/generic/PageLoading';
@@ -13,7 +13,6 @@ jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: 'ErrorPage' }));
 
 jest.mock('@openedx/paragon', () => jest.requireActual('@edx/react-unit-test-utils')
   .mockComponents({
-    Modal: 'Modal',
     ModalDialog: {
       Body: 'ModalDialog.Body',
     },
@@ -138,7 +137,7 @@ describe('ContentIFrame Component', () => {
     });
     it('does not display modal if modalOptions returns isOpen: false', () => {
       el = shallow(<ContentIFrame {...props} />);
-      expect(el.instance.findByType(Modal).length).toEqual(0);
+      expect(el.instance.findByType(ModalDialog).length).toEqual(0);
     });
     describe('if modalOptions.isOpen', () => {
       const testModalOpenAndHandleClose = () => {
@@ -193,30 +192,32 @@ describe('ContentIFrame Component', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withBody });
           el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(Modal);
+          [component] = el.instance.findByType(ModalDialog);
         });
         it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-          expect(component.props.body).toEqual(<div className="unit-modal">{modalOptions.withBody.body}</div>);
+          const content = component.findByType(ModalDialog.Body)[0].children[0];
+          expect(content.matches(shallow(<div className="unit-modal">{modalOptions.withBody.body}</div>))).toEqual(true);
         });
         testModalOpenAndHandleClose();
       });
       describe('url modal', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withUrl });
           el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(Modal);
+          [component] = el.instance.findByType(ModalDialog);
         });
         testModalOpenAndHandleClose();
         it('displays Modal with iframe to provided url if modal.body is not provided', () => {
-          expect(component.props.body).toEqual(
+          const content = component.findByType(ModalDialog.Body)[0].children[0];
+          expect(content.matches(shallow(
             <iframe
               title={modalOptions.withUrl.title}
               allow={IFRAME_FEATURE_POLICY}
               frameBorder="0"
               src={modalOptions.withUrl.url}
               style={{ width: '100%', height: modalOptions.withUrl.height }}
             />,
-          );
+          ))).toEqual(true);
         });
       });
     });

src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Input } from '@openedx/paragon';
+import { Form } from '@openedx/paragon';
 
 import { MasqueradeStatus, Payload } from './data/api';
 import messages from './messages';
@@ -40,11 +40,10 @@ export const MasqueradeUserNameInput: React.FC<Props> = ({ onSubmit, onError, ..
   }, [handleSubmit]);
 
   return (
-    <Input
+    <Form.Control
       aria-labelledby="masquerade-search-label"
       label={intl.formatMessage(messages.userNameLabel)}
       onKeyPress={handleKeyPress}
-      type="text"
       {...otherProps}
     />
   );