move into catalog-react and rename

Co-authored-by: Tim <timbonicus@gmail.com>
Signed-off-by: Chase Rutherford-Jenkins <chaseajen@users.noreply.github.com>

plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx

@@ -15,14 +15,12 @@
  */
 
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import SearchToolbar from './SearchToolbar';
-import {
-  DefaultEntityFilters,
-  EntityTextFilter,
-  MockEntityListContextProvider,
-} from '@backstage/plugin-catalog-react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { EntitySearchBar } from './EntitySearchBar';
 import { Entity } from '@backstage/catalog-model';
+import { DefaultEntityFilters } from '../../hooks/useEntityListProvider';
+import { EntityTextFilter } from '../../types';
+import { MockEntityListContextProvider } from '../../testUtils/providers';
 
 const entities: Entity[] = [
   {
@@ -43,7 +41,7 @@ const entities: Entity[] = [
   },
 ];
 
-describe('SearchToolbar', () => {
+describe('EntitySearchBar', () => {
   it('should display search value and execute set callback', async () => {
     const updateFilters = jest.fn();
 
@@ -55,7 +53,7 @@ describe('SearchToolbar', () => {
       <MockEntityListContextProvider
         value={{ entities, updateFilters, filters }}
       >
-        <SearchToolbar />
+        <EntitySearchBar />
       </MockEntityListContextProvider>,
     );
 
@@ -63,11 +61,13 @@ describe('SearchToolbar', () => {
     expect(searchInput).toBeInTheDocument();
 
     fireEvent.change(searchInput, { target: { value: 'world' } });
+    await waitFor(() => expect(updateFilters.mock.calls.length).toBe(1));
     expect(updateFilters).toHaveBeenCalledWith({
       text: new EntityTextFilter('world'),
     });
 
     fireEvent.change(searchInput, { target: { value: '' } });
+    await waitFor(() => expect(updateFilters.mock.calls.length).toBe(2));
     expect(updateFilters).toHaveBeenCalledWith({
       text: undefined,
     });

plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx

@@ -13,10 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  EntityTextFilter,
-  useEntityListProvider,
-} from '@backstage/plugin-catalog-react';
+
 import {
   FormControl,
   IconButton,
@@ -27,7 +24,10 @@ import {
 } from '@material-ui/core';
 import Clear from '@material-ui/icons/Clear';
 import Search from '@material-ui/icons/Search';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import { useDebounce } from 'react-use';
+import { useEntityListProvider } from '../../hooks/useEntityListProvider';
+import { EntityTextFilter } from '../../types';
 
 const useStyles = makeStyles(_theme => ({
   searchToolbar: {
@@ -36,18 +36,21 @@ const useStyles = makeStyles(_theme => ({
   },
 }));
 
-// TODO(chaseajen): move component to /plugins/catalog-react
-const SearchToolbar = () => {
+export const EntitySearchBar = () => {
   const styles = useStyles();
 
   const { filters, updateFilters } = useEntityListProvider();
   const [search, setSearch] = useState(filters.text?.value ?? '');
 
-  useEffect(() => {
-    updateFilters({
-      text: search.length ? new EntityTextFilter(search) : undefined,
-    });
-  }, [search, updateFilters]);
+  useDebounce(
+    () => {
+      updateFilters({
+        text: search.length ? new EntityTextFilter(search) : undefined,
+      });
+    },
+    250,
+    [search, updateFilters],
+  );
 
   return (
     <Toolbar className={styles.searchToolbar}>
@@ -80,5 +83,3 @@ const SearchToolbar = () => {
     </Toolbar>
   );
 };
-
-export default SearchToolbar;

plugins/catalog-react/src/components/EntitySearchBar/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * 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 { EntitySearchBar } from './EntitySearchBar';

plugins/catalog-react/src/components/index.ts

@@ -18,6 +18,7 @@ export * from './EntityLifecyclePicker';
 export * from './EntityOwnerPicker';
 export * from './EntityProvider';
 export * from './EntityRefLink';
+export * from './EntitySearchBar';
 export * from './EntityTable';
 export * from './EntityTagPicker';
 export * from './EntityTypePicker';

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -30,6 +30,7 @@ import { useRouteRef } from '@backstage/core-plugin-api';
 import {
   EntityKindPicker,
   EntityListProvider,
+  EntitySearchBar,
   EntityTypePicker,
   useEntityListProvider,
   UserListPicker,
@@ -38,7 +39,6 @@ import { Button, Link, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { registerComponentRouteRef } from '../../routes';
-import SearchToolbar from '../SearchToolbar/SearchToolbar';
 import { TemplateCard } from '../TemplateCard';
 
 const useStyles = makeStyles(theme => ({
@@ -88,7 +88,7 @@ export const ScaffolderPageContents = () => {
 
         <div className={styles.contentWrapper}>
           <div>
-            <SearchToolbar />
+            <EntitySearchBar />
             <EntityKindPicker initialFilter="template" hidden />
             <UserListPicker
               initialFilter="all"