Add full screen modal component (#1117)

extensions/ql-vscode/src/remote-queries/view/FullScreenModal.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import { XCircleIcon } from '@primer/octicons-react';
+
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 1;
+  background-color: var(--vscode-editor-background);
+  z-index: 5000;
+  padding-top: 1em;
+`;
+
+const CloseButton = styled.button`
+  position: absolute;
+  top: 1em;
+  right: 1em;
+  background-color: var(--vscode-editor-background);
+  border: none;
+`;
+
+const FullScreenModal = ({
+  setOpen,
+  containerElementId,
+  children
+}: {
+  setOpen: (open: boolean) => void;
+  containerElementId: string;
+  children: React.ReactNode
+}) => {
+  const containerElement = document.getElementById(containerElementId);
+  if (!containerElement) {
+    throw Error(`Could not find container element. Id: ${containerElementId}`);
+  }
+
+  return ReactDOM.createPortal(
+    <>
+      <Container>
+        <CloseButton onClick={() => setOpen(false)}>
+          <XCircleIcon size={24} />
+        </CloseButton>
+        {children}
+      </Container>
+    </>,
+    containerElement
+  );
+};
+
+export default FullScreenModal;