@rancher/shell 2.0.1 → 3.0.0-rc.2

package/edit/__tests__/service.test.ts

@@ -1,8 +1,20 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
-import { _CLONE } from '@shell/config/query-params';
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import { _CLONE, _CREATE } from '@shell/config/query-params';
 import ServicePage from '@shell/edit/service.vue';
 
 const createEditViewMock = {
+  props: {
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+    realMode: {
+      type:    String,
+      default: _CREATE
+    },
+  },
   data() {
     return { errors: [] };
   },
@@ -24,33 +36,36 @@ const createEditViewMock = {
     doneParams: () => ({}),
   },
   methods: {
-    done:         jest.fn(),
-    conflict:     jest.fn(() => Promise.resolve([])),
-    save:         jest.fn(() => Promise.resolve()),
-    actuallySave: jest.fn(() => Promise.resolve()),
-    setErrors:    jest.fn()
+    done:               jest.fn(),
+    conflict:           jest.fn(() => Promise.resolve([])),
+    save:               jest.fn(() => Promise.resolve()),
+    actuallySave:       jest.fn(() => Promise.resolve()),
+    setErrors:          jest.fn(),
+    registerBeforeHook: jest.fn(),
   }
 };
 
 const formValidationMock = {};
 
 describe('service edit', () => {
-  let wrapper: Wrapper<InstanceType<typeof ServicePage>>;
+  let wrapper: VueWrapper<InstanceType<typeof ServicePage>>;
 
   const createComponent = (propsData: any) => {
     wrapper = shallowMount(ServicePage,
       {
-        propsData,
-        mixins: [createEditViewMock, formValidationMock],
-        mocks:  {
-          $store: {
-            getters: {
-              'management/all': jest.fn(),
-              'i18n/t':         jest.fn()
+        props:    propsData,
+        mixins:   [createEditViewMock, formValidationMock],
+        computed: { provisioningCluster: jest.fn() },
+        global:   {
+          mocks: {
+            $store: {
+              getters: {
+                'management/all': jest.fn(),
+                'i18n/t':         jest.fn()
+              }
             }
-          }
+          },
         },
-        computed: { provisioningCluster: jest.fn() },
       }
     );
   };

package/edit/__tests__/ui.cattle.io.navlink.test.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
 import { mount } from '@vue/test-utils';
 import Navlink from '@shell/edit/ui.cattle.io.navlink.vue';
@@ -11,20 +12,22 @@ describe('view: ui.cattle.io.navlink should', () => {
 
   const requiredSetup = () => ({
     // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
-    mocks: {
-      $store: {
-        dispatch: jest.fn(),
-        getters:  {
-          currentStore:              () => 'current_store',
-          'current_store/schemaFor': jest.fn(),
-          'current_store/all':       jest.fn(),
-          'i18n/t':                  (val) => val,
-          'i18n/exists':             jest.fn(),
-          'store/customisation/':    jest.fn()
-        }
+    global: {
+      mocks: {
+        $store: {
+          dispatch: jest.fn(),
+          getters:  {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  (val) => val,
+            'i18n/exists':             jest.fn(),
+            'store/customisation/':    jest.fn()
+          }
+        },
+        $route:  { query: { AS: '' } },
+        $router: { applyQuery: jest.fn() },
       },
-      $route:  { query: { AS: '' } },
-      $router: { applyQuery: jest.fn() },
     },
     propsData: {
       metadata:   { namespace: 'test' },
@@ -41,7 +44,7 @@ describe('view: ui.cattle.io.navlink should', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it('have "Create" button disabled before fields are filled in', () => {
@@ -55,21 +58,20 @@ describe('view: ui.cattle.io.navlink should', () => {
 
     nameField.setValue(name);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(saveButton.disabled).toBe(true);
   });
   it('have "Create" button enabled when Link type is URL and all required fields are filled in', async() => {
-    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
     const nameField = wrapper.find('[data-testid="Navlink-name-field"]').find('input');
     const urlField = wrapper.find('[data-testid="Navlink-url-field"]');
 
     nameField.setValue(name);
     urlField.setValue(url);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
-    expect(saveButton.disabled).toBe(false);
+    expect(CruResource.computed.canSave()).toBe(true);
   });
 
   it('have "Create" button disabled when Link type is Service and and only name is filled in', async() => {
@@ -81,7 +83,7 @@ describe('view: ui.cattle.io.navlink should', () => {
 
     nameField.setValue(name);
     serviceBttn.trigger('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(saveButton.disabled).toBe(true);
   });
@@ -94,7 +96,7 @@ describe('view: ui.cattle.io.navlink should', () => {
 
     nameField.setValue(name);
     serviceBttn.trigger('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const schemeField = wrapper.find('[data-testid="Navlink-scheme-field"]');
     const serviceField = wrapper.find('[data-testid="Navlink-currentService-field"]');

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

@@ -3,8 +3,8 @@ import { mount } from '@vue/test-utils';
 
 describe('component: AuthProviderWarningBanners.vue', () => {
   const wrapper = mount(AuthProviderWarningBanners, {
-    mocks:     { $store: { getters: { 'i18n/t': (text: string) => text } } },
-    propsData: { tArgs: { provider: 'Any Provider', username: 'username' } }
+    props:  { tArgs: { provider: 'Any Provider', username: 'username' } },
+    global: { mocks: { $store: { getters: { 'i18n/t': (text: string) => text } } } }
   });
 
   it('should render properly', () => {

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

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
 import { mount } from '@vue/test-utils';
 import AzureAD from '@shell/edit/auth/azuread.vue';
@@ -21,47 +22,43 @@ const invalidTokenEndpoint = 'aaaaBBBBaaaa';
 const invalidGraphEndpoint = 'aaaaBBBBaaaa';
 
 const mockModel = {
-  enabled:  true,
+  enabled:  false,
   id:       'azuread',
   endpoint: 'https://login.microsoftonline.com/',
   type:     'azureADConfig',
 };
 
-const mockedAuthConfigMixin = {
-  data() {
-    return {
-      sEnabling:      false,
-      editConfig:     false,
-      model:          { mockModel },
-      serverSetting:  null,
-      errors:         [],
-      originalModel:  null,
-      principals:     [],
-      authConfigName: 'azuread',
-    };
-  },
-  computed: {},
-  methods:  {}
-};
-
 describe('edit: azureAD should', () => {
   let wrapper: any;
   const requiredSetup = () => ({
-    mixins: [mockedAuthConfigMixin],
-    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(),
+    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()
         },
-        dispatch: jest.fn()
+        $route:  { query: { AS: '' }, params: { id: 'azure' } },
+        $router: { applyQuery: jest.fn() },
       },
-      $route:  { query: { AS: '' }, params: { id: 'azure' } },
-      $router: { applyQuery: jest.fn() },
     },
     propsData: {
       value: { applicationSecret: '' },
@@ -73,7 +70,7 @@ describe('edit: azureAD should', () => {
     wrapper = mount(AzureAD, { ...requiredSetup() });
   });
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it('have "Create" button disabled before fields are filled in', () => {
@@ -114,15 +111,15 @@ describe('edit: azureAD should', () => {
       result:            false
     },
   ])('has "Create" button enabled and disabled depending on validation results when endpoint is standard', async(testCase) => {
-    const tenantIdInputField = wrapper.find('[data-testid="input-azureAD-tenantId"]').find('input');
-    const applicationIdInputField = wrapper.find('[data-testid="input-azureAD-applcationId"]').find('input');
-    const applicationSecretInputField = wrapper.find('[data-testid="input-azureAD-applicationSecret"]').find('input');
+    const tenantIdInputField = wrapper.find('[data-testid="input-azureAD-tenantId"]');
+    const applicationIdInputField = wrapper.find('[data-testid="input-azureAD-applcationId"]');
+    const applicationSecretInputField = wrapper.find('[data-testid="input-azureAD-applicationSecret"]');
     const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
     tenantIdInputField.setValue(testCase.tenantId);
     applicationIdInputField.setValue(testCase.applicationId);
     applicationSecretInputField.setValue(testCase.applicationSecret);
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(saveButton.disabled).toBe(testCase.result);
   });
@@ -206,9 +203,9 @@ describe('edit: azureAD should', () => {
       result:        false
     }
   ])('has "Create" button enabled and disabled depending on validation results when endpoint is custom', async(testCase) => {
-    const tenantIdInputField = wrapper.find('[data-testid="input-azureAD-tenantId"]').find('input');
-    const applicationIdInputField = wrapper.find('[data-testid="input-azureAD-applcationId"]').find('input');
-    const applicationSecretInputField = wrapper.find('[data-testid="input-azureAD-applicationSecret"]').find('input');
+    const tenantIdInputField = wrapper.find('[data-testid="input-azureAD-tenantId"]');
+    const applicationIdInputField = wrapper.find('[data-testid="input-azureAD-applcationId"]');
+    const applicationSecretInputField = wrapper.find('[data-testid="input-azureAD-applicationSecret"]');
 
     const endpointsRG = wrapper.find('[data-testid="endpoints-radio-input"]');
     const customButton = endpointsRG.findAll('.radio-label').at(2);
@@ -218,23 +215,23 @@ describe('edit: azureAD should', () => {
     tenantIdInputField.setValue(validTenantId);
     applicationIdInputField.setValue(validApplicationId);
     applicationSecretInputField.setValue(validAppSecret);
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(saveButton.disabled).toBe(false);
     customButton.trigger('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(saveButton.disabled).toBe(true);
 
-    const endpointInputField = wrapper.find('[data-testid="input-azureAD-endpoint"]').find('input');
-    const graphEndpointInputField = wrapper.find('[data-testid="input-azureAD-graphEndpoint"]').find('input');
-    const tokenEndpointInputField = wrapper.find('[data-testid="input-azureAD-tokenEndpoint"]').find('input');
-    const authEndpointInputField = wrapper.find('[data-testid="input-azureAD-authEndpoint"]').find('input');
+    const endpointInputField = wrapper.find('[data-testid="input-azureAD-endpoint"]');
+    const graphEndpointInputField = wrapper.find('[data-testid="input-azureAD-graphEndpoint"]');
+    const tokenEndpointInputField = wrapper.find('[data-testid="input-azureAD-tokenEndpoint"]');
+    const authEndpointInputField = wrapper.find('[data-testid="input-azureAD-authEndpoint"]');
 
     endpointInputField.setValue(testCase.endpoint);
     graphEndpointInputField.setValue(testCase.graphEndpoint);
     tokenEndpointInputField.setValue(testCase.tokenEndpoint);
     authEndpointInputField.setValue(testCase.authEndpoint);
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(saveButton.disabled).toBe(testCase.result);
   });

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

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
@@ -29,43 +30,39 @@ const mockModel = {
   type:         'genericOIDCConfig',
 };
 
-const mockedAuthConfigMixin = {
-  data() {
-    return {
-      isEnabling:     false,
-      editConfig:     false,
-      model:          { ...mockModel },
-      serverSetting:  null,
-      errors:         [],
-      originalModel:  null,
-      principals:     [],
-      authConfigName: 'oidc',
-    };
-  },
-  computed: {},
-  methods:  {}
-};
-
 describe('oidc.vue', () => {
   let wrapper: any;
   const requiredSetup = () => ({
-    mixins: [mockedAuthConfigMixin],
-    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(),
+    data() {
+      return {
+        isEnabling:     false,
+        editConfig:     false,
+        model:          { ...mockModel },
+        serverSetting:  null,
+        errors:         [],
+        originalModel:  null,
+        principals:     [],
+        authConfigName: 'oidc',
+      };
+    },
+    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() },
     },
-    propsData: {
+    props: {
       value: { applicationSecret: '' },
       mode:  _EDIT,
     },
@@ -75,12 +72,12 @@ describe('oidc.vue', () => {
     wrapper = mount(oidc, { ...requiredSetup() });
   });
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it('have "Create" button enabled when provider is enabled and not editing config', async() => {
     wrapper.setData({ model: { enabled: true }, editConfig: false });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
@@ -89,7 +86,7 @@ describe('oidc.vue', () => {
 
   it('have "Create" button disabled when provider is disabled and editing config before fields are filled in', async() => {
     wrapper.setData({ model: {}, editConfig: true });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
@@ -98,7 +95,7 @@ describe('oidc.vue', () => {
 
   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 wrapper.vm.$nextTick();
+    await nextTick();
 
     const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
@@ -107,7 +104,7 @@ describe('oidc.vue', () => {
 
   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 wrapper.vm.$nextTick();
+    await nextTick();
 
     const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
@@ -116,7 +113,7 @@ describe('oidc.vue', () => {
 
   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 wrapper.vm.$nextTick();
+    await nextTick();
 
     const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
@@ -125,12 +122,12 @@ describe('oidc.vue', () => {
 
   it('updates issuer endpoint when oidcUrls.url and oidcUrls.realm changes', async() => {
     wrapper.setData({ oidcUrls: { url: validUrl } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/`);
 
     wrapper.setData({ oidcUrls: { realm: validRealm } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.vm.model.issuer).toBe(`${ validUrl }/realms/${ validRealm }`);
   });

package/edit/auth/azuread.vue

@@ -137,7 +137,7 @@ export default {
       const applicationSecret = this.getNewApplicationSecret();
 
       if (applicationSecret) {
-        this.$set(this.model, 'applicationSecret', applicationSecret);
+        this.model['applicationSecret'] = applicationSecret;
       }
 
       return {
@@ -186,7 +186,7 @@ export default {
         this.model.rancherUrl = this.model.rancherUrl || this.replyUrl;
 
         if (this.model.applicationSecret) {
-          this.$set(this, 'applicationSecret', this.model.applicationSecret);
+          this['applicationSecret'] = this.model.applicationSecret;
         }
       }
     },
@@ -206,14 +206,7 @@ export default {
         const endpointType = this.oldEndpoint && endpoint !== 'custom' ? OLD_ENDPOINTS : ENDPOINT_MAPPING;
 
         Object.keys(endpointType[endpoint]).forEach((key) => {
-          this.$set(
-            this.model,
-            key,
-            endpointType[endpoint][key].replace(
-              TENANT_ID_TOKEN,
-              this.model.tenantId
-            )
-          );
+          this.model[key] = endpointType[endpoint][key].replace(TENANT_ID_TOKEN, this.model.tenantId);
         });
       }
     },
@@ -330,7 +323,7 @@ export default {
           :disable="disable"
           :edit="goToEdit"
         >
-          <template slot="rows">
+          <template #rows>
             <tr>
               <td>{{ t(`authConfig.azuread.tenantId.label`) }}:</td>
               <td>{{ model.tenantId }}</td>
@@ -358,7 +351,7 @@ export default {
           </template>
           <template
             v-if="needsUpdate"
-            slot="actions"
+            #actions
           >
             <button
               type="button"
@@ -403,7 +396,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               id="tenant-id"
-              v-model="model.tenantId"
+              v-model:value="model.tenantId"
               :label="t('authConfig.azuread.tenantId.label')"
               :mode="mode"
               :required="true"
@@ -418,7 +411,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               id="application-id"
-              v-model="model.applicationId"
+              v-model:value="model.applicationId"
               :label="t('authConfig.azuread.applicationId.label')"
               :mode="mode"
               :required="true"
@@ -430,7 +423,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               id="application-secret"
-              v-model="model.applicationSecret"
+              v-model:value="model.applicationSecret"
               type="password"
               :label="t('authConfig.azuread.applicationSecret.label')"
               :required="true"
@@ -443,17 +436,17 @@ export default {
         <div class="row mb-20">
           <div class="col span-12">
             <Checkbox
-              v-model="isGroupMembershipFilterEnabled"
+              v-model:value="isGroupMembershipFilterEnabled"
               class="mb-10 mr-10"
               :mode="mode"
               :label="t('authConfig.azuread.groupMembershipFilter.enable')"
               :tooltip="t('authConfig.azuread.groupMembershipFilter.tooltip')"
               data-testid="checkbox-azureAD-groupMembershipFilter"
-              @input="toggleGroupMembershipFilter"
+              @update:value="toggleGroupMembershipFilter"
             />
             <div v-if="isGroupMembershipFilterEnabled">
               <LabeledInput
-                v-model="model.groupMembershipFilter"
+                v-model:value="model.groupMembershipFilter"
                 :label="t('authConfig.azuread.groupMembershipFilter.label')"
                 placeholder="e.g. (displayName eq 'group1') or (displayName eq 'group2')"
                 :mode="mode"
@@ -471,7 +464,7 @@ export default {
           </div>
         </div>
         <RadioGroup
-          v-model="endpoint"
+          v-model:value="endpoint"
           class="mb-20"
           :required="true"
           :label="t('authConfig.azuread.endpoints.label')"
@@ -485,7 +478,7 @@ export default {
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
-                v-model="model.endpoint"
+                v-model:value="model.endpoint"
                 :label="t('authConfig.azuread.endpoint.label')"
                 :mode="mode"
                 :required="true"
@@ -495,7 +488,7 @@ export default {
             </div>
             <div class="col span-6">
               <LabeledInput
-                v-model="model.graphEndpoint"
+                v-model:value="model.graphEndpoint"
                 :label="t('authConfig.azuread.graphEndpoint.label')"
                 :required="true"
                 :rules="fvGetAndReportPathRules('graphEndpoint')"
@@ -507,7 +500,7 @@ export default {
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
-                v-model="model.tokenEndpoint"
+                v-model:value="model.tokenEndpoint"
                 :label="t('authConfig.azuread.tokenEndpoint.label')"
                 :mode="mode"
                 :required="true"
@@ -517,7 +510,7 @@ export default {
             </div>
             <div class="col span-6">
               <LabeledInput
-                v-model="model.authEndpoint"
+                v-model:value="model.authEndpoint"
                 :label="t('authConfig.azuread.authEndpoint.label')"
                 :required="true"
                 :rules="fvGetAndReportPathRules('authEndpoint')"

package/edit/auth/github.vue

@@ -137,7 +137,7 @@ export default {
           :disable="disable"
           :edit="goToEdit"
         >
-          <template slot="rows">
+          <template #rows>
             <tr><td>{{ t(`authConfig.${ NAME }.table.server`) }}: </td><td>{{ baseUrl }}</td></tr>
             <tr><td>{{ t(`authConfig.${ NAME }.table.clientId`) }}: </td><td>{{ value.clientId }}</td></tr>
           </template>
@@ -160,7 +160,7 @@ export default {
 
         <h3 v-t="`authConfig.${NAME}.target.label`" />
         <RadioGroup
-          v-model="targetType"
+          v-model:value="targetType"
           name="targetType"
           data-testid="authConfig-gitHub"
           :options="['public','private']"
@@ -172,7 +172,7 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-if="!isPublic"
-              v-model="targetUrl"
+              v-model:value="targetUrl"
               :label-key="`authConfig.${NAME}.host.label`"
               :placeholder="t(`authConfig.${NAME}.host.placeholder`)"
               :required="true"
@@ -235,14 +235,14 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model="model.clientId"
+              v-model:value="model.clientId"
               :label="t(`authConfig.${NAME}.clientId.label`)"
               :mode="mode"
             />
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="model.clientSecret"
+              v-model:value="model.clientSecret"
               type="password"
               :label="t(`authConfig.${NAME}.clientSecret.label`)"
               :mode="mode"
@@ -261,7 +261,7 @@ export default {
   .banner {
     display: block;
 
-    &::v-deep code {
+    &:deep() code {
       padding: 0 3px;
       margin: 0 3px;
     }