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>
             ) : (
-              <Button onClick={() => setEditing(true)}>Edit</Button>
+              <Layout.Horizontal pad>
+                <Button onClick={() => setEditing(true)}>Edit</Button>
+              </Layout.Horizontal>
             )}
-          </EditTriggerSection>
+          </Layout.Right>
         ) : null}
         <div>
           {rows.map((row) => (