refactor(docker/images): convert table to react [EE-4668] (#8910)

app/react/components/buttons/Button.tsx

@@ -1,6 +1,7 @@
 import {
   AriaAttributes,
   ComponentType,
+  forwardRef,
   MouseEventHandler,
   PropsWithChildren,
   ReactNode,
@@ -39,9 +40,17 @@ export interface Props<TasProps = unknown>
   type?: Type;
   as?: ComponentType<TasProps> | string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
+  mRef?: React.ForwardedRef<HTMLButtonElement>;
   props?: TasProps;
 }
 
+export const ButtonWithRef = forwardRef<HTMLButtonElement, Omit<Props, 'mRef'>>(
+  (props, ref) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <Button {...props} mRef={ref} />
+  )
+);
+
 export function Button<TasProps = unknown>({
   type = 'button',
   color = 'primary',
@@ -54,15 +63,19 @@ export function Button<TasProps = unknown>({
   children,
   as = 'button',
   props,
+  mRef,
   ...ariaProps
 }: PropsWithChildren<Props<TasProps>>) {
   const Component = as as 'button';
   return (
     <Component
+      ref={mRef}
       /* eslint-disable-next-line react/button-has-type */
       type={type}
       disabled={disabled}
-      className={clsx(`btn btn-${color}`, sizeClass(size), className)}
+      className={clsx(`btn btn-${color}`, sizeClass(size), className, {
+        disabled,
+      })}
       onClick={(e) => {
         if (!disabled) {
           onClick?.(e);

app/react/components/datatables/Filter.tsx

@@ -4,6 +4,8 @@ import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
 import { Column } from '@tanstack/react-table';
 import { Check, Filter } from 'lucide-react';
 
+import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
+
 import { Icon } from '@@/Icon';
 
 interface MultipleSelectionFilterProps {
@@ -103,19 +105,3 @@ export function filterHOC<TData extends Record<string, unknown>>(
     );
   };
 }
-
-function getValueAsArrayOfStrings(value: unknown): string[] {
-  if (Array.isArray(value)) {
-    return value;
-  }
-
-  if (!value || (typeof value !== 'string' && typeof value !== 'number')) {
-    return [];
-  }
-
-  if (typeof value === 'number') {
-    return [value.toString()];
-  }
-
-  return [value];
-}

app/react/components/datatables/types.ts

@@ -93,8 +93,23 @@ export function createPersistedStore<T extends BasicTableSettings>(
           ...create(set),
         } as T),
       {
-        name: keyBuilder(storageKey),
+        name: `datatable_settings_${keyBuilder(storageKey)}`,
       }
     )
   );
 }
+
+/** this class is just a dummy class to get return type of createPersistedStore
+ * can be fixed after upgrade to ts 4.7+
+ * https://stackoverflow.com/a/64919133
+ */
+class Wrapper<T extends BasicTableSettings> {
+  // eslint-disable-next-line class-methods-use-this
+  wrapped() {
+    return createPersistedStore<T>('', '');
+  }
+}
+
+export type CreatePersistedStoreReturn<
+  T extends BasicTableSettings = BasicTableSettings
+> = ReturnType<Wrapper<T>['wrapped']>;

app/react/components/datatables/useTableState.ts

@@ -2,22 +2,11 @@ import { useMemo, useState } from 'react';
 import { useStore } from 'zustand';
 
 import { useSearchBarState } from './SearchBar';
-import { BasicTableSettings, createPersistedStore } from './types';
-
-/** this class is just a dummy class to get return type of createPersistedStore
- * can be fixed after upgrade to ts 4.7+
- * https://stackoverflow.com/a/64919133
- */
-class Wrapper<T extends BasicTableSettings> {
-  // eslint-disable-next-line class-methods-use-this
-  wrapped() {
-    return createPersistedStore<T>('', '');
-  }
-}
+import { BasicTableSettings, CreatePersistedStoreReturn } from './types';
 
 export function useTableState<
   TSettings extends BasicTableSettings = BasicTableSettings
->(store: ReturnType<Wrapper<TSettings>['wrapped']>, storageKey: string) {
+>(store: CreatePersistedStoreReturn<TSettings>, storageKey: string) {
   const settings = useStore(store);
 
   const [search, setSearch] = useSearchBarState(storageKey);