@rancher/shell 3.0.12-rc.5 → 3.0.12-rc.6

package/core/plugin-products-top-level.ts

@@ -1,28 +1,32 @@
 import { IExtension } from '@shell/core/types';
-import { ProductChild, ProductMetadata, ProductSinglePage } from '@shell/core/plugin-types';
 import EmptyProductPage from '@shell/components/EmptyProductPage.vue';
 import pluginProductsHelpers from '@shell/core/plugin-products-helpers';
 import { BasePluginProduct } from '@shell/core/plugin-products-base';
 import { isProductSinglePage } from '@shell/core/plugin-products-type-guards';
+import { ProductChild, ProductMetadata, ProductMetadataSinglePage } from '@shell/core/plugin-products-external';
 
 /**
  * Represents a new top-level product being added by an extension
  * @internal
  */
 export class TopLevelPluginProduct extends BasePluginProduct {
+  protected product?: ProductMetadata | ProductMetadataSinglePage;
+
   get isNewProduct(): boolean {
     return true;
   }
 
-  constructor(plugin: IExtension, product: ProductMetadata | ProductSinglePage | string, config: ProductChild[]) {
-    super(config);
+  constructor(plugin: IExtension, product: ProductMetadata | ProductMetadataSinglePage | string, pages: ProductChild[]) {
+    super(pages);
 
     // Convenience/bridge method: create a basic product from just a name string
     if (typeof product === 'string') {
-      product = {
+      const emptyProduct: ProductMetadata = {
         name:  product,
         label: product,
       };
+
+      product = emptyProduct;
     }
 
     let prodName = product.name;
@@ -45,8 +49,9 @@ export class TopLevelPluginProduct extends BasePluginProduct {
 
     // If the product has a `component` field, then this is a single page product
     if (isProductSinglePage(product)) {
+      const productSinglePage: ProductMetadataSinglePage = product as ProductMetadataSinglePage;
       // Add the route to vue-router (here we go with the 'plain' layout for simple single page products)
-      const route = pluginProductsHelpers.generateTopLevelExtensionSimpleBaseRoute(this.name, { component: product.component });
+      const route = pluginProductsHelpers.generateTopLevelExtensionSimpleBaseRoute(this.name, { component: productSinglePage.component });
 
       plugin.addRoute('plain', route);
     } else if (this.config.length === 0) {

package/core/plugin-products-type-guards.ts

@@ -1,19 +1,30 @@
-import {
-  ProductChild, ProductChildGroup, ProductMetadata,
-  ProductSinglePage, ProductChildCustomPage, ProductChildResourcePage
-} from '@shell/core/plugin-types';
 
 /**
  * Type guard functions for discriminating union types
  * @internal
  */
 
-export function isProductSinglePage(product: ProductMetadata | ProductSinglePage): product is ProductSinglePage {
+import {
+  ProductChild, ProductChildCustomPage, ProductChildGroup, ProductChildResourcePage, ProductMetadata, ProductMetadataSinglePage
+} from '@shell/core/plugin-products-external';
+import { ProductMetadataInternal } from '@shell/core/plugin-products-internal';
+
+export function isProductConfigInternal(product: ProductMetadata | ProductMetadataSinglePage): product is ProductMetadataInternal {
+  const props = ['category', 'version'];
+
+  return props.some((prop) => prop in product);
+}
+
+export function isProductSinglePage(product: ProductMetadata | ProductMetadataSinglePage): product is ProductMetadataSinglePage {
   return 'component' in product && product.component !== undefined;
 }
 
+export function isProductAdd(product: ProductMetadata | ProductMetadataSinglePage): product is ProductMetadata {
+  return !('component' in product && product.component !== undefined);
+}
+
 export function isProductChildGroup(child: ProductChild): child is ProductChildGroup {
-  return 'children' in child;
+  return child.sideMenu !== undefined && 'children' in child.sideMenu;
 }
 
 export function isProductChildWithComponent(child: ProductChild): child is ProductChildCustomPage {

package/core/plugin-products.ts

@@ -1,11 +1,9 @@
 import { IExtension } from '@shell/core/types';
-import {
-  StandardProductName, ProductChild,
-  ProductMetadata, ProductSinglePage,
-} from '@shell/core/plugin-types';
 import { BasePluginProduct } from '@shell/core/plugin-products-base';
 import { TopLevelPluginProduct } from '@shell/core/plugin-products-top-level';
 import { ExtendingPluginProduct } from '@shell/core/plugin-products-extending';
+import { ProductChild, ProductMetadata, ProductMetadataSinglePage, StandardProductName } from '@shell/core/plugin-products-external';
+import { ProductFunction } from '@shell/core/plugin';
 
 /**
  * Factory class for creating plugin products
@@ -15,13 +13,13 @@ import { ExtendingPluginProduct } from '@shell/core/plugin-products-extending';
 export class PluginProduct {
   private instance: BasePluginProduct;
 
-  constructor(plugin: IExtension, product: StandardProductName | string | ProductMetadata | ProductSinglePage, config: ProductChild[]) {
+  constructor(plugin: IExtension, product: StandardProductName | string | ProductMetadata | ProductMetadataSinglePage | ProductFunction, pages: ProductChild[]) {
     if (typeof product === 'object' && product.name) {
       // This is a new product being added
-      this.instance = new TopLevelPluginProduct(plugin, product, config);
+      this.instance = new TopLevelPluginProduct(plugin, product, pages);
     } else if (typeof product === 'string') {
       // This is extending an existing standard product
-      this.instance = new ExtendingPluginProduct(plugin, product, config);
+      this.instance = new ExtendingPluginProduct(plugin, product, pages);
     } else {
       // at this point we may not know the product name
       throw new Error('Extensions product registration error ::: Invalid product');

package/core/plugin-types.ts

@@ -1,12 +1,4 @@
-import type { RouteComponent, RouteRecordRaw } from 'vue-router';
-import type { PluginRouteRecordRaw } from './types';
-import { NAME as EXPLORER_PROD_NAME } from '@shell/config/product/explorer.js';
-import { NAME as CLUSTER_MAN_PROD_NAME } from '@shell/config/product/manager.js';
-import { NAME as SETTINGS_PROD_NAME } from '@shell/config/product/settings.js';
-import { NAME as AUTH_PROD_NAME } from '@shell/config/product/auth.js';
-import { ProductOptions, HeaderOptions, PaginationHeaderOptions } from '@shell/core/types';
-
-type Async<T> = () => Promise<T>;
+import { RouteRecordRaw } from 'vue-router';
 
 export type RouteRecordRawWithParams = Omit<RouteRecordRaw, 'redirect' | 'children' | 'path'> & {
   /** Path for route - can include dynamic segments like ':id'. Based on vue-router routes */
@@ -18,383 +10,3 @@ export type RouteRecordRawWithParams = Omit<RouteRecordRaw, 'redirect' | 'childr
   /** Optional redirect */
   redirect?: RouteRecordRaw['redirect'];
 };
-
-/**
- * Product registration route generation options
- */
-export type ProductRegistrationRouteGenerationOptions = {
-  /**
-   * Whether to generate the route for an existing product - extending a product - or a new top level product
-   */
-  extendProduct? : boolean;
-  /**
-   * Component to be used for the route (used in virtualType and configureType routes)
-   */
-  component?: any;
-  /**
-   * Generated route should omit the path property
-   */
-  omitPath?: boolean;
-  /**
-   * @internal
-   * Whether the route should start with the product name or not (e.g. "my-product/c/:cluster/:resource" vs "c/:cluster/my-product/:resource")
-   * only to be used in very special usecases (internal use only - check FLEET product config for an example)
-   * */
-  startRouteWithProduct?: boolean;
-}
-
-/**
- * Represents the allowed extensible products in Rancher Dashboard
- */
-export const StandardProductNames = {
-  EXPLORER: EXPLORER_PROD_NAME,
-  MANAGER:  CLUSTER_MAN_PROD_NAME,
-  SETTINGS: SETTINGS_PROD_NAME,
-  AUTH:     AUTH_PROD_NAME,
-} as const;
-
-/**
- * Type representing a standard product name value
- */
-export type StandardProductName = (typeof StandardProductNames)[keyof typeof StandardProductNames];
-
-/**
- * Represents allowed configuration for a child page
- */
-export type ProductChildMetadata = {
-  /** Product name/unique identifier for the product */
-  name: string;
-  /** Ordering weight for the among its siblings, if applicable */
-  weight?: number;
-} & (
-  /** Human-readable label for the child page
-   * Either label or labelKey are required */
-  { label: string; labelKey?: string }
-  /** Translation key for the label of the child page
-   * Either label or labelKey are required */
-  | { labelKey: string; label?: string }
-);
-
-/**
- * Represents the allowed configuration for a custom page (virtualType)
- */
-export type CustomPageConfiguration = {
-  /** Display only if condition is met (relates to IF_HAVE in shell/store/type-map) */
-  ifHave?: boolean;
-  /** Display only if feature is present (relates to shell/store/features) */
-  ifFeature?: string;
-  /** Display only if resource type exists */
-  ifHaveType?: string;
-  /** Used in conjunction with "ifHaveType", display only if resource type allows this verb (GET, POST, PUT, DELETE) */
-  ifHaveVerb?: string;
-  /**
-   * @internal
-   * Display label for the custom page
-   */
-  label?: string;
-  /**
-   * @internal
-   * Translation key for the label
-   * */
-  labelKey?: string;
-  /**
-   * @internal
-   * Name of the page (unique identifier)
-   */
-  name?: string;
-  /**
-   * @internal
-   * Entry route definition for this custom page
-   */
-  route?: RouteRecordRawWithParams | PluginRouteRecordRaw | Object;
-  /**
-   * @internal
-   * Icon for the custom page (relates to icons in https://github.com/rancher/icons)
-   */
-  icon?: 'compass';
-  /** Whether this custom page is namespaced or not */
-  namespaced?: boolean;
-  /**
-   * @internal
-   * Ordering weight for the custom page
-   */
-  weight?: number;
-  /** Whether this custom page is exact match */
-  exact?: boolean;
-  /**
-   * @internal
-   * Whether this custom page will act as an overview page
-   * */
-  overview?: boolean;
-  /** Whether this custom page has an exact path match */
-  'exact-path'?: boolean;
-}
-
-/**
- * Represents the allowed configuration for a resource page (configureType)
- */
-export type ResourcePageConfiguration = {
-  /**
-   * @internal
-   * Entry route definition for this custom page
-   */
-  /** Override for the name displayed */
-  displayName?: string;
-  /** Override for the create button string on a list view */
-  listCreateButtonLabelKey?: string;
-  /** If false, disable create even if schema says it's allowed */
-  isCreatable?: boolean;
-  /** If false, disable for edit */
-  isEditable?: boolean;
-  /** If false, disable for remove/delete */
-  isRemovable?: boolean;
-  /** If false, hide state in columns and masthead */
-  showState?: boolean;
-  /** If false, hide age in columns and masthead */
-  showAge?: boolean;
-  /** If false, hide masthead config button in view mode */
-  showConfigView?: boolean;
-  /** If false, hide masthead in list view */
-  showListMasthead?: boolean;
-  /** If false, cannot edit or show yaml */
-  canYaml?: boolean;
-  /** Show the Masthead in the edit resource component */
-  resourceEditMasthead?: boolean;
-  /**
-   * @internal
-   * Entry route definition for this resource page
-   */
-  customRoute?: RouteRecordRawWithParams;
-  /** Hide this type from the nav/search bar on downstream clusters (will only show in "local" cluster) */
-  localOnly?: boolean;
-  /** Whether this custom page is namespaced or not */
-  namespaced?: boolean;
-  /**
-   * @internal
-   * Whether this custom page has list groups (definition for grouping items in the list view)
-   */
-  listGroups?: {
-    /** Icon for the group (relates to icons in rancher-icons */
-    icon?: string;
-    /** Value for the group (used for grouping items in the list view) */
-    value?: string;
-    /** Field for the group (used for grouping items in the list view) */
-    field?: string;
-    /** Column to hide when this group is active */
-    hideColumn?: string;
-    /** Tooltip key for the group */
-    tooltipKey?: string;
-  }[];
-  /**
-   * @internal
-   * Whether the provided list groups will override the default grouping options (e.g. group by namespace, group by cluster, etc.) or be added to them
-   */
-  listGroupsWillOverride?: boolean;
-  /**
-   * @internal
-   * Use this to configure subtypes that should be shown in the list view for this type (e.g. show "pods" and "deployments" in the list view for "workloads")
-   */
-  subTypes?: string[];
-  // resource: undefined; // Use this resource in ResourceDetails instead
-  // resourceDetail: undefined; // Use this resource specifically for ResourceDetail's detail component
-  // resourceEdit: undefined; // Use this resource specifically for ResourceDetail's edit component
-  // depaginate: undefined; // Use this to depaginate requests for this type
-  // notFilterNamespace: undefined; // Define namespaces that do not need to be filtered
-  // used in configureType options, to be typed later if needed
-}
-
-/**
- * Represents a Vue component or an async function that resolves to a Vue component, used for route components in product configuration
- */
-export type VueRouteComponent = RouteComponent | Async<RouteComponent>;
-
-/**
- * Metadata for route generation to a product overview page
- */
-export type OverviewPageRoutingMetadata = {
-  /** Name of the overview page */
-  name: string;
-  /** Component to render for the overview page */
-  component: VueRouteComponent;
-}
-
-/**
- * Represents a resource page with a type (K8s resource)
- */
-export type ProductChildResourcePage = {
-  /** K8s resource type name for a resource page */
-  type: string;
-  /** Optional configuration for the resource page */
-  config?: ResourcePageConfiguration;
-  /** Ordering weight for this page among its siblings */
-  weight?: number;
-  /** Use this to override the resource name used in the list view for this type */
-  overrideListResourceName?: string;
-  /** Whether to hide this resource from the side-menu entirely */
-  hideFromNav?: boolean;
-  /** Whether to hide bulk actions for this resource */
-  hideBulkActions?: boolean;
-  /** Table headers for this resource type (client-side pagination) */
-  headers?: HeaderOptions[];
-  /** Table headers for this resource type (server-side pagination) */
-  sspHeaders?: PaginationHeaderOptions[];
-};
-
-/**
- * Represents a custom page with a component
- */
-export type ProductChildCustomPage = ProductChildMetadata & {
-  /** Component to render for this custom page */
-  component: VueRouteComponent;
-  /** Optional configuration for the page */
-  config?: CustomPageConfiguration;
-};
-
-/**
- * Represents a page item (custom page or resource page) in a product's config
- * - For custom pages: use `component` with `name` and `label`/`labelKey`
- * - For resource pages: use `type` with optional `config` and `headers`
- */
-export type ProductChildPage = ProductChildCustomPage | ProductChildResourcePage;
-
-/**
- * Represents a product child in the navigation
- * This can be a type, a group, or a route.
- */
-export type ProductChild = ProductChildGroup | ProductChildPage; // eslint-disable-line no-use-before-define
-
-/**
- * Represents a group of child pages in a product configuration
- */
-export type ProductChildGroup = ProductChildMetadata & {
-  component?: VueRouteComponent;
-  children: ProductChild[];
-  /** Default child to navigate to */
-  default?: string;
-};
-
-/**
- * Represents the allowed configuration for a product
- */
-export type ProductMetadata = Omit<ProductOptions, 'name' | 'label' | 'labelKey' | 'category' | 'to' | 'version' | 'inStore'> & {
-  /**
-   * Product name (unique identifier)
-   */
-  name: string;
-  /**
-   * @internal
-   * Use `renameGroups` on the product metadata to remap group display names in the side-menu. Each entry matches a group's internal ID (via string or regex) and replaces its display label with a new name. This only changes how the group is labelled in the UI — it does not move resources between groups.
-   *
-   * The `groupSelector` is evaluated against group internal IDs. It can be an exact string or a `RegExp` pattern. The `newName` value is the new display name.
-   *
-   * const product: ProductMetadata = {
-   *   name:  'my-app',
-   *   label: 'My App',
-   *   renameGroups: [
-   *     // Rename a group with an ugly internal ID to a friendlier display name
-   *     { groupSelector: 'cert-manager.io', newName: 'Certificates' },
-   *     // Use a regex to rename all groups matching a pattern
-   *     { groupSelector: /^networking\./, newName: 'Networking' },
-   *   ],
-   * };
-   */
-  renameGroups?: {
-    /** String or regex to match against group internal IDs */
-    groupSelector: RegExp | string;
-    /** Display name to use for matching groups */
-    newName: string;
-  }[];
-  /**
-   * @internal
-   *
-   * Use `moveToGroup` on the product metadata to move pages (resource types or custom pages) into specific side-menu groups. This is useful when a page should appear inside a group but isn't defined as a child of that group in the config.
-   * Each entry identifies a page by its `entryId` — the resource `type` string or the custom page `name` — and moves it into the specified group. Use the group's `name` as you defined it in your config.
-   *
-   * const monitoringGroup: ProductChildGroup = {
-   *   name:     'monitoring',
-   *   label:    'Monitoring',
-   *   children: [
-   *    { name: 'alerts', label: 'Alerts', component: () => import('./pages/Alerts.vue') },
-   *   ],
-   * };
-
-   * const dashboardPage: ProductChildCustomPage = {
-   *   name: 'dashboard', label: 'Dashboard', component: () => import('./pages/Dashboard.vue'),
-   * };
-
-   * const product: ProductMetadata = {
-   *   name:        'my-app',
-   *   label:       'My App',
-   *   moveToGroup: [
-   *    // Move the 'pod' resource type into the 'monitoring' group
-   *    { entryId: 'pod', groupName: 'monitoring' },
-   *    // Move a custom page into the 'monitoring' group
-   *    { entryId: 'dashboard', groupName: 'monitoring' },
-   *   ],
-   * };
-   *
-   * extension.addProduct(product, [monitoringGroup, { type: 'pod' }, dashboardPage]);
-   *
-   * Note: The `entryId` must match a page declared in the same product config — either a resource page's `type` or a custom page's `name`. The target `groupName` must be a `ProductChildGroup` defined in the same config. If either is not found, an error is thrown at registration time listing the available options. Only exact string identifiers are supported (no regex).
-   *
-   * The optional `weight` parameter controls precedence when multiple `moveToGroup` rules target the same page (default: `5`). Higher weight takes precedence.
-  */
-  moveToGroup?: {
-    /** Page identifier — the resource `type` string or the custom page `name` */
-    entryId: string;
-    /** Target group name as defined in your group config (`name` property) */
-    groupName: string;
-    /** Ordering weight for the mapping (default: 5). Higher weight takes precedence when multiple rules match */
-    weight?: number;
-  }[];
-  /**
-   * @internal
-   *
-   * maps to DSL ignoreGroup
-   *
-   * Use `ignoreGroups` on the product metadata to hide specific side-menu groups. Each entry specifies a `groupSelector` to match group names — either an exact string or a regex pattern.
-   *
-   * The `condition` callback is optional. When provided, it receives the store getters and returns `true` to hide the group (conditional hide). When omitted, the group is always hidden (unconditional hide).
-   *
-   * Example usage:
-   * const product: ProductMetadata = {
-   *   name:  'my-app',
-   *   label: 'My App',
-   *   ignoreGroups: [
-   *     // Always hide the "internal" group (unconditional — no condition)
-   *     { groupSelector: 'internal' },
-   *     // Hide all groups matching a regex pattern (unconditional)
-   *     { groupSelector: /^deprecated/ },
-   *     // Conditionally hide based on a feature flag
-   *     {
-   *       groupSelector: 'experimental',
-   *       condition:     (getters) => !getters['features/isEnabled']('experimental-feature'),
-   *     },
-   *   ],
-   * };
-   *
-   *
-   * In this example, the "internal" group is always hidden, any group with a name starting with "deprecated-" is hidden, and the "experimental" group is hidden unless the "experimental-feature" flag is enabled in the store.
-   */
-  ignoreGroups?: {
-    /** String or regex to match against group names */
-    groupSelector: string | RegExp;
-    /** Optional conditional function that accepts the root Dashboard Vuex store getters and returns true if the group should be ignored */
-    condition?: (getters: any) => boolean }[];
-} & (
-  /** Human-readable label for the product
-   * Either label or labelKey are required */
-  | { label: string; labelKey?: string }
-  /** Translation key for the label of the product
-   * Either label or labelKey are required */
-  | { labelKey: string; label?: string }
-);
-
-/**
- * Represents a single page product, which is a product that only has one page and
- * therefore does not need to be represented in the navigation as a group with children.
- */
-export type ProductSinglePage = ProductMetadata & {
-  /** Component to render for this product (single page product) */
-  component: VueRouteComponent;
-};

package/core/plugin.ts

@@ -21,18 +21,17 @@ import {
   ServerSidePaginationExtensionConfig,
   TableAction,
 } from './types';
-import {
-  ProductMetadata,
-  ProductSinglePage,
-  ProductChild,
-  StandardProductName,
-  RouteRecordRawWithParams
-} from './plugin-types';
+import { RouteRecordRawWithParams } from './plugin-types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import { defineAsyncComponent, markRaw, Component } from 'vue';
 import { getVersionData, CURRENT_RANCHER_VERSION } from '@shell/config/version';
 import { ExtensionManagerTypes } from '@shell/types/extension-manager';
 import { PluginProduct } from './plugin-products';
+import {
+  ProductMetadata, ProductMetadataSinglePage,
+  StandardProductName,
+  ProductChild
+} from '@shell/core/plugin-products-external';
 
 /** Registration IDs used for different extension points in the extensions catalog */
 export const EXT_IDS = {
@@ -137,16 +136,16 @@ export class Plugin implements IPlugin {
     return storeDSL;
   }
 
-  addProduct(product: ProductFunction | ProductMetadata | ProductSinglePage | string, config?: ProductChild[]): void {
+  addProduct(product: ProductFunction | ProductMetadata | ProductMetadataSinglePage | string, pages?: ProductChild[]): void {
     let pluginProduct: PluginProduct;
 
     if (typeof product === 'string') {
       pluginProduct = PluginProduct.fromName(this, product);
     } else if (product?.name) {
-      if (!config) {
-        pluginProduct = new PluginProduct(this, product as ProductSinglePage, []);
+      if (!pages) {
+        pluginProduct = new PluginProduct(this, product, []);
       } else {
-        pluginProduct = new PluginProduct(this, product as ProductMetadata, config);
+        pluginProduct = new PluginProduct(this, product, pages);
       }
     } else {
       this.products.push(product as ProductFunction);