diff --git a/.changeset/angry-phones-wash.md b/.changeset/angry-phones-wash.md new file mode 100644 index 0000000000..ac59a924a2 --- /dev/null +++ b/.changeset/angry-phones-wash.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-devtools': patch +--- + +Allow specifying custom title for `DevToolsLayout` diff --git a/plugins/devtools/api-report.md b/plugins/devtools/api-report.md index c9cfbf77e5..3e3fb99ff7 100644 --- a/plugins/devtools/api-report.md +++ b/plugins/devtools/api-report.md @@ -15,12 +15,14 @@ export const ConfigContent: () => JSX.Element; // @public export const DevToolsLayout: { - ({ children }: DevToolsLayoutProps): JSX.Element; + ({ children, title, subtitle }: DevToolsLayoutProps): JSX.Element; Route: (props: SubRoute) => null; }; // @public (undocumented) export type DevToolsLayoutProps = { + title?: string; + subtitle?: string; children?: default_2.ReactNode; }; diff --git a/plugins/devtools/src/components/DevToolsLayout/DevToolsLayout.tsx b/plugins/devtools/src/components/DevToolsLayout/DevToolsLayout.tsx index 12cd3f7666..ae9a337ced 100644 --- a/plugins/devtools/src/components/DevToolsLayout/DevToolsLayout.tsx +++ b/plugins/devtools/src/components/DevToolsLayout/DevToolsLayout.tsx @@ -40,6 +40,8 @@ attachComponentData(Route, 'core.gatherMountPoints', true); /** @public */ export type DevToolsLayoutProps = { + title?: string; + subtitle?: string; children?: React.ReactNode; }; @@ -56,7 +58,11 @@ export type DevToolsLayoutProps = { * ``` * @public */ -export const DevToolsLayout = ({ children }: DevToolsLayoutProps) => { +export const DevToolsLayout = ({ + children, + title, + subtitle, +}: DevToolsLayoutProps) => { const routes = useElementFilter(children, elements => elements .selectByComponentData({ @@ -70,7 +76,7 @@ export const DevToolsLayout = ({ children }: DevToolsLayoutProps) => { return ( -
+
);