frontend: Use new Table component in the ResourceTable

Replaces SimpleTable with the new Table component. Out of the box ResourceTable will enable sorting and filtering on all columns. To provide that functionality 'getter' in the column definition has to provide a plaintext value (but will keep working if it returns jsx for compatibility reasons). e2e and snapshot tests were also updated Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
headlamp-k8s · May 8, 2024 · a6c9dfe · a6c9dfe
1 parent 42f52c4
commit a6c9dfe
Show file tree

Hide file tree

Showing 131 changed files with 40,406 additions and 10,131 deletions.
diff --git a/docs/development/api/modules/plugin_registry.md b/docs/development/api/modules/plugin_registry.md
@@ -639,7 +639,7 @@ registerResourceTableColumnsProcessor(function ageRemover({ id, columns }) {
   if (id === 'headlamp-pods') {
     columns.push({
       label: 'Init Containers',
-      getter: (pod: Pod) => {
+      getValue: (pod: Pod) => {
         return pod.spec.initContainers.length;
       },
     });

diff --git a/e2e-tests/tests/headlampPage.ts b/e2e-tests/tests/headlampPage.ts
@@ -1,11 +1,11 @@
+/// <reference types="node" />
 import { expect, Page } from '@playwright/test';
 
 export class HeadlampPage {
   constructor(private page: Page) {}
 
   async authenticate() {
     await this.page.goto('/');
-
     await this.page.waitForSelector('h1:has-text("Authentication")');
 
     // Expects the URL to contain c/main/token
@@ -104,7 +104,9 @@ export class HeadlampPage {
     const rowsDisplayed1 = await this.getRowsDisplayed();
 
     // Click on the next page button
-    const nextPageButton = this.page.getByTitle('Next page');
+    const nextPageButton = this.page.getByRole('button', {
+      name: 'Go to next page',
+    });
     await nextPageButton.click();
 
     // Get value of rows per page after clicking next page button
@@ -115,7 +117,7 @@ export class HeadlampPage {
   }
 
   async getRowsDisplayed() {
-    const paginationCaption = this.page.locator("p:has-text(' of ')");
+    const paginationCaption = this.page.locator("span:has-text(' of ')");
     const captionText = await paginationCaption.textContent();
     return captionText;
   }

diff --git a/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot b/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot
diff --git a/frontend/src/components/App/Home/index.tsx b/frontend/src/components/App/Home/index.tsx
@@ -212,38 +212,38 @@ function HomeComponent(props: HomeComponentProps) {
       >
         <ResourceTable
           filterFunction={filterFunc}
-          defaultSortingColumn={1}
+          defaultSortingColumn={{ id: 'name', desc: false }}
           columns={[
             {
+              id: 'name',
               label: t('Name'),
-              getter: ({ name }: Cluster) => (
+              getValue: cluster => cluster.name,
+              render: ({ name }) => (
                 <Link routeName="cluster" params={{ cluster: name }}>
                   {name}
                 </Link>
               ),
-              sort: (c1: Cluster, c2: Cluster) => c1.name.localeCompare(c2.name),
             },
             {
               label: t('Status'),
-              getter: ({ name }: Cluster) => <ClusterStatus error={errors[name]} />,
+              getValue: cluster => cluster.name,
+              render: ({ name }) => <ClusterStatus error={errors[name]} />,
             },
             {
               label: t('Warnings'),
-              getter: ({ name }: Cluster) => renderWarningsText(name),
-              sort: true,
+              getValue: ({ name }) => renderWarningsText(name),
             },
             {
               label: t('glossary|Kubernetes Version'),
-              getter: ({ name }: Cluster) => versions[name]?.gitVersion || '⋯',
-              sort: true,
+              getValue: ({ name }) => versions[name]?.gitVersion || '⋯',
             },
             {
               label: '',
-              getter: (cluster: Cluster) => (
-                <Box textAlign="right">
-                  <ContextMenu cluster={cluster} />
-                </Box>
-              ),
+              getValue: () => '',
+              cellProps: {
+                align: 'right',
+              },
+              render: cluster => <ContextMenu cluster={cluster} />,
             },
           ]}
           data={Object.values(clusters)}

diff --git a/frontend/src/components/App/Notifications/__snapshots__/List.stories.storyshot b/frontend/src/components/App/Notifications/__snapshots__/List.stories.storyshot
@@ -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>

diff --git a/frontend/src/components/App/PluginSettings/__snapshots__/PluginSettings.stories.storyshot b/frontend/src/components/App/PluginSettings/__snapshots__/PluginSettings.stories.storyshot
@@ -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"
     >

diff --git a/...d/src/components/App/PluginSettings/__snapshots__/PluginSettingsDetails.stories.storyshot b/...d/src/components/App/PluginSettings/__snapshots__/PluginSettingsDetails.stories.storyshot
@@ -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>
@@ -61,8 +61,8 @@ exports[`Storyshots Settings/PluginSettingsDetail With Auto Save 1`] = `
           <label
             class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1a2ml2f-MuiFormLabel-root-MuiInputLabel-root"
             data-shrink="false"
-            for="mui-46"
-            id="mui-46-label"
+            for="mui-test-id"
+            id="mui-test-id-label"
           >
             Normal Input
           </label>
@@ -72,7 +72,7 @@ exports[`Storyshots Settings/PluginSettingsDetail With Auto Save 1`] = `
             <input
               aria-invalid="false"
               class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
-              id="mui-46"
+              id="mui-test-id"
               type="text"
               value=""
             />
@@ -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>
@@ -168,8 +168,8 @@ exports[`Storyshots Settings/PluginSettingsDetail Without Auto Save 1`] = `
           <label
             class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1a2ml2f-MuiFormLabel-root-MuiInputLabel-root"
             data-shrink="false"
-            for="mui-47"
-            id="mui-47-label"
+            for="mui-test-id"
+            id="mui-test-id-label"
           >
             Normal Input
           </label>
@@ -179,7 +179,7 @@ exports[`Storyshots Settings/PluginSettingsDetail Without Auto Save 1`] = `
             <input
               aria-invalid="false"
               class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
-              id="mui-47"
+              id="mui-test-id"
               type="text"
               value=""
             />
@@ -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"
@@ -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"

diff --git a/frontend/src/components/App/Settings/__snapshots__/Settings.stories.storyshot b/frontend/src/components/App/Settings/__snapshots__/Settings.stories.storyshot
@@ -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>
@@ -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"
@@ -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"
             >
@@ -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"
             >
@@ -170,11 +170,11 @@ 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
-                aria-controls="mui-50"
+                aria-controls="mui-test-id"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input css-1rxz5jq-MuiSelect-select-MuiInputBase-input-MuiInput-input"
@@ -216,21 +216,21 @@ 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"
               >
                 <label
                   class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-standard css-zh08sj-MuiFormLabel-root-MuiInputLabel-root"
                   data-shrink="false"
-                  for="cluster-selector-autocomplete"
-                  id="cluster-selector-autocomplete-label"
+                  for="mui-test-id"
+                  id="mui-test-id-label"
                 >
                   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"
@@ -239,14 +239,14 @@ exports[`Storyshots Settings General 1`] = `
                     autocapitalize="none"
                     autocomplete="off"
                     class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1x51dt5-MuiInputBase-input-MuiInput-input"
-                    id="cluster-selector-autocomplete"
+                    id="mui-test-id"
                     role="combobox"
                     spellcheck="false"
                     type="text"
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Open"

diff --git a/frontend/src/components/App/__snapshots__/TopBar.stories.storyshot b/frontend/src/components/App/__snapshots__/TopBar.stories.storyshot
@@ -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"
         >