@rancher/shell 3.0.3 → 3.0.5-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.3",
+  "version": "3.0.5-rc.1",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "add": "2.0.6",
     "ansi_up": "5.0.0",
     "axios-retry": "3.1.9",
-    "axios": "0.21.4",
+    "axios": "1.8.4",
     "babel-eslint": "10.1.0",
     "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-vue": "2.0.2",
@@ -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

@@ -119,8 +119,12 @@ export default {
     <table>
       <thead>
         <tr>
-          <th>{{ t('about.versions.component') }}</th>
-          <th>{{ t('about.versions.version') }}</th>
+          <th class="custom-th">
+            {{ t('about.versions.component') }}
+          </th>
+          <th class="custom-th">
+            {{ t('about.versions.version') }}
+          </th>
         </tr>
       </thead>
       <tr v-if="rancherVersion">
@@ -210,11 +214,11 @@ export default {
           v-for="(d, i) in downloadImageList"
           :key="i"
         >
-          <td>
+          <th>
             <div class="os">
               <i :class="`icon ${d.icon} mr-5`" /> {{ t(d.label) }}
             </div>
-          </td>
+          </th>
           <td>
             <a
               v-if="d.imageList"
@@ -241,11 +245,11 @@ export default {
           :key="i"
           class="link"
         >
-          <td>
+          <th>
             <div class="os">
               <i :class="`icon ${d.icon} mr-5`" /> {{ t(d.label) }}
             </div>
-          </td>
+          </th>
           <td>
             <a
               v-if="d.cliLink"
@@ -273,7 +277,7 @@ export default {
     overflow: hidden;
     border-radius: var(--border-radius);
 
-    tr > td:first-of-type {
+    tr > th:first-of-type {
       width: 20%;
     }
 
@@ -284,11 +288,15 @@ export default {
       text-align: left;
     }
 
-    th {
+    th.custom-th {
       background-color: var(--sortable-table-top-divider);
       border-bottom: 1px solid var(--sortable-table-top-divider);
     }
 
+    th:not(.custom-th) {
+      font-weight: normal;
+    }
+
     a {
       cursor: pointer;
     }

package/pages/account/index.vue

@@ -179,7 +179,10 @@ export default {
         <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,11 +31,12 @@ 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() {
@@ -311,10 +312,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 +516,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"
                     />

package/pages/auth/verify.vue

@@ -182,7 +182,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/diagnostic.vue

@@ -17,6 +17,7 @@ export default {
     const finalCounts = [];
     const promises = [];
     const topFifteenForResponseTime = [];
+    const schemaPromises = [];
 
     clusterForCounts.forEach((cluster, i) => {
       // Necessary to retrieve the proper display name of the cluster
@@ -31,9 +32,11 @@ export default {
         isTableVisible: !!(i === 0 && clusterForCounts.length === 1)
       });
       promises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ cluster.mgmt?.id }/v1/counts` }));
+      schemaPromises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ cluster.mgmt?.id }/v1/schemas?exclude=metadata.managedFields` }));
     });
 
     const countsPerCluster = await Promise.all(promises);
+    const schemasPerCluster = await Promise.all(schemaPromises);
 
     countsPerCluster.forEach((clusterCount, index) => {
       const counts = clusterCount.data?.[0]?.counts;
@@ -69,6 +72,14 @@ export default {
 
     this.topFifteenForResponseTime = topFifteenForResponseTime;
     this.finalCounts = finalCounts;
+
+    // Schemas
+    schemasPerCluster.forEach((schemas, index) => {
+      finalCounts[index].schemaCount = schemas?.data?.length || 0;
+      finalCounts[index].customSchemas = (schemas?.data?.filter((schema) => {
+        return schema.attributes?.group.includes('.') && !schema.attributes?.group.includes('.cattle.io') && !schema.attributes?.group.includes('.k8s.io');
+      }).map((schema) => schema.id) || []).sort();
+    });
   },
 
   data() {
@@ -148,7 +159,7 @@ export default {
         systemInformation: this.systemInformation,
         storeMapping:      this.parseStoreData(this.storeMapping),
         resourceCounts:    this.finalCounts,
-        responseTimes:     this.responseTimes
+        responseTimes:     this.responseTimes,
       };
 
       downloadFile(fileName, JSON.stringify(data), 'application/json')
@@ -352,6 +363,7 @@ export default {
                   <span>Cluster: <b>{{ cluster.name }}</b></span>
                   <span>Namespace: <b>{{ cluster.namespace }}</b></span>
                   <span>Total Resources: <b>{{ sumResourceCount(cluster.counts) }}</b></span>
+                  <span>Total Schemas: <b>{{ cluster.schemaCount }}</b></span>
                   <span>Nodes: <b>{{ nodeCount(cluster.counts) }}</b></span>
                   <i
                     class="icon"
@@ -365,6 +377,22 @@ export default {
             </tr>
           </thead>
           <tbody v-show="cluster.isTableVisible">
+            <tr>
+              <td colspan="3">
+                <div class="schema-title">
+                  Custom Schemas
+                </div>
+                <div class="custom-schemas">
+                  <div
+                    v-for="name in cluster.customSchemas"
+                    :key="name"
+                    class="schema-name"
+                  >
+                    {{ name }}
+                  </div>
+                </div>
+              </td>
+            </tr>
             <tr>
               <th>
                 Resource
@@ -445,6 +473,23 @@ table {
     padding: 8px 5px;
     min-width: 150px;
     text-align: left;
+
+    .schema-title {
+      font-weight: bold;
+      margin-bottom: 4px;
+    }
+
+    .custom-schemas {
+      display: flex;
+      flex-wrap: wrap;
+
+      > .schema-name {
+        margin-right: 5px;
+        margin-bottom: 2px;
+        border: 1px solid var(--border);
+        padding: 2px 5px;
+      }
+    }
   }
 
   th {
@@ -511,7 +556,7 @@ table {
 .resources-count-container {
   .cluster-row {
     display: grid;
-    grid-template-columns: repeat(4, 1fr) 20px;
+    grid-template-columns: repeat(5, 1fr) 20px;
     grid-template-rows: 1fr;
     align-content: center;
     font-weight: normal;

package/pages/fail-whale.vue

@@ -70,12 +70,15 @@ export default {
         :simple="true"
       />
 
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        aria-label="Fail whale layout"
+      >
         <div
           v-if="error"
           class="outlet"
         >
-          <main class="main-layout error">
+          <div class="main-layout error">
             <div class="text-center">
               <BrandImage
                 file-name="error-desert-landscape.svg"
@@ -115,7 +118,7 @@ export default {
                 </a>
               </p>
             </div>
-          </main>
+          </div>
         </div>
       </main>
     </div>

package/pages/home.vue

@@ -49,6 +49,21 @@ export default defineComponent({
   mixins: [PageHeaderActions],
 
   data() {
+    const options = this.$store.getters[`type-map/optionsFor`](CAPI.RANCHER_CLUSTER)?.custom || {};
+    const params = {
+      product:  MANAGER,
+      cluster:  BLANK_CLUSTER,
+      resource: CAPI.RANCHER_CLUSTER
+    };
+    const defaultCreateLocation = {
+      name: 'c-cluster-product-resource-create',
+      params,
+    };
+    const defaultImportLocation = {
+      ...defaultCreateLocation,
+      query: { [MODE]: _IMPORT }
+    };
+
     return {
       HIDE_HOME_PAGE_CARDS,
       fullVersion: getVersionInfo(this.$store).fullVersion,
@@ -87,24 +102,9 @@ export default defineComponent({
         },
       },
 
-      createLocation: {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  MANAGER,
-          cluster:  BLANK_CLUSTER,
-          resource: CAPI.RANCHER_CLUSTER
-        },
-      },
+      createLocation: options.createLocation ? options.createLocation(params) : defaultCreateLocation,
 
-      importLocation: {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  MANAGER,
-          cluster:  BLANK_CLUSTER,
-          resource: CAPI.RANCHER_CLUSTER
-        },
-        query: { [MODE]: _IMPORT }
-      },
+      importLocation: options.importLocation ? options.importLocation(params) : defaultImportLocation,
 
       headers: [
         STATE,
@@ -512,7 +512,7 @@ export default defineComponent({
       :show-child="false"
       :breadcrumb="false"
     >
-      {{ vendor }}
+      {{ `${vendor} - ${t('landing.homepage')}` }}
     </TabTitle>
     <BannerGraphic
       :small="true"
@@ -805,6 +805,12 @@ export default defineComponent({
     .cluster-name {
       display: flex;
       align-items: center;
+
+      // Ensure long cluster names truncate with ellipsis
+      > A {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     .cluster-description {

package/pages/support/index.vue

@@ -118,7 +118,10 @@ export default {
 </script>
 <template>
   <div>
-    <BannerGraphic :title="t(title, {}, true)" />
+    <BannerGraphic
+      :title="t(title, {}, true)"
+      :alt="t('support.bannerImage')"
+    />
 
     <IndentedPanel>
       <div class="content mt-20">

package/promptRemove/management.cattle.io.fleetworkspace.vue

@@ -71,7 +71,7 @@ export default {
   <div class="mt-10">
     <div class="mb-10">
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-clean-html="resourceNames(names, t)"
+        v-clean-html="resourceNames(names, null, t)"
         class="description"
       />
     </div>

package/promptRemove/management.cattle.io.globalrole.vue

@@ -21,7 +21,7 @@ export default {
 
 <template>
   <div>
-    {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-clean-html="resourceNames(names, t)" />
+    {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-clean-html="resourceNames(names, null, t)" />
     <div
       v-if="info"
       class="text info mb-10 mt-20"

package/promptRemove/management.cattle.io.project.vue

@@ -94,7 +94,7 @@ export default {
         <template v-if="!canSeeProjectlessNamespaces">
           <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br>
           <div
-            v-clean-html="resourceNames(names, t)"
+            v-clean-html="resourceNames(names, null, t)"
             class="mt-10"
           />
         </template>
@@ -108,7 +108,7 @@ export default {
           :label="t('promptRemove.deleteAssociatedNamespaces')"
         />
         <div class="mt-10 ml-20">
-          <span v-clean-html="resourceNames(names, t)" />
+          <span v-clean-html="resourceNames(names, null, t)" />
         </div>
       </div>
     </div>

package/promptRemove/management.cattle.io.roletemplate.vue

@@ -22,7 +22,7 @@ export default {
 <template>
   <div>
     {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-      v-clean-html="resourceNames(names, t)"
+      v-clean-html="resourceNames(names, null, t)"
     />
     <div
       v-if="info"

package/promptRemove/pod.vue

@@ -98,7 +98,7 @@ export default {
   <div class="mt-10">
     <div class="mb-30">
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-clean-html="resourceNames(names, t)"
+        v-clean-html="resourceNames(names, null, t)"
         class="body"
       />
     </div>

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -199,33 +199,35 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
+  <fieldset>
     <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
       class="radio-group label"
     >
-      <slot name="label">
-        <h3>
-          <t
-            v-if="labelKey"
-            :k="labelKey"
-          />
-          <template v-else-if="label">
-            {{ label }}
-          </template>
-          <i
-            v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
-            class="icon icon-info icon-lg"
-          />
-          <i
-            v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
-            class="icon icon-info icon-lg"
-          />
-        </h3>
-      </slot>
+      <legend>
+        <slot name="label">
+          <h3>
+            <t
+              v-if="labelKey"
+              :k="labelKey"
+            />
+            <template v-else-if="label">
+              {{ label }}
+            </template>
+            <i
+              v-if="tooltipKey"
+              v-clean-tooltip="t(tooltipKey)"
+              class="icon icon-info icon-lg"
+            />
+            <i
+              v-else-if="tooltip"
+              v-clean-tooltip="tooltip"
+              class="icon icon-info icon-lg"
+            />
+          </h3>
+        </slot>
+      </legend>
     </div>
 
     <!-- Group -->
@@ -266,7 +268,7 @@ export default defineComponent({
         </slot>
       </div>
     </div>
-  </div>
+  </fieldset>
 </template>
 
 <style lang='scss'>

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
+import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';
 
 type StateType = boolean | 'true' | 'false' | undefined;
 
@@ -34,7 +34,7 @@ export default defineComponent({
   emits: ['update:value'],
 
   setup() {
-    const switchChrome = useTemplateRef<HTMLElement>('switchChrome');
+    const switchChrome = ref<HTMLElement | null>(null);
     const focus = () => {
       switchChrome.value?.classList.add('focus');
     };
@@ -43,7 +43,7 @@ export default defineComponent({
       switchChrome.value?.classList.remove('focus');
     };
 
-    const switchInput = useTemplateRef<HTMLInputElement>('switchInput');
+    const switchInput = ref<HTMLInputElement | null>(null);
 
     onMounted(() => {
       switchInput.value?.addEventListener('focus', focus);

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -20,7 +20,7 @@
  *    </template>
  *  </rc-dropdown>
  */
-import { useTemplateRef } from 'vue';
+import { ref } from 'vue';
 import { useClickOutside } from '@shell/composables/useClickOutside';
 import { useDropdownContext } from '@components/RcDropdown/useDropdownContext';
 
@@ -42,14 +42,14 @@ const {
 
 provideDropdownContext();
 
-const popperContainer = useTemplateRef<HTMLElement>('popperContainer');
-const dropdownTarget = useTemplateRef<HTMLElement>('dropdownTarget');
+const popperContainer = ref(null);
+const dropdownTarget = ref(null);
 
 useClickOutside(dropdownTarget, () => showMenu(false));
 
 const applyShow = () => {
   registerDropdownCollection(dropdownTarget.value);
-  setFocus();
+  setFocus('down');
 };
 
 </script>
@@ -78,7 +78,8 @@ const applyShow = () => {
         dropdown-menu-collection
         :aria-label="ariaLabel || 'Dropdown Menu'"
         @keydown="handleKeydown"
-        @keydown.down="setFocus()"
+        @keydown.down="setFocus('down')"
+        @keydown.up="setFocus('up')"
       >
         <slot name="dropdownCollection">
           <!--Empty slot content-->

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -8,8 +8,10 @@ import {
 import { RcDropdownMenuComponentProps, DropdownOption } from './types';
 import IconOrSvg from '@shell/components/IconOrSvg';
 
-// eslint-disable-next-line vue/no-setup-props-destructure
-const { buttonRole = 'primary', buttonSize = '' } = defineProps<RcDropdownMenuComponentProps>();
+withDefaults(defineProps<RcDropdownMenuComponentProps>(), {
+  buttonRole: 'primary',
+  buttonSize: undefined,
+});
 
 const emit = defineEmits(['update:open', 'select']);
 

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -2,7 +2,7 @@
 /**
  * A button that opens a menu. Used in conjunction with `RcDropdown.vue`.
  */
-import { inject, onMounted, useTemplateRef } from 'vue';
+import { inject, onMounted, ref } from 'vue';
 import { RcButton, RcButtonType } from '@components/RcButton';
 import { DropdownContext, defaultContext } from './types';
 
@@ -13,7 +13,7 @@ const {
   handleKeydown,
 } = inject<DropdownContext>('dropdownContext') || defaultContext;
 
-const dropdownTrigger = useTemplateRef<RcButtonType>('dropdownTrigger');
+const dropdownTrigger = ref<RcButtonType | null>(null);
 
 onMounted(() => {
   registerTrigger(dropdownTrigger.value);
@@ -35,8 +35,18 @@ defineExpose({ focus });
     @keydown.enter.space="handleKeydown"
     @click="showMenu(true)"
   >
+    <template #before>
+      <slot name="before">
+        <!-- Empty Content -->
+      </slot>
+    </template>
     <slot name="default">
       <!--Empty slot content-->
     </slot>
+    <template #after>
+      <slot name="after">
+        <!-- Empty Content -->
+      </slot>
+    </template>
   </RcButton>
 </template>