@rancher/shell 0.5.3 → 2.0.0

package/plugins/i18n.js

@@ -1,7 +1,9 @@
-import Vue from 'vue';
+/* eslint-disable no-console */
 import { escapeHtml } from '../utils/string';
+import Vue, { watchEffect, ref, h } from 'vue';
+import { useStore } from '../composables/useStore';
 
-function stringFor(store, key, args, raw = false, escapehtml = true) {
+export function stringFor(store, key, args, raw = false, escapehtml = true) {
   const translation = store.getters['i18n/t'](key, args);
 
   let out;
@@ -26,10 +28,6 @@ function stringFor(store, key, args, raw = false, escapehtml = true) {
   }
 }
 
-Vue.prototype.t = function(key, args, raw) {
-  return stringFor(this.$store, key, args, raw);
-};
-
 function directive(el, binding, vnode /*, oldVnode */) {
   const { context } = vnode;
   const raw = binding.modifiers && binding.modifiers.raw === true;
@@ -43,6 +41,9 @@ function directive(el, binding, vnode /*, oldVnode */) {
 }
 
 export function directiveSsr(vnode, binding) {
+  // eslint-disable-next-line no-console
+  console.warn('Function `directiveSsr` is deprecated. Please install i18n as a vue plugin: `Vue.use(i18n)`');
+
   const { context } = vnode;
   const raw = binding.modifiers && binding.modifiers.raw === true;
   const str = stringFor(context.$store, binding.value, {}, raw);
@@ -54,54 +55,87 @@ export function directiveSsr(vnode, binding) {
   }
 }
 
-// InnerHTML: <some-tag v-t="'some.key'" />
-// As an attribute: <some-tag v-t:title="'some.key'" />
-Vue.directive('t', {
-  bind() {
-    directive(...arguments);
-  },
-
-  update() {
-    directive(...arguments);
-  },
-});
-
-// Basic (but you might want the directive above): <t k="some.key" />
-// With interpolation: <t k="some.key" count="1" :foo="bar" />
-Vue.component('t', {
-  inheritAttrs: false,
-  props:        {
-    k: {
-      type:     String,
-      required: true,
-    },
-    raw: {
-      type:    Boolean,
-      default: false,
-    },
-    tag: {
-      type:    [String, Object],
-      default: 'span'
-    },
-    escapehtml: {
-      type:    Boolean,
-      default: true,
-    }
-  },
-
-  render(h) {
-    const msg = stringFor(this.$store, this.k, this.$attrs, this.raw, this.escapehtml);
-
-    if ( this.raw ) {
-      return h(
-        this.tag,
-        { domProps: { innerHTML: msg } }
-      );
-    } else {
-      return h(
-        this.tag,
-        [msg]
-      );
+const i18n = {
+  name:    'i18n',
+  install: (Vue, _options) => {
+    if (Vue.prototype.t && Vue.directive('t') && Vue.component('t')) {
+      // eslint-disable-next-line no-console
+      console.debug('Skipping i18n install. Directive, component, and option already exist.');
     }
-  },
-});
+
+    Vue.prototype.t = function(key, args, raw) {
+      return stringFor(this.$store, key, args, raw);
+    };
+
+    // InnerHTML: <some-tag v-t="'some.key'" />
+    // As an attribute: <some-tag v-t:title="'some.key'" />
+    Vue.directive('t', {
+      bind() {
+        directive(...arguments);
+      },
+      update() {
+        directive(...arguments);
+      },
+    });
+
+    // Basic (but you might want the directive above): <t k="some.key" />
+    // With interpolation: <t k="some.key" count="1" :foo="bar" />
+    Vue.component('t', {
+      inheritAttrs: false,
+      props:        {
+        k: {
+          type:     String,
+          required: true,
+        },
+        raw: {
+          type:    Boolean,
+          default: false,
+        },
+        tag: {
+          type:    [String, Object],
+          default: 'span'
+        },
+        escapehtml: {
+          type:    Boolean,
+          default: true,
+        }
+      },
+      setup(props, ctx) {
+        const msg = ref('');
+        const store = useStore();
+
+        // Update msg whenever k, $attrs, raw, or escapehtml changes
+        watchEffect(() => {
+          msg.value = stringFor(store, props.k, ctx.attrs, props.raw, props.escapehtml);
+        });
+
+        return { msg };
+      },
+      render() {
+        if (this.raw) {
+          return h(
+            this.tag,
+            { domProps: { innerHTML: this.msg } }
+          );
+        } else {
+          return h(
+            this.tag,
+            [this.msg]
+          );
+        }
+      }
+    });
+  }
+};
+
+export default i18n;
+
+// This is being done for backwards compatibility with our extensions that have written tests and didn't properly make use of Vue.use() when importing and mocking translations
+// Example failing test https://github.com/rancher/dashboard/actions/runs/8927503474/job/24521022320?pr=10923
+const isThisFileBeingExecutedInATest = process.env.NODE_ENV === 'test';
+
+if (isThisFileBeingExecutedInATest) {
+  // Go take a look at our jest.setup.js to see how we make use of Vue.use(i18n, ...)
+  console.warn('The implicit addition of i18n options has been deprecated in Rancher Shell and will be removed in a future version. Make sure to invoke `Vue.use(i18n)` to maintain compatibility.');
+  Vue.use(i18n);
+}

package/plugins/int-number.js

@@ -1,22 +1,8 @@
 import Vue from 'vue';
+import intNumberDirective from '@shell/directives/int-number';
 
-export default Vue.directive('intNumber', {
-  inserted(el) {
-    el.addEventListener('keypress', (e) => {
-      e = e || window.event;
-      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
-      const inputChar = String.fromCharCode(charcode);
-
-      // Allow digits, minus sign at the beginning, and Ctrl key combinations
-      const re = /^-?\d*$/;
-
-      if (!re.test(inputChar) && charcode > 9 && !e.ctrlKey) {
-        if (e.preventDefault) {
-          e.preventDefault();
-        } else {
-          e.returnValue = false;
-        }
-      }
-    });
-  }
-});
+export default intNumberDirective;
+/* eslint-disable-next-line no-console */
+console.warn(`Importing intNumberDirective from plugins has been deprecated, use shell/directives/int-number.js instead.
+Make sure to invoke it using Vue.directive('intNumber', intNumberDirective) to maintain compatibility.`);
+Vue.directive('intNumber', intNumberDirective);

package/plugins/plugin.js

@@ -32,7 +32,7 @@ export default async function(context) {
     // Fetch list of installed plugins from endpoint
     try {
       const res = await context.store.dispatch('management/request', {
-        url:                  `${ UI_PLUGIN_BASE_URL }/index.json`,
+        url:                  `${ UI_PLUGIN_BASE_URL }`,
         method:               'GET',
         headers:              { accept: 'application/json' },
         redirectUnauthorized: false,
@@ -68,10 +68,10 @@ export default async function(context) {
       const res = pluginLoads[name];
 
       if (res?.status === 'rejected') {
-        console.error(`Failed to load plugin: ${ name }`); // eslint-disable-line no-console
+        console.error(`Failed to load plugin: ${ name }. `, res.reason || 'Unknown reason'); // eslint-disable-line no-console
 
         // Record error in the uiplugins store, so that we can show this to the user
-        context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' });
+        context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' }); // i18n-uses plugins.error.load
       }
     });
   }

package/plugins/positive-int-number.js

@@ -1,19 +1,8 @@
 import Vue from 'vue';
+import positiveIntNumberDirective from '@shell/directives/positive-int-number';
 
-export default Vue.directive('positiveIntNumber', {
-  inserted(el) {
-    el.addEventListener('keypress', (e) => {
-      e = e || window.event;
-      const charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
-      const re = /^\d+$/; // Use regex to match positive numbers
-
-      if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
-        if (e.preventDefault) {
-          e.preventDefault();
-        } else {
-          e.returnValue = false;
-        }
-      }
-    });
-  }
-});
+export default positiveIntNumberDirective;
+/* eslint-disable-next-line no-console */
+console.warn(`Importing positiveIntNumberDirective from plugins has been deprecated, use shell/directives/positive-int-number.js instead.
+Make sure to invoke it using Vue.directive('positiveIntNumber', positiveIntNumberDirective) to maintain compatibility.`);
+Vue.directive('positiveIntNumber', positiveIntNumberDirective);

package/plugins/steve/__tests__/{getters.spec.ts → getters.test.ts}

@@ -1,55 +1,77 @@
 import _getters from '@shell/plugins/steve/getters';
 
-const { urlFor, urlOptions } = _getters;
+const { urlFor, urlOptions, pathExistsInSchema } = _getters;
 
-describe('steve: getters', () => {
-  describe('steve > getters > urlFor', () => {
+describe('steve: getters:', () => {
+  describe('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, type: string) => {
+        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', () => {
+  describe('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();
@@ -93,7 +115,7 @@ describe('steve: getters', () => {
     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', () => {
@@ -103,16 +125,87 @@ describe('steve: getters', () => {
       expect(urlOptionsGetter('foo', { sortBy: 'bar' })).toBe('foo?sort=bar');
     });
     it('returns a string with a sorting criteria formatted for steve if the sort option is provided and the url starts with "/v1"', () => {
-      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar' })).toBe('/v1/foo?exclude=metadata.managedFields&sort=bar');
+      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar' })).toBe('/v1/foo?sort=bar&exclude=metadata.managedFields');
     });
     it('returns a string with a sorting criteria if the sort option is provided and an order if sortOrder is provided', () => {
       expect(urlOptionsGetter('foo', { sortBy: 'bar', sortOrder: 'baz' })).toBe('foo?sort=bar&order=baz');
     });
     it('returns a string with a sorting criteria formatted for steve if the sort option is provided and an order if sortOrder is provided and the url starts with "/v1"', () => {
-      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar', sortOrder: 'baz' })).toBe('/v1/foo?exclude=metadata.managedFields&sort=bar');
+      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar', sortOrder: 'baz' })).toBe('/v1/foo?sort=bar&exclude=metadata.managedFields');
     });
     it('returns a string with a sorting criteria formatted for steve if the sort option is provided and an order if sortOrder is "desc" and the url starts with "/v1"', () => {
-      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar', sortOrder: 'desc' })).toBe('/v1/foo?exclude=metadata.managedFields&sort=-bar');
+      expect(urlOptionsGetter('/v1/foo', { sortBy: 'bar', sortOrder: 'desc' })).toBe('/v1/foo?sort=-bar&exclude=metadata.managedFields');
+    });
+  });
+
+  describe('pathExistsInSchema', () => {
+    const state = {};
+
+    const getters = { schemaFor: (type: string) => ({}) };
+
+    it('expects pathExistsInSchema to return a function', () => {
+      expect(typeof pathExistsInSchema(state, getters)).toBe('function');
+    });
+
+    describe('resourceFields', () => {
+      it('requires resourceFields but no resourceFields', () => {
+        expect(pathExistsInSchema(state, {
+          ...getters,
+          schemaFor: () => ({
+            requiresResourceFields: true,
+            hasResourceFields:      false,
+          })
+        })()).toBe(false);
+      });
+
+      it('requires resourceFields but empty resourceFields', () => {
+        expect(pathExistsInSchema(state, {
+          ...getters,
+          schemaFor: () => ({
+            requiresResourceFields: true,
+            hasResourceFields:      true,
+            schemaDefinitions:      {}
+          })
+        })('', 'name')).toBe(false);
+      });
+
+      it('requires resourceFields and has resourceFields', () => {
+        expect(pathExistsInSchema(state, {
+          ...getters,
+          schemaFor: () => ({
+            requiresResourceFields: true,
+            hasResourceFields:      true,
+            resourceFields:         { name: { type: 'string' } },
+            schemaDefinitions:      { name: { } },
+          })
+        })('n/a', 'name')).toBe(true);
+      });
+
+      it('requires nested resourceFields and has resourceFields', () => {
+        expect(pathExistsInSchema(state, {
+          ...getters,
+          schemaFor: (type) => {
+            const metadata = { resourceFields: { name: { type: 'string' } } };
+
+            switch (type) {
+            case 'root':
+              return {
+                requiresResourceFields: true,
+                hasResourceFields:      true,
+                resourceFields:         { metadata: { type: 'metadata' } },
+                schemaDefinitions:      { metadata: { ...metadata } },
+              };
+            case 'metadata':
+              return {
+                requiresResourceFields: true,
+                hasResourceFields:      true,
+                ...metadata,
+              };
+            }
+            expect(type).toBe('Something known');
+          }
+        })('root', 'metadata.name')).toBe(true);
+      });
     });
   });
 });

package/plugins/steve/__tests__/mutations.test.ts

@@ -0,0 +1,49 @@
+import mutations from '@shell/plugins/steve/mutations.js';
+import { POD } from '@shell/config/types';
+import Resource from '@shell/plugins/dashboard-store/resource-class';
+import mutationHelpers from '@shell/plugins/steve/__tests__/utils/mutation.test.helpers';
+
+describe('steve-store: mutations', () => {
+  describe('loadAdd', () => {
+    const createNewEntry = () => {
+      const res = mutationHelpers.loadAll.createNewEntry();
+      const pod = res.params[1].data[0];
+
+      res.params[0].podsByNamespace = {};
+      res.expected.podsByNamespace = {
+        [pod.namespace]: {
+          list: [new Resource(pod)],
+          map:  new Map([
+            [pod.id, new Resource(pod)]
+          ])
+        }
+      };
+
+      return res;
+    };
+
+    it.each([['No change', mutationHelpers.loadAll.createNoOp()]])('%s', (_, run) => {
+      mutations.loadAdd(...run.params);
+
+      expect(run.params[0]).toStrictEqual(run.expected.state);
+    });
+
+    it.each([
+      ['Add a new pod', createNewEntry()],
+    ])('%s', (_, run) => { // eslint-disable-line jest/no-identical-title
+      mutations.loadAdd(...run.params);
+      const { map: cacheMap, ...cacheState } = run.params[0].types?.[POD] ;
+      const cachePodsByNamespace = run.params[0].podsByNamespace ;
+      const { map: expectedMap, ...expected } = run.expected.types?.[POD];
+      const expectedPodsByNamespace = run.expected.podsByNamespace ;
+
+      expect(cacheMap).toBeDefined();
+      expect(expectedMap).toBeDefined();
+
+      expect(cacheState).toStrictEqual(expected);
+      expect(cacheMap).toStrictEqual(expectedMap);
+
+      expect(cachePodsByNamespace).toStrictEqual(expectedPodsByNamespace);
+    });
+  });
+});

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

@@ -0,0 +1,109 @@
+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,
+        'features/get':       () => 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' });
+      });
+    });
+  });
+});