Fix warnings in Problem Editor [FC-0062] #1280

bradenmacdonald · 2024-09-13T21:50:22Z

Description

When you open a blank capa problem XBlock for editing, a ton of propTypes validation warnings appear in the console. This PR fixes those warnings and converts the validation to TypeScript (which is better than propTypes because TypeScript gets checked during CI, but propTypes warnings can easily be ignored).

Supporting information

Part of my work toward #1086

Private ref: FAL-3825

Testing instructions

In a course, create a blank capa problem component. Edit it.
Without this fix, you'll see a ton of warnings in the JS console. With this fix in place, you won't.
Verify that the editor still works and can save changes to the component.

(Focus on testing from a course more so than from a library - at this point it's more important we don't break the course workflow)

Full list of warnings fixed

Warning: Failed prop type: The prop `onClose` is marked as required in `ProblemEditor`, but its value is `null`.
Warning: Failed prop type: The prop `problemType` is marked as required in `ProblemEditor`, but its value is `null`.
Warning: Failed prop type: The prop `blockValue` is marked as required in `ProblemEditor`, but its value is `null`.
Warning: Failed prop type: Invalid prop `blockValue.status` of type `number` supplied to `ProblemEditor`, expected `object`.
Warning: Failed prop type: The prop `onClose` is marked as required in `SelectTypeModal`, but its value is `null`.
Warning: Failed prop type: The prop `alt` is marked as required in `IconButton`, but its value is `undefined`.
Warning: Each child in a list should have a unique "key" prop.
Warning: Failed prop type: The prop `name` is marked as required in `ForwardRef(_c)`, but its value is `undefined`.
Warning: Failed prop type: The prop `name` is marked as required in `FormRadioSet`, but its value is `undefined`.
Warning: Failed prop type: The prop `name` is marked as required in `FormRadioSetContextProvider`, but its value is `undefined`.

and when clicking on "Advanced problem types", the following warnings:

Failed prop type: The prop `alt` is marked as required in `IconButton`, but its value is `undefined`.
Failed prop type: The prop `id` is marked as required in `Tooltip`, but its value is `undefined`.
Each child in a list should have a unique "key" prop. (`ActionRow`)

openedx-webhooks · 2024-09-13T21:50:27Z

Thanks for the pull request, @bradenmacdonald!

What's next?

Please work through the following steps to get your changes ready for engineering review:

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Let us know that your PR is ready for review:

Who will review my changes?

This repository is currently maintained by @openedx/2u-tnl. Tag them in a comment and let them know that your changes are ready for review.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2024-09-14T19:13:31Z

Codecov Report

Attention: Patch coverage is 97.14286% with 1 line in your changes missing coverage. Please review.

Project coverage is 92.38%. Comparing base (fb3533a) to head (2a2879d).
Report is 2 commits behind head on master.

Files with missing lines	Patch %	Lines
src/editors/Editor.tsx	66.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1280      +/-   ##
==========================================
+ Coverage   92.34%   92.38%   +0.04%     
==========================================
  Files        1023     1023              
  Lines       18877    18930      +53     
  Branches     4025     4026       +1     
==========================================
+ Hits        17432    17489      +57     
+ Misses       1376     1373       -3     
+ Partials       69       68       -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

bradenmacdonald · 2024-09-17T00:31:01Z

src/custom.d.ts

+declare module '*.png' {
+  const content: string;
+  export default content;
+}


This tells typescript that when we import PNG files, that import is getting a string (from webpack, which is the URL to the image file)

bradenmacdonald · 2024-09-17T00:34:22Z

...s/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.jsx

 };

-export const SelectTypeFooterInternal = SelectTypeFooter; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SelectTypeFooter));
+export default SelectTypeFooter;


I modernized this component by:

changing from propTypes to TypeScript Props

Changing injectIntl to useIntl

Changing connect to useSelector and useDispatch

Testing it in an actual browser in src/editors/containers/ProblemEditor/components/SelectTypeModal/index.test.tsx rather than shallow snapshot testing

There is no change to the actual code within the component itself.

bradenmacdonald · 2024-09-17T00:34:40Z

...ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.jsx.snap

