Move DetailSidebar to flipper-plugin

Summary: This moves `<DetailSidebar>` component to `flipper-plugin` and documents it. No semantic changes.

Reviewed By: passy

Differential Revision: D27234575

fbshipit-source-id: 74640602d718f84ad999f5dac0420089796ed7fb

desktop/app/src/createTablePlugin.tsx

@@ -15,7 +15,7 @@ import {
 } from './ui';
 import FlexColumn from './ui/components/FlexColumn';
 import Button from './ui/components/Button';
-import DetailSidebar from './chrome/DetailSidebar';
+import {DetailSidebar} from 'flipper-plugin';
 import {FlipperPlugin} from './plugin';
 import SearchableTable_immutable from './ui/components/searchable/SearchableTable_immutable';
 import textContent from './utils/textContent';

desktop/app/src/index.tsx

@@ -49,7 +49,7 @@ export {shouldParseAndroidLog} from './utils/crashReporterUtility';
 export {deconstructClientId} from './utils/clientUtils';
 export {default as isProduction} from './utils/isProduction';
 export {createTablePlugin} from './createTablePlugin';
-export {default as DetailSidebar} from './chrome/DetailSidebar';
+export {DetailSidebar} from 'flipper-plugin';
 export {default as Device} from './devices/BaseDevice';
 export {default as AndroidDevice} from './devices/AndroidDevice';
 export {default as MetroDevice} from './devices/MetroDevice';

desktop/app/src/plugins/TableNativePlugin.tsx

@@ -27,7 +27,7 @@ import {
   TableColumnOrderVal,
   TableBodyRow,
 } from '../ui/components/table/types';
-import DetailSidebar from '../chrome/DetailSidebar';
+import {DetailSidebar} from 'flipper-plugin';
 import {FlipperPlugin} from '../plugin';
 import textContent from '../utils/textContent';
 import createPaste from '../fb-stubs/createPaste';

desktop/app/src/sandy-chrome/DesignComponentDemos.tsx

@@ -213,7 +213,7 @@ const demos: PreviewProps[] = [
   {
     title: 'Layout.Top|Left|Right|Bottom',
     description:
-      "Divides all available space over two children. The (top|left|right|bottom)-most first child will keep it's own dimensions, and positioned (top|left|right|bottom) of the other child. All remaining space will be assigned to the remaining child.",
+      "Divides all available space over two children. The (top|left|right|bottom)-most first child will keep it's own dimensions, and positioned (top|left|right|bottom) of the other child. All remaining space will be assigned to the remaining child. If you are using a Layout.Right at the top level of your plugin, consider using DetailSidebar component instead, which will move its children to the right sidebar of Flipper.",
     props: [
       [
         'scrollable',

desktop/app/src/sandy-chrome/DetailSidebarImpl.tsx

@@ -14,14 +14,18 @@ import {useDispatch, useStore} from '../utils/useStore';
 import {ContentContainer} from '../sandy-chrome/ContentContainer';
 import {Layout, _Sidebar} from 'flipper-plugin';
 
-type OwnProps = {
+export type DetailSidebarProps = {
   children: any;
   width?: number;
   minWidth?: number;
 };
 
 /* eslint-disable react-hooks/rules-of-hooks */
-export default function DetailSidebar({children, width, minWidth}: OwnProps) {
+export function DetailSidebarImpl({
+  children,
+  width,
+  minWidth,
+}: DetailSidebarProps) {
   const [domNode, setDomNode] = useState(
     document.getElementById('detailsSidebar'),
   );

desktop/app/src/utils/flipperLibImplementation.tsx

@@ -17,6 +17,7 @@ import {clipboard} from 'electron';
 import constants from '../fb-stubs/constants';
 import {addNotification} from '../reducers/notifications';
 import {deconstructPluginKey} from './clientUtils';
+import {DetailSidebarImpl} from '../sandy-chrome/DetailSidebarImpl';
 
 export function initializeFlipperLibImplementation(
   store: Store,
@@ -83,5 +84,6 @@ export function initializeFlipperLibImplementation(
         }),
       );
     },
+    DetailsSidebarImplementation: DetailSidebarImpl,
   });
 }