Dialog management cleanup

Summary:
This diff moves the dialogs

* Settings
* Plugin Manager
* Doctor
* Sign in
* Changelog

To use the imperative dialog APIs, rather then organising them through reducers which adds a lot of indirection which isn't really needed but hard to follow.

Reviewed By: passy

Differential Revision: D30192002

fbshipit-source-id: ba38b2e700da3e442653786448fcbf85074981ad

desktop/flipper-plugin/src/utils/renderReactRoot.tsx

@@ -7,8 +7,9 @@
  * @format
  */
 
-import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
+import {createState, useValue} from '../state/atom';
+import React, {ReactPortal} from 'react';
+import {createPortal, unmountComponentAtNode} from 'react-dom';
 
 /**
  * This utility creates a fresh react render hook, which is great to render elements imperatively, like opening dialogs.
@@ -20,9 +21,28 @@ export function renderReactRoot(
   // TODO: find a way to make this visible in unit tests as well
   const div = document.body.appendChild(document.createElement('div'));
   const unmount = () => {
+    portals.update((draft) => {
+      draft.delete(id);
+    });
     unmountComponentAtNode(div);
     div.remove();
   };
-  render(handler(unmount), div);
+  const id = ++portalId;
+  const portal = createPortal(handler(unmount), div);
+  portals.update((draft) => {
+    draft.set(id, portal);
+  });
+
   return unmount;
 }
+
+let portalId = 0;
+const portals = createState(new Map<number, ReactPortal>());
+
+/**
+ * This is a dummy component, that just makes sure react roots are managed within a certain node in the main React tree, so that context etc is available.
+ */
+export function _PortalsManager() {
+  const portalElements = useValue(portals);
+  return <>{Array.from(portalElements).map(([_id, portal]) => portal)}</>;
+}