@rancher/shell 0.5.2 → 1.2.0

package/plugins/steve/__tests__/getters.spec.ts

@@ -5,50 +5,73 @@ const { urlFor, urlOptions } = _getters;
 describe('steve: getters', () => {
   describe('steve > getters > urlFor', () => {
     // we're not testing function output based off of state or getter inputs here since they are dependencies
-    const state = { config: { baseUrl: 'protocol' } };
+    const baseUrl = '/v1';
+    const collectionUrl = 'https://abc.com/v1/urlFoo';
+    const namespace = 'myNamespace';
+    const state = { config: { baseUrl } };
     const getters = {
-      normalizeType: (type) => type,
-      schemaFor:     (type) => {
-        if (type === 'typeFoo') {
-          return { links: { collection: 'urlFoo' } };
+      normalizeType: (type: string) => type,
+      schemaFor:     (type: string) => {
+        if (type === 'rType') {
+          return { links: { collection: collectionUrl } };
+        }
+        if (type === 'trailingforwardslash') {
+          return { links: { collection: `${ collectionUrl }/` } };
         }
       },
       // this has its own tests so it just returns the input string
-      urlOptions: (string) => string
+      urlOptions: (url: string, opt: any) => {
+        if (opt.addParam) {
+          url += '?param=true';
+        }
+
+        return url;
+      }
     };
 
     const urlForGetter = urlFor(state, getters);
 
     // most tests for this getter will go through the dashboard-store getters test spec, this only tests logic specific to the steve variant
 
-    it('expects urlFor to return a function', () => {
-      expect(typeof urlFor(state, getters)).toBe('function');
-    });
+    it.each([
+      ['rType', undefined, undefined, collectionUrl],
 
-    it('expects function returned by urlFor to return a string a type', () => {
-      expect(urlForGetter('typeFoo')).toBe('protocol/urlFoo');
-    });
+      // No namespace
+      ['rType', undefined, { }, `${ collectionUrl }`],
+      ['rType', undefined, { addParam: true }, `${ collectionUrl }?param=true`],
+      ['rType', 'abc', { }, `${ collectionUrl }/abc`],
+      ['rType', 'abc', { addParam: true }, `${ collectionUrl }/abc?param=true`],
 
-    it('expects function returned by urlFor to return a string containing a namespace when provided with a type and a single namespace string', () => {
-      expect(urlForGetter('typeFoo', undefined, { namespaced: 'nsBar' })).toBe('protocol/urlFoo/nsBar');
-    });
+      // With namespace
+      ['rType', undefined, { namespaced: `${ namespace }` }, `${ collectionUrl }/${ namespace }`],
+      ['rType', undefined, { addParam: true, namespaced: `${ namespace }` }, `${ collectionUrl }/${ namespace }?param=true`],
+      ['rType', 'abc', { namespaced: `${ namespace }` }, `${ collectionUrl }/${ namespace }/abc`],
+      ['rType', 'abc', { addParam: true, namespaced: `${ namespace }` }, `${ collectionUrl }/${ namespace }/abc?param=true`],
+
+      // With url (mostly no op)
+      ['rType', undefined, { url: `${ baseUrl }/urlFoo`, namespaced: `${ namespace }` }, `${ baseUrl }/urlFoo`],
+      ['rType', undefined, { url: `${ baseUrl }/urlFoo/abc`, namespaced: `${ namespace }` }, `${ baseUrl }/urlFoo/abc`],
+      ['rType', undefined, { url: `/urlFoo`, namespaced: `${ namespace }` }, `/urlFoo`],
+      ['rType', undefined, { url: `/urlFoo/abc`, namespaced: `${ namespace }` }, `/urlFoo/abc`],
 
-    it('expects function returned by urlFor to return a string not containing a namespace when provided with a type and a multiple namespaces string', () => {
-      expect(urlForGetter('typeFoo', undefined, { namespaced: ['nsBar', 'nsBaz'] })).toBe('protocol/urlFoo');
+      // multiple namespaces (no op)
+      ['rType', undefined, { namespaced: [`${ namespace }`, 'nsBaz'] }, `${ collectionUrl }`],
+
+      // handle trailing space
+      ['trailingforwardslash', undefined, { namespaced: `${ namespace }` }, `${ collectionUrl }/${ namespace }`],
+
+    ])("given type '%p', id '%p' and opt '%p', should get url '%p'", (type, id, opt, url) => {
+      expect(urlForGetter(type, id, opt)).toBe(url);
     });
   });
+
   describe('steve > getters > urlOptions', () => {
     // we're not testing function output based off of state or getter inputs here since they are dependencies
     const state = { config: { baseUrl: 'protocol' } };
     const getters = {
       normalizeType: (type) => type,
-      schemaFor:     (type) => {
-        if (type === 'typeFoo') {
-          return { links: { collection: 'urlFoo' } };
-        }
-      },
       // this has its own tests so it just returns the input string
-      urlOptions: (string) => string
+      urlOptions:    (string) => string
     };
 
     const urlOptionsGetter = urlOptions();
@@ -71,19 +94,28 @@ describe('steve: getters', () => {
     it('returns a string with a single filter statement applied and formatted for steve if a single filter statement is applied and the url starts with "/v1"', () => {
       expect(urlOptionsGetter('/v1/foo', { filter: { bar: 'baz' } })).toBe('/v1/foo?filter=bar=baz&exclude=metadata.managedFields');
     });
+    it('returns a string with a single filter statement applied and formatted for steve if a single filter statement is NOT applied and the url starts with "/k8s/clusters/c-m-n4x45x4b/v1/"', () => {
+      expect(urlOptionsGetter('/k8s/clusters/c-m-n4x45x4b/v1/foo', { filter: { bar: 'baz' } })).toBe('/k8s/clusters/c-m-n4x45x4b/v1/foo?bar=baz');
+    });
     it('returns a string with a multiple filter statements applied if a single filter statement is applied', () => {
       expect(urlOptionsGetter('foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('foo?bar=baz&far=faz');
     });
     it('returns a string with a multiple filter statements applied and formatted for steve if a single filter statement is applied and the url starts with "/v1"', () => {
       expect(urlOptionsGetter('/v1/foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('/v1/foo?filter=bar=baz&far=faz&exclude=metadata.managedFields');
     });
+    it('returns a string with a labelSelector and formatted for steve if the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { labelSelector: 'a=b' })).toBe('/v1/foo?labelSelector=a=b&exclude=metadata.managedFields');
+    });
+    it('returns a string with a labelSelector and filter, and formatted for steve if the url starts with "/v1"', () => {
+      expect(urlOptionsGetter('/v1/foo', { labelSelector: 'a=b', filter: { bar: 'baz', far: 'faz' } })).toBe('/v1/foo?labelSelector=a=b&filter=bar=baz&far=faz&exclude=metadata.managedFields');
+    });
     it('returns a string with an exclude statement for "bar" and "metadata.managedFields" if excludeFields is a single element array with the string "bar" and the url starts with "/v1/"', () => {
       expect(urlOptionsGetter('/v1/foo', { excludeFields: ['bar'] })).toBe('/v1/foo?exclude=bar&exclude=metadata.managedFields');
     });
     it('returns a string without an exclude statement if excludeFields is but the url does not start with "/v1/"', () => {
       expect(urlOptionsGetter('foo', { excludeFields: ['bar'] })).toBe('foo');
     });
-    it('returns a string without an exclude statement if excludeFields is an array but the URL doesnt include the "/v1/ string"', () => {
+    it('returns a string without an exclude statement if excludeFields is an array but the URL doesn\'t include the "/v1/ string"', () => {
       expect(urlOptionsGetter('foo', { excludeFields: ['bar'] })).toBe('foo');
     });
     it('returns a string with a limit applied if a limit is provided', () => {

package/plugins/steve/__tests__/subscribe.spec.ts

@@ -0,0 +1,106 @@
+import { actions } from '../subscribe';
+
+describe('steve: subscribe', () => {
+  describe('actions', () => {
+    describe('watch', () => {
+      const state = {};
+      const getters = {
+        normalizeType: (type: string) => type,
+        schemaFor:     () => null,
+        inError:       () => false,
+        watchStarted:  () => false,
+      };
+      const rootGetters = { 'type-map/isSpoofed': () => false };
+
+      const type = 'test';
+      const selector = undefined;
+      const id = undefined;
+      const revision = 1;
+      const namespace = undefined;
+      const stop = false;
+      const force = undefined;
+
+      it('no schema', () => {
+        const dispatch = jest.fn();
+
+        actions.watch({
+          state, dispatch, getters, rootGetters
+        }, {
+          type, selector, id, revision, namespace, stop, force
+        });
+
+        expect(dispatch).toHaveBeenCalledWith('send', {
+          resourceType:    type,
+          resourceVersion: revision.toString(),
+
+        });
+      });
+
+      it('schema with watch verb', () => {
+        const dispatch = jest.fn();
+        const testGetters = {
+          ...getters,
+          schemaFor: (type: string) => ({ attributes: { verbs: ['watch'] } }),
+        };
+
+        actions.watch({
+          state, dispatch, getters: testGetters, rootGetters
+        }, {
+          type, selector, id, revision, namespace, stop, force
+        });
+
+        expect(dispatch).toHaveBeenCalledWith('send', {
+          resourceType:    type,
+          resourceVersion: revision.toString(),
+        });
+      });
+
+      it('schema with no watch verb', () => {
+        const dispatch = jest.fn();
+        const testGetters = {
+          ...getters,
+          schemaFor: (type: string) => ({ attributes: { verbs: [] } }),
+        };
+
+        actions.watch({
+          state, dispatch, getters: testGetters, rootGetters
+        }, {
+          type, selector, id, revision, namespace, stop, force
+        });
+
+        expect(dispatch).not.toHaveBeenCalled();
+      });
+
+      it('don\'t watch when the watch is in error', () => {
+        const dispatch = jest.fn();
+        const testGetters = {
+          ...getters,
+          inError: (params: any) => true,
+        };
+
+        actions.watch({
+          state, dispatch, getters: testGetters, rootGetters
+        }, {
+          type, selector, id, revision, namespace, stop, force
+        });
+
+        expect(dispatch).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('ws.resource.error', () => {
+      it('handle no permission error', () => {
+        const commit = jest.fn();
+        const getters = { storeName: 'storeName' };
+        const dispatch = undefined;
+
+        const msg = { data: { error: 'the server does not allow this method on the requested resource' } };
+
+        actions['ws.resource.error']({
+          getters, commit, dispatch
+        }, msg);
+        expect(commit).toHaveBeenCalledWith('setInError', { msg, reason: 'NO_PERMS' });
+      });
+    });
+  });
+});

package/plugins/steve/getters.js

@@ -24,14 +24,17 @@ const GC_IGNORE_TYPES = {
   [UI.NAV_LINK]: true,
 };
 
-// Include calls to /v1 AND /k8s/clusters/<cluster id>/v1
-const steveRegEx = new RegExp('(/v1)|(\/k8s\/clusters\/[a-z0-9-]+\/v1)');
-
 export default {
   urlOptions: () => (url, opt) => {
     opt = opt || {};
     const parsedUrl = parse(url);
-    const isSteve = steveRegEx.test(parsedUrl.path);
+    const isSteve = parsedUrl.path.startsWith('/v1');
+
+    // labelSelector
+    if ( opt.labelSelector ) {
+      url += `${ url.includes('?') ? '&' : '?' }labelSelector=${ opt.labelSelector }`;
+    }
+    // End: labelSelector
 
     // Filter
     if ( opt.filter ) {
@@ -120,10 +123,30 @@ export default {
     // `namespaced` is either
     // - a string representing a single namespace - add restriction to the url
     // - an array of namespaces or projects - add restriction as a param
-    if (opt?.namespaced && !pAndNFiltering.isApplicable(opt)) {
-      const parts = url.split('/');
+    if (!opt?.url && opt?.namespaced && !pAndNFiltering.isApplicable(opt)) {
+      // Update path to include `namespace`, but take into account
+      // - if there is an id
+      // - if there are query params
+
+      // Construct a url so query params / fragments are avoided
+      const urlObj = new URL(url);
+      const path = urlObj.pathname;
+
+      if (!!path?.length && path[path.length - 1] === '/') {
+        urlObj.pathname = path.substring(0, path.length - 1);
+      }
+      const parts = urlObj.pathname.split('/');
+
+      if (id) {
+        // namespace should go before the id in the path
+        parts.splice(parts.length - 1, 0, opt.namespaced);
+        urlObj.pathname = parts.join('/');
+      } else {
+        // namespace should go at the end of the path
+        urlObj.pathname = `${ urlObj.pathname.split('/').join('/') }/${ opt.namespaced }`;
+      }
 
-      url = `${ parts.join('/') }/${ opt.namespaced }`;
+      url = urlObj.toString();
     }
 
     return url;

package/plugins/steve/mutations.js

@@ -9,7 +9,6 @@ import {
   batchChanges,
   replace
 } from '@shell/plugins/dashboard-store/mutations';
-import { keyForSubscribe } from '@shell/plugins/steve/resourceWatcher';
 import { perfLoadAll } from '@shell/plugins/steve/performanceTesting';
 import Vue from 'vue';
 import { classify } from '@shell/plugins/dashboard-store/classify';
@@ -151,7 +150,11 @@ export default {
 
   forgetType(state, type) {
     if ( forgetType(state, type) ) {
-      delete state.inError[keyForSubscribe({ type })];
+      Object.keys(state.inError).forEach((key) => {
+        if (key.startsWith(type)) {
+          delete state.inError[key];
+        }
+      });
     }
   },
 

package/plugins/steve/norman-class.js

@@ -3,7 +3,6 @@ import pickBy from 'lodash/pickBy';
 import Vue from 'vue';
 import { matchesSomeRegex } from '@shell/utils/string';
 import Resource from '@shell/plugins/dashboard-store/resource-class';
-import { findBy } from '@shell/utils/array';
 
 export default class NormanModel extends Resource {
   setLabels(val) {
@@ -57,22 +56,4 @@ export default class NormanModel extends Resource {
       Vue.set(this, key, { ...spec[key] });
     });
   }
-
-  isCondition(condition, withStatus = 'True') {
-    if ( !this.conditions ) {
-      return false;
-    }
-
-    const entry = findBy((this.conditions || []), 'type', condition);
-
-    if ( !entry ) {
-      return false;
-    }
-
-    if ( !withStatus ) {
-      return true;
-    }
-
-    return (entry.status || '').toLowerCase() === `${ withStatus }`.toLowerCase();
-  }
 }

package/plugins/steve/steve-class.js

@@ -1,17 +1,5 @@
 import { DESCRIPTION } from '@shell/config/labels-annotations';
 import HybridModel from './hybrid-class';
-import { NEVER_ADD } from '@shell/utils/create-yaml';
-import { deleteProperty } from '@shell/utils/object';
-
-// Some fields that are removed for YAML (NEVER_ADD) are required via API
-const STEVE_ADD = [
-  'metadata.resourceVersion',
-  'metadata.fields',
-  'metadata.clusterName',
-  'metadata.deletionGracePeriodSeconds',
-  'metadata.generateName',
-];
-const STEVE_NEVER_SAVE = NEVER_ADD.filter((na) => !STEVE_ADD.includes(na));
 
 export default class SteveModel extends HybridModel {
   get name() {
@@ -40,14 +28,4 @@ export default class SteveModel extends HybridModel {
 
     this._description = value;
   }
-
-  cleanForSave(data, forNew) {
-    const val = super.cleanForSave(data);
-
-    for (const field of STEVE_NEVER_SAVE) {
-      deleteProperty(val, field);
-    }
-
-    return val;
-  }
 }

package/plugins/steve/subscribe.js

@@ -22,7 +22,8 @@ import Socket, {
   EVENT_DISCONNECT_ERROR,
   NO_WATCH,
   NO_SCHEMA,
-  REVISION_TOO_OLD
+  REVISION_TOO_OLD,
+  NO_PERMS
 } from '@shell/utils/socket';
 import { normalizeType } from '@shell/plugins/dashboard-store/normalize';
 import day from 'dayjs';
@@ -332,6 +333,10 @@ const sharedActions = {
 
     commit('setWantSocket', true);
 
+    if ( process.server ) {
+      return;
+    }
+
     state.debugSocket && console.info(`Subscribe [${ getters.storeName }]`); // eslint-disable-line no-console
 
     const url = `${ state.config.baseUrl }/subscribe`;
@@ -430,6 +435,14 @@ const sharedActions = {
       return;
     }
 
+    const schema = getters.schemaFor(type, false, false);
+
+    if (!!schema?.attributes?.verbs?.includes && !schema.attributes.verbs.includes('watch')) {
+      state.debugSocket && console.info('Will not Watch (type does not have watch verb)', JSON.stringify(params)); // eslint-disable-line no-console
+
+      return;
+    }
+
     // If socket is in error don't try to watch.... unless we `force` it
     const inError = getters.inError(params);
 
@@ -597,7 +610,7 @@ const defaultActions = {
   },
 
   rehydrateSubscribe({ state, dispatch }) {
-    if ( state.wantSocket && !state.socket ) {
+    if ( process.client && state.wantSocket && !state.socket ) {
       dispatch('subscribe');
     }
   },
@@ -635,13 +648,17 @@ const defaultActions = {
       await dispatch('find', {
         type: resourceType,
         id,
-        opt,
+        opt:  {
+          ...opt,
+          // Pass the namespace so `find` can construct the url correctly
+          namespaced: namespace,
+          // Ensure that find calls watch with no revision (otherwise it'll use the revision from the resource which is probably stale)
+          revision:   null
+        },
       });
-      commit('clearInError', params);
 
       return;
     }
-
     let have, want;
 
     if ( selector ) {
@@ -724,9 +741,11 @@ const defaultActions = {
     }
 
     // Try resending any frames that were attempted to be sent while the socket was down, once.
-    for ( const obj of state.pendingFrames.slice() ) {
-      commit('dequeuePendingFrame', obj);
-      dispatch('sendImmediate', obj);
+    if ( !process.server ) {
+      for ( const obj of state.pendingFrames.slice() ) {
+        commit('dequeuePendingFrame', obj);
+        dispatch('sendImmediate', obj);
+      }
     }
   },
 
@@ -844,15 +863,17 @@ const defaultActions = {
     const err = msg.data?.error?.toLowerCase();
 
     if ( err.includes('watch not allowed') ) {
-      commit('setInError', { type: msg.resourceType, reason: NO_WATCH });
+      commit('setInError', { msg, reason: NO_WATCH });
     } else if ( err.includes('failed to find schema') ) {
-      commit('setInError', { type: msg.resourceType, reason: NO_SCHEMA });
+      commit('setInError', { msg, reason: NO_SCHEMA });
     } else if ( err.includes('too old') ) {
       // Set an error for (all) subs of this type. This..
       // 1) blocks attempts by resource.stop to resub (as type is in error)
       // 2) will be cleared when resyncWatch --> watch (with force) --> resource.start completes
-      commit('setInError', { type: msg.resourceType, reason: REVISION_TOO_OLD });
+      commit('setInError', { msg, reason: REVISION_TOO_OLD });
       dispatch('resyncWatch', msg);
+    } else if ( err.includes('the server does not allow this method on the requested resource')) {
+      commit('setInError', { msg, reason: NO_PERMS });
     }
   },
 
@@ -1023,10 +1044,10 @@ const defaultMutations = {
     }
   },
 
-  setInError(state, msg) {
+  setInError(state, { msg, reason }) {
     const key = keyForSubscribe(msg);
 
-    state.inError[key] = msg.reason;
+    state.inError[key] = reason;
   },
 
   clearInError(state, msg) {

package/plugins/transitions.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import Transitions from 'vue2-transitions';
+
+Vue.use(Transitions);

package/plugins/vue-clipboard2.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import VueClipboard from 'vue-clipboard2';
+
+Vue.use(VueClipboard);

package/rancher-components/Accordion/Accordion.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { mapGetters } from 'vuex';
-export default Vue.extend({
+
+export default defineComponent({
   props: {
     title: {
       type:    String,

package/rancher-components/BadgeState/BadgeState.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 
 interface Badge {
   stateBackground: string;
@@ -11,7 +11,7 @@ interface Badge {
  * <p>Represents a badge whose label and color is either taken from the value property or
  * from the label and color properties. The state property takes precedence.</p>
  */
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * A value having the properties `stateBackground` and `stateDisplay`
@@ -59,7 +59,7 @@ export default Vue.extend({
 </script>
 
 <template>
-  <span :class="{'badge-state': true, [bg]: true}">
+  <span :class="['badge-state', bg]">
     <i
       v-if="icon"
       class="icon"

package/rancher-components/Banner/Banner.test.ts

@@ -1,16 +1,12 @@
 import { mount } from '@vue/test-utils';
 import { Banner } from './index';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {
     const label = 'test';
     const wrapper = mount(
       Banner,
-      {
-        directives: { cleanHtmlDirective },
-        propsData:  { label }
-      });
+      { propsData: { label } });
 
     const element = wrapper.find('span').element;
 

package/rancher-components/Banner/Banner.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { nlToBr } from '@shell/utils/string';
 import { stringify } from '@shell/utils/error';
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     /**
      * A color class that represents the color of the banner.

package/rancher-components/Card/Card.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name:  'Card',
   props: {
     /**
@@ -22,7 +22,7 @@ export default Vue.extend({
      * The function to invoke when the default action button is clicked.
      */
     buttonAction: {
-      type:    Function,
+      type:    Function as PropType<(event: MouseEvent) => void>,
       default: (): void => { }
     },
     /**
@@ -151,7 +151,7 @@ export default Vue.extend({
 
       .card-body {
         justify-content: flex-start;
-        overflow: scroll;
+        overflow: auto;
       }
 
       > * {

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import { PropType, defineComponent } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'Checkbox',
 
   props: {
@@ -140,7 +140,7 @@ export default Vue.extend({
     /**
      * Toggles the checked state for the checkbox and emits an 'input' event.
      */
-    clicked(event: MouseEvent): boolean | void {
+    clicked(event: MouseEvent | KeyboardEvent): boolean | void {
       if ((event.target as HTMLLinkElement).tagName === 'A' && (event.target as HTMLLinkElement).href) {
         // Ignore links inside the checkbox label so you can click them
         return true;
@@ -325,6 +325,7 @@ $fontColor: var(--input-label);
     border-radius: var(--border-radius);
     transition: all 0.3s ease-out;
     border: 1px solid var(--border);
+    flex-shrink: 0;
   }
 
   input {

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -5,7 +5,7 @@ describe('component: LabeledInput', () => {
   it('should emit input only once', () => {
     const value = '2';
     const delay = 1;
-    const wrapper = mount(LabeledInput as any, {
+    const wrapper = mount(LabeledInput, {
       propsData: { delay },
       mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
     });