@rancher/shell 3.0.3 → 3.0.5-rc.1

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

@@ -32,151 +32,194 @@ const mockModel = {
 };
 
 describe('oidc.vue', () => {
-  let wrapper: VueWrapper<any, any>;
-  const requiredSetup = () => ({
-    data() {
-      return {
-        isEnabling:     false,
-        editConfig:     false,
-        model:          { ...mockModel },
-        serverSetting:  null,
-        errors:         [],
-        originalModel:  null,
-        principals:     [],
-        authConfigName: 'oidc',
-      } as any; // any is necessary as in pre-existing tests we are including inherited mixins values
-    },
-    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(),
+  describe('given default valid values', () => {
+    let wrapper: VueWrapper<any, any>;
+    const requiredSetup = () => ({
+      data() {
+        return {
+          isEnabling:     false,
+          editConfig:     false,
+          model:          { ...mockModel },
+          serverSetting:  null,
+          errors:         [],
+          originalModel:  null,
+          principals:     [],
+          authConfigName: 'oidc',
+        } as any; // any is necessary as in pre-existing tests we are including inherited mixins values
+      },
+      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()
           },
-          dispatch: jest.fn()
+          $route:  { query: { AS: '' }, params: { id: 'oicd' } },
+          $router: { applyQuery: jest.fn() },
         },
-        $route:  { query: { AS: '' }, params: { id: 'oicd' } },
-        $router: { applyQuery: jest.fn() },
       },
-    },
-    props: {
-      value: { applicationSecret: '' },
-      mode:  _EDIT,
-    },
-  });
+      props: {
+        value: { applicationSecret: '' },
+        mode:  _EDIT,
+      },
+    });
 
-  beforeEach(() => {
-    wrapper = mount(oidc, { ...requiredSetup() });
-  });
-  afterEach(() => {
-    wrapper.unmount();
-  });
+    beforeEach(() => {
+      wrapper = mount(oidc, { ...requiredSetup() });
+    });
 
-  it('have "Create" button enabled when provider is enabled and not editing config', async() => {
-    wrapper.setData({ model: { enabled: true }, editConfig: false });
-    await nextTick();
+    afterEach(() => {
+      wrapper.unmount();
+    });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    describe('have "Create" button disabled', () => {
+      it('given missing Auth endpoint URL', () => {
+        wrapper.vm.model.authEndpoint = '';
+        wrapper.vm.model.scopes = 'openid profile email'; // set scope to be sure
+        wrapper.vm.oidcScope = ['openid', 'profile', 'email']; // TODO #13457: this is duplicated due wrong format of scopes
 
-    expect(saveButton.disabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button disabled when provider is disabled and editing config before fields are filled in', async() => {
-    wrapper.setData({ model: {}, editConfig: true });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+      it('given missing required basic scopes', () => {
+        wrapper.vm.model.authEndpoint = 'whatever'; // set auth endpoint to be sure
+        wrapper.vm.model.scopes = 'something else'; // set wrong scope
+        wrapper.vm.oidcScope = ['something', 'else']; // TODO #13457: this is duplicated due wrong format of scopes
 
-    expect(saveButton.disabled).toBe(true);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button disabled when provider is disabled and editing config after required fields and scope is missing openid', async() => {
-    wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm } });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+      it('when provider is disabled and editing config before fields are filled in', async() => {
+        wrapper.setData({ model: {}, editConfig: true });
+        await nextTick();
 
-    expect(saveButton.disabled).toBe(true);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button enabled when customEndpoint is disabled and required fields are filled in', async() => {
-    wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm }, oidcScope: validScope.split(' ') });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+      it('when provider is disabled and editing config after required fields and scope is missing openid', async() => {
+        wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm } });
+        await nextTick();
 
-    expect(saveButton.disabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('have "Create" button enabled when customEndpoint is enabled and required fields are filled in', async() => {
-    wrapper.setData({ customEndpoint: { value: true }, oidcScope: validScope.split(' ') });
-    await nextTick();
+        expect(saveButton.disabled).toBe(true);
+      });
+    });
 
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+    describe('have "Create" button enabled', () => {
+      it('when customEndpoint is disabled and required fields are filled in', async() => {
+        wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm }, oidcScope: validScope.split(' ') });
+        await nextTick();
 
-    expect(saveButton.disabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('updates issuer endpoint when oidcUrls.url and oidcUrls.realm changes', async() => {
-    wrapper.setData({ oidcUrls: { url: validUrl } });
-    await nextTick();
+        expect(saveButton.disabled).toBe(false);
+      });
 
-    expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/`);
+      it('when customEndpoint is enabled and required fields are filled in', async() => {
+        wrapper.setData({ customEndpoint: { value: true }, oidcScope: validScope.split(' ') });
+        await nextTick();
 
-    wrapper.setData({ oidcUrls: { realm: validRealm } });
-    await nextTick();
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-    expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/${ validRealm }`);
-  });
+        expect(saveButton.disabled).toBe(false);
+      });
 
