Merge pull request #2661 from headlamp-k8s/small-table-fixes

frontend: Small table fixes and improvements
headlamp-k8s · Dec 11, 2024 · d3a0f25 · d3a0f25
2 parents e8cd1d2 + 60d1e07
commit d3a0f25
Show file tree

Hide file tree

Showing 31 changed files with 130 additions and 124 deletions.
diff --git a/frontend/src/components/common/Resource/ResourceTable.tsx b/frontend/src/components/common/Resource/ResourceTable.tsx
@@ -363,7 +363,7 @@ function ResourceTableContent<RowItem extends KubeObject>(props: ResourceTablePr
             return {
               id: 'namespace',
               header: t('glossary|Namespace'),
-              accessorFn: (item: RowItem) => item.getNamespace(),
+              accessorFn: (item: RowItem) => item.getNamespace() ?? '',
               filterVariant: 'multi-select',
               Cell: ({ row }: { row: MRT_Row<RowItem> }) =>
                 row.original?.getNamespace() ? (

diff --git a/...mponents/common/Resource/__snapshots__/ResourceListView.OneHiddenColumn.stories.storyshot b/...mponents/common/Resource/__snapshots__/ResourceListView.OneHiddenColumn.stories.storyshot
@@ -151,7 +151,7 @@
           </div>
         </div>
         <table
-          class="MuiTable-root css-1ltloyh-MuiTable-root"
+          class="MuiTable-root css-ii66cc-MuiTable-root"
         >
           <thead
             class="MuiTableHead-root css-1tmrira-MuiTableHead-root"
@@ -177,7 +177,7 @@
                     >
                       <span
                         aria-label="Toggle select all"
-                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                         data-mui-internal-clone-element="true"
                       >
                         <input
@@ -411,7 +411,7 @@
               >
                 <span
                   aria-label="Toggle select row"
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                   data-mui-internal-clone-element="true"
                 >
                   <input
@@ -503,7 +503,7 @@
               >
                 <span
                   aria-label="Toggle select row"
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                   data-mui-internal-clone-element="true"
                 >
                   <input
@@ -595,7 +595,7 @@
               >
                 <span
                   aria-label="Toggle select row"
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                   data-mui-internal-clone-element="true"
                 >
                   <input
@@ -687,7 +687,7 @@
               >
                 <span
                   aria-label="Toggle select row"
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                   data-mui-internal-clone-element="true"
                 >
                   <input
@@ -779,7 +779,7 @@
               >
                 <span
                   aria-label="Toggle select row"
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                   data-mui-internal-clone-element="true"
                 >
                   <input

diff --git a/frontend/src/components/common/Table/Table.tsx b/frontend/src/components/common/Table/Table.tsx
@@ -208,7 +208,7 @@ export default function Table<RowItem extends Record<string, any>>({
       preGridTemplateColumns = `${preGridTemplateColumns} 0.05fr`;
     }
     if (tableProps.enableRowSelection) {
-      preGridTemplateColumns = `0.05fr ${preGridTemplateColumns}`;
+      preGridTemplateColumns = `44px ${preGridTemplateColumns}`;
     }
 
     return preGridTemplateColumns;
@@ -315,6 +315,14 @@ export default function Table<RowItem extends Record<string, any>>({
         paddingTop: '0.5rem',
       },
     },
+    muiSelectCheckboxProps: {
+      size: 'small',
+      sx: { padding: 0 },
+    },
+    muiSelectAllCheckboxProps: {
+      size: 'small',
+      sx: { padding: 0 },
+    },
   });
 
   const rows = useMRT_Rows(table);
@@ -404,9 +412,7 @@ const MemoHeadCell = memo(
     a.sorting === b.sorting &&
     a.isFiltered === b.isFiltered &&
     a.showColumnFilters === b.showColumnFilters &&
-    a.header.column.id === 'mrt-row-select'
-      ? a.selected === b.selected
-      : true
+    (a.header.column.id === 'mrt-row-select' ? a.selected === b.selected : true)
 );
 
 const Row = memo(

diff --git a/frontend/src/components/configmap/__snapshots__/List.Items.stories.storyshot b/frontend/src/components/configmap/__snapshots__/List.Items.stories.storyshot
@@ -252,7 +252,7 @@
           </div>
         </div>
         <table
-          class="MuiTable-root css-1hm66of-MuiTable-root"
+          class="MuiTable-root css-bfde49-MuiTable-root"
         >
           <thead
             class="MuiTableHead-root css-1tmrira-MuiTableHead-root"
@@ -278,7 +278,7 @@
                     >
                       <span
                         aria-label="Toggle select all"
-                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                         data-mui-internal-clone-element="true"
                       >
                         <input
@@ -567,7 +567,7 @@
               >
                 <span
                   aria-label="Toggle select row"
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                   data-mui-internal-clone-element="true"
                 >
                   <input
@@ -664,7 +664,7 @@
               >
                 <span
                   aria-label="Toggle select row"
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                   data-mui-internal-clone-element="true"
                 >
                   <input

diff --git a/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.Details.stories.storyshot b/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.Details.stories.storyshot
@@ -600,7 +600,7 @@
                 </div>
               </div>
               <table
-                class="MuiTable-root css-16g12fj-MuiTable-root"
+                class="MuiTable-root css-pj6e1h-MuiTable-root"
               >
                 <thead
                   class="MuiTableHead-root css-1tmrira-MuiTableHead-root"
@@ -626,7 +626,7 @@
                           >
                             <span
                               aria-label="Toggle select all"
-                              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                               data-mui-internal-clone-element="true"
                             >
                               <input
@@ -915,7 +915,7 @@
                     >
                       <span
                         aria-label="Toggle select row"
-                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                         data-mui-internal-clone-element="true"
                       >
                         <input
@@ -1012,7 +1012,7 @@
                     >
                       <span
                         aria-label="Toggle select row"
-                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                         data-mui-internal-clone-element="true"
                       >
                         <input

diff --git a/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.List.stories.storyshot b/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.List.stories.storyshot
@@ -240,7 +240,7 @@
           </div>
         </div>
         <table
-          class="MuiTable-root css-1mluyp9-MuiTable-root"
+          class="MuiTable-root css-150tvyi-MuiTable-root"
         >
           <thead
             class="MuiTableHead-root css-1tmrira-MuiTableHead-root"
@@ -266,7 +266,7 @@
                     >
                       <span
                         aria-label="Toggle select all"
-                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                         data-mui-internal-clone-element="true"
                       >
                         <input
@@ -665,7 +665,7 @@
               >
                 <span
                   aria-label="Toggle select row"
-                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                  class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                   data-mui-internal-clone-element="true"
                 >
                   <input

diff --git a/frontend/src/components/crd/__snapshots__/CustomResourceList.List.stories.storyshot b/frontend/src/components/crd/__snapshots__/CustomResourceList.List.stories.storyshot
@@ -235,7 +235,7 @@
                 </div>
               </div>
               <table
-                class="MuiTable-root css-16g12fj-MuiTable-root"
+                class="MuiTable-root css-pj6e1h-MuiTable-root"
               >
                 <thead
                   class="MuiTableHead-root css-1tmrira-MuiTableHead-root"
@@ -261,7 +261,7 @@
                           >
                             <span
                               aria-label="Toggle select all"
-                              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                              class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                               data-mui-internal-clone-element="true"
                             >
                               <input
@@ -550,7 +550,7 @@
                     >
                       <span
                         aria-label="Toggle select row"
-                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                         data-mui-internal-clone-element="true"
                       >
                         <input
@@ -647,7 +647,7 @@
                     >
                       <span
                         aria-label="Toggle select row"
-                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                        class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                         data-mui-internal-clone-element="true"
                       >
                         <input

diff --git a/frontend/src/components/daemonset/__snapshots__/List.DaemonSets.stories.storyshot b/frontend/src/components/daemonset/__snapshots__/List.DaemonSets.stories.storyshot
@@ -255,7 +255,7 @@
             </div>
           </div>
           <table
-            class="MuiTable-root css-1qm3end-MuiTable-root"
+            class="MuiTable-root css-1q3mx0s-MuiTable-root"
           >
             <thead
               class="MuiTableHead-root css-1tmrira-MuiTableHead-root"
@@ -281,7 +281,7 @@
                       >
                         <span
                           aria-label="Toggle select all"
-                          class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                          class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                           data-mui-internal-clone-element="true"
                         >
                           <input
@@ -900,7 +900,7 @@
                 >
                   <span
                     aria-label="Toggle select row"
-                    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-cduie2-MuiButtonBase-root-MuiCheckbox-root"
+                    class="MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall MuiCheckbox-root MuiCheckbox-colorPrimary MuiCheckbox-sizeSmall css-il3x15-MuiButtonBase-root-MuiCheckbox-root"
                     data-mui-internal-clone-element="true"
                   >
                     <input