[INT] Refactored some of the plugins - 2 (#10944)

[INT] Refactored some of the plugins - 2

shell/components/__tests__/ButtonGroup.test.ts

@@ -22,8 +22,7 @@ describe('component: ButtonGroup', () => {
       propsData: {
         options,
         value: 'val1'
-      },
-      directives: { 'trim-whitespace': jest.fn() },
+      }
     });
 
     const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
@@ -68,8 +67,7 @@ describe('component: ButtonGroup', () => {
         inactiveClass: 'bg-some-inactive-class',
         iconSize:      'xxxxl',
         value:         'val1'
-      },
-      directives: { 'trim-whitespace': jest.fn() },
+      }
     });
 
     const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
@@ -110,8 +108,7 @@ describe('component: ButtonGroup', () => {
       propsData: {
         options,
         value: 'val1'
-      },
-      directives: { 'trim-whitespace': jest.fn() },
+      }
     });
 
     const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');

shell/initialize/index.js

@@ -32,7 +32,7 @@ Vue.directive = function(name) {
 // Load the directives from the plugins - we do this with a function so we know
 // these are initialized here, after the code above which keeps track of them and
 // prevents over-writes
-loadDirectives();
+loadDirectives(Vue);
 
 // Component: <NuxtChild>
 Vue.component(NuxtChild.name, NuxtChild);

shell/initialize/plugins.js

@@ -9,7 +9,6 @@ import '@shell/plugins/extend-router';
 import '@shell/plugins/formatters';
 import '@shell/plugins/vue-js-modal';
 import '@shell/plugins/js-yaml';
-import '@shell/plugins/trim-whitespace';
 
 import i18n from '@shell/plugins/i18n';
 import globalFormatters from '@shell/plugins/global-formatters';
@@ -18,13 +17,13 @@ import axios from '../utils/axios.js';
 import axiosShell from '@shell/plugins/axios';
 import backButton from '@shell/plugins/back-button';
 import codeMirror from '@shell/plugins/codemirror-loader';
+import VueCodemirror from 'vue-codemirror';
 import cookieUniversalNuxt from '../utils/cookie-universal-nuxt.js';
 import * as intNumber from '@shell/plugins/int-number';
 import nuxtClientInit from '@shell/plugins/nuxt-client-init';
 import plugin from '@shell/plugins/plugin';
 import plugins from '@shell/core/plugins.js';
 import pluginsLoader from '../core/plugins-loader.js';
-import * as positiveIntNumber from '@shell/plugins/positive-int-number.js';
 import replaceAll from '@shell/plugins/replaceall';
 import steveCreateWorker from '@shell/plugins/steve-create-worker';
 import version from '@shell/plugins/version';
@@ -37,10 +36,10 @@ export async function installPlugins(app, inject, Vue) {
   Vue.use(VueResize);
   Vue.use(VTooltip);
   Vue.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });
+  Vue.use(VueCodemirror);
 
   Vue.component('v-select', vSelect);
