From 251688a75e673c7006ded323d4f6464ed8166d8a Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 7 Mar 2022 08:01:06 -0600 Subject: [PATCH 1/3] Updated CatalogKindHeader to respect query param changes Signed-off-by: Andre Wanlin --- .changeset/great-hounds-allow.md | 5 ++++ .../CatalogKindHeader.test.tsx | 30 +++++++++++++++++++ .../CatalogKindHeader/CatalogKindHeader.tsx | 18 ++++++++++- 3 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 .changeset/great-hounds-allow.md diff --git a/.changeset/great-hounds-allow.md b/.changeset/great-hounds-allow.md new file mode 100644 index 0000000000..54405fcf94 --- /dev/null +++ b/.changeset/great-hounds-allow.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Updated `CatalogKindHeader` to respond to external changes to query parameters in the URL, such as two sidebar links that apply different catalog filters. diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx index 45d42d0ea6..7ce14817d6 100644 --- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx +++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx @@ -135,4 +135,34 @@ describe('', () => { kind: new EntityKindFilter('template'), }); }); + + it('responds to external queryParameters changes', async () => { + const updateFilters = jest.fn(); + const rendered = await renderWithEffects( + + + , + ); + expect(updateFilters).toHaveBeenLastCalledWith({ + kind: new EntityKindFilter('Components'), + }); + rendered.rerender( + + + , + ); + expect(updateFilters).toHaveBeenLastCalledWith({ + kind: new EntityKindFilter('Template'), + }); + }); }); diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx index ed54f1fa84..5124f95086 100644 --- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx +++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useMemo } from 'react'; import { capitalize, createStyles, @@ -61,6 +61,14 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) { }); const { updateFilters, queryParameters } = useEntityList(); + const queryParamKind = useMemo( + () => + ([queryParameters.kind].flat()[0] ?? initialFilter).toLocaleLowerCase( + 'en-US', + ), + [initialFilter, queryParameters], + ); + const [selectedKind, setSelectedKind] = useState( ([queryParameters.kind].flat()[0] ?? initialFilter).toLocaleLowerCase( 'en-US', @@ -73,6 +81,14 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) { }); }, [selectedKind, updateFilters]); + // Set selected Kind on query parameter updates; this happens at initial page load and from + // external updates to the page location. + useEffect(() => { + if (queryParamKind) { + setSelectedKind(queryParamKind); + } + }, [queryParamKind]); + // Before allKinds is loaded, or when a kind is entered manually in the URL, selectedKind may not // be present in allKinds. It should still be shown in the dropdown, but may not have the nice // enforced casing from the catalog-backend. This makes a key/value record for the Select options, From b713a987c8ceaf729257b3f90cee2538918f545e Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 7 Mar 2022 08:13:54 -0600 Subject: [PATCH 2/3] Fixed failing test Signed-off-by: Andre Wanlin --- .../CatalogKindHeader.test.tsx | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx index 7ce14817d6..7783278eda 100644 --- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx +++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx @@ -139,30 +139,34 @@ describe('', () => { it('responds to external queryParameters changes', async () => { const updateFilters = jest.fn(); const rendered = await renderWithEffects( - - - , + + + + + , ); expect(updateFilters).toHaveBeenLastCalledWith({ - kind: new EntityKindFilter('Components'), + kind: new EntityKindFilter('components'), }); rendered.rerender( - - - , + + + + + , ); expect(updateFilters).toHaveBeenLastCalledWith({ - kind: new EntityKindFilter('Template'), + kind: new EntityKindFilter('templates'), }); }); }); From 0f93aeaf8f980cf6cde4a3370962748ea19b8181 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 7 Mar 2022 10:26:13 -0600 Subject: [PATCH 3/3] Refactored based on feedback Signed-off-by: Andre Wanlin --- .../CatalogKindHeader.test.tsx | 4 ++-- .../CatalogKindHeader/CatalogKindHeader.tsx | 17 +++++++---------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx index 7783278eda..a7dc18eae2 100644 --- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx +++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx @@ -158,7 +158,7 @@ describe('', () => { @@ -166,7 +166,7 @@ describe('', () => { , ); expect(updateFilters).toHaveBeenLastCalledWith({ - kind: new EntityKindFilter('templates'), + kind: new EntityKindFilter('template'), }); }); }); diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx index 5124f95086..27184bafef 100644 --- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx +++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx @@ -59,20 +59,17 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) { .getEntityFacets({ facets: ['kind'] }) .then(response => response.facets.kind?.map(f => f.value).sort() || []); }); - const { updateFilters, queryParameters } = useEntityList(); + const { + updateFilters, + queryParameters: { kind: kindParameter }, + } = useEntityList(); const queryParamKind = useMemo( - () => - ([queryParameters.kind].flat()[0] ?? initialFilter).toLocaleLowerCase( - 'en-US', - ), - [initialFilter, queryParameters], + () => [kindParameter].flat()[0], + [kindParameter], ); - const [selectedKind, setSelectedKind] = useState( - ([queryParameters.kind].flat()[0] ?? initialFilter).toLocaleLowerCase( - 'en-US', - ), + queryParamKind ?? initialFilter, ); useEffect(() => {