From 80bb37292019d60e0cb9e039594419fe61bdb284 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 4 Jan 2022 08:31:14 -0800
Subject: [PATCH] make data tables horizontally scrollable if needed

Summary:
Changelog: most data tables allow for horizontal scrolling now if they run out of space

This diff introduces support for horizontal scrolling in datatables. Originally thought about making this a view option, but doing automatically works actually quite fine. By default the columns resize as they did, but if either a column is made bigger or the window is so small no space is left, a horizontal scrollbar can be used.

This adresses several usability issues reported in GH / workplace

fixes https://github.com/facebook/flipper/issues/2608

Reviewed By: antonk52

Differential Revision: D33368216

fbshipit-source-id: 206c761a5873cf0396af091f2cbdedc3e638afac
---
 desktop/flipper-plugin/src/ui/DataList.tsx    |  1 +
 desktop/flipper-plugin/src/ui/Layout.tsx      |  8 +--
 .../src/ui/data-table/DataTable.tsx           | 65 ++++++++++++++-----
 desktop/plugins/public/logs/index.tsx         |  1 +
 .../plugins/public/network/KeyValueTable.tsx  |  1 +
 5 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/DataList.tsx b/desktop/flipper-plugin/src/ui/DataList.tsx
index 911311a44..3f30d9669 100644
--- a/desktop/flipper-plugin/src/ui/DataList.tsx
+++ b/desktop/flipper-plugin/src/ui/DataList.tsx
@@ -204,6 +204,7 @@ export const DataList: (<T extends object>(
   enableArrow: true,
   enableContextMenu: false,
   enableMultiSelect: false,
+  enableHorizontalScroll: false,
   idAttribute: 'id',
   titleAttribute: 'title',
   descriptionAttribute: 'description',
diff --git a/desktop/flipper-plugin/src/ui/Layout.tsx b/desktop/flipper-plugin/src/ui/Layout.tsx
index 67bc44909..2b14d72ed 100644
--- a/desktop/flipper-plugin/src/ui/Layout.tsx
+++ b/desktop/flipper-plugin/src/ui/Layout.tsx
@@ -10,13 +10,7 @@
 import React, {CSSProperties, forwardRef} from 'react';
 import styled from '@emotion/styled';
 import {Container} from './Container';
-import {
-  normalizePadding,
-  normalizeSpace,
-  PaddingProps,
-  Spacing,
-  theme,
-} from './theme';
+import {PaddingProps, Spacing} from './theme';
 
 import {renderSplitLayout} from './renderSplitLayout';
 
diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
index 55d29b917..6bdbe9ee4 100644
--- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
+++ b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx
@@ -57,6 +57,7 @@ interface DataTableBaseProps<T = any> {
   columns: DataTableColumn<T>[];
   enableSearchbar?: boolean;
   enableAutoScroll?: boolean;
+  enableHorizontalScroll?: boolean;
   enableColumnHeaders?: boolean;
   enableMultiSelect?: boolean;
   enableContextMenu?: boolean;
@@ -483,6 +484,10 @@ export function DataTable<T extends object>(
           extraActions={props.extraActions}
         />
       )}
+    </Layout.Container>
+  );
+  const columnHeaders = (
+    <Layout.Container>
       {props.enableColumnHeaders && (
         <TableHead
           visibleColumns={visibleColumns}
@@ -502,9 +507,9 @@ export function DataTable<T extends object>(
     props.onRenderEmpty === undefined
       ? props.onRenderEmpty
       : props.onRenderEmpty;
-  const mainSection = props.scrollable ? (
-    <Layout.Top>
-      {header}
+  let mainSection: JSX.Element;
+  if (props.scrollable) {
+    const dataSourceRenderer = (
       <DataSourceRendererVirtual<T, TableRowRenderContext<T>>
         dataSource={dataSource}
         autoScroll={tableState.autoScroll && !dragging.current}
@@ -518,21 +523,44 @@ export function DataTable<T extends object>(
         onUpdateAutoScroll={onUpdateAutoScroll}
         emptyRenderer={emptyRenderer}
       />
-    </Layout.Top>
-  ) : (
-    <Layout.Container>
-      {header}
-      <DataSourceRendererStatic<T, TableRowRenderContext<T>>
-        dataSource={dataSource}
-        useFixedRowHeight={!tableState.usesWrapping}
-        defaultRowHeight={DEFAULT_ROW_HEIGHT}
-        context={renderingConfig}
-        itemRenderer={itemRenderer}
-        onKeyDown={onKeyDown}
-        emptyRenderer={emptyRenderer}
-      />
-    </Layout.Container>
-  );
+    );
+
+    mainSection = props.enableHorizontalScroll ? (
+      <Layout.Top>
+        {header}
+        <Layout.ScrollContainer horizontal vertical={false}>
+          <Layout.Top>
+            {columnHeaders}
+            {dataSourceRenderer}
+          </Layout.Top>
+        </Layout.ScrollContainer>
+      </Layout.Top>
+    ) : (
+      <Layout.Top>
+        <div>
+          {header}
+          {columnHeaders}
+        </div>
+        {dataSourceRenderer}
+      </Layout.Top>
+    );
+  } else {
+    mainSection = (
+      <Layout.Container>
+        {header}
+        {columnHeaders}
+        <DataSourceRendererStatic<T, TableRowRenderContext<T>>
+          dataSource={dataSource}
+          useFixedRowHeight={!tableState.usesWrapping}
+          defaultRowHeight={DEFAULT_ROW_HEIGHT}
+          context={renderingConfig}
+          itemRenderer={itemRenderer}
+          onKeyDown={onKeyDown}
+          emptyRenderer={emptyRenderer}
+        />
+      </Layout.Container>
+    );
+  }
 
   return (
     <Layout.Container grow={props.scrollable}>
@@ -558,6 +586,7 @@ DataTable.defaultProps = {
   scrollable: true,
   enableSearchbar: true,
   enableAutoScroll: false,
+  enableHorizontalScroll: true,
   enableColumnHeaders: true,
   enableMultiSelect: true,
   enableContextMenu: true,
diff --git a/desktop/plugins/public/logs/index.tsx b/desktop/plugins/public/logs/index.tsx
index 59970aade..578b9f8f2 100644
--- a/desktop/plugins/public/logs/index.tsx
+++ b/desktop/plugins/public/logs/index.tsx
@@ -227,6 +227,7 @@ export function Component() {
       columns={plugin.columns}
       enableAutoScroll
       onRowStyle={getRowStyle}
+      enableHorizontalScroll={false}
       extraActions={
         plugin.isConnected ? (
           <>
diff --git a/desktop/plugins/public/network/KeyValueTable.tsx b/desktop/plugins/public/network/KeyValueTable.tsx
index 22907df2f..af292f645 100644
--- a/desktop/plugins/public/network/KeyValueTable.tsx
+++ b/desktop/plugins/public/network/KeyValueTable.tsx
@@ -40,6 +40,7 @@ export function KeyValueTable({items}: {items: KeyValueItem[]}) {
       records={items}
       enableSearchbar={false}
       scrollable={false}
+      enableHorizontalScroll={false}
       onCopyRows={handleCopyRows}
     />
   );