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

Merge branch 'generic-grid-page' into catalog-filter-accordion

Browse Source
This commit is contained in:
Philipp Hugenroth
2021-07-12 17:45:07 +02:00
parent 0679cfda39 ac767e5044
commit c8572ada50
12 changed files with 165 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core-components/src/layout/Header/Header.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
type HeaderStyles = ReturnType<typeof useStyles>;
type Props = {
export type Props = {
component?: ReactNode;
pageTitleOverride?: string;
style?: CSSProperties;
plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx → packages/core-components/src/layout/TablePage/Layout.tsx
+16 -21
View File
@@ -16,25 +16,20 @@
import React from 'react';
import { Header, Page } from '@backstage/core-components';
import { useApi, configApiRef } from '@backstage/core-plugin-api';
import { Header, Page } from '../../';
import { Props as HeaderProps } from '../../layout/Header/Header';
type Props = {
children?: React.ReactNode;
};
export const ApiExplorerLayout = ({ children }: Props) => {
const configApi = useApi(configApiRef);
const generatedSubtitle = `${
configApi.getOptionalString('organization.name') ?? 'Backstage'
} API Explorer`;
return (
<Page themeId="apis">
<Header
title="APIs"
subtitle={generatedSubtitle}
pageTitleOverride="APIs"
/>
{children}
</Page>
);
};
export interface IProps extends HeaderProps {
themeId: string;
}
export const Layout = ({
themeId,
children,
...props
}: React.PropsWithChildren<IProps>) => (
<Page themeId={themeId}>
<Header {...props} />
{children}
</Page>
);
packages/core-components/src/layout/TablePage/TablePage.tsx
+77
View File
@@ -0,0 +1,77 @@
/*
* Copyright 2020 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 React from 'react';
import { Grid } from '@material-ui/core';
import { Content, ContentHeader, SupportButton, Button } from '../..';
import { Layout, IProps as LayoutProps } from './Layout';
import { Link as RouterLink } from 'react-router-dom';
interface ILinkProps {
contentLink?: string;
contentLinkText?: string;
}
type IProps = LayoutProps &
ILinkProps & {
contentTitle: string;
supportMessage: string;
filter: React.ReactNode;
};
const TablePageLink = ({ contentLink, contentLinkText }: ILinkProps) => {
return contentLink && contentLinkText ? (
<Button
component={RouterLink}
variant="contained"
color="primary"
to={contentLink}
>
{contentLinkText}
</Button>
) : null;
};
export const TablePage = ({
supportMessage,
filter,
children,
contentTitle,
contentLink,
contentLinkText,
...props
}: React.PropsWithChildren<IProps>) => (
<Layout {...props}>
<Content>
<ContentHeader title={contentTitle}>
<TablePageLink
contentLink={contentLink}
contentLinkText={contentLinkText}
/>
<SupportButton>{supportMessage}</SupportButton>
</ContentHeader>
<Grid container spacing={2}>
<Grid item xs={12} sm={12} lg={2}>
{filter}
</Grid>
<Grid item xs={12} sm={12} lg={10}>
{children}
</Grid>
</Grid>
</Content>
</Layout>
);
plugins/catalog/src/components/CreateComponentButton/index.ts → packages/core-components/src/layout/TablePage/index.ts
+3 -2
View File
@@ -1,5 +1,5 @@
/*
* Copyright 2021 The Backstage Authors
* Copyright 2020 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.
@@ -13,4 +13,5 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { CreateComponentButton } from './CreateComponentButton';
export { TablePage } from './TablePage';
packages/core-components/src/layout/index.ts
+1
View File
@@ -29,3 +29,4 @@ export * from './Sidebar';
export * from './SignInPage';
export * from './TabbedCard';
export * from './Breadcrumbs';
export * from './TablePage';
plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
+35 -59
View File
@@ -14,39 +14,19 @@
* limitations under the License.
*/
import { TableColumn, TablePage } from '@backstage/core-components';
import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
import {
CatalogFilter,
CatalogTable,
CatalogTableRow,
} from '@backstage/plugin-catalog';
import {
EntityKindPicker,
EntityLifecyclePicker,
EntityListProvider,
EntityOwnerPicker,
EntityTagPicker,
EntityTypePicker,
UserListFilterKind,
UserListPicker,
} from '@backstage/plugin-catalog-react';
import { CatalogTable, CatalogTableRow } from '@backstage/plugin-catalog';
import { Button, makeStyles } from '@material-ui/core';
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { createComponentRouteRef } from '../../routes';
import { ApiExplorerLayout } from './ApiExplorerLayout';
import {
Content,
ContentHeader,
SupportButton,
TableColumn,
} from '@backstage/core-components';
import { useRouteRef } from '@backstage/core-plugin-api';
const useStyles = makeStyles(theme => ({
contentWrapper: {
display: 'grid',
gridTemplateAreas: "'filters' 'table'",
gridTemplateColumns: '250px 1fr',
gridColumnGap: theme.spacing(2),
},
}));
const defaultColumns: TableColumn<CatalogTableRow>[] = [
CatalogTable.columns.createNameColumn({ defaultKind: 'API' }),
@@ -58,8 +38,11 @@ const defaultColumns: TableColumn<CatalogTableRow>[] = [
CatalogTable.columns.createTagsColumn(),
];
export type ApiExplorerPageProps = {
interface IApiExplorerePageFilterProps {
initiallySelectedFilter?: UserListFilterKind;
}
export type ApiExplorerPageProps = IApiExplorerePageFilterProps & {
columns?: TableColumn<CatalogTableRow>[];
};
@@ -67,39 +50,32 @@ export const ApiExplorerPage = ({
initiallySelectedFilter = 'all',
columns,
}: ApiExplorerPageProps) => {
const styles = useStyles();
const createComponentLink = useRouteRef(createComponentRouteRef);
const configApi = useApi(configApiRef);
const generatedSubtitle = `${
configApi.getOptionalString('organization.name') ?? 'Backstage'
} API Explorer`;
return (
<ApiExplorerLayout>
<Content>
<ContentHeader title="">
{createComponentLink && (
<Button
variant="contained"
color="primary"
component={RouterLink}
to={createComponentLink()}
>
Register Existing API
</Button>
)}
<SupportButton>All your APIs</SupportButton>
</ContentHeader>
<div className={styles.contentWrapper}>
<EntityListProvider>
<div>
<EntityKindPicker initialFilter="api" hidden />
<EntityTypePicker />
<UserListPicker initialFilter={initiallySelectedFilter} />
<EntityOwnerPicker />
<EntityLifecyclePicker />
<EntityTagPicker />
</div>
<CatalogTable columns={columns || defaultColumns} />
</EntityListProvider>
</div>
</Content>
</ApiExplorerLayout>
<EntityListProvider>
<TablePage
title="APIs"
subtitle={generatedSubtitle}
pageTitleOverride="APIs"
themeId="apis"
contentTitle=""
contentLink={createComponentLink ? createComponentLink() : ''}
contentLinkText="Register Existing API"
supportMessage="All your APIs"
filter={
<CatalogFilter
initialFilter="api"
initiallySelectedFilter={initiallySelectedFilter}
/>
}
>
<CatalogTable columns={columns || defaultColumns} />
</TablePage>
</EntityListProvider>
);
};
plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx
+3 -1
View File
@@ -38,6 +38,7 @@ import React, { PropsWithChildren } from 'react';
interface IProps {
initiallySelectedFilter?: UserListFilterKind;
initialFilter?: 'component' | 'api';
}
const CatalogFilterWrapper = withWidth()(
@@ -56,11 +57,12 @@ const CatalogFilterWrapper = withWidth()(
export const CatalogFilter = ({
initiallySelectedFilter = 'owned',
initialFilter = 'component',
}: IProps) => (
<CatalogFilterWrapper>
<Grid container alignContent="flex-start">
<Grid item xs={12} sm={4} lg={12}>
<EntityKindPicker initialFilter="component" hidden />
<EntityKindPicker initialFilter={initialFilter} hidden />
<EntityTypePicker />
</Grid>
<Grid item xs={12} sm={4} lg={12}>
plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
-42
View File
@@ -1,42 +0,0 @@
/*
* Copyright 2020 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 React from 'react';
import { configApiRef, useApi } from '@backstage/core-plugin-api';
import { Header, Page } from '@backstage/core-components';
type Props = {
children?: React.ReactNode;
};
export const CatalogLayout = ({ children }: Props) => {
const orgName =
useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
return (
<Page themeId="home">
<Header
title={`${orgName} Catalog`}
subtitle={`Catalog of software components at ${orgName}`}
pageTitleOverride="Home"
/>
{children}
</Page>
);
};
export default CatalogLayout;
plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+28 -30
View File
@@ -15,24 +15,17 @@
*/
import React from 'react';
import { Grid } from '@material-ui/core';
import {
EntityListProvider,
UserListFilterKind,
} from '@backstage/plugin-catalog-react';
import { CatalogTable } from '../CatalogTable';
import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
import { EntityRow } from '../CatalogTable/types';
import CatalogLayout from './CatalogLayout';
import { CreateComponentButton } from '../CreateComponentButton';
import {
Content,
ContentHeader,
SupportButton,
TableColumn,
TableProps,
} from '@backstage/core-components';
import { TableColumn, TableProps, TablePage } from '@backstage/core-components';
import { CatalogFilter } from '../CatalogFilter';
import { createComponentRouteRef } from '../../routes';
export type CatalogPageProps = {
initiallySelectedFilter?: UserListFilterKind;
@@ -44,23 +37,28 @@ export const CatalogPage = ({
columns,
actions,
initiallySelectedFilter = 'owned',
}: CatalogPageProps) => (
<CatalogLayout>
<Content>
<ContentHeader title="Components">
<CreateComponentButton />
<SupportButton>All your software catalog entities</SupportButton>
</ContentHeader>
<Grid container spacing={2}>
<EntityListProvider>
<Grid item xs={12} sm={12} lg={2}>
<CatalogFilter initiallySelectedFilter={initiallySelectedFilter} />
</Grid>
<Grid item xs={12} sm={12} lg={10}>
<CatalogTable columns={columns} actions={actions} />
</Grid>
</EntityListProvider>
</Grid>
</Content>
</CatalogLayout>
);
}: CatalogPageProps) => {
const orgName =
useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
const createComponentLink = useRouteRef(createComponentRouteRef);
return (
<EntityListProvider>
<TablePage
title={`${orgName} Catalog`}
subtitle={`Catalog of software components at ${orgName}`}
pageTitleOverride="Home"
themeId="home"
contentTitle="Components"
contentLink={createComponentLink ? createComponentLink() : ''}
contentLinkText="Create Component"
supportMessage="All your software catalog entities"
filter={
<CatalogFilter initiallySelectedFilter={initiallySelectedFilter} />
}
>
<CatalogTable columns={columns} actions={actions} />
</TablePage>
</EntityListProvider>
);
};
plugins/catalog/src/components/CatalogPage/index.ts
-1
View File
@@ -13,5 +13,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { CatalogLayout } from './CatalogLayout';
export { CatalogPage } from './CatalogPage';
plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx
-38
View File
@@ -1,38 +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 React from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { Button } from '@material-ui/core';
import { createComponentRouteRef } from '../../routes';
import { useRouteRef } from '@backstage/core-plugin-api';
export const CreateComponentButton = () => {
const createComponentLink = useRouteRef(createComponentRouteRef);
if (!createComponentLink) return null;
return (
<Button
component={RouterLink}
variant="contained"
color="primary"
to={createComponentLink()}
>
Create Component
</Button>
);
};
plugins/catalog/src/index.ts
+1 -2
View File
@@ -15,11 +15,9 @@
*/
export * from './components/AboutCard';
export { CatalogLayout } from './components/CatalogPage';
export { CatalogResultListItem } from './components/CatalogResultListItem';
export { CatalogTable } from './components/CatalogTable';
export type { EntityRow as CatalogTableRow } from './components/CatalogTable';
export { CreateComponentButton } from './components/CreateComponentButton';
export { EntityLayout } from './components/EntityLayout';
export * from './components/EntityOrphanWarning';
export { EntityPageLayout } from './components/EntityPageLayout';
@@ -42,3 +40,4 @@ export {
EntitySystemDiagramCard,
} from './plugin';
export * from './components/CatalogTable/columns';
export * from './components/CatalogFilter';