-  it('`groupSearchEnabled` defaults to false', async() => {
-    const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+      it('when provider is enabled and not editing config', async() => {
+        wrapper.setData({ model: { enabled: true }, editConfig: false });
+        await nextTick();
 
-    expect(groupSearchCheckbox.isVisible()).toBe(true);
-    expect(wrapper.vm.model.groupSearchEnabled).toBe(false);
-  });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
-  it('`groupSearchEnabled` updates when checkbox is clicked', async() => {
-    const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+        expect(saveButton.disabled).toBe(false);
+      });
+    });
 
-    await groupSearchCheckbox.find('[role="checkbox"]').trigger('click');
+    it('updates issuer endpoint when oidcUrls.url and oidcUrls.realm changes', async() => {
+      wrapper.setData({ oidcUrls: { url: validUrl } });
+      await nextTick();
 
-    expect(groupSearchCheckbox.isVisible()).toBe(true);
-    expect(wrapper.vm.model.groupSearchEnabled).toBe(true);
-  });
+      expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/`);
 
-  it('changing URL should update issuer and auth-endpoint if Keycloak', async() => {
-    wrapper.vm.model.id = 'keycloakoidc';
-    const newUrl = 'whatever';
+      wrapper.setData({ oidcUrls: { realm: validRealm } });
+      await nextTick();
 
-    await wrapper.find(`[data-testid="oidc-url"]`).setValue(newUrl);
-    await wrapper.vm.$nextTick();
+      expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/${ validRealm }`);
+    });
 
-    const issuer = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
-    const endpoint = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+    it('`groupSearchEnabled` defaults to false', async() => {
+      const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
 
-    expect(issuer).toBe(`${ newUrl }/realms/`);
-    expect(endpoint).toBe(`${ newUrl }/realms//protocol/openid-connect/auth`);
-  });
+      expect(groupSearchCheckbox.isVisible()).toBe(true);
+      expect(wrapper.vm.model.groupSearchEnabled).toBe(false);
+    });
+
+    it('`groupSearchEnabled` updates when checkbox is clicked', async() => {
+      const groupSearchCheckbox = wrapper.getComponent('[data-testid="input-group-search"]');
+
+      await groupSearchCheckbox.find('[role="checkbox"]').trigger('click');
+
+      expect(groupSearchCheckbox.isVisible()).toBe(true);
+      expect(wrapper.vm.model.groupSearchEnabled).toBe(true);
+    });
+
+    it('changing URL should update issuer and auth-endpoint if Keycloak', async() => {
+      wrapper.vm.model.id = 'keycloakoidc';
+      const newUrl = 'whatever';
+
+      await wrapper.find(`[data-testid="oidc-url"]`).setValue(newUrl);
+      await wrapper.vm.$nextTick();
+
+      const issuerValue = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+      const endpointValue = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+
+      expect(issuerValue).toBe(`${ newUrl }/realms/`);
+      expect(endpointValue).toBe(`${ newUrl }/realms//protocol/openid-connect/auth`);
+    });
+
+    it('changing realm should update issuer and auth-endpoint if Keycloak', async() => {
+      const newRealm = 'newRealm';
+      const oldUrl = 'oldUrl';
+
+      wrapper.vm.model.id = 'keycloakoidc';
+      wrapper.vm.oidcUrls.url = oldUrl;
+
+      await wrapper.find(`[data-testid="oidc-realm"]`).setValue(newRealm);
+      await wrapper.vm.$nextTick();
 
-  it('changing realm should update issuer and auth-endpoint if Keycloak', async() => {
-    const newRealm = 'newRealm';
-    const oldUrl = 'oldUrl';
+      const issuerValue = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+      const endpointValue = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
 
-    wrapper.vm.model.id = 'keycloakoidc';
-    wrapper.vm.oidcUrls.url = oldUrl;
+      expect(issuerValue).toBe(`${ oldUrl }/realms/${ newRealm }`);
+      expect(endpointValue).toBe(`${ oldUrl }/realms/${ newRealm }/protocol/openid-connect/auth`);
+    });
 
-    await wrapper.find(`[data-testid="oidc-realm"]`).setValue(newRealm);
-    await wrapper.vm.$nextTick();
+    it('clear URL should clear issuer and auth-endpoint if Keycloak', async() => {
+      wrapper.vm.model.id = 'keycloakoidc';
+      const newUrl = 'whatever';
+      const urlInput = wrapper.find(`[data-testid="oidc-url"]`);
 
-    const issuer = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
-    const endpoint = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+      await urlInput.setValue(newUrl);
+      await wrapper.vm.$nextTick();
+      await urlInput.setValue('');
+      await wrapper.vm.$nextTick();
+      const issuer = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+      const endpoint = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
 
-    expect(issuer).toBe(`${ oldUrl }/realms/${ newRealm }`);
-    expect(endpoint).toBe(`${ oldUrl }/realms/${ newRealm }/protocol/openid-connect/auth`);
+      expect(issuer).toBe('');
+      expect(endpoint).toBe('');
+    });
   });
 });

