From e3cb16d870f11f3b9993501d0ac618b476d7b8f4 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 29 Apr 2021 07:30:56 -0700
Subject: [PATCH] Fixed layout issue with undefined column widths

Summary: This fixes an earlier reported issue with Messages plugin, if no column widths are set values can jump around per row

Reviewed By: passy

Differential Revision: D28090807

fbshipit-source-id: be124b94f507584cf177710816035cd280a5ef01
---
 .../src/ui/data-table/DataTableManager.tsx    | 14 +++++++++++++
 .../data-table/__tests__/DataTable.node.tsx   | 15 ++++++++-----
 .../__tests__/DataTableRecords.node.tsx       |  6 ++++--
 .../__tests__/flipper_messages.node.tsx       | 21 ++++++++++++-------
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
index a207a64a4..ba2e5d059 100644
--- a/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/DataTableManager.tsx
@@ -442,8 +442,22 @@ function loadStateFromStorage(storageKey: string): PersistedState | undefined {
 function computeInitialColumns(
   columns: DataTableColumn<any>[],
 ): DataTableColumn<any>[] {
+  const visibleColumnCount = columns.filter((c) => c.visible !== false).length;
+  const columnsWithoutWidth = columns.filter((c) => c.width === undefined)
+    .length;
+
   return columns.map((c) => ({
     ...c,
+    width:
+      c.width ??
+      // if the width is not set, and there are multiple columns with unset widths,
+      // there will be multiple columns ith the same flex weight (1), meaning that
+      // they will all resize a best fits in a specifc row.
+      // To address that we distribute space equally
+      // (this need further fine tuning in the future as with a subset of fixed columns width can become >100%)
+      (columnsWithoutWidth > 1
+        ? `${Math.floor(100 / visibleColumnCount)}%`
+        : undefined),
     filters:
       c.filters?.map((f) => ({
         ...f,
diff --git a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx
index dc03c235d..959a0e1c7 100644
--- a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTable.node.tsx
@@ -53,12 +53,14 @@ test('update and append', async () => {
         class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
       >
         <div
-          class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+          class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
+          width="50%"
         >
           test DataTable
         </div>
         <div
-          class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+          class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
+          width="50%"
         >
           true
         </div>
@@ -105,12 +107,14 @@ test('column visibility', async () => {
         class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
       >
         <div
-          class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+          class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
+          width="50%"
         >
           test DataTable
         </div>
         <div
-          class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+          class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
+          width="50%"
         >
           true
         </div>
@@ -130,7 +134,8 @@ test('column visibility', async () => {
         class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
       >
         <div
-          class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+          class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
+          width="50%"
         >
           test DataTable
         </div>
diff --git a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx
index 4bccb1912..e3b12c857 100644
--- a/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/__tests__/DataTableRecords.node.tsx
@@ -47,12 +47,14 @@ test('update and append', async () => {
         class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
       >
         <div
-          class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+          class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
+          width="50%"
         >
           test DataTable
         </div>
         <div
-          class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+          class="css-9bipfg-TableBodyColumnContainer e1luu51r0"
+          width="50%"
         >
           true
         </div>
diff --git a/desktop/plugins/public/flipper-messages/__tests__/flipper_messages.node.tsx b/desktop/plugins/public/flipper-messages/__tests__/flipper_messages.node.tsx
index 54bc148f0..cb8e725d5 100644
--- a/desktop/plugins/public/flipper-messages/__tests__/flipper_messages.node.tsx
+++ b/desktop/plugins/public/flipper-messages/__tests__/flipper_messages.node.tsx
@@ -119,33 +119,40 @@ test('It can render rows', async () => {
       class="css-1k3kr6b-TableBodyRowContainer e1luu51r1"
     >
       <div
-        class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+        class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
+        width="14%"
       >
         00:00:00.000
       </div>
       <div
-        class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+        class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
+        width="14%"
       >
         Android Phone
       </div>
       <div
-        class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+        class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
+        width="14%"
       >
         FB4A
       </div>
       <div
-        class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+        class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
+        width="14%"
       >
         unique-string
       </div>
       <div
-        class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+        class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
+        width="14%"
       />
       <div
-        class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+        class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
+        width="14%"
       />
       <div
-        class="css-esqhnb-TableBodyColumnContainer e1luu51r0"
+        class="css-1vr131n-TableBodyColumnContainer e1luu51r0"
+        width="14%"
       >
         toClient
       </div>