@rancher/shell 2.0.0 → 3.0.0-rc.1

package/pages/prefs.vue

@@ -197,7 +197,7 @@ export default {
       <hr>
       <h4 v-t="'prefs.theme.label'" />
       <ButtonGroup
-        v-model="theme"
+        v-model:value="theme"
         data-testid="prefs__themeOptions"
         :options="themeOptions"
       />
@@ -230,7 +230,7 @@ export default {
       <div class="row mt-20">
         <div class="col span-4">
           <LabeledSelect
-            v-model="dateFormat"
+            v-model:value="dateFormat"
             data-testid="prefs__displaySetting__dateFormat"
             :label="t('prefs.dateFormat.label')"
             option-key="value"
@@ -239,7 +239,7 @@ export default {
         </div>
         <div class="col span-4">
           <LabeledSelect
-            v-model="timeFormat"
+            v-model:value="timeFormat"
             data-testid="prefs__displaySetting__timeFormat"
             :label="t('prefs.timeFormat.label')"
             :options="timeOptions"
@@ -250,7 +250,7 @@ export default {
       <div class="row mt-20">
         <div class="col span-4">
           <LabeledSelect
-            v-model.number="perPage"
+            v-model:value="perPage"
             data-testid="prefs__displaySetting__perPage"
             :label="t('prefs.perPage.label')"
             :options="perPageOptions"
@@ -266,7 +266,7 @@ export default {
       <hr>
       <h4 v-t="'prefs.confirmationSetting.title'" />
       <Checkbox
-        v-model="scalingDownPrompt"
+        v-model:value="scalingDownPrompt"
         data-testid="prefs__scalingDownPrompt"
         :label="t('prefs.confirmationSetting.scalingDownPrompt')"
         class="mt-10"
@@ -277,21 +277,21 @@ export default {
       <hr>
       <h4 v-t="'prefs.advFeatures.title'" />
       <Checkbox
-        v-model="viewInApi"
+        v-model:value="viewInApi"
         data-testid="prefs__viewInApi"
         :label="t('prefs.advFeatures.viewInApi', {}, true)"
         class="mt-10"
       />
       <br>
       <Checkbox
-        v-model="allNamespaces"
+        v-model:value="allNamespaces"
         data-testid="prefs__allNamespaces"
         :label="t('prefs.advFeatures.allNamespaces', {}, true)"
         class="mt-20"
       />
       <br>
       <Checkbox
-        v-model="themeShortcut"
+        v-model:value="themeShortcut"
         data-testid="prefs__themeShortcut"
         :label="t('prefs.advFeatures.themeShortcut', {}, true)"
         class="mt-20"
@@ -299,7 +299,7 @@ export default {
       <br>
       <Checkbox
         v-if="!isSingleProduct"
-        v-model="hideDescriptions"
+        v-model:value="hideDescriptions"
         data-testid="prefs__hideDescriptions"
         :label="t('prefs.hideDesc.label')"
         class="mt-20"
@@ -307,7 +307,7 @@ export default {
       <template v-if="admin">
         <br>
         <Checkbox
-          v-model="pluginDeveloper"
+          v-model:value="pluginDeveloper"
           :label="t('prefs.advFeatures.pluginDeveloper', {}, true)"
           class="mt-20"
         />
@@ -318,7 +318,7 @@ export default {
       <hr>
       <h4 v-t="'prefs.keymap.label'" />
       <ButtonGroup
-        v-model="keymap"
+        v-model:value="keymap"
         data-testid="prefs__keymapOptions"
         :options="keymapOptions"
       />
@@ -331,7 +331,7 @@ export default {
       <hr>
       <h4 v-t="'prefs.helm.label'" />
       <ButtonGroup
-        v-model="showPreRelease"
+        v-model:value="showPreRelease"
         data-testid="prefs__helmOptions"
         :options="helmOptions"
       />

package/pages/support/index.vue

@@ -172,8 +172,8 @@ export default {
           </div>
           <div class="boxes">
             <div
-              v-for="key in promos"
-              :key="key"
+              v-for="(key, i) in promos"
+              :key="i"
               class="box"
             >
               <h2>{{ t(`${key}.title`) }}</h2>
@@ -213,7 +213,7 @@ export default {
       box-shadow: none;
     }
 
-    &::v-deep .card-actions {
+    &:deep() .card-actions {
       display: flex;
       justify-content: space-between;
     }

package/pkg/tsconfig.json

@@ -18,7 +18,6 @@
       "webpack-env",
       "@types/node",
       "@types/jest",
-      "@nuxt/types"
     ],
     "lib": [
       "esnext",

package/plugins/clean-html-directive.js

@@ -1,9 +1,10 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import cleanHtmlDirective from '@shell/directives/clean-html';
+const vueApp = createApp({});
 
 export default cleanHtmlDirective;
 
 /* eslint-disable-next-line no-console */
 console.warn(`Importing cleanHtmlDirective from plugins has been deprecated, use shell/directives/clean-html.js instead.  
-Make sure to invoke Vue.directive('clean-html', cleanHtmlDirective) to maintain compatibility.`);
-Vue.directive('clean-html', cleanHtmlDirective);
+Make sure to invoke vueApp.directive('clean-html', cleanHtmlDirective) to maintain compatibility.`);
+vueApp.directive('clean-html', cleanHtmlDirective);

package/plugins/clean-tooltip-directive.js

@@ -1,8 +1,9 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import cleanTooltipDirective from '@shell/directives/clean-tooltip';
+const vueApp = createApp({});
 
 export default cleanTooltipDirective;
 /* eslint-disable-next-line no-console */
 console.warn(`Importing cleanTooltipDirective from plugins has been deprecated, use shell/directives/clean-tooltip.js instead.
-Make sure to invoke it using Vue.directive('clean-tooltip', cleanTooltipDirective ) to maintain compatibility.`);
-Vue.directive('clean-tooltip', cleanTooltipDirective);
+Make sure to invoke it using vueApp.directive('clean-tooltip', cleanTooltipDirective ) to maintain compatibility.`);
+vueApp.directive('clean-tooltip', cleanTooltipDirective);

package/plugins/dashboard-store/actions.js

@@ -419,7 +419,7 @@ export default {
         },
         result: {
           count:     out.count,
-          pages:     out.pages,
+          pages:     out.pages || Math.ceil(out.count / (opt.pagination.pageSize || Number.MAX_SAFE_INTEGER)),
           timestamp: new Date().getTime()
         }
       } : undefined,

package/plugins/dashboard-store/getters.js

@@ -429,7 +429,7 @@ export default {
       };
     }
 
-    const namespaces = _typeObj?.namespaced ? Object.keys(rootGetters.activeNamespaceCache || {}) : [];
+    const namespaces = _typeObj?.namespaced && !rootGetters.isAllNamespaces ? Object.keys(rootGetters.activeNamespaceCache || {}) : [];
 
     return matchingCounts(_typeObj, namespaces.length ? namespaces : null);
   },

package/plugins/dashboard-store/index.js

@@ -1,6 +1,7 @@
 import actions from './actions';
 import getters from './getters';
 import mutations from './mutations';
+import { markRaw } from 'vue';
 
 export const coreStoreModule = {
   strict:     false,
@@ -23,6 +24,7 @@ export const coreStoreState = (namespace, baseUrl, isClusterStore) => ({
     isClusterStore
   },
   types: {},
+  $ctx:  markRaw({}),
 });
 
 export default (vuexModule, config, init) => {

package/plugins/dashboard-store/mutations.js

@@ -1,4 +1,4 @@
-import Vue, { markRaw } from 'vue';
+import { markRaw, reactive } from 'vue';
 import { addObject, addObjects, clear, removeObject } from '@shell/utils/array';
 import { SCHEMA, COUNT } from '@shell/config/types';
 import { normalizeType, keyFieldFor } from '@shell/plugins/dashboard-store/normalize';
@@ -39,7 +39,7 @@ function registerType(state, type) {
       map: markRaw(new Map()),
     };
 
-    Vue.set(state.types, type, cache);
+    state.types[type] = cache;
   }
 
   return cache;
@@ -51,7 +51,7 @@ export function replace(existing, data) {
   }
 
   for ( const k of Object.keys(data) ) {
-    Vue.set(existing, k, data[k]);
+    existing[k] = data[k];
   }
 
   return existing;
@@ -324,7 +324,7 @@ export function loadAll(state, {
   }
 
   const keyField = getters.keyFieldForType(type);
-  const proxies = data.map((x) => classify(ctx, x));
+  const proxies = reactive(data.map((x) => classify(ctx, x)));
   const cache = registerType(state, type);
 
   clear(cache.list);
@@ -454,7 +454,7 @@ export default {
     }
 
     const keyField = ctx.getters.keyFieldForType(type);
-    const proxies = data.map((x) => classify(ctx, x));
+    const proxies = reactive(data.map((x) => classify(ctx, x)));
     const cache = registerType(state, type);
 
     clear(cache.list);

package/plugins/dashboard-store/resource-class.js

@@ -30,7 +30,7 @@ import forIn from 'lodash/forIn';
 import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
-import Vue from 'vue';
+import { markRaw } from 'vue';
 
 import { ExtensionPoint, ActionLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
@@ -552,13 +552,13 @@ function maybeFn(val) {
 }
 
 export default class Resource {
-  constructor(data, ctx, rehydrateNamespace = null, setClone = false) {
+  constructor(data, ctx = {}, rehydrateNamespace = null, setClone = false) {
     for ( const k in data ) {
       this[k] = data[k];
     }
 
     Object.defineProperty(this, '$ctx', {
-      value:      ctx,
+      value:      markRaw(ctx),
       enumerable: false,
     });
 
@@ -880,7 +880,7 @@ export default class Resource {
   // You can add custom actions by overriding your own availableActions (and probably reading super._availableActions)
   get _availableActions() {
     // get menu actions available by plugins configuration
-    const currentRoute = this.currentRouter().app._route;
+    const currentRoute = this.currentRouter().currentRoute.value;
     const extensionMenuActions = getApplicableExtensionEnhancements(this.$rootState, ExtensionPoint.ACTION, ActionLocation.TABLE, currentRoute, this);
 
     const all = [
@@ -1626,7 +1626,7 @@ export default class Resource {
           if ( tolower !== pathValue ) {
             pathValue = tolower;
 
-            Vue.set(data, path, pathValue);
+            data[path] = pathValue;
           }
 
           errors.push(...validateDnsLikeTypes(pathValue, fieldType, displayKey, this.$rootGetters, errors));

package/plugins/extend-router.js

@@ -1,60 +1,80 @@
-import VueRouter from 'vue-router';
+// import VueRouter from 'vue-router';
 import isEqual from 'lodash/isEqual';
 import { queryParamsFor } from '@shell/utils/router';
 
 // We're consuming the errors of the push and replace functions based on this comment:
 // https://github.com/vuejs/vue-router/issues/2881#issuecomment-520554378
 
-const originalPush = VueRouter.prototype.push;
+// const originalPush = VueRouter.prototype.push;
 
-VueRouter.prototype.push = function push(location, onResolve, onReject) {
-  if (onResolve || onReject) {
-    return originalPush.call(this, location, onResolve, onReject);
-  }
+// VueRouter.prototype.push = function push(location, onResolve, onReject) {
+//   if (onResolve || onReject) {
+//     return originalPush.call(this, location, onResolve, onReject);
+//   }
 
-  return originalPush?.call(this, location)?.catch((err) => {
-    if (VueRouter.isNavigationFailure(err)) {
-      // If there really is an error, throw it
-      return Promise.reject(err);
-    }
+//   return originalPush?.call(this, location)?.catch((err) => {
+//     if (VueRouter.isNavigationFailure(err)) {
+//       // If there really is an error, throw it
+//       return Promise.reject(err);
+//     }
 
-    // Otherwise resolve to false to indicate the original push call didn't go to its original destination.
-    return Promise.resolve(false);
-  });
-};
+//     // Otherwise resolve to false to indicate the original push call didn't go to its original destination.
+//     return Promise.resolve(false);
+//   });
+// };
 
-const originalReplace = VueRouter.prototype.replace;
+// const originalReplace = VueRouter.prototype.replace;
 
-VueRouter.prototype.replace = function replace(location, onResolve, onReject) {
-  if (onResolve || onReject) {
-    return originalReplace.call(this, location, onResolve, onReject);
-  }
+// VueRouter.prototype.replace = function replace(location, onResolve, onReject) {
+//   if (onResolve || onReject) {
+//     return originalReplace.call(this, location, onResolve, onReject);
+//   }
 
-  return originalReplace.call(this, location).catch((err) => {
-    if (VueRouter.isNavigationFailure(err)) {
-      // resolve err
-      return err;
-    }
+//   return originalReplace.call(this, location).catch((err) => {
+//     if (VueRouter.isNavigationFailure(err)) {
+//       // resolve err
+//       return err;
+//     }
 
-    // rethrow error
-    return Promise.reject(err);
-  });
-};
+//     // rethrow error
+//     return Promise.reject(err);
+//   });
+// };
 
-VueRouter.prototype.applyQuery = function(qp, defaults = {}) {
-  const query = queryParamsFor(this.currentRoute.query, qp, defaults);
-  const hash = this.currentRoute.hash || '';
+// VueRouter.prototype.applyQuery = function(qp, defaults = {}) {
+//   const query = queryParamsFor(this.currentRoute.query, qp, defaults);
+//   const hash = this.currentRoute.hash || '';
 
-  if ( isEqual(query, this.currentRoute.query) ) {
-    return;
-  }
+//   if ( isEqual(query, this.currentRoute.query) ) {
+//     return;
+//   }
 
-  return this.replace({ query, hash }).catch((err) => {
-    if ( err?.name === 'NavigationDuplicated' ) {
-      // Do nothing, this is fine...
-      // https://github.com/vuejs/vue-router/issues/2872
-    } else {
-      throw err;
+//   return this.replace({ query, hash }).catch((err) => {
+//     if ( err?.name === 'NavigationDuplicated' ) {
+//       // Do nothing, this is fine...
+//       // https://github.com/vuejs/vue-router/issues/2872
+//     } else {
+//       throw err;
+//     }
+//   });
+// };
+
+export const extendRouter = (router) => {
+  router.applyQuery = function(qp, defaults = {}) {
+    const query = queryParamsFor(router.currentRoute.value.query, qp, defaults);
+    const hash = router.currentRoute.value.hash || '';
+
+    if (isEqual(query, router.currentRoute.value.query)) {
+      return;
     }
-  });
+
+    return router.replace({ query, hash }).catch((err) => {
+      if (err && err.name === 'NavigationDuplicated') {
+        // Do nothing, this is fine...
+        // https://github.com/vuejs/vue-router/issues/2872
+      } else {
+        throw err;
+      }
+    });
+  };
 };

package/plugins/floating-vue.js

@@ -0,0 +1 @@
+export const floatingVueOptions = { themes: { tooltip: { html: true } } };

package/plugins/formatters.js

@@ -3,7 +3,7 @@
 // We do it here to keep it away from plugins
 // It was in SortableTable itself, but this causes plugins to pull in all formatters and their dependencies
 
-import { FORMATTERS } from '@shell/components/SortableTable';
+import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
 
 const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
 

package/plugins/global-formatters.js

@@ -1,31 +1,20 @@
 /* eslint-disable no-console */
-import Vue from 'vue';
-
 const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
 
 const globalFormatters = {
-  install: (Vue) => {
+  install: (vueApp) => {
     components.keys().forEach((fileName) => {
       const componentConfig = components(fileName);
       const componentName = fileName.split('/').pop().split('.')[0];
 
-      if (Vue.component(componentName)) {
+      if (vueApp.component(componentName)) {
         // eslint-disable-next-line no-console
         console.debug(`Skipping ${ componentName } install. Component already exists.`);
       } else {
-        Vue.component(componentName, componentConfig.default || componentConfig);
+        vueApp.component(componentName, componentConfig.default || componentConfig);
       }
     });
   }
 };
 
 export default globalFormatters;
-
-// 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 vue plugins
-const isThisFileBeingExecutedInATest = process.env.NODE_ENV === 'test';
-
-if (isThisFileBeingExecutedInATest) {
-  console.warn('The implicit addition of global formatters has been deprecated in Rancher Shell and will be removed in a future version. Make sure to invoke `Vue.use(globalFormatters)` to maintain compatibility.');
-
-  Vue.use(globalFormatters);
-}

package/plugins/i18n.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { escapeHtml } from '../utils/string';
-import Vue, { watchEffect, ref, h } from 'vue';
+import { watchEffect, ref, h } from 'vue';
 import { useStore } from '../composables/useStore';
 
 export function stringFor(store, key, args, raw = false, escapehtml = true) {
@@ -29,9 +29,9 @@ export function stringFor(store, key, args, raw = false, escapehtml = true) {
 }
 
 function directive(el, binding, vnode /*, oldVnode */) {
-  const { context } = vnode;
+  const { instance } = binding;
   const raw = binding.modifiers && binding.modifiers.raw === true;
-  const str = stringFor(context.$store, binding.value, {}, raw);
+  const str = stringFor(instance.$store, binding.value, {}, raw);
 
   if ( binding.arg ) {
     el.setAttribute(binding.arg, str);
@@ -42,7 +42,7 @@ 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)`');
+  console.warn('Function `directiveSsr` is deprecated. Please install i18n as a vue plugin: `vueApp.use(i18n)`');
 
   const { context } = vnode;
   const raw = binding.modifiers && binding.modifiers.raw === true;
@@ -57,30 +57,30 @@ export function directiveSsr(vnode, binding) {
 
 const i18n = {
   name:    'i18n',
-  install: (Vue, _options) => {
-    if (Vue.prototype.t && Vue.directive('t') && Vue.component('t')) {
+  install: (vueApp, _options) => {
+    if (vueApp.config.globalProperties.t && vueApp.directive('t') && vueApp.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) {
+    vueApp.config.globalProperties.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() {
+    vueApp.directive('t', {
+      beforeMount() {
         directive(...arguments);
       },
-      update() {
+      updated() {
         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', {
+    vueApp.component('t', {
       inheritAttrs: false,
       props:        {
         k: {
@@ -98,6 +98,10 @@ const i18n = {
         escapehtml: {
           type:    Boolean,
           default: true,
+        },
+        class: {
+          type:    String,
+          default: ''
         }
       },
       setup(props, ctx) {
@@ -115,11 +119,12 @@ const i18n = {
         if (this.raw) {
           return h(
             this.tag,
-            { domProps: { innerHTML: this.msg } }
+            { class: this.class, innerHTML: this.msg }
           );
         } else {
           return h(
             this.tag,
+            { class: this.class },
             [this.msg]
           );
         }
@@ -129,13 +134,3 @@ const i18n = {
 };
 
 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,8 +1,9 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import intNumberDirective from '@shell/directives/int-number';
+const vueApp = createApp({});
 
 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);
+Make sure to invoke it using vueApp.directive('intNumber', intNumberDirective) to maintain compatibility.`);
+vueApp.directive('intNumber', intNumberDirective);

package/plugins/positive-int-number.js

@@ -1,8 +1,9 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import positiveIntNumberDirective from '@shell/directives/positive-int-number';
+const vueApp = createApp({});
 
 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);
+Make sure to invoke it using vueApp.directive('positiveIntNumber', positiveIntNumberDirective) to maintain compatibility.`);
+vueApp.directive('positiveIntNumber', positiveIntNumberDirective);