@rancher/shell 0.3.9 → 0.3.10

package/components/form/WorkloadPorts.vue

@@ -50,6 +50,8 @@ export default {
         row._showHost = true;
       }
 
+      row._ipam = '';
+
       return row;
     });
 
@@ -387,7 +389,6 @@ export default {
             :mode="mode"
             :options="ipamOptions"
             :label="t('servicesPage.harvester.ipam.label')"
-            :disabled="mode === 'edit'"
             @input="queueUpdate"
           />
         </div>

package/components/form/__tests__/KeyValue.test.ts

@@ -15,4 +15,21 @@ describe('component: KeyValue', () => {
 
     expect(inputValue.value).toBe(value);
   });
+
+  it('should display a markdown-multiline field with new lines visible', () => {
+    const wrapper = mount(KeyValue, {
+      propsData: {
+        value:                  'test',
+        valueMarkdownMultiline: true,
+      },
+      mocks:      { $store: { getters: { 'i18n/t': jest.fn() } } },
+      directives: { t }
+    });
+
+    const inputFieldTextArea = wrapper.find('textarea').element;
+    const inputFieldMultiline = wrapper.find('[data-testid="code-mirror-multiline-field"]').element;
+
+    expect(inputFieldTextArea).toBeUndefined();
+    expect(inputFieldMultiline).toBeDefined();
+  });
 });

package/components/formatter/ClusterLink.vue

