refactor(kube/volumes): migrate to react [EE-4695] (#10987)

app/react/components/datatables/TableActions.tsx

@@ -13,5 +13,7 @@ export function TableActions({
     return null;
   }
 
-  return <div className={clsx('actionBar', className)}>{children}</div>;
+  return (
+    <div className={clsx('flex gap-2 items-center', className)}>{children}</div>
+  );
 }

app/react/components/datatables/TableSettingsMenu.tsx

@@ -19,13 +19,14 @@ export function TableSettingsMenu({
             className={clsx('table-setting-menu-btn', {
               'setting-active': isExpanded,
             })}
+            aria-label="Settings"
+            title="Settings"
           >
             <MoreVertical
               size="13"
               className="space-right"
               strokeWidth="3px"
               aria-hidden="true"
-              aria-label="Settings"
             />
           </MenuButton>
           <MenuList>

app/react/components/datatables/expand-column.tsx

@@ -18,6 +18,7 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
             color="none"
             icon={table.getIsAllRowsExpanded() ? ChevronDown : ChevronUp}
             title="Expand all"
+            aria-label="Expand all rows"
           />
         )
       );
@@ -34,12 +35,13 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
           color="none"
           icon={row.getIsExpanded() ? ChevronDown : ChevronUp}
           title={row.getIsExpanded() ? 'Collapse' : 'Expand'}
+          aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}
+          aria-expanded={row.getIsExpanded()}
         />
       ),
     enableColumnFilter: false,
     enableGlobalFilter: false,
     enableHiding: false,
-
     meta: {
       width: 40,
     },

app/react/components/datatables/select-column.tsx

@@ -17,6 +17,8 @@ export function createSelectColumn<T>(): ColumnDef<T> {
         onClick={(e) => {
           e.stopPropagation();
         }}
+        aria-label="Select all rows"
+        title="Select all rows"
       />
     ),
     cell: ({ row, table }) => (
@@ -38,6 +40,7 @@ export function createSelectColumn<T>(): ColumnDef<T> {
 
           lastSelectedId = row.id;
         }}
+        aria-label="Select row"
       />
     ),
     enableHiding: false,

app/react/components/datatables/useTableState.ts

@@ -25,8 +25,8 @@ export function useTableState<
   );
 }
 
-export function useTableStateWithStorage(
-  ...args: Parameters<typeof createPersistedStore>
+export function useTableStateWithStorage<T extends BasicTableSettings>(
+  ...args: Parameters<typeof createPersistedStore<T>>
 ) {
   const [store] = useState(() => createPersistedStore(...args));
   return useTableState(store, args[0]);