@rancher/shell 3.0.4 → 3.0.5-rc.2

package/models/namespace.js

@@ -5,7 +5,6 @@ import {
 import { ISTIO, MANAGEMENT } from '@shell/config/types';
 
 import { get, set } from '@shell/utils/object';
-import { escapeHtml } from '@shell/utils/string';
 import { insertAt, isArray } from '@shell/utils/array';
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
@@ -74,7 +73,13 @@ export default class Namespace extends SteveModel {
   }
 
   move(resources = this) {
-    this.$dispatch('promptMove', resources);
+    this.$dispatch('promptModal', {
+      component:  'MoveNamespaceDialog',
+      resources:  !Array.isArray(resources) ? [resources] : resources,
+      modalWidth: '440',
+      height:     'auto',
+      styles:     'max-height: 100vh;'
+    });
   }
 
   get isSystem() {
@@ -124,11 +129,11 @@ export default class Namespace extends SteveModel {
     return project;
   }
 
-  get groupByLabel() {
-    const name = this.project?.nameDisplay;
+  get groupById() {
+    const projectId = this.project?.id;
 
-    if ( name ) {
-      return this.$rootGetters['i18n/t']('resourceTable.groupLabel.project', { name: escapeHtml(name) });
+    if ( projectId ) {
+      return projectId;
     } else {
       return this.$rootGetters['i18n/t']('resourceTable.groupLabel.notInAProject');
     }

package/models/nodedriver.js

@@ -80,14 +80,17 @@ export default class NodeDriver extends Driver {
     return this.$dispatch('rancher/request', {
       url:    `v3/nodeDrivers/${ escape(this.id) }?action=activate`,
       method: 'post',
-    }, { root: true });
+    }, { root: true }).catch((err) => {
+      this.$dispatch('growl/fromError', { title: this.t('drivers.error.activate', { name: this.nameDisplay }), err }, { root: true });
+    });
   }
 
   async activateBulk(resources) {
     await Promise.all(resources.map((resource) => this.$dispatch('rancher/request', {
       url:    `v3/nodeDrivers/${ escape(resource.id) }?action=activate`,
       method: 'post',
-    }, { root: true }
-    )));
+    }, { root: true }).catch((err) => {
+      this.$dispatch('growl/fromError', { title: this.t('drivers.error.activate', { name: resource.nameDisplay }), err }, { root: true });
+    })));
   }
 }

package/models/workload.js

@@ -34,7 +34,10 @@ export default class Workload extends WorkloadService {
       enabled: !!this.links.update,
     });
 
