fix: warning: props alt, id, and key are required

openedx · Sep 14, 2024 · 45ef259 · 45ef259
1 parent d05cbd1
commit 45ef259
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 331 deletions.
diff --git a/...eModal/content/AdvanceTypeSelect.test.jsx → ...eModal/content/AdvanceTypeSelect.test.tsx b/...eModal/content/AdvanceTypeSelect.test.jsx → ...eModal/content/AdvanceTypeSelect.test.tsx
@@ -1,16 +1,11 @@
 import 'CourseAuthoring/editors/setupEditorTest';
-import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { formatMessage } from '../../../../../testUtils';
-import * as module from './AdvanceTypeSelect';
-
-const AdvanceTypeSelect = module.AdvanceTypeSelectInternal;
+import AdvanceTypeSelect from './AdvanceTypeSelect';
 
 describe('AdvanceTypeSelect', () => {
   const props = {
-    intl: { formatMessage },
-    selected: 'blankadvanced',
+    selected: 'blankadvanced' as const,
     setSelected: jest.fn().mockName('setSelect'),
   };
   describe('snapshots', () => {
@@ -29,11 +24,6 @@ describe('AdvanceTypeSelect', () => {
         shallow(<AdvanceTypeSelect {...props} selected="customgrader" />).snapshot,
       ).toMatchSnapshot();
     });
-    test('snapshots: renders as expected with problemType is drag_and_drop', () => {
-      expect(
-        shallow(<AdvanceTypeSelect {...props} selected="drag_and_drop" />).snapshot,
-      ).toMatchSnapshot();
-    });
     test('snapshots: renders as expected with problemType is formularesponse', () => {
       expect(
         shallow(<AdvanceTypeSelect {...props} selected="formularesponse" />).snapshot,
@@ -44,14 +34,14 @@ describe('AdvanceTypeSelect', () => {
         shallow(<AdvanceTypeSelect {...props} selected="imageresponse" />).snapshot,
       ).toMatchSnapshot();
     });
-    test('snapshots: renders as expected with problemType is jsinput_response', () => {
+    test('snapshots: renders as expected with problemType is jsinputresponse', () => {
       expect(
-        shallow(<AdvanceTypeSelect {...props} selected="jsinput_response" />).snapshot,
+        shallow(<AdvanceTypeSelect {...props} selected="jsinputresponse" />).snapshot,
       ).toMatchSnapshot();
     });
-    test('snapshots: renders as expected with problemType is problem_with_hint', () => {
+    test('snapshots: renders as expected with problemType is problemwithhint', () => {
       expect(
-        shallow(<AdvanceTypeSelect {...props} selected="problem_with_hint" />).snapshot,
+        shallow(<AdvanceTypeSelect {...props} selected="problemwithhint" />).snapshot,
       ).toMatchSnapshot();
     });
   });

diff --git a/...ctTypeModal/content/AdvanceTypeSelect.jsx → ...ctTypeModal/content/AdvanceTypeSelect.tsx b/...ctTypeModal/content/AdvanceTypeSelect.jsx → ...ctTypeModal/content/AdvanceTypeSelect.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {
   Form,
@@ -12,22 +11,36 @@ import {
   Col,
 } from '@openedx/paragon';
 import { ArrowBack } from '@openedx/paragon/icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AdvanceProblems, ProblemTypeKeys } from '../../../../../data/constants/problem';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  AdvancedProblemType,
+  AdvanceProblems,
+  ProblemType,
+  ProblemTypeKeys,
+} from '../../../../../data/constants/problem';
 import messages from './messages';
 
-const AdvanceTypeSelect = ({
-  selected,
+interface Props {
+  selected: AdvancedProblemType | null;
+  setSelected: React.Dispatch<ProblemType | AdvancedProblemType>;
+}
+
+const AdvanceTypeSelect: React.FC<Props> = ({
+  selected = null,
   setSelected,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
   const handleChange = e => { setSelected(e.target.value); };
   return (
     <Col xs={12} md={8} className="justify-content-center">
       <Form.Group className="border rounded text-primary-500 p-0">
         <ActionRow className="border-primary-100 border-bottom py-3 pl-2.5 pr-4">
-          <IconButton src={ArrowBack} iconAs={Icon} onClick={() => setSelected(ProblemTypeKeys.SINGLESELECT)} />
+          <IconButton
+            src={ArrowBack}
+            iconAs={Icon}
+            alt={intl.formatMessage(messages.advanceMenuGoBack)}
+            onClick={() => setSelected(ProblemTypeKeys.SINGLESELECT)}
+          />
           <ActionRow.Spacer />
           <Form.Label className="h4">
             <FormattedMessage {...messages.advanceMenuTitle} />
@@ -43,15 +56,15 @@ const AdvanceTypeSelect = ({
           {Object.entries(AdvanceProblems).map(([type, data]) => {
             if (data.status !== '') {
               return (
-                <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100">
+                <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100" key={type}>
                   <Form.Radio id={type} value={type}>
                     {intl.formatMessage(messages.advanceProblemTypeLabel, { problemType: data.title })}
                   </Form.Radio>
                   <ActionRow.Spacer />
                   <OverlayTrigger
                     placement="right"
                     overlay={(
-                      <Tooltip>
+                      <Tooltip id={`tooltip-adv-${type}`}>
                         <div className="text-left">
                           {intl.formatMessage(messages.supportStatusTooltipMessage, { supportStatus: data.status.replace(' ', '_') })}
                         </div>
@@ -66,7 +79,7 @@ const AdvanceTypeSelect = ({
               );
             }
             return (
-              <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100">
+              <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100" key={type}>
                 <Form.Radio id={type} value={type}>
                   {intl.formatMessage(messages.advanceProblemTypeLabel, { problemType: data.title })}
                 </Form.Radio>
@@ -86,16 +99,4 @@ const AdvanceTypeSelect = ({
   );
 };
 
-AdvanceTypeSelect.defaultProps = {
-  selected: null,
-};
-
-AdvanceTypeSelect.propTypes = {
-  selected: PropTypes.string,
-  setSelected: PropTypes.func.isRequired,
-  // injected
-  intl: intlShape.isRequired,
-};
-
-export const AdvanceTypeSelectInternal = AdvanceTypeSelect; // For testing only
-export default injectIntl(AdvanceTypeSelect);
+export default AdvanceTypeSelect;