From cee1b358f97ab1516503750a51ff4efb999d633f Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Sat, 17 Feb 2024 13:30:54 -0600 Subject: [PATCH] Refactored to add DefaultFilters Signed-off-by: Andre Wanlin --- .../software-catalog/catalog-customization.md | 79 ++++++++++++++++--- plugins/catalog-react/api-report.md | 14 ++++ .../DefaultFilters/DefaultFilters.tsx | 57 +++++++++++++ .../src/components/DefaultFilters/index.ts | 18 +++++ plugins/catalog-react/src/components/index.ts | 1 + .../CatalogPage/DefaultCatalogPage.tsx | 24 ++---- 6 files changed, 166 insertions(+), 27 deletions(-) create mode 100644 plugins/catalog-react/src/components/DefaultFilters/DefaultFilters.tsx create mode 100644 plugins/catalog-react/src/components/DefaultFilters/index.ts diff --git a/docs/features/software-catalog/catalog-customization.md b/docs/features/software-catalog/catalog-customization.md index 5ee10c881e..b403a62e0d 100644 --- a/docs/features/software-catalog/catalog-customization.md +++ b/docs/features/software-catalog/catalog-customization.md @@ -153,7 +153,67 @@ const customActions: TableProps['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'; + + + + + } + /> + } +/>; +``` + +### 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'; + + + + + + + + + } + /> + } +/>; +``` + +### 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 = ( @@ -242,14 +310,7 @@ const routes = ( - - - - - - - - + } diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index 57fa247171..93596e33fd 100644 --- a/plugins/catalog-react/api-report.md +++ b/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 = { @@ -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, diff --git a/plugins/catalog-react/src/components/DefaultFilters/DefaultFilters.tsx b/plugins/catalog-react/src/components/DefaultFilters/DefaultFilters.tsx new file mode 100644 index 0000000000..0194e1b346 --- /dev/null +++ b/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 ( + <> + + + + + + + + + + ); +}; diff --git a/plugins/catalog-react/src/components/DefaultFilters/index.ts b/plugins/catalog-react/src/components/DefaultFilters/index.ts new file mode 100644 index 0000000000..d7debdea37 --- /dev/null +++ b/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'; diff --git a/plugins/catalog-react/src/components/index.ts b/plugins/catalog-react/src/components/index.ts index a805550b1b..e544287007 100644 --- a/plugins/catalog-react/src/components/index.ts +++ b/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'; diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx index 7dfd73ba22..d002552311 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx +++ b/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) { - - - - - - - - - + ) } content={