Styling and custom component for DataGrid panels

[jamesricky]

Description

This implements theme-styling of the filter and column panels to more closely match the comet design.
No changes in the application are needed for this to take effect.

This also implements a custom DataGridPanel component which improves on the styling and enables the full-screen/mobile variants of the panels defined by the comet design.

Due to @comet/admin-theme not having a dependency on @comet/admin or react-intl the new component and the texts defined in the design must be added to the applications theme manually. This may be changed in v8, as it's planned to move the theme from it's own package @comet/admin-theme into the main @comet/admin package.

Example theme: src/theme.ts:

import { DataGridPanel } from "@comet/admin";
import { createCometTheme } from "@comet/admin-theme";
import type {} from "@mui/x-data-grid/themeAugmentation";
import { IntlShape } from "react-intl";

export const getTheme = (intl: IntlShape) =>
    createCometTheme({
        components: {
            MuiDataGrid: {
                defaultProps: {
                    localeText: {
                        filterPanelColumns: intl.formatMessage({ id: "dataGrid.filterPanelColumns", defaultMessage: "Column" }),
                        columnsPanelTextFieldLabel: "",
                        columnsPanelTextFieldPlaceholder: intl.formatMessage({
                            id: "dataGrid.columnsPanelTextFieldPlaceholder",
                            defaultMessage: "Find column...",
                        }),
                    },
                    components: {
                        Panel: DataGridPanel,
                    },
                },
            },
        },
    });

Acceptance criteria

• I have verified if my change requires an example
• I have verified if my change requires a changeset
• I have verified if my change requires screenshots/screencasts

Screenshots

Custom DataGridPanel (preferred)

Columns Panel	Filters Panel

MUIs default GridPanel (works out of the box)

Columns Panel	Filters Panel

Open TODOs/questions

• Add changeset
• Make the admin component DataGridPanel customizable
•  Implement potential changed by UX (see internal discussion 🫑)
• Check if we can set the prop shrink={false} instead of setting transform: none in the styling (filterForm -> inputLabelClasses.root)

Changed to be made in separate tasks/PRs:

• Move theme values added to Demo-Admin to createCometTheme() – this may require merging the @comet/admin-theme into the @comet/admin package.
• Fix styling of value input when using the "Is any of" operator:
• Implement the new columns-panel according to the design.

Further information

• Task: https://vivid-planet.atlassian.net/browse/COM-1175

[sonarqubecloud]

Quality Gate failed

Failed conditions
1 Security Hotspot
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud