@rancher/shell 3.0.8-rc.9 → 3.0.8

package/store/type-map.js

@@ -35,6 +35,7 @@
 //   ifHave,                  -- Show this product only if the given capability is available
 //   ifHaveGroup,             -- Show this product only if the given group exists in the store [inStore]
 //   ifHaveType,              -- Show this product only if the given type exists in the store [inStore], This can also be specified as an object { type: TYPE, store: 'management' } if the type isn't in the current [inStore]
+//   ifNotHaveType,           -- Hide this product if the given type exists in the store [inStore] (opposite of ifHaveType)
 //   ifHaveVerb,              -- In combination with ifHaveTYpe, show it only if the type also has this collectionMethod
 //   inStore,                 -- Which store to look at for if* above and the left-nav, defaults to "cluster"
 //   rootProduct,             -- Optional root (parent) product - if set, used to optimize navigation when product changes stays within root product
@@ -152,6 +153,7 @@ import { haveV2Monitoring } from '@shell/utils/monitoring';
 import { NEU_VECTOR_NAMESPACE } from '@shell/config/product/neuvector';
 import { createHeaders, rowValueGetter } from '@shell/store/type-map.utils';
 import { defineAsyncComponent } from 'vue';
+import { filterLocationValidParams } from '@shell/utils/router';
 
 export const NAMESPACED = 'namespaced';
 export const CLUSTER_LEVEL = 'cluster';
@@ -238,7 +240,7 @@ export function DSL(store, product, module = 'type-map') {
       };
 
       // Convert strings to regex's - we do this once here for efficiency
