refactor: Use formik and yup, and simplify hooks

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Card } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import { thunkActions } from '@src/editors/data/redux';
@@ -15,6 +15,7 @@ const SwitchEditorCard = ({
   editorType,
   problemType,
 }) => {
+  const intl = useIntl();
   const [isConfirmOpen, setConfirmOpen] = React.useState(false);
   const dispatch = useDispatch();
   const { editorRef } = useProblemEditorContext();
@@ -24,23 +25,20 @@ const SwitchEditorCard = ({
     <Card className="border border-light-700 shadow-none">
       <BaseModal
         isOpen={isConfirmOpen}
-        close={() => {
-          setConfirmOpen(false);
-        }}
-        title={<FormattedMessage {...messages[`ConfirmSwitchMessageTitle-${editorType}`]} />}
-        confirmAction={
+        close={() => { setConfirmOpen(false); }}
+        title={intl.formatMessage(messages[`ConfirmSwitchMessageTitle-${editorType}`])}
+        confirmAction={(
           <Button
             /* istanbul ignore next */
-            onClick={() =>
-              handleConfirmEditorSwitch({
-                switchEditor: () => dispatch(thunkActions.problem.switchEditor(editorType, editorRef)),
-                setConfirmOpen,
-              })}
+            onClick={() => handleConfirmEditorSwitch({
+              switchEditor: () => dispatch(thunkActions.problem.switchEditor(editorType, editorRef)),
+              setConfirmOpen,
+            })}
             variant="primary"
           >
             <FormattedMessage {...messages[`ConfirmSwitchButtonLabel-${editorType}`]} />
           </Button>
-        }
+        )}
         size="md"
       >
         <FormattedMessage {...messages[`ConfirmSwitchMessage-${editorType}`]} />
@@ -49,9 +47,7 @@ const SwitchEditorCard = ({
         className="my-3 ml-2 py-0"
         variant="link"
         size="sm"
-        onClick={() => {
-          setConfirmOpen(true);
-        }}
+        onClick={() => { setConfirmOpen(true); }}
       >
         <FormattedMessage {...messages[`SwitchButtonLabel-${editorType}`]} />
       </Button>

src/editors/sharedComponents/BaseModal/index.jsx → src/editors/sharedComponents/BaseModal/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {
   ActionRow,
@@ -10,20 +9,35 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
+interface BaseModalProps {
+  isOpen: boolean;
+  close: () => void;
+  title: string;
+  children: React.ReactNode;
+  confirmAction: React.ReactNode;
+  footerAction?: React.ReactNode;
+  headerComponent?: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+  isFullscreenScroll?: boolean;
+  bodyStyle?: React.CSSProperties;
+  className?: string;
+  hideCancelButton?: boolean;
+}
+
 const BaseModal = ({
   isOpen,
   close,
   title,
   children,
   headerComponent,
   confirmAction,
-  footerAction,
-  size,
-  isFullscreenScroll,
+  footerAction = null,
+  size = 'lg',
+  isFullscreenScroll = true,
   bodyStyle,
   className,
-  hideCancelButton,
-}) => (
+  hideCancelButton = false,
+}: BaseModalProps) => (
   <ModalDialog
     isOpen={isOpen}
     onClose={close}
@@ -34,6 +48,7 @@ const BaseModal = ({
     isFullscreenScroll={isFullscreenScroll}
     title={title}
     className={className}
+    isOverflowVisible={false}
   >
     <ModalDialog.Header style={{ zIndex: 1, boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.3)' }}>
       <ModalDialog.Title>
@@ -65,29 +80,4 @@ const BaseModal = ({
   </ModalDialog>
 );
 
-BaseModal.defaultProps = {
-  footerAction: null,
-  headerComponent: null,
-  size: 'lg',
-  isFullscreenScroll: true,
-  bodyStyle: null,
-  className: undefined,
-  hideCancelButton: false,
-};
-
-BaseModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  close: PropTypes.func.isRequired,
-  title: PropTypes.node.isRequired,
-  children: PropTypes.node.isRequired,
-  confirmAction: PropTypes.node.isRequired,
-  footerAction: PropTypes.node,
-  headerComponent: PropTypes.node,
-  size: PropTypes.string,
-  isFullscreenScroll: PropTypes.bool,
-  bodyStyle: PropTypes.shape({}),
-  className: PropTypes.string,
-  hideCancelButton: PropTypes.bool,
-};
-
 export default BaseModal;

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.tsx

@@ -0,0 +1,51 @@
+import { useFormikContext } from 'formik';
+import React from 'react';
+
+import { Form } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ImageConfig } from './types';
+
+import messages from './messages';
+
+const AltTextControls = () => {
+  const intl = useIntl();
+  const formik = useFormikContext<ImageConfig>();
+  return (
+    <>
+      <Form.Label className="mb-0">
+        {intl.formatMessage(messages.accessibilityLabel)}
+      </Form.Label>
+      <Form.Group className="mb-1">
+        <Form.Checkbox
+          name="isDecorative"
+          checked={formik.values.isDecorative}
+          className="mt-2.5 decorative-control-label"
+          onChange={formik.handleChange}
+        >
+          <Form.Label>
+            {intl.formatMessage(messages.decorativeAltTextCheckboxLabel)}
+          </Form.Label>
+        </Form.Checkbox>
+      </Form.Group>
+      <Form.Group>
+        <Form.Control
+          name="altText"
+          floatingLabel={intl.formatMessage(messages.altTextFloatingLabel)}
+          disabled={formik.values.isDecorative}
+          isInvalid={Boolean(formik.errors.altText)}
+          onChange={formik.handleChange}
+          type="input"
+          value={formik.values.altText}
+        />
+        {formik.errors.altText && (
+        <Form.Control.Feedback type="invalid">
+          {formik.errors.altText}
+        </Form.Control.Feedback>
+        )}
+      </Form.Group>
+    </>
+  );
+};
+
+export const AltTextControlsInternal = AltTextControls; // For testing only
+export default AltTextControls;