Merge pull request #23724 from seatgeek/zh-hide-only-if-zero

Hide `EntityAutocompletePicker` only if there are zero available options

.changeset/moody-rice-jump.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Change behavior in EntityAutoCompletePicker to only hide filter if there are no available options. Previously the filter was hidden if there were <= 1 available options.

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.test.tsx

@@ -30,7 +30,7 @@ interface EntityFilters extends DefaultEntityFilters {
   options?: EntityOptionFilter;
 }
 
-const options = ['option1', 'option2', 'option3', 'option4'];
+const defaultOptions = ['option1', 'option2', 'option3', 'option4'];
 
 class EntityOptionFilter implements EntityFilter {
   constructor(readonly values: string[]) {}
@@ -46,20 +46,25 @@ class EntityOptionFilter implements EntityFilter {
   }
 }
 
-describe('<EntityAutocompletePicker/>', () => {
-  const mockCatalogApi: Partial<jest.Mocked<CatalogApi>> = {
+const makeMockCatalogApi = (
+  opts: string[] = defaultOptions,
+): Partial<jest.Mocked<CatalogApi>> => {
+  return {
     getEntityFacets: jest.fn().mockResolvedValue({
       facets: {
-        'spec.options': options.map((value, idx) => ({ value, count: idx })),
+        'spec.options': opts.map((value, idx) => ({ value, count: idx })),
       },
     }),
   };
+};
 
+describe('<EntityAutocompletePicker/>', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('renders all options', async () => {
+    const mockCatalogApi = makeMockCatalogApi();
     render(
       <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
         <MockEntityListContextProvider value={{}}>
@@ -83,12 +88,51 @@ describe('<EntityAutocompletePicker/>', () => {
     });
 
     fireEvent.click(screen.getByTestId('options-picker-expand'));
-    options.forEach(option => {
+    defaultOptions.forEach(option => {
       expect(screen.getByText(option)).toBeInTheDocument();
     });
   });
 
+  it('hides filter if there are no available options', async () => {
+    const mockCatalogApi = makeMockCatalogApi([]);
+    render(
+      <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
+        <MockEntityListContextProvider value={{}}>
+          <EntityAutocompletePicker<EntityFilters>
+            label="Options"
+            path="spec.options"
+            name="options"
+            Filter={EntityOptionFilter}
+          />
+        </MockEntityListContextProvider>
+      </TestApiProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.queryByText('Options')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders filter if there is one available option', async () => {
+    const mockCatalogApi = makeMockCatalogApi(['option1']);
+    render(
+      <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
+        <MockEntityListContextProvider value={{}}>
+          <EntityAutocompletePicker<EntityFilters>
+            label="Options"
+            path="spec.options"
+            name="options"
+            Filter={EntityOptionFilter}
+          />
+        </MockEntityListContextProvider>
+      </TestApiProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.queryByText('Options')).toBeInTheDocument();
+    });
+  });
+
   it('renders unique options in alphabetical order', async () => {
+    const mockCatalogApi = makeMockCatalogApi();
     render(
       <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
         <MockEntityListContextProvider value={{}}>
@@ -116,6 +160,7 @@ describe('<EntityAutocompletePicker/>', () => {
   });
 
   it('renders options with counts', async () => {
+    const mockCatalogApi = makeMockCatalogApi();
     render(
       <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
         <MockEntityListContextProvider value={{}}>
@@ -144,6 +189,7 @@ describe('<EntityAutocompletePicker/>', () => {
   });
 
   it('respects the query parameter filter value', async () => {
+    const mockCatalogApi = makeMockCatalogApi();
     const updateFilters = jest.fn();
     const queryParameters = { options: ['option3'] };
     render(
@@ -172,6 +218,7 @@ describe('<EntityAutocompletePicker/>', () => {
   });
 
   it('adds options to filters', async () => {
+    const mockCatalogApi = makeMockCatalogApi();
     const updateFilters = jest.fn();
     render(
       <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
@@ -201,6 +248,7 @@ describe('<EntityAutocompletePicker/>', () => {
   });
 
   it('removes options from filters', async () => {
+    const mockCatalogApi = makeMockCatalogApi();
     const updateFilters = jest.fn();
     render(
       <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
@@ -234,6 +282,7 @@ describe('<EntityAutocompletePicker/>', () => {
   });
 
   it('responds to external queryParameters changes', async () => {
+    const mockCatalogApi = makeMockCatalogApi();
     const updateFilters = jest.fn();
     const rendered = render(
       <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
@@ -280,6 +329,7 @@ describe('<EntityAutocompletePicker/>', () => {
   });
 
   it('filters available values by kind as default', async () => {
+    const mockCatalogApi = makeMockCatalogApi();
     render(
       <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
         <MockEntityListContextProvider
@@ -311,6 +361,7 @@ describe('<EntityAutocompletePicker/>', () => {
   });
 
   it('can be supplied with filters for available values', async () => {
+    const mockCatalogApi = makeMockCatalogApi();
     render(
       <TestApiProvider apis={[[catalogApiRef, mockCatalogApi]]}>
         <MockEntityListContextProvider

plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx

@@ -144,9 +144,6 @@ export function EntityAutocompletePicker<
     return null;
   }
 
-  // Hide if there are 1 or fewer options; nothing to pick from
-  if (availableOptions.length <= 1) return null;
-
   return (
     <Box className={classes.root} pb={1} pt={1}>
       <Typography className={classes.label} variant="button" component="label">