@rancher/shell 0.5.3 → 2.0.0

package/components/ResourceDetail/Masthead.vue

@@ -12,6 +12,9 @@ import {
 } from '@shell/config/query-params';
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
+import TabTitle from '@shell/components/TabTitle';
+
+// i18n-uses resourceDetail.header.*
 
 /**
  * Resource Detail Masthead component.
@@ -23,7 +26,7 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    BadgeState, Banner, ButtonGroup, ExtensionPanel
+    BadgeState, Banner, ButtonGroup, ExtensionPanel, TabTitle
   },
   props: {
     value: {
@@ -412,12 +415,24 @@ export default {
       <div class="title">
         <div class="primaryheader">
           <h1>
-            <nuxt-link
+            <TabTitle
+              v-if="isCreate"
+              :showChild="false"
+            >
+              {{ parent.displayName }}
+            </TabTitle>
+            <TabTitle
+              v-else
+              :showChild="false"
+            >
+              {{ displayName }}
+            </TabTitle>
+            <router-link
               v-if="location"
               :to="location"
             >
               {{ parent.displayName }}:
-            </nuxt-link>
+            </router-link>
             <span v-else>{{ parent.displayName }}:</span>
             <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
             <t
@@ -448,16 +463,17 @@ export default {
           v-if="!isCreate"
           class="subheader"
         >
-          <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <nuxt-link :to="project.detailLocation">{{ project.nameDisplay }}</nuxt-link></span>
-          <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <nuxt-link :to="workspaceLocation">{{ namespace }}</nuxt-link></span>
+          <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <router-link :to="project.detailLocation">{{ project.nameDisplay }}</router-link></span>
+          <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <router-link :to="workspaceLocation">{{ namespace }}</router-link></span>
           <span v-else-if="namespace && !hasMultipleNamespaces">
             {{ t("resourceDetail.masthead.namespace") }}:
-            <nuxt-link
+            <router-link
               v-if="!hideNamespaceLocation"
               :to="namespaceLocation"
+              data-testid="masthead-subheader-namespace"
             >
               {{ namespace }}
-            </nuxt-link>
+            </router-link>
             <span v-else>
               {{ namespace }}
             </span>

package/components/ResourceDetail/index.vue

@@ -155,6 +155,11 @@ export default {
       }
 
       if ( as === _YAML ) {
+        if (schema?.fetchResourceFields) {
+          // fetch resourceFields for createYaml
+          await schema.fetchResourceFields();
+        }
+
         yaml = createYaml(schemas, resource, data);
       }
     } else {

package/components/ResourceList/Masthead.vue

@@ -5,6 +5,7 @@ import TypeDescription from '@shell/components/TypeDescription';
 import { get } from '@shell/utils/object';
 import { AS, _YAML } from '@shell/config/query-params';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
+import TabTitle from '@shell/components/TabTitle';
 
 /**
  * Resource List Masthead component.
@@ -17,6 +18,7 @@ export default {
     Favorite,
     TypeDescription,
     ResourceLoadingIndicator,
+    TabTitle
   },
   props: {
     resource: {
@@ -102,7 +104,7 @@ export default {
 
   computed: {
     get,
-    ...mapGetters(['isExplorer']),
+    ...mapGetters(['isExplorer', 'currentCluster']),
 
     resourceName() {
       if (this.schema) {
@@ -156,20 +158,19 @@ export default {
 
     _createButtonlabel() {
       return this.createButtonLabel || this.t('resourceList.head.create');
-    }
-
-  },
+    },
+  }
 };
 </script>
 
 <template>
-  <header>
+  <header class="with-subheader">
     <slot name="typeDescription">
       <TypeDescription :resource="resource" />
     </slot>
     <div class="title">
       <h1 class="m-0">
-        {{ _typeDisplay }} <Favorite
+        <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
           v-if="isExplorer"
           :resource="favoriteResource || resource"
         />
@@ -180,28 +181,33 @@ 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">
           <slot name="extraActions" />
 
           <slot name="createButton">
-            <n-link
+            <router-link
               v-if="hasEditComponent && _isCreatable"
               :to="_createLocation"
               class="btn role-primary"
               :data-testid="componentTestid+'-create'"
             >
               {{ _createButtonlabel }}
-            </n-link>
-            <n-link
+            </router-link>
+            <router-link
               v-else-if="_isYamlCreatable"
               :to="_yamlCreateLocation"
               class="btn role-primary"
               :data-testid="componentTestid+'-create-yaml'"
             >
               {{ t("resourceList.head.createFromYaml") }}
-            </n-link>
+            </router-link>
           </slot>
         </div>
       </slot>
@@ -221,4 +227,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/ResourceList/index.vue

@@ -45,7 +45,7 @@ export default {
     const schema = this.schema;
 
     if ( this.hasListComponent ) {
-      // If you provide your own list then call its asyncData
+      // If you provide your own list then call its fetch
       const importer = this.listComponent;
       const component = (await importer())?.default;
 
@@ -55,7 +55,7 @@ export default {
 
       // If your list page has a fetch then it's responsible for populating rows itself
       if ( component?.fetch ) {
-        this.hasFetch = true;
+        this.componentWillFetch = true;
       }
 
       // If the custom component supports it, ask it what resources it loads, so we can
@@ -68,15 +68,15 @@ export default {
       }
     }
 
-    if ( !this.hasFetch ) {
+    if ( !this.componentWillFetch ) {
       if ( !schema ) {
         store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceListNotFound', { resource }, true)));
 
         return;
       }
 
-      // See comment for `namespaceFilterRequired` watcher, skip fetch if we don't have a valid NS
-      if (!this.namespaceFilterRequired) {
+      // See comment for `namespaceFilter` and `pagination` watchers, skip fetch if we're not ready yet... and something is going to call fetch later on
+      if (!this.namespaceFilterRequired && (!this.canPaginate || this.refreshFlag)) {
         await this.$fetchType(resource);
       }
     }
@@ -103,7 +103,11 @@ export default {
       extensionType:                    ExtensionPoint.PANEL,
       extensionLocation:                PanelLocation.RESOURCE_LIST,
       loadResources:                    [resource], // List of resources that will be loaded, this could be many (`Workloads`)
-      hasFetch:                         false,
+      /**
+       * Will the custom component handle the fetch of resources....
+       * or will this instance fetch resources
+       */
+      componentWillFetch:               false,
       // manual refresh
       manualRefreshInit:                false,
       watch:                            false,
