Embeds: add secret url flag to hide dev tools (codesandbox#3018)

* add secret hideDevTools

* adjust actions offset based on hidedevtools

* update snapshots for new flag

Author: siddharthkp

packages/app/src/embed/components/Actions/elements.js

@@ -2,7 +2,6 @@ import styled from 'styled-components';
 import css from '@styled-system/css';
 import { HeartIconSVG, ReloadIconSVG, NewWindowIconSVG } from './icons';
 
-// TODO: Check if we still need previewVisible
 export const Container = styled.div(props =>
   css({
     position: 'absolute',
@@ -16,7 +15,7 @@ export const Container = styled.div(props =>
     },
 
     // 28 is the height of console
-    bottom: props.isDragging ? -32 : props.previewVisible ? 28 + 16 : 16,
+    bottom: props.isDragging ? -32 : props.offsetBottom ? 28 + 16 : 16,
     opacity: props.isDragging ? 0 : 1,
     transitionProperty: 'opacity, bottom',
     transitionDuration: theme =>

packages/app/src/embed/components/Actions/index.js

@@ -13,13 +13,13 @@ import {
 export function GlobalActions({
   sandbox,
   toggleLike,
-  previewVisible,
+  offsetBottom,
   isDragging,
 }) {
   return (
     <Container
       align="right"
-      previewVisible={previewVisible}
+      offsetBottom={offsetBottom}
       isDragging={isDragging}
     >
       {toggleLike ? (
@@ -46,9 +46,14 @@ export function GlobalActions({
   );
 }
 
-export function NavigationActions({ refresh, openInNewWindow, isDragging }) {
+export function NavigationActions({
+  refresh,
+  openInNewWindow,
+  offsetBottom,
+  isDragging,
+}) {
   return (
-    <Container align="left" previewVisible isDragging={isDragging}>
+    <Container align="left" offsetBottom={offsetBottom} isDragging={isDragging}>
       <Tooltip content="Refresh preview">
         <Button onClick={refresh} aria-label="Refresh preview">
           <ReloadIcon />

packages/app/src/embed/components/App/index.js

@@ -43,6 +43,7 @@ type State = {
   editorSize: number,
   forceRefresh: boolean,
   expandDevTools: boolean,
+  hideDevTools: boolean,
   runOnClick: boolean,
   verticalMode: boolean,
   highlightedLines: Array<number>,
@@ -87,6 +88,7 @@ export default class App extends React.PureComponent<
       highlightedLines,
       forceRefresh,
       expandDevTools,
+      hideDevTools,
       runOnClick,
       verticalMode = window.innerWidth < window.innerHeight,
       tabs,
@@ -111,6 +113,7 @@ export default class App extends React.PureComponent<
       editorSize,
       forceRefresh,
       expandDevTools,
+      hideDevTools,
       tabs,
       theme,
       runOnClick:
@@ -385,6 +388,7 @@ export default class App extends React.PureComponent<
             highlightedLines={this.state.highlightedLines}
             forceRefresh={this.state.forceRefresh}
             expandDevTools={this.state.expandDevTools}
+            hideDevTools={this.state.hideDevTools}
             tabs={this.state.tabs}
             runOnClick={runOnClick}
             verticalMode={verticalMode}

packages/app/src/embed/components/Content/index.tsx

@@ -64,6 +64,7 @@ type Props = {
   highlightedLines: number[];
   forceRefresh: boolean;
   expandDevTools: boolean;
+  hideDevTools: boolean;
   runOnClick: boolean;
   verticalMode: boolean;
   tabs?: string[];
@@ -396,6 +397,7 @@ export default class Content extends React.PureComponent<Props, State> {
       currentModule,
       hideNavigation,
       expandDevTools,
+      hideDevTools,
       verticalMode,
       sidebarOpen,
       toggleSidebar,
@@ -413,7 +415,7 @@ export default class Content extends React.PureComponent<Props, State> {
 
     const templateDefinition = getTemplate(sandbox.template);
     const parsedConfigurations = parseSandboxConfigurations(sandbox);
-    const views = getPreviewTabs(sandbox, parsedConfigurations);
+    let views = getPreviewTabs(sandbox, parsedConfigurations);
 
     const sandboxConfig = sandbox.modules.find(
       x => x.directoryShortid == null && x.title === 'sandbox.config.json'
@@ -430,6 +432,10 @@ export default class Content extends React.PureComponent<Props, State> {
       }
     }
 
+    if (hideDevTools) {
+      views = [views[0]]; // show preview only
+    }
+
     if (view !== 'browser') {
       // Backwards compatability for sandbox.config.json
       if (view === 'console') {
@@ -448,7 +454,7 @@ export default class Content extends React.PureComponent<Props, State> {
       If the user wants to override the default, they can
       do that by using the explicit flag.
     */
-    if (typeof expandDevTools !== 'undefined') {
+    if (typeof expandDevTools !== 'undefined' && views[1]) {
       views[1].open = expandDevTools;
     }
 
@@ -495,6 +501,7 @@ export default class Content extends React.PureComponent<Props, State> {
           openInNewWindow={this.openInNewWindow}
           toggleLike={toggleLike}
           initialEditorSize={editorSize}
+          hideDevTools={hideDevTools}
         >
           <>
             <Tabs>

packages/app/src/embed/components/SplitPane/index.js

@@ -15,6 +15,7 @@ export default function SplitView({
   sandbox,
   toggleLike,
   initialEditorSize = 50, // in percent
+  hideDevTools,
   ...props
 }) {
   /* Things this component should do
@@ -128,6 +129,7 @@ export default function SplitView({
         toggleLike={toggleLike}
         previewVisible={size < maxSize}
         isDragging={isDragging}
+        offsetBottom={!hideDevTools && size < maxSize}
       />
       <SplitPane
         split="vertical"
@@ -146,6 +148,7 @@ export default function SplitView({
               refresh={refresh}
               openInNewWindow={openInNewWindow}
               isDragging={isDragging}
+              offsetBottom={!hideDevTools && size < maxSize}
             />
           ) : null}
           {isDragging ? <PointerOverlay /> : null}

packages/common/src/__snapshots__/url.test.js.snap

@@ -7,6 +7,7 @@ Object {
   "enableEslint": false,
   "expandDevTools": false,
   "forceRefresh": false,
+  "hideDevTools": false,
   "hideNavigation": false,
   "isConsolePreviewWindow": false,
   "isEditorScreen": true,
@@ -27,6 +28,7 @@ Object {
   "enableEslint": false,
   "expandDevTools": false,
   "forceRefresh": false,
+  "hideDevTools": false,
   "hideNavigation": true,
   "isConsolePreviewWindow": false,
   "isEditorScreen": true,
@@ -46,6 +48,7 @@ Object {
   "enableEslint": false,
   "expandDevTools": false,
   "forceRefresh": false,
+  "hideDevTools": false,
   "hideNavigation": true,
   "isConsolePreviewWindow": false,
   "isEditorScreen": true,
@@ -65,6 +68,7 @@ Object {
   "enableEslint": false,
   "expandDevTools": false,
   "forceRefresh": false,
+  "hideDevTools": false,
   "hideNavigation": false,
   "isConsolePreviewWindow": false,
   "isEditorScreen": true,
@@ -84,6 +88,7 @@ Object {
   "enableEslint": false,
   "expandDevTools": false,
   "forceRefresh": false,
+  "hideDevTools": false,
   "hideNavigation": false,
   "isConsolePreviewWindow": false,
   "isEditorScreen": true,
@@ -104,6 +109,7 @@ Object {
   "enableEslint": false,
   "expandDevTools": false,
   "forceRefresh": false,
+  "hideDevTools": false,
   "hideNavigation": false,
   "isConsolePreviewWindow": false,
   "isEditorScreen": true,
@@ -123,6 +129,7 @@ Object {
   "enableEslint": false,
   "expandDevTools": false,
   "forceRefresh": false,
+  "hideDevTools": false,
   "hideNavigation": false,
   "isConsolePreviewWindow": false,
   "isEditorScreen": true,
@@ -142,6 +149,7 @@ Object {
   "enableEslint": false,
   "expandDevTools": false,
   "forceRefresh": false,
+  "hideDevTools": false,
   "hideNavigation": false,
   "isConsolePreviewWindow": false,
   "isEditorScreen": false,

packages/common/src/url.ts

@@ -18,6 +18,7 @@ export interface SandboxOptions {
   enableEslint?: boolean;
   forceRefresh?: boolean;
   expandDevTools?: boolean;
+  hideDevTools?: boolean;
   verticalMode?: boolean;
   runOnClick?: boolean;
   previewWindow?: 'tests' | 'console';
@@ -99,6 +100,7 @@ export const getSandboxOptions = (url: string) => {
   result.enableEslint = url.includes('eslint=1');
   result.forceRefresh = url.includes('forcerefresh=1');
   result.expandDevTools = url.includes('expanddevtools=1');
+  result.hideDevTools = url.includes('hidedevtools=1');
   if (url.includes('verticallayout=')) {
     result.verticalMode = url.includes('verticallayout=1');
   }