@rancher/shell 2.0.1 → 3.0.0-rc.2

package/models/provisioning.cattle.io.cluster.js

@@ -986,4 +986,8 @@ export default class ProvCluster extends SteveModel {
       'spec.rkeConfig.machinePools.dynamicSchemaSpec',
     ];
   }
+
+  get description() {
+    return super.description || this.mgmt?.description;
+  }
 }

package/models/workload.js

@@ -85,7 +85,7 @@ export default class Workload extends WorkloadService {
     return out;
   }
 
-  applyDefaults(vm) {
+  applyDefaults() {
     const { spec = {} } = this;
 
     if (this.type === WORKLOAD_TYPES.CRON_JOB) {
@@ -118,7 +118,7 @@ export default class Workload extends WorkloadService {
         spec.selector = {};
       }
     }
-    vm.$set(this, 'spec', spec);
+    this.spec = spec;
   }
 
   toggleRollbackModal( workload = this ) {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@rancher/shell",
-  "version": "2.0.1",
+  "version": "3.0.0-rc.2",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
   "author": "SUSE",
   "private": false,
   "engines": {
-    "node": ">=12"
+    "node": ">=20.0.0"
   },
   "files": [
     "**/*"
@@ -29,42 +29,43 @@
   "dependencies": {
     "@aws-sdk/client-ec2": "3.1.0",
     "@aws-sdk/client-eks": "3.1.0",
-    "@aws-sdk/client-kms": "3.8.1",
     "@aws-sdk/client-iam": "3.18.0",
+    "@aws-sdk/client-kms": "3.8.1",
     "@babel/plugin-proposal-optional-chaining": "7.14.5",
+    "@babel/plugin-proposal-private-methods": "7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "7.14.5",
     "@babel/preset-typescript": "7.16.7",
-    "@innologica/vue-dropdown-menu": "0.1.3",
     "@novnc/novnc": "1.2.0",
-    "@nuxt/types": "2.14.6",
-    "@nuxt/typescript-build": "2.1.0",
     "@nuxtjs/axios": "5.13.6",
-    "@nuxtjs/eslint-config-typescript": "6.0.1",
-    "@nuxtjs/webpack-profile": "0.1.0",
     "@popperjs/core": "2.4.4",
+    "@rancher/icons": "2.0.29",
     "@types/is-url": "1.2.30",
     "@types/node": "16.4.3",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
-    "@vue/cli-plugin-babel": "4.5.18",
-    "@vue/cli-plugin-typescript": "4.5.18",
-    "@vue/cli-service": "4.5.18",
-    "@vue/test-utils": "1.2.1",
-    "@vue/vue2-jest": "27.0.0",
+    "@typescript-eslint/eslint-plugin": "~5.4.0",
+    "@typescript-eslint/parser": "~5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/test-utils": "~2.0.0-0",
+    "@vue/vue3-jest": "^27.0.0-alpha.1",
     "add": "2.0.6",
     "ansi_up": "5.0.0",
     "babel-eslint": "10.1.0",
     "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-vue": "2.0.2",
     "browser-env": "3.3.0",
+    "clipboard-polyfill": "4.0.1",
+    "codemirror": ">=5.64.0 <6",
+    "codemirror-editor-vue3": "^2.7.0",
     "cookie": "0.5.0",
-    "cookie-universal-nuxt": "2.1.4",
-    "core-js": "3.21.1",
+    "cookie-universal": "2.2.2",
+    "core-js": "3.25.3",
     "cron-validator": "1.2.0",
     "cronstrue": "1.95.0",
     "cross-env": "6.0.3",
     "css-loader": "6.7.3",
     "csv-loader": "3.0.3",
+    "custom-event-polyfill": "^1.0.7",
     "cypress": "10.3.1",
     "d3": "7.3.0",
     "d3-selection": "1.4.1",
@@ -72,6 +73,7 @@
     "dayjs": "1.8.29",
     "diff2html": "3.4.24",
     "dompurify": "2.4.5",
+    "element-matches": "^0.1.2",
     "eslint": "7.32.0",
     "eslint-config-standard": "16.0.3",
     "eslint-import-resolver-node": "0.3.4",
@@ -84,6 +86,7 @@
     "event-target-shim": "5.0.1",
     "express": "4.17.1",
     "file-saver": "2.0.2",
+    "floating-vue": "5.2.2",
     "frontmatter-markdown-loader": "3.7.0",
     "identicon.js": "2.3.3",
     "intl-messageformat": "7.8.4",
@@ -103,13 +106,11 @@
     "lodash": "4.17.21",
     "marked": "4.0.17",
     "nodemon": "2.0.22",
-    "nuxt": "2.15.8",
     "nyc": "15.1.0",
     "papaparse": "5.3.0",
-    "portal-vue": "2.1.7",
-    "@rancher/icons": "2.0.29",
+    "portal-vue": "~3.0.0",
     "sass": "1.51.0",
-    "sass-loader": "10.2.1",
+    "sass-loader": "~12.0.0",
     "serve-static": "1.14.1",
     "set-cookie-parser": "2.4.6",
     "shell-quote": "1.7.3",
@@ -118,43 +119,43 @@
     "style-loader": "1.2.1",
     "ts-node": "8.10.2",
     "typescript": "4.5.5",
+    "ufo": "0.7.11",
+    "unfetch": "4.2.0",
     "url-parse": "1.5.10",
-    "v-tooltip": "2.0.3",
-    "vue": "2.7.16",
-    "clipboard-polyfill": "4.0.1",
-    "vue-codemirror": "4.0.6",
-    "vue-js-modal": "1.3.35",
+    "vue": "~3.2.13",
     "vue-resize": "0.4.5",
-    "vue-select": "3.18.3",
+    "vue-router": "~4.0.3",
+    "vue-select": "4.0.0-beta.6",
     "vue-server-renderer": "2.7.16",
-    "vue-shortkey": "3.1.7",
     "vue-template-compiler": "2.7.16",
-    "vue-virtual-scroll-list": "^2.3.4",
+    "vue3-virtual-scroll-list": "0.2.1",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.2",
+    "vuex": "~4.0.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-virtual-modules": "0.4.3",
+    "worker-loader": "3.0.8",
     "xterm": "5.2.1",
-    "xterm-addon-canvas": "^0.5.0",
+    "xterm-addon-canvas": "0.5.0",
     "xterm-addon-fit": "0.8.0",
     "xterm-addon-search": "0.13.0",
     "xterm-addon-web-links": "0.9.0",
     "xterm-addon-webgl": "0.16.0",
-    "worker-loader": "3.0.8",
     "yarn": "1.22.18"
   },
   "resolutions": {
-    "ejs": "^3.1.7",
-    "json5": ">=2.2.2",
-    "d3-color": ">=3.1.0",
-    "glob-parent": ">=5.1.2",
-    "node-forge": ">=1.3.0",
-    "qs": ">=6.7.3",
-    "nth-check": ">=2.0.1",
-    "follow-redirects": ">=1.14.7",
-    "merge": ">=2.1.1",
-    "semver": ">=7.5.2",
-    "glob": "7.2.3"
+    "d3-color": "3.1.0",
+    "ejs": "3.1.9",
+    "follow-redirects": "1.15.2",
+    "glob": "7.2.3",
+    "glob-parent": "6.0.2",
+    "json5": "2.2.3",
+    "merge": "2.1.1",
+    "node-forge": "1.3.1",
+    "nth-check": "2.1.1",
+    "qs": "6.11.1",
+    "roarr": "7.0.4",
+    "semver": "7.5.4",
+    "@vue/cli-service/html-webpack-plugin": "^5.0.0"
   },
   "nyc": {
     "extension": [

package/pages/404.vue

@@ -0,0 +1,15 @@
+<script>
+import Brand from '@shell/mixins/brand';
+
+export default {
+  mixins: [Brand],
+  beforeMount() {
+    this.$store.commit('setError', { error: new Error('404: This page could not be found') });
+    this.$router.replace('/fail-whale');
+  }
+};
+</script>
+
+<template>
+  <div class="dashboard-root" />
+</template>

package/pages/__tests__/prefs.test.ts

@@ -17,30 +17,30 @@ describe('page: prefs should', () => {
       .setSystemTime(new Date(date));
 
     const wrapper = shallowMount(Preferences, {
-      propsData: { value: 'asd' },
-      computed:  {
-        pm: jest.fn(),
-        am: jest.fn(),
-      },
-      mocks: {
-        $store: {
-          getters: {
-            'prefs/options':        () => format,
-            'prefs/get':            jest.fn(),
-            'management/schemaFor': jest.fn(),
-            isSingleProduct:        jest.fn(),
-            'i18n/t':               jest.fn(),
+      props: { value: 'asd' },
+
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'prefs/options':        () => format,
+              'prefs/get':            jest.fn().mockReturnValue('YYYY-MM-DD HH:mm:ss'),
+              'management/schemaFor': jest.fn(),
+              isSingleProduct:        jest.fn(),
+              'i18n/t':               jest.fn(),
+            }
           }
-        }
+        },
+
+        stubs: {
+          BackLink:              { template: '<div />' },
+          ButtonGroup:           { template: '<div />' },
+          LabeledSelect:         { template: '<div />' },
+          Checkbox:              { template: '<div />' },
+          LandingPagePreference: { template: '<div />' },
+          LocaleSelector:        { template: '<div />' },
+        },
       },
-      stubs: {
-        BackLink:              { template: '<div />' },
-        ButtonGroup:           { template: '<div />' },
-        LabeledSelect:         { template: '<div />' },
-        Checkbox:              { template: '<div />' },
-        LandingPagePreference: { template: '<div />' },
-        LocaleSelector:        { template: '<div />' },
-      }
     });
 
     const options = (wrapper.vm as unknown as any).dateOptions;
@@ -63,30 +63,30 @@ describe('page: prefs should', () => {
       .setSystemTime(new Date(date));
 
     const wrapper = shallowMount(Preferences, {
-      propsData: { value: 'asd' },
-      computed:  {
-        pm: jest.fn(),
-        am: jest.fn(),
-      },
-      mocks: {
-        $store: {
-          getters: {
-            'prefs/options':        () => format,
-            'prefs/get':            jest.fn(),
-            'management/schemaFor': jest.fn(),
-            isSingleProduct:        jest.fn(),
-            'i18n/t':               jest.fn(),
+      props: { value: 'asd' },
+
+      global: {
+        mocks: {
+          $store: {
+            getters: {
+              'prefs/options':        () => format,
+              'prefs/get':            jest.fn().mockReturnValue('YYYY-MM-DD HH:mm:ss'),
+              'management/schemaFor': jest.fn(),
+              isSingleProduct:        jest.fn(),
+              'i18n/t':               jest.fn(),
+            }
           }
-        }
+        },
+
+        stubs: {
+          BackLink:              { template: '<div />' },
+          ButtonGroup:           { template: '<div />' },
+          LabeledSelect:         { template: '<div />' },
+          Checkbox:              { template: '<div />' },
+          LandingPagePreference: { template: '<div />' },
+          LocaleSelector:        { template: '<div />' },
+        },
       },
-      stubs: {
-        BackLink:              { template: '<div />' },
-        ButtonGroup:           { template: '<div />' },
-        LabeledSelect:         { template: '<div />' },
-        Checkbox:              { template: '<div />' },
-        LandingPagePreference: { template: '<div />' },
-        LocaleSelector:        { template: '<div />' },
-      }
     });
 
     const options = (wrapper.vm as unknown as any).dateOptions;

package/pages/about.vue

@@ -191,8 +191,8 @@ export default {
       </h3>
       <table>
         <tr
-          v-for="d in downloadImageList"
-          :key="d.icon"
+          v-for="(d, i) in downloadImageList"
+          :key="i"
         >
           <td>
             <div class="os">
@@ -217,8 +217,8 @@ export default {
       </h3>
       <table>
         <tr
-          v-for="d in downloadCli"
-          :key="d.icon"
+          v-for="(d, i) in downloadCli"
+          :key="i"
           class="link"
         >
           <td>

package/pages/account/index.vue

@@ -114,7 +114,7 @@ export default {
 
   methods: {
     addKey() {
-      this.$router.push({ path: 'account/create-key' });
+      this.$router.push({ name: 'account-create-key' });
     },
     async calcCanChangePassword() {
       if (!this.$store.getters['auth/enabled']) {
@@ -153,7 +153,6 @@ export default {
     <h2 v-t="'accountAndKeys.account.title'" />
     <div class="account">
       <Principal
-        :key="principal.id"
         :value="principal.id"
         :use-muted="false"
         :show-labels="true"

package/pages/auth/login.vue

@@ -9,7 +9,8 @@ import InfoBox from '@shell/components/InfoBox';
 import CopyCode from '@shell/components/CopyCode';
 import { Banner } from '@components/Banner';
 import {
-  LOCAL, LOGGED_OUT, TIMED_OUT, IS_SSO, _FLAGGED
+  LOCAL, LOGGED_OUT, TIMED_OUT, IS_SSO, _FLAGGED,
+  IS_SLO
 } from '@shell/config/query-params';
 import { Checkbox } from '@components/Form/Checkbox';
 import Password from '@shell/components/form/Password';
@@ -47,6 +48,7 @@ export default {
       timedOut:           this.$route.query[TIMED_OUT] === _FLAGGED,
       loggedOut:          this.$route.query[LOGGED_OUT] === _FLAGGED,
       isSsoLogout:        this.$route.query[IS_SSO] === _FLAGGED,
+      isSlo:              this.$route.query[IS_SLO] === _FLAGGED,
       err:                this.$route.query.err,
       showLocaleSelector: !process.env.loginLocaleSelector || process.env.loginLocaleSelector === 'true',
 
@@ -63,6 +65,16 @@ export default {
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
+    loggedOutSuccessMsg() {
+      if (this.isSlo) {
+        return this.t('login.loggedOutFromSlo');
+      } else if (this.isSsoLogout) {
+        return this.t('login.loggedOutFromSso');
+      }
+
+      return this.t('login.loggedOut');
+    },
+
     singleProvider() {
       return this.providers.length === 1 ? this.providers[0] : undefined;
     },
@@ -78,6 +90,10 @@ export default {
     },
 
     errorMessage() {
+      if (this.isSlo) {
+        return this.err?.length ? this.t('logout.error', { msg: this.err }) : '';
+      }
+
       if (this.err === LOGIN_ERRORS.CLIENT_UNAUTHORIZED) {
         return this.t('login.clientError');
       } else if (this.err === LOGIN_ERRORS.CLIENT || this.err === LOGIN_ERRORS.SERVER) {
@@ -273,7 +289,7 @@ export default {
           this.$store.dispatch('auth/setInitialPass', this.password);
           this.$router.push({ name: 'auth-setup' });
         } else {
-          this.$router.replace('/');
+          this.$router.push({ name: 'index' });
         }
       } catch (err) {
         this.err = err;
@@ -288,7 +304,10 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
+  <Loading
+    v-if="$fetchState.pending"
+    mode="relative"
+  />
   <main
     v-else
     class="main-layout login"
@@ -315,7 +334,7 @@ export default {
             v-else-if="loggedOut"
             class="text-success text-center"
           >
-            {{ isSsoLogout ? t('login.loggedOutFromSso') : t('login.loggedOut') }}
+            {{ loggedOutSuccessMsg }}
           </h4>
           <h4
             v-else-if="timedOut"
@@ -388,7 +407,7 @@ export default {
           <component
             :is="providerComponents[idx]"
             v-for="(name, idx) in providers"
-            :key="name"
+            :key="idx"
             class="mb-10"
             :focus-on-mount="(idx === 0 && !showLocal)"
             :name="name"
@@ -401,6 +420,7 @@ export default {
           <form
             v-if="showLocal"
             :class="{'mt-30': !hasLoginMessage}"
+            @submit.prevent
           >
             <div class="span-6 offset-3">
               <div class="mb-20">
@@ -408,7 +428,7 @@ export default {
                   v-if="!firstLogin"
                   id="username"
                   ref="username"
-                  v-model.trim="username"
+                  v-model:value.trim="username"
                   data-testid="local-login-username"
                   :label="t('login.username')"
                   autocomplete="username"
@@ -418,7 +438,7 @@ export default {
                 <Password
                   id="password"
                   ref="password"
-                  v-model="password"
+                  v-model:value="password"
                   data-testid="local-login-password"
                   :label="t('login.password')"
                   autocomplete="password"
@@ -442,7 +462,7 @@ export default {
                   class="mt-20"
                 >
                   <Checkbox
-                    v-model="remember"
+                    v-model:value="remember"
                     :label="t('login.remember.label')"
                     type="checkbox"
                   />
@@ -537,7 +557,7 @@ export default {
         margin-bottom: 0;
         border-left: 0;
 
-        ::v-deep code {
+        :deep() code {
           font-size: 12px;
           padding: 0;
         }

package/pages/auth/logout.vue

@@ -1,8 +1,30 @@
 <script>
+import { authProvidersInfo } from '@shell/utils/auth';
 
 export default {
   async fetch() {
-    await this.$store.dispatch('auth/logout', { force: true }, { root: true });
+    const authInfo = await authProvidersInfo(this.$store);
+
+    if (authInfo.enabled?.length) {
+      const authProvider = authInfo.enabled[0];
+
+      const {
+        logoutAllSupported, logoutAllEnabled, logoutAllForced, configType
+      } = authProvider;
+
+      if (configType === 'saml' && logoutAllSupported && logoutAllEnabled && logoutAllForced) {
+        // SAML - force SLO (logout from all apps)
+        await this.$store.dispatch('auth/logout', {
+          force: true, slo: true, provider: authProvider
+        }, { root: true });
+      } else {
+        // simple logout
+        await this.$store.dispatch('auth/logout', { force: true }, { root: true });
+      }
+    } else {
+      // simple logout
+      await this.$store.dispatch('auth/logout', { force: true }, { root: true });
+    }
   }
 };
 </script>