refactor: Use formik and yup, and simplify hooks

This change converts the Image Editor Modal to typescript and simplifies the hooks switching to Formik + Yup for form validation.

It updates the tests to check the behaviour of the component as a whole rather than testing small components.

Author: xitij2000

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>

…ors/sharedComponents/BaseModal/index.jsx …ors/sharedComponents/BaseModal/index.tsxsrc/editors/sharedComponents/BaseModal/index.jsx renamed to src/editors/sharedComponents/BaseModal/index.tsx src/editors/sharedComponents/BaseModal/index.jsx renamed to 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.test.tsx

@@ -1,73 +1,52 @@
+import { useFormikContext } from 'formik';
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Form } from '@openedx/paragon';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ImageConfig } from './types';
 
-import * as hooks from './hooks';
 import messages from './messages';
 
-/**
- * Wrapper for alt-text input and isDecorative checkbox control
- * @param {obj} errorProps - props for error handling
- *   {bool} isValid - are alt-text fields valid for saving?
- * @param {bool} isDecorative - is the image decorative?
- * @param {func} setIsDecorative - handle isDecorative change event
- * @param {func} setValue - update alt-text value
- * @param {string} value - current alt-text value
- */
-const AltTextControls = ({
-  isDecorative,
-  setIsDecorative,
-  setValue,
-  validation,
-  value,
-}) => {
+const AltTextControls = () => {
   const intl = useIntl();
+  const formik = useFormikContext<ImageConfig>();
   return (
-    <Form.Group className="mt-4.5">
-      <Form.Label as="h4">
-        <FormattedMessage {...messages.accessibilityLabel} />
-      </Form.Label>
-      <Form.Control
-        className="mt-4.5"
-        disabled={isDecorative}
-        floatingLabel={intl.formatMessage(messages.altTextFloatingLabel)}
-        isInvalid={validation.show}
-        onChange={hooks.onInputChange(setValue)}
-        type="input"
-        value={value}
-      />
-      {validation.show
-        && (
-          <Form.Control.Feedback type="invalid">
-            <FormattedMessage {...messages.altTextLocalFeedback} />
-          </Form.Control.Feedback>
-        )}
-      <Form.Checkbox
-        checked={isDecorative}
-        className="mt-4.5 decorative-control-label"
-        onChange={hooks.onCheckboxChange(setIsDecorative)}
-      >
+    <>
+      <Form.Group className="mt-1.5">
         <Form.Label>
-          <FormattedMessage {...messages.decorativeAltTextCheckboxLabel} />
+          {intl.formatMessage(messages.accessibilityLabel)}
         </Form.Label>
-      </Form.Checkbox>
-    </Form.Group>
+        <Form.Control
+          name="altText"
+          className="mt-1.5"
+          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>
+      <Form.Group>
+        <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>
+    </>
   );
 };
-AltTextControls.propTypes = {
-  error: PropTypes.shape({
-    show: PropTypes.bool,
-  }).isRequired,
-  isDecorative: PropTypes.bool.isRequired,
-  setValue: PropTypes.func.isRequired,
-  setIsDecorative: PropTypes.func.isRequired,
-  validation: PropTypes.shape({
-    show: PropTypes.bool,
-  }).isRequired,
-  value: PropTypes.string.isRequired,
-};
 
 export const AltTextControlsInternal = AltTextControls; // For testing only
 export default AltTextControls;