Allow sidebar side to be controlled

Summary:
Each time the sidebar closes and re opens it loses its previous side, this is very frustrating.

Given we dont know where / how the sidebar size atom should be scoped, (component level, plugin level local storage) we just expose the resize handler for developer to control this aspect if they want to.

Reviewed By: mweststrate

Differential Revision: D56237144

fbshipit-source-id: fa2fc67e813d722852d57808a23a15f8d5ba7e9e

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

@@ -116,6 +116,7 @@ export interface FlipperLib {
     children: any;
     width?: number;
     minWidth?: number;
+    onResize?: (width: number, height: number) => void;
   }): ReactElement | null;
   /**
    * @returns

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

@@ -15,6 +15,7 @@ export type DetailSidebarProps = {
   children: any;
   width?: number;
   minWidth?: number;
+  onResize?: (width: number, height: number) => void;
 };
 
 /* eslint-disable react-hooks/rules-of-hooks */

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

@@ -50,9 +50,14 @@ type MasterDetailProps<T> = {
     tableManagerRef?: React.RefObject<DataTableManager<T> | undefined>;
   }>;
   /**
-   * Default size of the sidebar.
+   * Size of the sidebar, can be controlled by listening to onResize, otherwise the initial size
    */
   sidebarSize?: number;
+
+  /**
+   * Fired when user changes sidebar, allows you to control size of side bar and have it persist at whatever level is appropriate
+   */
+  onResize?: (width: number, height: number) => void;
   /**
    * If provided, this atom will be used to store selection in.
    */
@@ -82,6 +87,7 @@ export function MasterDetailWithPowerSearch<T extends object>({
   sidebarComponent,
   sidebarPosition,
   sidebarSize,
+  onResize,
   onSelect,
   actionsTop,
   extraActions,
@@ -244,7 +250,9 @@ export function MasterDetailWithPowerSearch<T extends object>({
       return (
         <Layout.Container grow>
           {table}
-          <DetailSidebar width={sidebarSize}>{sidebar}</DetailSidebar>
+          <DetailSidebar onResize={onResize} width={sidebarSize}>
+            {sidebar}
+          </DetailSidebar>
         </Layout.Container>
       );
     case 'right':

desktop/flipper-ui/src/sandy-chrome/DetailSidebarImpl.tsx

@@ -18,13 +18,15 @@ export type DetailSidebarProps = {
   children: any;
   width?: number;
   minWidth?: number;
+  onResize?: (width: number, height: number) => void;
 };
 
 /* eslint-disable react-hooks/rules-of-hooks */
 export function DetailSidebarImpl({
   children,
   width,
   minWidth,
+  onResize,
 }: DetailSidebarProps) {
   const [domNode, setDomNode] = useState(
     document.getElementById('detailsSidebar'),
@@ -70,6 +72,7 @@ export function DetailSidebarImpl({
       domNode &&
       ReactDOM.createPortal(
         <_Sidebar
+          onResize={onResize}
           minWidth={minWidth}
           width={width || 300}
           position="right"