Remove the code related to the Preview pane (#6426)

## Description This PR removes a lot of code related to the preview pane. No guarantees for exhaustiveness
concrete-utopia · Oct 1, 2024 · 76631a6 · 76631a6
1 parent 161179c
commit 76631a6
Show file tree

Hide file tree

Showing 24 changed files with 5 additions and 1,623 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -14,6 +14,6 @@ Describe the fix you have made as succinctly as possible.
 I hereby swear that:
 
 - [ ] I opened a hydrogen project and it loaded
-- [ ] I could navigate to various routes in Preview mode
+- [ ] I could navigate to various routes in Play mode
 
 Fixes #[ticket_number] (<< pls delete this line if it's not relevant)
diff --git a/editor/src/components/canvas/stored-layout.ts b/editor/src/components/canvas/stored-layout.ts
@@ -24,12 +24,7 @@ export const GridPanelsNumberOfRows = 12
 export type Menu = 'inspector' | 'navigator'
 export type Pane = 'code-editor'
 
-export const allMenusAndPanels: Array<Menu | Pane> = [
-  'navigator',
-  'code-editor',
-  'inspector',
-  // 'preview', // Does this exist?
-]
+export const allMenusAndPanels: Array<Menu | Pane> = ['navigator', 'code-editor', 'inspector']
 
 export interface GridPanelData {
   panel: StoredPanel

diff --git a/editor/src/components/common/actions/index.ts b/editor/src/components/common/actions/index.ts
@@ -1,5 +1,3 @@
-export type PreviewPanel = 'preview'
-
 export type LeftMenuPanel =
   | 'filebrowser'
   | 'dependencylist'
@@ -22,10 +20,9 @@ export type EditorPanel =
   | CenterPanel
   | CodeEditorPanel
   | InspectorPanel
-  | PreviewPanel
   | NavigatorPanel
 
-export type EditorPane = 'leftmenu' | 'center' | 'inspector' | 'preview' | 'rightmenu'
+export type EditorPane = 'leftmenu' | 'center' | 'inspector' | 'rightmenu'
 
 export function paneForPanel(panel: EditorPanel | null): EditorPane | null {
   switch (panel) {
@@ -55,8 +52,6 @@ export function paneForPanel(panel: EditorPanel | null): EditorPane | null {
       return 'rightmenu'
     case 'codeEditor':
       return 'center'
-    case 'preview':
-      return 'preview'
     default:
       const _exhaustiveCheck: never = panel
       throw new Error(`Unhandled panel ${panel}`)

diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
@@ -602,11 +602,6 @@ export interface SetProjectDescription {
   description: string
 }
 
-export interface UpdatePreviewConnected {
-  action: 'UPDATE_PREVIEW_CONNECTED'
-  connected: boolean
-}
-
 export interface AlignSelectedViews {
   action: 'ALIGN_SELECTED_VIEWS'
   alignment: Alignment
@@ -628,10 +623,6 @@ export interface SetCursorOverlay {
   cursor: CSSCursor | null
 }
 
-export interface SendPreviewModel {
-  action: 'SEND_PREVIEW_MODEL'
-}
-
 export interface UpdateFilePath {
   action: 'UPDATE_FILE_PATH'
   oldPath: string
@@ -1278,13 +1269,11 @@ export type EditorAction =
   | OpenCodeEditor
   | SetProjectName
   | SetProjectDescription
-  | UpdatePreviewConnected
   | AlignSelectedViews
   | DistributeSelectedViews
   | SetCursorOverlay
   | DuplicateSpecificElements
   | UpdateDuplicationState
-  | SendPreviewModel
   | UpdateFilePath
   | UpdateRemixRoute
   | OpenCodeEditorFile

diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts
@@ -92,7 +92,6 @@ import type {
   SaveImageSwitchMode,
   SelectAllSiblings,
   SelectComponents,
-  SendPreviewModel,
   SetAspectRatioLock,
   SetCanvasFrames,
   SetCodeEditorBuildErrors,
@@ -144,7 +143,6 @@ import type {
   UpdateKeysPressed,
   UpdateNodeModulesContents,
   UpdatePackageJson,
-  UpdatePreviewConnected,
   UpdatePropertyControlsInfo,
   CloseDesignerFile,
   SetFocusedElement,
@@ -974,13 +972,6 @@ export function setProjectDescription(projectDescription: string): SetProjectDes
   }
 }
 
-export function updatePreviewConnected(connected: boolean): UpdatePreviewConnected {
-  return {
-    action: 'UPDATE_PREVIEW_CONNECTED',
-    connected: connected,
-  }
-}
-
 export function alignSelectedViews(alignment: Alignment): AlignSelectedViews {
   return {
     action: 'ALIGN_SELECTED_VIEWS',
@@ -1006,12 +997,6 @@ export function showContextMenu(
   }
 }
 
-export function sendPreviewModel(): SendPreviewModel {
-  return {
-    action: 'SEND_PREVIEW_MODEL',
-  }
-}
-
 export function updateFilePath(oldPath: string, newPath: string): UpdateFilePath {
   return {
     action: 'UPDATE_FILE_PATH',

diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
@@ -62,8 +62,6 @@ export function isTransientAction(action: EditorAction): boolean {
     case 'SET_PROJECT_ID':
     case 'SET_CODE_EDITOR_VISIBILITY':
     case 'OPEN_CODE_EDITOR':
-    case 'UPDATE_PREVIEW_CONNECTED':
-    case 'SEND_PREVIEW_MODEL':
     case 'CLOSE_DESIGNER_FILE':
     case 'UPDATE_CODE_RESULT_CACHE':
     case 'SET_CODE_EDITOR_BUILD_ERRORS':

diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
@@ -239,7 +239,6 @@ import type {
   ScrollToElement,
   SelectAllSiblings,
   SelectComponents,
-  SendPreviewModel,
   SetAspectRatioLock,
   SetCanvasFrames,
   SetCodeEditorBuildErrors,
@@ -304,7 +303,6 @@ import type {
   UpdateMouseButtonsPressed,
   UpdateNodeModulesContents,
   UpdatePackageJson,
-  UpdatePreviewConnected,
   UpdateProjectContents,
   UpdatePropertyControlsInfo,
   WrapInElement,
@@ -1000,10 +998,6 @@ export function restoreEditorState(
       formulaBarMode: desiredEditor.topmenu.formulaBarMode,
       formulaBarFocusCounter: currentEditor.topmenu.formulaBarFocusCounter,
     },
-    preview: {
-      visible: currentEditor.preview.visible,
-      connected: currentEditor.preview.connected,
-    },
     home: {
       visible: currentEditor.home.visible,
     },
@@ -2966,14 +2960,6 @@ export const UPDATE_FNS = {
             visible: action.visible,
           },
         }
-      case 'preview':
-        return {
-          ...editor,
-          preview: {
-            ...editor.preview,
-            visible: action.visible,
-          },
-        }
       case 'codeEditor':
         return {
           ...editor,
@@ -3069,14 +3055,6 @@ export const UPDATE_FNS = {
             visible: !editor.inspector.visible,
           },
         }
-      case 'preview':
-        return {
-          ...editor,
-          preview: {
-            ...editor.preview,
-            visible: !editor.preview.visible,
-          },
-        }
       case 'projectsettings':
         return {
           ...editor,
@@ -3743,12 +3721,6 @@ export const UPDATE_FNS = {
       projectDescription: action.description,
     }
   },
-
-  UPDATE_PREVIEW_CONNECTED: (action: UpdatePreviewConnected, editor: EditorModel): EditorModel => {
-    return produce(editor, (editorState) => {
-      editorState.preview.connected = action.connected
-    })
-  },
   ALIGN_SELECTED_VIEWS: (action: AlignSelectedViews, editor: EditorModel): EditorModel => {
     return alignOrDistributeSelectedViews(editor, action.alignment)
   },
@@ -3763,9 +3735,6 @@ export const UPDATE_FNS = {
     openMenu(action.menuName, action.event)
     return editor
   },
-  SEND_PREVIEW_MODEL: (action: SendPreviewModel, editor: EditorModel): EditorModel => {
-    return editor
-  },
   UPDATE_FILE_PATH: (
     action: UpdateFilePath,
     editor: EditorModel,
@@ -6398,10 +6367,6 @@ export async function load(
   )
 }
 
-export function isSendPreviewModel(action: any): action is SendPreviewModel {
-  return action != null && (action as SendPreviewModel).action === 'SEND_PREVIEW_MODEL'
-}
-
 function saveFileInProjectContents(
   projectContents: ProjectContentTreeRoot,
   filePath: string,

diff --git a/editor/src/components/editor/editor-component.tsx b/editor/src/components/editor/editor-component.tsx
@@ -39,7 +39,6 @@ import { ConfirmDeleteDialog } from '../filebrowser/confirm-delete-dialog'
 import { ConfirmOverwriteDialog } from '../filebrowser/confirm-overwrite-dialog'
 import { ConfirmRevertDialog } from '../filebrowser/confirm-revert-dialog'
 import { ConfirmRevertAllDialog } from '../filebrowser/confirm-revert-all-dialog'
-import { PreviewColumn } from '../preview/preview-pane'
 import * as EditorActions from './actions/action-creators'
 import { FatalIndexedDBErrorComponent } from './fatal-indexeddb-error-component'
 import { editorIsTarget, handleKeyDown, handleKeyUp } from './global-shortcuts'
@@ -377,12 +376,6 @@ export const EditorComponentInner = React.memo((props: EditorProps) => {
     (store) => store.editor.id,
     'EditorComponentInner projectId',
   )
-  const previewVisible = useEditorState(
-    Substores.restOfEditor,
-    (store) => store.editor.preview.visible,
-    'EditorComponentInner previewVisible',
-  )
-
   const yDoc = useEditorState(
     Substores.restOfStore,
     (store) => store.collaborativeEditingSupport.session?.mergeDoc,
@@ -417,11 +410,6 @@ export const EditorComponentInner = React.memo((props: EditorProps) => {
     }
   }, [projectName, projectId, forking])
 
-  const onClosePreview = React.useCallback(
-    () => dispatch([EditorActions.setPanelVisibility('preview', false)]),
-    [dispatch],
-  )
-
   const startDragInsertion = React.useCallback(
     (event: React.DragEvent<HTMLDivElement>) => {
       const draggedTypes = event.nativeEvent?.dataTransfer?.types
@@ -524,37 +512,6 @@ export const EditorComponentInner = React.memo((props: EditorProps) => {
                 <DesignPanelRoot />
               </SimpleFlexRow>
               {/* insert more columns here */}
-
-              {previewVisible ? (
-                <ResizableFlexColumn
-                  style={{ borderLeft: `1px solid ${colorTheme.secondaryBorder.value}` }}
-                  enable={{
-                    left: true,
-                    right: false,
-                  }}
-                  defaultSize={{
-                    width: 350,
-                    height: '100%',
-                  }}
-                >
-                  <SimpleFlexRow
-                    id='PreviewTabRail'
-                    style={{
-                      height: UtopiaTheme.layout.rowHeight.smaller,
-                      borderBottom: `1px solid ${colorTheme.subduedBorder.value}`,
-                      alignItems: 'stretch',
-                    }}
-                  >
-                    <TabComponent
-                      label='Preview'
-                      selected
-                      icon={<LargerIcons.PreviewPane color='primary' />}
-                      onClose={onClosePreview}
-                    />
-                  </SimpleFlexRow>
-                  <PreviewColumn />
-                </ResizableFlexColumn>
-              ) : null}
             </SimpleFlexRow>
           </SimpleFlexRow>
         </SimpleFlexColumn>

diff --git a/editor/src/components/editor/preview-report-handler.ts b/editor/src/components/editor/preview-report-handler.ts
diff --git a/editor/src/components/editor/store/dispatch.tsx b/editor/src/components/editor/store/dispatch.tsx
@@ -6,7 +6,6 @@ import { runLocalNavigatorAction } from '../../../templates/editor-navigator'
 import { optionalDeepFreeze } from '../../../utils/deep-freeze'
 import type { CanvasAction } from '../../canvas/canvas-types'
 import type { LocalNavigatorAction } from '../../navigator/actions'
-import { PreviewIframeId, projectContentsUpdateMessage } from '../../preview/preview-pane'
 import type { EditorAction, EditorDispatch, UpdateMetadataInEditorState } from '../action-types'
 import { isLoggedIn } from '../action-types'
 import {
@@ -46,7 +45,7 @@ import { isBrowserEnvironment } from '../../../core/shared/utils'
 import type { UiJsxCanvasContextData } from '../../canvas/ui-jsx-canvas'
 import type { ProjectContentTreeRoot } from '../../assets'
 import { treeToContents } from '../../assets'
-import { isSendPreviewModel, restoreDerivedState, UPDATE_FNS } from '../actions/actions'
+import { restoreDerivedState, UPDATE_FNS } from '../actions/actions'
 import { getTransitiveReverseDependencies } from '../../../core/shared/project-contents-dependencies'
 import {
   reduxDevtoolsSendActions,
@@ -309,26 +308,6 @@ function processActions(
   }, working)
 }
 
-export function updateEmbeddedPreview(
-  modelId: string | null,
-  projectContents: ProjectContentTreeRoot,
-): void {
-  const embeddedPreviewElement = document.getElementById(PreviewIframeId)
-  if (embeddedPreviewElement != null) {
-    const embeddedPreviewIframe = embeddedPreviewElement as any as HTMLIFrameElement
-    const contentWindow = embeddedPreviewIframe.contentWindow
-    if (contentWindow != null) {
-      try {
-        contentWindow.postMessage(projectContentsUpdateMessage(projectContents), '*')
-      } catch (exception) {
-        // Don't nuke the editor if there's an exception posting the message.
-        // This can happen if a value can't be cloned when posted.
-        console.error('Error updating preview.', exception)
-      }
-    }
-  }
-}
-
 function maybeRequestModelUpdate(
   projectContents: ProjectContentTreeRoot,
   workers: UtopiaTsWorkers,
@@ -525,7 +504,6 @@ export function editorDispatchClosingOut(
   })
   const anyWorkerUpdates = checkAnyWorkerUpdates(dispatchedActions)
   const anyUndoOrRedo = dispatchedActions.some(isUndoOrRedo)
-  const anySendPreviewModel = dispatchedActions.some(isSendPreviewModel)
 
   // The FINISH_CHECKPOINT_TIMER action effectively overrides the case where nothing changed,
   // as it's likely that action on it's own didn't change anything, but the actions that paired with
@@ -723,13 +701,6 @@ export function editorDispatchClosingOut(
     }
   }
 
-  const shouldUpdatePreview =
-    anySendPreviewModel ||
-    frozenEditorState.projectContents !== storedState.unpatchedEditor.projectContents
-  if (shouldUpdatePreview) {
-    updateEmbeddedPreview(frozenEditorState.id, frozenEditorState.projectContents)
-  }
-
   if (frozenEditorState.id != null && frozenEditorState.id != storedState.unpatchedEditor.id) {
     storedState.workers.initWatchdogWorker(frozenEditorState.id)
   }