@rancher/shell 0.4.0 → 0.5.1

package/components/ResourceTable.vue

@@ -97,6 +97,14 @@ export default {
       default: 'sortableTable.paging.resource',
     },
 
+    /**
+     * Additional params to pass to the pagingLabel translation
+     */
+    pagingParams: {
+      type:    Object,
+      default: null,
+    },
+
     rowActions: {
       type:    Boolean,
       default: true,
@@ -392,7 +400,11 @@ export default {
       return standard.concat(this.listGroups);
     },
 
-    pagingParams() {
+    parsedPagingParams() {
+      if (this.pagingParams) {
+        return this.pagingParams;
+      }
+
       if ( !this.schema ) {
         return {
           singularLabel: '',
@@ -482,7 +494,7 @@ export default {
     :group-options="groupOptions"
     :search="search"
     :paging="true"
-    :paging-params="pagingParams"
+    :paging-params="parsedPagingParams"
     :paging-label="pagingLabel"
     :row-actions="rowActions"
     :table-actions="_showBulkActions"

package/components/ResourceYaml.vue

@@ -190,6 +190,11 @@ export default {
 
       cm.foldLinesMatching(/managedFields/);
 
+      // Allow the model to supply an array of json paths to fold other sections in the YAML for the given resource type
+      if (this.value?.yamlFolding) {
+        this.value.yamlFolding.forEach((path) => cm.foldYaml(path));
+      }
+
       // regardless of edit or create we should probably fold all the comments so they dont get out of hand.
       const saved = cm.getMode().fold;
 

package/components/SideNav.vue

@@ -583,7 +583,7 @@ export default {
         }
       }
 
-      &.nuxt-link-active:not(:hover) {
+      &.router-link-active:not(:hover) {
         A {
           background-color: var(--nav-active);
         }

package/components/SingleClusterInfo.vue

@@ -13,10 +13,7 @@ export default {
   },
 
   async fetch() {
-    this.clusters = await this.$store.dispatch('management/findAll', {
-      type: MANAGEMENT.CLUSTER,
-      opt:  { url: MANAGEMENT.CLUSTER }
-    });
+    this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
   },
 
   data() {

package/components/Tabbed/index.vue

@@ -19,6 +19,11 @@ export default {
       default: false
     },
 
+    hideSingleTab: {
+      type:    Boolean,
+      default: false
+    },
+
     showTabsAddRemove: {
       type:    Boolean,
       default: false
@@ -86,6 +91,11 @@ export default {
     sortedTabs() {
       return sortBy(this.tabs, ['weight:desc', 'labelDisplay', 'name']);
     },
+
+    // hide tabs based on tab count IF flag is active
+    hideTabs() {
+      return this.hideSingleTab && this.sortedTabs.length === 1;
+    }
   },
 
   watch: {
@@ -225,11 +235,13 @@ export default {
 <template>
   <div :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }">
     <ul
+      v-if="!hideTabs"
       ref="tablist"
       role="tablist"
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
       tabindex="0"
+      data-testid="tabbed-block"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
       @keydown.down.prevent="selectNext(1)"

package/components/fleet/FleetRepos.vue

@@ -8,8 +8,16 @@ import {
   AGE,
   STATE,
   NAME,
-  FLEET_SUMMARY
+  FLEET_SUMMARY,
+  FLEET_REPO,
+  FLEET_REPO_TARGET,
+  FLEET_REPO_CLUSTERS_READY,
+  FLEET_REPO_CLUSTER_SUMMARY,
+  FLEET_REPO_PER_CLUSTER_STATE
+
 } from '@shell/config/table-headers';
+import { FLEET } from '@shell/config/labels-annotations';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
 
@@ -19,6 +27,11 @@ export default {
     ResourceTable, Link, Shortened, FleetIntro
   },
   props: {
+    clusterId: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
     rows: {
       type:     Array,
       required: true,
@@ -54,35 +67,46 @@ export default {
       });
     },
 
+    isClusterView() {
+      return !!this.clusterId;
+    },
+
     noRows() {
       return !this.filteredRows.length;
     },
 
     headers() {
-      const out = [
-        STATE,
-        NAME,
-        {
-          name:     'repo',
-          labelKey: 'tableHeaders.repo',
-          value:    'repoDisplay',
-          sort:     'repoDisplay',
-          search:   ['spec.repo', 'status.commit'],
+      // Cluster summary is only shown in the cluster view
+      const fleetClusterSummary = {
+        ...FLEET_REPO_CLUSTER_SUMMARY,
+        formatterOpts: {
+          // Fleet uses labels to identify clusters
+          clusterLabel: this.clusterId
         },
-        {
-          name:     'target',
-          labelKey: 'tableHeaders.target',
-          value:    'targetInfo.modeDisplay',
-          sort:     ['targetInfo.modeDisplay', 'targetInfo.cluster', 'targetInfo.clusterGroup'],
-        },
-        {
-          name:     'clustersReady',
-          labelKey: 'tableHeaders.clustersReady',
-          value:    'status.readyClusters',
-          sort:     'status.readyClusters',
-          search:   false,
+      };
+
+      // if hasPerClusterState then use the repo state
+      const fleetPerClusterState = {
+        ...FLEET_REPO_PER_CLUSTER_STATE,
+        value: (row) => {
+          const statePerCluster = row.clusterResourceStatus?.find((c) => {
+            return c.clusterLabel === this.clusterId;
+          });
+
+          return statePerCluster ? statePerCluster?.status?.displayStatus : STATES_ENUM.ACTIVE;
         },
-        FLEET_SUMMARY,
+      };
+
+      const summary = this.isClusterView ? [fleetClusterSummary] : [FLEET_REPO_CLUSTERS_READY, FLEET_SUMMARY];
+
+      const state = this.isClusterView ? fleetPerClusterState : STATE;
+
+      const out = [
+        state,
+        NAME,
+        FLEET_REPO,
+        FLEET_REPO_TARGET,
+        ...summary,
         AGE
       ];
 
@@ -92,6 +116,12 @@ export default {
   methods: {
     parseTargetMode(row) {
       return row.targetInfo?.mode === 'clusterGroup' ? this.t('fleet.gitRepo.warningTooltip.clusterGroup') : this.t('fleet.gitRepo.warningTooltip.cluster');
+    },
+
+    clusterViewResourceStatus(row) {
+      return row.clusterResourceStatus.find((c) => {
+        return c.metadata?.labels[FLEET.CLUSTER_NAME] === this.clusterId;
+      });
     }
   },
 };
@@ -111,7 +141,7 @@ export default {
       key-field="_key"
       v-on="$listeners"
     >
-      <template #cell:repo="{row}">
+      <template #cell:repo="{ row }">
         <Link
           :row="row"
           :value="row.spec.repo"
@@ -119,6 +149,7 @@ export default {
           before-icon-key="repoIcon"
           url-key="spec.repo"
         />
+        {{ row.cluster }}
         <template v-if="row.commitDisplay">
           <div class="text-muted">
             <Shortened
@@ -130,7 +161,10 @@ export default {
         </template>
       </template>
 
-      <template #cell:clustersReady="{row}">
+      <template
+        v-if="!isClusterView"
+        #cell:clustersReady="{ row }"
+      >
         <span
           v-if="!row.clusterInfo"
           class="text-muted"
@@ -138,7 +172,8 @@ export default {
         <span
           v-else-if="row.clusterInfo.unready"
           class="text-warning"
-        >{{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}</span>
+        >{{ row.clusterInfo.ready }}/{{
+          row.clusterInfo.total }}</span>
         <span
           v-else
           class="cluster-count-info"
@@ -152,7 +187,7 @@ export default {
         </span>
       </template>
 
-      <template #cell:target="{row}">
+      <template #cell:target="{ row }">
         {{ row.targetInfo.modeDisplay }}
       </template>
     </ResourceTable>

package/components/fleet/FleetResources.vue

@@ -11,7 +11,12 @@ export default {
     value: {
       type:     Object,
       required: true,
-    }
+    },
+    clusterId: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
   },
 
   computed: {

package/components/form/ArrayListSelect.vue

@@ -24,6 +24,10 @@ export default {
     loading: {
       type:    Boolean,
       default: false
+    },
+    disabled: {
+      type:    Boolean,
+      default: true
     }
   },
   computed: {
@@ -34,6 +38,10 @@ export default {
 
     addAllowed() {
       return this.filteredOptions.length > 0;
+    },
+
+    defaultAddValue() {
+      return this.options[0]?.value;
     }
   },
 
@@ -62,6 +70,8 @@ export default {
     class="array-list-select"
     :add-allowed="addAllowed || loading"
     :loading="loading"
+    :defaultAddValue="defaultAddValue"
+    :disabled="disabled"
     @input="$emit('input', $event)"
   >
     <template v-slot:columns="scope">

package/components/form/KeyValue.vue

@@ -343,6 +343,7 @@ export default {
 
         for ( const row of input ) {
           let value = row[this.valueName] || '';
+
           const decodedValue = base64Decode(row[this.valueName]);
           const asciiValue = asciiLike(decodedValue);
 
@@ -644,6 +645,7 @@ export default {
               :clearable="false"
               :taggable="keyTaggable"
               :options="calculateOptions(row[keyName])"
+              :data-testid="`select-kv-item-key-${i}`"
               @input="queueUpdate"
             />
             <input
@@ -652,6 +654,7 @@ export default {
               v-model="row[keyName]"
               :disabled="isView || disabled || !keyEditable || isProtected(row.key)"
               :placeholder="keyPlaceholder"
+              :data-testid="`input-kv-item-key-${i}`"
               @input="queueUpdate"
               @paste="onPaste(i, $event)"
             >
@@ -661,6 +664,7 @@ export default {
         <!-- Value -->
         <div
           :key="i+'value'"
+          :data-testid="`kv-item-value-${i}`"
           class="kv-item value"
         >
           <slot

package/components/form/LabeledSelect.vue

@@ -88,6 +88,10 @@ export default {
       default: null,
       type:    [String, Object, Number, Array, Boolean]
     },
+    options: {
+      type:     Array,
+      required: true
+    },
     closeOnSelect: {
       type:    Boolean,
       default: true

package/components/formatter/Checked.vue

@@ -2,16 +2,24 @@
 
 export default {
   props: {
+    // When sortabletable calculates these values it converts null and undefined to ''
+    // passing '' to a prop typed as Boolean coerces it to true
     value: {
-      type:    Boolean,
+      type:    [String, Boolean],
       default: true
     },
-  }
+  },
+
+  computed: {
+    checked() {
+      return this.value === true || this.value === 'true';
+    }
+  },
 };
 </script>
 
 <template>
-  <span v-if="value">
+  <span v-if="checked">
     <i class="icon icon-checkmark" />
   </span>
   <span

package/components/formatter/FleetClusterSummaryGraph.vue

@@ -0,0 +1,27 @@
+<script>
+import FleetSummaryGraph from '@shell/components/formatter/FleetSummaryGraph';
+
+export default {
+  name:       'FleetClusterSummaryGraph',
+  components: { FleetSummaryGraph },
+
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+
+    clusterLabel: {
+      type:     String,
+      required: true
+    }
+  },
+};
+</script>
+
+<template>
+  <FleetSummaryGraph
+    :row="row"
+    :clusterLabel="clusterLabel"
+  />
+</template>

package/components/formatter/FleetSummaryGraph.vue

@@ -12,10 +12,22 @@ export default {
       type:     Object,
       required: true
     },
+
+    clusterLabel: {
+      type:     String,
+      required: false,
+      default:  null,
+    }
   },
 
   computed: {
     summary() {
+      if (this.clusterLabel) {
+        return this.row.clusterResourceStatus.find((x) => {
+          return x.clusterLabel === this.clusterLabel;
+        })?.status.resourceCounts || {};
+      }
+
       return this.row.status?.resourceCounts || {};
     },
 
@@ -73,7 +85,7 @@ export default {
           >
             <td
               class="text-left pr-20"
-              :class="{[obj.textColor]: true}"
+              :class="{ [obj.textColor]: true }"
             >
               {{ obj.label }}
             </td>
@@ -94,17 +106,17 @@ export default {
 </template>
 
 <style lang="scss">
-  .col-scale {
-    position: relative;
+.col-scale {
+  position: relative;
 
-    .trigger {
-      width: 100%;
-    }
+  .trigger {
+    width: 100%;
   }
+}
 
-  .scale {
-    margin: 0;
-    padding: 0;
-    line-height: initial;
-  }
+.scale {
+  margin: 0;
+  padding: 0;
+  line-height: initial;
+}
 </style>

package/components/formatter/LiveDuration.vue

@@ -57,7 +57,7 @@ export default {
       const now = day();
 
       from = from || now;
-      const seconds = Math.abs(value.diff(now, 'seconds'));
+      const seconds = Math.abs(value.diff(from, 'seconds'));
 
       return elapsedTime(seconds);
     },

package/components/formatter/PercentageBar.vue

@@ -30,7 +30,7 @@ export default {
 </script>
 
 <template>
-  <p v-if="!value || value === '0'">
+  <p v-if="!value || value === '0' || isNaN(value)">
     {{ t('generic.na') }}
   </p>
   <PercentageBarComponent

package/components/formatter/__tests__/Checked.test.ts

@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils';
+import Checked from '@shell/components/formatter/Checked.vue';
+
+describe('component: Checked', () => {
+  it.each([true, 'true'])('should display a checkmark when the value is true or "true"', (value: any) => {
+    const wrapper = mount(Checked, { propsData: { value } });
+    const checkmark = wrapper.find('.icon-checkmark');
+
+    expect(checkmark.exists()).toBe(true);
+  });
+
+  it.each([false, '', 'abc'])('should not display a checkmark when the value is anything other than true or "true"', (value: any) => {
+    const wrapper = mount(Checked, { propsData: { value } });
+
+    const checkmark = wrapper.find('.icon-checkmark');
+
+    expect(checkmark.exists()).toBe(false);
+  });
+});

package/components/nav/Group.vue

@@ -390,8 +390,8 @@ export default {
     }
   }
 
-  .body ::v-deep > .child.nuxt-link-active,
-  .header ::v-deep > .child.nuxt-link-exact-active {
+  .body ::v-deep > .child.router-link-active,
+  .header ::v-deep > .child.router-link-exact-active {
     padding: 0;
 
     A, A I {

package/components/nav/Header.vue

@@ -441,7 +441,6 @@ export default {
 
     <div class="rd-header-right">
       <component :is="navHeaderRight" />
-
       <div
         v-if="showFilter"
         class="top"

package/components/nav/TopLevelMenu.vue

@@ -13,6 +13,7 @@ import { getVersionInfo } from '@shell/utils/version';
 import { LEGACY } from '@shell/store/features';
 import { SETTING } from '@shell/config/settings';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
+import { getProductFromRoute } from '@shell/middleware/authenticated';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
 
@@ -72,12 +73,17 @@ export default {
       if (bannerSettings) {
         const parsed = JSON.parse(bannerSettings.value);
         const {
-          showFooter, showHeader, bannerFooter, bannerHeader
+          showFooter, showHeader, bannerFooter, bannerHeader, banner
         } = parsed;
 
+        // add defaults to accomodate older JSON structures for banner definitions without breaking the UI
+        // https://github.com/rancher/dashboard/issues/10140
+        const bannerHeaderFontSize = bannerHeader?.fontSize || banner?.fontSize || '14px';
+        const bannerFooterFontSize = bannerFooter?.fontSize || banner?.fontSize || '14px';
+
         return {
-          headerFont: showHeader === 'true' ? this.pxToEm(bannerHeader.fontSize) : '0px',
-          footerFont: showFooter === 'true' ? this.pxToEm(bannerFooter.fontSize) : '0px'
+          headerFont: showHeader === 'true' ? this.pxToEm(bannerHeaderFontSize) : '0px',
+          footerFont: showFooter === 'true' ? this.pxToEm(bannerFooterFontSize) : '0px'
         };
       }
 
@@ -242,7 +248,15 @@ export default {
 
     hasSupport() {
       return isRancherPrime() || this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SUPPORTED )?.value === 'true';
-    }
+    },
+
+    isCurrRouteClusterExplorer() {
+      return this.$route?.name?.startsWith('c-cluster');
+    },
+
+    productFromRoute() {
+      return getProductFromRoute(this.$route);
+    },
   },
 
   watch: {
@@ -273,6 +287,16 @@ export default {
       return `${ lineHeightInEm }em`;
     },
 
+    checkActiveRoute(obj, isClusterRoute) {
+      // for Cluster links in main nav: check if route is a cluster explorer one + check if route cluster matches cluster obj id + check if curr product matches route product
+      if (isClusterRoute) {
+        return this.isCurrRouteClusterExplorer && this.$route?.params?.cluster === obj?.id && this.productFromRoute === this.currentProduct?.name;
+      }
+
+      // for remaining main nav items, check if curr product matches route product is enough
+      return this.productFromRoute === obj?.value;
+    },
+
     handler(e) {
       if (e.keyCode === KEY.ESCAPE ) {
         this.hide();
@@ -435,6 +459,7 @@ export default {
               <nuxt-link
                 class="option"
                 :to="a.to"
+                :class="{'active-menu-link': checkActiveRoute(a) }"
               >
                 <IconOrSvg
                   :icon="a.icon"
@@ -466,6 +491,7 @@ export default {
                     v-if="c.ready"
                     :data-testid="`menu-cluster-${ c.id }`"
                     class="cluster selector option"
+                    :class="{'active-menu-link': checkActiveRoute(c, true) }"
                     :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
                   >
                     <ClusterIconMenu
@@ -515,6 +541,7 @@ export default {
                     v-if="c.ready"
                     :data-testid="`menu-cluster-${ c.id }`"
                     class="cluster selector option"
+                    :class="{'active-menu-link': checkActiveRoute(c, true) }"
                     :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
                   >
                     <ClusterIconMenu
@@ -592,6 +619,7 @@ export default {
               >
                 <nuxt-link
                   class="option"
+                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -619,6 +647,7 @@ export default {
               >
                 <nuxt-link
                   class="option"
+                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -648,6 +677,7 @@ export default {
               >
                 <nuxt-link
                   class="option"
+                  :class="{'active-menu-link': checkActiveRoute(a) }"
                   :to="a.to"
                 >
                   <IconOrSvg
@@ -867,7 +897,7 @@ export default {
           margin-right: 16px;
         }
 
-        &.nuxt-link-active {
+        &.router-link-active, &.active-menu-link {
           background: var(--primary-hover-bg);
           color: var(--primary-hover-text);
 
@@ -991,7 +1021,7 @@ export default {
               font-size: 14px;
             }
 
-            .nuxt-link-active {
+            .router-link-active {
               &:hover {
                 text-decoration: none;
               }

package/components/nav/Type.vue

@@ -1,7 +1,6 @@
 <script>
 import Favorite from '@shell/components/nav/Favorite';
 import { FAVORITE, USED } from '@shell/store/type-map';
-import { linkActiveClass } from '@shell/config/router';
 
 const showFavoritesFor = [FAVORITE, USED];
 
@@ -31,7 +30,6 @@ export default {
       near:     false,
       over:     false,
       menuPath: this.type.route ? this.$router.resolve(this.type.route)?.route?.path : undefined,
-      linkActiveClass
     };
   },
 
@@ -134,7 +132,7 @@ export default {
     :to="type.route"
     tag="li"
     class="child nav-type"
-    :class="{'root': isRoot, [`depth-${depth}`]: true, [linkActiveClass]: isCurrent}"
+    :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isCurrent}"
     :exact="type.exact"
   >
     <a