Skip to content

Commit

Permalink
frontend: Add Table component, remove mui/material patch
Browse files Browse the repository at this point in the history 
This commit adds a new Table component based on the material-react-table
It will be used for the places where we need more advanced table
features and where SimpleTable is not enough. This tables aim to have
all the existing SimpleTable features for compatibility reasons.
@mui/material patch was removed because that change is now in the pakcage itself

Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
  • Loading branch information
@sniok
sniok committed May 10, 2024
1 parent 862ecec commit 1f8d116
Show file tree
Hide file tree
Showing 52 changed files with 12,005 additions and 1,025 deletions.
1,010 changes: 601 additions & 409 deletions frontend/package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
"js-yaml": "^4.1.0",
"jsonpath-plus": "^6.0.1",
"lodash": "^4.17.21",
"material-react-table": "^2.13.0",
"monaco-editor": "^0.25.2",
"monaco-editor-webpack-plugin": "^4.2.0",
"notistack": "^2.0.8",
Expand Down
11 changes: 0 additions & 11 deletions frontend/patches/@mui+material+5.14.17.patch
View file

This file was deleted.

4 changes: 2 additions & 2 deletions frontend/src/components/App/Notifications/__snapshots__/List.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
exports[`Storyshots Notifications List 1`] = `
<div>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-w7fpvq-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary css-w7fpvq-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<span
class="MuiButton-startIcon MuiButton-iconSizeSmall css-y6rp3m-MuiButton-startIcon"
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-y6rp3m-MuiButton-startIcon"
>
<span />
</span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/App/PluginSettings/__snapshots__/PluginSettings.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,7 @@ exports[`Storyshots Settings/PluginSettings Default Save Enable 1`] = `
class="MuiBox-root css-ova7y8"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-wlshgd-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-wlshgd-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand Down
12 changes: 6 additions & 6 deletions ...d/src/components/App/PluginSettings/__snapshots__/PluginSettingsDetails.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
exports[`Storyshots Settings/PluginSettingsDetail With Auto Save 1`] = `
<div>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-w7fpvq-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary css-w7fpvq-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<span
class="MuiButton-startIcon MuiButton-iconSizeSmall css-y6rp3m-MuiButton-startIcon"
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-y6rp3m-MuiButton-startIcon"
>
<span />
</span>
Expand Down Expand Up @@ -110,12 +110,12 @@ exports[`Storyshots Settings/PluginSettingsDetail With Auto Save 1`] = `
exports[`Storyshots Settings/PluginSettingsDetail Without Auto Save 1`] = `
<div>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-w7fpvq-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary css-w7fpvq-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<span
class="MuiButton-startIcon MuiButton-iconSizeSmall css-y6rp3m-MuiButton-startIcon"
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-y6rp3m-MuiButton-startIcon"
>
<span />
</span>
Expand Down Expand Up @@ -210,7 +210,7 @@ exports[`Storyshots Settings/PluginSettingsDetail Without Auto Save 1`] = `
class="MuiStack-root css-niqf4j-MuiStack-root"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-19g3xkx-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-19g3xkx-MuiButtonBase-root-MuiButton-root"
disabled=""
style="background-color: silver; color: black;"
tabindex="-1"
Expand All @@ -219,7 +219,7 @@ exports[`Storyshots Settings/PluginSettingsDetail Without Auto Save 1`] = `
Save
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1gp6czg-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1gp6czg-MuiButtonBase-root-MuiButton-root"
style="color: silver;"
tabindex="0"
type="button"
Expand Down
18 changes: 9 additions & 9 deletions frontend/src/components/App/Settings/__snapshots__/Settings.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
exports[`Storyshots Settings General 1`] = `
<div>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-w7fpvq-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-colorPrimary css-w7fpvq-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<span
class="MuiButton-startIcon MuiButton-iconSizeSmall css-y6rp3m-MuiButton-startIcon"
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-y6rp3m-MuiButton-startIcon"
>
<span />
</span>
Expand Down Expand Up @@ -87,7 +87,7 @@ exports[`Storyshots Settings General 1`] = `
class="MuiFormControl-root css-k2e4wk-MuiFormControl-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-zghmfh-MuiInputBase-root-MuiInput-root-MuiSelect-root"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-16kq2pe-MuiInputBase-root-MuiInput-root-MuiSelect-root"
>
<div
aria-controls="under-test"
Expand Down Expand Up @@ -136,7 +136,7 @@ exports[`Storyshots Settings General 1`] = `
>
<button
aria-label="light theme"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlinedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButtonGroup-firstButton css-put5n8-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlinedPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButtonGroup-firstButton css-put5n8-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -147,7 +147,7 @@ exports[`Storyshots Settings General 1`] = `
</button>
<button
aria-label="dark theme"
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlinedPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButtonGroup-lastButton css-j5ggku-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlinedPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeLarge MuiButton-outlinedSizeLarge MuiButton-colorPrimary MuiButtonGroup-lastButton css-j5ggku-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand All @@ -170,7 +170,7 @@ exports[`Storyshots Settings General 1`] = `
class="MuiFormControl-root css-1nrlq1o-MuiFormControl-root"
>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-zghmfh-MuiInputBase-root-MuiInput-root-MuiSelect-root"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-16kq2pe-MuiInputBase-root-MuiInput-root-MuiSelect-root"
style="width: 100px;"
>
<div
Expand Down Expand Up @@ -216,7 +216,7 @@ exports[`Storyshots Settings General 1`] = `
class="MuiBox-root css-10rqxfs"
>
<div
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1h51icj-MuiAutocomplete-root"
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-clttge-MuiAutocomplete-root"
>
<div
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
Expand All @@ -230,7 +230,7 @@ exports[`Storyshots Settings General 1`] = `
Timezone
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-15ywaty-MuiInputBase-root-MuiInput-root"
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-lbi814-MuiInputBase-root-MuiInput-root"
>
<input
aria-autocomplete="both"
Expand All @@ -246,7 +246,7 @@ exports[`Storyshots Settings General 1`] = `
value=""
/>
<div
class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
>
<button
aria-label="Open"
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/App/__snapshots__/TopBar.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ exports[`Storyshots TopBar Two Cluster 1`] = `
class="makeStyles-clusterTitle"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge css-tsm8af-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary css-tsm8af-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/Sidebar/__snapshots__/Sidebar.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2604,12 +2604,12 @@ exports[`Storyshots Sidebar/Sidebar In Cluster Sidebar Open 1`] = `
class="MuiBox-root css-xi606m"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-19g3xkx-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-19g3xkx-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<span
class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
>
<span />
</span>
Expand Down Expand Up @@ -3776,12 +3776,12 @@ exports[`Storyshots Sidebar/Sidebar Selected Item With Sidebar Omitted 1`] = `
class="MuiBox-root css-xi606m"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-19g3xkx-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-19g3xkx-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<span
class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
>
<span />
</span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/cluster/__snapshots__/Overview.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -485,7 +485,7 @@ exports[`Storyshots cluster/Overview Events 1`] = `
class="MuiSwitch-root MuiSwitch-sizeMedium css-julti5-MuiSwitch-root"
>
<span
class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked Mui-checked css-5xfy0x-MuiButtonBase-root-MuiSwitch-switchBase"
class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked Mui-checked css-1nsozxe-MuiButtonBase-root-MuiSwitch-switchBase"
>
<input
checked=""
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/common/ErrorPage/__snapshots__/ErrorPage.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ exports[`Storyshots common/GenericError Component Title 1`] = `
class="MuiTypography-root MuiTypography-h1 css-5ewpze-MuiTypography-root"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1gp6czg-MuiButtonBase-root-MuiButton-root"
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1gp6czg-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
Expand Down
Loading

0 comments on commit 1f8d116

Please sign in to comment.