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/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx b/packages/core-components/src/layout/TablePage/Layout.tsx similarity index 52% rename from plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx rename to packages/core-components/src/layout/TablePage/Layout.tsx index 5638c23634..79ad9c24b8 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerLayout.tsx +++ b/packages/core-components/src/layout/TablePage/Layout.tsx @@ -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 ( - -
- {children} - - ); -}; +export interface IProps extends HeaderProps { + themeId: string; +} + +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..5bf69f4e64 --- /dev/null +++ b/packages/core-components/src/layout/TablePage/TablePage.tsx @@ -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 ? ( + + ) : null; +}; + +export const TablePage = ({ + supportMessage, + filter, + children, + contentTitle, + contentLink, + contentLinkText, + ...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/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx index 9a8b725ffc..bcc18e4021 100644 --- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx +++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx @@ -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[] = [ CatalogTable.columns.createNameColumn({ defaultKind: 'API' }), @@ -58,8 +38,11 @@ const defaultColumns: TableColumn[] = [ CatalogTable.columns.createTagsColumn(), ]; -export type ApiExplorerPageProps = { +interface IApiExplorerePageFilterProps { initiallySelectedFilter?: UserListFilterKind; +} + +export type ApiExplorerPageProps = IApiExplorerePageFilterProps & { columns?: TableColumn[]; }; @@ -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 ( - - - - {createComponentLink && ( - - )} - All your APIs - -
- -
-
- - -
- - + + + } + > + + + ); }; diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx index a8673b395a..6704f429ee 100644 --- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx +++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx @@ -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) => ( - diff --git a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx deleted file mode 100644 index 2471ac9df2..0000000000 --- a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx +++ /dev/null @@ -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 ( - -
- {children} - - ); -}; - -export default CatalogLayout; diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx index 9eeb91ca3c..702d9f2ed3 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,28 @@ 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 ( + + + } + > + + + + ); +}; 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 ( - - ); -}; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index f2f28679a5..7c8d7ac122 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -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';