-
-  const pluginDefinitions = [cookieUniversalNuxt, axios, plugins, pluginsLoader, axiosShell, intNumber, positiveIntNumber, nuxtClientInit, replaceAll, backButton, plugin, codeMirror, version, steveCreateWorker, emberCookie];
+  const pluginDefinitions = [cookieUniversalNuxt, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, backButton, plugin, version, steveCreateWorker, emberCookie];
 
   const installations = pluginDefinitions.map(async(pluginDefinition) => {
     if (typeof pluginDefinition === 'function') {

shell/plugins/codemirror.js

@@ -3,18 +3,12 @@
  * so that it doesn't all get loaded put into vendor.js
  */
 
-import Vue from 'vue';
-import VueCodemirror from 'vue-codemirror';
 import CodeMirror from 'codemirror';
 
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/yaml/yaml.js';
 import 'codemirror/mode/javascript/javascript.js';
 
-// import 'codemirror/mode/dockerfile/dockerfile.js';
-// import 'codemirror/mode/shell/shell.js';
-// import 'codemirror/mode/markdown/markdown.js';
-
 import 'codemirror/theme/base16-light.css';
 import 'codemirror/theme/base16-dark.css';
 
@@ -35,9 +29,6 @@ import 'codemirror/addon/hint/anyword-hint.js';
 
 import { strPad } from '@shell/utils/string';
 
-Vue.use(VueCodemirror);
-export default VueCodemirror;
-
 function isLineComment(cm, lineNo) {
   return /\bcomment\b/.test(cm.getTokenTypeAt(CodeMirror.Pos(lineNo, 0)));
 }

shell/plugins/index.js

@@ -4,8 +4,17 @@
  * These are included in a function that can be explictly called, so that we can be sure
  * of the execution order, rather than importing them at the top of a file.
  */
-export function loadDirectives() {
+
+import positiveIntNumber from '@shell/plugins/positive-int-number.js';
+import trimWhitespace from '@shell/plugins/trim-whitespace';
+
+export function loadDirectives(Vue) {
   import('./clean-html-directive');
   import('./clean-tooltip-directive');
   import('./directives');
+  Vue.directive('positiveIntNumber', { inserted: positiveIntNumber });
+  Vue.directive('trim-whitespace', {
+    inserted:         trimWhitespace,
+    componentUpdated: trimWhitespace
+  });
 }

shell/plugins/positive-int-number.js

@@ -1,19 +1,30 @@
 import Vue from 'vue';
 
-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
+function positiveIntNumber(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;
-        }
+    if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
+      if (e.preventDefault) {
+        e.preventDefault();
+      } else {
+        e.returnValue = false;
       }
-    });
-  }
-});
+    }
+  });
+}
+
+export default positiveIntNumber;
+
+// 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 plugins
+
+const isThisFileBeingExecutedInATest = process.env.NODE_ENV === 'test';
+
+if (isThisFileBeingExecutedInATest) {
+  /* eslint-disable-next-line no-console */
+  console.warn('The implicit addition of positiveIntNumber has been deprecated in Rancher Shell and will be removed in a future version. Make sure to invoke `Vue.directive("positiveIntNumber", { inserted: positiveIntNumber })` to maintain compatibility.');
+
+  Vue.directive('positiveIntNumber', { inserted: positiveIntNumber });
+}

shell/plugins/trim-whitespace.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 
-export function trimWhitespace(el, dir) {
+export default function trimWhitespace(el, dir) {
   for (const node of el.childNodes) {
     if (node.nodeType === Node.TEXT_NODE ) {
       const trimmed = node.data.trim();
@@ -14,24 +14,16 @@ export function trimWhitespace(el, dir) {
   }
 }
 
-export function trimWhitespaceSsr(el, dir) {
-  // This causes server<->client dom mismatches sometimes... gave up for now.
-  /*
-  for ( const node of (el.children || []) ) {
-    if ( node.text ) {
-      const trimmed = node.text.trim();
+// 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 plugins
 
-      if ( trimmed !== node.text ) {
-        node.text = trimmed;
-      }
-    } else if ( node.children ) {
-      trimWhitespaceSsr(node);
-    }
-  }
-  */
-}
+const isThisFileBeingExecutedInATest = process.env.NODE_ENV === 'test';
+
+if (isThisFileBeingExecutedInATest) {
+/* eslint-disable-next-line no-console */
+  console.warn('The implicit addition of trim-whitespace has been deprecated in Rancher Shell and will be removed in a future version. Make sure to invoke it using Vue.directive to maintain compatibility.');
 
-Vue.directive('trim-whitespace', {
-  inserted:         trimWhitespace,
-  componentUpdated: trimWhitespace
-});
+  Vue.directive('trim-whitespace', {
+    inserted:         trimWhitespace,
+    componentUpdated: trimWhitespace
+  });
+}

storybook/.storybook/preview.js

@@ -10,7 +10,7 @@ import withEvents from 'storybook-auto-events';
 const i18nStrings = require('../../shell/assets/translations/en-us.yaml');
 import { VCleanTooltip } from '@shell/plugins/clean-tooltip-directive.js';
 import ShortKey from 'vue-shortkey';
-import { trimWhitespace } from '../../shell/plugins/trim-whitespace';
+import trimWhitespace from '@shell/plugins/trim-whitespace';
 
 
 // Store modules
@@ -35,7 +35,8 @@ Vue.component('router-link', {
 
 Vue.directive('clean-tooltip', VCleanTooltip);
 Vue.directive('trim-whitespace', {
-  inserted:        trimWhitespace,
+  inserted:         trimWhitespace,
+  componentUpdated: trimWhitespace
 });
 
 window.__codeMirrorLoader = () => import(/* webpackChunkName: "codemirror" */ '@shell/plugins/codemirror');