fix(ingress): allow none controller type EE-4420 (#7883)

Co-authored-by: testA113 <alex.harris@portainer.io>

api/database/models/ingress.go

@@ -59,9 +59,6 @@ func (r K8sIngressInfo) Validate(request *http.Request) error {
 	if r.Namespace == "" {
 		return errors.New("missing ingress Namespace from the request payload")
 	}
-	if r.ClassName == "" {
-		return errors.New("missing ingress ClassName from the request payload")
-	}
 	return nil
 }
 

api/datastore/migrate_data_test.go

@@ -275,7 +275,7 @@ func migrateDBTestHelper(t *testing.T, srcPath, wantPath string) error {
 
 	// Compare the result we got with the one we wanted.
 	if diff := cmp.Diff(wantJSON, gotJSON); diff != "" {
-		gotPath := filepath.Join(t.TempDir(), "portainer-migrator-test-fail.json")
+		gotPath := filepath.Join(os.TempDir(), "portainer-migrator-test-fail.json")
 		os.WriteFile(
 			gotPath,
 			gotJSON,

api/datastore/migrator/migrate_dbversion70.go

@@ -8,7 +8,7 @@ import (
 
 func (m *Migrator) migrateDBVersionToDB70() error {
 	log.Info().Msg("- add IngressAvailabilityPerNamespace field")
-	if err := m.addIngressAvailabilityPerNamespaceFieldDB70(); err != nil {
+	if err := m.updateIngressFieldsForEnvDB70(); err != nil {
 		return err
 	}
 
@@ -51,7 +51,7 @@ func (m *Migrator) migrateDBVersionToDB70() error {
 	return nil
 }
 
-func (m *Migrator) addIngressAvailabilityPerNamespaceFieldDB70() error {
+func (m *Migrator) updateIngressFieldsForEnvDB70() error {
 	endpoints, err := m.endpointService.Endpoints()
 	if err != nil {
 		return err
@@ -59,6 +59,7 @@ func (m *Migrator) addIngressAvailabilityPerNamespaceFieldDB70() error {
 
 	for _, endpoint := range endpoints {
 		endpoint.Kubernetes.Configuration.IngressAvailabilityPerNamespace = true
+		endpoint.Kubernetes.Configuration.AllowNoneIngressClass = false
 
 		err = m.endpointService.UpdateEndpoint(endpoint.ID, &endpoint)
 		if err != nil {

api/datastore/test_data/output_24_to_latest.json

@@ -52,6 +52,7 @@
       "IsEdgeDevice": false,
       "Kubernetes": {
         "Configuration": {
+          "AllowNoneIngressClass": false,
           "EnableResourceOverCommit": false,
           "IngressAvailabilityPerNamespace": true,
           "IngressClasses": null,

api/http/handler/kubernetes/ingresses.go

@@ -57,11 +57,22 @@ func (handler *Handler) getKubernetesIngressControllers(w http.ResponseWriter, r
 			err,
 		)
 	}
+
+	// Add none controller if "AllowNone" is set for endpoint.
+	if endpoint.Kubernetes.Configuration.AllowNoneIngressClass {
+		controllers = append(controllers, models.K8sIngressController{
+			Name:      "none",
+			ClassName: "none",
+			Type:      "custom",
+		})
+	}
 	existingClasses := endpoint.Kubernetes.Configuration.IngressClasses
 	var updatedClasses []portainer.KubernetesIngressClassConfig
 	for i := range controllers {
 		controllers[i].Availability = true
-		controllers[i].New = true
+		if controllers[i].ClassName != "none" {
+			controllers[i].New = true
+		}
 
 		var updatedClass portainer.KubernetesIngressClassConfig
 		updatedClass.Name = controllers[i].ClassName
@@ -153,6 +164,14 @@ func (handler *Handler) getKubernetesIngressControllersByNamespace(w http.Respon
 			err,
 		)
 	}
+	// Add none controller if "AllowNone" is set for endpoint.
+	if endpoint.Kubernetes.Configuration.AllowNoneIngressClass {
+		currentControllers = append(currentControllers, models.K8sIngressController{
+			Name:      "none",
+			ClassName: "none",
+			Type:      "custom",
+		})
+	}
 	kubernetesConfig := endpoint.Kubernetes.Configuration
 	existingClasses := kubernetesConfig.IngressClasses
 	ingressAvailabilityPerNamespace := kubernetesConfig.IngressAvailabilityPerNamespace
@@ -161,7 +180,9 @@ func (handler *Handler) getKubernetesIngressControllersByNamespace(w http.Respon
 	for i := range currentControllers {
 		var globallyblocked bool
 		currentControllers[i].Availability = true
-		currentControllers[i].New = true
+		if currentControllers[i].ClassName != "none" {
+			currentControllers[i].New = true
+		}
 
 		var updatedClass portainer.KubernetesIngressClassConfig
 		updatedClass.Name = currentControllers[i].ClassName
@@ -258,6 +279,14 @@ func (handler *Handler) updateKubernetesIngressControllers(w http.ResponseWriter
 			err,
 		)
 	}
+	// Add none controller if "AllowNone" is set for endpoint.
+	if endpoint.Kubernetes.Configuration.AllowNoneIngressClass {
+		controllers = append(controllers, models.K8sIngressController{
+			Name:      "none",
+			ClassName: "none",
+			Type:      "custom",
+		})
+	}
 	var updatedClasses []portainer.KubernetesIngressClassConfig
 	for i := range controllers {
 		controllers[i].Availability = true

api/kubernetes/cli/ingress.go

@@ -90,11 +90,11 @@ func (kcl *KubeClient) GetIngresses(namespace string) ([]models.K8sIngressInfo,
 
 	var infos []models.K8sIngressInfo
 	for _, ingress := range ingressList.Items {
-		ingressClass := ingress.Spec.IngressClassName
 		var info models.K8sIngressInfo
 		info.Name = ingress.Name
 		info.UID = string(ingress.UID)
 		info.Namespace = namespace
+		ingressClass := ingress.Spec.IngressClassName
 		info.ClassName = ""
 		if ingressClass != nil {
 			info.ClassName = *ingressClass
@@ -113,6 +113,10 @@ func (kcl *KubeClient) GetIngresses(namespace string) ([]models.K8sIngressInfo,
 		// Gather list of paths and hosts.
 		hosts := make(map[string]struct{})
 		for _, r := range ingress.Spec.Rules {
+			// We collect all exiting hosts in a map to avoid duplicates.
+			// Then, later convert it to a slice for the frontend.
+			hosts[r.Host] = struct{}{}
+
 			if r.HTTP == nil {
 				continue
 			}
@@ -124,12 +128,10 @@ func (kcl *KubeClient) GetIngresses(namespace string) ([]models.K8sIngressInfo,
 				path.IngressName = info.Name
 				path.Host = r.Host
 
-				// We collect all exiting hosts in a map to avoid duplicates.
-				// Then, later convert it to a slice for the frontend.
-				hosts[r.Host] = struct{}{}
-
 				path.Path = p.Path
-				path.PathType = string(*p.PathType)
+				if p.PathType != nil {
+					path.PathType = string(*p.PathType)
+				}
 				path.ServiceName = p.Backend.Service.Name
 				path.Port = int(p.Backend.Service.Port.Number)
 				info.Paths = append(info.Paths, path)
@@ -154,7 +156,9 @@ func (kcl *KubeClient) CreateIngress(namespace string, info models.K8sIngressInf
 
 	ingress.Name = info.Name
 	ingress.Namespace = info.Namespace
-	ingress.Spec.IngressClassName = &info.ClassName
+	if info.ClassName != "" {
+		ingress.Spec.IngressClassName = &info.ClassName
+	}
 	ingress.Annotations = info.Annotations
 
 	// Store TLS information.
@@ -224,7 +228,9 @@ func (kcl *KubeClient) UpdateIngress(namespace string, info models.K8sIngressInf
 
 	ingress.Name = info.Name
 	ingress.Namespace = info.Namespace
-	ingress.Spec.IngressClassName = &info.ClassName
+	if info.ClassName != "" {
+		ingress.Spec.IngressClassName = &info.ClassName
+	}
 	ingress.Annotations = info.Annotations
 
 	// Store TLS information.

api/portainer.go

@@ -555,6 +555,7 @@ type (
 		IngressClasses                  []KubernetesIngressClassConfig `json:"IngressClasses"`
 		RestrictDefaultNamespace        bool                           `json:"RestrictDefaultNamespace"`
 		IngressAvailabilityPerNamespace bool                           `json:"IngressAvailabilityPerNamespace"`
+		AllowNoneIngressClass           bool                           `json:"AllowNoneIngressClass"`
 	}
 
 	// KubernetesStorageClassConfig represents a Kubernetes Storage Class configuration

app/kubernetes/react/components/index.ts

@@ -12,9 +12,10 @@ export const componentsModule = angular
   .component(
     'ingressClassDatatable',
     r2a(IngressClassDatatable, [
-      'onChangeAvailability',
+      'onChangeControllers',
       'description',
       'ingressControllers',
+      'allowNoneIngressClass',
       'isLoading',
       'noIngressControllerLabel',
       'view',

app/kubernetes/react/views/networks/ingresses/CreateIngressView/CreateIngressView.tsx

@@ -157,7 +157,9 @@ export function CreateIngressView() {
   const existingIngressClass = useMemo(
     () =>
       ingressControllersResults.data?.find(
-        (i) => i.ClassName === ingressRule.IngressClassName
+        (i) =>
+          i.ClassName === ingressRule.IngressClassName ||
+          (i.Type === 'custom' && ingressRule.IngressClassName === '')
       ),
     [ingressControllersResults.data, ingressRule.IngressClassName]
   );
@@ -177,10 +179,11 @@ export function CreateIngressView() {
     ingressRule.IngressClassName &&
     !ingressControllersResults.isLoading
   ) {
+    const optionLabel = !ingressRule.IngressType
+      ? `${ingressRule.IngressClassName} - NOT FOUND`
+      : `${ingressRule.IngressClassName} - DISALLOWED`;
     ingressClassOptions.push({
-      label: !ingressRule.IngressType
+      label: optionLabel,
-        ? `${ingressRule.IngressClassName} - NOT FOUND`
-        : `${ingressRule.IngressClassName} - DISALLOWED`,
       value: ingressRule.IngressClassName,
     });
   }
@@ -206,6 +209,7 @@ export function CreateIngressView() {
       !!params.name &&
       ingressesResults.data &&
       !ingressRule.IngressName &&
+      !ingressControllersResults.isLoading &&
       !ingressControllersResults.isLoading
     ) {
       // if it is an edit screen, prepare the rule from the ingress
@@ -214,9 +218,11 @@ export function CreateIngressView() {
       );
       if (ing) {
         const type = ingressControllersResults.data?.find(
-          (c) => c.ClassName === ing.ClassName
+          (c) =>
+            c.ClassName === ing.ClassName ||
+            (c.Type === 'custom' && !ing.ClassName)
         )?.Type;
-        const r = prepareRuleFromIngress(ing);
+        const r = prepareRuleFromIngress(ing, type);
         r.IngressType = type || r.IngressType;
         setIngressRule(r);
       }
@@ -636,7 +642,7 @@ export function CreateIngressView() {
     setIngressRule(rule);
   }
 
-  function addNewAnnotation(type?: 'rewrite' | 'regex') {
+  function addNewAnnotation(type?: 'rewrite' | 'regex' | 'ingressClass') {
     const rule = { ...ingressRule };
 
     const annotation: Annotation = {
@@ -644,13 +650,21 @@ export function CreateIngressView() {
       Value: '',
       ID: uuidv4(),
     };
-    if (type === 'rewrite') {
+    switch (type) {
-      annotation.Key = 'nginx.ingress.kubernetes.io/rewrite-target';
+      case 'rewrite':
-      annotation.Value = '/$1';
+        annotation.Key = 'nginx.ingress.kubernetes.io/rewrite-target';
-    }
+        annotation.Value = '/$1';
-    if (type === 'regex') {
+        break;
-      annotation.Key = 'nginx.ingress.kubernetes.io/use-regex';
+      case 'regex':
-      annotation.Value = 'true';
+        annotation.Key = 'nginx.ingress.kubernetes.io/use-regex';
+        annotation.Value = 'true';
+        break;
+      case 'ingressClass':
+        annotation.Key = 'kubernetes.io/ingress.class';
+        annotation.Value = '';
+        break;
+      default:
+        break;
     }
     rule.Annotations = rule.Annotations || [];
     rule.Annotations?.push(annotation);
@@ -690,10 +704,13 @@ export function CreateIngressView() {
   function handleCreateIngressRules() {
     const rule = { ...ingressRule };
 
+    const classNameToSend =
+      rule.IngressClassName === 'none' ? '' : rule.IngressClassName;
+
     const ingress: Ingress = {
       Namespace: namespace,
       Name: rule.IngressName,
-      ClassName: rule.IngressClassName,
+      ClassName: classNameToSend,
       Hosts: rule.Hosts.map((host) => host.Host),
       Paths: preparePaths(rule.IngressName, rule.Hosts),
       TLS: prepareTLS(rule.Hosts),

app/kubernetes/react/views/networks/ingresses/CreateIngressView/IngressForm.tsx

@@ -47,7 +47,7 @@ interface Props {
 
   addNewIngressHost: (noHost?: boolean) => void;
   addNewIngressRoute: (hostIndex: number) => void;
-  addNewAnnotation: (type?: 'rewrite' | 'regex') => void;
+  addNewAnnotation: (type?: 'rewrite' | 'regex' | 'ingressClass') => void;
 
   handleNamespaceChange: (val: string) => void;
   handleHostChange: (hostIndex: number, val: string) => void;
@@ -249,9 +249,10 @@ export function IngressForm({
                     onClick={() => addNewAnnotation('rewrite')}
                     icon={Plus}
                     title="When the exposed URLs for your applications differ from the specified paths in the ingress, use the rewrite target annotation to denote the path to redirect to."
+                    data-cy="add-rewrite-annotation"
                   >
                     {' '}
-                    add rewrite annotation
+                    Add rewrite annotation
                   </Button>
 
                   <Button
@@ -259,11 +260,23 @@ export function IngressForm({
                     onClick={() => addNewAnnotation('regex')}
                     icon={Plus}
                     title="When the exposed URLs for your applications differ from the specified paths in the ingress, use the rewrite target annotation to denote the path to redirect to."
+                    data-cy="add-regex-annotation"
                   >
-                    add regular expression annotation
+                    Add regular expression annotation
                   </Button>
                 </>
               )}
+
+              {rule.IngressType === 'custom' && (
+                <Button
+                  className="btn btn-sm btn-light mb-2 ml-2"
+                  onClick={() => addNewAnnotation('ingressClass')}
+                  icon={Plus}
+                  data-cy="add-ingress-class-annotation"
+                >
+                  Add kubernetes.io/ingress.class annotation
+                </Button>
+              )}
             </div>
 
             <div className="col-sm-12 px-0 text-muted">Rules</div>

app/kubernetes/react/views/networks/ingresses/CreateIngressView/utils.ts

@@ -1,6 +1,7 @@
 import { v4 as uuidv4 } from 'uuid';
 
 import { Annotation } from '@/kubernetes/react/views/networks/ingresses/components/annotations/types';
+import { SupportedIngControllerTypes } from '@/react/kubernetes/cluster/ingressClass/types';
 
 import { TLS, Ingress } from '../types';
 
@@ -62,7 +63,7 @@ export function prepareRuleHostsFromIngress(ing: Ingress) {
     h.Host = host;
     h.Secret = getSecretByHost(host, ing.TLS);
     h.Paths = [];
-    ing.Paths.forEach((path) => {
+    ing.Paths?.forEach((path) => {
       if (path.Host === host) {
         h.Paths.push({
           Route: path.Path,
@@ -99,12 +100,15 @@ export function getAnnotationsForEdit(
   return result;
 }
 
-export function prepareRuleFromIngress(ing: Ingress): Rule {
+export function prepareRuleFromIngress(
+  ing: Ingress,
+  type?: SupportedIngControllerTypes
+): Rule {
   return {
     Key: uuidv4(),
     IngressName: ing.Name,
     Namespace: ing.Namespace,
-    IngressClassName: ing.ClassName,
+    IngressClassName: type === 'custom' ? 'none' : ing.ClassName,
     Hosts: prepareRuleHostsFromIngress(ing) || [],
     Annotations: ing.Annotations ? getAnnotationsForEdit(ing.Annotations) : [],
     IngressType: ing.Type,

app/kubernetes/react/views/networks/ingresses/queries.ts

@@ -96,8 +96,11 @@ export function useIngresses(
         const serviceNamesInNamespace = servicesInNamespace?.map(
           (service) => service.Name
         );
-        ing.Paths.forEach((path, pIndex) => {
+        ing.Paths?.forEach((path, pIndex) => {
-          if (!serviceNamesInNamespace?.includes(path.ServiceName)) {
+          if (
+            !serviceNamesInNamespace?.includes(path.ServiceName) &&
+            filteredIngresses[iIndex].Paths
+          ) {
             filteredIngresses[iIndex].Paths[pIndex].HasService = false;
           } else {
             filteredIngresses[iIndex].Paths[pIndex].HasService = true;
@@ -186,6 +189,7 @@ export function useIngressControllers(
     },
     {
       enabled: !!namespace,
+      cacheTime: 0,
       ...withError('Unable to get ingress controllers'),
     }
   );

app/kubernetes/react/views/networks/ingresses/types.ts

@@ -2,6 +2,7 @@ import {
   PaginationTableSettings,
   SortableTableSettings,
 } from '@/react/components/datatables/types';
+import { SupportedIngControllerTypes } from '@/react/kubernetes/cluster/ingressClass/types';
 
 export interface TableSettings
   extends SortableTableSettings,
@@ -42,6 +43,6 @@ export interface IngressController {
   Name: string;
   ClassName: string;
   Availability: string;
-  Type: string;
+  Type: SupportedIngControllerTypes;
   New: boolean;
 }

app/kubernetes/views/configure/configure.html

@@ -42,7 +42,8 @@
             </div>
 
             <ingress-class-datatable
-              on-change-availability="(ctrl.onChangeAvailability)"
+              on-change-controllers="(ctrl.onChangeControllers)"
+              allow-none-ingress-class="ctrl.formValues.AllowNoneIngressClass"
               ingress-controllers="ctrl.originalIngressControllers"
               is-loading="ctrl.isIngressControllersLoading"
               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.'"
@@ -50,18 +51,46 @@
               view="'cluster'"
             ></ingress-class-datatable>
 
-            <div class="form-group">
+            <label htmlFor="foldingButtonIngControllerSettings" class="col-sm-12 form-section-title cursor-pointer flex items-center">
-              <div class="col-sm-12">
+              <button
-                <por-switch-field
+                id="foldingButtonIngControllerSettings"
-                  checked="ctrl.formValues.IngressAvailabilityPerNamespace"
+                type="button"
-                  name="'ingressAvailabilityPerNamespace'"
+                class="border-0 mx-2 bg-transparent inline-flex justify-center items-center w-2 !ml-0"
-                  label="'Configure ingress controller availability per namespace'"
+                ng-click="ctrl.toggleAdvancedIngSettings()"
-                  tooltip="'This allows an administrator to configure, in each namespace, which ingress controllers will be available for users to select when setting up ingresses for applications.'"
+              >
-                  on-change="(ctrl.onToggleIngressAvailabilityPerNamespace)"
+                <pr-icon ng-if="!ctrl.state.isIngToggleSectionExpanded" feather="true" icon="'chevron-right'"></pr-icon>
-                  label-class="'col-sm-5 col-lg-4 px-0 !m-0'"
+                <pr-icon ng-if="ctrl.state.isIngToggleSectionExpanded" feather="true" icon="'chevron-down'"></pr-icon>
-                  switch-class="'col-sm-8'"
+              </button>
-                >
+              More settings
-                </por-switch-field>
+            </label>
+            <div ng-if="ctrl.state.isIngToggleSectionExpanded" class="ml-4">
+              <div class="form-group">
+                <div class="col-sm-12">
+                  <por-switch-field
+                    checked="ctrl.formValues.AllowNoneIngressClass"
+                    name="'allowNoIngressClass'"
+                    label="'Allow ingress class to be set to &quot;none&quot;'"
+                    tooltip="'This allows users setting up ingresses to select &quot;none&quot; as the ingress class.'"
+                    on-change="(ctrl.onToggleAllowNoneIngressClass)"
+                    label-class="'col-sm-5 col-lg-4 px-0 !m-0'"
+                    switch-class="'col-sm-8'"
+                  >
+                  </por-switch-field>
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-sm-12">
+                  <por-switch-field
+                    checked="ctrl.formValues.IngressAvailabilityPerNamespace"
+                    name="'ingressAvailabilityPerNamespace'"
+                    label="'Configure ingress controller availability per namespace'"
+                    tooltip="'This allows an administrator to configure, in each namespace, which ingress controllers will be available for users to select when setting up ingresses for applications.'"
+                    on-change="(ctrl.onToggleIngressAvailabilityPerNamespace)"
+                    label-class="'col-sm-5 col-lg-4 px-0 !m-0'"
+                    switch-class="'col-sm-8'"
+                  >
+                  </por-switch-field>
+                </div>
               </div>
             </div>
 

app/kubernetes/views/configure/configureController.js

@@ -47,9 +47,10 @@ class KubernetesConfigureController {
     this.limitedFeature = FeatureId.K8S_SETUP_DEFAULT;
     this.limitedFeatureAutoWindow = FeatureId.HIDE_AUTO_UPDATE_WINDOW;
     this.onToggleAutoUpdate = this.onToggleAutoUpdate.bind(this);
-    this.onChangeAvailability = this.onChangeAvailability.bind(this);
+    this.onChangeControllers = this.onChangeControllers.bind(this);
     this.onChangeEnableResourceOverCommit = this.onChangeEnableResourceOverCommit.bind(this);
     this.onToggleIngressAvailabilityPerNamespace = this.onToggleIngressAvailabilityPerNamespace.bind(this);
+    this.onToggleAllowNoneIngressClass = this.onToggleAllowNoneIngressClass.bind(this);
     this.onChangeStorageClassAccessMode = this.onChangeStorageClassAccessMode.bind(this);
   }
   /* #endregion */
@@ -71,7 +72,7 @@ class KubernetesConfigureController {
   /* #endregion */
 
   /* #region  INGRESS CLASSES UI MANAGEMENT */
-  onChangeAvailability(controllerClassMap) {
+  onChangeControllers(controllerClassMap) {
     this.ingressControllers = controllerClassMap;
   }
 
@@ -79,6 +80,18 @@ class KubernetesConfigureController {
     return _.find(this.formValues.IngressClasses, { Type: this.IngressClassTypes.TRAEFIK });
   }
 
+  toggleAdvancedIngSettings() {
+    this.$scope.$evalAsync(() => {
+      this.state.isIngToggleSectionExpanded = !this.state.isIngToggleSectionExpanded;
+    });
+  }
+
+  onToggleAllowNoneIngressClass() {
+    this.$scope.$evalAsync(() => {
+      this.formValues.AllowNoneIngressClass = !this.formValues.AllowNoneIngressClass;
+    });
+  }
+
   onToggleIngressAvailabilityPerNamespace() {
     this.$scope.$evalAsync(() => {
       this.formValues.IngressAvailabilityPerNamespace = !this.formValues.IngressAvailabilityPerNamespace;
@@ -109,6 +122,7 @@ class KubernetesConfigureController {
     endpoint.Kubernetes.Configuration.IngressClasses = ingressClasses;
     endpoint.Kubernetes.Configuration.RestrictDefaultNamespace = this.formValues.RestrictDefaultNamespace;
     endpoint.Kubernetes.Configuration.IngressAvailabilityPerNamespace = this.formValues.IngressAvailabilityPerNamespace;
+    endpoint.Kubernetes.Configuration.AllowNoneIngressClass = this.formValues.AllowNoneIngressClass;
     endpoint.ChangeWindow = this.state.autoUpdateSettings;
   }
 
@@ -256,6 +270,7 @@ class KubernetesConfigureController {
       actionInProgress: false,
       displayConfigureClassPanel: {},
       viewReady: false,
+      isIngToggleSectionExpanded: false,
       endpointId: this.$state.params.endpointId,
       duplicates: {
         ingressClasses: new KubernetesFormValidationReferences(),
@@ -315,6 +330,7 @@ class KubernetesConfigureController {
         return ic;
       });
       this.formValues.IngressAvailabilityPerNamespace = this.endpoint.Kubernetes.Configuration.IngressAvailabilityPerNamespace;
+      this.formValues.AllowNoneIngressClass = this.endpoint.Kubernetes.Configuration.AllowNoneIngressClass;
 
       this.oldFormValues = Object.assign({}, this.formValues);
     } catch (err) {

app/kubernetes/views/resource-pools/create/createResourcePool.html

@@ -185,7 +185,7 @@
               <div class="col-sm-12 form-section-title"> Networking </div>
               <ingress-class-datatable
                 ng-if="$ctrl.state.ingressAvailabilityPerNamespace"
-                on-change-availability="($ctrl.onChangeIngressControllerAvailability)"
+                on-change-controllers="($ctrl.onChangeIngressControllerAvailability)"
                 ingress-controllers="$ctrl.ingressControllers"
                 description="'Enable the ingress controllers that users can select when publishing applications in this namespace.'"
                 no-ingress-controller-label="'No ingress controllers found in the cluster. Go to the cluster setup view to configure and allow the use of ingress controllers in the cluster.'"

app/kubernetes/views/resource-pools/edit/resourcePool.html

@@ -161,7 +161,7 @@
                   <div class="col-sm-12 form-section-title"> Networking </div>
                   <ingress-class-datatable
                     ng-if="ctrl.state.ingressAvailabilityPerNamespace"
-                    on-change-availability="(ctrl.onChangeIngressControllerAvailability)"
+                    on-change-controllers="(ctrl.onChangeIngressControllerAvailability)"
                     ingress-controllers="ctrl.ingressControllers"
                     description="'Enable the ingress controllers that users can select when publishing applications in this namespace.'"
                     no-ingress-controller-label="'No ingress controllers found in the cluster. Go to the cluster setup view to configure and allow the use of ingress controllers in the cluster.'"

app/react-tools/test-mocks.ts

@@ -75,6 +75,7 @@ export function createMockEnvironment(): Environment {
       Configuration: {
         IngressClasses: [],
         IngressAvailabilityPerNamespace: false,
+        AllowNoneIngressClass: false,
       },
     },
     EdgeKey: '',

app/react/components/form-components/FormSection/FormSection.tsx

@@ -1,5 +1,7 @@
 import { PropsWithChildren, useState } from 'react';
 
+import { Icon } from '@@/Icon';
+
 import { FormSectionTitle } from '../FormSectionTitle';
 
 interface Props {
@@ -22,11 +24,12 @@ export function FormSection({
             id={`foldingButton${title}`}
             type="button"
             onClick={() => setIsExpanded(!isExpanded)}
-            className="border-0 mx-2 bg-transparent inline-flex justify-center items-center w-2"
+            className="border-0 mx-2 !ml-0 bg-transparent inline-flex justify-center items-center w-2"
           >
-            <i
+            <Icon
-              className={`fa fa-caret-${isExpanded ? 'down' : 'right'}`}
+              icon={isExpanded ? 'chevron-down' : 'chevron-right'}
-              aria-hidden="true"
+              className="shrink-0"
+              feather
             />
           </button>
         )}

app/react/components/form-components/FormSectionTitle/FormSectionTitle.tsx

@@ -12,7 +12,7 @@ export function FormSectionTitle({
     return (
       <label
         htmlFor={htmlFor}
-        className="col-sm-12 form-section-title cursor-pointer"
+        className="col-sm-12 form-section-title cursor-pointer flex items-center"
       >
         {children}
       </label>

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { confirmWarn } from '@/portainer/services/modal.service/confirm';
 
@@ -14,29 +14,64 @@ import { createStore } from './datatable-store';
 const useStore = createStore('ingressClasses');
 
 interface Props {
-  onChangeAvailability: (
+  onChangeControllers: (
     controllerClassMap: IngressControllerClassMap[]
   ) => void; // angular function to save the ingress class list
   description: string;
   ingressControllers: IngressControllerClassMap[] | undefined;
+  allowNoneIngressClass: boolean;
   isLoading: boolean;
   noIngressControllerLabel: string;
   view: string;
 }
 
 export function IngressClassDatatable({
-  onChangeAvailability,
+  onChangeControllers,
   description,
   ingressControllers,
+  allowNoneIngressClass,
   isLoading,
   noIngressControllerLabel,
   view,
 }: Props) {
-  const [ingControllerFormValues, setIngControllerFormValues] =
+  const [ingControllerFormValues, setIngControllerFormValues] = useState(
-    useState(ingressControllers);
+    ingressControllers || []
+  );
   const settings = useStore();
   const columns = useColumns();
 
+  useEffect(() => {
+    if (allowNoneIngressClass === undefined) {
+      return;
+    }
+
+    let newIngFormValues: IngressControllerClassMap[];
+    const isCustomTypeExist = ingControllerFormValues.some(
+      (ic) => ic.Type === 'custom'
+    );
+    if (allowNoneIngressClass) {
+      newIngFormValues = [...ingControllerFormValues];
+      // add the ingress controller type 'custom' with a 'none' ingress class name
+      if (!isCustomTypeExist) {
+        newIngFormValues.push({
+          Name: 'none',
+          ClassName: 'none',
+          Type: 'custom',
+          Availability: true,
+          New: false,
+          Used: false,
+        });
+      }
+    } else {
+      newIngFormValues = ingControllerFormValues.filter(
+        (ingController) => ingController.ClassName !== 'none'
+      );
+    }
+    setIngControllerFormValues(newIngFormValues);
+    onChangeControllers(newIngFormValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allowNoneIngressClass, onChangeControllers]);
+
   return (
     <div className="-mx-[15px]">
       <Datatable
@@ -134,7 +169,7 @@ export function IngressClassDatatable({
       );
       if (view === 'namespace') {
         setIngControllerFormValues(updatedIngressControllers);
-        onChangeAvailability(updatedIngressControllers);
+        onChangeControllers(updatedIngressControllers);
         return;
       }
 
@@ -180,14 +215,14 @@ export function IngressClassDatatable({
           callback: (confirmed) => {
             if (confirmed) {
               setIngControllerFormValues(updatedIngressControllers);
-              onChangeAvailability(updatedIngressControllers);
+              onChangeControllers(updatedIngressControllers);
             }
           },
         });
         return;
       }
       setIngControllerFormValues(updatedIngressControllers);
-      onChangeAvailability(updatedIngressControllers);
+      onChangeControllers(updatedIngressControllers);
     }
   }
 }
@@ -196,10 +231,13 @@ function isUnsavedChanges(
   oldIngressControllers: IngressControllerClassMap[],
   newIngressControllers: IngressControllerClassMap[]
 ) {
-  for (let i = 0; i < oldIngressControllers.length; i += 1) {
+  if (oldIngressControllers.length !== newIngressControllers.length) {
+    return true;
+  }
+  for (let i = 0; i < newIngressControllers.length; i += 1) {
     if (
-      oldIngressControllers[i].Availability !==
+      oldIngressControllers[i]?.Availability !==
-      newIngressControllers[i].Availability
+      newIngressControllers[i]?.Availability
     ) {
       return true;
     }

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

@@ -1,9 +1,13 @@
-type SupportedIngControllerNames = 'nginx' | 'traefik' | 'unknown';
+export type SupportedIngControllerTypes =
+  | 'nginx'
+  | 'traefik'
+  | 'other'
+  | 'custom';
 
 export interface IngressControllerClassMap extends Record<string, unknown> {
   Name: string;
   ClassName: string;
-  Type: SupportedIngControllerNames;
+  Type: SupportedIngControllerTypes;
   Availability: boolean;
   New: boolean;
   Used: boolean; // if the controller is used by any ingress in the cluster

app/react/portainer/environments/types.ts

@@ -70,6 +70,7 @@ export interface KubernetesConfiguration {
   RestrictDefaultNamespace?: boolean;
   IngressClasses: IngressClass[];
   IngressAvailabilityPerNamespace: boolean;
+  AllowNoneIngressClass: boolean;
 }
 
 export interface KubernetesSettings {