catalog: group, rename, and move filter components to catalog-react

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
backstage · Mar 16, 2022 · c689d7a · c689d7a
1 parent c97fdfa
commit c689d7a
Show file tree

Hide file tree

Showing 16 changed files with 131 additions and 105 deletions.
diff --git a/.changeset/lucky-scissors-play.md 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
@@ -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
+<CatalogFilterLayout>
+  <CatalogFilterLayout.Filters>
+    {/* filter drawer, for example <EntityTypePicker /> and friends */}
+  </CatalogFilterLayout.Filters>
+  <CatalogFilterLayout.Content>
+    {/* content view, for example a <CatalogTable /> */}
+  </CatalogFilterLayout.Content>
+</CatalogFilterLayout>
+```
diff --git a/.changeset/nice-seals-decide.md 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
@@ -41,16 +41,16 @@ export const CustomCatalogPage = ({
             <CreateButton title="Create Component" to={createComponentLink()} />
             <SupportButton>All your software catalog entities</SupportButton>
           </ContentHeader>
-          <FilteredEntityLayout>
-            <FilterContainer>
+          <CatalogFilterLayout>
+            <CatalogFilterLayout.Filters>
               <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
               <EntityTagPicker />
-            </FilterContainer>
-            <EntityListContainer>
+            </CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>
               <CatalogTable columns={columns} actions={actions} />
-            </EntityListContainer>
-          </FilteredEntityLayout>
+            </CatalogFilterLayout.Content>
+          </CatalogFilterLayout>
         </Content>
       </EntityListProvider>
     </PageWithHeader>
@@ -151,18 +151,18 @@ export const CustomCatalogPage = ({
   return (
     ...
         <EntityListProvider>
-          <FilteredEntityLayout>
-            <FilterContainer>
+          <CatalogFilterLayout>
+            <CatalogFilterLayout.Filters>
               <EntityKindPicker initialFilter="component" hidden />
               <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
 +             <EntitySecurityTierPicker />
               <EntityTagPicker />
-            <FilterContainer>
-            <EntityListContainer>
+            <CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>
               <CatalogTable columns={columns} actions={actions} />
-            </EntityListContainer>
-          </FilteredEntityLayout>
+            </CatalogFilterLayout.Content>
+          </CatalogFilterLayout>
         </EntityListProvider>
     ...
 };

diff --git 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 = ({
           <SupportButton>All your APIs</SupportButton>
         </ContentHeader>
         <EntityListProvider>
-          <FilteredEntityLayout>
-            <FilterContainer>
+          <CatalogFilterLayout>
+            <CatalogFilterLayout.Filters>
               <EntityKindPicker initialFilter="api" hidden />
               <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
               <EntityOwnerPicker />
               <EntityLifecyclePicker />
               <EntityTagPicker />
-            </FilterContainer>
-            <EntityListContainer>
+            </CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>
               <CatalogTable
                 columns={columns || defaultColumns}
                 actions={actions}
               />
-            </EntityListContainer>
-          </FilteredEntityLayout>
+            </CatalogFilterLayout.Content>
+          </CatalogFilterLayout>
         </EntityListProvider>
       </Content>
     </PageWithHeader>

diff --git 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<CatalogApi>;
 
+// @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
@@ -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/.../FilteredEntityLayout/FilterContainer.tsx → ...talogFilterLayout/CatalogFilterLayout.tsx b/.../FilteredEntityLayout/FilterContainer.tsx → ...talogFilterLayout/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<BackstageTheme>(theme =>
     theme.breakpoints.down('md'),
   );
@@ -69,4 +69,25 @@ export function FilterContainer(props: { children: React.ReactNode }) {
       {props.children}
     </Grid>
   );
-}
+};
+
+/** @public */
+export const Content = (props: { children: React.ReactNode }) => {
+  return (
+    <Grid item xs={12} lg={10}>
+      {props.children}
+    </Grid>
+  );
+};
+
+/** @public */
+export const CatalogFilterLayout = (props: { children: React.ReactNode }) => {
+  return (
+    <Grid container style={{ position: 'relative' }}>
+      {props.children}
+    </Grid>
+  );
+};
+
+CatalogFilterLayout.Filters = Filters;
+CatalogFilterLayout.Content = Content;
diff --git a/...teredEntityLayout/EntityListContainer.tsx → ...c/components/CatalogFilterLayout/index.ts b/...teredEntityLayout/EntityListContainer.tsx → ...c/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 (
-    <Grid item xs={12} lg={10}>
-      {props.children}
-    </Grid>
-  );
-}
+export { CatalogFilterLayout } from './CatalogFilterLayout';
diff --git 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
@@ -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
@@ -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) {
             />
             <SupportButton>All your software catalog entities</SupportButton>
           </ContentHeader>
-          <FilteredEntityLayout>
-            <FilterContainer>
+          <CatalogFilterLayout>
+            <CatalogFilterLayout.Filters>
               <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
               <EntityOwnerPicker />
               <EntityLifecyclePicker />
               <EntityTagPicker />
-            </FilterContainer>
-            <EntityListContainer>
+            </CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>
               <CatalogTable columns={columns} actions={actions} />
-            </EntityListContainer>
-          </FilteredEntityLayout>
+            </CatalogFilterLayout.Content>
+          </CatalogFilterLayout>
         </Content>
       </EntityListProvider>
     </PageWithHeader>

diff --git a/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx b/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx
diff --git 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
@@ -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",