@rancher/shell 0.5.3 → 1.2.1

package/initialize/index.js

@@ -1,16 +1,19 @@
 // Taken from @nuxt/vue-app/template/index.js
-// This file was generated during Nuxt migration
 
 import Vue from 'vue';
+import Meta from 'vue-meta';
+import ClientOnly from 'vue-client-only';
+import NoSsr from 'vue-no-ssr';
 import { createRouter } from '../config/router.js';
 import NuxtChild from '../components/nuxt/nuxt-child.js';
+import NuxtError from '../layouts/error.vue';
 import Nuxt from '../components/nuxt/nuxt.js';
 import App from './App.js';
 import { setContext, getLocation, getRouteData, normalizeError } from '../utils/nuxt';
 import { createStore } from '../config/store.js';
 
 /* Plugins */
-import { loadDirectives } from '@shell/plugins';
+
 import '../plugins/portal-vue.js';
 import cookieUniversalNuxt from '../utils/cookie-universal-nuxt.js';
 import axios from '../utils/axios.js';
@@ -18,7 +21,12 @@ import plugins from '../core/plugins.js';
 import pluginsLoader from '../core/plugins-loader.js';
 import axiosShell from '../plugins/axios';
 import '../plugins/tooltip';
+import '../plugins/clean-tooltip-directive';
+import '../plugins/vue-clipboard2';
 import '../plugins/v-select';
+import '../plugins/directives';
+import '../plugins/clean-html-directive';
+import '../plugins/transitions';
 import '../plugins/vue-js-modal';
 import '../plugins/js-yaml';
 import '../plugins/resize';
@@ -39,28 +47,22 @@ import '../plugins/formatters';
 import version from '../plugins/version';
 import steveCreateWorker from '../plugins/steve-create-worker';
 
-// Prevent extensions from overriding existing directives
-// Hook into Vue.directive and keep track of the directive names that have been added
-// and prevent an existing directive from being overwritten
-const directiveNames = {};
-const vueDirective = Vue.directive;
-
-Vue.directive = function(name) {
-  if (directiveNames[name]) {
-    console.log(`Can not override directive: ${ name }`); // eslint-disable-line no-console
+// Component: <ClientOnly>
+Vue.component(ClientOnly.name, ClientOnly);
 
-    return;
-  }
+// TODO: Remove in Nuxt 3: <NoSsr>
+Vue.component(NoSsr.name, {
+  ...NoSsr,
+  render(h, ctx) {
+    if (process.client && !NoSsr._warned) {
+      NoSsr._warned = true;
 
-  directiveNames[name] = true;
-
-  vueDirective.apply(Vue, arguments);
-};
+      console.warn('<no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead'); // eslint-disable-line no-console
+    }
 
-// 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();
+    return NoSsr.render(h, ctx);
+  }
+});
 
 // Component: <NuxtChild>
 Vue.component(NuxtChild.name, NuxtChild);
