feat(namespace): migrate create ns to react [EE-2226] (#10377)

app/react/kubernetes/cluster/ConfigureView/ConfigureForm/ConfigureForm.tsx

@@ -21,11 +21,9 @@ import { ModalType } from '@@/modals';
 import { buildConfirmButton } from '@@/modals/utils';
 
 import { useIngressControllerClassMapQuery } from '../../ingressClass/useIngressControllerClassMap';
-import {
-  IngressControllerClassMap,
-  IngressControllerClassMapRowData,
-} from '../../ingressClass/types';
+import { IngressControllerClassMap } from '../../ingressClass/types';
 import { useIsRBACEnabledQuery } from '../../getIsRBACEnabled';
+import { getIngressClassesFormValues } from '../../ingressClass/IngressClassDatatable/utils';
 
 import { useStorageClassesFormValues } from './useStorageClassesFormValues';
 import { ConfigureFormValues, StorageClassFormValues } from './types';
@@ -176,15 +174,10 @@ function InnerForm({
         </FormSection>
         <FormSection title="Networking - Ingresses">
           <IngressClassDatatable
-            onChangeControllers={onChangeControllers}
+            onChange={onChangeControllers}
             description="Enabling ingress controllers in your cluster allows them to be available in the Portainer UI for users to publish applications over HTTP/HTTPS. A controller must have a class name for it to be included here."
-            ingressControllers={
-              values.ingressClasses as IngressControllerClassMapRowData[]
-            }
-            initialIngressControllers={
-              initialValues.ingressClasses as IngressControllerClassMapRowData[]
-            }
-            allowNoneIngressClass={values.allowNoneIngressClass}
+            values={values.ingressClasses}
+            initialValues={initialValues.ingressClasses}
             isLoading={isIngressClassesLoading}
             noIngressControllerLabel="No supported ingress controllers found."
             view="cluster"
@@ -198,9 +191,19 @@ function InnerForm({
                 tooltip='This allows users setting up ingresses to select "none" as the ingress class.'
                 labelClass="col-sm-5 col-lg-4"
                 checked={values.allowNoneIngressClass}
-                onChange={(checked) =>
-                  setFieldValue('allowNoneIngressClass', checked)
-                }
+                onChange={(checked) => {
+                  setFieldValue('allowNoneIngressClass', checked);
+                  // add or remove the none ingress class from the ingress classes list
+                  if (checked) {
+                    setFieldValue(
+                      'ingressClasses',
+                      getIngressClassesFormValues(
+                        checked,
+                        initialValues.ingressClasses
+                      )
+                    );
+                  }
+                }}
               />
             </div>
           </div>
@@ -376,12 +379,15 @@ function InnerForm({
 function useInitialValues(
   environment?: Environment | null,
   storageClassFormValues?: StorageClassFormValues[],
-  ingressClasses?: IngressControllerClassMapRowData[]
+  ingressClasses?: IngressControllerClassMap[]
 ): ConfigureFormValues | undefined {
   return useMemo(() => {
     if (!environment) {
       return undefined;
     }
+    const allowNoneIngressClass =
+      !!environment.Kubernetes.Configuration.AllowNoneIngressClass;
+
     return {
       storageClasses: storageClassFormValues || [],
       useLoadBalancer: !!environment.Kubernetes.Configuration.UseLoadBalancer,
@@ -396,9 +402,10 @@ function useInitialValues(
         !!environment.Kubernetes.Configuration.RestrictStandardUserIngressW,
       ingressAvailabilityPerNamespace:
         !!environment.Kubernetes.Configuration.IngressAvailabilityPerNamespace,
-      allowNoneIngressClass:
-        !!environment.Kubernetes.Configuration.AllowNoneIngressClass,
-      ingressClasses: ingressClasses || [],
+      allowNoneIngressClass,
+      ingressClasses:
+        getIngressClassesFormValues(allowNoneIngressClass, ingressClasses) ||
+        [],
     };
   }, [environment, ingressClasses, storageClassFormValues]);
 }

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

@@ -8,8 +8,6 @@ import { UpdateEnvironmentPayload } from '@/react/portainer/environments/queries
 import { Environment } from '@/react/portainer/environments/types';
 import { TrackEventProps } from '@/angulartics.matomo/analytics-services';
 
-import { IngressControllerClassMapRowData } from '../../ingressClass/types';
-
 import { ConfigureFormValues, StorageClassFormValues } from './types';
 import { ConfigureClusterPayloads } from './useConfigureClusterMutation';
 
@@ -64,10 +62,8 @@ export async function handleSubmitConfigureCluster(
     {
       id: environment.Id,
       updateEnvironmentPayload: updatedEnvironment,
-      initialIngressControllers:
-        initialValues?.ingressClasses as IngressControllerClassMapRowData[],
-      ingressControllers:
-        values.ingressClasses as IngressControllerClassMapRowData[],
+      initialIngressControllers: initialValues?.ingressClasses ?? [],
+      ingressControllers: values.ingressClasses,
       storageClassPatches,
     },
     {

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

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from 'react-query';
 import { Operation } from 'fast-json-patch';
 import _ from 'lodash';
 
-import { withError } from '@/react-tools/react-query';
+import { withError, withInvalidate } from '@/react-tools/react-query';
 import { environmentQueryKeys } from '@/react/portainer/environments/queries/query-keys';
 import {
   UpdateEnvironmentPayload,
@@ -12,13 +12,13 @@ import axios from '@/portainer/services/axios';
 import { parseKubernetesAxiosError } from '@/react/kubernetes/axiosError';
 
 import { updateIngressControllerClassMap } from '../../ingressClass/useIngressControllerClassMap';
-import { IngressControllerClassMapRowData } from '../../ingressClass/types';
+import { IngressControllerClassMap } from '../../ingressClass/types';
 
 export type ConfigureClusterPayloads = {
   id: number;
   updateEnvironmentPayload: Partial<UpdateEnvironmentPayload>;
-  initialIngressControllers: IngressControllerClassMapRowData[];
-  ingressControllers: IngressControllerClassMapRowData[];
+  initialIngressControllers: IngressControllerClassMap[];
+  ingressControllers: IngressControllerClassMap[];
   storageClassPatches: {
     name: string;
     patch: Operation[];
@@ -48,10 +48,9 @@ export function useConfigureClusterMutation() {
       }
     },
     {
-      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());
-      },
+      ...withInvalidate(queryClient, [environmentQueryKeys.base()], {
+        skipRefresh: true,
+      }),
       ...withError('Unable to apply configuration', 'Failure'),
     }
   );

app/react/kubernetes/cluster/ConfigureView/ConfigureView.tsx

@@ -1,4 +1,5 @@
 import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+import { useUnauthorizedRedirect } from '@/react/hooks/useUnauthorizedRedirect';
 
 import { PageHeader } from '@@/PageHeader';
 import { Widget, WidgetBody } from '@@/Widget';
@@ -8,7 +9,19 @@ import { ConfigureForm } from './ConfigureForm';
 export function ConfigureView() {
   const { data: environment } = useCurrentEnvironment();
 
-  // get the initial values
+  useUnauthorizedRedirect(
+    {
+      authorizations: 'K8sClusterW',
+      forceEnvironmentId: environment?.Id,
+      adminOnlyCE: false,
+    },
+    {
+      params: {
+        id: environment?.Id,
+      },
+      to: 'kubernetes.dashboard',
+    }
+  );
 
   return (
     <>