Add TablePage components

- Change CatalogPage to use generic TablePage

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/core-components/src/layout/Header/Header.tsx

@@ -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;

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 (
-    <Page themeId="home">
-      <Header
-        title={`${orgName} Catalog`}
-        subtitle={`Catalog of software components at ${orgName}`}
-        pageTitleOverride="Home"
-      />
-      {children}
-    </Page>
-  );
-};
-
-export default CatalogLayout;
+export const Layout = ({
+  themeId,
+  children,
+  ...props
+}: React.PropsWithChildren<IProps>) => (
+  <Page themeId={themeId}>
+    <Header {...props} />
+    {children}
+  </Page>
+);

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 ? (
+    <Button
+      component={RouterLink}
+      variant="contained"
+      color="primary"
+      to={link}
+    >
+      Create Component
+    </Button>
+  ) : null;
+};
+
+export const TablePage = ({
+  supportMessage,
+  filter,
+  children,
+  header,
+  headerLink,
+  ...props
+}: React.PropsWithChildren<IProps>) => (
+  <Layout {...props}>
+    <Content>
+      <ContentHeader title={header}>
+        <TablePageLink link={headerLink} />
+        <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>
+);

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';

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';

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) => (
-  <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
+        header="Components"
+        supportMessage="All your software catalog entities"
+        filter={
+          <CatalogFilter initiallySelectedFilter={initiallySelectedFilter} />
+        }
+        title={`${orgName} Catalog`}
+        subtitle={`Catalog of software components at ${orgName}`}
+        themeId="home"
+        pageTitleOverride="Home"
+        headerLink={createComponentLink ? createComponentLink() : ''}
+      >
+        <CatalogTable columns={columns} actions={actions} />
+      </TablePage>
+    </EntityListProvider>
+  );
+};

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';

plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx

@@ -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>
-  );
-};