From 631c789754e4f0221e0df8f9ff839da1805f0b15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Doreau?=
 <32459935+ayshiff@users.noreply.github.com>
Date: Tue, 26 May 2020 11:48:15 +0200
Subject: [PATCH] feat(component): add subtitle to Table (#1011)

---
 .../src/components/Table/Table.stories.tsx    | 36 +++++++++++++++++++
 .../core/src/components/Table/Table.test.tsx  |  7 ++++
 packages/core/src/components/Table/Table.tsx  | 21 +++++++++--
 3 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/Table/Table.stories.tsx b/packages/core/src/components/Table/Table.stories.tsx
index bf2c5a3fc7..dbe87963ee 100644
--- a/packages/core/src/components/Table/Table.stories.tsx
+++ b/packages/core/src/components/Table/Table.stories.tsx
@@ -76,6 +76,42 @@ export const DefaultTable = () => {
   );
 };
 
+export const SubtitleTable = () => {
+  const columns: TableColumn[] = [
+    {
+      title: 'Column 1',
+      field: 'col1',
+      highlight: true,
+    },
+    {
+      title: 'Column 2',
+      field: 'col2',
+    },
+    {
+      title: 'Numeric value',
+      field: 'number',
+      type: 'numeric',
+    },
+    {
+      title: 'A Date',
+      field: 'date',
+      type: 'date',
+    },
+  ];
+
+  return (
+    <div style={containerStyle}>
+      <Table
+        options={{ paging: false }}
+        data={testData10}
+        columns={columns}
+        title="Backstage Table"
+        subtitle="Table Subtitle"
+      />
+    </div>
+  );
+};
+
 export const HiddenSearchTable = () => {
   const columns: TableColumn[] = [
     {
diff --git a/packages/core/src/components/Table/Table.test.tsx b/packages/core/src/components/Table/Table.test.tsx
index f6801359eb..fb87db1b4b 100644
--- a/packages/core/src/components/Table/Table.test.tsx
+++ b/packages/core/src/components/Table/Table.test.tsx
@@ -47,4 +47,11 @@ describe('<Table />', () => {
     const rendered = render(wrapInTestApp(<Table {...minProps} />));
     expect(rendered.getByText('second value, second row')).toBeInTheDocument();
   });
+
+  it('renders with subtitle', () => {
+    const rendered = render(
+      wrapInTestApp(<Table subtitle="subtitle" {...minProps} />),
+    );
+    expect(rendered.getByText('subtitle')).toBeInTheDocument();
+  });
 });
diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx
index a4dbc89b4f..b092f6d39b 100644
--- a/packages/core/src/components/Table/Table.tsx
+++ b/packages/core/src/components/Table/Table.tsx
@@ -24,7 +24,7 @@ import MTable, {
   Column,
 } from 'material-table';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, useTheme } from '@material-ui/core';
+import { makeStyles, useTheme, Typography } from '@material-ui/core';
 
 // Material-table is not using the standard icons available in in material-ui. https://github.com/mbrn/material-table/issues/51
 import AddBox from '@material-ui/icons/AddBox';
@@ -158,9 +158,16 @@ export interface TableColumn extends Column<{}> {
 
 export interface TableProps extends MaterialTableProps<{}> {
   columns: TableColumn[];
+  subtitle?: string;
 }
 
-const Table: FC<TableProps> = ({ columns, options, ...props }) => {
+const Table: FC<TableProps> = ({
+  columns,
+  options,
+  title,
+  subtitle,
+  ...props
+}) => {
   const cellClasses = useCellStyles();
   const headerClasses = useHeaderStyles();
   const toolbarClasses = useToolbarStyles();
@@ -190,6 +197,16 @@ const Table: FC<TableProps> = ({ columns, options, ...props }) => {
       options={{ ...defaultOptions, ...options }}
       columns={MTColumns}
       icons={tableIcons}
+      title={
+        <>
+          <Typography variant="h5">{title}</Typography>
+          {subtitle && (
+            <Typography color="textSecondary" variant="body1">
+              {subtitle}
+            </Typography>
+          )}
+        </>
+      }
       {...props}
     />
   );