chore(deps): upgrade react-query to v4 [EE-6638] (#11041)

app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathForm.tsx

@@ -1,6 +1,6 @@
 import { RefreshCw, Trash2 } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult } from '@tanstack/react-query';
 import { FormikErrors } from 'formik';
 
 import { Ingress } from '@/react/kubernetes/ingresses/types';

app/react/kubernetes/applications/CreateView/application-services/kubeServicesValidation.ts

@@ -163,8 +163,10 @@ export function kubeServicesValidation(
                   .flatMap((formService) => formService.Ports)
                   .map((formServicePorts) => formServicePorts.nodePort);
                 return (
-                  !clusterNodePortsWithoutFormServices.includes(nodePort) && // node port is not in the cluster services that aren't in the application form
-                  !formNodePortsWithoutCurrentService.includes(nodePort) // and the node port is not in the current form, excluding the current service
+                  // and the node port is not in the current form, excluding the current service
+                  // node port is not in the cluster services that aren't in the application form
+                  !clusterNodePortsWithoutFormServices.includes(nodePort) &&
+                  !formNodePortsWithoutCurrentService.includes(nodePort)
                 );
               }
             )

app/react/kubernetes/applications/DetailsView/useNamespaceEventsQuery.ts

@@ -1,5 +1,5 @@
 import { EventList } from 'kubernetes-types/core/v1';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios from '@/portainer/services/axios';

app/react/kubernetes/applications/application.queries.ts

@@ -1,4 +1,4 @@
-import { UseQueryResult, useMutation, useQuery } from 'react-query';
+import { UseQueryResult, useMutation, useQuery } from '@tanstack/react-query';
 import { Pod } from 'kubernetes-types/core/v1';
 
 import { queryClient, withError } from '@/react-tools/react-query';
@@ -18,103 +18,105 @@ import { getNamespaceHorizontalPodAutoscalers } from './autoscaling.service';
 import { applicationIsKind, matchLabelsToLabelSelectorValue } from './utils';
 
 const queryKeys = {
-  applicationsForCluster: (environmentId: EnvironmentId) => [
-    'environments',
-    environmentId,
-    'kubernetes',
-    'applications',
-  ],
+  applicationsForCluster: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'kubernetes', 'applications'] as const,
   application: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string,
     yaml?: boolean
-  ) => [
-    'environments',
-    environmentId,
-    'kubernetes',
-    'applications',
-    namespace,
-    name,
-    yaml,
-  ],
+  ) =>
+    [
+      'environments',
+      environmentId,
+      'kubernetes',
+      'applications',
+      namespace,
+      name,
+      yaml,
+    ] as const,
   applicationRevisions: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string,
     labelSelector?: string
-  ) => [
-    'environments',
-    environmentId,
-    'kubernetes',
-    'applications',
-    namespace,
-    name,
-    'revisions',
-    labelSelector,
-  ],
+  ) =>
+    [
+      'environments',
+      environmentId,
+      'kubernetes',
+      'applications',
+      namespace,
+      name,
+      'revisions',
+      labelSelector,
+    ] as const,
   applicationServices: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string
-  ) => [
-    'environments',
-    environmentId,
-    'kubernetes',
-    'applications',
-    namespace,
-    name,
-    'services',
-  ],
+  ) =>
+    [
+      'environments',
+      environmentId,
+      'kubernetes',
+      'applications',
+      namespace,
+      name,
+      'services',
+    ] as const,
   ingressesForApplication: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string
-  ) => [
-    'environments',
-    environmentId,
-    'kubernetes',
-    'applications',
-    namespace,
-    name,
-    'ingresses',
-  ],
+  ) =>
+    [
+      'environments',
+      environmentId,
+      'kubernetes',
+      'applications',
+      namespace,
+      name,
+      'ingresses',
+    ] as const,
   applicationHorizontalPodAutoscalers: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string
-  ) => [
-    'environments',
-    environmentId,
-    'kubernetes',
-    'applications',
-    namespace,
-    name,
-    'horizontalpodautoscalers',
-  ],
+  ) =>
+    [
+      'environments',
+      environmentId,
+      'kubernetes',
+      'applications',
+      namespace,
+      name,
+      'horizontalpodautoscalers',
+    ] as const,
   applicationPods: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string
-  ) => [
-    'environments',
-    environmentId,
-    'kubernetes',
-    'applications',
-    namespace,
-    name,
-    'pods',
-  ],
+  ) =>
+    [
+      'environments',
+      environmentId,
+      'kubernetes',
+      'applications',
+      namespace,
+      name,
+      'pods',
+    ] as const,
 };
 
 // useQuery to get a list of all applications from an array of namespaces
 export function useApplicationsQuery(
-  environemtId: EnvironmentId,
+  environmentId: EnvironmentId,
   namespaces?: string[]
 ) {
   return useQuery(
-    queryKeys.applicationsForCluster(environemtId),
-    () => getApplicationsForCluster(environemtId, namespaces),
+    queryKeys.applicationsForCluster(environmentId),
+    () => getApplicationsForCluster(environmentId, namespaces),
     {
       ...withError('Unable to retrieve applications'),
       enabled: !!namespaces?.length,

app/react/kubernetes/applications/autoscaling.service.ts

@@ -2,7 +2,7 @@ import {
   HorizontalPodAutoscaler,
   HorizontalPodAutoscalerList,
 } from 'kubernetes-types/autoscaling/v1';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';