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

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,

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>

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>

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>