Remove dialog and support fullscreen

Author: OskarDamkjaer

src/browser/components/ConfirmationDialog.tsx

@@ -47,7 +47,6 @@ import {
 } from 'shared/modules/stream/streamDuck'
 import { sleep } from 'shared/services/utils'
 import { FrameButton } from 'browser-components/buttons'
-import ConfirmationDialog from 'browser-components/ConfirmationDialog'
 import Render from 'browser-components/Render'
 import { CSVSerializer } from 'services/serializer'
 import {
@@ -133,7 +132,6 @@ function FrameTitlebar(props: FrameTitleBarProps) {
     // makes sure the frame is updated as links in frame is followed
     editorRef.current?.setValue(props.frame.cmd)
   }, [props.frame.cmd])
-  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false)
   const editorRef = useRef<MonacoHandles>(null)
 
   /* When the frametype is changed the titlebar is unmounted
@@ -163,6 +161,17 @@ function FrameTitlebar(props: FrameTitleBarProps) {
   }, [props.frame.isRerun])
   useEffect(gainFocusCallback, [gainFocusCallback])
 
+  useEffect(() => {
+    if (props.bus && props.fullscreen) {
+      return props.bus.take(editor.SET_CONTENT, ({ message }) => {
+        setRenderEditor(true)
+        // timeout needed for editor to mount if not yet mounted.
+        setTimeout(() => editorRef.current?.setValue(message), 0)
+      })
+    }
+    return undefined
+  }, [props.bus, props.fullscreen])
+
   function hasData() {
     return props.numRecords > 0
   }
@@ -400,34 +409,10 @@ function FrameTitlebar(props: FrameTitleBarProps) {
             <SVGInline svg={controlsPlay} width="12px" />
           </FrameButton>
         </Render>
-        <ConfirmationDialog
-          confirmLabel="Yes, close frame"
-          onClose={() => {
-            setConfirmationDialogOpen(false)
-          }}
-          onConfirm={() => {
-            setConfirmationDialogOpen(false)
-            props.onCloseClick(frame.id, frame.requestId, props.request)
-          }}
-          open={confirmationDialogOpen}
-        >
-          <h2 style={{ fontWeight: 'normal' }}>Close frame?</h2>
-          <p>
-            Closing the frame cannot be undone.
-            <br />
-            You can access you query history by running <code>
-              :history
-            </code>{' '}
-            command.
-          </p>
-          <p>Do you want to close the frame anyway?</p>
-        </ConfirmationDialog>
         <FrameButton
           title="Close"
           onClick={() => {
-            frame.isRerun
-              ? setConfirmationDialogOpen(true)
-              : props.onCloseClick(frame.id, frame.requestId, props.request)
+            props.onCloseClick(frame.id, frame.requestId, props.request)
           }}
         >
           <CloseIcon />

src/browser/modules/Frame/FrameTitlebar.tsx

@@ -31,12 +31,13 @@ export const StyledFrame = styled.article<FullscreenProps>`
   ${props =>
     props.fullscreen
       ? `margin: 0;
-position: fixed;
-left: 0;
+position: absolute;
+left: -9px;
 top: 0;
-bottom: 0;
-right: 0;
-z-index: 130;`
+bottom: 0px;
+right: -10px;
+z-index: 130;
+`
       : 'margin 0 0 10px 0;'}
 
   &:hover .carousel-intro-animation {
@@ -105,9 +106,9 @@ export const StyledFrameContents = styled.div<FullscreenProps>`
   min-height: ${dim.frameBodyHeight / 2}px;
   max-height: ${props =>
     props.fullscreen
-      ? '100vh'
+      ? 'auto'
       : dim.frameBodyHeight - dim.frameStatusbarHeight * 2 + 'px'};
-  ${props => (props.fullscreen ? 'height: 100vh' : null)};
+  ${props => (props.fullscreen ? 'height: calc(100vh - 40px)' : null)};
   flex: auto;
   display: flex;
   width: 100%;

src/browser/modules/Frame/styled.tsx

@@ -21,13 +21,12 @@
 import styled from 'styled-components'
 import { dim } from 'browser-styles/constants'
 
-export const StyledVisContainer: any = styled.div`
+export const StyledVisContainer = styled.div<{ fullscreen: boolean }>`
   width: 100%;
   overflow: hidden;
-  ${(props: any) => (props.fullscreen ? 'padding-bottom: 39px' : null)};
-  height: ${(props: any) =>
+  height: ${props =>
     props.fullscreen
-      ? '100vh'
+      ? 'calc(100vh - 40px)'
       : dim.frameBodyHeight - dim.frameTitlebarHeight * 2 + 'px'};
   > svg {
     width: 100%;