Merge pull request #7071 from backstage/fix/chromatic-search

Fix chromatic build error on SearchBar Component

plugins/search/src/components/SearchBar/SearchBar.test.tsx

@@ -21,7 +21,11 @@ import { SearchContextProvider } from '../SearchContext';
 
 import { SearchBar } from './SearchBar';
 import { configApiRef } from '@backstage/core-plugin-api';
-import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
+import {
+  ApiProvider,
+  ApiRegistry,
+  ConfigReader,
+} from '@backstage/core-app-api';
 import { searchApiRef } from '../../apis';
 
 jest.mock('@backstage/core-plugin-api', () => ({
@@ -37,10 +41,9 @@ describe('SearchBar', () => {
   };
 
   const query = jest.fn().mockResolvedValue({});
-  const getString = jest.fn().mockReturnValue('Mock title');
 
   const apiRegistry = ApiRegistry.from([
-    [configApiRef, { getString }],
+    [configApiRef, new ConfigReader({ app: { title: 'Mock title' } })],
     [searchApiRef, { query }],
   ]);
 

plugins/search/src/components/SearchBar/SearchBar.tsx

@@ -55,7 +55,8 @@ export const SearchBarBase = ({
   }, [onChange]);
 
   const placeholder =
-    overridePlaceholder ?? `Search in ${configApi.getString('app.title')}`;
+    overridePlaceholder ??
+    `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`;
 
   return (
     <InputBase