@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/auth/RoleDetailEdit.vue

@@ -14,7 +14,7 @@ import Tabbed from '@shell/components/Tabbed';
 import { ucFirst } from '@shell/utils/string';
 import SortableTable from '@shell/components/SortableTable';
 import { _CLONE, _DETAIL } from '@shell/config/query-params';
-import { SCOPED_RESOURCES } from '@shell/config/roles';
+import { SCOPED_RESOURCES, SCOPED_RESOURCE_GROUPS } from '@shell/config/roles';
 import { Banner } from '@components/Banner';
 
 import { SUBTYPE_MAPPING, VERBS } from '@shell/models/management.cattle.io.roletemplate';
@@ -122,10 +122,10 @@ export default {
   },
 
   created() {
-    this.$set(this.value, 'rules', this.value.rules || []);
+    this.value['rules'] = this.value.rules || [];
     this.value.rules.forEach((rule) => {
       if (rule.verbs[0] === '*') {
-        this.$set(rule, 'verbs', [...VERBS]);
+        rule['verbs'] = [...VERBS];
       }
     });
 
@@ -142,8 +142,8 @@ export default {
     switch (this.value.subtype) {
     case CLUSTER:
     case NAMESPACE:
-      this.$set(this.value, 'roleTemplateNames', this.value.roleTemplateNames || []);
-      this.$set(this.value, 'locked', !!this.value.locked);
+      this.value['roleTemplateNames'] = this.value.roleTemplateNames || [];
+      this.value['locked'] = !!this.value.locked;
       break;
     }
 
@@ -156,7 +156,7 @@ export default {
     }
 
     if (this.value?.metadata?.name && !this.value.displayName) {
-      this.$set(this.value, 'displayName', this.value.metadata.name);
+      this.value['displayName'] = this.value.metadata.name;
     }
 
     this.$nextTick(() => {
@@ -195,16 +195,17 @@ export default {
       const scopes = Object.keys(this.scopedResources);
 
       scopes.forEach((scope) => {
-        if (scope === 'globalScopedApiGroups' && this.value.type !== MANAGEMENT.GLOBAL_ROLE) {
+        if (scope === SCOPED_RESOURCE_GROUPS.GLOBAL && this.value.type !== MANAGEMENT.GLOBAL_ROLE) {
           // If we are not in the global role creation form,
           // skip adding the global-scoped resources.
           return;
         }
-        if (scope === 'clusterScopedApiGroups' && (this.value.type === RBAC.ROLE || this.value.subtype === NAMESPACE)) {
+        if (scope === SCOPED_RESOURCE_GROUPS.CLUSTER && (this.value.type === RBAC.ROLE || this.value.subtype === NAMESPACE)) {
           // If we are in a project/namespace role creation form,
           // additionally skip adding the cluster-scoped resources.
           return;
         }
+
         const apiGroupsInScope = this.scopedResources[scope];
 
         const apiGroupNames = Object.keys(apiGroupsInScope);
@@ -237,7 +238,7 @@ export default {
             const labelForNamespaceScoped = this.t('rbac.roletemplate.tabs.grantResources.neuvector.labelNamespaceScoped');
 
             apiGroupLabel = scope.includes('cluster') ? labelForClusterScoped : labelForNamespaceScoped;
-            apiGroupValue = 'api.neuvector.com';
+            apiGroupValue = 'permission.neuvector.com';
           }
 
           options.push({
@@ -414,7 +415,7 @@ export default {
       case 'apiGroups':
 
         if (event || (event === '')) {
-          this.$set(rule, 'apiGroups', [event]);
+          rule['apiGroups'] = [event];
         }
 
         break;
@@ -422,9 +423,9 @@ export default {
       case 'verbs':
 
         if (event) {
-          this.$set(rule, 'verbs', [event]);
+          rule['verbs'] = [event];
         } else {
-          this.$set(rule, 'verbs', []);
+          rule['verbs'] = [];
         }
         break;
 
@@ -433,10 +434,10 @@ export default {
           // If we are updating the resources defined in a rule,
           // the event will be an object with the
           // properties apiGroupValue and resourceName.
-          this.$set(rule, 'resources', [event.resourceName]);
+          rule['resources'] = [event.resourceName];
           // Automatically fill in the API group of the
           // selected resource.
-          this.$set(rule, 'apiGroups', [event.apiGroupValue]);
+          rule['apiGroups'] = [event.apiGroupValue];
         } else if (event?.label) {
           // When the user creates a new resource name in the resource
           // field instead of selecting an existing one,
@@ -444,18 +445,18 @@ export default {
           // is shaped like {"label":"something"} instead of
           // the same format as the other options:
           // { resourceName: "something", apiGroupValue: "" }
-          this.$set(rule, 'resources', [event.label]);
+          rule['resources'] = [event.label];
         } else {
-          this.$set(rule, 'resources', []);
-          this.$set(rule, 'apiGroups', []);
+          rule['resources'] = [];
+          rule['apiGroups'] = [];
         }
         break;
 
       case 'nonResourceURLs':
         if (event) {
-          this.$set(rule, 'nonResourceURLs', [event]);
+          rule['nonResourceURLs'] = [event];
         } else {
-          this.$set(rule, 'nonResourceURLs', []);
+          rule['nonResourceURLs'] = [];
         }
         break;
 
@@ -469,7 +470,7 @@ export default {
     updateSelectValue(row, key, event) {
       const value = event.label ? event.value : event;
 
-      this.$set(row, key, value);
+      row[key] = value;
     },
     cancel() {
       this.done();
@@ -599,13 +600,14 @@ export default {
     </template>
     <template v-else>
       <NameNsDescription
-        v-model="value"
+        :value="value"
         :namespaced="isNamespaced"
         :mode="mode"
         name-key="displayName"
         description-key="description"
         label="Name"
         :rules="{ name: fvGetAndReportPathRules('displayName') }"
+        @update:value="$emit('input', $event)"
       />
       <div
         v-if="isRancherType"
@@ -613,7 +615,7 @@ export default {
       >
         <div class="col span-6">
           <RadioGroup
-            v-model="defaultValue"
+            v-model:value="defaultValue"
             name="storageSource"
             :label="defaultLabel"
             class="mb-10"
@@ -627,7 +629,7 @@ export default {
           class="col span-6"
         >
           <RadioGroup
-            v-model="value.locked"
+            v-model:value="value.locked"
             name="storageSource"
             :label="t('rbac.roletemplate.locked.label')"
             class="mb-10"
@@ -650,7 +652,7 @@ export default {
             as-banner
           />
           <ArrayList
-            v-model="value.rules"
+            v-model:value="value.rules"
             label="Resources"
             :disabled="isBuiltin"
             :remove-allowed="!isBuiltin"
@@ -705,7 +707,7 @@ export default {
                     :multiple="true"
                     :mode="mode"
                     :data-testid="`grant-resources-verbs${props.i}`"
-                    @input="updateSelectValue(props.row.value, 'verbs', $event)"
+                    @update:value="updateSelectValue(props.row.value, 'verbs', $event)"
                   />
                 </div>
                 <div :class="ruleClass">
@@ -718,7 +720,7 @@ export default {
                     :taggable="true"
                     :mode="mode"
                     :data-testid="`grant-resources-resources${props.i}`"
-                    @input="setRule('resources', props.row.value, $event)"
+                    @update:value="setRule('resources', props.row.value, $event)"
                     @createdListItem="setRule('resources', props.row.value, $event)"
                   />
                 </div>
@@ -754,7 +756,7 @@ export default {
           :weight="0"
         >
           <ArrayList
-            v-model="value.roleTemplateNames"
+            v-model:value="value.roleTemplateNames"
             :disabled="isBuiltin"
             :remove-allowed="!isBuiltin"
             :add-allowed="!isBuiltin"
@@ -766,7 +768,7 @@ export default {
               <div class="columns row mr-20">
                 <div class="col span-12">
                   <Select
-                    v-model="props.row.value"
+                    v-model:value="props.row.value"
                     class="lg"
                     :taggable="false"
                     :disabled="isBuiltin"
@@ -793,7 +795,7 @@ export default {
     color: var(--error);
   }
 
-  ::v-deep {
+  :deep() {
     .column-headers {
       margin-right: 75px;
       margin-bottom: 5px;

package/components/auth/SelectPrincipal.vue

@@ -19,7 +19,7 @@ export default {
 
     showMyGroupTypes: {
       type: Array,
-      default() {
+      default(props) {
         return ['group', 'user'];
       },
     },
@@ -174,7 +174,7 @@ export default {
 <template>
   <LabeledSelect
     ref="labeled-select"
-    v-model="newValue"
+    v-model:value="newValue"
     v-clean-tooltip="{
       content: tooltipContent,
       placement: 'bottom',
@@ -208,7 +208,6 @@ export default {
 
     <template #option="option">
       <Principal
-        :key="option.label"
         :value="option.label"
         :use-muted="false"
       />
@@ -219,7 +218,6 @@ export default {
       #selected-option="option"
     >
       <Principal
-        :key="option.label"
         :value="option.label"
         :use-muted="false"
         class="mt-10 mb-10"

package/components/auth/__tests__/RoleDetailEdit.test.ts

@@ -19,22 +19,26 @@ const role = {
 describe('component: RoleDetailEdit', () => {
   it('does not have validation errors when the role has no displayName', () => {
     const wrapper = mount(RoleDetailEdit, {
-      propsData: { value: role },
-      mocks:     {
-        $fetchState: { pending: false },
-        $route:      { name: 'anything' },
-        $store:      {
-          dispatch: jest.fn(),
-          getters:  {
-            currentStore: () => 'store', 'i18n/t': jest.fn(), 'store/schemaFor': jest.fn(), 'store/customisation/': jest.fn()
+      props: { value: role },
+
+      global: {
+        mocks: {
+          $fetchState: { pending: false },
+          $route:      { name: 'anything' },
+          $store:      {
+            dispatch: jest.fn(),
+            getters:  {
+              currentStore: () => 'store', 'i18n/t': jest.fn(), 'store/schemaFor': jest.fn(), 'store/customisation/': jest.fn()
+            }
           }
-        }
+        },
+
+        stubs: {
+          CruResource: { template: '<div><slot></slot></div>' },
+          // NameNsDescription: true,
+          Tab:         { template: '<div><slot></slot></div>' },
+        },
       },
-      stubs: {
-        CruResource: { template: '<div><slot></slot></div>' },
-        // NameNsDescription: true,
-        Tab:         { template: '<div><slot></slot></div>' },
-      }
     });
 
     expect((wrapper.vm as any).fvFormIsValid).toBe(true);

package/components/auth/login/ldap.vue

@@ -50,14 +50,14 @@ export default {
       <div class="span-6 offset-3">
         <div class="mb-20">
           <LabeledInput
-            v-model="username"
+            v-model:value="username"
             :label="t('login.username')"
             autocomplete="username"
           />
         </div>
         <div class="mb-20">
           <LabeledInput
-            v-model="password"
+            v-model:value="password"
             type="password"
             :label="t('login.password')"
             autocomplete="password"

package/components/fleet/FleetClusters.vue

@@ -91,7 +91,6 @@ export default {
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     key-field="_key"
-    v-on="$listeners"
   >
     <template #cell:workspace="{row}">
       <span v-if="row.type !== MANAGEMENT_CLUSTER && row.metadata.namespace">{{ row.metadata.namespace }}</span>

package/components/fleet/FleetRepos.vue

@@ -140,7 +140,6 @@ export default {
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       key-field="_key"
-      v-on="$listeners"
     >
       <template #cell:repo="{ row }">
         <Link

package/components/fleet/FleetStatus.vue

@@ -156,7 +156,7 @@ function toPercent(value, min, max) {
           @click="showMenu(true)"
           @focus.capture="showMenu(true)"
         >
-          <v-popover
+          <v-dropdown
             ref="popover"
             placement="bottom-end"
             offset="-10"
@@ -169,7 +169,7 @@ function toPercent(value, min, max) {
               {{ meta.readyCount }} / {{ meta.total }} {{ title }} ready <i class="icon toggle icon-chevron-down" />
             </div>
             <template
-              slot="popover"
+              #popover
               class="resources-status-list"
             >
               <ul
@@ -184,7 +184,7 @@ function toPercent(value, min, max) {
                 </li>
               </ul>
             </template>
-          </v-popover>
+          </v-dropdown>
         </div>
       </div>
       <div

package/components/fleet/__tests__/FleetSummary.test.ts

@@ -295,7 +295,10 @@ describe('component: FleetSummary', () => {
     [[...mockedBundlesInRepo, ...mockedBundlesOutOfRepo], '2'],
     [mockedBundlesInRepo, '2'],
   ])('displays the number of bundles associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
-    const wrapper = mount(FleetSummary, { propsData: { bundles, value: mockRepo }, mocks: { $store: mockStore } });
+    const wrapper = mount(FleetSummary, {
+      props:  { bundles, value: mockRepo },
+      global: { mocks: { $store: mockStore } }
+    });
 
     const bundleCountEl = wrapper.find('[data-testid="gitrepo-bundle-summary"] .count');
 
@@ -307,7 +310,10 @@ describe('component: FleetSummary', () => {
     [mockedBundlesInRepo, '2'],
 
   ])('displays the number of deployments associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
-    const wrapper = mount(FleetSummary, { propsData: { bundles, value: mockRepo }, mocks: { $store: mockStore } });
+    const wrapper = mount(FleetSummary, {
+      props:  { bundles, value: mockRepo },
+      global: { mocks: { $store: mockStore } }
+    });
 
     const bundleCountEl = wrapper.find('[data-testid="gitrepo-deployment-summary"] .count');
 

package/components/form/ArrayList.vue

@@ -192,7 +192,7 @@ export default {
           out.push(value);
         }
       }
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
 
     /**
@@ -271,25 +271,25 @@ export default {
               <TextAreaAutoGrow
                 v-if="valueMultiline"
                 ref="value"
-                v-model="row.value"
+                v-model:value="row.value"
                 :data-testid="`textarea-${idx}`"
                 :placeholder="valuePlaceholder"
                 :mode="mode"
                 :disabled="disabled"
                 @paste="onPaste(idx, $event)"
-                @input="queueUpdate"
+                @update:value="queueUpdate"
               />
               <LabeledInput
                 v-else-if="rules.length > 0"
                 ref="value"
-                v-model="row.value"
+                v-model:value="row.value"
                 :data-testid="`labeled-input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
                 :rules="rules"
                 :compact="false"
                 @paste="onPaste(idx, $event)"
-                @input="queueUpdate"
+                @update:value="queueUpdate"
               />
               <input
                 v-else
@@ -299,7 +299,6 @@ export default {
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
                 @paste="onPaste(idx, $event)"
-                @input="queueUpdate"
               >
             </slot>
           </div>

package/components/form/ArrayListGrouped.vue

@@ -71,7 +71,7 @@ export default {
     :add-allowed="canAdd && !isView"
     :mode="mode"
     :initial-empty-row="initialEmptyRow"
-    @input="$emit('input', $event)"
+    @update:value="$emit('update:value', $event)"
     @add="$emit('add')"
     @remove="$emit('remove', $event)"
   >
@@ -94,7 +94,7 @@ export default {
     </template>
     <!-- Pass down templates provided by the caller -->
     <template
-      v-for="(_, slot) of $scopedSlots"
+      v-for="(_, slot) of $slots"
       v-slot:[slot]="scope"
     >
       <slot

package/components/form/ArrayListSelect.vue

@@ -52,7 +52,7 @@ export default {
   methods: {
     updateRow(index, value) {
       this.value.splice(index, 1, value);
-      this.$emit('input', this.value);
+      this.$emit('update:value', this.value);
     },
     calculateOptions(value) {
       const valueOption = this.options.find((o) => o.value === value);
@@ -76,7 +76,7 @@ export default {
     :loading="loading"
     :defaultAddValue="defaultAddValue"
     :disabled="disabled"
-    @input="$emit('input', $event)"
+    @update:value="$emit('update:value', $event)"
   >
     <template v-slot:columns="scope">
       <Select
@@ -84,14 +84,14 @@ export default {
         v-bind="selectProps"
         :options="calculateOptions(scope.row.value)"
         :get-option-label="getOptionLabel"
-        @input="updateRow(scope.i, $event)"
+        @update:value="updateRow(scope.i, $event)"
       />
     </template>
   </ArrayList>
 </template>
 
 <style lang="scss" scoped>
-::v-deep .unlabeled-select {
+:deep() .unlabeled-select {
   height: 61px;
   }
 </style>

package/components/form/BannerSettings.vue

@@ -109,7 +109,7 @@ export default ({
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value[bannerType].text"
+            v-model:value="value[bannerType].text"
             :disabled="isUiDisabled"
             :label="t('banner.text')"
             type="multiline"
@@ -125,7 +125,7 @@ export default ({
             class="mt-10"
           >
             <Checkbox
-              v-model="showAsDialog"
+              v-model:value="showAsDialog"
               name="bannerDecoration"
               class="banner-decoration-checkbox"
               :mode="mode"
@@ -133,7 +133,7 @@ export default ({
               :tooltip="t('banner.showAsDialog.tooltip')"
             />
             <LabeledInput
-              v-model="buttonText"
+              v-model:value="buttonText"
               :disabled="!showAsDialog || isUiDisabled"
               :label="t('banner.buttonText')"
             />
@@ -141,7 +141,7 @@ export default ({
         </div>
         <div class="col span-2">
           <RadioGroup
-            v-model="value[bannerType].textAlignment"
+            v-model:value="value[bannerType].textAlignment"
             name="bannerAlignment"
             :data-testid="`banner_alignment_radio_options${bannerType}`"
             :label="t('banner.bannerAlignment.label')"
@@ -155,11 +155,11 @@ export default ({
             {{ t('banner.bannerDecoration.label') }}
           </h3>
           <div
-            v-for="o in textDecorationOptions"
-            :key="o.style"
+            v-for="(o, i) in textDecorationOptions"
+            :key="i"
           >
             <Checkbox
-              v-model="value[bannerType][o.style]"
+              v-model:value="value[bannerType][o.style]"
               name="bannerDecoration"
               :data-testid="`banner_decoration_checkbox${bannerType}${o.label}`"
               class="banner-decoration-checkbox"
@@ -170,7 +170,7 @@ export default ({
         </div>
         <div class="col span-2">
           <LabeledSelect
-            v-model="value[bannerType].fontSize"
+            v-model:value="value[bannerType].fontSize"
             :data-testid="`banner_font_size_options${bannerType}`"
             :disabled="isUiDisabled"
             :label="t('banner.bannerFontSize.label')"
@@ -181,7 +181,7 @@ export default ({
       <div class="row mt-10">
         <div class="col span-6">
           <ColorInput
-            v-model="value[bannerType].color"
+            v-model:value="value[bannerType].color"
             :default-value="themeVars.bannerTextColor"
             :label="t('banner.textColor')"
             :mode="mode"
@@ -189,7 +189,7 @@ export default ({
         </div>
         <div class="col span-6">
           <ColorInput
-            v-model="value[bannerType].background"
+            v-model:value="value[bannerType].background"
             :default-value="themeVars.bannerBgColor"
             :label="t('banner.background')"
             :mode="mode"

package/components/form/ChangePassword.vue

@@ -219,7 +219,7 @@ export default {
       }
 
       this.$emit('valid', isValid);
-      this.$emit('input', {
+      this.$emit('update:value', {
         password:          this.password,
         userChangeOnLogin: this.userChangeOnLogin
       });
@@ -303,19 +303,19 @@ export default {
       <div class="fields">
         <Checkbox
           v-if="isChange"
-          v-model="form.deleteKeys"
+          v-model:value="form.deleteKeys"
           label-key="changePassword.deleteKeys.label"
           class="mt-10"
         />
         <Checkbox
           v-if="isCreateEdit"
-          v-model="userChangeOnLogin"
+          v-model:value="userChangeOnLogin"
           label-key="changePassword.changeOnLogin.label"
           class="mt-10 type"
         />
         <Checkbox
           v-if="isCreateEdit"
-          v-model="isRandomGenerated"
+          v-model:value="isRandomGenerated"
           label-key="changePassword.generatePassword.label"
           class="mt-10 type"
         />
@@ -341,7 +341,7 @@ export default {
         >
         <Password
           v-if="isChange"
-          v-model="passwordCurrent"
+          v-model:value="passwordCurrent"
           data-testid="account__current_password"
           class="mt-10"
           :required="true"
@@ -353,7 +353,7 @@ export default {
         >
           <div :class="{'col': isCreateEdit, 'span-8': isCreateEdit}">
             <Password
-              v-model="passwordGen"
+              v-model:value="passwordGen"
               class="mt-10"
               :is-random="true"
               :required="false"
@@ -368,7 +368,7 @@ export default {
         >
           <div :class="{'col': isCreateEdit, 'span-4': isCreateEdit}">
             <Password
-              v-model="passwordNew"
+              v-model:value="passwordNew"
               data-testid="account__new_password"
               class="mt-10"
               :label="t('changePassword.userGen.newPassword.label')"
@@ -378,7 +378,7 @@ export default {
           </div>
           <div :class="{'col': isCreateEdit, 'span-4': isCreateEdit}">
             <Password
-              v-model="passwordConfirm"
+              v-model:value="passwordConfirm"
               data-testid="account__confirm_password"
               class="mt-10"
               :label="t('changePassword.userGen.confirmPassword.label')"
@@ -391,7 +391,7 @@ export default {
       </div>
       <Checkbox
         v-if="isChange"
-        v-model="isRandomGenerated"
+        v-model:value="isRandomGenerated"
         label-key="changePassword.generatePassword.label"
         class="mt-10 type"
       />

package/components/form/ColorInput.vue

@@ -59,7 +59,7 @@ export default {
 
   mounted() {
     // Ensures that if the default value is used, the model is updated with it
-    this.$emit('input', this.inputValue);
+    this.$emit('update:value', this.inputValue);
   }
 };
 </script>
@@ -89,7 +89,7 @@ export default {
           type="color"
           :disabled="mode !== editMode"
           :value="inputValue"
-          @input="$emit('input', $event.target.value)"
+          @input="$emit('update:value', $event.target.value)"
         >
       </span>
       <span class="text-muted color-value">{{ inputValue }}</span>