feat: Update deprecated components

nelc · Jan 17, 2024 · fc40e86 · fc40e86
1 parent 8d92033
commit fc40e86
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 22 deletions.
diff --git a/src/courseware/course/sequence/Unit.jsx b/src/courseware/course/sequence/Unit.jsx
@@ -1,7 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { AppContext, ErrorPage } from '@edx/frontend-platform/react';
-import { Modal } from '@edx/paragon';
+import { ModalDialog, ActionRow } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import React, {
   Suspense, useCallback, useContext, useEffect, useLayoutEffect, useState,
@@ -196,29 +196,45 @@ const Unit = ({
         <ErrorPage />
       )}
       {modalOptions.open && (
-        <Modal
-          body={(
+        <ModalDialog
+          title="My dialog"
+          isOpen
+          onClose={() => { setModalOptions({ open: false }); }}
+          isFullscreenOnMobile
+          // size="xl"
+          className="modal-lti"
+          hasCloseButton
+        >
+          <ModalDialog.Body>
             <>
               {modalOptions.body
-                ? <div className="unit-modal">{ modalOptions.body }</div>
+                ? <div className="unit-modal">{modalOptions.body}</div>
                 : (
-                  <iframe
-                    title={modalOptions.title}
-                    allow={IFRAME_FEATURE_POLICY}
-                    frameBorder="0"
-                    src={modalOptions.url}
-                    style={{
-                      width: '100%',
-                      height: '100vh',
-                    }}
-                  />
+                  <>
+                    <iframe
+                      title={modalOptions.title}
+                      allow={IFRAME_FEATURE_POLICY}
+                      frameBorder="0"
+                      src={modalOptions.url}
+                      style={{
+                        width: '100%',
+                        height: '100vh',
+                      }}
+                    />
+                  </>
                 )}
             </>
-          )}
-          onClose={() => { setModalOptions({ open: false }); }}
-          open
-          dialogClassName="modal-lti"
-        />
+          </ModalDialog.Body>
+
+          <ModalDialog.Footer>
+            <ActionRow>
+              <ModalDialog.CloseButton variant="primary">
+                Close
+              </ModalDialog.CloseButton>
+            </ActionRow>
+          </ModalDialog.Footer>
+        </ModalDialog>
+
       )}
       {!shouldDisplayHonorCode && (
         <div className="unit-iframe-wrapper">

diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeUserNameInput.jsx
@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Input } from '@edx/paragon';
+import { FormControl } from '@edx/paragon';
 
 import messages from './messages';
 
@@ -46,7 +46,7 @@ class MasqueradeUserNameInput extends Component {
       ...rest
     } = this.props;
     return (
-      <Input
+      <FormControl
         aria-labelledby="masquerade-search-label"
         label={intl.formatMessage(messages.userNameLabel)}
         onKeyPress={(event) => this.onKeyPress(event)}

diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
@@ -135,7 +135,8 @@ class MasqueradeWidget extends Component {
             <span className="col-auto col-form-label pl-3" id="masquerade-search-label">{`${specificLearnerInputText}:`}</span>
             <MasqueradeUserNameInput
               id="masquerade-search"
-              className="col-4 form-control"
+              className="col-4"
+              controlClassName="form-control"
               autoFocus={autoFocus}
               defaultValue={masqueradeUsername}
               onError={(errorMessage) => this.onError(errorMessage)}