From dde4b954267e7c4dd9194c3d714f6bb0ad32d41b Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Mon, 11 Sep 2023 00:52:00 +0200
Subject: [PATCH] fix(cluster): faster submitting load times [EE-5524] (#10280)

* faster submitting load times

* scroll to selected tz option

---------

Co-authored-by: testa113 <testa113>
---
 .../ConfigureForm/handleSubmitConfigureCluster.ts |  2 ++
 .../ConfigureForm/useConfigureClusterMutation.ts  | 15 ++++++++++++---
 .../TimeWindowPickerInputGroup.tsx                |  8 +++++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/handleSubmitConfigureCluster.ts b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/handleSubmitConfigureCluster.ts
index 0a34c401a..a5a385a03 100644
--- a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/handleSubmitConfigureCluster.ts
+++ b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/handleSubmitConfigureCluster.ts
@@ -64,6 +64,8 @@ export async function handleSubmitConfigureCluster(
     {
       id: environment.Id,
       updateEnvironmentPayload: updatedEnvironment,
+      initialIngressControllers:
+        initialValues?.ingressClasses as IngressControllerClassMapRowData[],
       ingressControllers:
         values.ingressClasses as IngressControllerClassMapRowData[],
       storageClassPatches,
diff --git a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/useConfigureClusterMutation.ts b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/useConfigureClusterMutation.ts
index 7cb84443d..9f957bc3b 100644
--- a/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/useConfigureClusterMutation.ts
+++ b/app/react/kubernetes/cluster/ConfigureView/ConfigureForm/useConfigureClusterMutation.ts
@@ -1,7 +1,8 @@
 import { useMutation, useQueryClient } from 'react-query';
 import { Operation } from 'fast-json-patch';
+import _ from 'lodash';
 
-import { withError, withInvalidate } from '@/react-tools/react-query';
+import { withError } from '@/react-tools/react-query';
 import { environmentQueryKeys } from '@/react/portainer/environments/queries/query-keys';
 import {
   UpdateEnvironmentPayload,
@@ -16,6 +17,7 @@ import { IngressControllerClassMapRowData } from '../../ingressClass/types';
 export type ConfigureClusterPayloads = {
   id: number;
   updateEnvironmentPayload: Partial<UpdateEnvironmentPayload>;
+  initialIngressControllers: IngressControllerClassMapRowData[];
   ingressControllers: IngressControllerClassMapRowData[];
   storageClassPatches: {
     name: string;
@@ -30,6 +32,7 @@ export function useConfigureClusterMutation() {
     async ({
       id,
       updateEnvironmentPayload,
+      initialIngressControllers,
       ingressControllers,
       storageClassPatches,
     }: ConfigureClusterPayloads) => {
@@ -39,10 +42,16 @@ export function useConfigureClusterMutation() {
           patchStorageClass(id, name, patch)
         )
       );
-      await updateIngressControllerClassMap(id, ingressControllers);
+      // only update the ingress classes if they have changed
+      if (!_.isEqual(initialIngressControllers, ingressControllers)) {
+        await updateIngressControllerClassMap(id, ingressControllers);
+      }
     },
     {
-      ...withInvalidate(queryClient, [environmentQueryKeys.base()]),
+      onSuccess: () => {
+        // not returning the promise here because we don't want to wait for the invalidateQueries to complete (longer than the mutation itself)
+        queryClient.invalidateQueries(environmentQueryKeys.base());
+      },
       ...withError('Unable to apply configuration', 'Failure'),
     }
   );
diff --git a/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx b/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx
index 78553168d..5f8eb5b6c 100644
--- a/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx
+++ b/app/react/portainer/environments/common/TimeWindowPicker/TimeWindowPickerInputGroup.tsx
@@ -57,6 +57,12 @@ export function TimeWindowPickerInputGroup({
     });
   }
 
+  // find the option index for react-select to scroll to the current option
+  const timeZoneOptionIndex = useMemo(
+    () => timeZoneOptions.findIndex((option) => option.value === timeZone),
+    [timeZone, timeZoneOptions]
+  );
+
   return (
     <div className="flex flex-wrap items-center gap-x-5">
       <div className="flex items-center gap-x-5">
@@ -90,7 +96,7 @@ export function TimeWindowPickerInputGroup({
       </div>
       <Select<Option<string>>
         options={timeZoneOptions}
-        value={{ value: timeZone, label: timeZone }}
+        value={timeZoneOptions[timeZoneOptionIndex]}
         className="w-72 min-w-fit"
         onChange={(newTimeZone) => {
           if (!newTimeZone) return;