refactor(containers): migrate view to react [EE-2212] (#6577)

Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>

app/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/RowContext.tsx

@@ -1,11 +1,8 @@
-import {
-  createContext,
-  useContext,
-  useMemo,
-  useReducer,
-  PropsWithChildren,
-} from 'react';
-import { EnvironmentId } from 'Portainer/environments/types';
+import { PropsWithChildren, useMemo, useReducer } from 'react';
+
+import { EnvironmentId } from '@/portainer/environments/types';
+
+import { createRowContext } from '@@/datatables/RowContext';
 
 interface RowContextState {
   environmentId: EnvironmentId;
@@ -13,31 +10,29 @@ interface RowContextState {
   toggleIsLoading(): void;
 }
 
-const RowContext = createContext<RowContextState | null>(null);
+const { RowProvider: InternalProvider, useRowContext } =
+  createRowContext<RowContextState>();
 
-export interface RowProviderProps {
+export { useRowContext };
+
+interface Props {
   environmentId: EnvironmentId;
 }
 
 export function RowProvider({
   environmentId,
   children,
-}: PropsWithChildren<RowProviderProps>) {
+}: PropsWithChildren<Props>) {
   const [isLoading, toggleIsLoading] = useReducer((state) => !state, false);
 
-  const state = useMemo(
-    () => ({ isLoading, toggleIsLoading, environmentId }),
-    [isLoading, toggleIsLoading, environmentId]
+  const context = useMemo(
+    () => ({
+      isLoading,
+      toggleIsLoading,
+      environmentId,
+    }),
+    [environmentId, isLoading]
   );
 
-  return <RowContext.Provider value={state}>{children}</RowContext.Provider>;
-}
-
-export function useRowContext() {
-  const context = useContext(RowContext);
-  if (!context) {
-    throw new Error('should be nested under RowProvider');
-  }
-
-  return context;
+  return <InternalProvider context={context}>{children}</InternalProvider>;
 }

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx

@@ -197,8 +197,7 @@ export function EdgeDevicesDatatable({
                   return (
                     <RowProvider
                       key={key}
-                      isOpenAmtEnabled={isOpenAmtEnabled}
-                      groupName={group[0]?.Name}
+                      context={{ isOpenAmtEnabled, groupName: group[0]?.Name }}
                     >
                       <TableRow<Environment>
                         cells={row.cells}

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/columns/RowContext.tsx

@@ -1,35 +1,10 @@
-import { createContext, useContext, useMemo, PropsWithChildren } from 'react';
+import { createRowContext } from '@@/datatables/RowContext';
 
 interface RowContextState {
   isOpenAmtEnabled: boolean;
   groupName?: string;
 }
 
-const RowContext = createContext<RowContextState | null>(null);
+const { RowProvider, useRowContext } = createRowContext<RowContextState>();
 
-export interface RowProviderProps {
-  groupName?: string;
-  isOpenAmtEnabled: boolean;
-}
-
-export function RowProvider({
-  groupName,
-  isOpenAmtEnabled,
-  children,
-}: PropsWithChildren<RowProviderProps>) {
-  const state = useMemo(
-    () => ({ groupName, isOpenAmtEnabled }),
-    [groupName, isOpenAmtEnabled]
-  );
-
-  return <RowContext.Provider value={state}>{children}</RowContext.Provider>;
-}
-
-export function useRowContext() {
-  const context = useContext(RowContext);
-  if (!context) {
-    throw new Error('should be nested under RowProvider');
-  }
-
-  return context;
-}
+export { RowProvider, useRowContext };

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/types.ts

@@ -3,7 +3,7 @@ import {
   RefreshableTableSettings,
   SettableColumnsTableSettings,
   SortableTableSettings,
-} from '@@/datatables/types';
+} from '@@/datatables/types-old';
 
 export interface Pagination {
   pageLimit: number;

app/edge/EdgeDevices/WaitingRoomView/Datatable/types.ts

@@ -1,7 +1,7 @@
 import {
   PaginationTableSettings,
   SortableTableSettings,
-} from '@@/datatables/types';
+} from '@@/datatables/types-old';
 
 export interface TableSettings
   extends SortableTableSettings,