diff --git a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
index b0d1565cfb..e0564d170e 100644
--- a/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityKindPicker/EntityKindPicker.tsx
@@ -44,6 +44,14 @@ function useEntityKindFilter(opts: { initialFilter: string }): {
queryParamKind ?? filters.kind?.value ?? opts.initialFilter,
);
+ // Set selected kinds on query parameter updates; this happens at initial page load and from
+ // external updates to the page location.
+ useEffect(() => {
+ if (queryParamKind) {
+ setSelectedKind(queryParamKind);
+ }
+ }, [queryParamKind]);
+
// Set selected kind from filters; this happens when the kind filter is
// updated from another component
useEffect(() => {
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
index 67481c5488..6f5e8dc904 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.test.tsx
@@ -15,7 +15,7 @@
*/
import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
import { GetEntityFacetsResponse } from '@backstage/catalog-client';
import { Entity } from '@backstage/catalog-model';
import {
@@ -137,6 +137,42 @@ describe('', () => {
});
});
+ it('responds to external queryParameters changes', async () => {
+ const updateFilters = jest.fn();
+ const rendered = await renderWithEffects(
+
+
+
+
+ ,
+ );
+ expect(updateFilters).toHaveBeenLastCalledWith({
+ kind: new EntityKindFilter('components'),
+ });
+ rendered.rerender(
+
+
+
+
+ ,
+ );
+ await waitFor(() =>
+ expect(updateFilters).toHaveBeenLastCalledWith({
+ kind: new EntityKindFilter('template'),
+ })
+ );
+ });
+
it('limits kinds when allowedKinds is set', async () => {
await renderWithEffects(
diff --git a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
index 49eec1982d..f88173706f 100644
--- a/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
+++ b/plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx
@@ -76,6 +76,14 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) {
queryParamKind ?? filters.kind?.value ?? initialFilter,
);
+ // Set selected kinds on query parameter updates; this happens at initial page load and from
+ // external updates to the page location.
+ useEffect(() => {
+ if (queryParamKind) {
+ setSelectedKind(queryParamKind);
+ }
+ }, [queryParamKind]);
+
// Set selected kind from filters; this happens when the kind filter is
// updated from another component
useEffect(() => {