package/edit/auth/azuread.vue

@@ -388,6 +388,7 @@ export default {
           <label class="reply-url">{{ t('authConfig.azuread.reply.label') }} </label>
           <CopyToClipboardText
             :plain="true"
+            :aria-label="t('authConfig.azuread.reply.ariaLabel')"
             :text="replyUrl"
           />
         </InfoBox>

package/edit/auth/googleoauth.vue

@@ -143,12 +143,14 @@ export default {
               <b>{{ t('authConfig.googleoauth.steps.1.body.2', {}, true) }}</b> {{ t('authConfig.googleoauth.steps.1.topPrivateDomain', {}, true) }} <CopyToClipboardText
                 :plain="true"
                 :text="tArgs.hostname"
+                :aria-label="t('authConfig.googleoauth.steps.1.ariaLabel.hostname')"
               />
             </li>
             <li>
               <b>{{ t('authConfig.googleoauth.steps.1.body.3', {}, true) }}</b> <CopyToClipboardText
                 :plain="true"
                 :text="serverUrl"
+                :aria-label="t('authConfig.googleoauth.steps.1.ariaLabel.serverUrl')"
               />
             </li>
             <li>{{ t('authConfig.googleoauth.steps.1.body.4', {}, true) }} </li>
@@ -170,12 +172,14 @@ export default {
                   <b>{{ t('authConfig.googleoauth.steps.2.body.2', {}, true) }}</b> <CopyToClipboardText
                     :plain="true"
                     :text="serverUrl"
+                    :aria-label="t('authConfig.googleoauth.steps.1.ariaLabel.serverUrl')"
                   />
                 </li>
                 <li>
                   <b>{{ t('authConfig.googleoauth.steps.2.body.3', {}, true) }}</b> <CopyToClipboardText
                     :plain="true"
                     :text="serverUrl+'/verify-auth'"
+                    :aria-label="t('authConfig.googleoauth.steps.2.ariaLabel.serverUrlVerify')"
                   />
                 </li>
                 <li>{{ t('authConfig.googleoauth.steps.2.body.4', {}, true) }} </li>

package/edit/auth/oidc.vue

@@ -12,6 +12,7 @@ import ArrayList from '@shell/components/form/ArrayList';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
+import { BASE_SCOPES } from '@shell/store/auth';
 
 export default {
   components: {
@@ -50,6 +51,7 @@ export default {
         tokenEndpoint:    null,
         userInfoEndpoint: null,
       },
+      // TODO #13457: this is duplicated due wrong format
       oidcScope: []
     };
   },
@@ -76,9 +78,10 @@ export default {
       }
 
       const { clientId, clientSecret } = this.model;
-      const isValidScope = this.model.id === 'keycloakoidc' || this.oidcScope?.includes('openid');
+      const isMissingAuthEndpoint = (this.requiresAuthEndpoint && !this.model.authEndpoint);
+      const isMissingScopes = !this.requiredScopes.every((scope) => this.oidcScope.includes(scope));
 
-      if ( !isValidScope ) {
+      if (isMissingAuthEndpoint || isMissingScopes) {
         return false;
       }
 
@@ -91,6 +94,19 @@ export default {
 
         return !!(clientId && clientSecret && rancherUrl && issuer);
       }
+    },
+
+    requiresAuthEndpoint() {
+      return ['genericoidc', 'keycloakoidc'].includes(this.model.id);
+    },
+
+    /**
+     * TODO #13457: Refactor scopes to be an array of terms
+     * Return valid scopes
+     * The scopes for given auth provider (model.id) have format of ['scope1 scope2 scope3']
+     */
+    requiredScopes() {
+      return this.model.id ? (BASE_SCOPES[this.model.id] || []) ? (BASE_SCOPES[this.model.id] || [])[0].split(' ') : [] : [];
     }
   },
 
@@ -104,6 +120,7 @@ export default {
     },
 
     'model.enabled'(neu) {
+      // TODO #13457: Refactor scopes to be an array of terms
       // Cover case where oidc gets disabled and we return to the edit screen with a reset model
       if (!neu) {
         this.oidcUrls = {
@@ -114,8 +131,10 @@ export default {
           userInfoEndpoint: null,
         };
         this.customEndpoint.value = false;
+        // TODO #13457: Refactor scopes to be an array of terms
         this.oidcScope = this.model?.scope?.split(' ');
       } else {
+        // TODO #13457: Refactor scopes to be an array of terms
         this.oidcScope = this.model?.scope?.split(' ');
       }
     },
@@ -130,10 +149,16 @@ export default {
 
   methods: {
     updateEndpoints() {
+      const isKeycloak = this.model.id === 'keycloakoidc';
+
       if (!this.oidcUrls.url) {
+        this.model.issuer = '';
+        if (isKeycloak) {
+          this.model.authEndpoint = '';
+        }
+
         return;
       }
-      const isKeycloak = this.model.id === 'keycloakoidc';
 
       const url = this.oidcUrls.url.replaceAll(' ', '');
       const realmsPath = 'realms';
@@ -201,6 +226,7 @@ export default {
 
         <h3>{{ t(`authConfig.oidc.${NAME}`) }}</h3>
 
+        <!-- Auth credentials -->
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
@@ -222,6 +248,7 @@ export default {
           </div>
         </div>
 
+        <!-- Key/Certificate -->
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
@@ -255,6 +282,7 @@ export default {
           </div>
         </div>
 
+        <!-- Allow group search -->
         <div class="row mb-20">
           <div class="col span-6">
             <Checkbox
@@ -267,6 +295,7 @@ export default {
           </div>
         </div>
 
+        <!-- Scopes -->
         <div class="row mb-20">
           <div class="col span-6">
             <ArrayList
@@ -280,6 +309,7 @@ export default {
           </div>
         </div>
 
+        <!-- Generated vs Specific Endpoints -->
         <div class="row mb-20">
           <div class="col span-6">
             <RadioGroup
@@ -297,6 +327,7 @@ export default {
           </div>
         </div>
 
+        <!-- Generated endpoints -->
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
@@ -320,6 +351,7 @@ export default {
           </div>
         </div>
 
+        <!-- Specific Endpoints -->
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
@@ -350,12 +382,13 @@ export default {
               :label="t(`authConfig.oidc.authEndpoint`)"
               :mode="mode"
               :disabled="!customEndpoint.value"
-              :required="model.id === 'keycloakoidc'"
+              :required="requiresAuthEndpoint"
               data-testid="oidc-auth-endpoint"
             />
           </div>
         </div>
 
+        <!-- Advanced section -->
         <AdvancedSection :mode="mode">
           <div class="row mb-20">
             <div class="col span-6">

package/edit/cloudcredential.vue

@@ -276,6 +276,7 @@ export default {
     <Loading v-if="$fetchState.pending" />
     <CruResource
       v-else
+      :done-params="$attrs['done-params'] /* Without this, changes to the validationPassed prop end up propagating all the way to the root of the app and force a re-render when the input becomes valid. I haven't found a reasonable explanation for why this happens. */"
       :mode="mode"
       :validation-passed="validationPassed"
       :selected-subtype="value._type"

package/edit/fleet.cattle.io.gitrepo.vue

@@ -659,6 +659,7 @@ export default {
         :initial-empty-row="false"
         :value-placeholder="t('fleet.gitRepo.paths.placeholder')"
         :add-label="t('fleet.gitRepo.paths.addLabel')"
+        :a11y-label="t('fleet.gitRepo.paths.ariaLabel')"
         :add-icon="'icon-plus'"
         :protip="t('fleet.gitRepo.paths.empty')"
       />

package/edit/logging.banzaicloud.io.output/__tests__/logging.banzaicloud.io.output.test.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import Banzai from '@shell/edit/logging.banzaicloud.io.output/index.vue';
+import { createStore } from 'vuex';
 
 const outputSchema = {
   id:    'logging.banzaicloud.io.output',
@@ -109,16 +110,26 @@ describe('view: logging.banzaicloud.io.output', () => {
     ['http://localhost:3100', []],
     ['not a proper URL', ['logging.loki.urlInvalid']],
   ])('should validate Loki URL on save', (url, expectation) => {
+    const store = createStore({
+      getters: {
+        namespaces:          () => () => ({}),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const wrapper = mount(Banzai, {
       data:  () => ({ selectedProvider: 'loki' }),
       props: {
         value: {
-          save: jest.fn(),
-          spec: { loki: { url } }
+          save:          jest.fn(),
+          setAnnotation: jest.fn(),
+          spec:          { loki: { url } },
+          metadata:      {},
         }
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $fetchState: { pending: false },
           $store:      {
             dispatch: jest.fn(),
@@ -149,16 +160,26 @@ describe('view: logging.banzaicloud.io.output', () => {
   });
 
   it('should load the default YAML data for output buffer config (from schema) in a CREATE scenario', async() => {
+    const store = createStore({
+      getters: {
+        namespaces:          () => () => ({}),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const wrapper = mount(Banzai, {
       data:  () => ({ selectedProvider: 'awsElasticsearch' }),
       props: {
         value: {
-          save: jest.fn(),
-          spec: {}
+          save:          jest.fn(),
+          setAnnotation: jest.fn(),
+          spec:          {},
+          metadata:      {},
         }
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $fetchState: { pending: false },
           $store:      {
             dispatch(arg: any) {
@@ -230,16 +251,26 @@ describe('view: logging.banzaicloud.io.output', () => {
   });
 
   it('should load current output buffer config in an EDIT scenario', async() => {
+    const store = createStore({
+      getters: {
+        namespaces:          () => () => ({}),
+        currentStore:        () => () => 'cluster',
+        'cluster/schemaFor': () => jest.fn()
+      }
+    });
     const wrapper = mount(Banzai, {
       data:  () => ({ selectedProvider: 'awsElasticsearch' }),
       props: {
         value: {
-          save: jest.fn(),
-          spec: { awsElasticsearch: { buffer: '#chunk_limit_records: int' } }
+          save:          jest.fn(),
+          setAnnotation: jest.fn(),
+          spec:          { awsElasticsearch: { buffer: '#chunk_limit_records: int' } },
+          metadata:      {}
         }
       },
       global: {
-        mocks: {
+        provide: { store },
+        mocks:   {
           $fetchState: { pending: false },
           $store:      {
             dispatch(arg: any) {

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

@@ -5,6 +5,7 @@ import { get, set, remove } from '@shell/utils/object';
 
 export default {
   components: { LabeledSelect },
+  emits:      ['update:value'],
   props:      {
     value: {
       type:    Object,
@@ -37,13 +38,16 @@ export default {
   },
   methods: {
     update(e) {
-      if (!e || e.label === this.t('generic.none')) {
+      if (!e || e === '' || e.label === this.t('generic.none')) {
         remove(this.value, 'spec.ingressClassName');
         this.ingressClassName = '';
+        this.$emit('update:value', this.value);
       } else {
         // when a user manually types an ingress class name, the event emitted has a 'label' but no 'value'
-        this.ingressClassName = e.value ? e.value : e.label;
+        this.ingressClassName = e.label || e;
         set(this.value, 'spec.ingressClassName', this.ingressClassName);
+
+        this.$emit('update:value', this.value);
       }
     }
   }
@@ -59,7 +63,7 @@ export default {
       :label="t('ingress.ingressClass.label')"
       :options="ingressClassOptions"
       option-label="label"
-      @selecting="update"
+      @update:value="update"
     />
   </div>
 </template>