Merge pull request #7524 from GunnerStraiker1/entity-type-picker-hidden

EntityTypePicker can be hidden and initially set

.changeset/perfect-ducks-promise.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+EntityTypePicker can be hidden and have an initial filter value set, similar to EntityKindPicker

plugins/catalog-react/api-report.md

@@ -658,10 +658,20 @@ export class EntityTypeFilter implements EntityFilter {
   readonly value: string | string[];
 }
 
+// Warning: (ae-missing-release-tag) "EntityTypeFilterProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export type EntityTypeFilterProps = {
+  initialFilter?: string;
+  hidden?: boolean;
+};
+
 // Warning: (ae-missing-release-tag) "EntityTypePicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const EntityTypePicker: () => JSX.Element | null;
+export const EntityTypePicker: (
+  props: EntityTypeFilterProps,
+) => JSX.Element | null;
 
 // Warning: (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts

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

@@ -121,4 +121,26 @@ describe('<EntityTypePicker/>', () => {
 
     expect(updateFilters).toHaveBeenLastCalledWith({ type: undefined });
   });
+
+  it('respects the query parameter filter value', async () => {
+    const updateFilters = jest.fn();
+    const queryParameters = { type: 'tool' };
+    await renderWithEffects(
+      <ApiProvider apis={apis}>
+        <MockEntityListContextProvider
+          value={{
+            updateFilters,
+            queryParameters,
+          }}
+        >
+          <EntityTypePicker initialFilter="tool" hidden />
+        </MockEntityListContextProvider>
+        ,
+      </ApiProvider>,
+    );
+
+    expect(updateFilters).toHaveBeenLastCalledWith({
+      type: new EntityTypeFilter(['tool']),
+    });
+  });
 });

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

@@ -22,7 +22,13 @@ import { useEntityTypeFilter } from '../../hooks/useEntityTypeFilter';
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 import { Select } from '@backstage/core-components';
 
-export const EntityTypePicker = () => {
+export type EntityTypeFilterProps = {
+  initialFilter?: string;
+  hidden?: boolean;
+};
+
+export const EntityTypePicker = (props: EntityTypeFilterProps) => {
+  const { hidden, initialFilter } = props;
   const alertApi = useApi(alertApiRef);
   const { error, availableTypes, selectedTypes, setSelectedTypes } =
     useEntityTypeFilter();
@@ -34,7 +40,10 @@ export const EntityTypePicker = () => {
         severity: 'error',
       });
     }
-  }, [error, alertApi]);
+    if (initialFilter) {
+      setSelectedTypes([initialFilter]);
+    }
+  }, [error, alertApi, initialFilter, setSelectedTypes]);
 
   if (availableTypes.length === 0 || error) return null;
 
@@ -46,7 +55,7 @@ export const EntityTypePicker = () => {
     })),
   ];
 
-  return (
+  return hidden ? null : (
     <Box pb={1} pt={1}>
       <Select
         label="Type"

plugins/catalog-react/src/components/EntityTypePicker/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { EntityTypePicker } from './EntityTypePicker';
+export type { EntityTypeFilterProps } from './EntityTypePicker';