From c019accb18aaadadc1dbdfde1c959ae30f097ecb Mon Sep 17 00:00:00 2001 From: Chase Rutherford-Jenkins Date: Wed, 16 Jun 2021 16:01:52 -0700 Subject: [PATCH] move into catalog-react and rename Co-authored-by: Tim Signed-off-by: Chase Rutherford-Jenkins --- .../EntitySearchBar/EntitySearchBar.test.tsx} | 18 ++++++------ .../EntitySearchBar/EntitySearchBar.tsx} | 29 ++++++++++--------- .../src/components/EntitySearchBar/index.ts | 17 +++++++++++ plugins/catalog-react/src/components/index.ts | 1 + .../ScaffolderPage/ScaffolderPage.tsx | 4 +-- 5 files changed, 44 insertions(+), 25 deletions(-) rename plugins/{scaffolder/src/components/SearchToolbar/SearchToolbar.test.tsx => catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx} (77%) rename plugins/{scaffolder/src/components/SearchToolbar/SearchToolbar.tsx => catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx} (82%) create mode 100644 plugins/catalog-react/src/components/EntitySearchBar/index.ts 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 = () => {
- +