@rancher/shell 2.0.1 → 3.0.0-rc.2

package/plugins/shortkey.js

@@ -0,0 +1,273 @@
+// I grabbed the source code of this plugin from https://github.com/rodrigopv/vue3-shortkey
+//
+// At the time of writing this the released plugin was emitting debug console messages and
+// there was a PR open for about 1 year to address this https://github.com/rodrigopv/vue3-shortkey/pull/1
+// If another library becomes available I think we should use it instead
+import 'element-matches';
+import 'custom-event-polyfill';
+
+const ShortKey = {};
+const mapFunctions = {};
+let objAvoided = [];
+let elementAvoided = [];
+let keyPressed = false;
+
+const parseValue = (value) => {
+  value = typeof value === 'string' ? JSON.parse(value.replace(/\'/gi, '"')) : value;
+  if (value instanceof Array) {
+    return { '': value };
+  }
+
+  return value;
+};
+
+const bindValue = (value, el, binding, vnode) => {
+  const push = binding.modifiers.push === true;
+  const avoid = binding.modifiers.avoid === true;
+  const focus = !binding.modifiers.focus === true;
+  const once = binding.modifiers.once === true;
+  const propagte = binding.modifiers.propagte === true;
+
+  if (avoid) {
+    objAvoided = objAvoided.filter((itm) => {
+      return !itm === el;
+    });
+    objAvoided.push(el);
+  } else {
+    mappingFunctions({
+      b: value, push, once, focus, propagte, el: vnode.el
+    });
+  }
+};
+
+const unbindValue = (value, el) => {
+  for (const key in value) {
+    const k = ShortKey.encodeKey(value[key]);
+    const idxElm = mapFunctions[k].el.indexOf(el);
+
+    if (mapFunctions[k].el.length > 1 && idxElm > -1) {
+      mapFunctions[k].el.splice(idxElm, 1);
+    } else {
+      delete mapFunctions[k];
+    }
+  }
+};
+
+ShortKey.install = (Vue, options) => {
+  elementAvoided = [...(options && options.prevent ? options.prevent : [])];
+  Vue.directive('shortkey', {
+    beforeMount: (el, binding, vnode) => {
+      // Mapping the commands
+      const value = parseValue(binding.value);
+
+      bindValue(value, el, binding, vnode);
+    },
+    updated: (el, binding, vnode) => {
+      const oldValue = parseValue(binding.oldValue);
+
+      unbindValue(oldValue, el);
+
+      const newValue = parseValue(binding.value);
+
+      bindValue(newValue, el, binding, vnode);
+    },
+    unmounted: (el, binding) => {
+      const value = parseValue(binding.value);
+
+      unbindValue(value, el);
+    }
+  });
+};
+
+ShortKey.decodeKey = (pKey) => createShortcutIndex(pKey);
+ShortKey.encodeKey = (pKey) => {
+  const shortKey = {};
+
+  shortKey.shiftKey = pKey.includes('shift');
+  shortKey.ctrlKey = pKey.includes('ctrl');
+  shortKey.metaKey = pKey.includes('meta');
+  shortKey.altKey = pKey.includes('alt');
+  let indexedKeys = createShortcutIndex(shortKey);
+  const vKey = pKey.filter((item) => !['shift', 'ctrl', 'meta', 'alt'].includes(item));
+
+  indexedKeys += vKey.join('');
+
+  return indexedKeys;
+};
+
+const createShortcutIndex = (pKey) => {
+  let k = '';
+
+  if (pKey.key === 'Shift' || pKey.shiftKey) {
+    k += 'shift';
+  }
+  if (pKey.key === 'Control' || pKey.ctrlKey) {
+    k += 'ctrl';
+  }
+  if (pKey.key === 'Meta' || pKey.metaKey) {
+    k += 'meta';
+  }
+  if (pKey.key === 'Alt' || pKey.altKey) {
+    k += 'alt';
+  }
+  if (pKey.key === 'ArrowUp') {
+    k += 'arrowup';
+  }
+  if (pKey.key === 'ArrowLeft') {
+    k += 'arrowleft';
+  }
+  if (pKey.key === 'ArrowRight') {
+    k += 'arrowright';
+  }
+  if (pKey.key === 'ArrowDown') {
+    k += 'arrowdown';
+  }
+  if (pKey.key === 'AltGraph') {
+    k += 'altgraph';
+  }
+  if (pKey.key === 'Escape') {
+    k += 'esc';
+  }
+  if (pKey.key === 'Enter') {
+    k += 'enter';
+  }
+  if (pKey.key === 'Tab') {
+    k += 'tab';
+  }
+  if (pKey.key === ' ') {
+    k += 'space';
+  }
+  if (pKey.key === 'PageUp') {
+    k += 'pageup';
+  }
+  if (pKey.key === 'PageDown') {
+    k += 'pagedown';
+  }
+  if (pKey.key === 'Home') {
+    k += 'home';
+  }
+  if (pKey.key === 'End') {
+    k += 'end';
+  }
+  if (pKey.key === 'Delete') {
+    k += 'del';
+  }
+  if (pKey.key === 'Backspace') {
+    k += 'backspace';
+  }
+  if (pKey.key === 'Insert') {
+    k += 'insert';
+  }
+  if (pKey.key === 'NumLock') {
+    k += 'numlock';
+  }
+  if (pKey.key === 'CapsLock') {
+    k += 'capslock';
+  }
+  if (pKey.key === 'Pause') {
+    k += 'pause';
+  }
+  if (pKey.key === 'ContextMenu') {
+    k += 'contextmenu';
+  }
+  if (pKey.key === 'ScrollLock') {
+    k += 'scrolllock';
+  }
+  if (pKey.key === 'BrowserHome') {
+    k += 'browserhome';
+  }
+  if (pKey.key === 'MediaSelect') {
+    k += 'mediaselect';
+  }
+  if ((pKey.key && pKey.key !== ' ' && pKey.key.length === 1) || /F\d{1,2}|\//g.test(pKey.key)) k += pKey.key.toLowerCase();
+
+  return k;
+};
+
+const dispatchShortkeyEvent = (pKey) => {
+  const e = new CustomEvent('shortkey', { bubbles: false });
+
+  if (mapFunctions[pKey].key) e.srcKey = mapFunctions[pKey].key;
+  const elm = mapFunctions[pKey].el;
+
+  if (!mapFunctions[pKey].propagte) {
+    elm[elm.length - 1].dispatchEvent(e);
+  } else {
+    elm.forEach((elmItem) => elmItem.dispatchEvent(e));
+  }
+};
+
+ShortKey.keyDown = (pKey) => {
+  if ((!mapFunctions[pKey].once && !mapFunctions[pKey].push) || (mapFunctions[pKey].push && !keyPressed)) {
+    dispatchShortkeyEvent(pKey);
+  }
+};
+
+if (process && process.env && process.env.NODE_ENV !== 'test') {
+  (function() {
+    document.addEventListener('keydown', (pKey) => {
+      const decodedKey = ShortKey.decodeKey(pKey);
+
+      // Check avoidable elements
+      if (availableElement(decodedKey)) {
+        if (!mapFunctions[decodedKey].propagte) {
+          pKey.preventDefault();
+          pKey.stopPropagation();
+        }
+        if (mapFunctions[decodedKey].focus) {
+          ShortKey.keyDown(decodedKey);
+          keyPressed = true;
+        } else if (!keyPressed) {
+          const elm = mapFunctions[decodedKey].el;
+
+          elm[elm.length - 1].focus();
+          keyPressed = true;
+        }
+      }
+    }, true);
+
+    document.addEventListener('keyup', (pKey) => {
+      const decodedKey = ShortKey.decodeKey(pKey);
+
+      if (availableElement(decodedKey)) {
+        if (!mapFunctions[decodedKey].propagte) {
+          pKey.preventDefault();
+          pKey.stopPropagation();
+        }
+        if (mapFunctions[decodedKey].once || mapFunctions[decodedKey].push) {
+          dispatchShortkeyEvent(decodedKey);
+        }
+      }
+      keyPressed = false;
+    }, true);
+  })();
+}
+
+const mappingFunctions = ({
+  b, push, once, focus, propagte, el
+}) => {
+  for (const key in b) {
+    const k = ShortKey.encodeKey(b[key]);
+    const elm = mapFunctions[k] && mapFunctions[k].el ? mapFunctions[k].el : [];
+    const propagated = mapFunctions[k] && mapFunctions[k].propagte;
+
+    elm.push(el);
+    mapFunctions[k] = {
+      push,
+      once,
+      focus,
+      key,
+      propagte: propagated || propagte,
+      el:       elm
+    };
+  }
+};
+
+const availableElement = (decodedKey) => {
+  const objectIsAvoided = !!objAvoided.find((r) => r === document.activeElement);
+  const filterAvoided = !!(elementAvoided.find((selector) => document.activeElement && document.activeElement.matches(selector)));
+
+  return !!mapFunctions[decodedKey] && !(objectIsAvoided || filterAvoided);
+};
+
+export default ShortKey;

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

@@ -109,10 +109,13 @@ describe('steve: getters:', () => {
     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 with an exclude statement for "bar" 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');
     });
-    it('returns a string without an exclude statement if excludeFields is but the url does not start with "/v1/"', () => {
+    it('returns a string without an exclude statement for "managedFields" if omitExcludeFields includes it and the url starts with "/v1/"', () => {
+      expect(urlOptionsGetter('/v1/foo', { omitExcludeFields: ['metadata.managedFields'] })).toBe('/v1/foo?');
+    });
+    it('returns a string without an exclude statement if excludeFields is set 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 doesn\'t include the "/v1/ string"', () => {

package/plugins/steve/getters.js

@@ -119,11 +119,13 @@ export default {
     // excludeFields should be an array of strings representing the paths of the fields to exclude
     // only works on Steve but is ignored without error by Norman
     if (isSteve) {
-      if (Array.isArray(opt?.excludeFields)) {
-        opt.excludeFields = [...opt.excludeFields, 'metadata.managedFields'];
-      } else {
-        opt.excludeFields = ['metadata.managedFields'];
+      if (!Array.isArray(opt?.excludeFields)) {
+        const excludeFields = ['metadata.managedFields'];
+
+        // for some resources, we might want to include fields, excluded by default.
+        opt.excludeFields = Array.isArray(opt?.omitExcludeFields) ? excludeFields.filter((f) => !f.includes(opt.omitExcludeFields)) : excludeFields;
       }
+
       const excludeParamsString = opt.excludeFields.map((field) => `exclude=${ field }`).join('&');
 
       url += `${ url.includes('?') ? '&' : '?' }${ excludeParamsString }`;

package/plugins/steve/hybrid-class.js

@@ -1,7 +1,6 @@
-import { ANNOTATIONS_TO_IGNORE_REGEX, LABELS_TO_IGNORE_REGEX, DESCRIPTION } from '@shell/config/labels-annotations';
+import { ANNOTATIONS_TO_IGNORE_REGEX, LABELS_TO_IGNORE_REGEX } from '@shell/config/labels-annotations';
 import omitBy from 'lodash/omitBy';
 import pickBy from 'lodash/pickBy';
-import Vue from 'vue';
 import { matchesSomeRegex } from '@shell/utils/string';
 import Resource from '@shell/plugins/dashboard-store/resource-class';
 
@@ -39,7 +38,7 @@ export default class HybridModel extends Resource {
       return matchesSomeRegex(key, LABELS_TO_IGNORE_REGEX);
     });
 
-    Vue.set(this.metadata, 'labels', { ...wasIgnored, ...val });
+    this.metadata['labels'] = { ...wasIgnored, ...val };
   }
 
   setLabel(key, val) {
@@ -52,9 +51,9 @@ export default class HybridModel extends Resource {
         this.metadata.labels = {};
       }
 
-      Vue.set(this.metadata.labels, key, val);
+      this.metadata.labels[key] = val;
     } else if ( this.metadata?.labels ) {
-      Vue.set(this.metadata.labels, key, undefined);
+      this.metadata.labels[key] = undefined;
       delete this.metadata.labels[key];
     }
   }
@@ -77,7 +76,7 @@ export default class HybridModel extends Resource {
       return matchesSomeRegex(key, ANNOTATIONS_TO_IGNORE_REGEX);
     });
 
-    Vue.set(this.metadata, 'annotations', { ...wasIgnored, ...val });
+    this.metadata['annotations'] = { ...wasIgnored, ...val };
   }
 
   setAnnotation(key, val) {
@@ -90,9 +89,9 @@ export default class HybridModel extends Resource {
         this.metadata.annotations = {};
       }
 
-      Vue.set(this.metadata.annotations, key, val);
+      this.metadata.annotations[key] = val;
     } else if ( this.metadata?.annotations ) {
-      Vue.set(this.metadata.annotations, key, undefined);
+      this.metadata.annotations[key] = undefined;
       delete this.metadata.annotations[key];
     }
   }
@@ -100,8 +99,4 @@ export default class HybridModel extends Resource {
   get state() {
     return this.stateObj?.name || 'unknown';
   }
-
-  get description() {
-    return this.metadata?.annotations?.[DESCRIPTION] || this.spec?.description || this._description;
-  }
 }

package/plugins/steve/mutations.js

@@ -11,7 +11,6 @@ import {
   loadAdd
 } from '@shell/plugins/dashboard-store/mutations';
 import { perfLoadAll } from '@shell/plugins/steve/performanceTesting';
-import Vue from 'vue';
 import { classify } from '@shell/plugins/dashboard-store/classify';
 import SteveSchema from '@shell/models/steve-schema';
 
@@ -24,7 +23,7 @@ function registerNamespace(state, namespace) {
       map:  new Map()
     };
 
-    Vue.set(state.podsByNamespace, namespace, cache);
+    state.podsByNamespace[namespace] = cache;
   }
 
   return cache;

package/plugins/steve/norman-class.js

@@ -1,6 +1,5 @@
 import { ANNOTATIONS_TO_IGNORE_REGEX, LABELS_TO_IGNORE_REGEX } from '@shell/config/labels-annotations';
 import pickBy from 'lodash/pickBy';
-import Vue from 'vue';
 import { findBy } from '@shell/utils/array';
 import { matchesSomeRegex, coerceStringTypeToScalarType } from '@shell/utils/string';
 import Resource, { DNS_LIKE_TYPES } from '@shell/plugins/dashboard-store/resource-class';
@@ -37,7 +36,7 @@ export default class NormanModel extends Resource {
       return matchesSomeRegex(key, LABELS_TO_IGNORE_REGEX);
     });
 
-    Vue.set(this, 'labels', { ...wasIgnored, ...val });
+    this['labels'] = { ...wasIgnored, ...val };
   }
 
   setLabel(key, val) {
@@ -46,9 +45,9 @@ export default class NormanModel extends Resource {
         this.labels = {};
       }
 
-      Vue.set(this.labels, key, val);
+      this.labels[key] = val;
     } else if ( this.labels ) {
-      Vue.set(this.labels, key, undefined);
+      this.labels[key] = undefined;
       delete this.labels[key];
     }
   }
