refactor table component so that it can be styled by styled-components

Applying styles to table elements like tr or td is currently very cumbersome because they are encapsulated in the Table component itself. We need to apply a word break to table cells so that for example long branch names properly fit into the layout. This PR changes the Table component to allow it to be styled with styled-components.

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -63222,7 +63222,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
 
 exports[`Storyshots Table|Table Default 1`] = `
 <table
-  className="Table__StyledTable-sc-1bx231g-0 table content is-hoverable"
+  className="table content is-hoverable"
 >
   <thead>
     <tr>
@@ -63311,9 +63311,60 @@ exports[`Storyshots Table|Table Empty 1`] = `
 </div>
 `;
 
+exports[`Storyshots Table|Table Table with Word-Break 1`] = `
+<table
+  className="table content is-hoverable Tablestories__StyledTable-vgb14n-0 hmfYbF"
+>
+  <thead>
+    <tr>
+      <th
+        className="has-cursor-pointer"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        Id
+        <i
+          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 cBnwYo"
+        />
+      </th>
+      <th
+        className="has-cursor-pointer"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        Name
+        <i
+          className="fas fa-sort-alpha-down has-text-grey-light SortIcon__IconWithMarginLeft-izn5p7-0 cBnwYo"
+        />
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        42
+      </td>
+      <td>
+        herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp
+      </td>
+    </tr>
+    <tr>
+      <td>
+        17
+      </td>
+      <td>
+        herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
 exports[`Storyshots Table|Table TextColumn 1`] = `
 <table
-  className="Table__StyledTable-sc-1bx231g-0 table content is-hoverable"
+  className="table content is-hoverable"
 >
   <thead>
     <tr>

scm-ui/ui-components/src/table/Table.stories.tsx

@@ -26,6 +26,17 @@ import { storiesOf } from "@storybook/react";
 import Table from "./Table";
 import Column from "./Column";
 import TextColumn from "./TextColumn";
+import styled from "styled-components";
+
+const StyledTable = styled(Table)`
+  width: 400px;
+  border: 1px dashed black;
+  padding: 4px;
+  margin: 4px;
+  td {
+    word-break: break-word;
+  }
+`;
 
 storiesOf("Table|Table", module)
   .add("Default", () => (
@@ -73,4 +84,22 @@ storiesOf("Table|Table", module)
       <TextColumn header="Id" dataKey="id" />
       <TextColumn header="Name" dataKey="name" />
     </Table>
+  ))
+  .add("Table with Word-Break", () => (
+    <StyledTable
+      data={[
+        {
+          id: "42",
+          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp_herp"
+        },
+        {
+          id: "17",
+          name: "herp_derp_schlerp_ferp_gerp_nerp_terp_ierp_perp_lerp_merp_oerp_zerp_serp_verp"
+        }
+      ]}
+      emptyMessage="No data found."
+    >
+      <TextColumn header="Id" dataKey="id" />
+      <TextColumn header="Name" dataKey="name" />
+    </StyledTable>
   ));

scm-ui/ui-components/src/table/Table.tsx

@@ -22,23 +22,20 @@
  * SOFTWARE.
  */
 import React, { FC, ReactElement, useEffect, useState } from "react";
-import styled from "styled-components";
 import { Comparator } from "./types";
 import SortIcon from "./SortIcon";
 import Notification from "../Notification";
-
-const StyledTable = styled.table.attrs(() => ({
-  className: "table content is-hoverable"
-}))``;
+import classNames from "classnames";
 
 type Props = {
   data: any[];
   sortable?: boolean;
   emptyMessage?: string;
   children: Array<ReactElement>;
+  className?: string;
 };
 
-const Table: FC<Props> = ({ data, sortable, children, emptyMessage }) => {
+const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className }) => {
   const [tableData, setTableData] = useState(data);
   useEffect(() => {
     setTableData(data);
@@ -107,7 +104,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage }) => {
   }
 
   return (
-    <StyledTable>
+    <table className={classNames("table content is-hoverable", className)}>
       <thead>
         <tr>
           {React.Children.map(children, (child, index) => (
@@ -125,7 +122,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage }) => {
         </tr>
       </thead>
       <tbody>{tableData.map(mapDataToColumns)}</tbody>
-    </StyledTable>
+    </table>
   );
 };