From 2a295bcec92f465900c48d95be06b10029570842 Mon Sep 17 00:00:00 2001 From: Philipp Hugenroth Date: Mon, 12 Jul 2021 14:41:30 +0200 Subject: [PATCH] Add TablePage components - Change CatalogPage to use generic TablePage Signed-off-by: Philipp Hugenroth --- .../src/layout/Header/Header.tsx | 2 +- .../src/layout/TablePage/Layout.tsx | 37 ++++------ .../src/layout/TablePage/TablePage.tsx | 68 +++++++++++++++++++ .../src/layout/TablePage}/index.ts | 5 +- packages/core-components/src/layout/index.ts | 1 + .../components/CatalogPage/CatalogPage.tsx | 57 ++++++++-------- .../src/components/CatalogPage/index.ts | 1 - .../CreateComponentButton.tsx | 38 ----------- 8 files changed, 115 insertions(+), 94 deletions(-) rename plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx => packages/core-components/src/layout/TablePage/Layout.tsx (52%) create mode 100644 packages/core-components/src/layout/TablePage/TablePage.tsx rename {plugins/catalog/src/components/CreateComponentButton => packages/core-components/src/layout/TablePage}/index.ts (84%) delete mode 100644 plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index 96d024f524..8c51f2f7fc 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -88,7 +88,7 @@ const useStyles = makeStyles(theme => ({ type HeaderStyles = ReturnType; -type Props = { +export type Props = { component?: ReactNode; pageTitleOverride?: string; style?: CSSProperties; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx b/packages/core-components/src/layout/TablePage/Layout.tsx similarity index 52% rename from plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx rename to packages/core-components/src/layout/TablePage/Layout.tsx index 2471ac9df2..79ad9c24b8 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx +++ b/packages/core-components/src/layout/TablePage/Layout.tsx @@ -16,27 +16,20 @@ import React from 'react'; -import { configApiRef, useApi } from '@backstage/core-plugin-api'; -import { Header, Page } from '@backstage/core-components'; +import { Header, Page } from '../../'; +import { Props as HeaderProps } from '../../layout/Header/Header'; -type Props = { - children?: React.ReactNode; -}; +export interface IProps extends HeaderProps { + themeId: string; +} -export const CatalogLayout = ({ children }: Props) => { - const orgName = - useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage'; - - return ( - -
- {children} - - ); -}; - -export default CatalogLayout; +export const Layout = ({ + themeId, + children, + ...props +}: React.PropsWithChildren) => ( + +
+ {children} + +); diff --git a/packages/core-components/src/layout/TablePage/TablePage.tsx b/packages/core-components/src/layout/TablePage/TablePage.tsx new file mode 100644 index 0000000000..f58da0b553 --- /dev/null +++ b/packages/core-components/src/layout/TablePage/TablePage.tsx @@ -0,0 +1,68 @@ +/* + * 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 IProps extends LayoutProps { + supportMessage: string; + filter: React.ReactNode; + header: string; + headerLink?: string; +} + +const TablePageLink = ({ link }: { link?: string }) => { + return link ? ( + + ) : null; +}; + +export const TablePage = ({ + supportMessage, + filter, + children, + header, + headerLink, + ...props +}: React.PropsWithChildren) => ( + + + + + {supportMessage} + + + + {filter} + + + {children} + + + + +); diff --git a/plugins/catalog/src/components/CreateComponentButton/index.ts b/packages/core-components/src/layout/TablePage/index.ts similarity index 84% rename from plugins/catalog/src/components/CreateComponentButton/index.ts rename to packages/core-components/src/layout/TablePage/index.ts index e525bef782..5df8aa4c40 100644 --- a/plugins/catalog/src/components/CreateComponentButton/index.ts +++ b/packages/core-components/src/layout/TablePage/index.ts @@ -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'; diff --git a/packages/core-components/src/layout/index.ts b/packages/core-components/src/layout/index.ts index 4abde642dc..dce33c7f2a 100644 --- a/packages/core-components/src/layout/index.ts +++ b/packages/core-components/src/layout/index.ts @@ -29,3 +29,4 @@ export * from './Sidebar'; export * from './SignInPage'; export * from './TabbedCard'; export * from './Breadcrumbs'; +export * from './TablePage'; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 9eeb91ca3c..bd23e5ccdb 100644 --- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx +++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx @@ -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,27 @@ export const CatalogPage = ({ columns, actions, initiallySelectedFilter = 'owned', -}: CatalogPageProps) => ( - - - - - All your software catalog entities - - - - - - - - - - - - - -); +}: CatalogPageProps) => { + const orgName = + useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage'; + const createComponentLink = useRouteRef(createComponentRouteRef); + + return ( + + + } + title={`${orgName} Catalog`} + subtitle={`Catalog of software components at ${orgName}`} + themeId="home" + pageTitleOverride="Home" + headerLink={createComponentLink ? createComponentLink() : ''} + > + + + + ); +}; diff --git a/plugins/catalog/src/components/CatalogPage/index.ts b/plugins/catalog/src/components/CatalogPage/index.ts index 66c3c2f4b3..dc7ed68229 100644 --- a/plugins/catalog/src/components/CatalogPage/index.ts +++ b/plugins/catalog/src/components/CatalogPage/index.ts @@ -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'; diff --git a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx b/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx deleted file mode 100644 index 482a0c0a3c..0000000000 --- a/plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx +++ /dev/null @@ -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 ( - - ); -};