UI Conversion: use DetailsSidebar from "flipper-plugin"

Summary: Use DetailsSidebar from "flipper-plugin"

Reviewed By: mweststrate

Differential Revision: D28110484

fbshipit-source-id: 0b9e3c07fc642242f2846f024895e740078779f7

desktop/plugins/public/databases/DatabaseDetailSidebar.tsx

@@ -8,15 +8,16 @@
  */
 
 import React, {useMemo, useState, useEffect, useReducer} from 'react';
+
 import {
-  Input,
-  DetailSidebar,
   Panel,
-  ManagedDataInspector,
+  DetailSidebar,
+  DataInspector as ManagedDataInspector,
+  theme,
   styled,
   produce,
-  colors,
-} from 'flipper';
+  Layout,
+} from 'flipper-plugin';
 
 import {
   Value,
@@ -24,7 +25,7 @@ import {
   renderValue,
 } from './TypeBasedValueRenderer';
 
-import {Button} from 'antd';
+import {Button, Input} from 'antd';
 
 type TableRow = {
   col: string;
@@ -48,7 +49,7 @@ const EditTriggerSection = styled.div({
 });
 
 const TableDetailRow = styled.div({
-  borderBottom: `1px solid ${colors.blackAlpha10}`,
+  borderBottom: `1px solid ${theme.dividerColor}`,
   padding: 8,
 });
 
@@ -58,7 +59,7 @@ const TableDetailRowTitle = styled.div({
 });
 
 const TableDetailRowType = styled.span({
-  color: colors.light20,
+  color: theme.white,
   marginLeft: 8,
   fontWeight: 'normal',
 });
@@ -185,29 +186,29 @@ export default React.memo(function DatabaseDetailSidebar(
   );
   return (
     <DetailSidebar>
-      <Panel
-        heading="Row details"
-        floating={false}
-        collapsable={true}
-        padded={false}>
+      <Panel title="Row details" collapsible={true}>
         {onSave ? (
-          <EditTriggerSection>
+          <Layout.Right>
+            <div />
             {editing ? (
-              <>
+              <Layout.Horizontal pad gap>
+                <Button onClick={() => setEditing(false)}>Close</Button>
                 <Button
                   disabled={!rowState.updated}
+                  type="primary"
                   onClick={() => {
                     onSave(rowState.changes);
                     setEditing(false);
                   }}>
                   Save
                 </Button>
-                <Button onClick={() => setEditing(false)}>Close</Button>
-              </>
+              </Layout.Horizontal>
             ) : (
+              <Layout.Horizontal pad>
                 <Button onClick={() => setEditing(true)}>Edit</Button>
+              </Layout.Horizontal>
             )}
-          </EditTriggerSection>
+          </Layout.Right>
         ) : null}
         <div>
           {rows.map((row) => (

desktop/plugins/public/databases/index.tsx

@@ -8,16 +8,14 @@
  */
 
 import {
-  styled,
-  produce,
   ManagedTable,
-  getStringFromErrorLike,
   TableBodyColumn,
   TableRows,
   TableBodyRow,
   TableRowSortOrder,
   TableHighlightedRows,
 } from 'flipper';
+import {getStringFromErrorLike} from './utils';
 import {Value, renderValue} from './TypeBasedValueRenderer';
 import React, {KeyboardEvent, ChangeEvent, useState, useCallback} from 'react';
 import {Methods, Events} from './ClientProtocol';
@@ -40,6 +38,8 @@ import {
   useMemoize,
   Toolbar,
   theme,
+  styled,
+  produce,
 } from 'flipper-plugin';
 import {
   Select,

desktop/plugins/public/databases/utils.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export function getStringFromErrorLike(e: any): string {
+  if (Array.isArray(e)) {
+    return e.map(getStringFromErrorLike).join(' ');
+  } else if (typeof e == 'string') {
+    return e;
+  } else if (e instanceof Error) {
+    return e.message || e.toString();
+  } else {
+    try {
+      return JSON.stringify(e);
+    } catch (e) {
+      // Stringify might fail on arbitrary structures
+      // Last resort: toString it.
+      return '' + e;
+    }
+  }
+}