fix(cluster): faster submitting load times [EE-5524] (#10280)

* faster submitting load times

* scroll to selected tz option

---------

Co-authored-by: testa113 <testa113>

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,

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)
         )
       );
+      // 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'),
     }
   );

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;