paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2022-03-16 13:43:20 +01:00
parent c97fdfaed3
commit c689d7a94c
16 changed files with 131 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/lucky-scissors-play.md
+9
View File
@@ -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`
.changeset/nasty-chefs-dream.md
+16
View File
@@ -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>
```
.changeset/nice-seals-decide.md
+6
View File
@@ -0,0 +1,6 @@
---
'@backstage/plugin-api-docs': patch
'@backstage/plugin-techdocs': patch
---
Switched to using `CatalogFilterLayout` from `@backstage/plugin-catalog-react`.
docs/features/software-catalog/catalog-customization.md
+12 -12
View File
@@ -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>
...
};
plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx
+8 -13
View File
@@ -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>
plugins/catalog-react/api-report.md
+7
View File
@@ -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;
plugins/catalog-react/package.json
+1
View File
@@ -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",
plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx → plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
+25 -4
View File
@@ -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;
plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx → plugins/catalog-react/src/components/CatalogFilterLayout/index.ts
+1 -11
View File
@@ -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';
plugins/catalog-react/src/components/index.ts
+1
View File
@@ -14,6 +14,7 @@
* limitations under the License.
*/
export * from './CatalogFilterLayout';
export * from './EntityKindPicker';
export * from './EntityLifecyclePicker';
export * from './EntityOwnerPicker';
plugins/catalog/api-report.md
+10 -12
View File
@@ -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(
plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
+7 -11
View File
@@ -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>
plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx
-27
View File
@@ -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 (
<Grid container style={{ position: 'relative' }}>
{props.children}
</Grid>
);
}
plugins/catalog/src/components/FilteredEntityLayout/index.ts
+21 -3
View File
@@ -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;
plugins/techdocs/package.json
-1
View File
@@ -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",
plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx
+7 -11
View File
@@ -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) => {
</SupportButton>
</ContentHeader>
<EntityListProvider>
<FilteredEntityLayout>
<FilterContainer>
<CatalogFilterLayout>
<CatalogFilterLayout.Filters>
<TechDocsPicker />
<UserListPicker initialFilter={initialFilter} />
<EntityOwnerPicker />
<EntityTagPicker />
</FilterContainer>
<EntityListContainer>
</CatalogFilterLayout.Filters>
<CatalogFilterLayout.Content>
<EntityListDocsTable actions={actions} columns={columns} />
</EntityListContainer>
</FilteredEntityLayout>
</CatalogFilterLayout.Content>
</CatalogFilterLayout>
</EntityListProvider>
</Content>
</TechDocsPageWrapper>