@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.3

package/edit/auth/__tests__/azuread.test.ts

@@ -3,6 +3,7 @@ import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import AzureAD from '@shell/edit/auth/azuread.vue';
 import { _EDIT } from '@shell/config/query-params';
+import { SLO_OPTION_VALUES } from '@shell/mixins/auth-config';
 
 jest.mock('@shell/utils/clipboard', () => {
   return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
@@ -28,43 +29,44 @@ const mockModel = {
   type:     'azureADConfig',
 };
 
-describe('edit: azureAD should', () => {
-  let wrapper: any;
-  const requiredSetup = () => ({
-    data() {
-      return {
-        isEnabling:     true,
-        editConfig:     false,
-        model:          { ...mockModel },
-        serverSetting:  null,
-        errors:         [],
-        originalModel:  null,
-        principals:     [],
-        authConfigName: 'azuread',
-      };
-    },
-    global: {
-      mocks: {
-        $fetchState: { pending: false },
-        $store:      {
-          getters: {
-            currentStore:              () => 'current_store',
-            'current_store/schemaFor': jest.fn(),
-            'current_store/all':       jest.fn(),
-            'i18n/t':                  (val: string) => val,
-            'i18n/exists':             jest.fn(),
-          },
-          dispatch: jest.fn()
+const requiredSetup = (modelOverrides = {}) => ({
+  data() {
+    return {
+      isEnabling:     true,
+      editConfig:     false,
+      model:          { ...mockModel, ...modelOverrides },
+      serverSetting:  null,
+      errors:         [],
+      originalModel:  null,
+      principals:     [],
+      authConfigName: 'azuread',
+    };
+  },
+  global: {
+    mocks: {
+      $fetchState: { pending: false },
+      $store:      {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  (val: string) => val,
+          'i18n/exists':             jest.fn(),
         },
-        $route:  { query: { AS: '' }, params: { id: 'azure' } },
-        $router: { applyQuery: jest.fn() },
+        dispatch: jest.fn()
       },
+      $route:  { query: { AS: '' }, params: { id: 'azure' } },
+      $router: { applyQuery: jest.fn() },
     },
-    propsData: {
-      value: { applicationSecret: '' },
-      mode:  _EDIT,
-    },
-  });
+  },
+  propsData: {
+    value: { applicationSecret: '' },
+    mode:  _EDIT,
+  },
+});
+
+describe('edit: azureAD should', () => {
+  let wrapper: any;
 
   beforeEach(() => {
     wrapper = mount(AzureAD, { ...requiredSetup() });
@@ -236,3 +238,184 @@ describe('edit: azureAD should', () => {
     expect(saveButton.disabled).toBe(testCase.result);
   });
 });
+
+describe('edit: azureAD SSO logout should', () => {
+  let wrapper: any;
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it('not render SLO section when logoutAllSupported is false', () => {
+    wrapper = mount(AzureAD, { ...requiredSetup({ logoutAllSupported: false }) });
+    const sloSection = wrapper.find('[data-testid="azuread-sloType"]');
+
+    expect(sloSection.exists()).toBe(false);
+  });
+
+  it('render SLO section when logoutAllSupported is true', async() => {
+    wrapper = mount(AzureAD, { ...requiredSetup({ logoutAllSupported: true }) });
+    await nextTick();
+    const sloSection = wrapper.find('[data-testid="azuread-sloType"]');
+
+    expect(sloSection.exists()).toBe(true);
+  });
+
+  it('not render endSessionEndpoint field when sloType is rancher', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.rancher,
+        };
+      },
+    });
+    await nextTick();
+    const endSessionEndpointField = wrapper.find('[data-testid="azuread-endSessionEndpoint"]');
+
+    expect(endSessionEndpointField.exists()).toBe(false);
+  });
+
+  it('render endSessionEndpoint field when sloType is all', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.all,
+        };
+      },
+    });
+    await nextTick();
+    const endSessionEndpointField = wrapper.find('[data-testid="azuread-endSessionEndpoint"]');
+
+    expect(endSessionEndpointField.exists()).toBe(true);
+  });
+
+  it('render endSessionEndpoint field when sloType is both', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.both,
+        };
+      },
+    });
+    await nextTick();
+    const endSessionEndpointField = wrapper.find('[data-testid="azuread-endSessionEndpoint"]');
+
+    expect(endSessionEndpointField.exists()).toBe(true);
+  });
+
+  it.each([
+    {
+      sloType: SLO_OPTION_VALUES.all, endSessionEndpoint: '', disabled: true
+    },
+    {
+      sloType: SLO_OPTION_VALUES.all, endSessionEndpoint: 'not-a-url', disabled: true
+    },
+    {
+      sloType: SLO_OPTION_VALUES.all, endSessionEndpoint: 'https://login.microsoftonline.com/tenant/oauth2/v2.0/logout', disabled: false
+    },
+    {
+      sloType: SLO_OPTION_VALUES.both, endSessionEndpoint: '', disabled: true
+    },
+    {
+      sloType: SLO_OPTION_VALUES.both, endSessionEndpoint: 'https://login.microsoftonline.com/tenant/oauth2/v2.0/logout', disabled: false
+    },
+  ])('has save button disabled=$disabled when sloType=$sloType and endSessionEndpoint=$endSessionEndpoint', async(testCase) => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({
+        logoutAllSupported: true,
+        tenantId:           validTenantId,
+        applicationId:      validApplicationId,
+        applicationSecret:  validAppSecret,
+        endSessionEndpoint: testCase.endSessionEndpoint,
+      }),
+      data() {
+        return {
+          isEnabling: true,
+          editConfig: false,
+          model:      {
+            ...mockModel,
+            logoutAllSupported: true,
+            tenantId:           validTenantId,
+            applicationId:      validApplicationId,
+            applicationSecret:  validAppSecret,
+            graphEndpoint:      validGraphEndpoint,
+            tokenEndpoint:      validTokenEndpoint,
+            authEndpoint:       validAuthEndpoint,
+            endSessionEndpoint: testCase.endSessionEndpoint,
+          },
+          sloType:        testCase.sloType,
+          serverSetting:  null,
+          errors:         [],
+          originalModel:  null,
+          principals:     [],
+          authConfigName: 'azuread',
+        };
+      },
+    });
+    await nextTick();
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+    expect(saveButton.disabled).toBe(testCase.disabled);
+  });
+
+  it('sets logoutAllEnabled=false and logoutAllForced=false when sloType changes to rancher', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.all,
+        };
+      },
+    });
+    await nextTick();
+    wrapper.vm.sloType = SLO_OPTION_VALUES.rancher;
+    await nextTick();
+
+    expect(wrapper.vm.model.logoutAllEnabled).toBe(false);
+    expect(wrapper.vm.model.logoutAllForced).toBe(false);
+    expect(wrapper.vm.model.endSessionEndpoint).toBe('');
+  });
+
+  it('sets logoutAllEnabled=true and logoutAllForced=true when sloType changes to all', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.rancher,
+        };
+      },
+    });
+    await nextTick();
+    wrapper.vm.sloType = SLO_OPTION_VALUES.all;
+    await nextTick();
+
+    expect(wrapper.vm.model.logoutAllEnabled).toBe(true);
+    expect(wrapper.vm.model.logoutAllForced).toBe(true);
+  });
+
+  it('sets logoutAllEnabled=true and logoutAllForced=false when sloType changes to both', async() => {
+    wrapper = mount(AzureAD, {
+      ...requiredSetup({ logoutAllSupported: true }),
+      data() {
+        return {
+          ...requiredSetup({ logoutAllSupported: true }).data(),
+          sloType: SLO_OPTION_VALUES.rancher,
+        };
+      },
+    });
+    await nextTick();
+    wrapper.vm.sloType = SLO_OPTION_VALUES.both;
+    await nextTick();
+
+    expect(wrapper.vm.model.logoutAllEnabled).toBe(true);
+    expect(wrapper.vm.model.logoutAllForced).toBe(false);
+  });
+});

