packages/app: add mock config loader and use in welcome plugin

plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx

@@ -19,14 +19,23 @@ import { render } from '@testing-library/react';
 import WelcomePage from './WelcomePage';
 import { ThemeProvider } from '@material-ui/core';
 import { lightTheme } from '@backstage/theme';
-import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import {
+  ApiProvider,
+  ApiRegistry,
+  errorApiRef,
+  configApiRef,
+  ConfigReader,
+} from '@backstage/core';
 
 describe('WelcomePage', () => {
   it('should render', () => {
     // TODO: use common test app with mock implementations of all core APIs
     const rendered = render(
       <ApiProvider
-        apis={ApiRegistry.from([[errorApiRef, { post: jest.fn() }]])}
+        apis={ApiRegistry.from([
+          [errorApiRef, { post: jest.fn() }],
+          [configApiRef, new ConfigReader({})],
+        ])}
       >
         <ThemeProvider theme={lightTheme}>
           <WelcomePage />

plugins/welcome/src/components/WelcomePage/WelcomePage.tsx

@@ -34,15 +34,18 @@ import {
   ContentHeader,
   SupportButton,
   WarningPanel,
+  useApi,
+  configApiRef,
 } from '@backstage/core';
 
 const WelcomePage: FC<{}> = () => {
+  const appTitle = useApi(configApiRef).getString('app.title') ?? 'Backstage';
   const profile = { givenName: '' };
 
   return (
     <Page theme={pageTheme.home}>
       <Header
-        title={`Welcome ${profile.givenName || 'to Backstage'}`}
+        title={`Welcome ${profile.givenName || `to ${appTitle}`}`}
         subtitle="Let's start building a better developer experience"
       >
         <HomepageTimer />