@rancher/shell 0.2.4 → 0.3.0

package/components/formatter/Weight.vue

@@ -6,7 +6,7 @@ export default {
 
   props: {
     value: {
-      type:     Number,
+      type:    Number,
       default: 0,
     },
     row: {
@@ -14,7 +14,7 @@ export default {
       required: true
     },
     col: {
-      type:     Object,
+      type:    Object,
       default: () => {}
     },
   },

package/components/formatter/WorkloadDetailEndpoints.vue

@@ -5,7 +5,7 @@ import Tag from '@shell/components/Tag';
 export default {
   props: {
     value: {
-      type:     [Array, String],
+      type:    [Array, String],
       default: null,
     },
   },

package/components/formatter/WorkloadHealthScale.vue

@@ -52,7 +52,7 @@ export default {
     },
   },
 
-  methods:  {
+  methods: {
     liveUpdate() {
       if (this.loading) {
         return 5;
@@ -144,7 +144,7 @@ export default {
           top:    0,
           left:   0,
           right:  window.innerWidth || document.documentElement.clientWidth,
-          bottom:  window.innerHeight || document.documentElement.clientHeight,
+          bottom: window.innerHeight || document.documentElement.clientHeight,
         });
 
         if (insideWindow) {

package/components/formatter/__tests__/Date.test.ts

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils';
+import Date from '@shell/components/formatter/Date.vue';
+import dayjs from 'dayjs';
+
+describe('component: Date formatter', () => {
+  it.each([
+    'ddd, MMM D YYYY',
+    'MMM YYYY'
+  ])('should use date format pref', async(dateFormat) => {
+    const inputTime = dayjs().toString();
+    const expectedDate = dayjs(inputTime).format(dateFormat);
+    const wrapper = await mount(Date, {
+      propsData: { value: inputTime, showTime: false },
+      mocks:     { $store: { getters: { 'prefs/get': () => dateFormat } } }
+    });
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe(expectedDate);
+  });
+
+  it.each([
+    'h:mm:ss a',
+    'hh:mm'
+  ])('should use time format pref', async(timeFormat) => {
+    const inputTime = dayjs().toString();
+    const expectedDate = dayjs(inputTime).format(timeFormat);
+    const wrapper = await mount(Date, {
+      propsData: { value: inputTime, showDate: false },
+      mocks:     { $store: { getters: { 'prefs/get': () => timeFormat } } }
+    });
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe(expectedDate);
+  });
+
+  it.each([
+    'div',
+    'hr'
+  ])('use custom tag provided by tagName prop', async(tagName) => {
+    const wrapper = await mount(Date, {
+      propsData: { value: dayjs().toString(), tagName },
+      mocks:     { $store: { getters: { 'prefs/get': jest.fn() } } }
+    });
+    const element = wrapper.find(tagName);
+
+    expect(element).toBeDefined();
+  });
+
+  it.each([
+    true,
+    false
+  ])('should render day and time on different lines if configured', async(multiline) => {
+    const wrapper = await mount(Date, {
+      propsData: { value: dayjs().toString(), multiline },
+      mocks:     { $store: { getters: { 'prefs/get': jest.fn() } } }
+    });
+
+    expect(wrapper.find('br').exists()).toBe(multiline);
+  });
+});

package/components/formatter/__tests__/LinkDetail.test.ts

@@ -0,0 +1,72 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import LinkDetail from '@shell/components/formatter/LinkDetail.vue';
+
+describe('component: LinkDetail', () => {
+  it('should display the value', async() => {
+    const location = 'route-somewhere';
+    const wrapper = await mount(LinkDetail, {
+      propsData: { row: { detailLocation: location }, value: 'test-name' },
+      stubs:     { nLink: RouterLinkStub }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.text()).toBe('test-name');
+  });
+
+  it('should use rows detailLocation to render a link', async() => {
+    const location = 'route-somewhere';
+    const wrapper = await mount(LinkDetail, {
+      propsData: { row: { detailLocation: location } },
+      stubs:     { nLink: RouterLinkStub }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.props().to).toBe(location);
+  });
+
+  it('should render the value in a span if no location is provided', async() => {
+    const wrapper = await mount(LinkDetail, {
+      propsData: {
+        row: { detailLocation: null }, value: 'test-name', col: { }
+      },
+      stubs: { nLink: RouterLinkStub }
+    });
+    const span = wrapper.find('span span');
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.exists()).toBe(false);
+
+    expect(span.element.innerHTML).toContain('test-name');
+  });
+
+  it('should use getCustomDetailLink if defined', async() => {
+    const location = 'route-somewhere';
+    const wrapper = await mount(LinkDetail, {
+      propsData: {
+        row: { detailLocation: location }, value: 'test-name', col: { }, getCustomDetailLink: () => 'custom-link'
+      },
+      stubs: { nLink: RouterLinkStub }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.props().to).toBe('custom-link');
+  });
+
+  it('should use reference to find location if defined', async() => {
+    const location = 'route-somewhere';
+    const wrapper = await mount(LinkDetail, {
+      propsData: {
+        row: { detailLocation: location, otherKey: 'other-location' }, value: 'test-name', col: { }, reference: 'otherKey'
+      },
+      stubs: { nLink: RouterLinkStub }
+    });
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.props().to).toBe('other-location');
+  });
+});

package/components/formatter/__tests__/LiveDate.test.ts

@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils';
+import LiveDate from '@shell/components/formatter/LiveDate.vue';
+import dayjs from 'dayjs';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+const defaultMock = {
+  $store: {
+    getters: {
+      'prefs/get':   jest.fn(),
+      'i18n/t':      ( unitKey: string, { count }: any) => unitKey.split('.')[1] + (count > 1 ? 's' : ''),
+      'i18n/exists': () => false,
+
+    }
+  },
+};
+
+describe('component: LiveDate', () => {
+  it('should show a dash if no date is provided', () => {
+    const wrapper = mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { mocks: defaultMock });
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe('-');
+  });
+
+  it('should say just now when the time provided is the current time', async() => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      mocks:     defaultMock,
+      propsData: { value: dayjs().toString() }
+    });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toContain('Just now');
+  });
+
+  it('should display difference between value and current time', async() => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { mocks: defaultMock, propsData: { value: Date.now() - 5000 } });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toContain('5 secs');
+  });
+
+  // this test calls a component method directly: we're testing this because it's how 'live' formatters are used in sortabletable
+  it('should recompute and update the displayed value when prompted', async() => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      mocks:     defaultMock,
+      propsData: { value: dayjs().toString() }
+    });
+
+    let element = wrapper.find('span');
+
+    expect(element.text()).toContain('Just now');
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    await wrapper.vm.liveUpdate(Date.now());
+
+    element = wrapper.find('span');
+    expect(element.text()).toContain('1 sec');
+  });
+
+  it('should include ago suffix if enabled', async() => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { mocks: defaultMock, propsData: { value: Date.now() - 5000, addSuffix: true } });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toContain('5 secs ago');
+  });
+
+  it.each([
+    [86400000, '1 day'],
+    [82800000, '23 hours'],
+    [3540000, '59 mins']
+  ])('should use the largest sensible time unit', async(msAgo, displayValue) => {
+    const wrapper = await mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      mocks:     defaultMock,
+      propsData: { value: Date.now() - msAgo }
+    });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toContain(displayValue);
+  });
+});