package/edit/auth/__tests__/oidc.test.ts

@@ -297,5 +297,59 @@ describe('oidc.vue', () => {
       expect(groupsClaim.exists()).toBe(false);
       expect(emailClaim.exists()).toBe(false);
     });
+
+    describe('clientAuthenticatedSearch checkbox', () => {
+      it('is not rendered for genericoidc', async() => {
+        const checkbox = wrapper.find('[data-testid="input-client-authenticated-group-search"]');
+
+        expect(checkbox.exists()).toBe(false);
+      });
+
+      it('is not rendered for cognito', async() => {
+        await wrapper.setData({ model: { ...mockModel, id: 'cognito' } });
+
+        const checkbox = wrapper.find('[data-testid="input-client-authenticated-group-search"]');
+
+        expect(checkbox.exists()).toBe(false);
+      });
+
+      it('is rendered for keycloakoidc', async() => {
+        await wrapper.setData({ model: { ...mockModel, id: 'keycloakoidc' } });
+
+        const checkbox = wrapper.find('[data-testid="input-client-authenticated-group-search"]');
+
+        expect(checkbox.exists()).toBe(true);
+      });
+
+      it('defaults to falsy when not set on keycloakoidc', async() => {
+        await wrapper.setData({ model: { ...mockModel, id: 'keycloakoidc' } });
+
+        expect(wrapper.vm.model.clientAuthenticatedSearch).toBeFalsy();
+      });
+
+      it('updates model when checkbox is clicked', async() => {
+        await wrapper.setData({
+          model: {
+            ...mockModel, id: 'keycloakoidc', clientAuthenticatedSearch: false
+          }
+        });
+
+        const checkbox = wrapper.getComponent('[data-testid="input-client-authenticated-group-search"]');
+
+        await checkbox.find('[role="checkbox"]').trigger('click');
+
+        expect(wrapper.vm.model.clientAuthenticatedSearch).toBe(true);
+      });
+
+      it('reflects a pre-existing true value from the model', async() => {
+        await wrapper.setData({
+          model: {
+            ...mockModel, id: 'keycloakoidc', clientAuthenticatedSearch: true
+          }
+        });
+
+        expect(wrapper.vm.model.clientAuthenticatedSearch).toBe(true);
+      });
+    });
   });
 });

