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

@@ -204,6 +204,7 @@ export const DataList: (<T extends object>(
   enableArrow: true,
   enableContextMenu: false,
   enableMultiSelect: false,
+  enableHorizontalScroll: false,
   idAttribute: 'id',
   titleAttribute: 'title',
   descriptionAttribute: 'description',

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 {
+import {PaddingProps, Spacing} from './theme';
-  normalizePadding,
-  normalizeSpace,
-  PaddingProps,
-  Spacing,
-  theme,
-} from './theme';
 
 import {renderSplitLayout} from './renderSplitLayout';
 

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 ? (
+  let mainSection: JSX.Element;
-    <Layout.Top>
+  if (props.scrollable) {
-      {header}
+    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>
+    mainSection = props.enableHorizontalScroll ? (
-      {header}
+      <Layout.Top>
-      <DataSourceRendererStatic<T, TableRowRenderContext<T>>
+        {header}
-        dataSource={dataSource}
+        <Layout.ScrollContainer horizontal vertical={false}>
-        useFixedRowHeight={!tableState.usesWrapping}
+          <Layout.Top>
-        defaultRowHeight={DEFAULT_ROW_HEIGHT}
+            {columnHeaders}
-        context={renderingConfig}
+            {dataSourceRenderer}
-        itemRenderer={itemRenderer}
+          </Layout.Top>
-        onKeyDown={onKeyDown}
+        </Layout.ScrollContainer>
-        emptyRenderer={emptyRenderer}
+      </Layout.Top>
-      />
+    ) : (
-    </Layout.Container>
+      <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,

desktop/plugins/public/logs/index.tsx

@@ -227,6 +227,7 @@ export function Component() {
       columns={plugin.columns}
       enableAutoScroll
       onRowStyle={getRowStyle}
+      enableHorizontalScroll={false}
       extraActions={
         plugin.isConnected ? (
           <>

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}
     />
   );