feat(search): enable configuration of the Search component via instrumented config

Signed-off-by: Enrico Alvarenga <enricomalvarenga@gmail.com>

plugins/search/config.d.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface Config {
+  app: {
+    /**
+     * Configuration options for the search plugin
+     */
+    search?: {
+      /**
+       * An object representing the initial state configuration for the SearchPage
+       * component. By configuring and modifying the values of the initialState
+       * object attributes, you can customize the initial state of the search component
+       * and define how it behaves when it is first loaded or reset.
+       */
+      initialState?: {
+        /**
+         * A number indicating the maximum number of results to be returned
+         * per page during pagination.
+         *
+         * @visibility frontend
+         */
+        pageLimit?: number;
+      };
+    };
+  };
+}

plugins/search/package.json

@@ -70,6 +70,8 @@
     "msw": "^1.0.0"
   },
   "files": [
-    "dist"
-  ]
+    "dist",
+    "config.d.ts"
+  ],
+  "configSchema": "config.d.ts"
 }

plugins/search/src/components/SearchPage/SearchPage.tsx

@@ -21,8 +21,10 @@ import { useLocation, useOutlet } from 'react-router-dom';
 import {
   SearchContextProvider,
   useSearch,
+  getSearchContextInitialStateDefaults,
 } from '@backstage/plugin-search-react';
 import { JsonObject } from '@backstage/types';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
 export const UrlUpdater = () => {
   const location = useLocation();
@@ -91,9 +93,15 @@ export const UrlUpdater = () => {
  */
 export const SearchPage = () => {
   const outlet = useOutlet();
+  const configApi = useApi(configApiRef);
+
+  const initialState = {
+    ...getSearchContextInitialStateDefaults(),
+    pageLimit: configApi.getOptionalNumber('app.search.initialState.pageLimit'),
+  };
 
   return (
-    <SearchContextProvider>
+    <SearchContextProvider initialState={initialState}>
       <UrlUpdater />
       {outlet}
     </SearchContextProvider>