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 the new component must be added to the applications theme manually. This will be changed in v8, as the @comet/admin-theme package is being merged into the @comet/admin package with #3479

Example theme: src/theme.ts:

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

export const theme = createCometTheme({
    components: {
        MuiDataGrid: {
            defaultProps: {
                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 - needs to be added in the theme)

Columns Panel	Filters Panel

MUIs default GridPanel (works out of the box)

Columns Panel	Filters Panel

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 COM-1649
• Fix styling of value input when using the "Is any of" operator COM-1650
• Implement the new columns-panel according to the design COM-1651

Further information

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

[johnnyomair]

It seems like you're doing a lot of workarounds just to make it backwards compatible. Would it be easier if this PR would target next?

[jamesricky]

It seems like you're doing a lot of workarounds just to make it backwards compatible. Would it be easier if this PR would target next?

I wouldn't really call it workarounds, it's basically just two different things:

• Styling the existing panels from MUI in the Theme
• Adding a custom component for the thing's don't exist or can't be styled in MUIs implementation

I suppose we could remove part of the theme-styling in next, or move it form the theme into the custom panel component since the custom panel will become the default in the theme. But I don't think there's that much code to be removed then, mostly just moved into another file.

Or is there something specific you mean?

[johnnyomair]

I wouldn't really call it workarounds, it's basically just two different things:

You're right, they aren't really workarounds, sorry.

Or is there something specific you mean?

I was mostly thinking about this:

<IntlProvider locale="en" messages={getMessages()}>
  <IntlContext.Consumer>
    {(intl) => (
      <MuiThemeProvider theme={getTheme(intl)}>{/* ... */}</MuiThemeProvider>
    )}
  </IntlContext.Consumer>
</IntlProvider>

It's odd that we need to do this in every application. In next (with the theme package merged) we could call useIntl() in the MuiThemeProvider and merge the passed theme with the locale messages, resulting in no changes (and no new context consumer!) in App.tsx.

[johnnyomair]

You're right, they aren't really workarounds, sorry.

Actually, having to define the messages in the theme in the application code seems like a workaround to me 😁

[jamesricky]

It's odd that we need to do this in every application. In next (with the theme package merged) we could call useIntl() in the MuiThemeProvider and merge the passed theme with the locale messages, resulting in no changes (and no new context consumer!) in App.tsx.

In next we'll add this to the theme by default so there won't be the need to add it in the project: https://vivid-planet.atlassian.net/browse/COM-1649

In main this is optional, it can be added to the theme of projects that require it, the default MUI component will be used otherwise.

[jamesricky]

@johnnyomair as discussed, I removed the custom localeText values that required intl.