Refactored to add DefaultFilters

Signed-off-by: Andre Wanlin <awanlin@spotify.com>

docs/features/software-catalog/catalog-customization.md

@@ -153,7 +153,67 @@ const customActions: TableProps<CatalogTableRow>['actions'] = [
 
 The above customization will override the existing actions. Currently the only way to keep them and add your own is to also include the existing actions in your array by copying them from the [`defaultActions`](https://github.com/backstage/backstage/blob/57397e7d6d2d725712c439f4ab93f2ac6aa27bf8/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx#L113-L168).
 
-## Custom Filters
+## Customize Filters
+
+There are tree options you have for filters: adjusting the existing filters with props, adding or removing the default filters, or creating a brand new custom filter. The following sections cover these cases
+
+### Default Filter Props
+
+There is a set of default filters that you can use, they surface all the props mentioned earlier in this document. Here's how they can be used:
+
+```tsx title="packages/app/src/App.tsx"
+import { DefaultFilters } from '@backstage/plugin-catalog-react';
+
+<Route
+  path="/catalog"
+  element={
+    <CatalogIndexPage
+      filters={
+        <>
+          <DefaultFilters
+            initialKind="Domain"
+            initiallySelectedFilter="all"
+            ownerPickerMode="all"
+          />
+        </>
+      }
+    />
+  }
+/>;
+```
+
+### Removing Default Filters
+
+You may have reasons not use the Lifecycle, Tag, and Processing Status filters, here's an example of how you would remove them:
+
+```tsx title="packages/app/src/App.tsx"
+import {
+  EntityKindPicker,
+  EntityTypePicker,
+  UserListPicker,
+  EntityOwnerPicker,
+  EntityNamespacePicker,
+} from '@backstage/plugin-catalog-react';
+
+<Route
+  path="/catalog"
+  element={
+    <CatalogIndexPage
+      filters={
+        <>
+          <EntityKindPicker />
+          <EntityTypePicker />
+          <UserListPicker />
+          <EntityOwnerPicker />
+          <EntityNamespacePicker />
+        </>
+      }
+    />
+  }
+/>;
+```
+
+### Custom Filters
 
 You can add custom filters. For example, suppose that I want to allow filtering by a custom annotation added to entities, `company.com/security-tier`. Here is how we can build a filter to support that need.
 
@@ -230,6 +290,14 @@ export const EntitySecurityTierPicker = () => {
 Now we can add the component to `CatalogIndexPage`:
 
 ```tsx title="packages/app/src/App.tsx"
+{
+  /* highlight-add-start */
+}
+import { DefaultFilters } from '@backstage/plugin-catalog-react';
+{
+  /* highlight-add-end */
+}
+
 const routes = (
   <FlatRoutes>
     <Navigate key="/" to="catalog" />
@@ -242,14 +310,7 @@ const routes = (
         <CatalogIndexPage
           filters={
             <>
-              <EntityKindPicker />
-              <EntityTypePicker />
-              <UserListPicker />
-              <EntityOwnerPicker />
-              <EntityLifecyclePicker />
-              <EntityTagPicker />
-              <EntityProcessingStatusPicker />
-              <EntityNamespacePicker />
+              <DefaultFilters />
               <EntitySecurityTierPicker />
             </>
           }

plugins/catalog-react/api-report.md

@@ -12,6 +12,7 @@ import { ComponentEntity } from '@backstage/catalog-model';
 import { ComponentProps } from 'react';
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import { Entity } from '@backstage/catalog-model';
+import { EntityOwnerPickerProps as EntityOwnerPickerProps_2 } from '@backstage/plugin-catalog-react';
 import { IconButton } from '@material-ui/core';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { InfoCardVariants } from '@backstage/core-components';
@@ -28,6 +29,7 @@ import { SystemEntity } from '@backstage/catalog-model';
 import { TableColumn } from '@backstage/core-components';
 import { TableOptions } from '@backstage/core-components';
 import { TextFieldProps } from '@material-ui/core';
+import { UserListFilterKind as UserListFilterKind_2 } from '@backstage/plugin-catalog-react';
 
 // @public (undocumented)
 export type AllowedEntityFilters<T extends DefaultEntityFilters> = {
@@ -172,6 +174,18 @@ export function defaultEntityPresentation(
   },
 ): EntityRefPresentationSnapshot;
 
+// @public (undocumented)
+export const DefaultFilters: (
+  props: DefaultFiltersProps,
+) => React_2.JSX.Element;
+
+// @public
+export type DefaultFiltersProps = {
+  initialKind?: string;
+  initiallySelectedFilter?: UserListFilterKind_2;
+  ownerPickerMode?: EntityOwnerPickerProps_2['mode'];
+};
+
 // @public (undocumented)
 export function EntityAutocompletePicker<
   T extends DefaultEntityFilters = DefaultEntityFilters,

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

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  EntityKindPicker,
+  EntityTypePicker,
+  UserListPicker,
+  EntityOwnerPicker,
+  EntityLifecyclePicker,
+  EntityTagPicker,
+  EntityProcessingStatusPicker,
+  EntityNamespacePicker,
+  UserListFilterKind,
+  EntityOwnerPickerProps,
+} from '@backstage/plugin-catalog-react';
+import React from 'react';
+
+/**
+ * Props for default filters.
+ *
+ * @public
+ */
+export type DefaultFiltersProps = {
+  initialKind?: string;
+  initiallySelectedFilter?: UserListFilterKind;
+  ownerPickerMode?: EntityOwnerPickerProps['mode'];
+};
+
+/** @public */
+export const DefaultFilters = (props: DefaultFiltersProps) => {
+  const { initialKind, initiallySelectedFilter, ownerPickerMode } = props;
+  return (
+    <>
+      <EntityKindPicker initialFilter={initialKind} />
+      <EntityTypePicker />
+      <UserListPicker initialFilter={initiallySelectedFilter} />
+      <EntityOwnerPicker mode={ownerPickerMode} />
+      <EntityLifecyclePicker />
+      <EntityTagPicker />
+      <EntityProcessingStatusPicker />
+      <EntityNamespacePicker />
+    </>
+  );
+};

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

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export type { DefaultFiltersProps } from './DefaultFilters';
+export { DefaultFilters } from './DefaultFilters';

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

@@ -15,6 +15,7 @@
  */
 
 export * from './CatalogFilterLayout';
+export * from './DefaultFilters';
 export * from './EntityKindPicker';
 export * from './EntityLifecyclePicker';
 export * from './EntityOwnerPicker';

plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx

@@ -26,16 +26,8 @@ import {
 import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
   CatalogFilterLayout,
-  EntityLifecyclePicker,
   EntityListProvider,
-  EntityProcessingStatusPicker,
-  EntityOwnerPicker,
-  EntityTagPicker,
-  EntityTypePicker,
   UserListFilterKind,
-  UserListPicker,
-  EntityKindPicker,
-  EntityNamespacePicker,
   EntityOwnerPickerProps,
 } from '@backstage/plugin-catalog-react';
 import React, { ReactNode } from 'react';
@@ -47,6 +39,7 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { CatalogTableColumnsFunc } from '../CatalogTable/types';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import { usePermission } from '@backstage/plugin-permission-react';
+import { DefaultFilters } from '@backstage/plugin-catalog-react';
 
 /** @internal */
 export type BaseCatalogPageProps = {
@@ -123,16 +116,11 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
     <BaseCatalogPage
       filters={
         filters ?? (
-          <>
-            <EntityKindPicker initialFilter={initialKind} />
-            <EntityTypePicker />
-            <UserListPicker initialFilter={initiallySelectedFilter} />
-            <EntityOwnerPicker mode={ownerPickerMode} />
-            <EntityLifecyclePicker />
-            <EntityTagPicker />
-            <EntityProcessingStatusPicker />
-            <EntityNamespacePicker />
-          </>
+          <DefaultFilters
+            initialKind={initialKind}
+            initiallySelectedFilter={initiallySelectedFilter}
+            ownerPickerMode={ownerPickerMode}
+          />
         )
       }
       content={