@rancher/shell 0.5.2 → 1.2.0

package/edit/service.vue

@@ -26,7 +26,6 @@ import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { allHash } from '@shell/utils/promise';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
 import { Port } from '@shell/utils/validators/formRules';
-import { _CLONE } from '@shell/config/query-params';
 
 const SESSION_AFFINITY_ACTION_VALUES = {
   NONE:     'None',
@@ -76,17 +75,6 @@ export default {
       }
     }
 
-    // Set clusterIP to an empty string, if it exists and the value is not None when clone a service
-    // Remove clusterIPs if it exists when clone a service
-    if (this.realMode === _CLONE) {
-      if (this.value?.spec?.clusterIP && this.value?.spec?.clusterIP !== 'None') {
-        this.value.spec.clusterIP = '';
-      }
-      if (this.value?.spec?.clusterIPs) {
-        this.$delete(this.value.spec, 'clusterIPs');
-      }
-    }
-
     const matchingPods = {
       matched: 0,
       matches: [],

package/edit/workload/Upgrading.vue

@@ -40,13 +40,12 @@ export default {
   data() {
     const {
       strategy:strategyObj = {},
-      updateStrategy: updateStrategyObj = {},
       minReadySeconds = 0,
       progressDeadlineSeconds = 600,
       revisionHistoryLimit = 10,
       podManagementPolicy = 'OrderedReady'
     } = this.value;
-    const strategy = strategyObj.type || updateStrategyObj.type || 'RollingUpdate';
+    const strategy = strategyObj.type || 'RollingUpdate';
     let maxSurge = '25';
     let maxUnavailable = '25';
     let surgeUnits = '%';
@@ -98,7 +97,7 @@ export default {
       case WORKLOAD_TYPES.DAEMON_SET:
       case WORKLOAD_TYPES.STATEFUL_SET:
         return {
-          options: ['RollingUpdate', 'OnDelete'],
+          options: ['RollingUpdate', 'Delete'],
           labels:  [this.t('workload.upgrading.strategies.labels.rollingUpdate'), this.t('workload.upgrading.strategies.labels.delete')]
         };
       default:

package/edit/workload/index.vue

@@ -235,7 +235,7 @@ export default {
                   <div class="col span-6">
                     <LabeledSelect
                       v-model="imagePullSecrets"
-                      :label="t('workload.container.imagePullSecrets.label')"
+                      :label="t('workload.container.imagePullSecrets')"
                       :multiple="true"
                       :taggable="true"
                       :options="imagePullNamespacedSecrets"
@@ -243,7 +243,6 @@ export default {
                       option-label="metadata.name"
                       :reduce="service=>service.metadata.name"
                       :create-option="createOption"
-                      :tooltip="t('workload.container.imagePullSecrets.tooltip')"
                     />
                   </div>
                 </div>

package/edit/workload/mixins/workload.js

@@ -707,7 +707,7 @@ export default {
       return Promise.all([
         ...toSave.map((svc) => svc.save()),
         ...toRemove.map((svc) => {
-          const ui = svc?.metadata?.annotations?.[UI_MANAGED];
+          const ui = svc?.metadata?.annotations[UI_MANAGED];
 
           if (ui) {
             svc.remove();

package/initialize/App.js

@@ -2,34 +2,52 @@
 
 import Vue from 'vue';
 
-import {
-  getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, sanitizeComponent
-} from '../utils/nuxt';
-import NuxtError from '../components/templates/error.vue';
+import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError } from '../utils/nuxt';
+import NuxtError from '../layouts/error.vue';
 import NuxtLoading from '../components/nav/GlobalLoading.vue';
 
 import '../assets/styles/app.scss';
+import { getLayouts } from './layouts';
+
+const layouts = getLayouts();
 
 export default {
   render(h) {
     const loadingEl = h('NuxtLoading', { ref: 'loading' });
 
+    const layoutEl = h(this.layout || 'nuxt');
     const templateEl = h('div', {
       domProps: { id: '__layout' },
-      key:      this.showErrorPage
-    }, [this.showErrorPage ? h(sanitizeComponent(NuxtError)) : h('router-view')]);
+      key:      this.layoutName
+    }, [layoutEl]);
+
+    const transitionEl = h('transition', {
+      props: {
+        name: 'layout',
+        mode: 'out-in'
+      },
+      on: {
+        beforeEnter(el) {
+          // Ensure to trigger scroll event after calling scrollBehavior
+          window.$nuxt.$nextTick(() => {
+            window.$nuxt.$emit('triggerScroll');
+          });
+        }
+      }
+    }, [templateEl]);
 
     return h('div', { domProps: { id: '__nuxt' } }, [
       loadingEl,
       // h(NuxtBuildIndicator), // The build indicator doesn't work as is right now and emits an error in the console so I'm leaving it out for now
-      templateEl
+      transitionEl
     ]);
   },
 
   data: () => ({
     isOnline: true,
 
-    showErrorPage: false,
+    layout:     null,
+    layoutName: '',
 
     nbFetching: 0
   }),
@@ -41,14 +59,15 @@ export default {
     // Add this.$nuxt in child instances
     this.$root.$options.$nuxt = this;
 
-    // add to window so we can listen when ready
-    window.$nuxt = this;
-
-    this.refreshOnlineStatus();
-    // Setup the listeners
-    window.addEventListener('online', this.refreshOnlineStatus);
-    window.addEventListener('offline', this.refreshOnlineStatus);
+    if (process.client) {
+      // add to window so we can listen when ready
+      window.$nuxt = this;
 
+      this.refreshOnlineStatus();
+      // Setup the listeners
+      window.addEventListener('online', this.refreshOnlineStatus);
+      window.addEventListener('offline', this.refreshOnlineStatus);
+    }
     // Add $nuxt.error()
     this.error = this.nuxt.error;
     // Add $nuxt.context
@@ -73,13 +92,15 @@ export default {
 
   methods: {
     refreshOnlineStatus() {
-      if (typeof window.navigator.onLine === 'undefined') {
-        // If the browser doesn't support connection status reports
-        // assume that we are online because most apps' only react
-        // when they now that the connection has been interrupted
-        this.isOnline = true;
-      } else {
-        this.isOnline = window.navigator.onLine;
+      if (process.client) {
+        if (typeof window.navigator.onLine === 'undefined') {
+          // If the browser doesn't support connection status reports
+          // assume that we are online because most apps' only react
+          // when they now that the connection has been interrupted
+          this.isOnline = true;
+        } else {
+          this.isOnline = window.navigator.onLine;
+        }
       }
     },
 
@@ -141,11 +162,36 @@ export default {
           }
         }
 
-        this.showErrorPage = true;
-      } else {
-        this.showErrorPage = false;
+        let errorLayout = (NuxtError.options || NuxtError).layout;
+
+        if (typeof errorLayout === 'function') {
+          errorLayout = errorLayout(this.context);
+        }
+
+        this.setLayout(errorLayout);
       }
     },
+
+    setLayout(layout) {
+      if (layout && typeof layout !== 'string') {
+        throw new Error('[nuxt] Avoid using non-string value as layout property.');
+      }
+
+      if (!layout || !layouts[`_${ layout }`]) {
+        layout = 'default';
+      }
+      this.layoutName = layout;
+      this.layout = layouts[`_${ layout }`];
+
+      return this.layout;
+    },
+    loadLayout(layout) {
+      if (!layout || !layouts[`_${ layout }`]) {
+        layout = 'default';
+      }
+
+      return Promise.resolve(layouts[`_${ layout }`]);
+    },
   },
 
   components: { NuxtLoading }

package/initialize/client.js

@@ -19,7 +19,7 @@ import {
   isSamePath,
   urlJoin
 } from '../utils/nuxt.js';
-import { createApp } from './index.js';
+import { createApp, NuxtError } from './index.js';
 import fetchMixin from '../mixins/fetch.client';
 import NuxtLink from '../components/nuxt/nuxt-link.client.js'; // should be included after ./index.js
 
@@ -92,6 +92,17 @@ if (debug) {
         if (nuxtApp && vm.$root[nuxtApp].error && info !== 'render function') {
           const currentApp = vm.$root[nuxtApp];
 
+          // Load error layout
+          let layout = (NuxtError.options || NuxtError).layout;
+
+          if (typeof layout === 'function') {
+            layout = layout(currentApp.context);
+          }
+          if (layout) {
+            await currentApp.loadLayout(layout).catch(() => {});
+          }
+          currentApp.setLayout(layout);
+
           currentApp.error(err);
         }
       }
@@ -115,7 +126,50 @@ if (debug) {
 const errorHandler = Vue.config.errorHandler || console.error; // eslint-disable-line no-console
 
 // Create and mount App
-createApp(nuxt.publicRuntimeConfig).then(mountApp).catch(errorHandler); // eslint-disable-line no-undef
+createApp(null, nuxt.publicRuntimeConfig).then(mountApp).catch(errorHandler); // eslint-disable-line no-undef
+
+function componentOption(component, key, ...args) {
+  if (!component || !component.options || !component.options[key]) {
+    return {};
+  }
+  const option = component.options[key];
+
+  if (typeof option === 'function') {
+    return option(...args);
+  }
+
+  return option;
+}
+
+function mapTransitions(toComponents, to, from) {
+  const componentTransitions = (component) => {
+    const transition = componentOption(component, 'transition', to, from) || {};
+
+    return (typeof transition === 'string' ? { name: transition } : transition);
+  };
+
+  const fromComponents = from ? getMatchedComponents(from) : [];
+  const maxDepth = Math.max(toComponents.length, fromComponents.length);
+
+  const mergedTransitions = [];
+
+  for (let i = 0; i < maxDepth; i++) {
+    // Clone original objects to prevent overrides
+    const toTransitions = Object.assign({}, componentTransitions(toComponents[i]));
+    const transitions = Object.assign({}, componentTransitions(fromComponents[i]));
+
+    // Combine transitions & prefer `leave` properties of "from" route
+    Object.keys(toTransitions)
+      .filter((key) => typeof toTransitions[key] !== 'undefined' && !key.toLowerCase().includes('leave'))
+      .forEach((key) => {
+        transitions[key] = toTransitions[key];
+      });
+
+    mergedTransitions.push(transitions);
+  }
+
+  return mergedTransitions;
+}
 
 async function loadAsyncComponents(to, from, next) {
   // Check if route changed (this._routeChanged), only if the page is not an error (for validate())
@@ -176,6 +230,16 @@ async function loadAsyncComponents(to, from, next) {
   }
 }
 
+function applySSRData(Component, ssrData) {
+  if (NUXT.serverRendered && ssrData) {
+    applyAsyncData(Component, ssrData);
+  }
+
+  Component._Ctor = Component;
+
+  return Component;
+}
+
 // Get matched components
 function resolveComponents(route) {
   return flatMapComponents(route, async(Component, _, match, key, index) => {
@@ -183,25 +247,32 @@ function resolveComponents(route) {
     if (typeof Component === 'function' && !Component.options) {
       Component = await Component();
     }
-
     // Sanitize it and save it
-    Component._Ctor = sanitizeComponent(Component);
+    const _Component = applySSRData(sanitizeComponent(Component), NUXT.data ? NUXT.data[index] : null);
 
-    match.components[key] = Component;
+    match.components[key] = _Component;
 
-    return Component;
+    return _Component;
   });
 }
 
-function callMiddleware(Components, context) {
+function callMiddleware(Components, context, layout) {
   let midd = ['i18n'];
   let unknownMiddleware = false;
 
-  Components.forEach((Component) => {
-    if (Component.options.middleware) {
-      midd = midd.concat(Component.options.middleware);
+  // If layout is undefined, only call global middleware
+  if (typeof layout !== 'undefined') {
+    midd = []; // Exclude global middleware if layout defined (already called before)
+    layout = sanitizeComponent(layout);
+    if (layout.options.middleware) {
+      midd = midd.concat(layout.options.middleware);
     }
-  });
+    Components.forEach((Component) => {
+      if (Component.options.middleware) {
+        midd = midd.concat(Component.options.middleware);
+      }
+    });
+  }
 
   midd = midd.map((name) => {
     if (typeof name === 'function') {
@@ -271,20 +342,25 @@ async function render(to, from, next) {
 
   // If no Components matched, generate 404
   if (!Components.length) {
-    // Call the authenticated middleware. This used to attempt to load the error layout but because it was missing it would:
-    // 1. load the default layout instead
-    // 2. then call the authenticated middleware
-    // 3. Authenticated middleware would then load plugins and check to see if there was a valid route and navigate to that if it existed
-    // 4. This would allow harvester cluster pages to load on page reload
-    // We should really make authenticated middleware do less...
-    await callMiddleware.call(this, [{ options: { middleware: ['authenticated'] } }], app.context);
+    // Default layout
+    await callMiddleware.call(this, Components, app.context);
+    if (nextCalled) {
+      return;
+    }
 
+    // Load layout for error page
+    const errorLayout = (NuxtError.options || NuxtError).layout;
+    const layout = await this.loadLayout(
+      typeof errorLayout === 'function' ? errorLayout.call(NuxtError, app.context) : errorLayout
+    );
+
+    await callMiddleware.call(this, Components, app.context, layout);
     if (nextCalled) {
       return;
     }
 
     // Show error page
-    this.error({ statusCode: 404, message: 'This page could not be found' });
+    app.context.error({ statusCode: 404, message: 'This page could not be found' });
 
     return next();
   }
@@ -297,6 +373,9 @@ async function render(to, from, next) {
     }
   });
 
+  // Apply transitions
+  this.setTransitions(mapTransitions(Components, to, from));
+
   try {
     // Call middleware
     await callMiddleware.call(this, Components, app.context);
@@ -307,8 +386,16 @@ async function render(to, from, next) {
       return next();
     }
 
+    // Set layout
+    let layout = Components[0].options.layout;
+
+    if (typeof layout === 'function') {
+      layout = layout(app.context);
+    }
+    layout = await this.loadLayout(layout);
+
     // Call middleware for layout
-    await callMiddleware.call(this, Components, app.context);
+    await callMiddleware.call(this, Components, app.context, layout);
     if (nextCalled) {
       return;
     }
@@ -449,6 +536,14 @@ async function render(to, from, next) {
 
     globalHandleError(error);
 
+    // Load error layout
+    let layout = (NuxtError.options || NuxtError).layout;
+
+    if (typeof layout === 'function') {
+      layout = layout(app.context);
+    }
+    await this.loadLayout(layout);
+
     this.error(error);
     this.$nuxt.$emit('routeChanged', to, from, error);
     next();
@@ -469,6 +564,22 @@ function normalizeComponents(to, ___) {
   });
 }
 
+function setLayoutForNextPage(to) {
+  // Set layout
+  let hasError = Boolean(this.$options.nuxt.err);
+
+  if (this._hadError && this._dateLastError === this.$options.nuxt.dateErr) {
+    hasError = false;
+  }
+  let layout = hasError ? (NuxtError.options || NuxtError).layout : to.matched[0].components.default.options.layout;
+
+  if (typeof layout === 'function') {
+    layout = layout(app.context);
+  }
+
+  this.setLayout(layout);
+}
+
 function checkForErrors(app) {
   // Hide error component if no error
   if (app._hadError && app._dateLastError === app.$options.nuxt.dateErr) {
@@ -612,7 +723,31 @@ function addHotReload($component, depth) {
 
     callMiddleware.call(this, Components, context)
       .then(() => {
-        return callMiddleware.call(this, Components, context);
+      // If layout changed
+        if (depth !== 0) {
+          return;
+        }
+
+        let layout = Component.options.layout || 'default';
+
+        if (typeof layout === 'function') {
+          layout = layout(context);
+        }
+        if (this.layoutName === layout) {
+          return;
+        }
+        const promise = this.loadLayout(layout);
+
+        promise.then(() => {
+          this.setLayout(layout);
+          Vue.nextTick(() => hotReloadAPI(this));
+        });
+
+        return promise;
+      })
+
+      .then(() => {
+        return callMiddleware.call(this, Components, context, this.layout);
       })
 
       .then(() => {
@@ -660,6 +795,8 @@ async function mountApp(__app) {
     // Add afterEach router hooks
     router.afterEach(normalizeComponents);
 
+    router.afterEach(setLayoutForNextPage.bind(_app));
+
     router.afterEach(fixPrepatch.bind(_app));
 
     // Listen for first Vue update
@@ -677,7 +814,10 @@ async function mountApp(__app) {
   // Resolve route components
   const Components = await Promise.all(resolveComponents(app.context.route));
 
+  // Enable transitions
+  _app.setTransitions = _app.$options.nuxt.setTransitions.bind(_app);
   if (Components.length) {
+    _app.setTransitions(mapTransitions(Components, router.currentRoute));
     _lastPaths = router.currentRoute.matched.map((route) => compile(route.path)(router.currentRoute.params));
   }
 
@@ -702,6 +842,7 @@ async function mountApp(__app) {
   // First render on client-side
   const clientFirstMount = () => {
     normalizeComponents(router.currentRoute, router.currentRoute);
+    setLayoutForNextPage.call(_app, router.currentRoute);
     checkForErrors(_app);
     // Don't call fixPrepatch.call(_app, router.currentRoute, router.currentRoute) since it's first render
     mount();