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 {
-  normalizePadding,
-  normalizeSpace,
-  PaddingProps,
-  Spacing,
-  theme,
-} from './theme';
+import {PaddingProps, Spacing} 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 ? (
-    <Layout.Top>
-      {header}
+  let mainSection: JSX.Element;
+  if (props.scrollable) {
+    const dataSourceRenderer = (
       <DataSourceRendererVirtual<T, TableRowRenderContext<T>>
         dataSource={dataSource}
         autoScroll={tableState.autoScroll && !dragging.current}
@@ -518,10 +523,32 @@ export function DataTable<T extends object>(
         onUpdateAutoScroll={onUpdateAutoScroll}
         emptyRenderer={emptyRenderer}
       />
+    );
+
+    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}
@@ -533,6 +560,7 @@ export function DataTable<T extends object>(
         />
       </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}
     />
   );