Add full-screen button for Playground side content

package.json

@@ -31,6 +31,7 @@
     "@blueprintjs/icons": "^5.5.0",
     "@blueprintjs/popover2": "^2.0.0",
     "@blueprintjs/select": "^5.0.0",
+    "@mantine/hooks": "^7.7.0",
     "@octokit/rest": "^20.0.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@sentry/browser": "^7.57.0",

src/commons/workspace/Workspace.tsx

@@ -1,4 +1,7 @@
 import { FocusStyleManager } from '@blueprintjs/core';
+import { Icon } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { useFullscreen } from '@mantine/hooks';
 import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
 import { Direction } from 're-resizable/lib/resizer';
 import React from 'react';
@@ -187,6 +190,15 @@ const Workspace: React.FC<WorkspaceProps> = props => {
     </Resizable>
   );
 
+  // This is a custom hook imported from @mantine/hooks that handles the fullscreen logic
+  // It returns a ref to attach to the element that should be fullscreened,
+  // a function to toggle fullscreen and a boolean indicating whether the element is fullscreen
+  const {
+    ref: fullscreenRef,
+    toggle: toggleFullscreen,
+    fullscreen: isFullscreen
+  } = useFullscreen<HTMLDivElement>();
+
   return (
     <div className="workspace">
       <Prompt
@@ -206,7 +218,14 @@ const Workspace: React.FC<WorkspaceProps> = props => {
         <div className="row content-parent" ref={contentContainerDiv}>
           <div className="editor-divider" ref={editorDividerDiv} />
           <Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
-          <div className="right-parent">
+          <div className="right-parent" ref={fullscreenRef}>
+            <Icon
+              id="fullscreen-button"
+              icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
+              color="white"
+              htmlTitle={isFullscreen ? 'Exit full screen' : 'Full screen'}
+              onClick={toggleFullscreen}
+            />
             {props.sideContentIsResizeable === undefined || props.sideContentIsResizeable
               ? resizableSideContent
               : sideContent}

src/styles/_workspace.scss

@@ -80,6 +80,14 @@ $code-color-notification: #f9f0d7;
     height: 100%;
     padding-bottom: 0.6rem;
     overflow: auto;
+
+    #fullscreen-button {
+      position: absolute;
+      right: 8px;
+      padding: 5px;
+      cursor: pointer;
+      z-index: 100;
+    }
   }
 
   .left-parent {

yarn.lock

@@ -1956,6 +1956,11 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@mantine/hooks@^7.7.0":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.7.1.tgz#04fd8999fe109615d064bf42a8ff04435c93b927"
+  integrity sha512-3YH2FzKMlg840tb04PBDcDXyBCi9puFOxEBVgc6Y/pN6KFqfOoAnQE/YvgOtwSNXZlbTWyDlQoYj+3je7pA7og==
+
 "@mapbox/node-pre-gyp@^1.0.0":
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz#8e6735ccebbb1581e5a7e652244cadc8a844d03c"