@@ -113,7 +117,7 @@ export default {
       // incremental loading
       loadIndeterminate:                false,
       // query param for simple filtering
-      useQueryParamsForSimpleFiltering: true
+      useQueryParamsForSimpleFiltering: true,
     };
   },
 
@@ -124,7 +128,7 @@ export default {
         return [];
       }
 
-      return this.$store.getters['type-map/headersFor'](this.schema);
+      return this.$store.getters['type-map/headersFor'](this.schema, this.canPaginate);
     },
 
     groupBy() {
@@ -138,6 +142,7 @@ export default {
   },
 
   watch: {
+
     /**
      * When a NS filter is required and the user selects a different one, kick off a new set of API requests
      *
@@ -148,14 +153,46 @@ export default {
      * This covers case 1
      */
     namespaceFilter(neu, old) {
-      if (sameContents(neu, old)) {
-        return;
+      if (neu && !this.componentWillFetch) {
+        if (sameContents(neu, old)) {
+          return;
+        }
+
+        this.$fetchType(this.resource);
       }
+    },
 
-      if (neu && !this.hasFetch) {
+    /**
+     * When a pagination is required and the user changes page / sort / filter, kick off a new set of API requests
+     *
+     * ResourceList has two modes
+     * 1) ResourceList component handles API request to fetch resources
+     * 2) Custom list component handles API request to fetch resources
+     *
+     * This covers case 1
+     */
+    pagination(neu, old) {
+      if (neu && !this.componentWillFetch && !this.paginationEqual(neu, old)) {
         this.$fetchType(this.resource);
       }
-    }
+    },
+
+    /**
+     * Monitor the rows to ensure deleting the last entry in a server-side paginated page doesn't
+     * result in an empty page
+     */
+    rows(neu) {
+      if (!this.pagination) {
+        return;
+      }
+
+      if (this.pagination.page > 1 && neu.length === 0) {
+        this.setPagination({
+          ...this.pagination,
+          page: this.pagination.page - 1
+        });
+      }
+    },
   },
 
   created() {
@@ -184,6 +221,16 @@ export default {
       {{ t('resourceList.nsFiltering') }}
     </template>
   </IconMessage>
+  <IconMessage
+    v-else-if="paginationNsFilterRequired"
+    :vertical="true"
+    :subtle="false"
+    icon="icon-filter_alt"
+  >
+    <template #message>
+      {{ t('resourceList.nsFilteringGeneric') }}
+    </template>
+  </IconMessage>
   <div v-else>
     <Masthead
       v-if="showMasthead"
@@ -217,6 +264,7 @@ export default {
       v-else
       :schema="schema"
       :rows="rows"
+      :alt-loading="canPaginate"
       :loading="loading"
       :headers="headers"
       :group-by="groupBy"
@@ -225,11 +273,14 @@ export default {
       :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :external-pagination-enabled="canPaginate"
+      :external-pagination-result="paginationResult"
+      @pagination-changed="paginationChanged"
     />
   </div>
 </template>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
     .header {
       position: relative;
     }
@@ -245,4 +296,4 @@ export default {
       top: 10px;
       right: 10px;
     }
-  </style>
+</style>

package/components/ResourceTable.vue

@@ -59,6 +59,11 @@ export default {
       required: false
     },
 
+    altLoading: {
+      type:     Boolean,
+      required: false
+    },
+
     keyField: {
       // Field that is unique for each row.
       type:    String,
@@ -166,6 +171,16 @@ export default {
     forceUpdateLiveAndDelayed: {
       type:    Number,
       default: 0
+    },
+
+    externalPaginationEnabled: {
+      type:    Boolean,
+      default: false
+    },
+
+    externalPaginationResult: {
+      type:    Object,
+      default: null
     }
   },
 
@@ -184,24 +199,31 @@ export default {
   },
 
   data() {
-    const options = this.$store.getters[`type-map/optionsFor`](this.schema);
-    const listGroups = options?.listGroups || [];
-    const listGroupMapped = listGroups.reduce((acc, grp) => {
-      acc[grp.value] = grp;
-
-      return acc;
-    }, {});
-
     // Confirm which store we're in, if schema isn't available we're probably showing a list with different types
     const inStore = this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined;
 
-    return {
-      listGroups, listGroupMapped, inStore
-    };
+    return { inStore };
   },
 
   computed: {
+    options() {
+      return this.$store.getters[`type-map/optionsFor`](this.schema, this.externalPaginationEnabled);
+    },
+
+    _listGroupMapped() {
+      return this.options?.listGroups?.reduce((acc, grp) => {
+        acc[grp.value] = grp;
+
+        return acc;
+      }, {});
+    },
+
+    _mandatorySort() {
+      return this.options?.listMandatorySort;
+    },
+
     ...mapGetters(['currentProduct']),
+
     isNamespaced() {
       if ( this.namespaced !== null ) {
         return this.namespaced;
@@ -236,7 +258,7 @@ export default {
       if ( this.headers ) {
         headers = this.headers.slice();
       } else {
-        headers = this.$store.getters['type-map/headersFor'](this.schema);
+        headers = this.$store.getters['type-map/headersFor'](this.schema, this.externalPaginationEnabled);
       }
 
       // add custom table columns provided by the extensions ExtensionPoint.TABLE_COL hook
@@ -283,7 +305,7 @@ export default {
       }
 
       // If we are grouping by a custom group, it may specify that we hide a specific column
-      const custom = this.listGroupMapped[this.group];
+      const custom = this._listGroupMapped?.[this.group];
 
       if (custom?.hideColumn) {
         const idx = headers.findIndex((header) => header.name === custom.hideColumn);
@@ -296,6 +318,9 @@ export default {
       return headers;
     },
 
+    /**
+     * Take rows and filter out entries given the namespace filter
+     */
     filteredRows() {
       const isAll = this.$store.getters['isAllNamespaces'];
 
@@ -303,6 +328,7 @@ export default {
       if (
         !this.isNamespaced || // Resource type isn't namespaced
         this.ignoreFilter || // Component owner strictly states no filtering
+        this.externalPaginationEnabled ||
         (isAll && !this.currentProduct?.hideSystemResources) || // Need all
         (this.inStore ? this.$store.getters[`${ this.inStore }/haveNamespace`](this.schema.id)?.length : false)// Store reports type has namespace filter, so rows already contain the correctly filtered resources
       ) {
@@ -344,7 +370,14 @@ export default {
         const exists = this.groupOptions.find((g) => g.value === this._group);
 
         if (!exists) {
-          return DEFAULT_GROUP;
+          // Attempt to find the default option in available options...
+          // if not use the first value in the options collection...
+          // and if not that just fall back to the default
+          if (this.groupOptions.find((g) => g.value === DEFAULT_GROUP)) {
+            return DEFAULT_GROUP;
+          }
+
+          return this.groupOptions[0]?.value || DEFAULT_GROUP;
         }
 
         return this._group;
@@ -357,7 +390,7 @@ export default {
     showGrouping() {
       if ( this.groupable === null ) {
         const namespaceGroupable = this.$store.getters['isMultipleNamespaces'] && this.isNamespaced;
-        const customGroupable = this.listGroups.length > 0;
+        const customGroupable = !!this.options?.listGroups?.length;
 
         return namespaceGroupable || customGroupable;
       }
@@ -367,16 +400,19 @@ export default {
 
     computedGroupBy() {
       if ( this.groupBy ) {
+        // This probably comes from the type-map config for the resource (see ResourceList)
         return this.groupBy;
       }
 
       if ( this.group === 'namespace' && this.showGrouping ) {
+        // This switches to group rows by a key which is the label for the group (??)
         return 'groupByLabel';
       }
 
-      const custom = this.listGroupMapped[this.group];
+      const custom = this._listGroupMapped?.[this.group];
 
-      if (custom && custom.field) {
+      if (custom?.field) {
+        // Override the normal filtering
         return custom.field;
       }
 
@@ -384,6 +420,12 @@ export default {
     },
 
     groupOptions() {
+      // Ignore the defaults below, we have an override set of groups
+      // REPLACE (instead of SUPPLEMENT) defaults with listGroups (given listGroupsWillOverride is true)
+      if (this.options?.listGroupsWillOverride && !!this.options?.listGroups?.length) {
+        return this.options?.listGroups;
+      }
+
       const standard = [
         {
           tooltipKey: 'resourceTable.groupBy.none',
@@ -397,7 +439,12 @@ export default {
         },
       ];
 
-      return standard.concat(this.listGroups);
+      // SUPPLEMENT (instead of REPLACE) defaults with listGroups (given listGroupsWillOverride is false)
+      if (!!this.options?.listGroups?.length) {
+        return standard.concat(this.options.listGroups);
+      }
+
+      return standard;
     },
 
     parsedPagingParams() {
@@ -417,6 +464,7 @@ export default {
         pluralLabel:   this.$store.getters['type-map/labelFor'](this.schema, 99),
       };
     },
+
   },
 
   methods: {
@@ -478,7 +526,7 @@ export default {
         this.keyAction('detail');
       }
     }
-  }
+  },
 };
 </script>
 
@@ -489,6 +537,7 @@ export default {
     :headers="_headers"
     :rows="filteredRows"
     :loading="loading"
+    :alt-loading="altLoading"
     :group-by="computedGroupBy"
     :group="group"
     :group-options="groupOptions"
@@ -508,8 +557,12 @@ export default {
     :sort-generation-fn="safeSortGenerationFn"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+    :external-pagination-enabled="externalPaginationEnabled"
+    :external-pagination-result="externalPaginationResult"
+    :mandatory-sort="_mandatorySort"
     @clickedActionButton="handleActionButtonClick"
     @group-value-change="group = $event"
+
     v-on="$listeners"
   >
     <template
@@ -517,6 +570,7 @@ export default {
       #header-middle
     >
       <slot name="more-header-middle" />
+
       <ButtonGroup
         v-model="group"
         :options="groupOptions"

package/components/ResourceYaml.vue

@@ -362,6 +362,7 @@ export default {
       :yamlPreview="preview"
       :yamlSave="save"
       :yamlUnpreview="unpreview"
+      :canDiff="canDiff"
     >
       <Footer
         v-if="showFooter"

package/components/SelectIconGrid.vue

@@ -98,7 +98,7 @@ export default {
     v-if="rows.length"
     class="grid"
   >
-    <div
+    <component
       :is="asLink ? 'a' : 'div'"
       v-for="(r, idx) in rows"
       :key="get(r, keyField)"
@@ -106,7 +106,7 @@ export default {
       :target="get(r, targetField)"
       :rel="rel"
       class="item"
-      :data-testid="componentTestid + '-' + idx"
+      :data-testid="componentTestid + '-' + get(r, nameField)"
       :class="{
         'has-description': !!get(r, descriptionField),
         'has-side-label': !!get(r, sideLabelField), [colorFor(r, idx)]: true, disabled: get(r, disabledField) === true
@@ -154,7 +154,7 @@ export default {
       >
         {{ get(r, descriptionField) }}
       </div>
-    </div>
+    </component>
   </div>
   <div
     v-else