package/edit/auth/azuread.vue

@@ -11,7 +11,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
-import AuthConfig from '@shell/mixins/auth-config';
+import AuthConfig, { SLO_OPTION_VALUES } from '@shell/mixins/auth-config';
 import { AZURE_MIGRATED } from '@shell/config/labels-annotations';
 import { get } from '@shell/utils/object';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
@@ -76,6 +76,8 @@ export default {
     if ( this.value?.graphEndpoint ) {
       this.setInitialEndpoint(this.value.graphEndpoint);
     }
+
+    await this.mixinFetch();
   },
 
   data() {
@@ -83,6 +85,7 @@ export default {
       isGroupMembershipFilterEnabled: !!this.value.groupMembershipFilter,
       endpoint:                       'standard',
       oldEndpoint:                    false,
+      SLO_OPTION_VALUES,
 
       // Storing the applicationSecret is necessary because norman doesn't support returning secrets and when we
       // override the steve authconfig with a norman config the applicationSecret is lost
@@ -95,6 +98,7 @@ export default {
         { path: 'graphEndpoint', rules: ['graphEndpointRequired', 'graphEndpointMustBeURL'] },
         { path: 'tokenEndpoint', rules: ['tokenEndpointRequired', 'tokenEndpointMustBeURL'] },
         { path: 'authEndpoint', rules: ['authEndpointRequired', 'authEndpointMustBeURL'] },
+        { path: 'endSessionEndpoint', rules: ['endSessionEndpointRequiredAndValid'] },
       ]
     };
   },
