From 87e64cc69266d21a9f20bc359e4e10eb8b5e6de5 Mon Sep 17 00:00:00 2001
From: Etienne Burdet <etienne.burdet@hey.com>
Date: Wed, 13 Nov 2024 11:05:15 +0100
Subject: [PATCH] fix: change implem to extra column to avoid formatting issues

---
 .../src/components/Table/Cell/Cell.svelte     | 54 ++-----------------
 .../components/Table/Headers/Headers.svelte   |  4 ++
 .../src/components/Table/Row.svelte           | 49 +++++++++++++----
 .../src/components/Table/Table.svelte         |  2 +-
 .../src/components/Table/TableCard.svelte     |  1 +
 .../Table/{Cell => }/ZoomIcon.svelte          |  0
 6 files changed, 49 insertions(+), 61 deletions(-)
 rename packages/visualizations/src/components/Table/{Cell => }/ZoomIcon.svelte (100%)

diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte
index f421f716..f501ce3d 100644
--- a/packages/visualizations/src/components/Table/Cell/Cell.svelte
+++ b/packages/visualizations/src/components/Table/Cell/Cell.svelte
@@ -1,44 +1,21 @@
 <script lang="ts">
     import type { Column } from '../types';
     import Format, { isValidRawValue } from './Format';
-    import ZoomIcon from './ZoomIcon.svelte';
 
     export let rawValue: unknown;
     export let column: Column;
-    export let onClick: (() => void) | null;
-    export let isRowHovered = false;
 
     $: ({ dataFormat, options = {} } = column);
 </script>
 
 <!-- To display a format value, rawValue must be different from undefined or null -->
 <td class={`table-data--${dataFormat}`}>
-    <div class="cell-wrapper">
-        {#if onClick}
-            <button on:click={onClick} class:visible={isRowHovered}>
-                <ZoomIcon />
-            </button>
-        {/if}
-        <div class="value-container">
-            {#if isValidRawValue(rawValue)}
-                <svelte:component this={Format[dataFormat]} {rawValue} {...options} />
-            {/if}
-        </div>
-    </div>
+    {#if isValidRawValue(rawValue)}
+        <svelte:component this={Format[dataFormat]} {rawValue} {...options} />
+    {/if}
 </td>
 
 <style>
-    .cell-wrapper {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-right: 6px;
-    }
-    .value-container {
-        flex-shrink: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
     :global(.ods-dataviz--default td) {
         padding: var(--spacing-75);
     }
@@ -66,29 +43,4 @@
     :global(.ods-dataviz--default td.table-data--number) {
         text-align: right;
     }
-
-    :global(.ods-dataviz--default) button {
-        background-color: transparent;
-        color: #142e7b;
-        border-radius: 50%;
-        height: 28px;
-        width: 28px;
-        margin-right: 3px;
-        padding: 6px;
-        border: none;
-        box-shadow: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        visibility: hidden;
-    }
-
-    :global(.ods-dataviz--default) button:hover {
-        background-color: #e2e6ee;
-        cursor: pointer;
-    }
-
-    :global(.ods-dataviz--default) button.visible {
-        visibility: visible;
-    }
 </style>
diff --git a/packages/visualizations/src/components/Table/Headers/Headers.svelte b/packages/visualizations/src/components/Table/Headers/Headers.svelte
index fea4ce4f..d86c9c90 100644
--- a/packages/visualizations/src/components/Table/Headers/Headers.svelte
+++ b/packages/visualizations/src/components/Table/Headers/Headers.svelte
@@ -3,11 +3,15 @@
     import type { Column } from '../types';
 
     export let columns: Column[];
+    export let extraButtonColumn = false;
 </script>
 
 <thead>
     <tr>
         {#each columns as column}
+            {#if extraButtonColumn}
+                <th />
+            {/if}
             <th class={`table-header--${column.dataFormat}`}>
                 {#if column.onClick}
                     <SortButton
diff --git a/packages/visualizations/src/components/Table/Row.svelte b/packages/visualizations/src/components/Table/Row.svelte
index b5179f28..3f3fbb3b 100644
--- a/packages/visualizations/src/components/Table/Row.svelte
+++ b/packages/visualizations/src/components/Table/Row.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import Cell from './Cell';
+    import ZoomIcon from './ZoomIcon.svelte';
     import type { Column, Rows } from './types';
 
     export let columns: Column[];
@@ -29,18 +30,18 @@
 </script>
 
 <tr on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave}>
-    {#each columns as column, index}
-        <Cell
-            rawValue={record[column.key]}
-            {column}
-            onClick={index === 0 && rows?.onClick ? onClick : null}
-            {isRowHovered}
-        />
+    {#if rows?.onClick}
+        <td class="button-cell">
+            <button on:click={onClick} class:visible={isRowHovered}>
+                <ZoomIcon />
+            </button>
+        </td>
+    {/if}
+    {#each columns as column}
+        <Cell rawValue={record[column.key]} {column} />
     {/each}
 </tr>
 
-<!-- markup (zero or more items) goes here -->
-
 <style>
     :global(.ods-dataviz--default) tr {
         border-bottom: 1px solid var(--border-color);
@@ -49,4 +50,34 @@
     :global(.ods-dataviz--default) tr:last-child {
         border-bottom: none;
     }
+
+    :global(.ods-dataviz--default) button {
+        background-color: transparent;
+        color: #142e7b;
+        border-radius: 50%;
+        height: 28px;
+        width: 28px;
+        padding: 6px;
+        margin-right: -6px; /* cancels next cell padding */
+        border: none;
+        box-shadow: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        visibility: hidden;
+    }
+
+    :global(.ods-dataviz--default) button:hover {
+        background-color: #e2e6ee;
+        cursor: pointer;
+    }
+
+    :global(.ods-dataviz--default) button.visible {
+        visibility: visible;
+    }
+
+    :global(.ods-dataviz--default) .button-cell {
+        padding: 0;
+        padding-left: 6px;
+    }
 </style>
diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte
index 2da7999a..868474ae 100644
--- a/packages/visualizations/src/components/Table/Table.svelte
+++ b/packages/visualizations/src/components/Table/Table.svelte
@@ -16,7 +16,7 @@
 
 <div class="scrollbox">
     <table aria-describedby={description ? tableId : undefined}>
-        <Headers {columns} />
+        <Headers {columns} extraButtonColumn={Boolean(rows?.onClick)} />
         <Body {loadingRowsNumber} {records} {columns} {rows} {emptyStateLabel} />
     </table>
 </div>
diff --git a/packages/visualizations/src/components/Table/TableCard.svelte b/packages/visualizations/src/components/Table/TableCard.svelte
index fabb007a..b0d18c98 100644
--- a/packages/visualizations/src/components/Table/TableCard.svelte
+++ b/packages/visualizations/src/components/Table/TableCard.svelte
@@ -12,6 +12,7 @@
     export let options: $$Props['options'];
 
     $: ({ value: records, loading: isLoading } = data);
+
     $: ({
         columns,
         rows,
diff --git a/packages/visualizations/src/components/Table/Cell/ZoomIcon.svelte b/packages/visualizations/src/components/Table/ZoomIcon.svelte
similarity index 100%
rename from packages/visualizations/src/components/Table/Cell/ZoomIcon.svelte
rename to packages/visualizations/src/components/Table/ZoomIcon.svelte