From 2736738beb89acf410090d88c354d96e24eeb8eb Mon Sep 17 00:00:00 2001
From: Ryanseanlee <ryanseanlee@gmail.com>
Date: Wed, 30 Nov 2022 15:23:01 -0800
Subject: [PATCH] Added Dialog wrapper for portalContainer and gave inspector
 z-index of 999 remove modal and collapsible support for inspector

---
 desktop/appcontainer/AppContainer.ts | 27 +++++++++++++++------------
 inspector/Inspector.scss             |  3 ++-
 inspector/InspectorPanel.ts          |  4 +---
 kit/blueprint/Dialog.ts              | 18 +++++++++++++++++-
 kit/blueprint/Wrappers.ts            |  2 --
 5 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/desktop/appcontainer/AppContainer.ts b/desktop/appcontainer/AppContainer.ts
index db0601f722..ac88a0f675 100644
--- a/desktop/appcontainer/AppContainer.ts
+++ b/desktop/appcontainer/AppContainer.ts
@@ -122,10 +122,12 @@ const appContainerView = hoistCmp.factory({
     displayName: 'AppContainerView',
     model: uses(AppContainerModel),
 
-    render({model}) {
-        const {appSpec, appModel} = XH;
-        let ret: ReactElement = viewport(
-            vframe(
+render({model}) {
+    const {appSpec, appModel} = XH;
+    let ret: ReactElement = viewport(
+        vframe({
+            id: 'xh-app-content',
+            item:[
                 impersonationBar(),
                 bannerList(),
                 refreshContextView({
@@ -133,14 +135,15 @@ const appContainerView = hoistCmp.factory({
                     item: frame(createElement(appSpec.componentClass, {model: appModel}))
                 }),
                 inspectorPanel(),
-                versionBar()
-            ),
-            mask({bind: model.appLoadModel, spinner: true}),
-            aboutDialog(),
-            changelogDialog(),
-            feedbackDialog(),
-            optionsDialog()
-        );
+                versionBar()]
+
+        }),
+        mask({bind: model.appLoadModel, spinner: true}),
+        aboutDialog(),
+        changelogDialog(),
+        feedbackDialog(),
+        optionsDialog()
+    );
 
         if (!appSpec.showBrowserContextMenu) {
             ret = useContextMenu(ret, null);
diff --git a/inspector/Inspector.scss b/inspector/Inspector.scss
index 62e4ae0a56..f9be8440b2 100644
--- a/inspector/Inspector.scss
+++ b/inspector/Inspector.scss
@@ -1,5 +1,6 @@
 .xh-inspector {
-  .xh-modal-support__host > .xh-panel__content > .xh-panel-header {
+  z-index: 999;
+  > div >.xh-panel__content > .xh-panel-header {
     background-color: hsl(33, 93%, 40%);
     color: white;
   }
diff --git a/inspector/InspectorPanel.ts b/inspector/InspectorPanel.ts
index abb867985b..5350433baf 100644
--- a/inspector/InspectorPanel.ts
+++ b/inspector/InspectorPanel.ts
@@ -24,9 +24,7 @@ export const inspectorPanel = hoistCmp.factory({
                 defaultSize: 400,
                 side: 'bottom',
                 persistWith: XH.inspectorService.persistWith,
-                modalSupport: true,
-                showModalToggleButton: true,
-                showHeaderCollapseButton: false,
+                collapsible: false,
                 xhImpl: true
             },
             compactHeader: true,
diff --git a/kit/blueprint/Dialog.ts b/kit/blueprint/Dialog.ts
index 93697f3616..ea6db364ac 100644
--- a/kit/blueprint/Dialog.ts
+++ b/kit/blueprint/Dialog.ts
@@ -5,11 +5,27 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 import {div} from '@xh/hoist/cmp/layout';
-import {hoistCmp} from '@xh/hoist/core';
+import {elementFactory, hoistCmp} from '@xh/hoist/core';
+import {Dialog as BpDialog} from '@blueprintjs/core';
+
+const bpDialog = elementFactory(BpDialog)
+
 
 /**
  * Dialog Body for Blueprint, wrapped as a Hoist Component.
  */
+export const [Dialog, dialog] = hoistCmp.withContainerFactory({
+    displayName: 'Dialog',
+    observer: false, model: false, memo: false,
+
+    render(props) {
+        return bpDialog({
+            portalContainer: document.getElementById('xh-app-content'),
+            ...props
+        });
+    }
+});
+
 export const [DialogBody, dialogBody] = hoistCmp.withContainerFactory({
     displayName: 'DialogBody',
     className: 'bp4-dialog-body',
diff --git a/kit/blueprint/Wrappers.ts b/kit/blueprint/Wrappers.ts
index 95827c4bb1..dae2c65d49 100644
--- a/kit/blueprint/Wrappers.ts
+++ b/kit/blueprint/Wrappers.ts
@@ -64,7 +64,6 @@ export {
     Checkbox,
     ControlGroup,
     DatePicker,
-    Dialog,
     Drawer,
     EditableText,
     FileInput,
@@ -107,7 +106,6 @@ export const
     button = elementFactory(Button),
     controlGroup = elementFactory(ControlGroup),
     checkbox = elementFactory(Checkbox),
-    dialog = elementFactory(Dialog),
     datePicker = elementFactory(DatePicker),
     menuDivider = elementFactory(MenuDivider),
     menuItem = elementFactory(MenuItem),