Merge pull request #9791 from backstage/techdocs/fix-search

[TechDocs] Set entity filters as they change in TechDocsSearchBar

plugins/techdocs/src/reader/components/TechDocsSearch.test.tsx

@@ -23,7 +23,7 @@ import {
   waitFor,
   within,
 } from '@testing-library/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { TechDocsSearch } from './TechDocsSearch';
 
 const entityId = {
@@ -70,6 +70,7 @@ describe('<TechDocsPage />', () => {
       expect(rendered.getByTestId('techdocs-search-bar')).toBeInTheDocument();
     });
   });
+
   it('should trigger query when autocomplete input changed', async () => {
     const query = () => singleResult;
     const querySpy = jest.fn(query);
@@ -119,4 +120,61 @@ describe('<TechDocsPage />', () => {
       );
     });
   });
+
+  it('should update filter values when a new entityName is provided', async () => {
+    const query = () => singleResult;
+    const querySpy = jest.fn(query);
+    const searchApi = { query: querySpy };
+    const apiRegistry = TestApiRegistry.from([searchApiRef, searchApi]);
+    const newEntityId = {
+      name: 'test-diff',
+      namespace: 'testspace-diff',
+      kind: 'TestableDiff',
+    };
+
+    const WrappedSearchBar = () => {
+      const [entityName, setEntityName] = useState(entityId);
+      return wrapInTestApp(
+        <ApiProvider apis={apiRegistry}>
+          <button onClick={() => setEntityName(newEntityId)}>
+            Update Entity
+          </button>
+          <TechDocsSearch entityId={entityName} debounceTime={0} />
+        </ApiProvider>,
+      );
+    };
+
+    await act(async () => {
+      const rendered = render(<WrappedSearchBar />);
+
+      await singleResult;
+      expect(querySpy).toBeCalledWith({
+        filters: {
+          kind: 'Testable',
+          name: 'test',
+          namespace: 'testspace',
+        },
+        pageCursor: '',
+        term: '',
+        types: ['techdocs'],
+      });
+
+      const button = rendered.getByText('Update Entity');
+      button.click();
+
+      await singleResult;
+      await waitFor(() =>
+        expect(querySpy).toBeCalledWith({
+          filters: {
+            kind: 'TestableDiff',
+            name: 'test-diff',
+            namespace: 'testspace-diff',
+          },
+          pageCursor: '',
+          term: '',
+          types: ['techdocs'],
+        }),
+      );
+    });
+  });
 });

plugins/techdocs/src/reader/components/TechDocsSearch.tsx

@@ -64,6 +64,7 @@ const TechDocsSearchBar = ({
   const {
     term,
     setTerm,
+    setFilters,
     result: { loading, value: searchVal },
   } = useSearch();
   const classes = useStyles();
@@ -87,6 +88,20 @@ const TechDocsSearchBar = ({
 
   useDebounce(() => setTerm(value), debounceTime, [value]);
 
+  // Update the filter context when the entityId changes, e.g. when the search
+  // bar continues to be rendered, navigating between different TechDocs sites.
+  const { kind, name, namespace } = entityId;
+  useEffect(() => {
+    setFilters(prevFilters => {
+      return {
+        ...prevFilters,
+        kind,
+        namespace,
+        name,
+      };
+    });
+  }, [kind, namespace, name, setFilters]);
+
   const handleQuery = (e: ChangeEvent<HTMLInputElement>) => {
     if (!open) {
       setOpen(true);