@rancher/shell 0.5.3 → 1.2.0

package/components/ResourceDetail/Masthead.vue

@@ -177,16 +177,13 @@ export default {
 
     project() {
       if (this.isNamespace) {
-        const cluster = this.$store.getters['currentCluster'];
+        const id = (this.value?.metadata?.labels || {})[PROJECT];
+        const clusterId = this.$store.getters['currentCluster'].id;
 
-        if (cluster) {
-          const id = (this.value?.metadata?.labels || {})[PROJECT];
-
-          return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ cluster.id }/${ id }`);
-        }
+        return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, `${ clusterId }/${ id }`);
+      } else {
+        return null;
       }
-
-      return null;
     },
 
     banner() {
@@ -373,7 +370,7 @@ export default {
     },
 
     hideNamespaceLocation() {
-      return this.$store.getters['currentProduct'].hideNamespaceLocation || this.value.namespaceLocation === null;
+      return this.$store.getters['currentProduct'].hideNamespaceLocation;
     },
   },
 
@@ -422,7 +419,6 @@ 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"
@@ -545,10 +541,6 @@ export default {
 
   HEADER {
     margin: 0;
-
-    .title {
-      overflow: hidden;
-    }
   }
 
   .primaryheader {
@@ -558,17 +550,6 @@ 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;
-      }
     }
   }
 
@@ -591,6 +572,9 @@ export default {
 
   .masthead-state {
     font-size: initial;
+    display: inline-block;
+    position: relative;
+    top: -2px;
   }
 
   .masthead-istio {

package/components/ResourceDetail/index.vue

@@ -28,6 +28,7 @@ function modeFor(route) {
 }
 
 async function getYaml(store, model) {
+  const inStore = store.getters['currentStore'](model.type);
   let yaml;
   const opt = { headers: { accept: 'application/yaml' } };
 
@@ -35,7 +36,9 @@ async function getYaml(store, model) {
     yaml = (await model.followLink('view', opt)).data;
   }
 
-  return model.cleanForDownload(yaml);
+  const cleanedYaml = await store.dispatch(`${ inStore }/cleanForDownload`, yaml);
+
+  return cleanedYaml;
 }
 
 export default {

package/components/ResourceList/Masthead.vue

@@ -163,7 +163,7 @@ export default {
 </script>
 
 <template>
-  <header>
+  <header class="with-subheader">
     <slot name="typeDescription">
       <TypeDescription :resource="resource" />
     </slot>
@@ -180,6 +180,11 @@ export default {
         :indeterminate="loadIndeterminate"
       />
     </div>
+    <div class="sub-header">
+      <slot name="subHeader">
+        <!--Slot content-->
+      </slot>
+    </div>
     <div class="actions-container">
       <slot name="actions">
         <div class="actions">
@@ -221,4 +226,16 @@ export default {
   header {
     margin-bottom: 20px;
   }
+
+  header.with-subheader {
+    grid-template-areas:
+      'type-banner type-banner'
+      'title actions'
+      'sub-header sub-header'
+      'state-banner state-banner';
+  }
+
+  .sub-header {
+    grid-area: sub-header;
+  }
 </style>

package/components/ResourceTable.vue

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

package/components/ResourceYaml.vue

@@ -190,11 +190,6 @@ 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;
 
@@ -365,8 +360,6 @@ export default {
     >
       <Footer
         v-if="showFooter"
-        class="footer"
-        :class="{ 'edit': !isView }"
         :mode="mode"
         :errors="errors"
         @save="save"
@@ -410,29 +403,11 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-  .flex-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-  }
-
-  .footer {
-    margin-top: 20px;
-    right: 0;
-    position: sticky;
-    bottom: 0;
-    background-color: var(--header-bg);
-
-    // Overrides outlet padding
-    margin-left: -$space-m;
-    margin-right: -$space-m;
-    margin-bottom: -$space-m;
-    padding: $space-s $space-m;
-
-    &.edit {
-      border-top: var(--header-border-size) solid var(--header-border);
-    }
-  }
+.flex-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
 </style>
 
 <style lang="scss">
@@ -444,10 +419,6 @@ export default {
   footer .actions {
     text-align: right;
   }
-
-  .spacer-small {
-    padding: 0;
-  }
 }
 
 </style>

package/components/SideNav.vue

@@ -7,16 +7,16 @@ import {
   FAVORITE_TYPES
 } from '@shell/store/prefs';
 import { getVersionInfo } from '@shell/utils/version';
-import {
-  addObjects, replaceWith, clear, addObject, sameContents
-} from '@shell/utils/array';
+import { addObjects, replaceWith, clear, addObject } from '@shell/utils/array';
 import { sortBy } from '@shell/utils/sort';
 import { ucFirst } from '@shell/utils/string';
 
-import { HCI, CATALOG, UI, SCHEMA } from '@shell/config/types';
+import {
+  HCI, CATALOG, UI, SCHEMA, COUNT
+} from '@shell/config/types';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
-import { TYPE_MODES } from '@shell/store/type-map';
+import { BASIC, FAVORITE, USED } from '@shell/store/type-map';
 import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
 import Group from '@shell/components/nav/Group';
 
@@ -31,7 +31,6 @@ export default {
   },
 
   created() {
-    // Ensure that changes to resource that change often don't resort to spamming redraw of the side nav
     this.queueUpdate = debounce(this.getGroups, 500);
 
     this.getGroups();
@@ -43,25 +42,24 @@ export default {
   },
 
   watch: {
+    counts(a, b) {
+      if ( a !== b ) {
+        this.queueUpdate();
+      }
+    },
 
-    /**
-     * Keep this simple, we're only interested in new / removed schemas
-     */
-    allSchemasIds(a, b) {
-      if ( !sameContents(a, b) ) {
+    allSchemas(a, b) {
+      if ( a !== b ) {
         this.queueUpdate();
       }
     },
 
-    allNavLinksIds(a, b) {
-      if ( !sameContents(a, b) ) {
+    allNavLinks(a, b) {
+      if ( a !== b ) {
         this.queueUpdate();
       }
     },
 
-    /**
-     * Note - There's no watch on prefs, so this only catches in session changes
-     */
     favoriteTypes(a, b) {
       if ( !isEqual(a, b) ) {
         this.queueUpdate();
@@ -75,24 +73,23 @@ export default {
     },
 
     productId(a, b) {
-      if ( a !== b) {
+      if ( !isEqual(a, b) ) {
         // Immediately update because you'll see it come in later
         this.getGroups();
       }
     },
 
-    // Queue namespaceMode and namespaces
-    // Changes to namespaceMode can also change namespaces, so keep this simple and execute both in a shortened queue
-
     namespaceMode(a, b) {
-      if ( a !== b ) {
-        this.queueUpdate();
+      if ( !isEqual(a, b) ) {
+        // Immediately update because you'll see it come in later
+        this.getGroups();
       }
     },
 
     namespaces(a, b) {
       if ( !isEqual(a, b) ) {
-        this.queueUpdate();
+        // Immediately update because you'll see it come in later
+        this.getGroups();
       }
     },
 
@@ -103,6 +100,13 @@ export default {
       }
     },
 
+    product(a, b) {
+      if ( !isEqual(a, b) ) {
+        // Immediately update because you'll see it come in later
+        this.getGroups();
+      }
+    },
+
     $route(a, b) {
       this.$nextTick(() => this.syncNav());
     },
@@ -170,7 +174,7 @@ export default {
       return this.$store.getters['cluster/all'](UI.NAV_LINK);
     },
 
-    allSchemasIds() {
+    allSchemas() {
       const managementReady = this.managementReady;
       const product = this.currentProduct;
 
@@ -178,19 +182,33 @@ export default {
         return [];
       }
 
-      // This does take some up-front time, however avoids an even more costly getGroups call
-      return this.$store.getters[`${ product.inStore }/all`](SCHEMA).map((s) => s.id).sort();
+      return this.$store.getters[`${ product.inStore }/all`](SCHEMA);
     },
 
-    namespaces() {
-      return this.$store.getters['activeNamespaceCache'];
+    counts() {
+      const managementReady = this.managementReady;
+      const product = this.currentProduct;
+
+      if ( !managementReady || !product ) {
+        return {};
+      }
+
+      const inStore = product.inStore;
+
+      // So that there's something to watch for updates
+      if ( this.$store.getters[`${ inStore }/haveAll`](COUNT) ) {
+        const counts = this.$store.getters[`${ inStore }/all`](COUNT)[0].counts;
+
+        return counts;
+      }
+
+      return {};
     },
 
-    allNavLinksIds() {
-      return this.allNavLinks.map((a) => a.id);
+    namespaces() {
+      return this.$store.getters['activeNamespaceCache'];
     },
   },
-
   methods: {
     /**
      * Fetch navigation by creating groups from product schemas
@@ -209,6 +227,13 @@ export default {
       }
 
       const currentProduct = this.$store.getters['productId'];
+      let namespaces = null;
+
+      if ( !this.$store.getters['isAllNamespaces'] ) {
+        const namespacesObject = this.$store.getters['namespaces']();
+
+        namespaces = Object.keys(namespacesObject);
+      }
 
       // Always show cluster-level types, regardless of the namespace filter
       const namespaceMode = 'both';
@@ -230,8 +255,7 @@ export default {
       // This should already have come into the list from above, but in case it hasn't...
       addObject(loadProducts, currentProduct);
 
-      this.getProductsGroups(out, loadProducts, namespaceMode, productMap);
-
+      this.getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap);
       this.getExplorerGroups(out);
 
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
@@ -239,12 +263,12 @@ export default {
       this.gettingGroups = false;
     },
 
-    getProductsGroups(out, loadProducts, namespaceMode, productMap) {
+    getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap) {
       const clusterId = this.$store.getters['clusterId'];
       const currentType = this.$route.params.resource || '';
 
       for ( const productId of loadProducts ) {
-        const modes = [TYPE_MODES.BASIC];
+        const modes = [BASIC];
 
         if ( productId === NAVLINKS ) {
           // Navlinks produce their own top-level nav items so don't need to show it as a product.
@@ -252,16 +276,14 @@ export default {
         }
 
         if ( productId === EXPLORER ) {
-          modes.push(TYPE_MODES.FAVORITE);
-          modes.push(TYPE_MODES.USED);
+          modes.push(FAVORITE);
+          modes.push(USED);
         }
 
-        // Get all types for all modes
-        const typesByMode = this.$store.getters['type-map/allTypes'](productId, modes);
-
         for ( const mode of modes ) {
-          const types = typesByMode[mode] || {};
-          const more = this.$store.getters['type-map/getTree'](productId, mode, types, clusterId, namespaceMode, currentType);
+          const types = this.$store.getters['type-map/allTypes'](productId, mode) || {};
+
+          const more = this.$store.getters['type-map/getTree'](productId, mode, types, clusterId, namespaceMode, namespaces, currentType);
 
           if ( productId === EXPLORER || !this.isExplorer ) {
             addObjects(out, more);
@@ -561,7 +583,7 @@ export default {
         }
       }
 
-      &.router-link-active:not(:hover) {
+      &.nuxt-link-active:not(:hover) {
         A {
           background-color: var(--nav-active);
         }

package/components/SortableTable/THead.vue

@@ -162,13 +162,15 @@ export default {
       const menu = document.querySelector('.table-options-container');
       const elem = document.querySelector('.table-options-btn');
 
-      this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
-        overlapX:  true,
-        fudgeX:    326,
-        fudgeY:    -22,
-        positionX: CENTER,
-        positionY: AUTO,
-      });
+      if (!this.tableColsMenuPosition) {
+        this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
+          overlapX:  true,
+          fudgeX:    26,
+          fudgeY:    -22,
+          positionX: CENTER,
+          positionY: AUTO,
+        });
+      }
 
       // toggle visibility
       this.tableColsOptionsVisibility = !this.tableColsOptionsVisibility;

package/components/SortableTable/index.vue

@@ -1026,8 +1026,9 @@ export default {
           <slot name="header-right" />
           <AsyncButton
             v-if="isTooManyItemsToAutoUpdate"
+            v-clean-tooltip="t('performance.manualRefresh.buttonTooltip')"
             class="manual-refresh"
-            mode="manual-refresh"
+            mode="refresh"
             :current-phase="currentPhase"
             @click="debouncedRefreshTableData"
           />

package/components/StatusTable.vue

@@ -3,8 +3,6 @@ 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:      {
@@ -33,14 +31,12 @@ export default {
       $event.stopPropagation();
       $event.preventDefault();
 
-      copyTextToClipboard(this.$slots.default[0].text).then(() => {
+      this.$copyText(this.$slots.default[0].text).then(() => {
         this.copied = true;
 
         setTimeout(() => {
           this.copied = false;
         }, 2000);
-      }).catch((e) => {
-        this.$emit('error', exceptionToErrorsArray(e));
       });
     },
   }

package/components/TabTitle.vue

@@ -0,0 +1,84 @@
+<script>
+import { mapGetters } from 'vuex';
+import { updatePageTitle } from '@shell/utils/title';
+import { getVendor } from '@shell/config/private-label';
+
+export default {
+  props: {
+    /**
+     * Include can be 'full', 'vendor-only' or false
+     *   'full': Show's the entire breadcrumb include vendor, product and cluster
+     *   'vendor-only': Show only the vendor name in the breadcrumb i.e. 'Rancher > "child"'
+     *   false: Don't include any part of the breadcrumb
+     */
+    breadcrumb: {
+      type:    [String, Boolean],
+      default: 'full',
+      validator(value) {
+        return ['full', 'vendor-only'].includes(value) || value === false;
+      }
+    },
+    includeVendor: {
+      type:    Boolean,
+      default: true
+    },
+    showChild: {
+      type:    Boolean,
+      default: true
+    }
+  },
+  computed: { ...mapGetters(['isExplorer', 'currentCluster', 'currentProduct']) },
+
+  methods: {
+    // This isn't a computed prop because it would trigger a recompute when the $slots changed
+    computeTitle() {
+      if (!this.$slots.default || this.$slots.default.length !== 1 || this.$slots.default[0].tag || (typeof this.$slots.default[0].text !== 'string')) {
+        console.error('The <TabTitle> component only supports text as the child.'); // eslint-disable-line no-console
+
+        return [];
+      }
+
+      const breadcrumb = [this.$slots.default[0].text.trim()];
+
+      if (this.breadcrumb === 'full') {
+        if (this.currentCluster && (this.isExplorer || this.currentCluster.isHarvester ) ) {
+          breadcrumb.unshift(this.currentCluster.nameDisplay);
+        } else if (this.currentProduct?.name) {
+          const productName = this.$store.getters['i18n/withFallback'](`product.${ this.currentProduct.name }`, null, null);
+
+          if (productName) {
+            breadcrumb.unshift(productName);
+          }
+        }
+      }
+
+      if (this.includeVendor && ['full', 'vendor-only'].includes(this.breadcrumb)) {
+        breadcrumb.unshift(getVendor());
+      }
+
+      return breadcrumb;
+    },
+    updatePageTitle() {
+      updatePageTitle(...this.computeTitle());
+    }
+  },
+
+  created() {
+    this.updatePageTitle();
+  },
+
+  // Using the render function instead of <template> because <template><slot /></template> will yield a compiler error since
+  // <slot /> is not allowed to be a root node of a <template> and I don't want to wrap the child to avoid affecting existing styling
+  render() {
+    if (this.$slots.default) {
+      this.$slots.default.forEach((e) => {
+        e.text = (e.text || '').trim();
+      });
+    }
+
+    this.updatePageTitle();
+
+    return this.showChild ? this.$slots.default : null;
+  }
+};
+</script>

package/components/Tabbed/index.vue

@@ -19,11 +19,6 @@ export default {
       default: false
     },
 
-    hideSingleTab: {
-      type:    Boolean,
-      default: false
-    },
-
     showTabsAddRemove: {
       type:    Boolean,
       default: false
@@ -91,11 +86,6 @@ 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: {
@@ -235,13 +225,11 @@ 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/YamlEditor.vue

@@ -229,7 +229,6 @@ export default {
       :class="{fill: true, scrolling: scrolling}"
       :value="curValue"
       :options="codeMirrorOptions"
-      :showKeyMapBox="true"
       :data-testid="componentTestid + '-code-mirror'"
       @onInput="onInput"
       @onReady="onReady"