@rancher/shell 0.3.29 → 0.5.0

package/components/EtcdInfoBanner.vue

@@ -11,7 +11,7 @@ export default {
     const inStore = this.$store.getters['currentProduct'].inStore;
     let monitoringVersion = '';
 
-    if (this.$store.getters[`${ inStore }/canList}`](CATALOG.APP)) {
+    if (this.$store.getters[`${ inStore }/canList`](CATALOG.APP)) {
       try {
         const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
 
@@ -23,13 +23,13 @@ export default {
 
     const leader = await hasLeader(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
 
-    this.hasLeader = leader ? this.t('generic.yes') : this.t('generic.no');
+    this.hasLeader = leader ? 'Yes' : 'No';
     this.leaderChanges = await leaderChanges(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
     this.failedProposals = await failedProposals(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
   },
   data() {
     return {
-      hasLeader:       this.t('generic.no'),
+      hasLeader:       'No',
       leaderChanges:   0,
       failedProposals: 0
     };
@@ -46,10 +46,10 @@ export default {
     color="info"
   >
     <div class="datum">
-      <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }}
+      <label>{{ t('etcdInfoBanner.hasLeader') }}</label> {{ hasLeader }},
     </div>
     <div class="datum">
-      <label>{{ t('etcdInfoBanner.leaderChanges') }}</label> {{ leaderChanges }}
+      <label>{{ t('etcdInfoBanner.leaderChanges') }}</label> {{ leaderChanges }},
     </div>
     <div class="datum">
       <label>{{ t('etcdInfoBanner.failedProposals') }}</label> {{ failedProposals }}

package/components/ExplorerProjectsNamespaces.vue

@@ -391,7 +391,7 @@ export default {
     />
     <ResourceTable
       ref="table"
-      class="table"
+      class="table project-namespaces-table"
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
@@ -505,6 +505,10 @@ export default {
 <style lang="scss" scoped>
 .project-namespaces {
   & ::v-deep {
+    .project-namespaces-table table {
+      table-layout: fixed;
+    }
+
     .project-name {
       line-height: 30px;
     }
@@ -514,6 +518,26 @@ export default {
       flex-direction: row;
       justify-content: space-between;
 
+      .group-tab {
+        max-width: calc(100% - 230px);
+      }
+
+      .project-name {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        span:first-child {
+          padding-right: 8px;
+        }
+
+        span:last-child {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+
       &.has-description {
         .right {
           margin-top: 5px;

package/components/IconOrSvg.vue

@@ -76,7 +76,7 @@ export default {
           for (let x = 0; x < Object.keys(stylesheet.cssRules).length; x++) {
             const cssRules = stylesheet.cssRules[x];
 
-            if (cssRules.selectorText && ((currTheme === 'light' && cssRules.selectorText.includes('body') &&
+            if (cssRules.selectorText && ((currTheme === 'light' && (cssRules.selectorText.includes('body') || cssRules.selectorText.includes('BODY')) &&
               cssRules.selectorText.includes('.theme-light') && cssRules.style.cssText.includes('--link:')) ||
               (currTheme === 'dark' && cssRules.selectorText.includes('.theme-dark')))) {
               // grab the colors to be used on the icon from the css rules

package/components/LandingPagePreference.vue

@@ -15,10 +15,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/Markdown.vue

@@ -13,9 +13,8 @@ export default {
 
   data() {
     return {
-      loaded:    false,
-      marked:    null,
-      dompurify: null,
+      loaded: false,
+      marked: null,
     };
   },
 
@@ -26,15 +25,10 @@ export default {
         breaks:   true
       });
     },
-
-    sanitized() {
-      return this.dompurify.sanitize(this.html);
-    },
   },
 
   async mounted() {
     const marked = (await import(/* webpackChunkName: "markdown" */ 'marked'));
-    const dompurify = (await import(/* webpackChunkName: "markdown" */ 'dompurify')).default;
 
     const renderer = new marked.Renderer();
     const linkRenderer = renderer.link;
@@ -63,11 +57,8 @@ export default {
       return rendered;
     };
 
-    dompurify.setConfig({ ADD_ATTR: ['target'] });
-
     this.marked = marked;
     this.markedRenderer = renderer;
-    this.dompurify = dompurify;
     this.loaded = true;
     this.$emit('loaded', true);
   }
@@ -77,7 +68,7 @@ export default {
 <template>
   <div
     v-if="loaded"
-    v-clean-html="sanitized"
+    v-clean-html="html"
     class="markdown"
   />
   <Loading v-else />
@@ -96,8 +87,20 @@ export default {
 }
 
 .markdown {
+    blockquote {
+      color: rgb(101, 109, 118);
+      border-left: 0.25em solid rgb(208, 215, 222);
+      padding: 0 1em;
+      margin-bottom: 16px;
+    }
+
+    table {
+      border-collapse: collapse;
+    }
+
     TH {
       text-align: left;
+      border: 1px solid #e3e7eb;
     }
 
     table tr th {
@@ -118,6 +121,7 @@ export default {
       text-align: left;
       margin: 0;
       padding: 6px 13px;
+      border: 1px solid #e3e7eb;
     }
 
     table tr th :first-child, table tr td :first-child {

package/components/PodSecurityAdmission.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { _VIEW, _CREATE } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
@@ -25,7 +25,7 @@ const getExemptionControl = (): PSAExemptionControl => ({
   value:  ''
 });
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     Checkbox, LabeledSelect, LabeledInput
   },

package/components/Questions/index.vue

@@ -258,7 +258,7 @@ export default {
       }
 
       if ( this.tabbed === 'multiple' ) {
-        return this.groups.length > 1;
+        return !!this.groups.length;
       }
 
       return true;

package/components/ResourceDetail/Masthead.vue

@@ -177,13 +177,16 @@ export default {
 
     project() {
       if (this.isNamespace) {
-        const id = (this.value?.metadata?.labels || {})[PROJECT];
-        const clusterId = this.$store.getters['currentCluster'].id;
+        const cluster = this.$store.getters['currentCluster'];
 
-        return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ clusterId }/${ id }`);
-      } else {
-        return null;
+        if (cluster) {
+          const id = (this.value?.metadata?.labels || {})[PROJECT];
+
+          return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ cluster.id }/${ id }`);
+        }
       }
+
+      return null;
     },
 
     banner() {
@@ -370,7 +373,7 @@ export default {
     },
 
     hideNamespaceLocation() {
-      return this.$store.getters['currentProduct'].hideNamespaceLocation;
+      return this.$store.getters['currentProduct'].hideNamespaceLocation || this.value.namespaceLocation === null;
     },
   },
 
@@ -419,6 +422,7 @@ export default {
             <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
             <t
               v-else
+              class="mastehead-resource-title"
               :k="'resourceDetail.header.' + realMode"
               :subtype="resourceSubtype"
               :name="displayName"
@@ -541,6 +545,10 @@ export default {
 
   HEADER {
     margin: 0;
+
+    .title {
+      overflow: hidden;
+    }
   }
 
   .primaryheader {
@@ -550,6 +558,17 @@ export default {
 
     h1 {
       margin: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .mastehead-resource-title {
+        padding: 0 8px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
     }
   }
 
@@ -572,9 +591,6 @@ export default {
 
   .masthead-state {
     font-size: initial;
-    display: inline-block;
-    position: relative;
-    top: -2px;
   }
 
   .masthead-istio {

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/StatusTable.vue

@@ -3,6 +3,8 @@ import {
   LAST_UPDATED, TYPE, REASON, MESSAGE, STATUS
 } from '@shell/config/table-headers';
 import SortableTable from '@shell/components/SortableTable';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { exceptionToErrorsArray } from '@shell/utils/error';
 export default {
   components: { SortableTable },
   props:      {
@@ -31,12 +33,14 @@ export default {
       $event.stopPropagation();
       $event.preventDefault();
 
-      this.$copyText(this.$slots.default[0].text).then(() => {
+      copyTextToClipboard(this.$slots.default[0].text).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
+      }).catch((e) => {
+        this.$emit('error', exceptionToErrorsArray(e));
       });
     },
   }

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/__tests__/CopyCode.test.ts

@@ -1,12 +1,13 @@
 import { mount } from '@vue/test-utils';
 import CopyCode from '@shell/components/CopyCode.vue';
 
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
 describe('component: CopyCode', () => {
   it('should emit copied after click', async() => {
-    const wrapper = mount(CopyCode, {
-      mocks: { $copyText: () => new Promise(() => undefined) },
-      slots: { default: '<div></div>' }
-    });
+    const wrapper = mount(CopyCode, { slots: { default: '<div></div>' } });
 
     await wrapper.find('code').trigger('click');
 

package/components/fleet/FleetBundles.vue

@@ -37,8 +37,8 @@ export default {
 
   computed: {
 
-    allBundles() {
-      // gitrepo model has getter for bundles.
+    allBundlesInRepo() {
+      // gitrepo model has getter for its bundles.
       return this.value.bundles || [];
     },
 
@@ -65,13 +65,7 @@ export default {
     bundles() {
       const harvester = this.harvesterClusters;
 
-      return this.allBundles.filter((bundle) => {
-        const isRepoBundle = bundle.metadata.name.startsWith(`${ this.value.metadata.name }-`);
-
-        if (!isRepoBundle) {
-          return false;
-        }
-
+      return this.allBundlesInRepo.filter((bundle) => {
         const targets = bundle.spec?.targets || [];
 
         // Filter out any bundle that has one target whose cluster is a harvester cluster
@@ -84,7 +78,7 @@ export default {
     },
 
     hidden() {
-      return this.allBundles.length - this.bundles.length;
+      return this.allBundlesInRepo.length - this.bundles.length;
     },
 
     headers() {
@@ -105,7 +99,6 @@ export default {
       return out;
     },
   },
-
   methods: {
     displayWarning(row) {
       return !!row.status?.summary && (row.status.summary.desiredReady !== row.status.summary.ready);
@@ -113,6 +106,7 @@ export default {
   }
 };
 </script>
+
 <template>
   <div>
     <Loading v-if="$fetchState.pending" />

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: {