-    if (type !== WORKLOAD_TYPES.JOB && type !== WORKLOAD_TYPES.CRON_JOB) {
+    if (type !== WORKLOAD_TYPES.JOB &&
+      type !== WORKLOAD_TYPES.CRON_JOB &&
+      type !== WORKLOAD_TYPES.REPLICA_SET
+    ) {
       insertAt(out, 0, {
         action:  'toggleRollbackModal',
         label:   this.t('action.rollback'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.4",
+  "version": "3.0.5-rc.2",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -75,7 +75,7 @@
     "dayjs": "1.8.29",
     "defu": "5.0.1",
     "diff2html": "3.4.24",
-    "dompurify": "2.5.4",
+    "dompurify": "3.2.5",
     "element-matches": "^0.1.2",
     "entities": "4.5.0",
     "eslint-config-standard": "16.0.3",
@@ -105,7 +105,7 @@
     "js-yaml-loader": "1.2.2",
     "js-yaml": "4.1.0",
     "jsdiff": "1.1.1",
-    "jsonpath-plus": "10.0.7",
+    "jsonpath-plus": "10.3.0",
     "jsrsasign": "11.0.0",
     "jszip": "3.8.0",
     "lodash": "4.17.21",

package/pages/about.vue

@@ -8,10 +8,12 @@ import { getVendor } from '@shell/config/private-label';
 import { downloadFile } from '@shell/utils/download';
 import { mapGetters } from 'vuex';
 import TabTitle from '@shell/components/TabTitle';
+import { PanelLocation, ExtensionPoint } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel';
 
 export default {
   components: {
-    BackLink, Loading, TabTitle
+    BackLink, ExtensionPanel, Loading, TabTitle
   },
   mixins: [BackRoute],
   async fetch() {
@@ -19,8 +21,10 @@ export default {
   },
   data() {
     return {
-      dashboardVersion: this.$config.dashboardVersion,
-      settings:         null,
+      extensionType:     ExtensionPoint.PANEL,
+      extensionLocation: PanelLocation.ABOUT_TOP,
+      dashboardVersion:  this.$config.dashboardVersion,
+      settings:          null,
       SETTING
     };
   },
@@ -115,6 +119,12 @@ export default {
         {{ t('about.diagnostic.title') }}
       </router-link>
     </div>
+    <!-- Extensions area -->
+    <ExtensionPanel
+      :resource="{}"
+      :type="extensionType"
+      :location="extensionLocation"
+    />
     <h3>{{ t('about.versions.title') }}</h3>
     <table>
       <thead>

package/pages/account/index.vue

@@ -1,6 +1,5 @@
 <script>
 import BackLink from '@shell/components/BackLink';
-import PromptChangePassword from '@shell/components/PromptChangePassword';
 import { MANAGEMENT, NORMAN } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import Loading from '@shell/components/Loading';
@@ -17,7 +16,7 @@ const API_ENDPOINT = '/v3';
 
 export default {
   components: {
-    CopyToClipboardText, BackLink, Banner, PromptChangePassword, Loading, ResourceTable, Principal, TabTitle
+    CopyToClipboardText, BackLink, Banner, Loading, ResourceTable, Principal, TabTitle
   },
   mixins: [BackRoute],
   async fetch() {
@@ -136,6 +135,15 @@ export default {
 
       return false;
     },
+    showChangePasswordDialog() {
+      this.$store.dispatch('management/promptModal', {
+        component:   'ChangePasswordDialog',
+        testId:      'change-password__modal',
+        customClass: 'change-password-modal',
+        modalWidth:  '500',
+        height:      '465'
+      });
+    }
   }
 };
 </script>
@@ -165,21 +173,23 @@ export default {
           type="button"
           class="btn role-primary"
           data-testid="account_change_password"
-          @click="$refs.promptChangePassword.show(true)"
+          @click="showChangePasswordDialog"
         >
           {{ t("accountAndKeys.account.change") }}
         </button>
       </div>
     </div>
-    <PromptChangePassword ref="promptChangePassword" />
 
-    <hr>
+    <hr role="none">
     <div class="keys-header">
       <div>
         <h2 v-t="'accountAndKeys.apiKeys.title'" />
         <div class="api-url">
           <span>{{ t("accountAndKeys.apiKeys.apiEndpoint") }}</span>
-          <CopyToClipboardText :text="apiUrl" />
+          <CopyToClipboardText
+            :aria-label="t('accountAndKeys.apiKeys.copyApiEnpoint')"
+            :text="apiUrl"
+          />
         </div>
       </div>
       <button

package/pages/auth/login.vue

@@ -31,19 +31,18 @@ import {
 import loadPlugins from '@shell/plugins/plugin';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import TabTitle from '@shell/components/TabTitle.vue';
 
 export default {
   name:       'Login',
   components: {
-    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector, Loading
+    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector, Loading, TabTitle
   },
 
   data() {
-    const username = this.$cookies.get(USERNAME, { parseJSON: false }) || '';
-
     return {
-      username,
-      remember: !!username,
+      username: '',
+      remember: false,
       password: '',
 
       timedOut:           this.$route.query[TIMED_OUT] === _FLAGGED,
@@ -135,6 +134,11 @@ export default {
   },
 
   async fetch() {
+    const username = this.$cookies.get(USERNAME, { parseJSON: false }) || '';
+
+    this.username = username;
+    this.remember = !!username;
+
     const { firstLoginSetting } = await this.loadInitialSettings();
     const { value } = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.BANNERS });
     const drivers = await this.$store.dispatch('auth/getAuthProviders');
@@ -311,10 +315,16 @@ export default {
     v-if="$fetchState.pending"
     mode="relative"
   />
-  <main
+  <div
     v-else
     class="main-layout login"
   >
+    <TabTitle
+      :show-child="false"
+      :breadcrumb="false"
+    >
+      {{ `${vendor} - ${t('login.login')}` }}
+    </TabTitle>
     <div class="row gutless mb-20">
       <div class="col span-6 p-20">
         <p class="text-center">
@@ -509,9 +519,10 @@ export default {
         class="col span-6 landscape"
         data-testid="login-landscape__img"
         file-name="login-landscape.svg"
+        :alt="t('login.landscapeAlt')"
       />
     </div>
-  </main>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/pages/auth/logout.vue

@@ -28,7 +28,10 @@ export default {
 </script>
 
 <template>
-  <main class="main-layout">
+  <main
+    class="main-layout"
+    :aria-label="t('layouts.logout')"
+  >
     <div>
       <h1 v-t="'logout.message'" />
     </div>

package/pages/auth/setup.vue

@@ -331,6 +331,7 @@ export default {
                     style="padding: 0 0 0 12px;"
                   >
                     <CopyToClipboard
+                      :aria-label="t('setup.copyRandom')"
                       :text="password"
                       class="btn-sm"
                     />
@@ -361,6 +362,7 @@ export default {
               <hr
                 v-if="mustChangePassword"
                 class="mt-20 mb-20"
+                role="none"
               >
               <p>
                 <t

package/pages/auth/verify.vue

@@ -129,6 +129,13 @@ export default {
   },
 
   data() {
+    return {
+      testing: null,
+      isSlo:   null,
+    };
+  },
+
+  created() {
     const stateJSON = this.$route.query[GITHUB_NONCE] || '';
 
     let parsed = {};
@@ -140,13 +147,8 @@ export default {
 
     const { test } = parsed;
 
-    // Is Single Log Out
-    const isSlo = this.$route.query[IS_SLO] === _FLAGGED;
-
-    return {
-      testing: test,
-      isSlo
-    };
+    this.testing = test;
+    this.isSlo = this.$route.query[IS_SLO] === _FLAGGED;
   },
 
   mounted() {
@@ -182,7 +184,10 @@ export default {
 </script>
 
 <template>
-  <main class="main-layout">
+  <main
+    class="main-layout"
+    :aria-label="t('layouts.verify')"
+  >
     <h1 class="text-center mt-50">
       <span v-if="testing">
         Testing Configuration&hellip;

package/pages/c/_cluster/apps/charts/chart.vue

@@ -69,7 +69,7 @@ export default {
         return {
           id:   m.name,
           text: m.name,
-          url:  `mailto:${ m.email }`
+          url:  m.email ? `mailto:${ m.email }` : m.url
         };
       });
     },

package/pages/c/_cluster/apps/charts/install.vue

@@ -32,7 +32,9 @@ import {
 import { CATALOG as CATALOG_ANNOTATIONS, PROJECT } from '@shell/config/labels-annotations';
 
 import { exceptionToErrorsArray } from '@shell/utils/error';
-import { clone, diff, get, set } from '@shell/utils/object';
+import {
+  clone, diff, get, mergeWithReplace, set
+} from '@shell/utils/object';
 import { ignoreVariables } from './install.helpers';
 import { findBy, insertAt } from '@shell/utils/array';
 import { saferDump } from '@shell/utils/create-yaml';
@@ -45,6 +47,22 @@ const VALUES_STATE = {
   DIFF: 'DIFF'
 };
 
+/**
+ * Helm CLI options that are not persisted on the back end,
+ * but are used for the final install/upgrade operation.
+ */
+const defaultCmdOpts = {
+  cleanupOnFail: false,
+  crds:          true,
+  hooks:         true,
+  force:         false,
+  resetValues:   false,
+  openApi:       true,
+  wait:          true,
+  timeout:       600,
+  historyMax:    5,
+};
+
 function isPlainLayout(query) {
   return Object.keys(query).includes(HIDE_SIDE_NAV);
 }
@@ -312,15 +330,11 @@ export default {
       */
       this.removeGlobalValuesFrom(userValues);
 
-      /*
-        The merge() method is used to merge two or more objects
-        starting with the left-most to the right-most to create a
-        parent mapping object. When two keys are the same, the
-        generated object will have value for the rightmost key.
-        In this case, any values in userValues override any
-        matching values in versionInfo.
-      */
-      this.chartValues = merge(merge({}, this.versionInfo?.values || {}), userValues);
+      this.chartValues = mergeWithReplace(
+        merge({}, this.versionInfo?.values || {}),
+        userValues,
+        { replaceObjectProps: true }
+      );
 
       if (this.showCustomRegistry) {
         /**
@@ -359,20 +373,6 @@ export default {
   },
 
   data() {
-    /* Helm CLI options that are not persisted on the back end,
-    but are used for the final install/upgrade operation. */
-    const defaultCmdOpts = {
-      cleanupOnFail: false,
-      crds:          true,
-      hooks:         true,
-      force:         false,
-      resetValues:   false,
-      openApi:       true,
-      wait:          true,
-      timeout:       600,
-      historyMax:    5,
-    };
-
     return {
       defaultRegistrySetting: '',
       customRegistrySetting:  '',
@@ -1386,7 +1386,7 @@ export default {
               >
                 <template v-slot:option="opt">
                   <template v-if="opt.kind === 'divider'">
-                    <hr>
+                    <hr role="none">
                   </template>
                   <template v-else-if="opt.kind === 'label'">
                     <b style="position: relative; left: -2.5px;">{{ opt.label }}</b>
@@ -1858,7 +1858,7 @@ export default {
       }
 
       .namespace-create-banner {
-        margin-bottom: 70px;
+        margin-bottom: calc($footer-height + 10px);
       }
     }
     &__values {

package/pages/c/_cluster/auth/config/index.vue

@@ -7,6 +7,8 @@ import { authProvidersInfo } from '@shell/utils/auth';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 
+const resource = MANAGEMENT.AUTH_CONFIG;
+
 export default {
   components: {
     SelectIconGrid, Banner, Loading
@@ -24,19 +26,7 @@ export default {
   },
 
   data() {
-    const resource = MANAGEMENT.AUTH_CONFIG;
-    const getters = this.$store.getters;
-    const inStore = getters['currentStore'](resource);
-    const hasListComponent = getters['type-map/hasCustomList'](resource);
-    const hasEditComponent = getters['type-map/hasCustomEdit'](resource);
-    const schema = getters[`${ inStore }/schemaFor`](resource);
-
     return {
-      resource,
-      schema,
-      hasListComponent,
-      hasEditComponent,
-
       // Provided by fetch later
       enabled:  false,
       nonLocal: null,
@@ -60,6 +50,14 @@ export default {
         }
       };
     },
+
+    inStore() {
+      return this.$store.getters['currentStore'](resource);
+    },
+
+    schema() {
+      return this.$store.getters[`${ this.inStore }/schemaFor`](resource);
+    }
   },
 
   methods: {

package/pages/c/_cluster/explorer/EventsTable.vue

@@ -7,32 +7,48 @@ import { STEVE_EVENT_OBJECT, STEVE_NAME_COL } from '@shell/config/pagination-tab
 import { headerFromSchemaColString } from '@shell/store/type-map.utils';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 
+const reason = {
+  ...REASON,
+  ...{ canBeVariable: true },
+  width: 130,
+};
+
+const eventHeaders = [
+  reason,
+  OBJECT,
+  MESSAGE,
+  NAME, {
+    name:        'date',
+    label:       'Date',
+    labelKey:    'clusterIndexPage.sections.events.date.label',
+    value:       'timestamp',
+    sort:        'timestamp:desc',
+    formatter:   'Date',
+    width:       220,
+    defaultSort: true,
+  },
+];
+
 export default {
   components: { PaginatedResourceTable },
 
   data() {
-    const reason = {
-      ...REASON,
-      ...{ canBeVariable: true },
-      width: 130,
+    return {
+      schema:            null,
+      events:            [],
+      eventHeaders,
+      paginationHeaders: null,
+      allEventsLink:     {
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  EXPLORER,
+          resource: EVENT,
+        }
+      }
     };
+  },
 
-    const eventHeaders = [
-      reason,
-      OBJECT,
-      MESSAGE,
-      NAME, {
-        name:        'date',
-        label:       'Date',
-        labelKey:    'clusterIndexPage.sections.events.date.label',
-        value:       'timestamp',
-        sort:        'timestamp:desc',
-        formatter:   'Date',
-        width:       220,
-        defaultSort: true,
-      },
-    ];
-
+  beforeMount() {
     const schema = this.$store.getters['cluster/schemaFor'](EVENT);
 
     const paginationHeaders = schema ? [
@@ -51,19 +67,8 @@ export default {
       headerFromSchemaColString('Count', schema, this.$store.getters, true),
     ] : [];
 
-    return {
-      schema,
-      events:        [],
-      eventHeaders,
-      paginationHeaders,
-      allEventsLink: {
-        name:   'c-cluster-product-resource',
-        params: {
-          product:  EXPLORER,
-          resource: EVENT,
-        }
-      }
-    };
+    this.schema = schema;
+    this.paginationHeaders = paginationHeaders;
   },
 
   mounted() {

package/pages/c/_cluster/explorer/index.vue

@@ -63,6 +63,19 @@ const CLUSTER_COMPONENTS = [
   'controller-manager',
 ];
 
+const nodeHeaders = [
+  STATE,
+  NAME,
+  ROLES,
+];
+
+const clusterServiceIcons = {
+  [STATES_ENUM.IN_PROGRESS]: 'icon-spinner icon-spin',
+  [STATES_ENUM.HEALTHY]:     'icon-checkmark',
+  [STATES_ENUM.WARNING]:     'icon-warning',
+  [STATES_ENUM.UNHEALTHY]:   'icon-warning',
+};
+
 export default {
   name: 'ClusterExplorerIndexPage',
 
@@ -118,20 +131,6 @@ export default {
   },
 
   data() {
-    const clusterCounts = this.$store.getters[`cluster/all`](COUNT);
-    const nodeHeaders = [
-      STATE,
-      NAME,
-      ROLES,
-    ];
-
-    const clusterServiceIcons = {
-      [STATES_ENUM.IN_PROGRESS]: 'icon-spinner icon-spin',
-      [STATES_ENUM.HEALTHY]:     'icon-checkmark',
-      [STATES_ENUM.WARNING]:     'icon-warning',
-      [STATES_ENUM.UNHEALTHY]:   'icon-warning',
-    };
-
     return {
       nodeHeaders,
       constraints:             [],
@@ -152,7 +151,6 @@ export default {
       ETCD_METRICS_DETAIL_URL,
       ETCD_METRICS_SUMMARY_URL,
       STATES_ENUM,
-      clusterCounts,
       selectedTab:             'cluster-events',
       extensionCards:          getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
       canViewEvents:           !!this.$store.getters['cluster/schemaFor'](EVENT),
@@ -188,6 +186,10 @@ export default {
     ...mapGetters(['currentCluster']),
     ...monitoringStatus(),
 
+    clusterCounts() {
+      return this.$store.getters[`cluster/all`](COUNT);
+    },
+
     nodes() {
       return this.$store.getters['cluster/all'](NODE);
     },

package/pages/c/_cluster/istio/index.vue

@@ -95,7 +95,7 @@ export default {
               <t k="istio.links.kiali.label" />
               <i class="icon icon-external-link pull-right" />
             </a>
-            <hr>
+            <hr role="none">
             <div class="description">
               <span v-clean-html="t('istio.links.kiali.description', {link: monitoringUrl}, true)" />
             </div>
@@ -131,7 +131,7 @@ export default {
               <t k="istio.links.jaeger.label" />
               <i class="icon icon-external-link pull-right" />
             </a>
-            <hr>
+            <hr role="none">
             <div class="description">
               <span v-clean-html="t('istio.links.jaeger.description', true)" />
             </div>

package/pages/c/_cluster/longhorn/index.vue

@@ -84,7 +84,7 @@ export default {
           <div class="link-content">
             <t :k="fel.label" />
             <i class="icon icon-external-link pull-right" />
-            <hr>
+            <hr role="none">
             <div class="description"><t :k="fel.description" /></div>
           </div>
         </a>

package/pages/c/_cluster/monitoring/index.vue

@@ -172,7 +172,7 @@ export default {
                   <i class="icon icon-external-link" />
                 </div>
               </div>
-              <hr>
+              <hr role="none">
               <div class="description">
                 <span>
                   <t :k="fel.description" />