package/components/formatter/__tests__/Si.test.ts

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+import Si from '@shell/components/formatter/Si.vue';
+
+describe('component: Si formatter', () => {
+  it('should format integers as Bytes', async() => {
+    const wrapper = await mount(Si, { propsData: { value: 13 } });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe('13 B');
+  });
+
+  it.each([
+    ['1024 Mi', '1 GiB'],
+    ['1024', '1 KiB'],
+    ['2048 GiB', '2 TiB']
+  ])('should parse and re-format Si input strings', async(input, out) => {
+    const wrapper = await mount(Si, { propsData: { value: input, needParseSi: true } });
+
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe(out);
+  });
+
+  it('should allow additional si formatting opts', async() => {
+    const wrapper = await mount(Si, {
+      propsData: {
+        value: '1 TiB', needParseSi: true, opts: { maxExponent: 3 }
+      }
+    });
+    const element = wrapper.find('span');
+
+    expect(element.text()).toBe('1024 GiB');
+  });
+});

package/components/graph/LinePlot.vue

@@ -2,7 +2,7 @@
 import * as d3 from 'd3';
 export default {
   props: {
-    graphWidth:      {
+    graphWidth: {
       type:     Number,
       required: true
     },

package/components/graph/ProgressArc.vue

@@ -6,7 +6,7 @@ export default {
       type:    Number,
       default: 0
     },
-    graphWidth:      {
+    graphWidth: {
       type:     Number,
       required: true
     },
@@ -37,10 +37,10 @@ export default {
       const arc = d3.arc();
 
       return arc({
-        innerRadius:  vm.innerRadius,
-        outerRadius:  vm.outerRadius,
-        endAngle:     2 * (Math.PI),
-        startAngle:   0
+        innerRadius: vm.innerRadius,
+        outerRadius: vm.outerRadius,
+        endAngle:    2 * (Math.PI),
+        startAngle:  0
       });
     },
     arc() {

package/components/nav/GlobalLoading.vue

@@ -6,7 +6,7 @@ export default {
 
   data: () => ({ loading: false }),
 
-  methods:    {
+  methods: {
     start() {
       this.loading = true;
     },

package/components/nav/Header.vue

@@ -49,7 +49,7 @@ export default {
       searchShortcut,
       shellShortcut,
       LOGGED_OUT,
-      navHeaderRight:         null
+      navHeaderRight:    null
     };
   },
 
@@ -296,7 +296,6 @@ export default {
 <template>
   <header
     ref="header"
-    class="header-layout"
   >
     <div>
       <TopLevelMenu v-if="isMultiCluster || !isSingleProduct" />

package/components/nav/Jump.vue

@@ -10,8 +10,8 @@ export default {
   data() {
     return {
       isMac,
-      value:       '',
-      groups:      null,
+      value:  '',
+      groups: null,
     };
   },
 
@@ -91,7 +91,7 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  .search, .search:hover, search:focus {
+  .search, .search:hover, .search:focus {
     position: relative;
     background-color: var(--dropdown-bg);
     border-radius: 0;

package/components/nav/NamespaceFilter.vue

@@ -87,7 +87,8 @@ export default {
       const t = this.$store.getters['i18n/t'];
       let out = [];
 
-      if (this.currentProduct.customNamespaceFilter) {
+      // TODO: Add return info
+      if (this.currentProduct?.customNamespaceFilter && this.currentProduct?.inStore) {
         // Sometimes the component can show before the 'currentProduct' has caught up, so access the product via the getter rather
         // than caching it in the `fetch`
         return this.$store.getters[`${ this.currentProduct.inStore }/namespaceFilterOptions`]({
@@ -96,6 +97,7 @@ export default {
         });
       }
 
+      // TODO: Add return info
       if (!this.currentProduct?.hideSystemResources) {
         out = [
           {
@@ -129,6 +131,11 @@ export default {
       }
 
       const inStore = this.$store.getters['currentStore'](NAMESPACE);
+
+      if (!inStore) {
+        return out;
+      }
+
       let namespaces = sortBy(
         this.$store.getters[`${ inStore }/all`](NAMESPACE),
         ['nameDisplay']
@@ -249,19 +256,21 @@ export default {
 
     value: {
       get() {
+        // Use last picked filter from user preferences
         const prefs = this.$store.getters['prefs/get'](NAMESPACE_FILTERS);
-        const prefDefault = this.currentProduct.customNamespaceFilter ? [] : [ALL_USER];
-        const values = prefs[this.key] || prefDefault;
+
+        const prefDefault = this.currentProduct?.customNamespaceFilter ? [] : [ALL_USER];
+        const values = prefs && prefs[this.key] ? prefs[this.key] : prefDefault;
         const options = this.options;
 
         // Remove values that are not valid options
-        const out = values
+        const filters = values
           .map((value) => {
             return findBy(options, 'id', value);
           })
           .filter(x => !!x);
 
-        return out;
+        return filters;
       },
 
       set(neu) {
@@ -291,7 +300,7 @@ export default {
         // If there was something selected and you remove it, go back to user by default
         // Unless it was user or all
         if (neu.length === 0 && !hadUser && !hadAll) {
-          ids = this.currentProduct.customNamespaceFilter ? [] : [ALL_USER];
+          ids = this.currentProduct?.customNamespaceFilter ? [] : [ALL_USER];
         } else {
           ids = neu.map(x => x.id);
         }
@@ -426,14 +435,23 @@ export default {
       }
     },
     inputKeyHandler(e) {
-      if (e.keyCode === KEY.DOWN ) {
+      switch (e.keyCode) {
+      case KEY.DOWN:
         e.preventDefault();
         e.stopPropagation();
         this.down(true);
-      } else if (e.keyCode === KEY.TAB) {
+        break;
+      case KEY.TAB:
         // Tab out of the input box
         this.close();
         e.target.blur();
+        break;
+      case KEY.CR:
+        if (this.filtered.length === 1) {
+          this.selectOption(this.filtered[0]);
+          this.filter = '';
+        }
+        break;
       }
     },
     mouseOver(event) {
@@ -553,6 +571,7 @@ export default {
 <template>
   <div
     class="ns-filter"
+    data-testid="namespaces-filter"
     tabindex="0"
     @focus="open()"
   >
@@ -561,53 +580,68 @@ export default {
       class="ns-glass"
       @click="close()"
     />
-    <!-- Dropdown control -->
+
+    <!-- Select Dropdown control -->
     <div
       ref="dropdown"
       class="ns-dropdown"
+      data-testid="namespaces-dropdown"
       :class="{ 'ns-open': isOpen }"
       @click="toggle()"
     >
+      <!-- No filters found or available -->
       <div
         v-if="value.length === 0"
         ref="values"
+        data-testid="namespaces-values-none"
         class="ns-values"
       >
         {{ t('nav.ns.all') }}
       </div>
+
+      <!-- Filtered by set with custom label E.g. "All namespaces" -->
       <div
         v-else-if="isSingleSpecial"
         ref="values"
+        data-testid="namespaces-values-label"
         class="ns-values"
       >
         {{ value[0].label }}
       </div>
+
+      <!-- All the selected namespaces -->
       <div
         v-else
         ref="values"
         v-tooltip="tooltip"
+        data-testid="namespaces-values"
         class="ns-values"
       >
         <div
           v-if="total"
           ref="total"
+          data-testid="namespaces-values-total"
           class="ns-value ns-abs"
         >
           {{ t('namespaceFilter.selected.label', { total }) }}
         </div>
         <div
-          v-for="ns in value"
+          v-for="(ns, j) in value"
           ref="value"
           :key="ns.id"
+          :data-testid="`namespaces-value-${j}`"
           class="ns-value"
         >
           <div>{{ ns.label }}</div>
           <i
             class="icon icon-close"
+            :data-testid="`namespaces-values-close-${j}`"
             @click="removeOption(ns, $event)"
           />
         </div>
       </div>
+
+      <!-- Inform user if more namespaces are selected -->
       <div
         v-if="hidden > 0"
         ref="more"
@@ -630,9 +664,12 @@ export default {
       class="hide"
       @shortkey="open()"
     />
+
+    <!-- Dropdown menu -->
     <div
       v-if="isOpen"
       class="ns-dropdown-menu"
+      data-testid="namespaces-menu"
     >
       <div class="ns-controls">
         <div class="ns-input">
@@ -663,12 +700,16 @@ export default {
         role="list"
       >
         <div
-          v-for="opt in filtered"
+          v-for="(opt, i) in filtered"
           :id="opt.elementId"
           :key="opt.id"
           tabindex="0"
           class="ns-option"
-          :class="{'ns-selected': opt.selected}"
+          :class="{
+            'ns-selected': opt.selected,
+            'ns-single-match': filtered.length === 1 && !opt.selected,
+          }"
+          :data-testid="`namespaces-option-${i}`"
           @click="selectOption(opt)"
           @mouseover="mouseOver($event)"
           @keydown="itemKeyHandler($event, opt)"
@@ -695,6 +736,7 @@ export default {
         <div
           v-if="filtered.length === 0"
           class="ns-none"
+          data-testid="namespaces-option-none"
         >
           {{ t('namespaceFilter.noMatchingOptions') }}
         </div>
@@ -830,25 +872,32 @@ export default {
             }
           }
         }
-      &.ns-selected:not(:hover) {
-        .ns-item {
-          > * {
-            color: var(--dropdown-hover-bg);
+        &.ns-selected:not(:hover) {
+          .ns-item {
+            > * {
+              color: var(--dropdown-hover-bg);
+            }
           }
         }
-      }
-      &.ns-selected {
-        &:hover,&:focus {
+        &.ns-selected {
+          &:hover,&:focus {
+            .ns-item {
+              > * {
+                background-color: var(--dropdown-hover-bg);
+                color: var(--dropdown-hover-text);
+              }
+            }
+          }
+        }
+        &.ns-single-match {
           .ns-item {
+            background-color: var(--dropdown-hover-bg);
             > * {
-              background-color: var(--dropdown-hover-bg);
               color: var(--dropdown-hover-text);
             }
           }
         }
       }
-
-      }
     }
 
     .ns-dropdown {

package/components/nav/TopLevelMenu.vue

@@ -27,12 +27,12 @@ export default {
     const hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
 
     return {
-      shown:          false,
+      shown:         false,
       displayVersion,
       fullVersion,
-      uiCommit:       UI_COMMIT,
-      uiVersion:      UI_VERSION,
-      clusterFilter:  '',
+      uiCommit:      UI_COMMIT,
+      uiVersion:     UI_VERSION,
+      clusterFilter: '',
       hasProvCluster,
     };
   },

package/components/nav/Type.vue

@@ -8,7 +8,7 @@ export default {
 
   components: { Favorite },
 
-  props:      {
+  props: {
     type: {
       type:     Object,
       required: true

package/components/nav/WindowManager/ChartReadme.vue

@@ -5,7 +5,7 @@ import Window from './Window';
 export default {
   components: { Window, ChartReadme },
 
-  props:      {
+  props: {
     // The definition of the tab itself
     tab: {
       type:     Object,