feat: allow specifying custom title for DevToolsLayout

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

.changeset/angry-phones-wash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-devtools': patch
+---
+
+Allow specifying custom title for `DevToolsLayout`

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;
 };
 

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 (
     <Page themeId="home">
-      <Header title="Backstage DevTools" />
+      <Header title={title ?? 'Backstage DevTools'} subtitle={subtitle} />
       <RoutedTabs routes={routes} />
     </Page>
   );