-      for ( const k of ['ifHaveGroup', 'ifHaveType'] ) {
+      for ( const k of ['ifHaveGroup', 'ifHaveType', 'ifNotHaveType'] ) {
         if ( opt[k] ) {
           if (Array.isArray(opt[k])) {
             opt[k] = opt[k].map((r) => regexToString(ensureRegex(r)));
@@ -365,7 +367,7 @@ export function DSL(store, product, module = 'type-map') {
 
 let called = false;
 
-export async function applyProducts(store, $plugin) {
+export async function applyProducts(store, $extension) {
   if (called) {
     return;
   }
@@ -379,7 +381,7 @@ export async function applyProducts(store, $plugin) {
     }
   }
   // Load the products from all plugins
-  $plugin.loadProducts();
+  $extension.loadProducts();
 }
 
 export function productsLoaded() {
@@ -694,7 +696,7 @@ export const getters = {
             }
           };
 
-          typeObj.route = route;
+          typeObj.route = filterLocationValidParams(rootState.$router, route);
         }
 
         // Cluster ID and Product should always be set
@@ -711,7 +713,7 @@ export const getters = {
           exact:        typeObj.exact || false,
           'exact-path': typeObj['exact-path'] || false,
           namespaced,
-          route,
+          route:        filterLocationValidParams(rootState.$router, route),
           name:         typeObj.name,
           weight:       typeObj.weight || getters.typeWeightFor(typeObj.schema?.id || label, isBasic),
           overview:     !!typeObj.overview,
@@ -1419,6 +1421,14 @@ export const getters = {
         }
       }
 
+      if ( p.ifNotHaveType ) {
+        const haveIds = knownTypes[module].filter((t) => t.match(stringToRegex(p.ifNotHaveType)) );
+
+        if ( haveIds.length ) {
+          return false;
+        }
+      }
+
       if ( p.ifHaveGroup && !knownGroups[module].find((t) => t.match(stringToRegex(p.ifHaveGroup)) ) ) {
         return false;
       }
@@ -2026,7 +2036,7 @@ function hasCustom(state, rootState, kind, key, fallback) {
   }
 
   // Check to see if the custom kind is provided by a plugin (ignore booleans)
-  const pluginComponent = rootState.$plugin.getDynamic(kind, key);
+  const pluginComponent = rootState.$extension.getDynamic(kind, key);
 
   if (typeof pluginComponent !== 'boolean' && !!pluginComponent) {
     cache[key] = true;
@@ -2046,7 +2056,7 @@ function hasCustom(state, rootState, kind, key, fallback) {
 }
 
 function loadExtension(rootState, kind, key, fallback) {
-  const ext = rootState.$plugin.getDynamic(kind, key);
+  const ext = rootState.$extension.getDynamic(kind, key);
 
   if (ext) {
     if (typeof ext === 'function') {

package/types/internal-api/shell/modal.d.ts

@@ -14,7 +14,7 @@ export interface ModalConfig {
    *
    * this.$shell.modal({
    *   component: MyCustomModal,
-   *   componentProps: { title: 'Hello Modal' }
+   *   props: { title: 'Hello Modal' }
    * });
    * ```
    */
@@ -25,10 +25,10 @@ export interface ModalConfig {
    *
    * Example:
    * ```ts
-   * componentProps: { title: 'Hello Modal', isVisible: true }
+   * props: { title: 'Hello Modal', isVisible: true }
    * ```
    */
-  componentProps?: Record<string, any>;
+  props?: Record<string, any>;
 
   /**
    * Optional array of resources that the modal component might need.
@@ -47,11 +47,11 @@ export interface ModalConfig {
    *
    * Examples:
    * ```ts
-   * modalWidth: '800px' // Width in pixels
-   * modalWidth: '75%'   // Width as a percentage
+   * width: '800px' // Width in pixels
+   * width: '75%'   // Width as a percentage
    * ```
    */
-  modalWidth?: string;
+  width?: string;
 
   /**
    * Determines if clicking outside the modal will close it. Defaults to `true`.

package/types/notifications/index.ts

@@ -4,36 +4,102 @@ import { RouteLocationRaw } from 'vue-router';
  * Type definitions for the Notification Center
  */
 
-/**
- * Notification Level for a notification in the Notification Center
- */
 export enum NotificationLevel {
+  /**
+   * An announcement. To be used when we want to inform on high-interest topics - news, updates, changes, scheduled maintenance, etc. E.g. “New version available!” <img class="svg-blue" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-announcement.svg" width="20" />
+   */
   Announcement = 0, // eslint-disable-line no-unused-vars
+  /**
+   * A task that is underway. To be used when we want to inform on a process taking place - on-going actions that might take a while. E.g. “Cluster provisioning in progress”. The progress bar will also be shown if the `progress` field is set <img class="svg-blue" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-busy.svg" width="20" />
+   */
   Task, // eslint-disable-line no-unused-vars
+  /**
+   * Information notification. To be used when we want to inform on low-interest topics. E.g. “Welcome to Rancher v2.8" <img class="svg-blue" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-info.svg"/>
+   */
   Info, // eslint-disable-line no-unused-vars
+  /**
+   * Notification that something has completed successfully. To be used when we want to confirm a successful action was completed. E.g. “Cluster provisioning completed” <img class="svg-green" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-tick.svg"/>
+   */
   Success, // eslint-disable-line no-unused-vars
+  /**
+   * Notification of a warning. To be used when we want to warn about a potential risk. E.g. “Nodes limitation warning” <img class="svg-orange" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-warning.svg"/>
+   */
   Warning, // eslint-disable-line no-unused-vars
+  /**
+   * Notification of an error. To be used when we want to alert on a confirmed risk. E.g. “Extension failed to load” <img class="svg-red" src="https://raw.githubusercontent.com/rancher/icons/refs/heads/master/svg/notify-error.svg"/>
+   */
   Error, // eslint-disable-line no-unused-vars
   Hidden, // eslint-disable-line no-unused-vars
 }
 
 /**
- * An action that is shown as a button in the Notification Center
+ * Notification Action definition
  */
-export type NotificationAction = {
-  label: string; // Button label for the action
-  target?: string; // HREF target when the button is clicked
-  route?: RouteLocationRaw; // Route to navigate to when the button is clicked
-};
+export interface NotificationAction {
+  /**
+   * Button label for the action
+   */
+  label: string;
+  /**
+   * Href target when the button is clicked
+   */
+  target?: string;
+  /**
+   * Vue Route to navigate to when the button is clicked
+   */
+  route?: RouteLocationRaw;
+}
 
 /**
- * Defines the User Preference linked to a notification
+ * Notification Preference definition
  */
-export type NotificationPreference = {
-  key: string; // User preference key to use when setting the preference when the notification is marked as read/unread
-  value: string; // User preference value to use when setting the preference when the notification is marked as read
-  unsetValue?: string; // User preference value to use when setting the preference when the notification is marked as unread - defaults to empty string
-};
+export interface NotificationPreference {
+  /**
+   * User preference key to use when setting the preference when the notification is marked as read
+   */
+  key: string;
+  /**
+   * User preference value to use when setting the preference when the notification is marked as read
+   */
+  value: string;
+  /**
+   * User preference value to use when setting the preference when the notification is marked as unread - defaults to empty string
+   */
+  unsetValue?: string;
+}
+
+/**
+ * Configuration object for the Notification Center
+ *
+ */
+export interface NotificationConfig {
+  /**
+   * - **{@link NotificationAction}**
+   *
+   * Primary action to be shown in the notification
+   */
+  primaryAction?: NotificationAction;
+  /**
+   * - **{@link NotificationAction}**
+   *
+   * Secondary to be shown in the notification
+   */
+  secondaryAction?: NotificationAction;
+  /**
+   * Unique ID for the notification
+   */
+  id?: string;
+  /**
+   * Progress (0-100) for notifications of type `Task`
+   */
+  progress?: number;
+  /**
+   * - **{@link NotificationPreference}**
+   *
+   * User Preference tied to the notification (the preference will be updated when the notification is marked read)
+   */
+  preference?: NotificationPreference;
+}
 
 /**
  * Type for Encrypted Notification data that is stored in local storage
@@ -96,3 +162,48 @@ export interface NotificationHandler {
    */
   onReadUpdated(notification: Notification, read: boolean): void;
 }
+
+/**
+ * API for notifications in the Rancher UI Notification Center
+ * * ![notification Example](/img/notification.png)
+ */
+export interface NotificationApi {
+  /**
+   * Sends a notification to the Rancher UI Notification Center
+   *
+   * Example:
+   * ```ts
+   * import { NotificationLevel } from '@shell/types/notifications';
+   *
+   * this.$shell.notification.send(NotificationLevel.Success, 'Some notification title', 'Hello world! Success!', {})
+   * ```
+   *
+   * For usage with the Composition API check usage guide [here](../../shell-api#using-composition-api-in-vue).
+   *
+   * @param level The `level` specifies the importance of the notification and determines the icon that is shown in the notification
+   * @param title The notification title
+   * @param message The notification message to be displayed
+   * @param config Notifications configuration object
+   *
+   * @returns notification ID
+   *
+   */
+  send(level: NotificationLevel | NotificationLevel, title: string, message?:string, config?: NotificationConfig): Promise<string>;
+
+  /**
+   * Update notification progress (Only valid for notifications of type `Task`)
+   *
+   * Example:
+   * ```ts
+   * this.$shell.notification.updateProgress('some-notification-id', 80)
+   * ```
+   *
+   * For usage with the Composition API check usage guide [here](../../shell-api#using-composition-api-in-vue).
+   *
+   * @param notificationId Unique ID for the notification
+   * @param progress Progress (0-100) for notifications of type `Task`
+   *
+   */
+
+  updateProgress(notificationId: string, progress: number): void;
+}

package/types/rancher/index.d.ts

@@ -8,3 +8,12 @@ declare module '@shell/store/type-map' {
 }
 
 declare module '@shell/plugins/dashboard-store';
+
+declare module '@shell/config/query-params' {
+  export const _DETAIL: string;
+}
+
+declare module '@shell/config/version' {
+  export const CURRENT_RANCHER_VERSION: string;
+  export function getVersionData(): any;
+}

package/types/shell/index.d.ts

@@ -3255,6 +3255,7 @@ export default class Resource {
     get $state(): any;
     get $rootState(): any;
     get $plugin(): any;
+    get $extension(): any;
     get customValidationRules(): any[];
     get _key(): any;
     get schema(): any;
@@ -4048,7 +4049,7 @@ export function filterHiddenLocalCluster(mgmtClusters: any, store: any): any;
 export function abbreviateClusterName(input: string): string;
 export function labelForAddon(store: any, name: any, configuration?: boolean): any;
 export function filterOutDeprecatedPatchVersions(allVersions: any, currentVersion: any): any;
-export function getAllOptionsAfterCurrentVersion(store: any, versions: any, currentVersion: any, defaultVersion: any): any;
+export function getAllOptionsAfterCurrentVersion(store: any, versions: any, currentVersion: any, defaultVersion: any, manual?: boolean): any;
 export function initSchedulingCustomization(value: any, features: any, store: any, mode: any): Promise<{
     clusterAgentDefaultPC: any;
     clusterAgentDefaultPDB: any;
@@ -4796,6 +4797,20 @@ export function queryParamsFor(current: any, qp: any, defaults?: {}): any;
 export function getClusterFromRoute(to: any): any;
 export function getProductFromRoute(to: any): any;
 export function findMeta(route: any, key: any): any;
+/**
+ * Find a route definition given a routeName
+ * @param {*} router VueRouter instance
+ * @param {*} routeName the name we want to look up
+ * @returns the route definition or undefined if it wasn't found
+ */
+export function findRouteDefinitionByName(router: any, routeName: any): any;
+/**
+ * Looks for the route definition and then ensures there's only valid params
+ * @param {*} router VueRouter instance
+ * @param {*} routeRecord an object conforming to the Route Record interface
+ * @returns the passed in routeLocation with only valid params.
+ */
+export function filterLocationValidParams(router: any, routeRecord: any): any;
 export function getPackageFromRoute(route: any): any;
 export function getResourceFromRoute(to: any): any;
 export function routeMatched(to: any, fn: any): boolean;

package/types/vue-shim.d.ts

@@ -1,7 +1,9 @@
 /* eslint-disable */
-import type ShellApi from '@shell/plugins/internal-api/shell/shell.api';
 import { VuexStore } from '@shell/types/store/vuex';
 
+// Include the types for the APIs
+/// <reference path="../apis/vue-shim.d.ts" />
+
 export {};
 
 declare module 'vue' {
@@ -14,7 +16,6 @@ declare module 'vue' {
       (key: string, args?: Record<string, any>, raw?: boolean): string;
       (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
     },
-    $store: VuexStore,
-    $shell: ShellApi,
+    $store: VuexStore
   }
-}
+}

package/utils/__tests__/router.test.js

@@ -0,0 +1,238 @@
+import { findRouteDefinitionByName, filterLocationValidParams } from '@shell/utils/router';
+
+describe('findRouteDefinitionByName', () => {
+  const createMockRouter = (routes) => ({ getRoutes: () => routes });
+
+  it('should find a route by its name', () => {
+    const routes = [
+      { name: 'home', path: '/' },
+      { name: 'about', path: '/about' },
+      { name: 'c-cluster', path: '/c/:cluster' },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'about');
+
+    expect(result).toStrictEqual({ name: 'about', path: '/about' });
+  });
+
+  it('should return the first matching route when name exists', () => {
+    const routes = [
+      { name: 'c-cluster-explorer', path: '/c/:cluster/explorer' },
+      { name: 'c-cluster-apps', path: '/c/:cluster/apps' },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'c-cluster-explorer');
+
+    expect(result).toStrictEqual({ name: 'c-cluster-explorer', path: '/c/:cluster/explorer' });
+  });
+
+  it('should return undefined when route name is not found', () => {
+    const routes = [
+      { name: 'home', path: '/' },
+      { name: 'about', path: '/about' },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'nonexistent');
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return undefined when routes array is empty', () => {
+    const router = createMockRouter([]);
+
+    const result = findRouteDefinitionByName(router, 'any-route');
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should handle routes with additional properties', () => {
+    const routes = [
+      {
+        name:  'c-cluster-product-resource',
+        path:  '/c/:cluster/:product/:resource',
+        meta:  { requiresAuthentication: true },
+        props: true,
+      },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'c-cluster-product-resource');
+
+    expect(result).toStrictEqual(routes[0]);
+  });
+
+  it('should match exact route names only', () => {
+    const routes = [
+      { name: 'c-cluster', path: '/c/:cluster' },
+      { name: 'c-cluster-explorer', path: '/c/:cluster/explorer' },
+    ];
+    const router = createMockRouter(routes);
+
+    const result = findRouteDefinitionByName(router, 'c-cluster');
+
+    expect(result).toStrictEqual({ name: 'c-cluster', path: '/c/:cluster' });
+    expect(result.name).not.toBe('c-cluster-explorer');
+  });
+});
+
+describe('filterLocationValidParams', () => {
+  const createMockRouter = (routes) => ({ getRoutes: () => routes });
+
+  it('should filter out params not in route path', () => {
+    const routes = [
+      { name: 'c-cluster', path: '/c/:cluster' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'c-cluster',
+      params: {
+        cluster: 'local',
+        product: 'explorer',
+      },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.params).toStrictEqual({ cluster: 'local' });
+    expect(result.params.product).toBeUndefined();
+  });
+
+  it('should keep all params when all are valid', () => {
+    const routes = [
+      { name: 'c-cluster-product-resource', path: '/c/:cluster/:product/:resource' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'c-cluster-product-resource',
+      params: {
+        cluster:  'local',
+        product:  'explorer',
+        resource: 'pods',
+      },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.params).toStrictEqual({
+      cluster:  'local',
+      product:  'explorer',
+      resource: 'pods',
+    });
+  });
+
+  it('should preserve other properties on routeRecord', () => {
+    const routes = [
+      { name: 'c-cluster', path: '/c/:cluster' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'c-cluster',
+      params: { cluster: 'local' },
+      query:  { mode: 'edit' },
+      hash:   '#section',
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.query).toStrictEqual({ mode: 'edit' });
+    expect(result.hash).toBe('#section');
+    expect(result.name).toBe('c-cluster');
+  });
+
+  it('should return routeRecord unchanged when routeRecord is null', () => {
+    const router = createMockRouter([]);
+
+    const result = filterLocationValidParams(router, null);
+
+    expect(result).toBeNull();
+  });
+
+  it('should return routeRecord unchanged when routeRecord is undefined', () => {
+    const router = createMockRouter([]);
+
+    const result = filterLocationValidParams(router, undefined);
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return routeRecord unchanged when name is missing', () => {
+    const router = createMockRouter([]);
+    const routeRecord = { params: { cluster: 'local' } };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result).toStrictEqual(routeRecord);
+  });
+
+  it('should return routeRecord unchanged when params is missing', () => {
+    const router = createMockRouter([]);
+    const routeRecord = { name: 'c-cluster' };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result).toStrictEqual(routeRecord);
+  });
+
+  it('should return routeRecord unchanged when route definition is not found', () => {
+    const routes = [
+      { name: 'home', path: '/' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'nonexistent-route',
+      params: { cluster: 'local' },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result).toStrictEqual(routeRecord);
+  });
+
+  it('should return empty params when no params are valid', () => {
+    const routes = [
+      { name: 'home', path: '/' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'home',
+      params: {
+        cluster: 'local',
+        product: 'explorer',
+      },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.params).toStrictEqual({});
+  });
+
+  it('should handle optional params in path', () => {
+    const routes = [
+      { name: 'c-cluster-product-resource-id', path: '/c/:cluster/:product/:resource/:id?' },
+    ];
+    const router = createMockRouter(routes);
+    const routeRecord = {
+      name:   'c-cluster-product-resource-id',
+      params: {
+        cluster:  'local',
+        product:  'explorer',
+        resource: 'pods',
+        id:       'my-pod',
+        extra:    'should-be-removed',
+      },
+    };
+
+    const result = filterLocationValidParams(router, routeRecord);
+
+    expect(result.params).toStrictEqual({
+      cluster:  'local',
+      product:  'explorer',
+      resource: 'pods',
+      id:       'my-pod',
+    });
+    expect(result.params.extra).toBeUndefined();
+  });
+});

package/utils/cluster.js

@@ -242,7 +242,7 @@ export function filterOutDeprecatedPatchVersions(allVersions, currentVersion) {
   return filteredVersions;
 }
 
-export function getAllOptionsAfterCurrentVersion(store, versions, currentVersion, defaultVersion) {
+export function getAllOptionsAfterCurrentVersion(store, versions, currentVersion, defaultVersion, manual = false) {
   const out = (versions || []).filter((obj) => !!obj.serverArgs).map((obj) => {
     let disabled = false;
     let experimental = false;
@@ -260,6 +260,9 @@ export function getAllOptionsAfterCurrentVersion(store, versions, currentVersion
 
     if (isCurrentVersion) {
       label = `${ label } ${ store.getters['i18n/t']('cluster.kubernetesVersion.current') }`;
+      if (manual) {
+        label = `${ label } ${ store.getters['i18n/t']('cluster.kubernetesVersion.manual') }`;
+      }
     }
 
     if (experimental) {

package/utils/fleet.ts

@@ -184,7 +184,7 @@ class Fleet {
   }
 
   detailLocation(r: Resource, mgmtClusterName: string): any {
-    return mapStateToEnum(r.state) === STATES_ENUM.MISSING ? undefined : {
+    const location = mapStateToEnum(r.state) === STATES_ENUM.MISSING ? undefined : {
       name:   `c-cluster-product-resource${ r.namespace ? '-namespace' : '' }-id`,
       params: {
         product:   EXPLORER_NAME,
@@ -194,6 +194,13 @@ class Fleet {
         id:        r.name,
       },
     };
+
+    // Having an undefined param can yield a console warning like [Vue Router warn]: Discarded invalid param(s) "namespace" when navigating
+    if (location && !location.params.namespace) {
+      delete location.params.namespace;
+    }
+
+    return location;
   }
 
   /**

package/utils/pagination-utils.ts

@@ -165,7 +165,7 @@ class PaginationUtils {
   /**
    * Is pagination enabled at a global level or for a specific resource
    */
-  isEnabled({ rootGetters, $plugin }: any, enabledFor: PaginationResourceContext) {
+  isEnabled({ rootGetters, $extension }: any, enabledFor: PaginationResourceContext) {
     // Cache must be enabled to support pagination api
     if (!this.isSteveCacheEnabled({ rootGetters })) {
       return false;
@@ -184,7 +184,7 @@ class PaginationUtils {
     }
 
     // Does an extension say this type is enabled?
-    const plugin = $plugin as ExtensionManager;
+    const plugin = $extension as ExtensionManager;
     const paginationExtensionPoints = plugin.getAll()[EXT_IDS.SERVER_SIDE_PAGINATION_RESOURCES];
 
     if (paginationExtensionPoints) {

package/utils/pagination-wrapper.ts

@@ -69,7 +69,7 @@ class PaginationWrapper<T extends object> {
     this.classify = formatResponse?.classify || false;
     this.reactive = formatResponse?.reactive || false;
 
-    this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters, $plugin: this.$store.$plugin }, enabledFor);
+    this.isEnabled = paginationUtils.isEnabled({ rootGetters: $store.getters, $extension: this.$store.$extension }, enabledFor);
   }
 
   async request({ pagination, forceWatch }: {