@@ -75,7 +77,7 @@ Object.defineProperty(Vue.prototype, '$nuxt', {
   get() {
     const globalNuxt = this.$root.$options.$nuxt;
 
-    if (!globalNuxt && typeof window !== 'undefined') {
+    if (process.client && !globalNuxt && typeof window !== 'undefined') {
       return window.$nuxt;
     }
 
@@ -84,10 +86,18 @@ Object.defineProperty(Vue.prototype, '$nuxt', {
   configurable: true
 });
 
-async function createApp(config = {}) {
-  const router = await createRouter(config);
+Vue.use(Meta, {
+  keyName: 'head', attribute: 'data-n-head', ssrAttribute: 'data-n-head-ssr', tagIDKeyName: 'hid'
+});
 
-  const store = createStore();
+const defaultTransition = {
+  name: 'page', mode: 'out-in', appear: true, appearClass: 'appear', appearActiveClass: 'appear-active', appearToClass: 'appear-to'
+};
+
+async function createApp(ssrContext, config = {}) {
+  const router = await createRouter(ssrContext, config);
+
+  const store = createStore(ssrContext);
 
   // Add this.$router into store actions/mutations
   store.$router = router;
@@ -97,9 +107,40 @@ async function createApp(config = {}) {
   // here we inject the router and store to all child components,
   // making them available everywhere as `this.$router` and `this.$store`.
   const app = {
+    head: {
+      title: 'dashboard',
+      meta:  [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, {
+        hid: 'description', name: 'description', content: 'Rancher Dashboard'
+      }],
+      style:  [],
+      script: []
+    },
+
     store,
     router,
     nuxt: {
+      defaultTransition,
+      transitions: [defaultTransition],
+      setTransitions(transitions) {
+        if (!Array.isArray(transitions)) {
+          transitions = [transitions];
+        }
+        transitions = transitions.map((transition) => {
+          if (!transition) {
+            transition = defaultTransition;
+          } else if (typeof transition === 'string') {
+            transition = Object.assign({}, defaultTransition, { name: transition });
+          } else {
+            transition = Object.assign({}, defaultTransition, transition);
+          }
+
+          return transition;
+        });
+        this.$options.nuxt.transitions = transitions;
+
+        return transitions;
+      },
+
       err:     null,
       dateErr: null,
       error(err) {
@@ -113,6 +154,10 @@ async function createApp(config = {}) {
         }
         nuxt.dateErr = Date.now();
         nuxt.err = err;
+        // Used in src/server.js
+        if (ssrContext) {
+          ssrContext.nuxt.error = err;
+        }
 
         return err;
       }
@@ -123,21 +168,29 @@ async function createApp(config = {}) {
   // Make app available into store via this.app
   store.app = app;
 
-  const next = (location) => app.router.push(location);
+  const next = ssrContext ? ssrContext.next : (location) => app.router.push(location);
   // Resolve route
+  let route;
 
-  const path = getLocation(router.options.base, router.options.mode);
-  const route = router.resolve(path).route;
+  if (ssrContext) {
+    route = router.resolve(ssrContext.url).route;
+  } else {
+    const path = getLocation(router.options.base, router.options.mode);
+
+    route = router.resolve(path).route;
+  }
 
   // Set context to app.context
   await setContext(app, {
     store,
     route,
     next,
-    error:   app.nuxt.error.bind(app),
-    payload: undefined,
-    req:     undefined,
-    res:     undefined
+    error:           app.nuxt.error.bind(app),
+    payload:         ssrContext ? ssrContext.payload : undefined,
+    req:             ssrContext ? ssrContext.req : undefined,
+    res:             ssrContext ? ssrContext.res : undefined,
+    beforeRenderFns: ssrContext ? ssrContext.beforeRenderFns : undefined,
+    ssrContext
   });
 
   function inject(key, value) {
@@ -181,11 +234,20 @@ async function createApp(config = {}) {
   // Inject runtime config as $config
   inject('config', config);
 
-  // Replace store state before plugins execution
-  if (window.__NUXT__ && window.__NUXT__.state) {
-    store.replaceState(window.__NUXT__.state);
+  if (process.client) {
+    // Replace store state before plugins execution
+    if (window.__NUXT__ && window.__NUXT__.state) {
+      store.replaceState(window.__NUXT__.state);
+    }
   }
 
+  // Add enablePreview(previewData = {}) in context for plugins
+  if (process.static && process.client) {
+    app.context.enablePreview = function(previewData = {}) {
+      app.previewData = Object.assign({}, previewData);
+      inject('preview', previewData);
+    };
+  }
   // Plugin execution
 
   // if (typeof nuxt_plugin_portalvue_6babae27 === 'function') {
@@ -212,15 +274,15 @@ async function createApp(config = {}) {
     await axiosShell(app.context, inject);
   }
 
-  if (typeof intNumber === 'function') {
+  if (process.client && typeof intNumber === 'function') {
     await intNumber(app.context, inject);
   }
 
-  if (typeof positiveIntNumber === 'function') {
+  if (process.client && typeof positiveIntNumber === 'function') {
     await positiveIntNumber(app.context, inject);
   }
 
-  if (typeof nuxtClientInit === 'function') {
+  if (process.client && typeof nuxtClientInit === 'function') {
     await nuxtClientInit(app.context, inject);
   }
 
@@ -232,31 +294,43 @@ async function createApp(config = {}) {
     await backButton(app.context, inject);
   }
 
-  if (typeof plugin === 'function') {
+  if (process.client && typeof plugin === 'function') {
     await plugin(app.context, inject);
   }
 
-  if (typeof codeMirror === 'function') {
+  if (process.client && typeof codeMirror === 'function') {
     await codeMirror(app.context, inject);
   }
 
-  if (typeof version === 'function') {
+  if (process.client && typeof version === 'function') {
     await version(app.context, inject);
   }
 
-  if (typeof steveCreateWorker === 'function') {
+  if (process.client && typeof steveCreateWorker === 'function') {
     await steveCreateWorker(app.context, inject);
   }
 
+  // if (process.client && typeof formatters === 'function') {
+  //   await formatters(app.context, inject);
+  // }
+
+  // Lock enablePreview in context
+  if (process.static && process.client) {
+    app.context.enablePreview = function() {
+      console.warn('You cannot call enablePreview() outside a plugin.'); // eslint-disable-line no-console
+    };
+  }
+
   // Wait for async component to be resolved first
   await new Promise((resolve, reject) => {
     // Ignore 404s rather than blindly replacing URL in browser
-    const { route } = router.resolve(app.context.route.fullPath);
+    if (process.client) {
+      const { route } = router.resolve(app.context.route.fullPath);
 
-    if (!route.matched.length) {
-      return resolve();
+      if (!route.matched.length) {
+        return resolve();
+      }
     }
-
     router.replace(app.context.route.fullPath, resolve, (err) => {
       // https://github.com/vuejs/vue-router/blob/v3.4.3/src/util/errors.js
       if (!err._isRouter) {
@@ -268,6 +342,9 @@ async function createApp(config = {}) {
 
       // navigated to a different route in router guard
       const unregister = router.afterEach(async(to, from) => {
+        if (process.server && ssrContext && ssrContext.url) {
+          ssrContext.url = to.fullPath;
+        }
         app.context.route = await getRouteData(to);
         app.context.params = to.params || {};
         app.context.query = to.query || {};
@@ -284,4 +361,4 @@ async function createApp(config = {}) {
   };
 }
 
-export { createApp };
+export { createApp, NuxtError };

package/initialize/layouts.ts

@@ -0,0 +1,26 @@
+import { sanitizeComponent } from '@shell/utils/nuxt';
+import blank from '@shell/layouts/blank.vue';
+import defaultLayout from '@shell/layouts/default.vue';
+import home from '@shell/layouts/home.vue';
+import plain from '@shell/layouts/plain.vue';
+import unauthenticated from '@shell/layouts/unauthenticated.vue';
+import standalone from '@shell/layouts/standalone.vue';
+
+export type Component = { [key: string]: any };
+export type Layouts = { [key: string]: Component };
+const layouts: Layouts = { };
+
+export function getLayouts(): Layouts {
+  return layouts;
+}
+
+export function registerLayout(name: string, component: Component): void {
+  layouts[`_${ name }`] = sanitizeComponent(component);
+}
+
+registerLayout('blank', blank) ;
+registerLayout('default', defaultLayout) ;
+registerLayout('home', home) ;
+registerLayout('plain', plain) ;
+registerLayout('unauthenticated', unauthenticated) ;
+registerLayout('standalone', standalone);

package/{components/templates → layouts}/blank.vue

@@ -11,7 +11,7 @@ export default {
 
 <template>
   <main class="main-layout">
-    <router-view :key="$route.path" />
+    <nuxt />
 
     <Inactivity />
   </main>

package/{components/templates → layouts}/default.vue

@@ -248,10 +248,7 @@ export default {
         v-if="clusterAndRouteReady"
         class="main-layout"
       >
-        <router-view
-          :key="$route.path"
-          class="outlet"
-        />
+        <nuxt class="outlet" />
         <ActionMenu />
         <PromptRemove />
         <PromptRestore />
@@ -285,10 +282,7 @@ export default {
         v-else-if="unmatchedRoute"
         class="main-layout"
       >
-        <router-view
-          :key="$route.path"
-          class="outlet"
-        />
+        <nuxt class="outlet" />
       </main>
       <div
         v-if="$refs.draggableZone"
@@ -310,3 +304,99 @@ export default {
     <DraggableZone ref="draggableZone" />
   </div>
 </template>
+<style lang="scss">
+  .dashboard-root {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .dashboard-content {
+    display: grid;
+    position: relative;
+    flex: 1 1 auto;
+    overflow-y: auto;
+    min-height: 0px;
+
+    &.dashboard-padding-left {
+    padding-left: $app-bar-collapsed-width;
+
+      .overlay-content-mode {
+        left: calc(var(--nav-width) + $app-bar-collapsed-width);
+      }
+   }
+
+    &.pin-right {
+      grid-template-areas:
+        "header  header  header"
+        "nav      main     wm";
+      grid-template-rows:    var(--header-height) auto;
+      grid-template-columns: var(--nav-width)     auto var(--wm-width, 0px);
+    }
+
+    &.pin-bottom {
+      grid-template-areas:
+        "header  header"
+        "nav       main"
+        "wm         wm";
+      grid-template-rows:    var(--header-height) auto  var(--wm-height, 0px);
+      grid-template-columns: var(--nav-width)     auto;
+    }
+
+    &.pin-left {
+      grid-template-areas:
+        "header  header  header"
+        "wm       nav     main";
+      grid-template-rows:    var(--header-height) auto;
+      grid-template-columns: var(--wm-width, 0px) var(--nav-width) auto;
+    }
+
+    > HEADER {
+      grid-area: header;
+    }
+
+    .default-side-nav {
+      grid-area: nav;
+    }
+  }
+
+  .wm {
+    grid-area: wm;
+    overflow-y: hidden;
+    z-index: 1;
+  }
+
+  .localeSelector {
+    ::v-deep .popover-inner {
+      padding: 50px 0;
+    }
+
+    ::v-deep .popover-arrow {
+      display: none;
+    }
+
+    ::v-deep .popover:focus {
+      outline: 0;
+    }
+
+    li {
+      padding: 8px 20px;
+
+      &:hover {
+        background-color: var(--primary-hover-bg);
+        color: var(--primary-hover-text);
+        text-decoration: none;
+      }
+    }
+  }
+
+  .drag-start {
+    z-index: 1000;
+    opacity: 0.5;
+    transition: opacity .3s ease;
+  }
+
+  .drag-end {
+    opacity: 1;
+  }
+</style>

package/{components/templates → layouts}/error.vue

@@ -5,15 +5,18 @@ export default {
   name:       'NuxtError',
   mixins:     [Brand],
   middleware: ['unauthenticated'],
+  props:      {
+    error: {
+      type:    Object,
+      default: null
+    }
+  },
 
   data() {
     return { ready: false };
   },
 
   computed: {
-    error() {
-      return window.$nuxt.nuxt.err || {};
-    },
     statusCode() {
       return (this.error && this.error.statusCode) || 599;
     },
@@ -21,11 +24,6 @@ export default {
       return this.error.message || '';
     }
   },
-  watch: {
-    message(neu) {
-      document.title = neu;
-    }
-  },
 
   mounted() {
     // If the page isn't a sub-path of the base url, redirect to it instead of saying not found.
@@ -42,8 +40,19 @@ export default {
     setTimeout(() => {
       this.ready = true;
     }, 1000);
-    document.title = this.message;
   },
+
+  head() {
+    return {
+      title: this.message,
+      meta:  [
+        {
+          name:    'viewport',
+          content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0'
+        }
+      ]
+    };
+  }
 };
 </script>
 
@@ -103,7 +112,7 @@ export default {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   right: 0;

package/{components/templates → layouts}/home.vue

@@ -68,10 +68,7 @@ export default {
       />
 
       <main class="main-layout">
-        <router-view
-          :key="$route.path"
-          class="outlet"
-        />
+        <nuxt class="outlet" />
       </main>
     </div>
     <FixedBanner :footer="true" />

package/{components/templates → layouts}/plain.vue

@@ -70,10 +70,7 @@ export default {
       <Header :simple="true" />
       <main class="main-layout">
         <IndentedPanel class="pt-20">
-          <router-view
-            :key="$route.path"
-            class="outlet"
-          />
+          <nuxt class="outlet" />
         </IndentedPanel>
         <ActionMenu />
         <PromptRemove />

package/{components/templates → layouts}/standalone.vue

@@ -3,7 +3,7 @@ export default { middleware: ['unauthenticated'] };
 </script>
 
 <template>
-  <router-view :key="$route.path" />
+  <nuxt />
 </template>
 
 <style lang="scss">

package/{components/templates → layouts}/unauthenticated.vue

@@ -14,7 +14,7 @@ export default {
     <div class="dashboard-root">
       <FixedBanner :header="true" />
       <FixedBanner :consent="true" />
-      <router-view :key="$route.path" />
+      <nuxt />
       <FixedBanner :footer="true" />
     </div>
   </main>

package/list/catalog.cattle.io.app.vue

@@ -39,7 +39,6 @@ export default {
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-    data-testid="installed-app-catalog-list"
   >
     <template #cell:upgrade="{row}">
       <span

package/list/management.cattle.io.feature.vue

@@ -44,7 +44,13 @@ export default {
       this.serverUrl = this.serverUrlSetting.value;
     } else {
       this.noUrlSet = true;
-      this.serverUrl = window.location.origin;
+      if ( process.server ) {
+        const { req } = this.$nuxt.context;
+
+        this.serverUrl = req.headers.host;
+      } else {
+        this.serverUrl = window.location.origin;
+      }
     }
   },
 

package/list/management.cattle.io.setting.vue

@@ -92,7 +92,6 @@ export default {
       v-for="setting in settings"
       :key="setting.id"
       class="advanced-setting mb-20"
-      :data-testid="`advanced-setting__option-${setting.id}`"
     >
       <div class="header">
         <div class="title">

package/list/management.cattle.io.user.vue

@@ -5,6 +5,7 @@ import { NAME } from '@shell/config/product/auth';
 import ResourceTable from '@shell/components/ResourceTable';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import { isAdminUser } from '@shell/store/type-map';
 
 export default {
   components: {
@@ -86,8 +87,11 @@ export default {
       });
 
       return requiredUsers;
-    }
+    },
 
+    isAdmin() {
+      return isAdminUser(this.$store.getters);
+    },
   },
 
   methods: {
@@ -128,6 +132,19 @@ export default {
           @click="refreshGroupMemberships"
         />
       </template>
+      <template
+        v-if="isAdmin"
+        #subHeader
+      >
+        <router-link
+          :to="{ name: 'c-cluster-auth-user.retention'}"
+          class="btn role-link btn-sm btn-user-retention"
+          data-testid="router-link-user-retention"
+        >
+          <i class="icon icon-gear" />
+          {{ t('user.retention.button.label') }}
+        </router-link>
+      </template>
     </Masthead>
 
     <ResourceTable
@@ -142,4 +159,11 @@ export default {
 </template>
 
 <style lang="scss">
+
+  .btn-user-retention {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0;
+  }
+
 </style>

package/list/node.vue

@@ -167,7 +167,6 @@ export default {
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-      data-testid="cluster-node-list"
       v-on="$listeners"
     >
       <template #sub-row="{fullColspan, row, onRowMouseEnter, onRowMouseLeave}">