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';

app/react/kubernetes/cluster/ConfigureView/ConfigureForm/handleSubmitConfigureCluster.ts

@@ -1,7 +1,7 @@
 import { FormikHelpers } from 'formik';
 import { StorageClass } from 'kubernetes-types/storage/v1';
 import { compare } from 'fast-json-patch';
-import { UseMutationResult } from 'react-query';
+import { UseMutationResult } from '@tanstack/react-query';
 
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 import { UpdateEnvironmentPayload } from '@/react/portainer/environments/queries/useUpdateEnvironmentMutation';

app/react/kubernetes/cluster/ConfigureView/ConfigureForm/useConfigureClusterMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Operation } from 'fast-json-patch';
 import _ from 'lodash';
 

app/react/kubernetes/cluster/ConfigureView/ConfigureForm/useStorageClasses.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { StorageClass, StorageClassList } from 'kubernetes-types/storage/v1';
 
 import axios from '@/portainer/services/axios';

app/react/kubernetes/cluster/HomeView/nodes.service.ts

@@ -1,5 +1,5 @@
 import { NodeList, Node } from 'kubernetes-types/core/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';

app/react/kubernetes/cluster/getIsRBACEnabled.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/useIngressControllerClassMap.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import PortainerError from '@/portainer/error';

app/react/kubernetes/cluster/ingressClass/useIngressControllerClassMap.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/kubernetes/cluster/kubernetesEndpoint.service.ts

@@ -1,5 +1,5 @@
 import { EndpointsList } from 'kubernetes-types/core/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';

app/react/kubernetes/configs/configmap.service.ts

@@ -1,5 +1,5 @@
 import { ConfigMap, ConfigMapList } from 'kubernetes-types/core/v1';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { queryClient, withError } from '@/react-tools/react-query';
 import axios from '@/portainer/services/axios';

app/react/kubernetes/configs/secret.service.ts

@@ -1,5 +1,5 @@
 import { Secret, SecretList } from 'kubernetes-types/core/v1';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { queryClient, withError } from '@/react-tools/react-query';
 import axios from '@/portainer/services/axios';

app/react/kubernetes/dashboard/DashboardView.tsx

@@ -1,5 +1,5 @@
 import { Box, Database, FileCode, Layers, Lock, Shuffle } from 'lucide-react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import Route from '@/assets/ico/route.svg?c';

app/react/kubernetes/ingresses/queries.ts

@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import {

app/react/kubernetes/namespaces/CreateView/queries/useCreateNamespaceMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { withError } from '@/react-tools/react-query';

app/react/kubernetes/namespaces/CreateView/queries/useResourceLimitsQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { notifyError } from '@/portainer/services/notifications';

app/react/kubernetes/namespaces/queries/useNamespaceQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { notifyError } from '@/portainer/services/notifications';

app/react/kubernetes/namespaces/queries/useNamespacesQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { withError } from '@/react-tools/react-query';

app/react/kubernetes/networks/services/queries.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { error as notifyError } from '@/portainer/services/notifications';

app/react/kubernetes/queries/useGetMetricsMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import { getMetricsForAllNodes } from '../services/service';
 

app/react/kubernetes/services/service.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { compact } from 'lodash';
 import { ServiceList } from 'kubernetes-types/core/v1';
 

app/react/kubernetes/volumes/usePVCsQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { PersistentVolumeClaimList } from 'kubernetes-types/core/v1';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';