From c4f8abbdfc00c6b98e11a34e902f94c286f1c73e Mon Sep 17 00:00:00 2001
From: Marius Andra <marius.andra@gmail.com>
Date: Fri, 7 May 2021 03:46:21 +0200
Subject: [PATCH] Remove wrap on plugin logs table (#4246)

* remove wrap on plugin logs table

* Implement a real fix by checking if ResizableTableProps.expandable is set

Co-authored-by: Michael Matloka <dev@twixes.com>
---
 .../lib/components/ResizableTable/VirtualTableHeader.tsx  | 4 +++-
 frontend/src/lib/components/ResizableTable/index.tsx      | 8 ++++++--
 frontend/src/scenes/plugins/Plugins.scss                  | 7 +++++++
 frontend/src/scenes/plugins/plugin/PluginLogs.tsx         | 2 +-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/ResizableTable/VirtualTableHeader.tsx b/frontend/src/lib/components/ResizableTable/VirtualTableHeader.tsx
index 371b0d5b284..ee230c64896 100644
--- a/frontend/src/lib/components/ResizableTable/VirtualTableHeader.tsx
+++ b/frontend/src/lib/components/ResizableTable/VirtualTableHeader.tsx
@@ -15,6 +15,7 @@ interface VirtualTableHeaderProps<RecordType> {
     handleResize: (index: number) => ResizeHandler
     layoutEffect?: CallableFunction
     minColumnWidth: number
+    expandable?: boolean
 }
 
 function ResizableTitle({
@@ -66,13 +67,14 @@ function VirtualTableHeader<RecordType>({
     handleResize,
     layoutEffect,
     minColumnWidth,
+    expandable,
 }: VirtualTableHeaderProps<RecordType>): JSX.Element {
     const maxColumnWidth = minColumnWidth * 12
     const height = 60
     useLayoutEffect(() => (typeof layoutEffect === 'function' ? layoutEffect() : undefined))
     return (
         <div className="resizable-virtual-table-header">
-            <div className="left-spacer" style={{ width: ANTD_EXPAND_BUTTON_WIDTH }} />
+            {expandable && <div className="left-spacer" style={{ width: ANTD_EXPAND_BUTTON_WIDTH }} />}
             {columns.map(({ title, width }, index) => (
                 <ResizableTitle
                     key={index}
diff --git a/frontend/src/lib/components/ResizableTable/index.tsx b/frontend/src/lib/components/ResizableTable/index.tsx
index 1184e663d00..f1e4ae3dad5 100644
--- a/frontend/src/lib/components/ResizableTable/index.tsx
+++ b/frontend/src/lib/components/ResizableTable/index.tsx
@@ -83,7 +83,7 @@ export function ResizableTable<RecordType extends Record<any, any> = any>({
     function updateColumnWidth(index: number, width: number): void {
         const col = scrollWrapperRef.current?.querySelector(
             // nth-child is 1-indexed. first column is fixed. last column width must be uncontrolled.
-            `.ant-table-content colgroup col:nth-child(${index + 2}):not(:last-child)`
+            `.ant-table-content colgroup col:nth-child(${index + 1 + Number(!!props.expandable)}):not(:last-child)`
         )
         col?.setAttribute('style', `width: ${width}px;`)
     }
@@ -141,7 +141,10 @@ export function ResizableTable<RecordType extends Record<any, any> = any>({
                         ? column
                         : {
                               ...column,
-                              width: Math.max((columnWidths[index + 1] ?? 0) * resizeRatio, minColumnWidth),
+                              width: Math.max(
+                                  (columnWidths[index + Number(!!props.expandable)] ?? 0) * resizeRatio,
+                                  minColumnWidth
+                              ),
                           }
                 )
                 nextColumns.slice(0, lastIndex).forEach((col, index) => {
@@ -208,6 +211,7 @@ export function ResizableTable<RecordType extends Record<any, any> = any>({
                         handleResize={handleColumnResize}
                         layoutEffect={updateTableWidth}
                         minColumnWidth={minColumnWidth}
+                        expandable={!!props.expandable}
                     />
                 )}
                 <Table
diff --git a/frontend/src/scenes/plugins/Plugins.scss b/frontend/src/scenes/plugins/Plugins.scss
index cb0ef1a6272..e9ae5e811f6 100644
--- a/frontend/src/scenes/plugins/Plugins.scss
+++ b/frontend/src/scenes/plugins/Plugins.scss
@@ -64,3 +64,10 @@
         }
     }
 }
+
+.plugin-logs {
+    td.ant-table-cell {
+        white-space: normal;
+        text-overflow: unset;
+    }
+}
diff --git a/frontend/src/scenes/plugins/plugin/PluginLogs.tsx b/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
index 04914de3626..646b3563a00 100644
--- a/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
+++ b/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
@@ -69,7 +69,7 @@ export function PluginLogs({ teamId, pluginConfigId }: PluginLogsProps): JSX.Ele
     const { revealBackground, loadPluginLogsMore, loadPluginLogsSearch } = useActions(logic)
 
     return (
-        <Space direction="vertical" style={{ flexGrow: 1 }} className="ph-no-capture">
+        <Space direction="vertical" style={{ flexGrow: 1 }} className="ph-no-capture plugin-logs">
             <Row>
                 <Search
                     loading={pluginLogsLoading}