From 21c3e5c900c266b99163fc40a5dd826585a47eed Mon Sep 17 00:00:00 2001
From: Richard Dominick <richdom2185@gmail.com>
Date: Sun, 14 Aug 2022 16:32:07 +0800
Subject: [PATCH 1/8] Switch 'secret' field to use InputGroup element

Uses the alternative implementation of creating input groups as
specified by docs: https://blueprintjs.com/docs/#core/components/text-inputs.input-group
---
 .../RemoteExecutionDeviceDialog.tsx           | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
index b90944d1cc..dc991b657e 100644
--- a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
+++ b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
@@ -1,4 +1,12 @@
-import { Button, Callout, Classes, Dialog, FormGroup, HTMLSelect } from '@blueprintjs/core';
+import {
+  Button,
+  Callout,
+  Classes,
+  Dialog,
+  FormGroup,
+  HTMLSelect,
+  InputGroup
+} from '@blueprintjs/core';
 import classNames from 'classnames';
 import React from 'react';
 import { useDispatch } from 'react-redux';
@@ -113,15 +121,11 @@ export default function RemoteExecutionDeviceDialog({
         </FormGroup>
 
         <FormGroup label="Secret" labelFor="sa-remote-execution-secret">
-          <input
+          <InputGroup
             id="sa-remote-execution-secret"
-            className={classNames(
-              Classes.INPUT,
-              Classes.FILL,
-              secretField.isValid || Classes.INTENT_DANGER
-            )}
+            className={classNames(Classes.FILL, secretField.isValid || Classes.INTENT_DANGER)}
             type="text"
-            ref={secretField.ref}
+            inputRef={secretField.ref}
             onChange={secretField.onChange}
             disabled={isSubmitting}
             readOnly={!!deviceToEdit}

From 1d621186740cff72ad1a1adb50fbed7b793b3f36 Mon Sep 17 00:00:00 2001
From: Richard Dominick <richdom2185@gmail.com>
Date: Sun, 14 Aug 2022 21:58:52 +0800
Subject: [PATCH 2/8] Add react-qr-reader dependency

---
 package.json |  1 +
 yarn.lock    | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/package.json b/package.json
index ffff97f925..1634b506b5 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "react-latex-next": "^2.1.0",
     "react-mde": "^11.5.0",
     "react-papaparse": "^4.0.2",
+    "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^8.0.2",
     "react-responsive": "^9.0.0-beta.10",
     "react-router-dom": "^5.3.0",
diff --git a/yarn.lock b/yarn.lock
index f8f68906ea..15118a7a3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2761,6 +2761,27 @@
   resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@zxing/browser@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@zxing/browser/-/browser-0.0.7.tgz#5fa7680a867b660f48d3288fdf63e0174ad531c7"
+  integrity sha512-AepzMgDnD6EjxewqmXpHJsi4S3Gw9ilZJLIbTf6fWuWySEcHBodnGu3p7FWlgq1Sd5QyfPhTum5z3CBkkhMVng==
+  optionalDependencies:
+    "@zxing/text-encoding" "^0.9.0"
+
+"@zxing/library@^0.18.3":
+  version "0.18.6"
+  resolved "https://registry.yarnpkg.com/@zxing/library/-/library-0.18.6.tgz#717af8c6c1fd982865e21051afdd7b470ae6674c"
+  integrity sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==
+  dependencies:
+    ts-custom-error "^3.0.0"
+  optionalDependencies:
+    "@zxing/text-encoding" "~0.9.0"
+
+"@zxing/text-encoding@^0.9.0", "@zxing/text-encoding@~0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
+  integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz"
@@ -11304,6 +11325,15 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+react-qr-reader@^3.0.0-beta-1:
+  version "3.0.0-beta-1"
+  resolved "https://registry.yarnpkg.com/react-qr-reader/-/react-qr-reader-3.0.0-beta-1.tgz#e04a20876409313439959d8e0ea6df3ba6e36d68"
+  integrity sha512-5HeFH9x/BlziRYQYGK2AeWS9WiKYZtGGMs9DXy3bcySTX3C9UJL9EwcPnWw8vlf7JP4FcrAlr1SnZ5nsWLQGyw==
+  dependencies:
+    "@zxing/browser" "0.0.7"
+    "@zxing/library" "^0.18.3"
+    rollup "^2.67.2"
+
 react-reconciler@~0.26.2:
   version "0.26.2"
   resolved "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.26.2.tgz"
@@ -12005,6 +12035,13 @@ rollup@^1.31.1:
     "@types/node" "*"
     acorn "^7.1.0"
 
+rollup@^2.67.2:
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.0.tgz#00995deae70c0f712ea79ad904d5f6b033209d9e"
+  integrity sha512-4+YfbQC9QEVvKTanHhIAFVUFSRsezvQF8vFOJwtGfb9Bb+r014S+qryr9PSmw8x6sMnPkmFBGAvIFVQxvJxjtg==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rst-selector-parser@^2.2.3:
   version "2.2.3"
   resolved "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz"
@@ -13281,6 +13318,11 @@ tryer@^1.0.1:
   resolved "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-custom-error@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.2.0.tgz#ff8f80a3812bab9dc448536312da52dce1b720fb"
+  integrity sha512-cBvC2QjtvJ9JfWLvstVnI45Y46Y5dMxIaG1TDMGAD/R87hpvqFL+7LhvUDhnRCfOnx/xitollFWWvUKKKhbN0A==
+
 ts-node@^10.4.0:
   version "10.4.0"
   resolved "https://registry.npmjs.org/ts-node/-/ts-node-10.4.0.tgz"

From df6a0df71958d1a4f7992f146d226caefa5e2d56 Mon Sep 17 00:00:00 2001
From: Richard Dominick <richdom2185@gmail.com>
Date: Sun, 14 Aug 2022 22:33:33 +0800
Subject: [PATCH 3/8] Add ability to paste secret from QR code

---
 .../RemoteExecutionDeviceDialog.tsx           | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
index dc991b657e..2442579f46 100644
--- a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
+++ b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
@@ -7,8 +7,10 @@ import {
   HTMLSelect,
   InputGroup
 } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React from 'react';
+import { QrReader } from 'react-qr-reader';
 import { useDispatch } from 'react-redux';
 
 import { editDevice, registerDevice } from '../../commons/sagas/RequestsSaga';
@@ -39,6 +41,7 @@ export default function RemoteExecutionDeviceDialog({
 
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState<string | undefined>();
+  const [showScanner, setShowScanner] = React.useState(false);
 
   const onSubmit = async () => {
     const fields = collectFieldValues(nameField, typeField, secretField);
@@ -67,6 +70,12 @@ export default function RemoteExecutionDeviceDialog({
     setIsSubmitting(false);
   };
 
+  const scanButton = (
+    <Tooltip2 content="Scan QR Code">
+      <Button minimal icon="clip" onClick={() => setShowScanner(() => !showScanner)} />
+    </Tooltip2>
+  );
+
   return (
     <Dialog
       icon={deviceToEdit ? 'edit' : 'add'}
@@ -129,10 +138,31 @@ export default function RemoteExecutionDeviceDialog({
             onChange={secretField.onChange}
             disabled={isSubmitting}
             readOnly={!!deviceToEdit}
-            {...(deviceToEdit ? { value: deviceToEdit.secret } : undefined)}
+            {...(deviceToEdit ? { value: deviceToEdit.secret } : { rightElement: scanButton })}
           />
         </FormGroup>
 
+        {showScanner && (
+          <QrReader
+            onResult={(result, err) => {
+              if (result) {
+                setShowScanner(false);
+                const element = secretField.ref.current;
+                if (element) {
+                  element.value = result.getText();
+                }
+              }
+            }}
+            constraints={{
+              aspectRatio: 1,
+              frameRate: { ideal: 12 },
+              deviceId: { ideal: '0' }
+            }}
+            containerStyle={{ width: '50%', marginInline: 'auto' }}
+            videoStyle={{ borderRadius: '0.3em' }}
+          />
+        )}
+
         {errorMessage && <Callout intent="danger">{errorMessage}</Callout>}
       </div>
       <div className={Classes.DIALOG_FOOTER}>

From 5e0d245acdc09c72c97a722e07dbcca1a7cfe8da Mon Sep 17 00:00:00 2001
From: Richard Dominick <richdom2185@gmail.com>
Date: Sun, 14 Aug 2022 23:41:54 +0800
Subject: [PATCH 4/8] Add support for prefilled remote execution device dialog
 using URL params

---
 .../SideContentRemoteExecution.tsx            | 12 ++++-
 .../RemoteExecutionDeviceDialog.tsx           |  5 +-
 src/pages/playground/Playground.tsx           | 47 ++++++++++++++-----
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/commons/sideContent/SideContentRemoteExecution.tsx b/src/commons/sideContent/SideContentRemoteExecution.tsx
index e8910ce946..38e0a2d012 100644
--- a/src/commons/sideContent/SideContentRemoteExecution.tsx
+++ b/src/commons/sideContent/SideContentRemoteExecution.tsx
@@ -25,6 +25,7 @@ import { WorkspaceLocation } from '../workspace/WorkspaceTypes';
 
 export interface SideContentRemoteExecutionProps {
   workspace: WorkspaceLocation;
+  secretParams?: string;
 }
 
 interface DeviceMenuItemButtonsProps {
@@ -116,7 +117,10 @@ const DeviceContent = ({ session }: { session?: DeviceSession }) => {
 };
 
 const SideContentRemoteExecution: React.FC<SideContentRemoteExecutionProps> = props => {
-  const [dialogState, setDialogState] = React.useState<Device | true | undefined>(undefined);
+  const [dialogState, setDialogState] = React.useState<Device | true | undefined>(
+    props.secretParams ? true : undefined
+  );
+  const [secretParams, setSecretParams] = React.useState(props.secretParams);
 
   const [isLoggedIn, devices, currentSession]: [
     boolean,
@@ -212,7 +216,11 @@ const SideContentRemoteExecution: React.FC<SideContentRemoteExecutionProps> = pr
       <RemoteExecutionAddDeviceDialog
         isOpen={!!dialogState}
         deviceToEdit={typeof dialogState === 'object' ? dialogState : undefined}
-        onClose={() => setDialogState(undefined)}
+        defaultSecret={dialogState === true ? secretParams : undefined}
+        onClose={() => {
+          setDialogState(undefined);
+          setSecretParams(undefined);
+        }}
       />
     </div>
   );
diff --git a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
index 2442579f46..4a9363a519 100644
--- a/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
+++ b/src/features/remoteExecution/RemoteExecutionDeviceDialog.tsx
@@ -27,12 +27,14 @@ export interface RemoteExecutionDeviceDialogProps {
   isOpen: boolean;
   onClose: () => void;
   deviceToEdit?: Device;
+  defaultSecret?: string;
 }
 
 export default function RemoteExecutionDeviceDialog({
   isOpen,
   onClose,
-  deviceToEdit
+  deviceToEdit,
+  defaultSecret
 }: RemoteExecutionDeviceDialogProps) {
   const dispatch = useDispatch();
   const nameField = useField<HTMLInputElement>(validateNotEmpty);
@@ -138,6 +140,7 @@ export default function RemoteExecutionDeviceDialog({
             onChange={secretField.onChange}
             disabled={isSubmitting}
             readOnly={!!deviceToEdit}
+            defaultValue={defaultSecret}
             {...(deviceToEdit ? { value: deviceToEdit.secret } : { rightElement: scanButton })}
           />
         </FormGroup>
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 3e0a366f8b..f3b32e3389 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -11,7 +11,7 @@ import * as React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { useSelector } from 'react-redux';
 import { useMediaQuery } from 'react-responsive';
-import { RouteComponentProps } from 'react-router';
+import { RouteComponentProps, useHistory, useLocation } from 'react-router';
 import { showFullJSWarningOnUrlLoad } from 'src/commons/fullJS/FullJSUtils';
 
 import {
@@ -171,9 +171,25 @@ const Playground: React.FC<PlaygroundProps> = props => {
   const isMobileBreakpoint = useMediaQuery({ maxWidth: Constants.mobileBreakpoint });
   const propsRef = React.useRef(props);
   propsRef.current = props;
+
+  const [deviceSecret, setDeviceSecret] = React.useState<string | undefined>();
+  const location = useLocation();
+  const history = useHistory();
+  const searchParams = new URLSearchParams(location.search);
+  const shouldAddDevice = searchParams.get('add_device');
+
+  // Hide search query from URL to maintain an illusion of security. The device secret
+  // is still exposed via the 'Referer' header when requesting external content (e.g. Google API fonts)
+  if (shouldAddDevice && !deviceSecret) {
+    setDeviceSecret(shouldAddDevice);
+    history.replace(location.pathname);
+  }
+
   const [lastEdit, setLastEdit] = React.useState(new Date());
   const [isGreen, setIsGreen] = React.useState(false);
-  const [selectedTab, setSelectedTab] = React.useState(SideContentType.introduction);
+  const [selectedTab, setSelectedTab] = React.useState(
+    shouldAddDevice ? SideContentType.remoteExecution : SideContentType.introduction
+  );
   const [hasBreakpoints, setHasBreakpoints] = React.useState(false);
   const [sessionId, setSessionId] = React.useState(() =>
     initSession('playground', {
@@ -182,6 +198,22 @@ const Playground: React.FC<PlaygroundProps> = props => {
     })
   );
 
+  const remoteExecutionTab: SideContentTab = React.useMemo(
+    () => ({
+      label: 'Remote Execution',
+      iconName: IconNames.SATELLITE,
+      body: (
+        <SideContentRemoteExecution
+          workspace="playground"
+          secretParams={deviceSecret || undefined}
+        />
+      ),
+      id: SideContentType.remoteExecution,
+      toSpawn: () => true
+    }),
+    [deviceSecret]
+  );
+
   const usingRemoteExecution =
     useSelector((state: OverallState) => !!state.session.remoteExecutionSession) && !isSicpEditor;
   // this is still used by remote execution (EV3)
@@ -592,7 +624,8 @@ const Playground: React.FC<PlaygroundProps> = props => {
     props.output,
     props.playgroundSourceChapter,
     props.playgroundSourceVariant,
-    usingRemoteExecution
+    usingRemoteExecution,
+    remoteExecutionTab
   ]);
 
   // Remove Intro and Remote Execution tabs for mobile
@@ -813,12 +846,4 @@ const envVisualizerTab: SideContentTab = {
   toSpawn: () => true
 };
 
-const remoteExecutionTab: SideContentTab = {
-  label: 'Remote Execution',
-  iconName: IconNames.SATELLITE,
-  body: <SideContentRemoteExecution workspace="playground" />,
-  id: SideContentType.remoteExecution,
-  toSpawn: () => true
-};
-
 export default Playground;

From b866159748d63ea05885de5b9f46a5bd4c5c9ded Mon Sep 17 00:00:00 2001
From: Richard Dominick <richdom2185@gmail.com>
Date: Mon, 15 Aug 2022 00:45:29 +0800
Subject: [PATCH 5/8] Add Remote Execution tab to mobile workspace

---
 src/pages/playground/Playground.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index f3b32e3389..92083a2aef 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -249,11 +249,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
    * Handles toggling of relevant SideContentTabs when mobile breakpoint it hit
    */
   React.useEffect(() => {
-    if (
-      isMobileBreakpoint &&
-      (selectedTab === SideContentType.introduction ||
-        selectedTab === SideContentType.remoteExecution)
-    ) {
+    if (isMobileBreakpoint && selectedTab === SideContentType.introduction) {
       setSelectedTab(SideContentType.mobileEditor);
     } else if (
       !isMobileBreakpoint &&
@@ -629,9 +625,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
   ]);
 
   // Remove Intro and Remote Execution tabs for mobile
-  const mobileTabs = [...tabs].filter(
-    x => x !== playgroundIntroductionTab && x !== remoteExecutionTab
-  );
+  const mobileTabs = [...tabs].filter(x => x !== playgroundIntroductionTab);
 
   const onLoadMethod = React.useCallback(
     (editor: Ace.Editor) => {

From d89184a2cd792547b06a70880647775345665a08 Mon Sep 17 00:00:00 2001
From: Richard Dominick <richdom2185@gmail.com>
Date: Mon, 15 Aug 2022 01:21:31 +0800
Subject: [PATCH 6/8] Refactor how tabs are shown in Playground

---
 src/pages/playground/Playground.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 92083a2aef..c90470ca6e 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -249,13 +249,9 @@ const Playground: React.FC<PlaygroundProps> = props => {
    * Handles toggling of relevant SideContentTabs when mobile breakpoint it hit
    */
   React.useEffect(() => {
-    if (isMobileBreakpoint && selectedTab === SideContentType.introduction) {
+    if (isMobileBreakpoint && desktopOnlyTabIds.includes(selectedTab)) {
       setSelectedTab(SideContentType.mobileEditor);
-    } else if (
-      !isMobileBreakpoint &&
-      (selectedTab === SideContentType.mobileEditor ||
-        selectedTab === SideContentType.mobileEditorRun)
-    ) {
+    } else if (!isMobileBreakpoint && mobileOnlyTabIds.includes(selectedTab)) {
       setSelectedTab(SideContentType.introduction);
     }
   }, [isMobileBreakpoint, selectedTab]);
@@ -625,7 +621,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
   ]);
 
   // Remove Intro and Remote Execution tabs for mobile
-  const mobileTabs = [...tabs].filter(x => x !== playgroundIntroductionTab);
+  const mobileTabs = [...tabs].filter(({ id }) => !(id && desktopOnlyTabIds.includes(id)));
 
   const onLoadMethod = React.useCallback(
     (editor: Ace.Editor) => {
@@ -824,6 +820,12 @@ const Playground: React.FC<PlaygroundProps> = props => {
   );
 };
 
+const mobileOnlyTabIds: readonly SideContentType[] = [
+  SideContentType.mobileEditor,
+  SideContentType.mobileEditorRun
+];
+const desktopOnlyTabIds: readonly SideContentType[] = [SideContentType.introduction];
+
 const dataVisualizerTab: SideContentTab = {
   label: 'Data Visualizer',
   iconName: IconNames.EYE_OPEN,

From e9d81fb3ca4dc885f980e80f1f3390ae4830095b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 15 Sep 2022 04:54:51 +0800
Subject: [PATCH 7/8] Backpropagate device dialog state update

Fixes bug where dialog would keep popping up when the workspace switches
between mobile and desktop.
---
 src/commons/sideContent/SideContentRemoteExecution.tsx | 6 +++++-
 src/pages/playground/Playground.tsx                    | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/commons/sideContent/SideContentRemoteExecution.tsx b/src/commons/sideContent/SideContentRemoteExecution.tsx
index 38e0a2d012..532fb3928f 100644
--- a/src/commons/sideContent/SideContentRemoteExecution.tsx
+++ b/src/commons/sideContent/SideContentRemoteExecution.tsx
@@ -9,7 +9,7 @@ import {
   Spinner
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import React from 'react';
+import React, { SetStateAction } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 import { Dispatch } from 'redux';
@@ -26,6 +26,7 @@ import { WorkspaceLocation } from '../workspace/WorkspaceTypes';
 export interface SideContentRemoteExecutionProps {
   workspace: WorkspaceLocation;
   secretParams?: string;
+  callbackFunction?: React.Dispatch<SetStateAction<string | undefined>>;
 }
 
 interface DeviceMenuItemButtonsProps {
@@ -220,6 +221,9 @@ const SideContentRemoteExecution: React.FC<SideContentRemoteExecutionProps> = pr
         onClose={() => {
           setDialogState(undefined);
           setSecretParams(undefined);
+          if (props.callbackFunction) {
+            props.callbackFunction(undefined);
+          }
         }}
       />
     </div>
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index c90470ca6e..3fdccdbf79 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -206,6 +206,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
         <SideContentRemoteExecution
           workspace="playground"
           secretParams={deviceSecret || undefined}
+          callbackFunction={setDeviceSecret}
         />
       ),
       id: SideContentType.remoteExecution,

From 4bd9b0ee1a20fd7aeb59fb36288280784b8e8f7c Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 15 Sep 2022 05:03:39 +0800
Subject: [PATCH 8/8] Fix mobile UI styling

---
 src/pages/playground/Playground.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx
index 3fdccdbf79..78dd76e74b 100644
--- a/src/pages/playground/Playground.tsx
+++ b/src/pages/playground/Playground.tsx
@@ -809,7 +809,9 @@ const Playground: React.FC<PlaygroundProps> = props => {
   };
 
   return isMobileBreakpoint ? (
-    <MobileWorkspace {...mobileWorkspaceProps} />
+    <div className={classNames('Playground', Classes.DARK, isGreen ? 'GreenScreen' : undefined)}>
+      <MobileWorkspace {...mobileWorkspaceProps} />
+    </div>
   ) : (
     <HotKeys
       className={classNames('Playground', Classes.DARK, isGreen ? 'GreenScreen' : undefined)}