@@ -64,17 +64,17 @@ export default {
     <span v-else>{{ value }}</span>
     <i
       v-if="row.unavailableMachines"
-      v-tooltip="row.unavailableMachines"
+      v-clean-tooltip="row.unavailableMachines"
       class="conditions-alert-icon icon-alert icon"
     />
     <i
       v-if="row.rkeTemplateUpgrade"
-      v-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"
+      v-clean-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"
       class="template-upgrade-icon icon-alert icon"
     />
     <i
       v-if="row.hasError"
-      v-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"
+      v-clean-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"
       class="conditions-alert-icon icon-error icon-lg"
     />
   </span>

package/components/formatter/LiveDate.vue

@@ -135,7 +135,7 @@ export default {
   </span>
   <span
     v-else-if="showTooltip"
-    v-tooltip="{content: title, placement: tooltipPlacement}"
+    v-clean-tooltip="{content: title, placement: tooltipPlacement}"
     class="live-date"
   >
     {{ suffixedLabel }}

package/components/formatter/PodImages.vue

@@ -59,7 +59,7 @@ export default {
     <span>{{ mainImage }}</span><br>
     <span
       v-if="images.length-1>0"
-      v-tooltip.bottom="imageLabels"
+      v-clean-tooltip.bottom="imageLabels"
       class="plus-more"
     >{{ t('generic.plusMore', {n:images.length-1}) }}</span>
   </span>

package/components/formatter/RKETemplateName.vue

@@ -14,7 +14,7 @@ export default {
     <span>{{ value.displayName }}</span>
     <i
       v-if="value.upgrade"
-      v-tooltip="t('cluster.rkeTemplateUpgrade', { name: value.upgrade })"
+      v-clean-tooltip="t('cluster.rkeTemplateUpgrade', { name: value.upgrade })"
       class="template-upgrade-icon icon-alert icon"
     />
   </div>

package/components/formatter/Shortened.vue

@@ -45,7 +45,7 @@ export default {
   </span>
   <span
     v-else-if="showTooltip"
-    v-tooltip="{content: longValue, placement: tooltipPlacement}"
+    v-clean-tooltip="{content: longValue, placement: tooltipPlacement}"
   >
     {{ value }}
   </span>

package/components/nav/Header.vue

@@ -360,7 +360,7 @@ export default {
     >
       <div
         v-if="currentProduct && currentProduct.showClusterSwitcher"
-        v-tooltip="nameTooltip"
+        v-clean-tooltip="nameTooltip"
         class="cluster cluster-clipped"
       >
         <div
@@ -455,7 +455,7 @@ export default {
         <template v-if="currentProduct && currentProduct.showClusterSwitcher">
           <button
             v-if="showImportYaml"
-            v-tooltip="t('nav.import')"
+            v-clean-tooltip="t('nav.import')"
             :disabled="!importEnabled"
             type="button"
             class="btn header-btn role-tertiary"
@@ -478,7 +478,7 @@ export default {
 
           <button
             v-if="showKubeShell"
-            v-tooltip="t('nav.shellShortcut', {key: shellShortcut})"
+            v-clean-tooltip="t('nav.shellShortcut', {key: shellShortcut})"
             v-shortkey="{windows: ['ctrl', '`'], mac: ['meta', '`']}"
             :disabled="!shellEnabled"
             type="button"
@@ -491,7 +491,7 @@ export default {
 
           <button
             v-if="showKubeConfig"
-            v-tooltip="t('nav.kubeconfig.download')"
+            v-clean-tooltip="t('nav.kubeconfig.download')"
             :disabled="!kubeConfigEnabled"
             type="button"
             class="btn header-btn role-tertiary"
@@ -502,7 +502,7 @@ export default {
 
           <button
             v-if="showCopyConfig"
-            v-tooltip="t('nav.kubeconfig.copy')"
+            v-clean-tooltip="t('nav.kubeconfig.copy')"
             :disabled="!kubeConfigEnabled"
             type="button"
             class="btn header-btn role-tertiary"
@@ -521,7 +521,7 @@ export default {
 
         <button
           v-if="showSearch"
-          v-tooltip="t('nav.resourceSearch.toolTip', {key: searchShortcut})"
+          v-clean-tooltip="t('nav.resourceSearch.toolTip', {key: searchShortcut})"
           v-shortkey="{windows: ['ctrl', 'k'], mac: ['meta', 'k']}"
           type="button"
           class="btn header-btn role-tertiary"
@@ -549,7 +549,7 @@ export default {
         <button
           v-for="action, i in extensionHeaderActions"
           :key="`${action.label}${i}`"
-          v-tooltip="handleExtensionTooltip(action)"
+          v-clean-tooltip="handleExtensionTooltip(action)"
           v-shortkey="action.shortcutKey"
           :disabled="action.enabled ? !action.enabled(ctx) : false"
           type="button"

package/components/nav/NamespaceFilter.vue

@@ -5,7 +5,6 @@ import { NAMESPACE, MANAGEMENT } from '@shell/config/types';
 import { sortBy } from '@shell/utils/sort';
 import { isArray, addObjects, findBy, filterBy } from '@shell/utils/array';
 import {
-  NAMESPACE_FILTER_SPECIAL as SPECIAL,
   NAMESPACE_FILTER_ALL_USER as ALL_USER,
   NAMESPACE_FILTER_ALL as ALL,
   NAMESPACE_FILTER_ALL_SYSTEM as ALL_SYSTEM,
@@ -13,23 +12,42 @@ import {
   NAMESPACE_FILTER_NAMESPACED_YES as NAMESPACED_YES,
   NAMESPACE_FILTER_NAMESPACED_NO as NAMESPACED_NO,
   createNamespaceFilterKey,
+  NAMESPACE_FILTER_KINDS,
+  NAMESPACE_FILTER_NS_FULL_PREFIX,
+  NAMESPACE_FILTER_P_FULL_PREFIX,
 } from '@shell/utils/namespace-filter';
 import { KEY } from '@shell/utils/platform';
+import pAndNFiltering from '@shell/utils/projectAndNamespaceFiltering.utils';
+import { SETTING } from '@shell/config/settings';
+
+const forcedNamespaceValidTypes = [NAMESPACE_FILTER_KINDS.DIVIDER, NAMESPACE_FILTER_KINDS.PROJECT, NAMESPACE_FILTER_KINDS.NAMESPACE];
 
 export default {
+
   data() {
     return {
-      isOpen:         false,
-      filter:         '',
-      hidden:         0,
-      total:          0,
-      activeElement:  null,
-      cachedFiltered: [],
+      isOpen:              false,
+      filter:              '',
+      hidden:              0,
+      total:               0,
+      activeElement:       null,
+      cachedFiltered:      [],
+      NAMESPACE_FILTER_KINDS,
+      namespaceFilterMode: undefined,
     };
   },
 
+  async fetch() {
+    // Determine if filtering by specific namespaces/projects is required
+    // This is done once and up front
+    // - it doesn't need to be re-active
+    // - added it as a computed caused massive amounts of churn around the `filtered` watcher
+    await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_PERFORMANCE });
+    this.namespaceFilterMode = this.calcNamespaceFilterMode();
+  },
+
   computed: {
-    ...mapGetters(['currentProduct', 'namespaceFilterMode']),
+    ...mapGetters(['currentProduct']),
 
     hasFilter() {
       return this.filter.length > 0;
@@ -40,23 +58,27 @@ export default {
 
       out = out.filter((item) => {
         // Filter out anything not applicable to singleton selection
-        if (this.namespaceFilterMode) {
+        if (this.namespaceFilterMode?.length) {
           // We always show dividers, projects and namespaces
-          if (!['divider', 'project', this.namespaceFilterMode].includes(item.kind)) {
-            // Hide any invalid option that's not selected
-            return this.value.findIndex(v => v.id === item.id) >= 0;
+          if (!forcedNamespaceValidTypes.includes(item.kind)) {
+            const validCustomType = this.namespaceFilterMode.find(prefix => item.kind.startsWith(prefix));
+
+            if (!validCustomType) {
+              // Hide any invalid option that's not selected
+              return this.value.findIndex(v => v.id === item.id) >= 0;
+            }
           }
         }
 
         // Filter by the current filter
         if (this.hasFilter) {
-          return item.kind !== SPECIAL && item.label.toLowerCase().includes(this.filter.toLowerCase());
+          return item.kind !== NAMESPACE_FILTER_KINDS.SPECIAL && item.label.toLowerCase().includes(this.filter.toLowerCase());
         }
 
         return true;
       });
 
-      if (out?.[0]?.kind === 'divider') {
+      if (out?.[0]?.kind === NAMESPACE_FILTER_KINDS.DIVIDER) {
         out.splice(0, 1);
       }
 
@@ -70,8 +92,15 @@ export default {
       out.forEach((i) => {
         i.selected = !!mapped[i.id] || (i.id === ALL && this.value && this.value.length === 0);
         i.elementId = (i.id || '').replace('://', '_');
-        // Are we in singleton resource type mode, if so is this an allowed type?
-        i.enabled = !this.namespaceFilterMode || i.kind === this.namespaceFilterMode;
+        i.enabled = true;
+        // Are we in restricted resource type mode, if so is this an allowed type?
+        if (this.namespaceFilterMode?.length) {
+          const isLastSelected = i.selected && (i.id === ALL || this.value.length === 1);
+          const kindAllowed = this.namespaceFilterMode.find(f => f === i.kind);
+          const isNotInProjectGroup = i.id === ALL_ORPHANS;
+
+          i.enabled = (!isLastSelected && kindAllowed) && !isNotInProjectGroup;
+        }
       });
 
       return out;
@@ -134,27 +163,27 @@ export default {
         out = [
           {
             id:    ALL,
-            kind:  SPECIAL,
+            kind:  NAMESPACE_FILTER_KINDS.SPECIAL,
             label: t('nav.ns.all'),
           },
           {
             id:    ALL_USER,
-            kind:  SPECIAL,
+            kind:  NAMESPACE_FILTER_KINDS.SPECIAL,
             label: t('nav.ns.user'),
           },
           {
             id:    ALL_SYSTEM,
-            kind:  SPECIAL,
+            kind:  NAMESPACE_FILTER_KINDS.SPECIAL,
             label: t('nav.ns.system'),
           },
           {
             id:    NAMESPACED_YES,
-            kind:  SPECIAL,
+            kind:  NAMESPACE_FILTER_KINDS.SPECIAL,
             label: t('nav.ns.namespaced'),
           },
           {
             id:    NAMESPACED_NO,
-            kind:  SPECIAL,
+            kind:  NAMESPACE_FILTER_KINDS.SPECIAL,
             label: t('nav.ns.clusterLevel'),
           },
         ];
@@ -224,8 +253,8 @@ export default {
           }
 
           out.push({
-            id:    `project://${ id }`,
-            kind:  'project',
+            id:    `${ NAMESPACE_FILTER_P_FULL_PREFIX }${ id }`,
+            kind:  NAMESPACE_FILTER_KINDS.PROJECT,
             label: t('nav.ns.project', { name: project.nameDisplay }),
           });
 
@@ -243,7 +272,7 @@ export default {
 
           out.push({
             id:       ALL_ORPHANS,
-            kind:     'project',
+            kind:     NAMESPACE_FILTER_KINDS.PROJECT,
             label:    t('nav.ns.orphan'),
             disabled: true,
           });
@@ -265,8 +294,8 @@ export default {
           out,
           namespaces.map((namespace) => {
             return {
-              id:    `ns://${ namespace.id }`,
-              kind:  'namespace',
+              id:    `${ NAMESPACE_FILTER_NS_FULL_PREFIX }${ namespace.id }`,
+              kind:  NAMESPACE_FILTER_KINDS.NAMESPACE,
               label: t('nav.ns.namespace', { name: namespace.nameDisplay }),
             };
           })
@@ -275,7 +304,7 @@ export default {
 
       function divider(out) {
         out.push({
-          kind:     'divider',
+          kind:     NAMESPACE_FILTER_KINDS.DIVIDER,
           label:    `Divider ${ out.length }`,
           disabled: true,
         });
@@ -283,16 +312,14 @@ export default {
     },
 
     isSingleSpecial() {
-      return this.value && this.value.length === 1 && this.value[0].kind === 'special';
+      return this.value && this.value.length === 1 && this.value[0].kind === NAMESPACE_FILTER_KINDS.SPECIAL;
     },
 
     value: {
       get() {
         // Use last picked filter from user preferences
         const prefs = this.$store.getters['prefs/get'](NAMESPACE_FILTERS);
-
-        const prefDefault = this.currentProduct?.customNamespaceFilter ? [] : [ALL_USER];
-        const values = prefs && prefs[this.key] ? prefs[this.key] : prefDefault;
+        const values = prefs && prefs[this.key] ? prefs[this.key] : this.defaultOption();
         const options = this.options;
 
         // Remove values that are not valid options
@@ -311,7 +338,7 @@ export default {
         neu = neu.filter(x => !!x.id);
 
         const last = neu[neu.length - 1];
-        const lastIsSpecial = last?.kind === SPECIAL;
+        const lastIsSpecial = last?.kind === NAMESPACE_FILTER_KINDS.SPECIAL;
         const hadUser = !!old.find(x => x.id === ALL_USER);
         const hadAll = !!old.find(x => x.id === ALL);
 
@@ -320,7 +347,7 @@ export default {
         }
 
         if (neu.length > 1) {
-          neu = neu.filter(x => x.kind !== SPECIAL);
+          neu = neu.filter(x => x.kind !== NAMESPACE_FILTER_KINDS.SPECIAL);
         }
 
         if (neu.find(x => x.id === 'all')) {
@@ -332,7 +359,7 @@ export default {
         // If there was something selected and you remove it, go back to user by default
         // Unless it was user or all
         if (neu.length === 0 && !hadUser && !hadAll) {
-          ids = this.currentProduct?.customNamespaceFilter ? [] : [ALL_USER];
+          ids = this.defaultOption();
         } else {
           ids = neu.map(x => x.id);
         }
@@ -579,28 +606,27 @@ export default {
     },
     selectOption(option) {
       // Ignore click for a divider
-      if (option.kind === 'divider') {
+      if (option.kind === NAMESPACE_FILTER_KINDS.DIVIDER) {
         return;
       }
 
       const current = this.value;
-      const exists = current.findIndex(v => v.id === option.id);
-      const optionIsSelected = exists !== -1;
 
-      // Any type of mode means only a single resource can be selected. So clear out any stale
-      // values (multiple selected in another context OR a single one selected in this context)
-      if (this.namespaceFilterMode) {
-        if (current.length === 1 && optionIsSelected) {
-          // Don't deselect the only selected option
-          return;
-        }
-        current.length = 0;
+      // Remove invalid
+      if (!!this.namespaceFilterMode?.length) {
+        this.value.forEach((v) => {
+          if (!this.namespaceFilterMode.find(f => f === v.kind)) {
+            const index = current.findIndex(c => c.id === v.id);
+
+            current.splice(index, 1);
+          }
+        });
       }
 
-      const remove = !this.namespaceFilterMode && optionIsSelected;
+      const exists = current.findIndex(v => v.id === option.id);
 
       // Remove if it exists (or always add if in singleton mode - we've reset the list above)
-      if (remove) {
+      if (exists !== -1) {
         current.splice(exists, 1);
       } else {
         current.push(option);
@@ -624,13 +650,35 @@ export default {
       this.selectOption(ns);
       event.preventDefault();
       event.stopPropagation();
-    }
+    },
+
+    defaultOption() {
+      // Note - This is one place where a default ns/project filter value is provided (ALL_USER)
+      // There's also..
+      // - dashboard root store `loadCluster` --> when `updateNamespaces` is dispatched
+      // - harvester root store `loadCluster` --> when `updateNamespaces` is dispatched (can be discarded)
+      // Due to this, we can't really set a nicer default when forced ns/project filtering is on (ALL_USER is invalid)
+      if (this.currentProduct?.customNamespaceFilter) {
+        return [];
+      }
+
+      return [ALL_USER];
+    },
+
+    calcNamespaceFilterMode() {
+      if (pAndNFiltering.isEnabled(this.$store.getters)) {
+        return [NAMESPACE_FILTER_KINDS.NAMESPACE, NAMESPACE_FILTER_KINDS.PROJECT];
+      }
+
+      return null;
+    },
   }
 };
 </script>
 
 <template>
   <div
+    v-if="!$fetchState.pending"
     class="ns-filter"
     data-testid="namespaces-filter"
     tabindex="0"
@@ -674,7 +722,7 @@ export default {
       <div
         v-else
         ref="values"
-        v-tooltip="tooltip"
+        v-clean-tooltip="tooltip"
         data-testid="namespaces-values"
         class="ns-values"
       >
@@ -694,8 +742,9 @@ export default {
           class="ns-value"
         >
           <div>{{ ns.label }}</div>
+          <!-- block user from removing the last selection if ns forced filtering is on -->
           <i
-            v-if="!namespaceFilterMode"
+            v-if="!namespaceFilterMode || value.length > 1"
             class="icon icon-close"
             :data-testid="`namespaces-values-close-${j}`"
             @click="removeOption(ns, $event)"
@@ -708,7 +757,7 @@ export default {
       <div
         v-if="hidden > 0"
         ref="more"
-        v-tooltip="tooltip"
+        v-clean-tooltip="tooltip"
         class="ns-more"
       >
         {{ t('namespaceFilter.more', { more: hidden }) }}
@@ -754,7 +803,7 @@ export default {
           class="ns-singleton-info"
         >
           <i
-            v-tooltip="t('resourceList.nsFilterToolTip', { mode: namespaceFilterMode})"
+            v-clean-tooltip="t('resourceList.nsFilterToolTip')"
             class="icon icon-info"
           />
         </div>
@@ -791,7 +840,7 @@ export default {
           @keydown="itemKeyHandler($event, opt)"
         >
           <div
-            v-if="opt.kind === 'divider'"
+            v-if="opt.kind === NAMESPACE_FILTER_KINDS.DIVIDER"
             class="ns-divider"
           />
           <div
@@ -799,7 +848,7 @@ export default {
             class="ns-item"
           >
             <i
-              v-if="opt.kind === 'namespace'"
+              v-if="opt.kind === NAMESPACE_FILTER_KINDS.NAMESPACE"
               class="icon icon-folder"
             />
             <div>{{ opt.label }}</div>

package/config/labels-annotations.js

@@ -130,11 +130,14 @@ export const ANNOTATIONS_TO_FOLD = [
 ];
 
 export const HCI = {
-  CLOUD_INIT:          'harvesterhci.io/cloud-init-template',
-  CLOUD_PROVIDER_IPAM: 'cloudprovider.harvesterhci.io/ipam',
-  NETWORK_ROUTE:       'network.harvesterhci.io/route',
-  IMAGE_NAME:          'harvesterhci.io/image-name',
-  NETWORK_TYPE:        'network.harvesterhci.io/type',
+  CLOUD_INIT:               'harvesterhci.io/cloud-init-template',
+  CLOUD_PROVIDER_IPAM:      'cloudprovider.harvesterhci.io/ipam',
+  NETWORK_ROUTE:            'network.harvesterhci.io/route',
+  IMAGE_NAME:               'harvesterhci.io/image-name',
+  NETWORK_TYPE:             'network.harvesterhci.io/type',
+  CLOUD_PROVIDER_NAMESPACE: 'cloudprovider.harvesterhci.io/namespace',
+  CLOUD_PROVIDER_NETWORK:   'cloudprovider.harvesterhci.io/network',
+  CLOUD_PROVIDER_PROJECT:   'cloudprovider.harvesterhci.io/project',
 };
 
 // Annotations that can be on management.cattle.io.cluster to configure a custom badge

package/config/settings.ts

@@ -159,9 +159,6 @@ export const DEFAULT_PERF_SETTING = {
   },
   disableWebsocketNotification: true,
   garbageCollection:            GC_DEFAULTS,
-  forceNsFilter:                {
-    enabled:   false,
-    threshold: 1500,
-  },
-  advancedWorker: { enabled: false },
+  forceNsFilterV2:              { enabled: false },
+  advancedWorker:               { enabled: false },
 };

package/config/types.js

@@ -182,6 +182,7 @@ export const MANAGEMENT = {
   GLOBAL_ROLE:                   'management.cattle.io.globalrole',
   GLOBAL_ROLE_BINDING:           'management.cattle.io.globalrolebinding',
   POD_SECURITY_POLICY_TEMPLATE:  'management.cattle.io.podsecuritypolicytemplate',
+  PSP_TEMPLATE_BINDING:          'management.cattle.io.podsecuritypolicytemplateprojectbinding',
   PSA:                           'management.cattle.io.podsecurityadmissionconfigurationtemplate',
   MANAGED_CHART:                 'management.cattle.io.managedchart',
   USER_NOTIFICATION:             'management.cattle.io.rancherusernotification',
@@ -285,10 +286,11 @@ export const VIRTUAL_TYPES = {
 
 // harvester
 export const HCI = {
-  CLUSTER:   'harvesterhci.io.management.cluster',
-  DASHBOARD: 'harvesterhci.io.dashboard',
-  IMAGE:     'harvesterhci.io.virtualmachineimage',
-  SETTING:   'harvesterhci.io.setting',
+  CLUSTER:          'harvesterhci.io.management.cluster',
+  DASHBOARD:        'harvesterhci.io.dashboard',
+  IMAGE:            'harvesterhci.io.virtualmachineimage',
+  SETTING:          'harvesterhci.io.setting',
+  HARVESTER_CONFIG: 'rke-machine-config.cattle.io.harvesterconfig',
 };
 
 export const VIRTUAL_HARVESTER_PROVIDER = 'harvester';

package/core/plugin-routes.ts

@@ -153,20 +153,39 @@ export class PluginRoutes {
     // Using the existing router and adding routes to it will force nuxt middleware (specifically authenticated on default layout) to
     // execute many times (nuxt middleware boils down to router.beforeEach). This issue was seen refreshing in a harvester cluster with a
     // dynamically loaded cluster
-    const newRouter: Router = new Router({
-      mode:   'history',
-      routes: allRoutes
-    });
 
+    const pluginRoutesWithParents: any[] = [];
+    const orderedPluginRoutes: any[] = [];
+
+    // separate plugin routes that have parent and not
     newRoutes.forEach((r: any) => {
+      let foundParentRoute;
+
       if (r.parent) {
-        newRouter.addRoute(r.parent, r.route);
-      } else {
-        newRouter.addRoute(r.route);
+        foundParentRoute = allRoutes.find(route => route.name === r.parent);
+
+        if (foundParentRoute) {
+          pluginRoutesWithParents.push(r);
+        }
       }
+
+      if (!foundParentRoute) {
+        orderedPluginRoutes.push(r.route);
+      }
+
       this.pluginRoutes.push(r.route);
     });
 
+    const newRouter: Router = new Router({
+      mode:   'history',
+      routes: [...orderedPluginRoutes, ...allRoutes]
+    });
+
+    // handle plugin routes with parent
+    pluginRoutesWithParents.forEach((r: any) => {
+      newRouter.addRoute(r.parent, r.route);
+    });
+
     // Typing is incorrect
     (this.router as any).matcher = (newRouter as any).matcher;
   }

package/core/plugins-loader.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import $ from 'jquery';
 import JSZip from 'jszip';
 import jsyaml from 'js-yaml';
 
@@ -25,6 +26,7 @@ export default function({
     window.Vue = Vue;
 
     // Global libraries - allows us to externalise these to reduce package bundle size
+    window.$ = $;
     window.__jszip = JSZip;
     window.__jsyaml = jsyaml;
   }