@rancher/shell 0.1.4 → 0.1.21

package/assets/images/generic-plugin.svg

@@ -1,7 +1 @@
-<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1"  preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <style type="text/css">
-    .st0{fill:#777;}
-  </style>    
-  <path d="M29.81,16H29V8.83a2,2,0,0,0-2-2H21A5.14,5.14,0,0,0,16.51,2,5,5,0,0,0,11,6.83H4a2,2,0,0,0-2,2V17H4.81A3.13,3.13,0,0,1,8,19.69,3,3,0,0,1,7.22,22,3,3,0,0,1,5,23H2v8.83a2,2,0,0,0,2,2H27a2,2,0,0,0,2-2V26h1a5,5,0,0,0,5-5.51A5.15,5.15,0,0,0,29.81,16Zm2.41,7A3,3,0,0,1,30,24H27v7.83H4V25H5a5,5,0,0,0,5-5.51A5.15,5.15,0,0,0,4.81,15H4V8.83h9V7a3,3,0,0,1,1-2.22A3,3,0,0,1,16.31,4,3.13,3.13,0,0,1,19,7.19V8.83h8V18h2.81A3.13,3.13,0,0,1,33,20.69,3,3,0,0,1,32.22,23Z" class="clr-i-outline clr-i-outline-path-1 st0"></path>
-  <rect class="st0" x="0" y="0" width="36" height="36" fill-opacity="0"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="#777" transform="translate(0, 0) scale(1, 1) "><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></g></svg>

package/assets/translations/en-us.yaml

@@ -48,6 +48,7 @@ generic:
   plusMore: "+ {n} more"
   readFromFile: Read from File
   readFromFolder: Read from Folder
+  reload: Reload
   register: Register
   remove: Remove
   resource: |-
@@ -189,7 +190,7 @@ product:
   neuvector: NeuVector
   harvesterManager: Virtualization Management
   rancher: Rancher
-  uiplugins: UI Plugins
+  uiplugins: Extensions
 
 suffix:
   percent: "%"
@@ -3665,7 +3666,7 @@ persistentVolumeClaim:
   status:
     label: Status
 
-# UI Plugins
+# Rancher Extensions
 plugins:
   labels:
     builtin: Built-in
@@ -3674,78 +3675,85 @@ plugins:
     installing: Installing ...
     uninstalling: Uninstalling ...
   descriptions:
-    experimental: This UI Plugin is marked as experimental
-    third-party: This UI plugin is provided by a Third-Party
+    experimental: This Extension is marked as experimental
+    third-party: This Extension is provided by a Third-Party
   error:
-    title: Error loading plugin
-    message: Could not load plugin code
+    title: Error loading extension
+    message: Could not load extension code
+    generic: Extension error
+    api: This Extension is not compatible with the Extensions API
+    host: This Extension is not compatible with this application
+    version: This Extension is not compatible with this version of Rancher
+    load: An error occurred loading the code for this Extension
   success:
-    title: Loaded plugin {name}
-    message: Plugin was loaded successfully
+    title: Loaded extension {name}
+    message: Extension was loaded successfully
   developer:
     label: Developer Load
-    title: Developer Load Plugin
-    prompt: Load a plugin from a URL
+    title: Developer Load Extension
+    prompt: Load an extension from a URL
     fields:
-      url: Plugin URL
-      name: Plugin module name
-      persist: Persist plugin by creating custom resource
+      url: Extension URL
+      name: Extension module name
+      persist: Persist extension by creating custom resource
   info:
     detail: Detail
     versions: Versions
     versionError: Could not load version information
   empty:
-    all: No UI Plugins either installed nor available
-    available: No UI Plugins available
-    installed: No UI Plugins installed
-    updates: No UI Plugin updates available
-  loadError: An error occurred loading the code for this plugin
-  helmError: "An error occurred installing the plugin via Helm"
+    all: Extensions are neither installed or available
+    available: No Extensions available
+    installed: No Extensions installed
+    updates: No updates available for installed Extensions
+  loadError: An error occurred loading the code for this extension
+  helmError: "An error occurred installing the extension via Helm"
   tabs:
     all: All
     available: Available
     installed: Installed
     updates: Updates
-  title: UI Plugins
+  title: Extensions
+  version: "Version: {version}"
   install:
     label: Install
-    title: Install UI Plugin {name}
-    prompt: "Are you sure that you want to install this UI Plugin?"
+    title: Install Extension {name}
+    prompt: "Are you sure that you want to install this Extension?"
     version: Version
-    warnNotCertified: Please ensure that you are aware of the risks of installing UI Plugins from untrusted authors
+    warnNotCertified: Please ensure that you are aware of the risks of installing Extensions from untrusted authors
   update:
     label: Update
-    title: Update UI Plugin {name}
-    prompt: "Are you sure that you want to update this UI Plugin?"
+    title: Update Extension {name}
+    prompt: "Are you sure that you want to update this Extension?"
   rollback:
     label: Rollback
-    title: Rollback UI Plugin {name}
-    prompt: "Are you sure that you want to rollback this UI Plugin?"
+    title: Rollback Extension {name}
+    prompt: "Are you sure that you want to rollback this Extension?"
   uninstall:
     label: Uninstall
-    title: "Uninstall UI Plugin: {name}"
-    prompt: "Are you sure that you want to uninstall this UI Plugin?"
-  upgradeAvailable: A newer version of this UI Plugin is available
+    title: "Uninstall Extension: {name}"
+    prompt: "Are you sure that you want to uninstall this Extension?"
+  upgradeAvailable: A newer version of this Extension is available
+  reload: Extensions changed - reload required
   safeMode:
-    title: UI Plugins Safe Mode
-    message: UI Plugins were not loaded
+    title: Extensions Safe Mode
+    message: Extensions were not loaded
   setup:
-    title: UI Plugin Support is not enabled
+    title: Extension support is not enabled
     prompt:
       cant: Automatic installation is not available - required Helm Charts could not be found
-      can: You need to install the Plugin Operator
+      can: You need to install the Extension Operator
     install:
-      title: Enable UI Plugin Support?
-      prompt: This will install the Helm charts to enable Rancher UI Plugin support
-      airgap: Un-check if your Rancher installation is air-gapped
-      addRancherRepo: Add the Rancher UI Plugins Repository
+      title: Enable Extension Support?
+      prompt: This will install the Helm charts to enable Extension support
+      airgap: The Rancher Extensions Repository provides extensions published by Rancher. Un-check if your Rancher installation is air-gapped
+      addRancherRepo: Add the Rancher Extension Repository
     remove:
-      label: Disable UI Plugin Support
-      title: Disable UI Plugin Support?
-      prompt: This will un-install the Helm charts that enable Rancher UI Plugin support
+      label: Disable Extension Support
+      title: Disable Extension Support?
+      prompt: This will un-install the Helm charts that enable Extension support
       registry:
-        title: Remove the Rancher UI Plugins Repository
-        prompt: Remove the default UI Plugins Repository
+        title: Remove the Rancher Extensions Repository
+        prompt: The Rancher Extensions Repository provides extensions published by Rancher
 
 prefs:
   title: Preferences
@@ -3785,7 +3793,7 @@ prefs:
     viewInApi: Enable "View in API"
     allNamespaces: Show system Namespaces managed by Rancher (not intended for editing or deletion)
     themeShortcut: Enable Dark/Light Theme keyboard shortcut toggle (shift+T)
-    pluginDeveloper: Enable UI Plugin Developer features
+    pluginDeveloper: Enable Extension developer features
   hideDesc:
     label: Hide All Type Descriptions
   helm:
@@ -6174,7 +6182,7 @@ performance:
     label: Incremental Loading
     setting: You can configure the threshold above which incremental loading will be used.
     description: |-
-      When enabled, resources will appear more quickly, but it may take slightly longer to load the entire set of resources. This setting only applies to the following resources: Pods, Deployments, Cron Jobs, Daemon Sets, Jobs, Stateful Sets, Replica Sets, Replication Controllers, Workloads and Secrets.
+      When enabled, resources will appear more quickly, but it may take slightly longer to load the entire set of resources. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable incremental loading
     inputLabel: Resource Threshold
   manualRefresh:
@@ -6183,7 +6191,7 @@ performance:
     setting: You can configure a threshold above which manual refresh will be enabled.
     buttonTooltip: Refresh list
     description: |-
-      When enabled, list data will not auto-update but instead the user must manually trigger a list-view refresh. This setting only applies to the following resources: Pods, Deployments, Cron Jobs, Daemon Sets, Jobs, Stateful Sets, Replica Sets, Replication Controllers, Workloads and Secrets.
+      When enabled, list data will not auto-update but instead the user must manually trigger a list-view refresh. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable manual refresh of data for lists
     inputLabel: Resource Threshold
   websocketNotification:
@@ -6191,6 +6199,29 @@ performance:
     description: |-
       When checked, websocket notifications will not appear when the UI detects a disconnection.
     checkboxLabel: Disable websocket notifications
+  gc:
+    label: Resource Garbage Collection
+    description: The UI will cache kuberentes resources locally to avoid having to re-fetch them. In some cases this can lead to a large amount of data stored in the browser. Enable this setting to periodically remove them.
+    banner: This setting is experimental and may be removed or updated in future versions.
+    checkboxLabel: Enable Garbage Collection
+    whenRun:
+      description: Update when garbage collection runs
+      intervalCheckBox:
+        label: Run garbage collection periodically
+      interval:
+        inputLabel: Run every
+      route:
+        description: Run garbage collection on page change
+        inputLabel: Page Change
+    howRun:
+      description: Update how garbage collection runs
+      age:
+        description: "Resource types musn't have been accessed within this period to be considered for garbage collection."
+        inputLabel: Resource Age
+      count:
+        description: Resource types must exceed this amount to be considered for garbage collection.
+        inputLabel: Resource Count
+
 
 banner:
   label: Fixed Banners
@@ -6310,13 +6341,16 @@ resourceQuota:
 customLinks: 
   displayTitle: Links
   label: Home Links
-  description: 'Links to display on the home page.'
+  description: 'Configure the links to display on the home page. You can define your own custom links as well as show or hide default links.'
   restoreDefaults: 'Restore Defaults'
   addLink: Add Link
   restoreSuccess: Default URLs have been restored.
   settings:
+    default: Default Links
+    custom: Custom Links
     keyLabel: Display Text
     valueLabel: URL
+    showLabel: Show
   defaults: 
     docs:       Docs
     forums:     Forums

package/components/CommunityLinks.vue

@@ -1,10 +1,11 @@
 <script>
-import { options } from '@shell/config/footer';
 import SimpleBox from '@shell/components/SimpleBox';
 import Closeable from '@shell/mixins/closeable';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import { mapGetters } from 'vuex';
+import { isRancherPrime } from '@shell/config/version';
+import { fetchLinks } from '@shell/config/home-links';
 
 export default {
   name: 'CommunityLinks',
@@ -18,36 +19,23 @@ export default {
         return {};
       },
     },
+    isSupportPage: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   mixins: [Closeable],
 
   async fetch() {
-    // If user already have custom links and uiIssueSetting Doc URL set
-    // This should already be in the uiCustomLinks
-    try {
-      this.uiCustomLinks = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_CUSTOM_LINKS });
-    } catch (err) {
-
-    }
-
-    // Fallback:
-    // NB: this.uiIssueSetting is deprecated now.
-    if (!this.uiCustomLinks) {
-      try {
-        this.uiIssuesSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES });
-      } catch (err) {
-
-      }
-    }
+    this.links = await fetchLinks(this.$store, this.hasSupport, this.isSupportPage, str => this.t(str));
   },
 
   data() {
-    return { uiCustomLinks: null, uiIssuesSetting: null };
+    return { links: {} };
   },
 
   computed: {
-
     ...mapGetters('i18n', [
       'selectedLocaleLabel'
     ]),
@@ -56,38 +44,41 @@ export default {
       return !!Object.keys(this.options).length || !!Object.keys(this.$slots).length;
     },
 
+    hasSupport() {
+      return isRancherPrime() || this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SUPPORTED )?.value === 'true';
+    },
+
     options() {
-      // Link options are provided
-      if (Object.keys(this.linkOptions).length > 0) {
-        return this.linkOptions;
+      // Use linkOptions if provided - used by Harvester
+      if (this.linkOptions && Object.keys(this.linkOptions).length) {
+        const options = [];
+
+        Object.keys(this.linkOptions).forEach((key) => {
+          options.push({
+            key,
+            label: this.t(key),
+            value: this.linkOptions[key]
+          });
+        });
+
+        return options;
       }
 
-      // Custom links set from settings
-      if (!!this.uiCustomLinks?.value) {
-        try {
-          const customLinks = JSON.parse(this.uiCustomLinks.value);
-
-          if (Array.isArray(customLinks)) {
-            return customLinks.reduce((prev, curr) => {
-              prev[curr.key] = curr.value;
-
-              return prev;
-            }, {});
-          }
-        } catch (e) {
-          console.error('Could not parse custom links setting', e); // eslint-disable-line no-console
-        }
+      // Combine the links
+      const all = [];
+
+      if (this.links.custom) {
+        all.push(...this.links.custom);
       }
 
-      // Fallback
-      return options(false, this.uiIssuesSetting?.value);
-    },
+      if (this.links.defaults) {
+        all.push(...this.links.defaults.filter(link => link.enabled));
+      }
+
+      return all;
+    }
   },
   methods: {
-    getLabel(label) {
-      return this.$store.getters['i18n/withFallback'](`customLinks.defaults.${ label }`, null, label);
-    },
-
     show() {
       this.$modal.show('wechat-modal');
     },
@@ -106,11 +97,11 @@ export default {
           {{ t('customLinks.displayTitle') }}
         </h2>
       </template>
-      <div v-for="(value, name) in options" :key="name" class="support-link">
-        <n-link v-if="value.startsWith('/') " :to="value">
-          {{ getLabel(name) }}
+      <div v-for="link in options" :key="link.label" class="support-link">
+        <n-link v-if="link.value.startsWith('/') " :to="link.value">
+          {{ link.label }}
         </n-link>
-        <a v-else :href="value" rel="noopener noreferrer nofollow" target="_blank"> {{ getLabel(name) }} </a>
+        <a v-else :href="link.value" rel="noopener noreferrer nofollow" target="_blank"> {{ link.label }} </a>
       </div>
       <slot />
       <div v-if="selectedLocaleLabel === t('locale.zh-hans')" class="support-link">

package/components/ExplorerProjectsNamespaces.vue

@@ -10,12 +10,14 @@ import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
 import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListProjectNamespace',
   components: {
     Masthead, MoveModal, ResourceTable
   },
+  mixins: [ResourceFetch],
 
   props: {
     createProjectLocationOverride: {
@@ -42,14 +44,15 @@ export default {
       return;
     }
 
-    this.namespaces = await this.$store.dispatch(`${ inStore }/findAll`, { type: NAMESPACE });
+    await this.$fetchType(NAMESPACE);
     this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT, opt: { force: true } });
   },
 
   data() {
     return {
+      loadResources:                [NAMESPACE],
+      loadIndeterminate:            true,
       schema:                       null,
-      namespaces:                   [],
       projects:                     [],
       projectSchema:                null,
       MANAGEMENT,
@@ -66,6 +69,17 @@ export default {
 
   computed: {
     ...mapGetters(['currentCluster', 'currentProduct']),
+    namespaces() {
+      const inStore = this.$store.getters['currentStore'](NAMESPACE);
+
+      return this.$store.getters[`${ inStore }/all`](NAMESPACE);
+    },
+    loading() {
+      return !this.currentCluster || this.namespaces.length ? false : this.$fetchState.pending;
+    },
+    showIncrementalLoadingIndicator() {
+      return this.perfConfig?.incrementalLoading?.enabled;
+    },
     isNamespaceCreatable() {
       return (this.schema?.collectionMethods || []).includes('POST');
     },
@@ -309,6 +323,9 @@ export default {
       :favorite-resource="VIRTUAL_TYPES.PROJECT_NAMESPACES"
       :create-location="createProjectLocation"
       :create-button-label="t('projectNamespaces.createProject')"
+      :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     />
     <ResourceTable
       ref="table"
@@ -319,7 +336,7 @@ export default {
       :rows="filteredRows"
       :groupable="true"
       :sort-generation-fn="sortGenerationFn"
-      :loading="$fetchState.pending || !currentCluster"
+      :loading="loading"
       group-tooltip="resourceTable.groupBy.project"
       key-field="_key"
       v-on="$listeners"

package/components/LazyImage.vue

@@ -19,17 +19,18 @@ export default {
     },
   },
 
-  mounted() {
-    const $img = $(this.$refs.img);
-
-    if ( this.src ) {
-      $img.attr('src', this.src);
-      this.boundError = this.onError.bind(this);
-
-      $img.on('error', this.boundError);
+  watch: {
+    src(neu, old) {
+      if (neu !== old) {
+        this.loadImage();
+      }
     }
   },
 
+  mounted() {
+    this.loadImage();
+  },
+
   beforeDestroy() {
     const $img = $(this.$refs.img);
 
@@ -39,6 +40,18 @@ export default {
   },
 
   methods: {
+    // Ensure we load the image when the source changes
+    loadImage() {
+      const $img = $(this.$refs.img);
+
+      if ( this.src ) {
+        $img.attr('src', this.src);
+        this.boundError = this.onError.bind(this);
+
+        $img.on('error', this.boundError);
+      }
+    },
+
     onError() {
       const $img = $(this.$refs.img);
 

package/components/PromptRemove.vue

@@ -266,7 +266,7 @@ export default {
         await this.refreshSpoofedTypes(spoofedTypes);
         this.done();
       } catch (err) {
-        this.error = err;
+        this.error = err.message || err;
         btnCB(false);
       }
     },
@@ -278,7 +278,7 @@ export default {
         await this.refreshSpoofedTypes(spoofedTypes);
         this.done();
       } catch (err) {
-        this.error = err;
+        this.error = err.message || err;
         btnCB(false);
       }
     },

package/components/ResourceList/Masthead.vue

@@ -4,6 +4,7 @@ import Favorite from '@shell/components/nav/Favorite';
 import TypeDescription from '@shell/components/TypeDescription';
 import { get } from '@shell/utils/object';
 import { AS, _YAML } from '@shell/config/query-params';
+import ResourceLoadingIndicator from './ResourceLoadingIndicator';
 
 /**
  * Resource List Masthead component.
@@ -15,6 +16,7 @@ export default {
   components: {
     Favorite,
     TypeDescription,
+    ResourceLoadingIndicator,
   },
   props: {
     resource: {
@@ -53,6 +55,20 @@ export default {
       type:    String,
       default: null
     },
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    showIncrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
 
     /**
      * Inherited global identifier prefix for tests
@@ -155,7 +171,11 @@ export default {
       <h1 class="m-0">
         {{ _typeDisplay }} <Favorite v-if="isExplorer" :resource="favoriteResource || resource" />
       </h1>
-      <slot name="header"></slot>
+      <ResourceLoadingIndicator
+        v-if="showIncrementalLoadingIndicator"
+        :resources="loadResources"
+        :indeterminate="loadIndeterminate"
+      />
     </div>
     <div class="actions-container">
       <slot name="actions">

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -16,10 +16,6 @@ export default {
     indeterminate: {
       type:    Boolean,
       default: false,
-    },
-    rows: {
-      type:     Array,
-      default:  undefined,
     }
   },
 
@@ -32,10 +28,6 @@ export default {
   computed: {
     // Count of rows - either from the data provided or from the rows for the first resource
     rowsCount() {
-      if (this.rows) {
-        return this.rows.length;
-      }
-
       if (this.resources.length > 0) {
         const existingData = this.$store.getters[`${ this.inStore }/all`](this.resources[0]) || [];
 

package/components/ResourceList/index.vue

@@ -3,7 +3,7 @@ import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
 import Masthead from './Masthead';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
-import ResourceFetch, { TYPES_RESTRICTED } from '@shell/mixins/resource-fetch';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
@@ -43,8 +43,8 @@ export default {
       if (component?.$loadingResources) {
         const { loadResources, loadIndeterminate } = component?.$loadingResources(this.$route, this.$store);
 
-        this.loadResources = loadResources;
-        this.loadIndeterminate = loadIndeterminate;
+        this.loadResources = loadResources || [resource];
+        this.loadIndeterminate = loadIndeterminate || false;
       }
     }
 
@@ -55,11 +55,7 @@ export default {
         return;
       }
 
-      if (TYPES_RESTRICTED.includes(resource)) {
-        this.rows = await this.$fetchType(resource);
-      } else {
-        this.rows = await store.dispatch(`${ inStore }/findAll`, { type: resource });
-      }
+      await this.$fetchType(resource);
     }
   },
 
@@ -75,13 +71,10 @@ export default {
 
     const showMasthead = getters[`type-map/optionsFor`](resource).showListMasthead;
 
-    const existingData = getters[`${ inStore }/all`](resource) || [];
-
     return {
       inStore,
       schema,
       hasListComponent,
-      hasData:           existingData.length > 0,
       showMasthead:      showMasthead === undefined ? true : showMasthead,
       resource,
       // manual refresh
@@ -89,7 +82,6 @@ export default {
       watch:             false,
       force:             false,
       // Provided by fetch later
-      rows:              [],
       customTypeDisplay: null,
       // incremental loading
       loadResources:     [resource],
@@ -111,10 +103,6 @@ export default {
       return this.$store.getters['type-map/groupByFor'](this.schema);
     },
 
-    loading() {
-      return this.hasData ? false : this.$fetchState.pending;
-    },
-
     showIncrementalLoadingIndicator() {
       return this.perfConfig?.incrementalLoading?.enabled;
     }
@@ -142,18 +130,16 @@ export default {
       :type-display="customTypeDisplay"
       :schema="schema"
       :resource="resource"
+      :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     >
-      <template v-slot:header>
-        <ResourceLoadingIndicator
-          v-if="showIncrementalLoadingIndicator"
-          :resources="loadResources"
-          :indeterminate="loadIndeterminate"
-        />
-      </template>
     </Masthead>
     <div v-if="hasListComponent">
       <component
         :is="listComponent"
+        :incremental-loading-indicator="showIncrementalLoadingIndicator"
+        :rows="rows"
         v-bind="$data"
       />
     </div>