openedx / openedx/paragon

Remove react-bootstrap dependency from `Form` component

Open
#2,485 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

best addressed by breaking change code health engineering enhancement
Dominant language
JavaScript
Stars
140
Forks
100
Avg merge
1h 3m
Merged PRs (30d)
30

Description

This issue has the same rationale as #2484, i.e. we extend Form component when we really shouldn't be doing that anymore. However, this task is a bit more complicated as some of the consumers use react-bootstrap's Form API instead of Paragon's, we'll need to address that too in order not to make a breaking change. Judging by the list of compound components that react-bootstrap's Form has, Paragon currently does not provide the following

  • Form.Row, which is used by consumers and is present on our docs site, we'll need to implement our own version of this component
  • Form.Check, which is replaced by our Form.Checkbox, but is still available and used by consumers, we'll need to updated consuming MFEs to use Form.Checkbox instead
  • Form.File, I don't see it being used by consumers and it is not present on our docs site, should be safe to remove
### Tasks
- [ ] Implement `FormRow` component that has the same functionality as react-bootstrap's `Form.Row`, make it available as a standalone export under `FormRow` name and as a compound component `Form.Row`
- [ ] Open PRs to consuming MFEs that replace `Form.Check` usage with `Form.Checkbox`, validate that this does not break the UI. (you can use this [link](https://github.com/search?q=org%3Aopenedx%20Form.Check&type=code) to find usages of `Form.Check` across consuming MFEs)
- [ ] Implement our own `Form` component that behaves the same way as react-bootstrap's one and replace usages of react-bootstrap's `Form` with newly created component 

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing Paragon's existing Form component and the react-bootstrap Form compound-component list linked in the issue, then search consuming MFEs for Form.Check usages. Done means FormRow is available as both a standalone export and Form.Row, consumers use Form.Checkbox, and Paragon's Form replaces react-bootstrap's Form without breaking those consumers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
developer-experience, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.