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,
   });
 }

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>;
+}

docs/extending/flipper-plugin.mdx

@@ -789,6 +789,13 @@ Coming soon.
 An element that can be used to provide a New User eXperience: Hints that give a one time introduction to new features to the current user.
 See `View > Flipper Style Guide` inside the Flipper application for more details.
 
+### DetailSidebar
+
+An element that can be passed children which will be shown in the right sidebar of Flipper.
+Horizontal scrolling will be enabled by default. 
+To fine-tune the default dimensions use `width` and `minWidth`.
+It doesn't really matter where exactly this component is used in your layout, as the contents will be moved to the  main Flipper chrome, rather than being rendered in place.
+
 <FbInternalOnly>
 
 ### Tracked