@@ -59,7 +58,7 @@ export default class NormanModel extends Resource {
       return matchesSomeRegex(key, ANNOTATIONS_TO_IGNORE_REGEX);
     });
 
-    Vue.set(this, 'annotations', { ...wasIgnored, ...val });
+    this['annotations'] = { ...wasIgnored, ...val };
   }
 
   setAnnotation(key, val) {
@@ -68,9 +67,9 @@ export default class NormanModel extends Resource {
         this.annotations = {};
       }
 
-      Vue.set(this.annotations, key, val);
+      this.annotations[key] = val;
     } else if ( this.annotations ) {
-      Vue.set(this.annotations, key, undefined);
+      this.annotations[key] = undefined;
       delete this.annotations[key];
     }
   }
@@ -79,7 +78,7 @@ export default class NormanModel extends Resource {
     const keys = ['resourceQuota', 'namespaceDefaultResourceQuota'];
 
     keys.forEach((key) => {
-      Vue.set(this, key, { ...spec[key] });
+      this[key] = { ...spec[key] };
     });
   }
 
@@ -153,14 +152,14 @@ export default class NormanModel extends Resource {
 
       if (valIsString) {
         if (fieldType) {
-          Vue.set(data, key, coerceStringTypeToScalarType(val, fieldType));
+          data[key] = coerceStringTypeToScalarType(val, fieldType);
         }
 
         // Empty strings on nullable string fields -> null
         if ( field.nullable && val.length === 0 && STRING_LIKE_TYPES.includes(fieldType)) {
           val = null;
 
-          Vue.set(data, key, val);
+          data[key] = val;
         }
       }
       if (fieldType === 'boolean') {
@@ -184,7 +183,7 @@ export default class NormanModel extends Resource {
         if ( tolower !== val ) {
           val = tolower;
 
-          Vue.set(data, key, val);
+          data[key] = val;
         }
 
         fieldErrors.push(...validateDnsLikeTypes(val, fieldType, displayKey, this.$rootGetters, fieldErrors));

package/plugins/steve/subscribe.js

@@ -35,6 +35,7 @@ import { WORKER_MODES } from './worker';
 import acceptOrRejectSocketMessage from './accept-or-reject-socket-message';
 import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
 import paginationUtils from '@shell/utils/pagination-utils';
+import _ from 'lodash';
 
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;
@@ -179,7 +180,8 @@ export async function createWorker(store, ctx) {
   while (workerQueues[storeName]?.length) {
     const message = workerQueues[storeName].shift();
 
-    store.$workers[storeName].postMessage(message);
+    // TODO: 11541: Web Worker communication fails due to Proxy objects in messages
+    store.$workers[storeName].postMessage(_.cloneDeep(message));
   }
 }
 

package/promptRemove/management.cattle.io.globalrole.vue

@@ -21,11 +21,7 @@ export default {
 
 <template>
   <div>
-    <template>
-      {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-clean-html="resourceNames(names, plusMore, t)"
-      />
-    </template>
+    {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-clean-html="resourceNames(names, plusMore, t)" />
     <div
       v-if="info"
       class="text info mb-10 mt-20"

package/promptRemove/management.cattle.io.project.vue

@@ -110,7 +110,7 @@ export default {
         class="mt-20 remove-project-dialog"
       >
         <Checkbox
-          v-model="deleteProjectNamespaces"
+          v-model:value="deleteProjectNamespaces"
           :label="t('promptRemove.deleteAssociatedNamespaces')"
         />
         <div class="mt-10 ml-20">

package/promptRemove/pod.vue

@@ -122,7 +122,7 @@ export default {
     </div>
     <div class="mb-30">
       <Checkbox
-        v-model="forceDelete"
+        v-model:value="forceDelete"
         :label="t('promptForceRemove.forceDelete')"
       />
     </div>

package/public/index.html

@@ -11,63 +11,64 @@
 
 <body>
     <div id="app">
-        <script>
-            (() => {
-                // Has the user chosen to auto detect the theme.... or if they haven't chosen anything.. --> check the auto-detected theme via R_PCS
-                // Otherwise check if they've specifically selected a theme --> R_THEME
-                const isDark = document.cookie.includes('R_THEME=auto') || !document.cookie.includes('R_THEME') ?
-                    // User selected automatic theme, so use PCS (set when ui previously loaded and is either os theme or time of day based)
-                    document.cookie.includes('R_PCS=dark') :
-                    // Otherwise user selected light/dark theme directly
-                    document.cookie.includes('R_THEME=dark');
-
-                const color = isDark ? '#1b1c21' : '#FFF';
-                const style = document.createElement('style');
-                style.innerHTML = ':root { --loading-bg-color: ' + color + ';}';
-                document.getElementsByTagName('head')[0].prepend(style);
-            })();
-        </script>
-        <style>
-            .initial-load-spinner-container {
-                align-items: center;
-                background-color: var(--loading-bg-color);
-                display: flex;
-                justify-content: center;
-                height: 100vh;
-                left: 0;
-                position: absolute;
-                top: 0;
-                width: 100vw;
-            }
-
-            .initial-load-spinner {
-                animation: initial-load-animate 1s infinite linear;
-                background-color: var(--loading-bg-color);
-                box-sizing: border-box;
-                border: 5px solid #008ACF;
-                border-radius: 50%;
-                border-top-color: #00B2E2;
-                display: inline-block;
-                height: 80px;
-                margin: 0 auto;
-                width: 80px;
-            }
-
-            @keyframes initial-load-animate {
-                0% {
-                    transform: rotate(0deg);
-                }
-
-                100% {
-                    transform: rotate(359deg);
-                }
-            }
-        </style>
         <div class="initial-load-spinner-container">
             <i class="initial-load-spinner"></i>
         </div>
     </div>
     <div id="modals"><!--Portal content here--></div>
+
+    <script>
+        (() => {
+            // Has the user chosen to auto detect the theme.... or if they haven't chosen anything.. --> check the auto-detected theme via R_PCS
+            // Otherwise check if they've specifically selected a theme --> R_THEME
+            const isDark = document.cookie.includes('R_THEME=auto') || !document.cookie.includes('R_THEME') ?
+                // User selected automatic theme, so use PCS (set when ui previously loaded and is either os theme or time of day based)
+                document.cookie.includes('R_PCS=dark') :
+                // Otherwise user selected light/dark theme directly
+                document.cookie.includes('R_THEME=dark');
+
+            const color = isDark ? '#1b1c21' : '#FFF';
+            const style = document.createElement('style');
+            style.innerHTML = ':root { --loading-bg-color: ' + color + ';}';
+            document.getElementsByTagName('head')[0].prepend(style);
+        })();
+    </script>
+    <style>
+        .initial-load-spinner-container {
+            align-items: center;
+            background-color: var(--loading-bg-color);
+            display: flex;
+            justify-content: center;
+            height: 100vh;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 100vw;
+        }
+
+        .initial-load-spinner {
+            animation: initial-load-animate 1s infinite linear;
+            background-color: var(--loading-bg-color);
+            box-sizing: border-box;
+            border: 5px solid #008ACF;
+            border-radius: 50%;
+            border-top-color: #00B2E2;
+            display: inline-block;
+            height: 80px;
+            margin: 0 auto;
+            width: 80px;
+        }
+
+        @keyframes initial-load-animate {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(359deg);
+            }
+        }
+    </style>
 </body>
 
 </html>

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

@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { BadgeState } from './index';
 
-describe('BadgeState.vue', () => {
+describe('badgeState.vue', () => {
   it('renders props.msg when passed', () => {
     const label = 'Hello, World!';
 

package/rancher-components/BadgeState/BadgeState.vue

@@ -77,7 +77,7 @@ export default defineComponent({
     border-radius: 20px;
 
     &.bg-info {
-      border-color: var(--primary);
+      border-color: var(--info);
     }
 
     &.bg-error {

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

@@ -25,9 +25,9 @@ describe('component: Banner', () => {
   it('should not display an icon', () => {
     const wrapper = mount(Banner);
 
-    const element = wrapper.find(`[data-testid="banner-icon"]`).element;
+    const iconElement = wrapper.find('[data-testid="banner-icon"]');
 
-    expect(element).not.toBeDefined();
+    expect(iconElement.exists()).toBe(false);
   });
 
   it('should emit close event', () => {