From c8b167b4ecda1a46fa1b223d150677e1199ec202 Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Tue, 26 Jan 2021 10:52:14 +0100
Subject: [PATCH] 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.
---
 CHANGELOG.md                                  |  1 +
 .../src/__snapshots__/storyshots.test.ts.snap | 55 ++++++++++++++++++-
 .../ui-components/src/table/Table.stories.tsx | 29 ++++++++++
 scm-ui/ui-components/src/table/Table.tsx      | 13 ++---
 4 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f9dc7f461..98810f649f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Layout of proxy settings ([#1502](https://github.com/scm-manager/scm-manager/pull/1502))
 - Apply test ids to production builds for usage in e2e tests ([#1499](https://github.com/scm-manager/scm-manager/pull/1499))
+- Refactor table component so that it can be styled by styled-components ([#1503](https://github.com/scm-manager/scm-manager/pull/1503))
 
 ### Fixed
 - Add explicit provider setup for bouncy castle ([#1500](https://github.com/scm-manager/scm-manager/pull/1500))
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 3e8837a6f3..88a9c3e5c6 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/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>
diff --git a/scm-ui/ui-components/src/table/Table.stories.tsx b/scm-ui/ui-components/src/table/Table.stories.tsx
index eebaf9bc57..66c62e9c8a 100644
--- a/scm-ui/ui-components/src/table/Table.stories.tsx
+++ b/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>
   ));
diff --git a/scm-ui/ui-components/src/table/Table.tsx b/scm-ui/ui-components/src/table/Table.tsx
index 1017f15f14..ac1c675a27 100644
--- a/scm-ui/ui-components/src/table/Table.tsx
+++ b/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>
   );
 };