diff --git a/plugins/scaffolder/src/components/SearchToolbar/SearchToolbar.test.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx
similarity index 77%
rename from plugins/scaffolder/src/components/SearchToolbar/SearchToolbar.test.tsx
rename to plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx
index 574133e5ac..8b4ceb4821 100644
--- a/plugins/scaffolder/src/components/SearchToolbar/SearchToolbar.test.tsx
+++ b/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', () => {
-
+
,
);
@@ -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,
});
diff --git a/plugins/scaffolder/src/components/SearchToolbar/SearchToolbar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx
similarity index 82%
rename from plugins/scaffolder/src/components/SearchToolbar/SearchToolbar.tsx
rename to plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx
index dffa80b17b..dbee44a464 100644
--- a/plugins/scaffolder/src/components/SearchToolbar/SearchToolbar.tsx
+++ b/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 (
@@ -80,5 +83,3 @@ const SearchToolbar = () => {
);
};
-
-export default SearchToolbar;
diff --git a/plugins/catalog-react/src/components/EntitySearchBar/index.ts b/plugins/catalog-react/src/components/EntitySearchBar/index.ts
new file mode 100644
index 0000000000..044b8ee416
--- /dev/null
+++ b/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';
diff --git a/plugins/catalog-react/src/components/index.ts b/plugins/catalog-react/src/components/index.ts
index af7282a20e..dd7c4bebc2 100644
--- a/plugins/catalog-react/src/components/index.ts
+++ b/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';
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
index f8043791ee..fae0a906cd 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/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 = () => {