CONSOLE-4862: Create extension point for plugins to add items to catalog toolbars

This change introduces a new dynamic plugin extension point that allows plugins to contribute custom UI components to catalog toolbars. Plugins can target specific catalogs and catalog item types, or provide toolbar items that appear across all catalogs.

Extension definition:
- New console.catalog/toolbar-item extension type
- Properties support optional catalogId and type filters
- Components render as FlexItems in the catalog toolbar

Implementation:
- Extension type and type guard in catalog.ts
- Hook to resolve and filter toolbar extensions by catalogId and type
- CatalogToolbar component renders toolbar extension components
- Comprehensive test coverage for extension filtering logic

This enables plugins like operator-lifecycle-manager-v1 to add custom controls (toggles, filters, etc.) directly into catalog interfaces without modifying core catalog code.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: TheRealJon

frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md

@@ -11,75 +11,76 @@
 9.  [console.catalog/item-provider](#consolecatalogitem-provider)
 10.  [console.catalog/item-type](#consolecatalogitem-type)
 11.  [console.catalog/item-type-metadata](#consolecatalogitem-type-metadata)
-12.  [console.cluster-overview/inventory-item](#consolecluster-overviewinventory-item)
-13.  [console.cluster-overview/multiline-utilization-item](#consolecluster-overviewmultiline-utilization-item)
-14.  [console.cluster-overview/utilization-item](#consolecluster-overviewutilization-item)
-15.  [console.context-provider](#consolecontext-provider)
-16.  [console.create-project-modal](#consolecreate-project-modal)
-17.  [console.dashboards/card](#consoledashboardscard)
-18.  [console.dashboards/custom/overview/detail/item](#consoledashboardscustomoverviewdetailitem)
-19.  [console.dashboards/overview/activity/resource](#consoledashboardsoverviewactivityresource)
-20.  [console.dashboards/overview/health/operator](#consoledashboardsoverviewhealthoperator)
-21.  [console.dashboards/overview/health/prometheus](#consoledashboardsoverviewhealthprometheus)
-22.  [console.dashboards/overview/health/resource](#consoledashboardsoverviewhealthresource)
-23.  [console.dashboards/overview/health/url](#consoledashboardsoverviewhealthurl)
-24.  [console.dashboards/overview/inventory/item](#consoledashboardsoverviewinventoryitem)
-25.  [console.dashboards/overview/inventory/item/group](#consoledashboardsoverviewinventoryitemgroup)
-26.  [console.dashboards/overview/inventory/item/replacement](#consoledashboardsoverviewinventoryitemreplacement)
-27.  [console.dashboards/overview/prometheus/activity/resource](#consoledashboardsoverviewprometheusactivityresource)
-28.  [console.dashboards/project/overview/item](#consoledashboardsprojectoverviewitem)
-29.  [console.dashboards/tab](#consoledashboardstab)
-30.  [console.file-upload](#consolefile-upload)
-31.  [console.flag](#consoleflag)
-32.  [console.flag/hookProvider](#consoleflaghookProvider)
-33.  [console.flag/model](#consoleflagmodel)
-34.  [console.global-config](#consoleglobal-config)
-35.  [console.model-metadata](#consolemodel-metadata)
-36.  [console.navigation/href](#consolenavigationhref)
-37.  [console.navigation/resource-cluster](#consolenavigationresource-cluster)
-38.  [console.navigation/resource-ns](#consolenavigationresource-ns)
-39.  [console.navigation/section](#consolenavigationsection)
-40.  [console.navigation/separator](#consolenavigationseparator)
-41.  [console.page/resource/details](#consolepageresourcedetails)
-42.  [console.page/resource/list](#consolepageresourcelist)
-43.  [console.page/route](#consolepageroute)
-44.  [console.page/route/standalone](#consolepageroutestandalone)
-45.  [console.perspective](#consoleperspective)
-46.  [console.project-overview/inventory-item](#consoleproject-overviewinventory-item)
-47.  [console.project-overview/utilization-item](#consoleproject-overviewutilization-item)
-48.  [console.pvc/alert](#consolepvcalert)
-49.  [console.pvc/create-prop](#consolepvccreate-prop)
-50.  [console.pvc/delete](#consolepvcdelete)
-51.  [console.pvc/status](#consolepvcstatus)
-52.  [console.redux-reducer](#consoleredux-reducer)
-53.  [console.resource/create](#consoleresourcecreate)
-54.  [console.resource/details-item](#consoleresourcedetails-item)
-55.  [console.storage-class/provisioner](#consolestorage-classprovisioner)
-56.  [console.storage-provider](#consolestorage-provider)
-57.  [console.tab](#consoletab)
-58.  [console.tab/horizontalNav](#consoletabhorizontalNav)
-59.  [console.telemetry/listener](#consoletelemetrylistener)
-60.  [console.topology/adapter/build](#consoletopologyadapterbuild)
-61.  [console.topology/adapter/network](#consoletopologyadapternetwork)
-62.  [console.topology/adapter/pod](#consoletopologyadapterpod)
-63.  [console.topology/component/factory](#consoletopologycomponentfactory)
-64.  [console.topology/create/connector](#consoletopologycreateconnector)
-65.  [console.topology/data/factory](#consoletopologydatafactory)
-66.  [console.topology/decorator/provider](#consoletopologydecoratorprovider)
-67.  [console.topology/details/resource-alert](#consoletopologydetailsresource-alert)
-68.  [console.topology/details/resource-link](#consoletopologydetailsresource-link)
-69.  [console.topology/details/tab](#consoletopologydetailstab)
-70.  [console.topology/details/tab-section](#consoletopologydetailstab-section)
-71.  [console.topology/display/filters](#consoletopologydisplayfilters)
-72.  [console.topology/relationship/provider](#consoletopologyrelationshipprovider)
-73.  [console.user-preference/group](#consoleuser-preferencegroup)
-74.  [console.user-preference/item](#consoleuser-preferenceitem)
-75.  [console.yaml-template](#consoleyaml-template)
-76.  [dev-console.add/action](#dev-consoleaddaction)
-77.  [dev-console.add/action-group](#dev-consoleaddaction-group)
-78.  [dev-console.import/environment](#dev-consoleimportenvironment)
-79. [DEPRECATED] [console.dashboards/overview/detail/item](#consoledashboardsoverviewdetailitem)
-80. [DEPRECATED] [console.page/resource/tab](#consolepageresourcetab)
+12.  [console.catalog/toolbar-item](#consolecatalogtoolbar-item)
+13.  [console.cluster-overview/inventory-item](#consolecluster-overviewinventory-item)
+14.  [console.cluster-overview/multiline-utilization-item](#consolecluster-overviewmultiline-utilization-item)
+15.  [console.cluster-overview/utilization-item](#consolecluster-overviewutilization-item)
+16.  [console.context-provider](#consolecontext-provider)
+17.  [console.create-project-modal](#consolecreate-project-modal)
+18.  [console.dashboards/card](#consoledashboardscard)
+19.  [console.dashboards/custom/overview/detail/item](#consoledashboardscustomoverviewdetailitem)
+20.  [console.dashboards/overview/activity/resource](#consoledashboardsoverviewactivityresource)
+21.  [console.dashboards/overview/health/operator](#consoledashboardsoverviewhealthoperator)
+22.  [console.dashboards/overview/health/prometheus](#consoledashboardsoverviewhealthprometheus)
+23.  [console.dashboards/overview/health/resource](#consoledashboardsoverviewhealthresource)
+24.  [console.dashboards/overview/health/url](#consoledashboardsoverviewhealthurl)
+25.  [console.dashboards/overview/inventory/item](#consoledashboardsoverviewinventoryitem)
+26.  [console.dashboards/overview/inventory/item/group](#consoledashboardsoverviewinventoryitemgroup)
+27.  [console.dashboards/overview/inventory/item/replacement](#consoledashboardsoverviewinventoryitemreplacement)
+28.  [console.dashboards/overview/prometheus/activity/resource](#consoledashboardsoverviewprometheusactivityresource)
+29.  [console.dashboards/project/overview/item](#consoledashboardsprojectoverviewitem)
+30.  [console.dashboards/tab](#consoledashboardstab)
+31.  [console.file-upload](#consolefile-upload)
+32.  [console.flag](#consoleflag)
+33.  [console.flag/hookProvider](#consoleflaghookProvider)
+34.  [console.flag/model](#consoleflagmodel)
+35.  [console.global-config](#consoleglobal-config)
+36.  [console.model-metadata](#consolemodel-metadata)
+37.  [console.navigation/href](#consolenavigationhref)
+38.  [console.navigation/resource-cluster](#consolenavigationresource-cluster)
+39.  [console.navigation/resource-ns](#consolenavigationresource-ns)
+40.  [console.navigation/section](#consolenavigationsection)
+41.  [console.navigation/separator](#consolenavigationseparator)
+42.  [console.page/resource/details](#consolepageresourcedetails)
+43.  [console.page/resource/list](#consolepageresourcelist)
+44.  [console.page/route](#consolepageroute)
+45.  [console.page/route/standalone](#consolepageroutestandalone)
+46.  [console.perspective](#consoleperspective)
+47.  [console.project-overview/inventory-item](#consoleproject-overviewinventory-item)
+48.  [console.project-overview/utilization-item](#consoleproject-overviewutilization-item)
+49.  [console.pvc/alert](#consolepvcalert)
+50.  [console.pvc/create-prop](#consolepvccreate-prop)
+51.  [console.pvc/delete](#consolepvcdelete)
+52.  [console.pvc/status](#consolepvcstatus)
+53.  [console.redux-reducer](#consoleredux-reducer)
+54.  [console.resource/create](#consoleresourcecreate)
+55.  [console.resource/details-item](#consoleresourcedetails-item)
+56.  [console.storage-class/provisioner](#consolestorage-classprovisioner)
+57.  [console.storage-provider](#consolestorage-provider)
+58.  [console.tab](#consoletab)
+59.  [console.tab/horizontalNav](#consoletabhorizontalNav)
+60.  [console.telemetry/listener](#consoletelemetrylistener)
+61.  [console.topology/adapter/build](#consoletopologyadapterbuild)
+62.  [console.topology/adapter/network](#consoletopologyadapternetwork)
+63.  [console.topology/adapter/pod](#consoletopologyadapterpod)
+64.  [console.topology/component/factory](#consoletopologycomponentfactory)
+65.  [console.topology/create/connector](#consoletopologycreateconnector)
+66.  [console.topology/data/factory](#consoletopologydatafactory)
+67.  [console.topology/decorator/provider](#consoletopologydecoratorprovider)
+68.  [console.topology/details/resource-alert](#consoletopologydetailsresource-alert)
+69.  [console.topology/details/resource-link](#consoletopologydetailsresource-link)
+70.  [console.topology/details/tab](#consoletopologydetailstab)
+71.  [console.topology/details/tab-section](#consoletopologydetailstab-section)
+72.  [console.topology/display/filters](#consoletopologydisplayfilters)
+73.  [console.topology/relationship/provider](#consoletopologyrelationshipprovider)
+74.  [console.user-preference/group](#consoleuser-preferencegroup)
+75.  [console.user-preference/item](#consoleuser-preferenceitem)
+76.  [console.yaml-template](#consoleyaml-template)
+77.  [dev-console.add/action](#dev-consoleaddaction)
+78.  [dev-console.add/action-group](#dev-consoleaddaction-group)
+79.  [dev-console.import/environment](#dev-consoleimportenvironment)
+80. [DEPRECATED] [console.dashboards/overview/detail/item](#consoledashboardsoverviewdetailitem)
+81. [DEPRECATED] [console.page/resource/tab](#consolepageresourcetab)
 
 ---
 
@@ -264,6 +265,22 @@ This extension allows plugins to contribute extra metadata like custom filters o
 
 ---
 
+## `console.catalog/toolbar-item`
+
+### Summary 
+
+This extension allows plugins to contribute toolbar items to the Catalog view for a specific catalog type.
+
+### Properties
+
+| Name | Value Type | Optional | Description |
+| ---- | ---------- | -------- | ----------- |
+| `component` | `CodeRef<React.ComponentType<{}>>` | no | The component to render in the catalog toolbar. |
+| `catalogId` | `string` | yes | The catalog ID the toolbar item is for. If not specified, the toolbar item will be available for all catalogs. |
+| `type` | `string` | yes | The catalog item type for this toolbar item. If not specified, the toolbar item will be available for all types. |
+
+---
+
 ## `console.cluster-overview/inventory-item`
 
 ### Summary 
@@ -826,8 +843,8 @@ Adds new standalone page (rendered outside the common page layout) to Console ro
 
 | Name | Value Type | Optional | Description |
 | ---- | ---------- | -------- | ----------- |
-| `path` | `string \| string[]` | no | Valid URL path or array of paths that `path-to-regexp@^1.7.0` understands. |
 | `component` | `CodeRef<React.ComponentType<{}>>` | no | The component to be rendered when the route matches. |
+| `path` | `string \| string[]` | no | Valid URL path or array of paths that `path-to-regexp@^1.7.0` understands. |
 | `exact` | `boolean` | yes | When true, will only match if the path matches the `location.pathname` exactly. |
 
 ---

frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts

@@ -99,13 +99,27 @@ export type CatalogCategoriesProvider = ExtensionDeclaration<
   }
 >;
 
+/** This extension allows plugins to contribute toolbar items to the Catalog view for a specific catalog type. */
+export type CatalogToolbarItem = ExtensionDeclaration<
+  'console.catalog/toolbar-item',
+  {
+    /** The catalog ID the toolbar item is for. If not specified, the toolbar item will be available for all catalogs. */
+    catalogId?: string;
+    /** The catalog item type for this toolbar item. If not specified, the toolbar item will be available for all types. */
+    type?: string;
+    /** The component to render in the catalog toolbar. */
+    component: CodeRef<React.ComponentType>;
+  }
+>;
+
 export type SupportedCatalogExtensions =
   | CatalogItemType
   | CatalogItemTypeMetadata
   | CatalogItemProvider
   | CatalogItemFilter
   | CatalogItemMetadataProvider
-  | CatalogCategoriesProvider;
+  | CatalogCategoriesProvider
+  | CatalogToolbarItem;
 
 // Type guards
 
@@ -133,6 +147,10 @@ export const isCatalogCategoriesProvider = (e: Extension): e is CatalogCategorie
   return e.type === 'console.catalog/categories-provider';
 };
 
+export const isCatalogToolbarItem = (e: Extension): e is CatalogToolbarItem => {
+  return e.type === 'console.catalog/toolbar-item';
+};
+
 // Support types
 
 export type CatalogExtensionHookOptions = {

frontend/packages/console-shared/src/components/catalog/CatalogController.tsx

@@ -43,6 +43,7 @@ const CatalogController: React.FC<CatalogControllerProps> = ({
   loaded,
   loadError,
   catalogExtensions,
+  toolbarExtensions,
   enableDetailsPanel,
   title: defaultTitle,
   description: defaultDescription,
@@ -202,6 +203,7 @@ const CatalogController: React.FC<CatalogControllerProps> = ({
             filterGroups={filterGroups}
             filterGroupMap={filterGroupMap}
             groupings={groupings}
+            toolbarExtensions={toolbarExtensions}
             renderTile={renderTile}
             hideSidebar={hideSidebar}
             sortFilterGroups={sortFilterGroups}

frontend/packages/console-shared/src/components/catalog/__tests__/CatalogController.spec.tsx

@@ -44,6 +44,7 @@ describe('CatalogController', () => {
           uid: '@console/helm-plugin[9]',
         },
       ],
+      toolbarExtensions: [],
       items: [],
       itemsMap: { HelmChart: [] },
       loaded: true,
@@ -64,7 +65,20 @@ describe('CatalogController', () => {
       type: 'HelmChart',
       title: 'Default title',
       description: 'Default description',
-      catalogExtensions: [],
+      catalogExtensions: [
+        {
+          pluginID: '@console/helm-plugin',
+          pluginName: '@console/helm-plugin',
+          properties: {
+            catalogDescription: null,
+            title: null,
+            type: 'HelmChart',
+          },
+          type: 'console.catalog/item-type',
+          uid: '@console/helm-plugin[9]',
+        },
+      ],
+      toolbarExtensions: [],
       items: [],
       itemsMap: { HelmChart: [] },
       loaded: true,

frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogToolbar.tsx

@@ -2,6 +2,8 @@ import { forwardRef } from 'react';
 import { Flex, FlexItem, SearchInput } from '@patternfly/react-core';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { CatalogToolbarItem } from '@console/dynamic-plugin-sdk/src/extensions';
+import { ResolvedExtension } from '@console/dynamic-plugin-sdk/src/types';
 import { ConsoleSelect } from '@console/internal/components/utils/console-select';
 import { useDebounceCallback } from '@console/shared';
 import { NO_GROUPING } from '../utils/category-utils';
@@ -18,6 +20,7 @@ type CatalogToolbarProps = {
   sortOrder: CatalogSortOrder;
   groupings: CatalogStringMap;
   activeGrouping: string;
+  toolbarExtensions?: ResolvedExtension<CatalogToolbarItem>[];
   onGroupingChange: (grouping: string) => void;
   onSearchKeywordChange: (searchKeyword: string) => void;
   onSortOrderChange: (sortOrder: CatalogSortOrder) => void;
@@ -32,6 +35,7 @@ const CatalogToolbar = forwardRef<HTMLInputElement, CatalogToolbarProps>(
       sortOrder,
       groupings,
       activeGrouping,
+      toolbarExtensions,
       onGroupingChange,
       onSearchKeywordChange,
       onSortOrderChange,
@@ -94,6 +98,14 @@ const CatalogToolbar = forwardRef<HTMLInputElement, CatalogToolbarProps>(
                 />
               </FlexItem>
             )}
+            {toolbarExtensions?.map((extension) => {
+              const Component = extension.properties.component;
+              return (
+                <FlexItem key={extension.uid}>
+                  <Component />
+                </FlexItem>
+              );
+            })}
           </Flex>
           <CatalogPageNumItems>
             {t('console-shared~{{totalItems}} items', { totalItems })}

frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogView.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { CatalogCategory } from '@console/dynamic-plugin-sdk/src';
+import { CatalogCategory, CatalogToolbarItem } from '@console/dynamic-plugin-sdk/src';
 import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions';
+import { ResolvedExtension } from '@console/dynamic-plugin-sdk/src/types';
 import { isModalOpen } from '@console/internal/components/modals';
 import { useQueryParams } from '../../../hooks/useQueryParams';
 import PaneBody from '../../layout/PaneBody';
@@ -57,6 +58,7 @@ type CatalogViewProps = {
   filterGroups: string[];
   filterGroupMap: CatalogFilterGroupMap;
   groupings: CatalogStringMap;
+  toolbarExtensions?: ResolvedExtension<CatalogToolbarItem>[];
   renderTile: (item: CatalogItem) => React.ReactNode;
   hideSidebar?: boolean;
   sortFilterGroups: boolean;
@@ -71,6 +73,7 @@ const CatalogView: React.FC<CatalogViewProps> = ({
   filterGroups,
   filterGroupMap,
   groupings,
+  toolbarExtensions,
   renderTile,
   hideSidebar,
   sortFilterGroups,
@@ -341,6 +344,7 @@ const CatalogView: React.FC<CatalogViewProps> = ({
             sortOrder={sortOrder}
             groupings={groupings}
             activeGrouping={activeGrouping}
+            toolbarExtensions={toolbarExtensions}
             onGroupingChange={handleGroupingChange}
             onSortOrderChange={handleSortOrderChange}
             onSearchKeywordChange={handleSearchKeywordChange}