@@ -103,17 +107,18 @@ export default {
     // Cannot pass this.model as a rootObject because it is undefined at that point, so had to use a workaround
     fvExtraRules() {
       return {
-        tenantIdRequired:          this.modelFieldRequired('tenantId', 'authConfig.azuread.tenantId.label'),
-        applicationIdRequired:     this.modelFieldRequired('applicationId', 'authConfig.azuread.applicationId.label'),
-        applicationSecretRequired: this.applicationSecretRequired(),
-        endpointRequired:          this.modelFieldRequired('endpoint', 'authConfig.azuread.endpoint.label'),
-        endpointMustBeURL:         this.modelFieldURL('endpoint'),
-        graphEndpointRequired:     this.modelFieldRequired('graphEndpoint', 'authConfig.azuread.graphEndpoint.label'),
-        graphEndpointMustBeURL:    this.modelFieldURL('graphEndpoint'),
-        tokenEndpointRequired:     this.modelFieldRequired('tokenEndpoint', 'authConfig.azuread.tokenEndpoint.label'),
-        tokenEndpointMustBeURL:    this.modelFieldURL('tokenEndpoint'),
-        authEndpointRequired:      this.modelFieldRequired('authEndpoint', 'authConfig.azuread.authEndpoint.label'),
-        authEndpointMustBeURL:     this.modelFieldURL('authEndpoint')
+        tenantIdRequired:                   this.modelFieldRequired('tenantId', 'authConfig.azuread.tenantId.label'),
+        applicationIdRequired:              this.modelFieldRequired('applicationId', 'authConfig.azuread.applicationId.label'),
+        applicationSecretRequired:          this.applicationSecretRequired(),
+        endpointRequired:                   this.modelFieldRequired('endpoint', 'authConfig.azuread.endpoint.label'),
+        endpointMustBeURL:                  this.modelFieldURL('endpoint'),
+        graphEndpointRequired:              this.modelFieldRequired('graphEndpoint', 'authConfig.azuread.graphEndpoint.label'),
+        graphEndpointMustBeURL:             this.modelFieldURL('graphEndpoint'),
+        tokenEndpointRequired:              this.modelFieldRequired('tokenEndpoint', 'authConfig.azuread.tokenEndpoint.label'),
+        tokenEndpointMustBeURL:             this.modelFieldURL('tokenEndpoint'),
+        authEndpointRequired:               this.modelFieldRequired('authEndpoint', 'authConfig.azuread.authEndpoint.label'),
+        authEndpointMustBeURL:              this.modelFieldURL('authEndpoint'),
+        endSessionEndpointRequiredAndValid: this.endSessionEndpointRule(),
       };
     },
 
@@ -144,7 +149,7 @@ export default {
         config: {
           ...this.model,
           enabled:     true,
-          description: 'Enable AzureAD'
+          description: 'Enable Microsoft Entra ID'
         }
       };
     },
@@ -165,7 +170,29 @@ export default {
     },
     editMemberConfig() {
       return this.model.enabled && !this.isEnabling && !this.editConfig;
-    }
+    },
+
+    isLogoutAllSupported() {
+      return this.model?.logoutAllSupported;
+    },
+
+    sloOptions() {
+      return [
+        { value: SLO_OPTION_VALUES.rancher, label: this.t('authConfig.slo.sloOptions.onlyRancher', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.all, label: this.t('authConfig.slo.sloOptions.logoutAll', { name: this.model?.nameDisplay }) },
+        { value: SLO_OPTION_VALUES.both, label: this.t('authConfig.slo.sloOptions.choose') },
+      ];
+    },
+
+    sloTypeText() {
+      const sloOptionSelected = this.sloOptions.find((item) => item.value === this.sloType);
+
+      return sloOptionSelected?.label || '';
+    },
+
+    sloEndSessionEndpointUiEnabled() {
+      return this.sloType === SLO_OPTION_VALUES.all || this.sloType === SLO_OPTION_VALUES.both;
+    },
   },
 
   watch: {
@@ -179,6 +206,25 @@ export default {
       }
     },
 
+    // sloType is defined on shell/mixins/auth-config.js
+    sloType(neu) {
+      switch (neu) {
+      case SLO_OPTION_VALUES.rancher:
+        this.model.logoutAllEnabled = false;
+        this.model.logoutAllForced = false;
+        this.model.endSessionEndpoint = '';
+        break;
+      case SLO_OPTION_VALUES.all:
+        this.model.logoutAllEnabled = true;
+        this.model.logoutAllForced = true;
+        break;
+      case SLO_OPTION_VALUES.both:
+        this.model.logoutAllEnabled = true;
+        this.model.logoutAllForced = false;
+        break;
+      }
+    },
+
     model: {
       deep: true,
       handler() {
@@ -294,7 +340,21 @@ export default {
 
         return rule(this.model[path]);
       };
-    }
+    },
+
+    endSessionEndpointRule() {
+      return () => {
+        if (!this.isLogoutAllSupported || !this.sloEndSessionEndpointUiEnabled) {
+          return undefined;
+        }
+        if (!this.model.endSessionEndpoint) {
+          return this.t('validation.required', { key: this.t('authConfig.azuread.endSessionEndpoint.title') });
+        }
+        const rule = formRulesGenerator(this.$store.getters['i18n/t'], {}).url;
+
+        return rule(this.model.endSessionEndpoint);
+      };
+    },
   }
 };
 </script>
