diff --git a/packages/app-example-plugin/report.api.md b/packages/app-example-plugin/report.api.md index 5fd5f36559..10b809ea4d 100644 --- a/packages/app-example-plugin/report.api.md +++ b/packages/app-example-plugin/report.api.md @@ -71,6 +71,13 @@ const examplePlugin: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/packages/frontend-plugin-api/report.api.md b/packages/frontend-plugin-api/report.api.md index 1232ce0640..5d1b27c4d3 100644 --- a/packages/frontend-plugin-api/report.api.md +++ b/packages/frontend-plugin-api/report.api.md @@ -1799,6 +1799,13 @@ export const PageBlueprint: ExtensionBlueprint_2<{ { optional: true; } + > + | ConfigurableExtensionDataRef_2< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; @@ -1843,6 +1850,8 @@ export interface PageTab { // (undocumented) href: string; // (undocumented) + icon?: IconElement; + // (undocumented) id: string; // (undocumented) label: string; @@ -2023,6 +2032,7 @@ export const SubPageBlueprint: ExtensionBlueprint_2<{ params: { path: string; title: string; + icon?: IconElement; loader: () => Promise; routeRef?: RouteRef; }; @@ -2036,7 +2046,14 @@ export const SubPageBlueprint: ExtensionBlueprint_2<{ } > | ExtensionDataRef_2 - | ExtensionDataRef_2; + | ExtensionDataRef_2 + | ExtensionDataRef_2< + IconElement, + 'core.icon', + { + optional: true; + } + >; inputs: {}; config: { path: string | undefined; diff --git a/packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx b/packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx index daa0f94594..780f7846ae 100644 --- a/packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx +++ b/packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx @@ -50,6 +50,7 @@ export const PageBlueprint = createExtensionBlueprint({ coreExtensionData.routeRef.optional(), coreExtensionData.reactElement, coreExtensionData.title.optional(), + coreExtensionData.icon.optional(), ]), }, output: [ @@ -104,9 +105,11 @@ export const PageBlueprint = createExtensionBlueprint({ const tabs: PageTab[] = inputs.pages.map(page => { const path = page.get(coreExtensionData.routePath); const tabTitle = page.get(coreExtensionData.title); + const tabIcon = page.get(coreExtensionData.icon); return { id: path, label: tabTitle || path, + icon: tabIcon, href: path, matchStrategy: 'prefix' as const, }; diff --git a/packages/frontend-plugin-api/src/blueprints/SubPageBlueprint.tsx b/packages/frontend-plugin-api/src/blueprints/SubPageBlueprint.tsx index 5f5d5373f0..d174a3a1ec 100644 --- a/packages/frontend-plugin-api/src/blueprints/SubPageBlueprint.tsx +++ b/packages/frontend-plugin-api/src/blueprints/SubPageBlueprint.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ +import { IconElement } from '../icons/types'; import { RouteRef } from '../routing'; import { coreExtensionData, createExtensionBlueprint } from '../wiring'; import { ExtensionBoundary } from '../components'; @@ -47,6 +48,7 @@ export const SubPageBlueprint = createExtensionBlueprint({ coreExtensionData.reactElement, coreExtensionData.title, coreExtensionData.routeRef.optional(), + coreExtensionData.icon.optional(), ], config: { schema: { @@ -66,6 +68,10 @@ export const SubPageBlueprint = createExtensionBlueprint({ * The title displayed in the tab for this sub-page. */ title: string; + /** + * Optional icon for this sub-page, displayed in the tab. + */ + icon?: IconElement; /** * A function that returns a promise resolving to the React element to render. * This enables lazy loading of the sub-page content. @@ -86,5 +92,8 @@ export const SubPageBlueprint = createExtensionBlueprint({ if (params.routeRef) { yield coreExtensionData.routeRef(params.routeRef); } + if (params.icon) { + yield coreExtensionData.icon(params.icon); + } }, }); diff --git a/packages/frontend-plugin-api/src/components/PageLayout.tsx b/packages/frontend-plugin-api/src/components/PageLayout.tsx index 2e59bac80c..958738dab9 100644 --- a/packages/frontend-plugin-api/src/components/PageLayout.tsx +++ b/packages/frontend-plugin-api/src/components/PageLayout.tsx @@ -25,6 +25,7 @@ import { createSwappableComponent } from './createSwappableComponent'; export interface PageTab { id: string; label: string; + icon?: IconElement; href: string; matchStrategy?: 'prefix' | 'exact'; } @@ -96,12 +97,16 @@ function DefaultPageLayout(props: PageLayoutProps): JSX.Element { key={tab.id} href={tab.href} style={{ + display: 'flex', + alignItems: 'center', + gap: '4px', padding: '8px 12px', textDecoration: 'none', color: '#333', borderBottom: '2px solid transparent', }} > + {tab.icon} {tab.label} ))} diff --git a/plugins/api-docs/report-alpha.api.md b/plugins/api-docs/report-alpha.api.md index 391a0300e3..0334ba1e41 100644 --- a/plugins/api-docs/report-alpha.api.md +++ b/plugins/api-docs/report-alpha.api.md @@ -545,6 +545,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/app-visualizer/report.api.md b/plugins/app-visualizer/report.api.md index c2c62a7da4..e6688672d4 100644 --- a/plugins/app-visualizer/report.api.md +++ b/plugins/app-visualizer/report.api.md @@ -110,6 +110,13 @@ const visualizerPlugin: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; @@ -148,11 +155,19 @@ const visualizerPlugin: OverridableFrontendPlugin< } > | ExtensionDataRef - | ExtensionDataRef; + | ExtensionDataRef + | ExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } + >; inputs: {}; params: { path: string; title: string; + icon?: IconElement; loader: () => Promise; routeRef?: RouteRef; }; @@ -178,11 +193,19 @@ const visualizerPlugin: OverridableFrontendPlugin< } > | ExtensionDataRef - | ExtensionDataRef; + | ExtensionDataRef + | ExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } + >; inputs: {}; params: { path: string; title: string; + icon?: IconElement; loader: () => Promise; routeRef?: RouteRef; }; @@ -208,11 +231,19 @@ const visualizerPlugin: OverridableFrontendPlugin< } > | ExtensionDataRef - | ExtensionDataRef; + | ExtensionDataRef + | ExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } + >; inputs: {}; params: { path: string; title: string; + icon?: IconElement; loader: () => Promise; routeRef?: RouteRef; }; diff --git a/plugins/auth/report.api.md b/plugins/auth/report.api.md index f3073415f5..4cbdf22081 100644 --- a/plugins/auth/report.api.md +++ b/plugins/auth/report.api.md @@ -72,6 +72,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/catalog-graph/report-alpha.api.md b/plugins/catalog-graph/report-alpha.api.md index 37c9f3f2df..0f42ed7f87 100644 --- a/plugins/catalog-graph/report-alpha.api.md +++ b/plugins/catalog-graph/report-alpha.api.md @@ -220,6 +220,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/catalog-import/report-alpha.api.md b/plugins/catalog-import/report-alpha.api.md index 8e5aa0552e..ed7a58faf9 100644 --- a/plugins/catalog-import/report-alpha.api.md +++ b/plugins/catalog-import/report-alpha.api.md @@ -165,6 +165,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/catalog-unprocessed-entities/report-alpha.api.md b/plugins/catalog-unprocessed-entities/report-alpha.api.md index 872248363a..be03461e1c 100644 --- a/plugins/catalog-unprocessed-entities/report-alpha.api.md +++ b/plugins/catalog-unprocessed-entities/report-alpha.api.md @@ -114,6 +114,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/catalog/report-alpha.api.md b/plugins/catalog/report-alpha.api.md index f8e289d10e..c8f7a54f65 100644 --- a/plugins/catalog/report-alpha.api.md +++ b/plugins/catalog/report-alpha.api.md @@ -1054,6 +1054,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; @@ -1151,6 +1158,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/devtools/report-alpha.api.md b/plugins/devtools/report-alpha.api.md index 60302485b3..e30f580817 100644 --- a/plugins/devtools/report-alpha.api.md +++ b/plugins/devtools/report-alpha.api.md @@ -111,6 +111,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/home/report-alpha.api.md b/plugins/home/report-alpha.api.md index 0d2fc51884..660ac5b68f 100644 --- a/plugins/home/report-alpha.api.md +++ b/plugins/home/report-alpha.api.md @@ -152,6 +152,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/kubernetes/report-alpha.api.md b/plugins/kubernetes/report-alpha.api.md index b136f226a5..b746d708d7 100644 --- a/plugins/kubernetes/report-alpha.api.md +++ b/plugins/kubernetes/report-alpha.api.md @@ -212,6 +212,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/mui-to-bui/report.api.md b/plugins/mui-to-bui/report.api.md index 0d95f91f26..4db5699c91 100644 --- a/plugins/mui-to-bui/report.api.md +++ b/plugins/mui-to-bui/report.api.md @@ -86,6 +86,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/notifications/report-alpha.api.md b/plugins/notifications/report-alpha.api.md index 7007249db6..f2268743e9 100644 --- a/plugins/notifications/report-alpha.api.md +++ b/plugins/notifications/report-alpha.api.md @@ -92,6 +92,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/scaffolder/report-alpha.api.md b/plugins/scaffolder/report-alpha.api.md index 80ee1077d1..037dc16491 100644 --- a/plugins/scaffolder/report-alpha.api.md +++ b/plugins/scaffolder/report-alpha.api.md @@ -242,6 +242,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/search/report-alpha.api.md b/plugins/search/report-alpha.api.md index f7d51fafa4..ad25c25a26 100644 --- a/plugins/search/report-alpha.api.md +++ b/plugins/search/report-alpha.api.md @@ -117,6 +117,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; @@ -279,6 +286,13 @@ export const searchPage: OverridableExtensionDefinition<{ { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/techdocs/report-alpha.api.md b/plugins/techdocs/report-alpha.api.md index 9b4646bf78..849873df02 100644 --- a/plugins/techdocs/report-alpha.api.md +++ b/plugins/techdocs/report-alpha.api.md @@ -332,6 +332,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; @@ -403,6 +410,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false; diff --git a/plugins/user-settings/report-alpha.api.md b/plugins/user-settings/report-alpha.api.md index b2fae45653..4c25459295 100644 --- a/plugins/user-settings/report-alpha.api.md +++ b/plugins/user-settings/report-alpha.api.md @@ -94,6 +94,13 @@ const _default: OverridableFrontendPlugin< { optional: true; } + > + | ConfigurableExtensionDataRef< + IconElement, + 'core.icon', + { + optional: true; + } >, { singleton: false;