refactor(templates): migrate list view to react [EE-2296] (#10999)

app/react/docker/proxy/queries/useInfo.ts

@@ -18,26 +18,38 @@ export async function getInfo(environmentId: EnvironmentId) {
 }
 
 export function useInfo<TSelect = SystemInfo>(
-  environmentId: EnvironmentId,
-  select?: (info: SystemInfo) => TSelect
+  environmentId?: EnvironmentId,
+  {
+    enabled,
+    select,
+  }: { select?: (info: SystemInfo) => TSelect; enabled?: boolean } = {}
 ) {
   return useQuery(
     ['environment', environmentId, 'docker', 'info'],
-    () => getInfo(environmentId),
+    () => getInfo(environmentId!),
     {
       select,
+      enabled: !!environmentId && enabled,
     }
   );
 }
 
 export function useIsStandAlone(environmentId: EnvironmentId) {
-  const query = useInfo(environmentId, (info) => !info.Swarm?.NodeID);
+  const query = useInfo(environmentId, {
+    select: (info) => !info.Swarm?.NodeID,
+  });
 
   return !!query.data;
 }
 
-export function useIsSwarm(environmentId: EnvironmentId) {
-  const query = useInfo(environmentId, (info) => !!info.Swarm?.NodeID);
+export function useIsSwarm(
+  environmentId?: EnvironmentId,
+  { enabled }: { enabled?: boolean } = {}
+) {
+  const query = useInfo(environmentId, {
+    select: (info) => !!info.Swarm?.NodeID,
+    enabled,
+  });
 
   return !!query.data;
 }

app/react/docker/proxy/queries/useServicePlugins.ts

@@ -41,7 +41,9 @@ export function useServicePlugins(
   pluginType: keyof PluginsInfo,
   pluginVersion: string
 ) {
-  const systemPluginsQuery = useInfo(environmentId, (info) => info.Plugins);
+  const systemPluginsQuery = useInfo(environmentId, {
+    select: (info) => info.Plugins,
+  });
   const pluginsQuery = usePlugins(environmentId, { enabled: !systemOnly });
 
   return {

app/react/docker/proxy/queries/useSwarm.ts

@@ -0,0 +1,38 @@
+import { useQuery } from 'react-query';
+import { Swarm } from 'docker-types/generated/1.41';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+import { useIsSwarm } from './useInfo';
+
+export function useSwarm<T = Swarm>(
+  environmentId: EnvironmentId,
+  { select }: { select?(value: Swarm): T } = {}
+) {
+  const isSwarm = useIsSwarm(environmentId);
+
+  return useQuery({
+    queryKey: [...queryKeys.base(environmentId), 'swarm'] as const,
+    queryFn: () => getSwarm(environmentId),
+    select,
+    enabled: isSwarm,
+  });
+}
+
+async function getSwarm(environmentId: EnvironmentId) {
+  try {
+    const { data } = await axios.get<Swarm>(buildUrl(environmentId, 'swarm'));
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err, 'Unable to retrieve swarm information');
+  }
+}
+
+export function useSwarmId(environmentId: EnvironmentId) {
+  return useSwarm(environmentId, {
+    select: (swarm) => swarm.ID,
+  });
+}

app/react/docker/proxy/queries/useVersion.ts

@@ -18,19 +18,20 @@ export async function getVersion(environmentId: EnvironmentId) {
 }
 
 export function useVersion<TSelect = SystemVersion>(
-  environmentId: EnvironmentId,
+  environmentId?: EnvironmentId,
   select?: (info: SystemVersion) => TSelect
 ) {
   return useQuery(
-    ['environment', environmentId, 'docker', 'version'],
-    () => getVersion(environmentId),
+    ['environment', environmentId!, 'docker', 'version'],
+    () => getVersion(environmentId!),
     {
       select,
+      enabled: !!environmentId,
     }
   );
 }
 
-export function useApiVersion(environmentId: EnvironmentId) {
+export function useApiVersion(environmentId?: EnvironmentId) {
   const query = useVersion(environmentId, (info) => info.ApiVersion);
   return query.data ? parseFloat(query.data) : 0;
 }