diff --git a/.changeset/famous-rockets-share.md b/.changeset/famous-rockets-share.md
new file mode 100644
index 0000000000..8b5a216fc9
--- /dev/null
+++ b/.changeset/famous-rockets-share.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Use app.title for helmet in header
diff --git a/packages/core-components/src/layout/Header/Header.test.tsx b/packages/core-components/src/layout/Header/Header.test.tsx
index 51468f6ab5..a833f26939 100644
--- a/packages/core-components/src/layout/Header/Header.test.tsx
+++ b/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('', () => {
);
rendered.getAllByText('Title');
});
+
+ it('should use app.title', async () => {
+ const apiRegistry = ApiRegistry.with(
+ configApiRef,
+ new ConfigReader({ app: { title: 'Blah' } }),
+ );
+ const rendered = await renderInTestApp(
+
+ ,
+ ,
+ );
+ rendered.getAllByText(/Title | Blah/);
+ });
});
diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index 1ad7b91687..1eadaddaf5 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/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) => {
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 (
<>