diff --git a/.changeset/lucky-scissors-play.md b/.changeset/lucky-scissors-play.md new file mode 100644 index 0000000000..dca966d515 --- /dev/null +++ b/.changeset/lucky-scissors-play.md @@ -0,0 +1,9 @@ +--- +'@backstage/plugin-catalog': patch +--- + +**DEPRECATION**: The `FilteredEntityLayout` and related components have been moved to `@backstage/plugin-catalog-react` and renamed. The original components are now deprecated and should be replaced as follows: + +- `FilteredEntityLayout` -> `CatalogFilterLayout` +- `FilterContainer` -> `CatalogFilterLayout.Filters` +- `EntityListContainer` -> `CatalogFilterLayout.Content` diff --git a/.changeset/nasty-chefs-dream.md b/.changeset/nasty-chefs-dream.md new file mode 100644 index 0000000000..198f280fcc --- /dev/null +++ b/.changeset/nasty-chefs-dream.md @@ -0,0 +1,16 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Added `CatalogFilterLayout`, which replaces `FilteredEntityLayout` from `@backstage/plugin-catalog`, as well as `FilterContainer` and `EntityListContainer`. It is used like this: + +```tsx + + + {/* filter drawer, for example and friends */} + + + {/* content view, for example a */} + + +``` diff --git a/.changeset/nice-seals-decide.md b/.changeset/nice-seals-decide.md new file mode 100644 index 0000000000..999b2db6a5 --- /dev/null +++ b/.changeset/nice-seals-decide.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-techdocs': patch +--- + +Switched to using `CatalogFilterLayout` from `@backstage/plugin-catalog-react`. diff --git a/docs/features/software-catalog/catalog-customization.md b/docs/features/software-catalog/catalog-customization.md index 80c9458aee..1b5535a464 100644 --- a/docs/features/software-catalog/catalog-customization.md +++ b/docs/features/software-catalog/catalog-customization.md @@ -41,16 +41,16 @@ export const CustomCatalogPage = ({ All your software catalog entities - - + + - - + + - - + + @@ -151,18 +151,18 @@ export const CustomCatalogPage = ({ return ( ... - - + + + + ... }; diff --git a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx index d38383f004..9fc6b2c3c2 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx @@ -24,13 +24,7 @@ import { TableProps, } from '@backstage/core-components'; import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; -import { - CatalogTable, - CatalogTableRow, - FilteredEntityLayout, - EntityListContainer, - FilterContainer, -} from '@backstage/plugin-catalog'; +import { CatalogTable, CatalogTableRow } from '@backstage/plugin-catalog'; import { EntityKindPicker, EntityLifecyclePicker, @@ -40,6 +34,7 @@ import { EntityTypePicker, UserListFilterKind, UserListPicker, + CatalogFilterLayout, } from '@backstage/plugin-catalog-react'; import React from 'react'; import { registerComponentRouteRef } from '../../routes'; @@ -95,22 +90,22 @@ export const DefaultApiExplorerPage = ({ All your APIs - - + + - + + - - + + diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index 265fce417d..a1541b555e 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -63,6 +63,13 @@ export { CatalogApi }; // @public export const catalogApiRef: ApiRef; +// @public (undocumented) +export const CatalogFilterLayout: { + (props: { children: React_2.ReactNode }): JSX.Element; + Filters: (props: { children: React_2.ReactNode }) => JSX.Element; + Content: (props: { children: React_2.ReactNode }) => JSX.Element; +}; + // @public (undocumented) export type CatalogReactComponentsNameToClassKey = { CatalogReactUserListPicker: CatalogReactUserListPickerClassKey; diff --git a/plugins/catalog-react/package.json b/plugins/catalog-react/package.json index 5ba52e8ac7..39180ad5fb 100644 --- a/plugins/catalog-react/package.json +++ b/plugins/catalog-react/package.json @@ -42,6 +42,7 @@ "@backstage/integration": "^0.8.0", "@backstage/plugin-permission-common": "^0.5.2", "@backstage/plugin-permission-react": "^0.3.3", + "@backstage/theme": "^0.2.15", "@backstage/types": "^0.1.3", "@backstage/version-bridge": "^0.1.2", "@material-ui/core": "^4.12.2", diff --git a/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx similarity index 78% rename from plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx rename to plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx index 4c0d17599d..751eb35f1d 100644 --- a/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx +++ b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { BackstageTheme } from '@backstage/theme'; +import React, { useState } from 'react'; import { Box, Button, @@ -25,10 +25,10 @@ import { useTheme, } from '@material-ui/core'; import FilterListIcon from '@material-ui/icons/FilterList'; -import React, { useState } from 'react'; +import { BackstageTheme } from '@backstage/theme'; /** @public */ -export function FilterContainer(props: { children: React.ReactNode }) { +export const Filters = (props: { children: React.ReactNode }) => { const isMidSizeScreen = useMediaQuery(theme => theme.breakpoints.down('md'), ); @@ -69,4 +69,25 @@ export function FilterContainer(props: { children: React.ReactNode }) { {props.children} ); -} +}; + +/** @public */ +export const Content = (props: { children: React.ReactNode }) => { + return ( + + {props.children} + + ); +}; + +/** @public */ +export const CatalogFilterLayout = (props: { children: React.ReactNode }) => { + return ( + + {props.children} + + ); +}; + +CatalogFilterLayout.Filters = Filters; +CatalogFilterLayout.Content = Content; diff --git a/plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/index.ts similarity index 71% rename from plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx rename to plugins/catalog-react/src/components/CatalogFilterLayout/index.ts index d210d551fb..b69aab56ed 100644 --- a/plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx +++ b/plugins/catalog-react/src/components/CatalogFilterLayout/index.ts @@ -14,14 +14,4 @@ * limitations under the License. */ -import { Grid } from '@material-ui/core'; -import React from 'react'; - -/** @public */ -export function EntityListContainer(props: { children: React.ReactNode }) { - return ( - - {props.children} - - ); -} +export { CatalogFilterLayout } from './CatalogFilterLayout'; diff --git a/plugins/catalog-react/src/components/index.ts b/plugins/catalog-react/src/components/index.ts index 807d6bb702..7a26a72bf9 100644 --- a/plugins/catalog-react/src/components/index.ts +++ b/plugins/catalog-react/src/components/index.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +export * from './CatalogFilterLayout'; export * from './EntityKindPicker'; export * from './EntityLifecyclePicker'; export * from './EntityOwnerPicker'; diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 43cde23c57..eddbe913d7 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -283,10 +283,10 @@ export interface EntityLinksCardProps { // @public (undocumented) export type EntityLinksEmptyStateClassKey = 'code'; -// @public (undocumented) -export function EntityListContainer(props: { - children: React_2.ReactNode; -}): JSX.Element; +// @public @deprecated (undocumented) +export const EntityListContainer: (props: { + children: ReactNode; +}) => JSX.Element; // @public export function EntityOrphanWarning(): JSX.Element; @@ -319,15 +319,13 @@ export interface EntitySwitchProps { children: ReactNode; } -// @public (undocumented) -export function FilterContainer(props: { - children: React_2.ReactNode; -}): JSX.Element; +// @public @deprecated (undocumented) +export const FilterContainer: (props: { children: ReactNode }) => JSX.Element; -// @public (undocumented) -export function FilteredEntityLayout(props: { - children: React_2.ReactNode; -}): JSX.Element; +// @public @deprecated (undocumented) +export const FilteredEntityLayout: (props: { + children: React.ReactNode; +}) => JSX.Element; // @public export function hasCatalogProcessingErrors( diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx index 8bb9bae764..2a2861ac29 100644 --- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx @@ -25,6 +25,7 @@ import { } from '@backstage/core-components'; import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api'; import { + CatalogFilterLayout, EntityLifecyclePicker, EntityListProvider, EntityOwnerPicker, @@ -36,11 +37,6 @@ import { import React from 'react'; import { createComponentRouteRef } from '../../routes'; import { CatalogTable, CatalogTableRow } from '../CatalogTable'; -import { - FilteredEntityLayout, - EntityListContainer, - FilterContainer, -} from '../FilteredEntityLayout'; import { CatalogKindHeader } from '../CatalogKindHeader'; /** @@ -71,18 +67,18 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) { /> All your software catalog entities - - + + - - + + - - + + diff --git a/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx b/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx deleted file mode 100644 index 8e595fe5cd..0000000000 --- a/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Copyright 2021 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 { Grid } from '@material-ui/core'; -import React from 'react'; - -/** @public */ -export function FilteredEntityLayout(props: { children: React.ReactNode }) { - return ( - - {props.children} - - ); -} diff --git a/plugins/catalog/src/components/FilteredEntityLayout/index.ts b/plugins/catalog/src/components/FilteredEntityLayout/index.ts index ded61a4edc..892aa34147 100644 --- a/plugins/catalog/src/components/FilteredEntityLayout/index.ts +++ b/plugins/catalog/src/components/FilteredEntityLayout/index.ts @@ -14,6 +14,24 @@ * limitations under the License. */ -export { FilteredEntityLayout } from './FilteredEntityLayout'; -export { FilterContainer } from './FilterContainer'; -export { EntityListContainer } from './EntityListContainer'; +import { CatalogFilterLayout } from '@backstage/plugin-catalog-react'; + +/** + * @public + * @deprecated Use `FilteredCatalogLayout` from `@backstage/plugin-catalog-react` instead. + */ +export const FilteredEntityLayout = CatalogFilterLayout as (props: { + children: React.ReactNode; +}) => JSX.Element; + +/** + * @public + * @deprecated Use `FilteredCatalogLayout.Filters` from `@backstage/plugin-catalog-react` instead. + */ +export const FilterContainer = CatalogFilterLayout.Filters; + +/** + * @public + * @deprecated Use `FilteredCatalogLayout.Content` from `@backstage/plugin-catalog-react` instead. + */ +export const EntityListContainer = CatalogFilterLayout.Content; diff --git a/plugins/techdocs/package.json b/plugins/techdocs/package.json index e02e4e1fa1..54e8aa4c28 100644 --- a/plugins/techdocs/package.json +++ b/plugins/techdocs/package.json @@ -42,7 +42,6 @@ "@backstage/errors": "^0.2.2", "@backstage/integration": "^0.8.0", "@backstage/integration-react": "^0.1.25", - "@backstage/plugin-catalog": "^0.10.0", "@backstage/plugin-catalog-react": "^0.9.0", "@backstage/plugin-search": "^0.7.3", "@backstage/theme": "^0.2.15", diff --git a/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx b/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx index 4dcff501ed..bdbb4877ac 100644 --- a/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx +++ b/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx @@ -23,11 +23,7 @@ import { TableProps, } from '@backstage/core-components'; import { - EntityListContainer, - FilterContainer, - FilteredEntityLayout, -} from '@backstage/plugin-catalog'; -import { + CatalogFilterLayout, EntityListProvider, EntityOwnerPicker, EntityTagPicker, @@ -65,17 +61,17 @@ export const DefaultTechDocsHome = (props: DefaultTechDocsHomeProps) => { - - + + - - + + - - + +