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 ( <>