@rancher/shell 3.0.0-rc.1 → 3.0.0-rc.2

package/components/__tests__/CodeMirror.test.ts

@@ -1,96 +1,93 @@
-// import { nextTick } from 'vue';
-// import { shallowMount, Wrapper } from '@vue/test-utils';
-// import CodeMirror from '@shell/components/CodeMirror.vue';
-// import { _EDIT, _YAML } from '@shell/config/query-params';
-
-// // eslint-disable-next-line jest/no-disabled-tests
-// describe.skip('component: CodeMirror.vue', () => {
-//   let wrapper: Wrapper<InstanceType<typeof CodeMirror>>;
-
-//   const options = {
-//     readOnly: false,
-//     gutters:  [
-//       'CodeMirror-lint-markers',
-//       'CodeMirror-foldgutter'
-//     ],
-//     mode:            'yaml',
-//     lint:            true,
-//     lineNumbers:     true,
-//     styleActiveLine: true,
-//     tabSize:         2,
-//     indentWithTabs:  false,
-//     cursorBlinkRate: 530,
-//     extraKeys:       { 'Ctrl-Space': 'autocomplete' }
-//   };
-
-//   const mountOptions = {
-//     propsData: {
-//       value:         '',
-//       mode:          _EDIT,
-//       options,
-//       asTextArea:    false,
-//       showKeyMapBox: true,
-//     },
-//     mocks: {
-//       $store: {
-//         getters: {
-//           currentStore:              () => 'current_store',
-//           'current_store/schemaFor': jest.fn(),
-//           'current_store/all':       jest.fn(),
-//           'i18n/t':                  () => 'Vim',
-//           'prefs/get':               () => 'Vim',
-//           'prefs/theme':             jest.fn(),
-//         }
-//       },
-//       $route:  { query: { AS: _YAML } },
-//       $router: { applyQuery: jest.fn() },
-//     },
-//   };
-
-//   // eslint-disable-next-line jest/no-disabled-tests
-//   describe.skip('keyMap info', () => {
-//     (window as any).__codeMirrorLoader = () => new Promise((resolve) => {
-//       resolve(true);
-//     });
-
-//     wrapper = shallowMount(
-//       CodeMirror,
-//       mountOptions,
-//     );
-
-//     it(`should show keyMap preference`, async() => {
-//       await nextTick();
-
-//       const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
-//       const keyboardIcon = keyMapBox.find('.keymap-indicator');
-//       const closeIcon = keyMapBox.find('.icon-close');
-
-//       expect(keyboardIcon.element).toBeDefined();
-//       expect(closeIcon.element).toBeDefined();
-//     });
-
-//     it(`should remove keyMap box`, async() => {
-//       await nextTick();
-
-//       let keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
-
-//       keyMapBox.trigger('mouseenter');
-//       await nextTick();
-
-//       const closeIcon = keyMapBox.find('.icon-close');
-
-//       closeIcon.element.click();
-//       await nextTick();
-
-//       keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
-
-//       expect(keyMapBox.element).toBeUndefined();
-//     });
-//   });
-// });
-
-describe.skip('(Vue3 Skip) it must have one test', () => {
-  it('will pass', () => {
-    expect(true).toBe(true);
+import { nextTick } from 'vue';
+import { shallowMount, Wrapper } from '@vue/test-utils';
+import CodeMirror from '@shell/components/CodeMirror.vue';
+import { _EDIT, _YAML } from '@shell/config/query-params';
+
+// eslint-disable-next-line jest/no-disabled-tests
+describe('component: CodeMirror.vue', () => {
+  let wrapper: Wrapper<InstanceType<typeof CodeMirror>>;
+
+  const options = {
+    readOnly: false,
+    gutters:  [
+      'CodeMirror-lint-markers',
+      'CodeMirror-foldgutter'
+    ],
+    mode:            'yaml',
+    lint:            true,
+    lineNumbers:     true,
+    styleActiveLine: true,
+    tabSize:         2,
+    indentWithTabs:  false,
+    cursorBlinkRate: 530,
+    extraKeys:       { 'Ctrl-Space': 'autocomplete' }
+  };
+
+  const mountOptions = {
+    propsData: {
+      value:         '',
+      mode:          _EDIT,
+      options,
+      asTextArea:    false,
+      showKeyMapBox: true,
+    },
+    global: {
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  () => 'Vim',
+            'prefs/get':               () => 'Vim',
+            'prefs/theme':             jest.fn(),
+          }
+        },
+        $route:  { query: { AS: _YAML } },
+        $router: { applyQuery: jest.fn() },
+      },
+    }
+
+  };
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  describe('keyMap info', () => {
+    (window as any).__codeMirrorLoader = () => new Promise((resolve) => {
+      resolve(true);
+    });
+
+    wrapper = shallowMount(
+      CodeMirror,
+      mountOptions,
+    );
+
+    it(`should show keyMap preference`, async() => {
+      await nextTick();
+
+      const keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"] .keymap-indicator');
+
+      const closeIcon = wrapper.find('[data-testid="code-mirror-keymap"] .icon-close');
+
+      expect(keyMapBox).toBeDefined();
+      expect(closeIcon).toBeDefined();
+    });
+
+    it(`should remove keyMap box`, async() => {
+      await nextTick();
+
+      let keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+
+      keyMapBox.trigger('mouseenter');
+      await nextTick();
+
+      const closeIcon = keyMapBox.find('.icon-close');
+
+      closeIcon.element.click();
+      await nextTick();
+
+      keyMapBox = wrapper.find('[data-testid="code-mirror-keymap"]');
+
+      expect(keyMapBox.exists()).toBe(false);
+    });
   });
 });

package/components/__tests__/ConsumptionGauge.test.ts

@@ -3,7 +3,7 @@ import ConsumptionGauge from '@shell/components/ConsumptionGauge.vue';
 import PercentageBar from '@shell/components/PercentageBar.vue';
 
 describe('component: ConsumptionGauge', () => {
-  it.skip('(Vue3 Skip) should render component with the correct data applied', () => {
+  it('should render component with the correct data applied', () => {
     const colorStops = {
       0: '--success', 30: '--warning', 70: '--error'
     };
@@ -36,7 +36,7 @@ describe('component: ConsumptionGauge', () => {
 
     // checking PercentageBar component render
     expect(percentageBar.exists()).toBe(true);
-    expect(Number(percentageBar.attributes().value)).toBe(20);
+    expect(percentageBar.props().modelValue).toBe(20);
     expect(percentageBar.props().colorStops).toStrictEqual(colorStops);
   });
 

package/components/__tests__/NamespaceFilter.test.ts

@@ -17,8 +17,7 @@ describe('component: NamespaceFilter', () => {
       expect(filter).toBeDefined();
     });
 
-    it.skip('(Vue3 Skip) should display no namespace selection', () => {
-      const text = 'none';
+    it('should display no namespace selection', () => {
       const wrapper = mount(NamespaceFilter, {
         computed: {
           filtered: () => [],
@@ -27,17 +26,17 @@ describe('component: NamespaceFilter', () => {
         },
         global: {
           mocks: {
-            $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
+            $store:      { getters: { namespaceFilterMode: () => undefined } },
             $fetchState: { pending: false }
           },
         }
       });
       const element = wrapper.find(`[data-testid="namespaces-values-none"]`).element.textContent;
 
-      expect(element).toContain(text);
+      expect(element).toContain('nav.ns.all');
     });
 
-    it.skip('(Vue3 Skip) should display the default namespace', () => {
+    it('should display the default namespace', () => {
       const text = 'special namespace';
       const wrapper = mount(NamespaceFilter, {
         computed: {
@@ -47,6 +46,7 @@ describe('component: NamespaceFilter', () => {
             label: text,
             kind:  'special',
           }]),
+          isSingleSpecial: () => true
         },
         global: { mocks: { $fetchState: { pending: false } } }
       });
@@ -77,7 +77,7 @@ describe('component: NamespaceFilter', () => {
       expect(element).toContain(text);
     });
 
-    it.skip('(Vue3 Skip) should display the selected namespace from user preferences if options are available', () => {
+    it('should display the selected namespace from user preferences if options are available', () => {
       const text = 'my preference';
       const key = 'local';
       const preferences = {
@@ -97,6 +97,7 @@ describe('component: NamespaceFilter', () => {
           }],
           currentProduct: () => undefined,
           key:            () => key,
+          value:          () => [{ label: text }]
         },
         global: {
           mocks: {
@@ -194,7 +195,7 @@ describe('component: NamespaceFilter', () => {
       expect(option).toContain(text);
     });
 
-    it.skip('(Vue3 Skip) should set the option as user preference', async() => {
+    it('should set the option as user preference', async() => {
       const text = 'my option';
       const key = 'my key';
       const value = {
@@ -205,8 +206,10 @@ describe('component: NamespaceFilter', () => {
       const action = jest.fn();
 
       jest.spyOn(NamespaceFilter.computed.value, 'get').mockReturnValue([]);
+
       const wrapper = mount(NamespaceFilter, {
         computed: {
+          ...NamespaceFilter.computed,
           options:        () => [],
           currentProduct: () => undefined,
           key:            () => key,

package/components/auth/AllowedPrincipals.vue

@@ -4,7 +4,7 @@ import ArrayList from '@shell/components/form/ArrayList';
 import Principal from '@shell/components/auth/Principal';
 import SelectPrincipal from '@shell/components/auth/SelectPrincipal';
 import { _EDIT } from '@shell/config/query-params';
-import { addObject } from '@shell/utils/array';
+import uniq from 'lodash/uniq';
 
 export default {
   components: {
@@ -56,7 +56,7 @@ export default {
 
   methods: {
     addPrincipal(id) {
-      addObject(this.authConfig.allowedPrincipalIds, id);
+      this.authConfig.allowedPrincipalIds = uniq([...this.authConfig.allowedPrincipalIds, id]);
     },
   }
 };

package/components/auth/RoleDetailEdit.vue

@@ -16,6 +16,7 @@ import SortableTable from '@shell/components/SortableTable';
 import { _CLONE, _DETAIL } from '@shell/config/query-params';
 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],
@@ -706,6 +708,7 @@ export default {
                     :options="verbOptions"
                     :multiple="true"
                     :mode="mode"
+                    :compact="true"
                     :data-testid="`grant-resources-verbs${props.i}`"
                     @update:value="updateSelectValue(props.row.value, 'verbs', $event)"
                   />
@@ -719,31 +722,32 @@ export default {
                     :searchable="true"
                     :taggable="true"
                     :mode="mode"
+                    :compact="true"
                     :data-testid="`grant-resources-resources${props.i}`"
                     @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>
@@ -777,6 +781,7 @@ export default {
                     option-key="value"
                     option-label="label"
                     :mode="mode"
+                    :compact="true"
                     @on-focus="selectFocused = props.i"
                     @on-blur="selectFocused = null"
                   />
@@ -813,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

@@ -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()"

package/components/fleet/FleetStatus.vue

@@ -168,21 +168,20 @@ function toPercent(value, min, max) {
             <div class="meta-title">
               {{ meta.readyCount }} / {{ meta.total }} {{ title }} ready <i class="icon toggle icon-chevron-down" />
             </div>
-            <template
-              #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-dropdown>
         </div>

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 ) {

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,6 +76,7 @@ export default {
 <template>
   <ArrayList
     class="array-list-grouped"
+    :value="value"
     v-bind="$attrs"
     :add-allowed="canAdd && !isView"
     :mode="mode"
@@ -95,12 +105,15 @@ export default {
     <!-- Pass down templates provided by the caller -->
     <template
       v-for="(_, slot) of $slots"
-      v-slot:[slot]="scope"
+      #[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/LabeledSelect.vue

@@ -13,6 +13,8 @@ import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSe
 export default {
   name: 'LabeledSelect',
 
+  inheritAttrs: false,
+
   components: { LabeledTooltip },
   mixins:     [
     CompactInput,
@@ -247,17 +249,20 @@ export default {
   <div
     ref="select"
     class="labeled-select"
-    :class="{
-      disabled: isView || disabled,
-      focused,
-      [mode]: true,
-      [status]: status,
-      taggable: $attrs.taggable,
-      taggable: $attrs.multiple,
-      hoverable: hoverTooltip,
-      'compact-input': isCompact,
-      'no-label': !hasLabel,
-    }"
+    :class="[
+      $attrs.class,
+      {
+        disabled: isView || disabled,
+        focused,
+        [mode]: true,
+        [status]: status,
+        taggable: $attrs.taggable,
+        taggable: $attrs.multiple,
+        hoverable: hoverTooltip,
+        'compact-input': isCompact,
+        'no-label': !hasLabel
+      }
+    ]"
     @click="focusSearch"
     @focus="focusSearch"
   >

package/components/form/Select.vue

@@ -81,6 +81,11 @@ export default {
       type:    Boolean,
       default: true
     },
+
+    compact: {
+      type:    Boolean,
+      default: null
+    },
   },
 
   methods: {
@@ -206,6 +211,11 @@ export default {
     },
     canPaginate() {
       return false;
+    },
+    deClassedAttrs() {
+      const { class: _, ...rest } = this.$attrs;
+
+      return rest;
     }
   }
 };
@@ -222,13 +232,14 @@ export default {
       [status]: status,
       taggable: $attrs.taggable,
       taggable: $attrs.multiple,
+      'compact-input': compact,
       [$attrs.class]: $attrs.class
     }"
     @focus="focusSearch"
   >
     <v-select
       ref="select-input"
-      v-bind="$attrs"
+      v-bind="deClassedAttrs"
       class="inline"
       :class="{'select-input-view': mode === 'view'}"
       :autoscroll="true"
@@ -325,5 +336,10 @@ export default {
     }
 
     @include input-status-color;
+
+    &.compact-input {
+      min-height: $unlabeled-input-height;
+      line-height: $input-line-height;
+    }
   }
 </style>

package/components/form/__tests__/Command.test.ts

@@ -14,16 +14,17 @@ describe('component: Command', () => {
     expect(inputWraps).toHaveLength(5);
   });
 
-  it.skip.each([
+  it.each([
     'command',
     'args',
     'workingDir',
-  ])('(Vue3 Skip) should emit an update on %p input', (field) => {
+  ])('should emit an update on %p input', (field) => {
     const wrapper = mount(Command, { props: { mode: _EDIT } });
-    const input = wrapper.find(`[data-testid="input-command-${ field }"]`).find('input');
-    const newValue = 123;
+    const inputComponent = wrapper.getComponent(`[data-testid="input-command-${ field }"]>*`);
+
+    const newValue = ['123'];
 
-    input.setValue(newValue);
+    inputComponent.vm.$emit('update:value', newValue);
 
     expect(wrapper.emitted('update:value')).toHaveLength(1);
   });