UI Conversion: Use DataTable to show DB table structure

Summary: Use DataTable to show table structure

Reviewed By: mweststrate

Differential Revision: D28110485

fbshipit-source-id: 81f843a4763e1fbf5acf870621bc9049f719fd2c

desktop/plugins/public/databases/DatabaseStructure.tsx

@@ -7,85 +7,69 @@
  * @format
  */
 
-import {
-  ManagedTable,
-  TableBodyRow,
-  TableBodyColumn,
-  Value,
-  renderValue,
-} from 'flipper';
-import {Layout} from 'flipper-plugin';
-import React, {useMemo} from 'react';
-
+import {Value, renderValue} from 'flipper';
+import {DataTable, DataTableColumn, Layout, useMemoize} from 'flipper-plugin';
+import React from 'react';
 import {Structure} from './index';
 
-function transformRow(
-  columns: Array<string>,
-  row: Array<Value>,
-  index: number,
-): TableBodyRow {
-  const transformedColumns: {[key: string]: TableBodyColumn} = {};
-  for (let i = 0; i < columns.length; i++) {
-    transformedColumns[columns[i]] = {value: renderValue(row[i], true)};
-  }
-  return {key: String(index), columns: transformedColumns};
+function createRows(
+  columns: string[],
+  rows: Value[][],
+): {[key: string]: Value}[] {
+  return rows.map((values) =>
+    values.reduce((acc: {[key: string]: Value}, cur: Value, i: number) => {
+      acc[columns[i]] = cur;
+      return acc;
+    }, {}),
+  );
 }
 
-const DatabaseStructureManagedTable = React.memo(
-  (props: {columns: Array<string>; rows: Array<Array<Value>>}) => {
-    const {columns, rows} = props;
-    const renderRows = useMemo(
-      () =>
-        rows.map((row: Array<Value>, index: number) =>
-          transformRow(columns, row, index),
-        ),
-      [rows, columns],
-    );
-    const renderColumns = useMemo(
-      () =>
-        columns.reduce(
-          (acc, val) =>
-            Object.assign({}, acc, {[val]: {value: val, resizable: true}}),
-          {},
-        ),
-      [columns],
-    );
-    const columnOrder = useMemo(
-      () =>
-        columns.map((name) => ({
-          key: name,
-          visible: true,
-        })),
-      [columns],
-    );
-    return (
-      <Layout.Horizontal grow>
-        <ManagedTable
-          floating={false}
-          columnOrder={columnOrder}
-          columns={renderColumns}
-          zebra={true}
-          rows={renderRows}
-          horizontallyScrollable={true}
-        />
-      </Layout.Horizontal>
-    );
-  },
-);
+function createColumnConfig(columns: string[]) {
+  const columnObjs: DataTableColumn<{[key: string]: Value}>[] = columns.map(
+    (c) => ({
+      key: c,
+      title: c,
+      onRender(row) {
+        return renderValue(row[c]);
+      },
+    }),
+  );
+  return columnObjs;
+}
 
-export default React.memo((props: {structure: Structure | null}) => {
+export default React.memo((props: {structure: Structure}) => {
   const {structure} = props;
-  if (!structure) {
-    return null;
-  }
   const {columns, rows, indexesColumns, indexesValues} = structure;
+  const rowObjs = useMemoize(
+    (columns: string[], rows: Value[][]) => createRows(columns, rows),
+    [columns, rows],
+  );
+  const columnObjs = useMemoize(
+    (columns: string[]) => createColumnConfig(columns),
+    [columns],
+  );
+  const indexRowObjs = useMemoize(
+    (indexesColumns: string[], indexesValues: Value[][]) =>
+      createRows(indexesColumns, indexesValues),
+    [indexesColumns, indexesValues],
+  );
+  const indexColumnObjs = useMemoize(
+    (indexesColumns: string[]) => createColumnConfig(indexesColumns),
+    [indexesColumns],
+  );
+
   return (
-    <>
-      <DatabaseStructureManagedTable columns={columns} rows={rows} />
-      <DatabaseStructureManagedTable
-        columns={indexesColumns}
-        rows={indexesValues}
+    <Layout.Top resizable height={400}>
+      <DataTable<{[key: string]: Value}>
+        records={rowObjs}
+        columns={columnObjs}
+        searchbar={false}
       />
-    </>
+      <DataTable<{[key: string]: Value}>
+        records={indexRowObjs}
+        columns={indexColumnObjs}
+        searchbar={false}
+      />
+    </Layout.Top>
   );
 });

desktop/plugins/public/databases/index.tsx

@@ -11,7 +11,6 @@ import {
   styled,
   produce,
   ManagedTable,
-  colors,
   getStringFromErrorLike,
   TableBodyColumn,
   TableRows,
@@ -80,8 +79,8 @@ const BoldSpan = styled.span({
   textTransform: 'uppercase',
 });
 const ErrorBar = styled.div({
-  backgroundColor: colors.cherry,
-  color: colors.white,
+  backgroundColor: theme.errorColor,
+  color: theme.textColorPrimary,
   lineHeight: '26px',
   textAlign: 'center',
 });
@@ -1185,7 +1184,9 @@ export function Component() {
             {tableOptions}
           </Select>
           <div />
-          <Button onClick={onRefreshClicked}>Refresh</Button>
+          <Button onClick={onRefreshClicked} type="default">
+            Refresh
+          </Button>
         </Toolbar>
       ) : null}
       {state.viewMode === 'SQL' ? (
@@ -1260,7 +1261,7 @@ export function Component() {
               currentStructure={state.currentStructure}
             />
           ) : null}
-          {state.viewMode === 'structure' ? (
+          {state.viewMode === 'structure' && state.currentStructure ? (
             <DatabaseStructure structure={state.currentStructure} />
           ) : null}
           {state.viewMode === 'SQL' ? (