@@ -348,6 +408,14 @@ export default {
               <td>{{ t(`authConfig.azuread.authEndpoint.label`) }}:</td>
               <td>{{ model.authEndpoint }}</td>
             </tr>
+            <tr v-if="isLogoutAllSupported">
+              <td>{{ t('authConfig.slo.sloTitle') }}:</td>
+              <td>{{ sloTypeText }}</td>
+            </tr>
+            <tr v-if="isLogoutAllSupported && sloEndSessionEndpointUiEnabled">
+              <td>{{ t('authConfig.azuread.endSessionEndpoint.title') }}:</td>
+              <td>{{ model.endSessionEndpoint }}</td>
+            </tr>
           </template>
           <template
             v-if="needsUpdate"
@@ -521,6 +589,46 @@ export default {
             </div>
           </div>
         </div>
+
+        <!-- SLO logout -->
+        <div
+          v-if="isLogoutAllSupported"
+          class="mb-20"
+        >
+          <div class="row">
+            <div class="col span-12">
+              <h3>{{ t('authConfig.slo.sloTitle') }}</h3>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-4">
+              <RadioGroup
+                v-model:value="sloType"
+                :mode="mode"
+                :options="sloOptions"
+                :disabled="!model.logoutAllSupported"
+                name="sloTypeRadio"
+                data-testid="azuread-sloType"
+              />
+            </div>
+          </div>
+          <div
+            v-if="sloEndSessionEndpointUiEnabled"
+            class="row mt-20"
+          >
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.endSessionEndpoint"
+                :tooltip="t('authConfig.azuread.endSessionEndpoint.tooltip', { tenantId: `${ tenantId || 'tenant-id' }` }, true)"
+                :label="t('authConfig.azuread.endSessionEndpoint.title')"
+                :mode="mode"
+                :rules="fvGetAndReportPathRules('endSessionEndpoint')"
+                :required="true"
+                data-testid="azuread-endSessionEndpoint"
+              />
+            </div>
+          </div>
+        </div>
       </template>
     </CruResource>
   </div>

package/edit/auth/oidc.vue

@@ -15,7 +15,7 @@ import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
 import { BASE_SCOPES } from '@shell/store/auth';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
-import isUrl from 'is-url';
+import { isValidUrl } from '@shell/utils/validators/setting';
 
 const PKCE_S256 = 'S256';
 
@@ -105,7 +105,7 @@ export default {
       }
 
       // make sure that if SLO options are enabled on radio group, field "endSessionEndpoint" is required
-      if (this.isLogoutAllSupported && this.sloEndSessionEndpointUiEnabled && (!this.model.endSessionEndpoint || !isUrl(this.model.endSessionEndpoint))) {
+      if (this.isLogoutAllSupported && this.sloEndSessionEndpointUiEnabled && (!this.model.endSessionEndpoint || !isValidUrl(this.model.endSessionEndpoint))) {
         return false;
       }
 
@@ -452,6 +452,14 @@ export default {
               :tooltip="t('authConfig.oidc.groupSearch.tooltip')"
               :mode="mode"
             />
+            <Checkbox
+              v-if="isKeycloak"
+              v-model:value="model.clientAuthenticatedSearch"
+              data-testid="input-client-authenticated-group-search"
+              :label="t('authConfig.oidc.clientAuthenticatedSearch.label')"
+              :tooltip="t('authConfig.oidc.clientAuthenticatedSearch.tooltip')"
+              :mode="mode"
+            />
             <Checkbox
               v-if="supportsCustomClaims"
               v-model:value="addCustomClaims"

package/edit/kontainerDriver.vue

@@ -21,7 +21,6 @@ export default {
     return {
       fvFormRuleSets: [
         { path: 'url', rules: ['required', 'url'] },
-        { path: 'uiUrl', rules: ['url'] },
         { path: 'checksum', rules: ['alphanumeric'] },
         { path: 'whitelistDomains', rules: ['wildcardHostname'] }
       ]
@@ -61,7 +60,7 @@ export default {
     <CreateDriver
       :mode="mode"
       :value="value"
-      :rules="{url:fvGetAndReportPathRules('url'), uiUrl:fvGetAndReportPathRules('uiUrl'), checksum:fvGetAndReportPathRules('checksum'), whitelistDomains:fvGetAndReportPathRules('whitelistDomains')}"
+      :rules="{url:fvGetAndReportPathRules('url'), checksum:fvGetAndReportPathRules('checksum'), whitelistDomains:fvGetAndReportPathRules('whitelistDomains')}"
     />
   </CruResource>
 </template>

package/edit/networking.k8s.io.ingress/DefaultBackend.vue

@@ -43,7 +43,9 @@ export default {
     const backend = get(this.value.spec, this.value.defaultBackendPath);
 
     this.serviceName = get(backend, this.value.serviceNamePath) || '';
-    this.servicePort = get(backend, this.value.servicePortPath) || '';
+    this.servicePort = get(backend, this.value.servicePortPath) ||
+      get(backend, this.value.servicePortNamePath) ||
+      '';
   },
   computed: {
     isView() {
@@ -75,10 +77,14 @@ export default {
   },
   methods: {
     update() {
-      const backend = get(this.value.spec, this.value.defaultBackendPath) || {};
+      // Fresh object so the old port path (name vs number) doesn't linger.
+      const backend = {};
+      const parsed = Number.parseInt(this.servicePort);
+      const servicePort = Number.isNaN(parsed) ? this.servicePort : parsed;
+      const portPath = typeof servicePort === 'number' ? this.value.servicePortPath : this.value.servicePortNamePath;
 
       set(backend, this.value.serviceNamePath, this.serviceName);
-      set(backend, this.value.servicePortPath, this.servicePort);
+      set(backend, portPath, servicePort);
       set(this.value.spec, this.value.defaultBackendPath, backend);
 
       this.$emit('update:value', this.value);
@@ -119,10 +125,12 @@ export default {
         class="col span-3"
         :style="{'margin-right': '0px'}"
       >
+        <!-- :required drives the asterisk; portRequired doesn't have .name === 'required' -->
         <LabeledInput
           v-if="portOptions.length === 0 || isView"
-          v-model:value.number="servicePort"
+          v-model:value="servicePort"
           :mode="mode"
+          :required="true"
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"
           :rules="rules.port"
@@ -132,6 +140,7 @@ export default {
           v-else
           v-model:value="servicePort"
           :mode="mode"
+          :required="true"
           :options="portOptions"
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"

package/edit/networking.k8s.io.ingress/RulePath.vue

@@ -79,20 +79,24 @@ export default {
     set(this.value, 'path', this.value.path || '');
     set(this.value, 'pathType', this.value.pathType || this.pathTypes[0]);
     set(this.value.backend, this.ingress.serviceNamePath, get(this.value.backend, this.ingress.serviceNamePath) || '');
-    set(this.value.backend, this.ingress.servicePortPath, get(this.value.backend, this.ingress.servicePortPath) || '');
 
     this.serviceName = get(this.value.backend, this.ingress.serviceNamePath);
-    this.servicePort = get(this.value.backend, this.ingress.servicePortPath);
+    this.servicePort = get(this.value.backend, this.ingress.servicePortPath) ||
+      get(this.value.backend, this.ingress.servicePortNamePath) ||
+      '';
   },
   methods: {
     update() {
-      const servicePort = Number.parseInt(this.servicePort) || this.servicePort;
+      const parsed = Number.parseInt(this.servicePort);
+      const servicePort = Number.isNaN(parsed) ? this.servicePort : parsed;
       const serviceName = this.serviceName.label || this.serviceName;
       const out = {
         id: this.value.id, backend: {}, path: this.path, pathType: this.pathType
       };
 
-      set(out.backend, this.ingress.servicePortPath, servicePort);
+      const portPath = typeof servicePort === 'number' ? this.ingress.servicePortPath : this.ingress.servicePortNamePath;
+
+      set(out.backend, portPath, servicePort);
       set(out.backend, this.ingress.serviceNamePath, serviceName);
 
       this.$emit('update:value', out);