@rancher/shell 1.2.3 → 2.0.1

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,
@@ -97,6 +102,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,
@@ -158,6 +171,16 @@ export default {
     forceUpdateLiveAndDelayed: {
       type:    Number,
       default: 0
+    },
+
+    externalPaginationEnabled: {
+      type:    Boolean,
+      default: false
+    },
+
+    externalPaginationResult: {
+      type:    Object,
+      default: null
     }
   },
 
@@ -176,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;
@@ -228,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
@@ -275,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);
@@ -288,6 +318,9 @@ export default {
       return headers;
     },
 
+    /**
+     * Take rows and filter out entries given the namespace filter
+     */
     filteredRows() {
       const isAll = this.$store.getters['isAllNamespaces'];
 
@@ -295,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
       ) {
@@ -336,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;
@@ -349,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;
       }
@@ -359,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;
       }
 
@@ -376,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',
@@ -389,10 +439,19 @@ 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;
     },
 
-    pagingParams() {
+    parsedPagingParams() {
+      if (this.pagingParams) {
+        return this.pagingParams;
+      }
+
       if ( !this.schema ) {
         return {
           singularLabel: '',
@@ -405,6 +464,7 @@ export default {
         pluralLabel:   this.$store.getters['type-map/labelFor'](this.schema, 99),
       };
     },
+
   },
 
   methods: {
@@ -466,7 +526,7 @@ export default {
         this.keyAction('detail');
       }
     }
-  }
+  },
 };
 </script>
 
@@ -477,12 +537,13 @@ export default {
     :headers="_headers"
     :rows="filteredRows"
     :loading="loading"
+    :alt-loading="altLoading"
     :group-by="computedGroupBy"
     :group="group"
     :group-options="groupOptions"
     :search="search"
     :paging="true"
-    :paging-params="pagingParams"
+    :paging-params="parsedPagingParams"
     :paging-label="pagingLabel"
     :row-actions="rowActions"
     :table-actions="_showBulkActions"
@@ -496,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
@@ -505,6 +570,7 @@ export default {
       #header-middle
     >
       <slot name="more-header-middle" />
+
       <ButtonGroup
         v-model="group"
         :options="groupOptions"

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;
 
@@ -357,9 +362,12 @@ export default {
       :yamlPreview="preview"
       :yamlSave="save"
       :yamlUnpreview="unpreview"
+      :canDiff="canDiff"
     >
       <Footer
         v-if="showFooter"
+        class="footer"
+        :class="{ 'edit': !isView }"
         :mode="mode"
         :errors="errors"
         @save="save"
@@ -403,11 +411,29 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-.flex-content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
+  .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);
+    }
+  }
 </style>
 
 <style lang="scss">
@@ -419,6 +445,10 @@ export default {
   footer .actions {
     text-align: right;
   }
+
+  .spacer-small {
+    padding: 0;
+  }
 }
 
 </style>

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