refactor(containers): migrate create view to react [EE-2307] (#9175)

app/react/docker/containers/queries/container.ts

@@ -12,7 +12,6 @@ import { PortainerResponse } from '@/react/docker/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { ContainerId } from '@/react/docker/containers/types';
 import { EnvironmentId } from '@/react/portainer/environments/types';
-import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 
 import { urlBuilder } from '../containers.service';
 
@@ -74,16 +73,18 @@ export interface ContainerJSON {
 
 export function useContainer(
   environmentId: EnvironmentId,
-  containerId: ContainerId
+  containerId?: ContainerId,
+  { enabled }: { enabled?: boolean } = {}
 ) {
   return useQuery(
-    queryKeys.container(environmentId, containerId),
-    () => getContainer(environmentId, containerId),
+    containerId ? queryKeys.container(environmentId, containerId) : [],
+    () => (containerId ? getContainer(environmentId, containerId) : undefined),
     {
       meta: {
         title: 'Failure',
         message: 'Unable to retrieve container',
       },
+      enabled: enabled && !!containerId,
     }
   );
 }
@@ -98,19 +99,8 @@ async function getContainer(
     const { data } = await axios.get<ContainerResponse>(
       urlBuilder(environmentId, containerId, 'json')
     );
-    return parseViewModel(data);
+    return data;
   } catch (error) {
     throw parseAxiosError(error as Error, 'Unable to retrieve container');
   }
 }
-
-export function parseViewModel(response: ContainerResponse) {
-  const resourceControl =
-    response.Portainer?.ResourceControl &&
-    new ResourceControlViewModel(response?.Portainer?.ResourceControl);
-
-  return {
-    ...response,
-    ResourceControl: resourceControl,
-  };
-}

app/react/docker/containers/queries/containers.ts

@@ -9,7 +9,7 @@ import { withGlobalError } from '@/react-tools/react-query';
 
 import { urlBuilder } from '../containers.service';
 import { DockerContainerResponse } from '../types/response';
-import { parseListViewModel } from '../utils';
+import { toListViewModel } from '../utils';
 import { DockerContainer } from '../types';
 
 import { Filters } from './types';
@@ -26,10 +26,12 @@ export function useContainers<T = DockerContainer[]>(
   {
     autoRefreshRate,
     select,
+    enabled,
     ...params
   }: UseContainers & {
     autoRefreshRate?: number;
     select?: (data: DockerContainer[]) => T;
+    enabled?: boolean;
   } = {}
 ) {
   return useQuery(
@@ -41,6 +43,7 @@ export function useContainers<T = DockerContainer[]>(
         return autoRefreshRate ?? false;
       },
       select,
+      enabled,
     }
   );
 }
@@ -61,7 +64,7 @@ export async function getContainers(
           : undefined,
       }
     );
-    return data.map((c) => parseListViewModel(c));
+    return data.map((c) => toListViewModel(c));
   } catch (error) {
     throw parseAxiosError(error as Error, 'Unable to retrieve containers');
   }

app/react/docker/containers/queries/query-keys.ts

@@ -6,7 +6,7 @@ import { Filters } from './types';
 
 export const queryKeys = {
   list: (environmentId: EnvironmentId) =>
-    [dockerQueryKeys.root(environmentId), 'containers'] as const,
+    [...dockerQueryKeys.root(environmentId), 'containers'] as const,
 
   filters: (
     environmentId: EnvironmentId,

app/react/docker/containers/queries/types.ts

@@ -3,6 +3,7 @@ import { ContainerStatus } from '../types';
 
 export interface Filters {
   label?: string[];
+  name?: string[];
   network?: NetworkId[];
   status?: ContainerStatus[];
 }