@rancher/shell 0.2.4 → 0.3.0

package/components/PromptRestore.vue

@@ -33,17 +33,17 @@ export default {
 
   data() {
     return {
-      errors:              [],
-      labels:              {},
-      restoreMode:         'all',
-      loaded:              false,
-      allSnapshots:        {},
-      sortedSnapshots:     [],
-      selectedSnapshot:    null,
+      errors:           [],
+      labels:           {},
+      restoreMode:      'all',
+      loaded:           false,
+      allSnapshots:     {},
+      sortedSnapshots:  [],
+      selectedSnapshot: null,
     };
   },
 
-  computed:   {
+  computed: {
     // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot or an etcdBackup resource
     ...mapState('action-menu', ['showPromptRestore', 'toRestore']),
     ...mapGetters({ t: 'i18n/t' }),
@@ -160,16 +160,16 @@ export default {
           const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
 
           set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
-            generation:         now + 1,
-            name:               this.snapshot.name,
-            restoreRKEConfig:   this.restoreMode,
+            generation:       now + 1,
+            name:             this.snapshot.name,
+            restoreRKEConfig: this.restoreMode,
           });
 
           await cluster.save();
         } else {
           await this.$store.dispatch('rancher/request', {
-            url:           `/v3/clusters/${ escape(this.snapshot.clusterId) }?action=restoreFromEtcdBackup`,
-            method:        'post',
+            url:    `/v3/clusters/${ escape(this.snapshot.clusterId) }?action=restoreFromEtcdBackup`,
+            method: 'post',
             data:   {
               etcdBackupId:     this.snapshot.id,
               restoreRkeConfig: this.restoreMode,

package/components/Questions/Question.js

@@ -8,7 +8,7 @@ export default {
     },
 
     mode: {
-      type:     String,
+      type:    String,
       default: _EDIT,
     },
 

package/components/ResourceCancelModal.vue

@@ -1,12 +1,12 @@
 <script>
 export default {
-  props:      {
+  props: {
     isCancelModal: {
-      type:     Boolean,
+      type:    Boolean,
       default: false
     },
     isForm: {
-      type:     Boolean,
+      type:    Boolean,
       default: false
     },
   },

package/components/ResourceDetail/Masthead.vue

@@ -23,7 +23,7 @@ export default {
   components: {
     BadgeState, Banner, ButtonGroup
   },
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {

package/components/ResourceList/Masthead.vue

@@ -24,7 +24,7 @@ export default {
       required: true,
     },
     favoriteResource: {
-      type:     String,
+      type:    String,
       default: null
     },
     schema: {

package/components/ResourceSummary.vue

@@ -42,9 +42,9 @@ export function resourceCounts(store, resource) {
 export default {
   components: { SimpleBox },
 
-  props:      {
+  props: {
     resource: {
-      type:     String,
+      type:    String,
       default: ''
     },
 
@@ -74,8 +74,8 @@ export default {
       }
 
       const route = {
-        name:     'c-cluster-product-resource',
-        params:   {
+        name:   'c-cluster-product-resource',
+        params: {
           product:  this.$store.getters['currentProduct'].name,
           resource: this.resource,
         }

package/components/RoleBindings.vue

@@ -131,18 +131,18 @@ export default {
           search:   'subjectKind',
         },
         {
-          name:      'subject',
-          labelKey:  'tableHeaders.subject',
-          value:     'userObj.labelForSelect',
-          sort:      'userObj.labelForSelect',
-          search:    'userObj.labelForSelect',
+          name:     'subject',
+          labelKey: 'tableHeaders.subject',
+          value:    'userObj.labelForSelect',
+          sort:     'userObj.labelForSelect',
+          search:   'userObj.labelForSelect',
         },
         {
-          name:      'role',
-          labelKey:  'tableHeaders.role',
-          value:     'roleObj.nameWithinProduct',
-          sort:      'roleObj.nameWithinProduct',
-          search:    'roleObj.nameWithinProduct',
+          name:     'role',
+          labelKey: 'tableHeaders.role',
+          value:    'roleObj.nameWithinProduct',
+          sort:     'roleObj.nameWithinProduct',
+          search:   'roleObj.nameWithinProduct',
         },
       ];
     },
@@ -219,15 +219,15 @@ export default {
           }
 
           return {
-            subjectKind:      subject.kind,
-            subject:          subject.name,
-            userObj:          findBy(this.allUsers, 'id', subject.name),
-            roleKind:         binding.roleRef.kind,
-            role:             binding.roleRef.name,
-            roleObj:          findBy(this.allRoles, 'id', binding.roleRef.name),
-            existing:         binding,
-            existingIdx:      i,
-            remove:           false,
+            subjectKind: subject.kind,
+            subject:     subject.name,
+            userObj:     findBy(this.allUsers, 'id', subject.name),
+            roleKind:    binding.roleRef.kind,
+            role:        binding.roleRef.name,
+            roleObj:     findBy(this.allRoles, 'id', binding.roleRef.name),
+            existing:    binding,
+            existingIdx: i,
+            remove:      false,
           };
         }
       });

package/components/SimpleBox.vue

@@ -38,13 +38,17 @@ export default {
       class="top"
     >
       <slot name="title">
-        <h2 v-if="title">
+        <h2
+          v-if="title"
+          data-testid="simple-box-title"
+        >
           {{ title }}
         </h2>
       </slot>
       <div
         v-if="canClose || pref"
         class="close-button"
+        data-testid="simple-box-close"
         @click="closeBox($event)"
       >
         <i class="icon icon-close" />

package/components/SingleClusterInfo.vue

@@ -42,11 +42,11 @@ export default {
 
     totalCountGaugeInput() {
       const totalInput = {
-        name:            this.t('clusterIndexPage.resourceGauge.totalResources'),
-        total:           0,
-        useful:          0,
-        warningCount:    0,
-        errorCount:      0
+        name:         this.t('clusterIndexPage.resourceGauge.totalResources'),
+        total:        0,
+        useful:       0,
+        warningCount: 0,
+        errorCount:   0
       };
 
       this.accessibleResources.forEach((resource) => {

package/components/SortableTable/THead.vue

@@ -52,8 +52,8 @@ export default {
       required: true,
     },
     checkWidth: {
-      type:     Number,
-      default:  30,
+      type:    Number,
+      default: 30,
     },
     rowActionsWidth: {
       type:     Number,
@@ -408,6 +408,10 @@ export default {
         display: flex;
         align-items: center;
 
+        > span {
+          display: contents;
+        }
+
         &.not-filterable {
           margin-top: -2px;
 

package/components/SortableTable/actions.js

@@ -13,6 +13,8 @@ export default {
       bulkActionAvailabilityClass: 'action-availability',
 
       hiddenActions: [],
+
+      updateHiddenBulkActions: debounce(this.protectedUpdateHiddenBulkActions, 10)
     };
   },
 
@@ -79,7 +81,7 @@ export default {
     /**
      * Determine if any actions wrap over to a new line, if so group them into a dropdown instead
      */
-    updateHiddenBulkActions: debounce(function() {
+    protectedUpdateHiddenBulkActions() {
       if (!this.$refs.container) {
         return;
       }
@@ -146,6 +148,6 @@ export default {
       if (!showActionsDropdown) {
         actionsDropdown.style.display = 'none';
       }
-    }, 10)
+    }
   }
 };

package/components/SortableTable/index.vue

@@ -89,7 +89,7 @@ export default {
     },
     keyField: {
       // Field that is unique for each row.
-      type:     String,
+      type:    String,
       default: '_key',
     },
 
@@ -318,12 +318,12 @@ export default {
     }
 
     return {
-      currentPhase:        ASYNC_BUTTON_STATES.WAITING,
-      expanded:            {},
+      currentPhase:     ASYNC_BUTTON_STATES.WAITING,
+      expanded:         {},
       searchQuery,
       eventualSearchQuery,
-      actionOfInterest:    null,
-      loadingDelay:        false,
+      actionOfInterest: null,
+      loadingDelay:     false,
     };
   },
 
@@ -525,10 +525,10 @@ export default {
 
     classObject() {
       return {
-        'top-divider':     this.topDivider,
-        'body-dividers':   this.bodyDividers,
-        'overflow-y':      this.overflowY,
-        'overflow-x':      this.overflowX,
+        'top-divider':   this.topDivider,
+        'body-dividers': this.bodyDividers,
+        'overflow-y':    this.overflowY,
+        'overflow-x':    this.overflowX,
       };
     },
 

package/components/SortableTable/selection.js

@@ -547,14 +547,14 @@ function _add(map, act, incrementCounts = true) {
     obj.allEnabled = false;
   }
 
-  if ( act.enabled === false ) {
+  if ( !act.enabled ) {
     obj.allEnabled = false;
   } else {
     obj.anyEnabled = true;
   }
 
   if ( incrementCounts ) {
-    obj.available = (obj.available || 0) + (act.enabled === false ? 0 : 1 );
+    obj.available = (obj.available || 0) + (!act.enabled ? 0 : 1 );
     obj.total = (obj.total || 0) + 1;
   }
 

package/components/TableSparkLine.vue

@@ -11,7 +11,7 @@ export default {
       type:    Number,
       default: 20
     },
-    inputDatum:  {
+    inputDatum: {
       type:    Number,
       default: 0
     },

package/components/TypeDescription.vue

@@ -8,7 +8,7 @@ import { CATALOG } from '@shell/config/types';
 export default {
   components: { Banner },
 
-  props:      {
+  props: {
     resource: {
       type:     String,
       required: true

package/components/Wizard.vue

@@ -27,7 +27,7 @@ export default {
     Loading,
   },
 
-  props:      {
+  props: {
     /*
   steps need: {
     name: String - this will be the slot name

package/components/YamlEditor.vue

@@ -19,8 +19,8 @@ export default {
   },
   props: {
     editorMode: {
-      type:      String,
-      default:  EDITOR_MODES.EDIT_CODE,
+      type:    String,
+      default: EDITOR_MODES.EDIT_CODE,
       validator(value) {
         return Object.values(EDITOR_MODES).includes(value);
       }
@@ -42,13 +42,13 @@ export default {
     },
 
     value: {
-      type:     [String, Object],
-      default:  '',
+      type:    [String, Object],
+      default: '',
     },
 
     hidePreviewButtons: {
-      type:     Boolean,
-      default:  false,
+      type:    Boolean,
+      default: false,
     },
 
     /**

package/components/__tests__/ApplicationCard.test.ts

@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils';
+import ApplicationCard from '@shell/components/cards/ApplicationCard.vue';
+
+describe('component: ApplicationCard', () => {
+  const wrapper = mount(ApplicationCard, {
+    slots: {
+      cardIcon:   '<i class="icon icon-fw icon-epinio"></i>',
+      'top-left': '<h1>Routes</h1> <ul><li> <a target="_blank" rel="noopener noreferrer nofollow"> route1 </a> </li> <li><a target="_blank" rel="noopener noreferrer nofollow"> route1 </a></li> </ul>',
+    }
+  });
+
+  it.each([
+    'cardIcon',
+    'top-left',
+    'top-right',
+    'resourcesCount',
+  ])('should have a populated %p slot', (slot) => {
+    const content = '<div>text</div>';
+    const ele = mount(ApplicationCard, { slots: { [slot]: content } });
+
+    expect(ele.find(`[data-testid="${ slot }-section`).find('div').html()).toContain(content);
+  });
+
+  it('should have card-icon slot with an icon', () => {
+    expect(wrapper.find('[data-testid="cardIcon-section"]').find('i').classes()).toContain('icon-epinio');
+  });
+});

package/components/__tests__/Collapse.spec.ts

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils';
+import Collapse from '@shell/components/Collapse.vue';
+
+describe('component: Collapse.vue', () => {
+  describe('closed', () => {
+    const wrapper = mount(Collapse, { propsData: { open: false } });
+
+    it('is closed', () => {
+      const content = wrapper.find(`[data-testid="collapse-content"]`);
+
+      expect(content.element).toBeUndefined();
+    });
+
+    it('icon is chevron right', () => {
+      const icon = wrapper.find(`[data-testid="collapse-icon-right"]`);
+
+      expect(icon.element).toBeDefined();
+    });
+  });
+
+  describe('collapsed', () => {
+    const wrapper = mount(Collapse, { propsData: { open: true } });
+
+    it('is collapse', () => {
+      const content = wrapper.find(`[data-testid="collapse-content"]`);
+
+      expect(content.element).toBeDefined();
+    });
+
+    it('icon should is chevron down', () => {
+      const icon = wrapper.find(`[data-testid="collapse-icon-down"]`);
+
+      expect(icon.element).toBeDefined();
+    });
+
+    it('emit', async() => {
+      const collapse = wrapper.find(`[data-testid="collapse-div"]`);
+
+      await collapse.trigger('click');
+
+      expect(wrapper.emitted('update:open')).toBeTruthy();
+    });
+  });
+});

package/components/__tests__/CruResource.test.ts

@@ -40,10 +40,10 @@ describe('component: CruResource', () => {
         errors
       },
       components: {
-        ResourceYaml:               { template: '<div></div> ' },
-        ResourceCancelModal:        { template: '<div></div> ' },
+        ResourceYaml:        { template: '<div></div> ' },
+        ResourceCancelModal: { template: '<div></div> ' },
       },
-      mocks:      {
+      mocks: {
         $store: {
           getters: {
             currentStore:              () => 'current_store',

package/components/__tests__/NamespaceFilter.test.ts

@@ -0,0 +1,213 @@
+import { mount } from '@vue/test-utils';
+import NamespaceFilter from '@shell/components/nav/NamespaceFilter.vue';
+
+describe('component: NamespaceFilter', () => {
+  describe('given namespace select input', () => {
+    it('should be visible', () => {
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [],
+        },
+        directives: { shortkey: () => jest.fn() }
+      });
+      const filter = wrapper.find(`[data-testid="namespaces-filter"]`);
+
+      expect(filter).toBeDefined();
+    });
+
+    it('should display no namespace selection', () => {
+      const text = 'none';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [],
+        },
+        mocks:      { $store: { getters: { 'i18n/t': () => text } } },
+        directives: { shortkey: () => jest.fn() }
+      });
+      const element = wrapper.find(`[data-testid="namespaces-values-none"]`).element.textContent;
+
+      expect(element).toContain(text);
+    });
+
+    it('should display the default namespace', () => {
+      const text = 'special namespace';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => ([{
+            label: text,
+            kind:  'special',
+          }]),
+        },
+        directives: { shortkey: () => jest.fn() }
+      });
+
+      const element = wrapper.find(`[data-testid="namespaces-values-label"]`).element.textContent;
+
+      expect(element).toContain(text);
+    });
+
+    it('should display the selected namespace', () => {
+      const text = 'current namespace';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [{ label: text }],
+        },
+        directives: { shortkey: () => jest.fn() }
+      });
+
+      const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
+
+      expect(element).toContain(text);
+    });
+
+    it('should display the selected namespace from user preferences if options are available', () => {
+      const text = 'my preference';
+      const key = 'local';
+      const preferences = {
+        [key]: [
+          `ns://${ text }`
+        ]
+      };
+
+      jest.spyOn(NamespaceFilter.computed.value, 'set');
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [{
+            id:    `ns://${ text }`,
+            kind:  'namespace',
+            label: text
+          }],
+          currentProduct: () => undefined,
+          key:            () => key,
+        },
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/t':    () => text,
+              'prefs/get': () => preferences
+            },
+          }
+        },
+        directives: { shortkey: () => jest.fn() }
+      });
+
+      const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
+
+      expect(element).toContain(text);
+    });
+  });
+
+  describe('given namespace menu options', () => {
+    it('should be opened and displayed on click', async() => {
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [],
+        },
+        directives: { shortkey: () => jest.fn() }
+      });
+      const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
+
+      await dropdown.trigger('click');
+      const menu = wrapper.find(`[data-testid="namespaces-menu"]`);
+
+      expect(menu).toBeDefined();
+    });
+
+    it('should contain no options', async() => {
+      const text = 'no options';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [],
+        },
+        mocks:      { $store: { getters: { 'i18n/t': () => text } } },
+        directives: { shortkey: () => jest.fn() }
+      });
+      const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
+
+      await dropdown.trigger('click');
+      const option = wrapper.find(`[data-testid="namespaces-option-none"]`).element.textContent;
+
+      expect(option).toContain(text);
+    });
+
+    it('should contain an option', async() => {
+      const text = 'my option';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [
+            {
+              kind:  'namespace',
+              label: `default-${ text }`,
+            },
+          ],
+          options: () => [],
+          value:   () => [],
+        },
+        mocks:      { $store: { getters: { 'i18n/t': () => text } } },
+        directives: { shortkey: () => jest.fn() }
+      });
+      const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
+
+      await dropdown.trigger('click');
+      const option = wrapper.find(`[data-testid="namespaces-option-0"]`).element.textContent;
+
+      expect(option).toContain(text);
+    });
+
+    it('should set the option as user preference', async() => {
+      const text = 'my option';
+      const key = 'my key';
+      const value = {
+        ids: [text],
+        key
+      };
+      const actionName = 'switchNamespaces';
+      const action = jest.fn();
+
+      jest.spyOn(NamespaceFilter.computed.value, 'get').mockReturnValue([]);
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [
+            {
+              label:     text,
+              key,
+              elementId: text,
+              id:        text,
+              kind:      'namespace',
+            },
+          ],
+          options:        () => [],
+          currentProduct: () => undefined,
+          key:            () => key,
+        },
+        mocks: {
+          $store: {
+            getters:  { 'i18n/t': () => text },
+            dispatch: action
+          }
+        },
+        directives: { shortkey: () => jest.fn() }
+      });
+
+      await wrapper.find(`[data-testid="namespaces-dropdown"]`).trigger('click');
+      await wrapper.find(`[data-testid="namespaces-option-0"]`).trigger('click');
+
+      expect(action).toHaveBeenCalledWith(actionName, value);
+    });
+
+    it.todo('should generate the options based on the Rancher resources');
+  });
+});