Graylog2 / Graylog2/graylog2-server

Migrate remaining `react-bootstrap` components to `mantine`.

Open
#26,330 0 comments 0 reactions 0 assignees View on GitHub
feature
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 `

    `
    - [x] https://github.com/Graylog2/graylog2-server/pull/26409: `ListGroupItem` → Mantine `List.Item` 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 item

    Related 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 implementation

    Cleanup
    - [ ] 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`

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.