Graylog2 / Graylog2/graylog2-server
Migrate remaining `react-bootstrap` components to `mantine`.
- Dominant language
- Java
- Stars
- 8.1k
- Forks
- 1.1k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 217
Description
## Description
We are migrating from `react-bootstrap` to `mantine`. This is an overview of the remaining steps:
- [x] https://github.com/Graylog2/graylog2-server/pull/26346: `Checkbox` → HTML `Checkbox`. We can't use the mantine Checkbox here easily, since it comes with a custom styling and the`common/Checkbox` is not used for every checkbox in Graylog.
- [x] https://github.com/Graylog2/graylog2-server/pull/26348: `ControlLabel` → HTML label
- [x] https://github.com/Graylog2/graylog2-server/pull/26351: `Label` → replace with our`Badge` component
- [x] https://github.com/Graylog2/graylog2-server/pull/26387: `Radio` (re-export in `imports.ts`) → HTML radio button
- [x] https://github.com/Graylog2/graylog2-server/pull/26440: `Clearfix` (re-export in `imports.ts`) → remove usage
- [ ] `PanelGroup` (re-export in `imports.ts`) → replace with our `Accordion` component
- [x] https://github.com/Graylog2/graylog2-server/pull/26409: `ListGroup` → Mantine `List` or styled `
- `
- `
- [ ] `Panel` → Mantine `Paper` (collapsible variant → `Accordion`)
- [ ] https://github.com/Graylog2/frontend/issues/39: `Nav`, `NavItem`, `NavBar` → There is no mantine equivalent, we need a custom implementation for it. Ideally with a better responsive version that closes when clicking on a nav itemRelated to `common/Input`
- [ ] `Input` → The component currently renders not only the input, but also its label and description. We want to
- [ ] rename it to e.g. `FormField` to reflect that it renders more than just an input
- [ ] create a dedicated components for input components which are currently part of the "FormField" component (e.g. for `common/TextInput`, `common/TextArea`, etc.). Implement related mantine components for them.
- [ ] `InputGroup` → (new) `TextInput` component with `leftSection` / `rightSection`
- [ ] `FormControl` → replace with (new) "FormField" component
- [ ] `FormGroup` → custom implementationCleanup
- [ ] Remove bootstrap less components and apply desired styling where necessary
- [ ] Remove `imports.ts` and `importsTypes.ts` raw re-exports
- [ ] Remove `react-bootstrap` from `package.json`
- [x] https://github.com/Graylog2/graylog2-server/pull/26409: `ListGroupItem` → Mantine `List.Item` or styled `
Contributor guide
Assessment
This issue has not been assessed yet.