@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/auth/RoleDetailEdit.vue

@@ -14,8 +14,9 @@ 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 LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
 
 import { SUBTYPE_MAPPING, VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import Loading from '@shell/components/Loading';
@@ -63,7 +64,8 @@ export default {
     SortableTable,
     Loading,
     Error,
-    Banner
+    Banner,
+    LabeledInput
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -122,10 +124,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 +144,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 +158,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 +197,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 +240,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 +417,7 @@ export default {
       case 'apiGroups':
 
         if (event || (event === '')) {
-          this.$set(rule, 'apiGroups', [event]);
+          rule['apiGroups'] = [event];
         }
 
         break;
@@ -422,9 +425,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 +436,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 +447,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 +472,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 +602,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 +617,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 +631,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 +654,7 @@ export default {
             as-banner
           />
           <ArrayList
-            v-model="value.rules"
+            v-model:value="value.rules"
             label="Resources"
             :disabled="isBuiltin"
             :remove-allowed="!isBuiltin"
@@ -704,8 +708,9 @@ export default {
                     :options="verbOptions"
                     :multiple="true"
                     :mode="mode"
+                    :compact="true"
                     :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">
@@ -717,31 +722,32 @@ export default {
                     :searchable="true"
                     :taggable="true"
                     :mode="mode"
+                    :compact="true"
                     :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>
                 <div :class="ruleClass">
-                  <input
+                  <LabeledInput
                     :value="getRule('apiGroups', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
                     :data-testid="`grant-resources-api-groups${props.i}`"
                     @input="setRule('apiGroups', props.row.value, $event.target.value)"
-                  >
+                  />
                 </div>
                 <div
                   v-if="!isNamespaced"
                   :class="ruleClass"
                 >
-                  <input
+                  <LabeledInput
                     :value="getRule('nonResourceURLs', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
                     :data-testid="`grant-resources-non-resource-urls${props.i}`"
                     @input="setRule('nonResourceURLs', props.row.value, $event.target.value)"
-                  >
+                  />
                 </div>
               </div>
             </template>
@@ -754,7 +760,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 +772,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"
@@ -775,6 +781,7 @@ export default {
                     option-key="value"
                     option-label="label"
                     :mode="mode"
+                    :compact="true"
                     @on-focus="selectFocused = props.i"
                     @on-blur="selectFocused = null"
                   />
@@ -793,7 +800,7 @@ export default {
     color: var(--error);
   }
 
-  ::v-deep {
+  :deep() {
     .column-headers {
       margin-right: 75px;
       margin-bottom: 5px;
@@ -811,18 +818,9 @@ export default {
     }
 
     .columns {
-      & > .col {
-        &:not(:first-of-type) {
-          height: $input-height;
-        }
-
-        &:first-of-type {
-          min-height: $input-height;
-        }
-
-        & > * {
-          height: 100%;
-        }
+      .col > .unlabeled-select:not(.taggable) {
+        // override the odd padding-top from shell/assets/styles/global/_select.scss
+        padding: $unlabaled-select-padding
       }
     }
   }

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',
@@ -188,7 +188,7 @@ export default {
     :filterable="false"
     class="select-principal"
     :class="{'retain-selection': retainSelection}"
-    @input="add"
+    @update:value="add"
     @search="onSearch"
     @on-open="resetTooltipContent()"
     @on-close="setTooltipContent()"
@@ -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"
@@ -168,23 +168,22 @@ function toPercent(value, min, max) {
             <div class="meta-title">
               {{ meta.readyCount }} / {{ meta.total }} {{ title }} ready <i class="icon toggle icon-chevron-down" />
             </div>
-            <template
-              slot="popover"
-              class="resources-status-list"
-            >
-              <ul
-                class="list-unstyled dropdown"
-                @click.stop="showMenu(false)"
-              >
-                <li
-                  v-for="(val, idx) in values"
-                  :key="idx"
+            <template #popper>
+              <div class="resources-status-list">
+                <ul
+                  class="list-unstyled dropdown"
+                  @click.stop="showMenu(false)"
                 >
-                  <span>{{ val.label }}</span><span class="list-count">{{ val.count }}</span>
-                </li>
-              </ul>
+                  <li
+                    v-for="(val, idx) in values"
+                    :key="idx"
+                  >
+                    <span>{{ val.label }}</span><span class="list-count">{{ val.count }}</span>
+                  </li>
+                </ul>
+              </div>
             </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

@@ -86,7 +86,7 @@ export default {
     }
   },
   data() {
-    const input = (this.value || []).slice();
+    const input = (Array.isArray(this.value) ? this.value : []).slice();
     const rows = [];
 
     for ( const value of input ) {
@@ -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

@@ -37,8 +37,17 @@ export default {
       type:    String,
       default: _EDIT,
     },
+
+    value: {
+      type:    Object,
+      default: () => {
+        return {};
+      },
+    },
   },
 
+  emits: ['update:value', 'add', 'remove'],
+
   computed: {
     isView() {
       return this.mode === _VIEW;
@@ -67,11 +76,12 @@ export default {
 <template>
   <ArrayList
     class="array-list-grouped"
+    :value="value"
     v-bind="$attrs"
     :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,13 +104,16 @@ export default {
     </template>
     <!-- Pass down templates provided by the caller -->
     <template
-      v-for="(_, slot) of $scopedSlots"
-      v-slot:[slot]="scope"
+      v-for="(_, slot) of $slots"
+      #[slot]="scope"
+      :key="slot"
     >
-      <slot
-        :name="slot"
-        v-bind="scope"
-      />
+      <template v-if="typeof $slots[slot] === 'function'">
+        <slot
+          :name="slot"
+          v-bind="scope"
+        />
+      </template>
     </template>
   </ArrayList>
 </template>

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>