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/flipper-plugin/src/__tests__/api.node.tsx

@@ -31,6 +31,7 @@ test('Correct top level API exposed', () => {
       "DataFormatter",
       "DataSource",
       "DataTable",
+      "DetailSidebar",
       "Layout",
       "NUX",
       "TestUtils",

desktop/flipper-plugin/src/index.ts

@@ -56,6 +56,7 @@ export {
   createNuxManager as _createNuxManager,
 } from './ui/NUX';
 export {Sidebar as _Sidebar} from './ui/Sidebar';
+export {DetailSidebar} from './ui/DetailSidebar';
 
 export {renderReactRoot} from './utils/renderReactRoot';
 export {

desktop/flipper-plugin/src/plugin/FlipperLib.tsx

@@ -12,6 +12,7 @@ import {RealFlipperDevice} from './DevicePlugin';
 import {NormalizedMenuEntry} from './MenuEntry';
 import {RealFlipperClient} from './Plugin';
 import {Notification} from './Notification';
+import {DetailSidebarProps} from '../ui/DetailSidebar';
 
 /**
  * This interface exposes all global methods for which an implementation will be provided by Flipper itself
@@ -35,6 +36,9 @@ export interface FlipperLib {
   ): void;
   writeTextToClipboard(text: string): void;
   showNotification(pluginKey: string, notification: Notification): void;
+  DetailsSidebarImplementation?(
+    props: DetailSidebarProps,
+  ): React.ReactElement | null;
 }
 
 let flipperLibInstance: FlipperLib | undefined;

desktop/flipper-plugin/src/ui/DetailSidebar.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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
+ */
+
+import React from 'react';
+import {tryGetFlipperLibImplementation} from '../plugin/FlipperLib';
+import {Layout} from './Layout';
+
+export type DetailSidebarProps = {
+  children: any;
+  width?: number;
+  minWidth?: number;
+};
+
+/* eslint-disable react-hooks/rules-of-hooks */
+export function DetailSidebar(props: DetailSidebarProps) {
+  const lib = tryGetFlipperLibImplementation();
+  if (lib?.DetailsSidebarImplementation) {
+    return <lib.DetailsSidebarImplementation {...props} />;
+  }
+  return <Layout.Container>{props.children}</Layout.Container>;
+}