From 6d25f2d91c131bbbbe41622c6de8676b84c48a45 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Sun, 10 Mar 2024 20:21:30 +0100 Subject: [PATCH 1/8] catalog-react: EntitySearchBar persist text in query params Signed-off-by: Vincenzo Scamporlino --- .../EntitySearchBar/EntitySearchBar.test.tsx | 14 ++++++----- .../EntitySearchBar/EntitySearchBar.tsx | 23 +++++++++++++++---- plugins/catalog-react/src/filters.ts | 4 ++++ 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx index 94db377e26..7dd8c792d7 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx @@ -17,7 +17,6 @@ import React from 'react'; import { fireEvent, render, waitFor, screen } from '@testing-library/react'; import { EntitySearchBar } from './EntitySearchBar'; -import { DefaultEntityFilters } from '../../hooks/useEntityListProvider'; import { EntityTextFilter } from '../../filters'; import { MockEntityListContextProvider } from '../../testUtils/providers'; @@ -25,12 +24,15 @@ describe('EntitySearchBar', () => { it('should display search value and execute set callback', async () => { const updateFilters = jest.fn(); - const filters: DefaultEntityFilters = { - text: new EntityTextFilter('hello'), - }; - render( - + , ); diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx index 91e411c562..a56119ac70 100644 --- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx +++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx @@ -24,8 +24,8 @@ import { } from '@material-ui/core'; import Clear from '@material-ui/icons/Clear'; import Search from '@material-ui/icons/Search'; -import React, { useState } from 'react'; -import useDebounce from 'react-use/esm/useDebounce'; +import React, { useEffect, useMemo, useState } from 'react'; +import useDebounce from 'react-use/lib/useDebounce'; import { useEntityList } from '../../hooks/useEntityListProvider'; import { EntityTextFilter } from '../../filters'; @@ -52,8 +52,17 @@ const useStyles = makeStyles( export const EntitySearchBar = () => { const classes = useStyles(); - const { filters, updateFilters } = useEntityList(); - const [search, setSearch] = useState(filters.text?.value ?? ''); + const { + updateFilters, + queryParameters: { text: textParameter }, + } = useEntityList(); + + const queryParamTextFilter = useMemo( + () => [textParameter].flat()[0], + [textParameter], + ); + + const [search, setSearch] = useState(queryParamTextFilter ?? ''); useDebounce( () => { @@ -65,6 +74,12 @@ export const EntitySearchBar = () => { [search, updateFilters], ); + useEffect(() => { + if (queryParamTextFilter) { + setSearch(queryParamTextFilter); + } + }, [queryParamTextFilter]); + return ( diff --git a/plugins/catalog-react/src/filters.ts b/plugins/catalog-react/src/filters.ts index dda13338a7..08be27a561 100644 --- a/plugins/catalog-react/src/filters.ts +++ b/plugins/catalog-react/src/filters.ts @@ -116,6 +116,10 @@ export class EntityTextFilter implements EntityFilter { }; } + toQueryValue() { + return this.value; + } + private toUpperArray( value: Array, ): Array { From 6e6bf48ff78a7fe9c0c6327d79143b97a0c10c8e Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Sun, 10 Mar 2024 20:23:02 +0100 Subject: [PATCH 2/8] catalog: remove entities count from paginated table Signed-off-by: Vincenzo Scamporlino --- plugins/catalog/src/components/CatalogTable/CatalogTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 8aa5b9e376..674271a044 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -192,7 +192,7 @@ export const CatalogTable = (props: CatalogTableProps) => { columns={tableColumns} emptyContent={emptyContent} isLoading={loading} - title={title} + title={titleDisplay} actions={actions} subtitle={subtitle} options={options} From ab5989023ef51b863d7a66a7ba471c33e032db37 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Sun, 10 Mar 2024 20:24:58 +0100 Subject: [PATCH 3/8] catalog: PaginatedCatalogTable debounce text filter Signed-off-by: Vincenzo Scamporlino --- .../CatalogTable/CatalogTableToolbar.tsx | 50 +++++++++++++++++++ .../CatalogTable/PaginatedCatalogTable.tsx | 14 ++---- 2 files changed, 54 insertions(+), 10 deletions(-) create mode 100644 plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx new file mode 100644 index 0000000000..2a33692471 --- /dev/null +++ b/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx @@ -0,0 +1,50 @@ +/* + * Copyright 2024 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. + */ +import React from 'react'; +import { EntitySearchBar } from '@backstage/plugin-catalog-react'; +import { Toolbar, Typography, makeStyles } from '@material-ui/core'; + +const useToolbarStyles = makeStyles( + theme => ({ + root: { + paddingTop: theme.spacing(1.25), + paddingLeft: theme.spacing(2.5), + paddingBottom: theme.spacing(0.75), + display: 'flex', + justifyContent: 'space-between', + }, + text: { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }), + { name: 'BackstageTableToolbar' }, +); + +export function CatalogTableToolbar(props: { + title?: string | React.ReactElement; +}) { + const styles = useToolbarStyles(); + return ( + + + {props.title} + + + + ); +} diff --git a/plugins/catalog/src/components/CatalogTable/PaginatedCatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/PaginatedCatalogTable.tsx index 34087f1b36..38691b49d2 100644 --- a/plugins/catalog/src/components/CatalogTable/PaginatedCatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/PaginatedCatalogTable.tsx @@ -18,10 +18,7 @@ import React from 'react'; import { Table, TableProps } from '@backstage/core-components'; import { CatalogTableRow } from './types'; -import { - EntityTextFilter, - useEntityList, -} from '@backstage/plugin-catalog-react'; +import { CatalogTableToolbar } from './CatalogTableToolbar'; type PaginatedCatalogTableProps = { prev?(): void; @@ -33,7 +30,6 @@ type PaginatedCatalogTableProps = { */ export function PaginatedCatalogTable(props: PaginatedCatalogTableProps) { const { columns, data, next, prev, title, isLoading, options } = props; - const { updateFilters } = useEntityList(); return ( - updateFilters({ - text: searchText ? new EntityTextFilter(searchText) : undefined, - }) - } onPageChange={page => { if (page > 0) { next?.(); @@ -61,6 +52,9 @@ export function PaginatedCatalogTable(props: PaginatedCatalogTableProps) { prev?.(); } }} + components={{ + Toolbar: CatalogTableToolbar, + }} /* this will enable the prev button accordingly */ page={prev ? 1 : 0} /* this will enable the next button accordingly */ From c2efddea68749e696e9e5b521639685f28a82263 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Mon, 11 Mar 2024 13:54:35 +0100 Subject: [PATCH 4/8] catalog: changesets Signed-off-by: Vincenzo Scamporlino --- .changeset/.yellow-parrots-glow.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/.yellow-parrots-glow.md diff --git a/.changeset/.yellow-parrots-glow.md b/.changeset/.yellow-parrots-glow.md new file mode 100644 index 0000000000..1f71f74af2 --- /dev/null +++ b/.changeset/.yellow-parrots-glow.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-catalog': patch +--- + +The `CatalogIndexPage` now uses `EntitySearchBar` for text-based filtering of entities. + +This update also saves your search text in the query parameters and moderates the rate of server requests through debouncing. From b5cbbb63cfcae8264e4511c03071ac37dbe86a32 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Mon, 11 Mar 2024 13:54:59 +0100 Subject: [PATCH 5/8] catalog-react: EntitySearchBar changeset Signed-off-by: Vincenzo Scamporlino --- .changeset/shiny-flowers-yawn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shiny-flowers-yawn.md diff --git a/.changeset/shiny-flowers-yawn.md b/.changeset/shiny-flowers-yawn.md new file mode 100644 index 0000000000..bb85130f24 --- /dev/null +++ b/.changeset/shiny-flowers-yawn.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +`EntitySearchBar` and `EntityTextFilter` have been updated accordingly to persist the status as query params, following the same pattern as the other server side From e3a8e8f865c5947bdb6d8a054a5204a805935fb1 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Mon, 11 Mar 2024 23:22:23 +0100 Subject: [PATCH 6/8] catalog: clarify changeset Signed-off-by: Vincenzo Scamporlino --- .changeset/.yellow-parrots-glow.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.changeset/.yellow-parrots-glow.md b/.changeset/.yellow-parrots-glow.md index 1f71f74af2..0773a7302c 100644 --- a/.changeset/.yellow-parrots-glow.md +++ b/.changeset/.yellow-parrots-glow.md @@ -2,6 +2,4 @@ '@backstage/plugin-catalog': patch --- -The `CatalogIndexPage` now uses `EntitySearchBar` for text-based filtering of entities. - -This update also saves your search text in the query parameters and moderates the rate of server requests through debouncing. +`CatalogIndexPage` now uses `EntitySearchBar` for text-based filtering of entities, saving the search text in the query parameters and debouncing the server requests. From 24280d532460be10615944ace3c976ac0775a360 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Mon, 11 Mar 2024 23:58:27 +0100 Subject: [PATCH 7/8] catalog-react: api reports Signed-off-by: Vincenzo Scamporlino --- plugins/catalog-react/api-report.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index ce2502691f..efc84c7870 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -573,6 +573,8 @@ export class EntityTextFilter implements EntityFilter { fields: string[]; }; // (undocumented) + toQueryValue(): string; + // (undocumented) readonly value: string; } From 089f1a30d381c66045d03249a486abb7806079ec Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Tue, 26 Mar 2024 09:55:52 +0100 Subject: [PATCH 8/8] catalog: fix mui imports Signed-off-by: Vincenzo Scamporlino --- .../src/components/CatalogTable/CatalogTableToolbar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx index 2a33692471..16d9923727 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTableToolbar.tsx @@ -15,7 +15,9 @@ */ import React from 'react'; import { EntitySearchBar } from '@backstage/plugin-catalog-react'; -import { Toolbar, Typography, makeStyles } from '@material-ui/core'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; const useToolbarStyles = makeStyles( theme => ({