pulls the app.title from config and replaces " | Backstage"

Signed-off-by: Brad Risse <bradrisse@protonmail.com>
Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/famous-rockets-share.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Use app.title for helmet in header

packages/core-components/src/layout/Header/Header.test.tsx

@@ -17,6 +17,12 @@
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { Header } from './Header';
+import {
+  ApiRegistry,
+  ConfigReader,
+  ApiProvider,
+} from '@backstage/core-app-api';
+import { configApiRef } from '@backstage/core-plugin-api';
 
 jest.mock('react-helmet', () => {
   return {
@@ -64,4 +70,17 @@ describe('<Header/>', () => {
     );
     rendered.getAllByText('Title');
   });
+
+  it('should use app.title', async () => {
+    const apiRegistry = ApiRegistry.with(
+      configApiRef,
+      new ConfigReader({ app: { title: 'Blah' } }),
+    );
+    const rendered = await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <Header title="Title" type="tool" typeLink="/tool" />,
+      </ApiProvider>,
+    );
+    rendered.getAllByText(/Title | Blah/);
+  });
 });

packages/core-components/src/layout/Header/Header.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, Tooltip, Typography } from '@material-ui/core';
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
@@ -187,10 +188,12 @@ export const Header = ({
   typeLink,
 }: PropsWithChildren<Props>) => {
   const classes = useStyles();
+  const configApi = useApi(configApiRef);
+  const appTitle = configApi.getOptionalString('app.title') || 'Backstage';
   const documentTitle = pageTitleOverride || title;
   const pageTitle = title || pageTitleOverride;
-  const titleTemplate = `${documentTitle} | %s | Backstage`;
-  const defaultTitle = `${documentTitle} | Backstage`;
+  const titleTemplate = `${documentTitle} | %s | ${appTitle}`;
+  const defaultTitle = `${documentTitle} | ${appTitle}`;
 
   return (
     <>