From 54b5c430c5bdaeb81b8cfde3bf15d14a99303bc8 Mon Sep 17 00:00:00 2001
From: Gustaf Lundh <gustaf.lundh@axis.com>
Date: Wed, 30 Nov 2022 15:48:09 +0100
Subject: [PATCH] Bring back queryParameterKind effect.

Signed-off-by: Gustaf Lundh <gustaf.lundh@axis.com>
---
 .../EntityKindPicker/EntityKindPicker.tsx     |  8 ++++
 .../CatalogKindHeader.test.tsx                | 38 ++++++++++++++++++-
 .../CatalogKindHeader/CatalogKindHeader.tsx   |  8 ++++
 3 files changed, 53 insertions(+), 1 deletion(-)

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('<CatalogKindHeader />', () => {
     });
   });
 
+  it('responds to external queryParameters changes', async () => {
+    const updateFilters = jest.fn();
+    const rendered = await renderWithEffects(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider
+          value={{
+            updateFilters,
+            queryParameters: { kind: ['components'] },
+          }}
+        >
+          <CatalogKindHeader />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+    expect(updateFilters).toHaveBeenLastCalledWith({
+      kind: new EntityKindFilter('components'),
+    });
+    rendered.rerender(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider
+          value={{
+            updateFilters,
+            queryParameters: { kind: ['template'] },
+          }}
+        >
+          <CatalogKindHeader />
+        </MockEntityListContextProvider>
+      </ApiProvider>,
+    );
+    await waitFor(() =>
+      expect(updateFilters).toHaveBeenLastCalledWith({
+        kind: new EntityKindFilter('template'),
+      })
+    );
+  });
+
   it('limits kinds when allowedKinds is set', async () => {
     await renderWithEffects(
       <ApiProvider apis={apis}>
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(() => {