@@ -17,6 +17,7 @@ exports[`SelectTypeWrapper snapshot 1`] = `
        className="pgn__modal-close-container"
      >
        <IconButton
+          alt="Exit the editor"


a11y fix: several of these icon buttons had no alt text!

bradenmacdonald · 2024-09-17T00:37:02Z

src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.tsx

  selected,
  setSelected,
 }) => {
  const handleChange = e => setSelected(e.target.value);
  const handleClick = () => setSelected(AdvanceProblemKeys.BLANK);
-  const settings = { 'aria-label': 'checkbox', type: 'radio' };
+  const settings = { type: 'radio' };


a11y fix: in the "problem types" menu, every option had the same label for screen readers: 'checkbox'. This was worse than no label at all. Now they are labelled by their inner text ("Multiple choice", "Single select", etc.)

bradenmacdonald · 2024-09-17T00:39:42Z

src/editors/containers/ProblemEditor/components/SelectTypeModal/index.test.tsx

+    const selectBtn = screen.getByRole('button', { name: 'Select' });
+    fireEvent.click(selectBtn);
+    expect(mockSelect).toHaveBeenLastCalledWith(expect.objectContaining({ selected: 'numericalresponse' }));
+  });


In order to fix some test coverage issues, I replaced the (almost useless) existing test here with this test which actually interacts with all of these components in a browser, and uses all the new best practices and utils from testUtils. This also let me get rid of the ugly module self-import pattern and the weird custom state hooks.

pomegranited

👍 Massive cleanup here, thank you @bradenmacdonald ! All is working fine.

I tested this by adding and editing problem components in a course. All still works as expected.
I read through the code
I checked for accessibility issues by using my keyboard to navigate and by checking the "accessibility properties" for the affected elements.
~~Includes documentation~~ N/A
User-facing strings are extracted for translation

pomegranited · 2024-09-17T03:49:07Z

...s/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.jsx

+  //   rerandomize: PropTypes.string,
+  //   showResetButton: PropTypes.bool,
+  //   showanswer: PropTypes.string,
+  // }).isRequired,


These commented-out lines can be removed now that you're using selectors instead.

pomegranited · 2024-09-17T04:12:30Z

src/editors/data/constants/problem.ts

@@ -88,6 +88,10 @@ export const AdvanceProblemKeys = StrictDict({
 } as const);
 export type AdvancedProblemType = typeof AdvanceProblemKeys[keyof typeof AdvanceProblemKeys];

+export function isAdvancedProblemType(pt: ProblemType | AdvancedProblemType): pt is AdvancedProblemType {


Interesting.. I hadn't seen user type predicates before.

They're quite useful!

ChrisChV

@bradenmacdonald Looks good 👍 I think you need to delete the comments that Jill mentioned and it will be ready to merge

bradenmacdonald requested a review from a team as a code owner September 13, 2024 21:50

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Sep 13, 2024

bradenmacdonald force-pushed the braden/problem-editor-warnings branch 3 times, most recently from 4a708bb to d05cbd1 Compare September 14, 2024 19:04

bradenmacdonald force-pushed the braden/problem-editor-warnings branch from 45ef259 to f80de14 Compare September 14, 2024 20:07

bradenmacdonald added 6 commits September 16, 2024 13:07

fix: a11y - missing 'alt' text for Problem Editor IconButton

108ca4e

fix: warning in <ProblemTypeSelect> component - missing key prop in list

986c100

fix: warning: problemType required in ProblemEditor, but is null

217c7f3

fix: warning: The prop onClose marked as required in SelectTypeModal

ad10865

fix: warning: prop name is marked as required in ForwardRef(_c)

30bcff4

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

6b8f6ff

bradenmacdonald force-pushed the braden/problem-editor-warnings branch from f80de14 to 7d57d4e Compare September 16, 2024 21:08

test: improve test coverage of SelectTypeModal, refactor some code

64be177

bradenmacdonald force-pushed the braden/problem-editor-warnings branch from 7d57d4e to 64be177 Compare September 16, 2024 21:13

test: improve test coverage

8b5a4c6

bradenmacdonald commented Sep 17, 2024

View reviewed changes

bradenmacdonald mentioned this pull request Sep 17, 2024

Enable capa problem editor for components in libraries [FC-0062] #1290

Merged

2 tasks

bradenmacdonald added the FC Relates to an Axim Funded Contribution project label Sep 17, 2024

pomegranited approved these changes Sep 17, 2024

View reviewed changes

bradenmacdonald requested a review from ChrisChV September 17, 2024 16:26

ChrisChV approved these changes Sep 18, 2024

View reviewed changes

chore: delete commented code

2a2879d

bradenmacdonald enabled auto-merge (squash) September 18, 2024 16:56

bradenmacdonald merged commit b010909 into openedx:master Sep 18, 2024
5 checks passed

bradenmacdonald deleted the braden/problem-editor-warnings branch September 18, 2024 17:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix warnings in Problem Editor [FC-0062] #1280

Fix warnings in Problem Editor [FC-0062] #1280

bradenmacdonald commented Sep 13, 2024 •

edited

Loading

openedx-webhooks commented Sep 13, 2024

codecov bot commented Sep 14, 2024 •

edited

Loading

bradenmacdonald Sep 17, 2024

bradenmacdonald Sep 17, 2024

bradenmacdonald Sep 17, 2024 •

edited

Loading

bradenmacdonald Sep 17, 2024

bradenmacdonald Sep 17, 2024

pomegranited left a comment

pomegranited Sep 17, 2024

pomegranited Sep 17, 2024

bradenmacdonald Sep 17, 2024

ChrisChV left a comment

Fix warnings in Problem Editor [FC-0062] #1280

Fix warnings in Problem Editor [FC-0062] #1280

Conversation

bradenmacdonald commented Sep 13, 2024 • edited Loading

Description

Supporting information

Testing instructions

Full list of warnings fixed

openedx-webhooks commented Sep 13, 2024

What's next?

🔘 Get product approval

🔘 Provide context

🔘 Get a green build

🔘 Let us know that your PR is ready for review:

Who will review my changes?

Where can I find more information?

When can I expect my changes to be merged?

codecov bot commented Sep 14, 2024 • edited Loading

Codecov Report

bradenmacdonald Sep 17, 2024

Choose a reason for hiding this comment

bradenmacdonald Sep 17, 2024

Choose a reason for hiding this comment

bradenmacdonald Sep 17, 2024 • edited Loading

Choose a reason for hiding this comment

bradenmacdonald Sep 17, 2024

Choose a reason for hiding this comment

bradenmacdonald Sep 17, 2024

Choose a reason for hiding this comment

pomegranited left a comment

Choose a reason for hiding this comment

pomegranited Sep 17, 2024

Choose a reason for hiding this comment

pomegranited Sep 17, 2024

Choose a reason for hiding this comment

bradenmacdonald Sep 17, 2024

Choose a reason for hiding this comment

ChrisChV left a comment

Choose a reason for hiding this comment

bradenmacdonald commented Sep 13, 2024 •

edited

Loading

codecov bot commented Sep 14, 2024 •

edited

Loading

bradenmacdonald Sep 17, 2024 •

edited

Loading