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) => {
-
-
+
+
-
-
+
+
-
-
+
+