Merge pull request #8443 from dehamzah/export-props-icon-in-sidebarsearch

Export Icon Props for SidebarSearch and SidebarSearchModal Component

plugins/search/api-report.md

@@ -8,6 +8,7 @@
 import { ApiRef } from '@backstage/core-plugin-api';
 import { AsyncState } from 'react-use/lib/useAsync';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { IconComponent } from '@backstage/core-plugin-api';
 import { IndexableDocument } from '@backstage/search-common';
 import { JsonObject } from '@backstage/types';
 import { default as React_2 } from 'react';
@@ -213,12 +214,28 @@ export const SearchType: ({
 // Warning: (ae-missing-release-tag) "SidebarSearch" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const SidebarSearch: () => JSX.Element;
+export const SidebarSearch: (props: SidebarSearchProps) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "SidebarSearchModal" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const SidebarSearchModal: () => JSX.Element;
+export const SidebarSearchModal: (
+  props: SidebarSearchModalProps,
+) => JSX.Element;
+
+// Warning: (ae-missing-release-tag) "SidebarSearchModalProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export type SidebarSearchModalProps = {
+  icon?: IconComponent;
+};
+
+// Warning: (ae-missing-release-tag) "SidebarSearchProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export type SidebarSearchProps = {
+  icon?: IconComponent;
+};
 
 // Warning: (ae-forgotten-export) The symbol "SearchContextValue" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "useSearch" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

plugins/search/src/components/SidebarSearch/SidebarSearch.tsx

@@ -19,9 +19,13 @@ import { useNavigate } from 'react-router-dom';
 import { rootRouteRef } from '../../plugin';
 
 import { SidebarSearchField } from '@backstage/core-components';
-import { useRouteRef } from '@backstage/core-plugin-api';
+import { useRouteRef, IconComponent } from '@backstage/core-plugin-api';
 
-export const SidebarSearch = () => {
+export type SidebarSearchProps = {
+  icon?: IconComponent;
+};
+
+export const SidebarSearch = (props: SidebarSearchProps) => {
   const searchRoute = useRouteRef(rootRouteRef);
   const navigate = useNavigate();
   const handleSearch = useCallback(
@@ -33,5 +37,11 @@ export const SidebarSearch = () => {
     [navigate, searchRoute],
   );
 
-  return <SidebarSearchField onSearch={handleSearch} to="/search" />;
+  return (
+    <SidebarSearchField
+      icon={props.icon}
+      onSearch={handleSearch}
+      to="/search"
+    />
+  );
 };

plugins/search/src/components/SidebarSearch/index.ts

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export { SidebarSearch } from './SidebarSearch';
+export type { SidebarSearchProps } from './SidebarSearch';

plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx

@@ -16,17 +16,23 @@
 import React from 'react';
 import SearchIcon from '@material-ui/icons/Search';
 import { SidebarItem } from '@backstage/core-components';
+import { IconComponent } from '@backstage/core-plugin-api';
 import { SearchModal } from '../SearchModal';
 import { useSearch } from '../SearchContext';
 
-export const SidebarSearchModal = () => {
+export type SidebarSearchModalProps = {
+  icon?: IconComponent;
+};
+
+export const SidebarSearchModal = (props: SidebarSearchModalProps) => {
   const { open, toggleModal } = useSearch();
+  const Icon = props.icon ? props.icon : SearchIcon;
 
   return (
     <>
       <SidebarItem
         className="search-icon"
-        icon={SearchIcon}
+        icon={Icon}
         text="Search"
         onClick={toggleModal}
       />

plugins/search/src/components/SidebarSearchModal/index.ts

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export { SidebarSearchModal } from './SidebarSearchModal';
+export type { SidebarSearchModalProps } from './SidebarSearchModal';

plugins/search/src/index.ts

@@ -36,7 +36,11 @@ export {
   SidebarSearch,
   useSearch,
 } from './components';
-export type { SearchModalProps } from './components';
+export type {
+  SearchModalProps,
+  SidebarSearchModalProps,
+  SidebarSearchProps,
+} from './components';
 export type { FiltersState } from './components';
 export {
   DefaultResultListItem,