remote global to pd

app-shell/Makefile

@@ -10,6 +10,8 @@ PATH := $(shell cd .. && yarn bin):$(PATH)
 
 # dev server port
 PORT ?= 3000
+# protocol editor dev server port
+PD_PORT ?= 5174
 
 # dep directories for production build
 # TODO(mc, 2018-08-07): figure out a better way to do this
@@ -69,6 +71,8 @@ electron := yarn electron . \
 	--disable_ui.webPreferences.webSecurity \
 	--ui.url.protocol="http:" \
 	--ui.url.path="localhost:$(PORT)" \
+	--protocolEditorUi.url.protocol="http:" \
+	--protocolEditorUi.url.path="localhost:$(PD_PORT)" \
 	--python.pathToPythonOverride=$(shell cd ../api && pipenv --venv)
 
 # standard targets

app-shell/src/config/actions.ts

@@ -35,6 +35,7 @@ import type {
   UpdateProtocolListAction,
   UpdateProtocolListFailureAction,
   ViewProtocolSourceFolder,
+  SetEditingProtocolSource,
 } from '@opentrons/app/src/redux/protocol-storage'
 import {
   ADD_CUSTOM_LABWARE,
@@ -65,6 +66,7 @@ import {
   REMOVE_PROTOCOL,
   RESET_VALUE,
   SEND_LOG,
+  SET_EDITING_PROTOCOL_SOURCE,
   SYSTEM_INFO_INITIALIZED,
   UPDATE_PROTOCOL_LIST,
   UPDATE_PROTOCOL_LIST_FAILURE,

app-shell/src/config/migrate.ts

@@ -25,6 +25,7 @@ import type {
   ConfigV19,
   ConfigV20,
   ConfigV21,
+  ConfigV22,
 } from '@opentrons/app/src/redux/config/types'
 // format
 // base config v0 defaults
@@ -383,12 +384,34 @@ const toVersion21 = (prevConfig: ConfigV20): ConfigV21 => {
       ...prevConfig.onDeviceDisplaySettings,
       unfinishedUnboxingFlowRoute:
         prevConfig.onDeviceDisplaySettings.unfinishedUnboxingFlowRoute ===
-        '/dashboard'
+          '/dashboard'
           ? null
           : prevConfig.onDeviceDisplaySettings.unfinishedUnboxingFlowRoute,
     },
   }
 }
+const toVersion22 = (prevConfig: ConfigV21): ConfigV22 => {
+  return {
+    ...prevConfig,
+    version: 22 as const,
+    protocolEditorUi: {
+      width: 1024,
+      minWidth: 600,
+      height: 768,
+      url: {
+        protocol: 'file:',
+        path: 'ui/index.html',
+      },
+      webPreferences: {
+        webSecurity: true,
+      },
+    },
+  }
+}
+
+
+
+
 
 const MIGRATIONS: [
   (prevConfig: ConfigV0) => ConfigV1,
@@ -411,30 +434,32 @@ const MIGRATIONS: [
   (prevConfig: ConfigV17) => ConfigV18,
   (prevConfig: ConfigV18) => ConfigV19,
   (prevConfig: ConfigV19) => ConfigV20,
-  (prevConfig: ConfigV20) => ConfigV21
+  (prevConfig: ConfigV20) => ConfigV21,
+  (prevConfig: ConfigV21) => ConfigV22
 ] = [
-  toVersion1,
-  toVersion2,
-  toVersion3,
-  toVersion4,
-  toVersion5,
-  toVersion6,
-  toVersion7,
-  toVersion8,
-  toVersion9,
-  toVersion10,
-  toVersion11,
-  toVersion12,
-  toVersion13,
-  toVersion14,
-  toVersion15,
-  toVersion16,
-  toVersion17,
-  toVersion18,
-  toVersion19,
-  toVersion20,
-  toVersion21,
-]
+    toVersion1,
+    toVersion2,
+    toVersion3,
+    toVersion4,
+    toVersion5,
+    toVersion6,
+    toVersion7,
+    toVersion8,
+    toVersion9,
+    toVersion10,
+    toVersion11,
+    toVersion12,
+    toVersion13,
+    toVersion14,
+    toVersion15,
+    toVersion16,
+    toVersion17,
+    toVersion18,
+    toVersion19,
+    toVersion20,
+    toVersion21,
+    toVersion22,
+  ]
 
 export const DEFAULTS: Config = migrate(DEFAULTS_V0)
 
@@ -462,6 +487,7 @@ export function migrate(
     | ConfigV19
     | ConfigV20
     | ConfigV21
+    | ConfigV22
 ): Config {
   const prevVersion = prevConfig.version
   let result = prevConfig

app-shell/src/constants.ts

@@ -63,6 +63,7 @@ import type {
   RELOAD_UI_TYPE,
   SEND_LOG_TYPE,
   EDIT_PROTOCOL_TYPE,
+  SET_EDITING_PROTOCOL_SOURCE_TYPE,
 } from './types'
 
 // these constants are all copied over from the app
@@ -183,6 +184,9 @@ export const EDIT_PROTOCOL: EDIT_PROTOCOL_TYPE =
 export const VIEW_PROTOCOL_SOURCE_FOLDER: VIEW_PROTOCOL_SOURCE_FOLDER_TYPE =
   'protocolStorage:VIEW_PROTOCOL_SOURCE_FOLDER'
 
+export const SET_EDITING_PROTOCOL_SOURCE: SET_EDITING_PROTOCOL_SOURCE_TYPE =
+  'protocolStorage:SET_EDITING_PROTOCOL_SOURCE'
+
 export const PROTOCOL_ADDITION: PROTOCOL_ADDITION_TYPE = 'protocolAddition'
 
 export const OPENTRONS_USB: OPENTRONS_USB_TYPE = 'opentrons-usb'

app-shell/src/protocol-editor-ui.ts

@@ -0,0 +1,72 @@
+// sets up the main window ui
+import { app, shell, BrowserWindow } from 'electron'
+import path from 'path'
+
+import { getConfig } from './config'
+import { createLogger } from './log'
+import { getProtocolSourceJSON } from './protocol-storage/file-system'
+
+const protocolEditorUiConfig = getConfig('protocolEditorUi')
+const log = createLogger('protocolEditorUi')
+
+const WINDOW_OPTS = {
+    show: false,
+    useContentSize: true,
+    width: protocolEditorUiConfig.width,
+    minWidth: protocolEditorUiConfig.minWidth,
+    height: protocolEditorUiConfig.height,
+    // allow webPreferences to be set at launchtime from config
+    webPreferences: Object.assign(
+      {
+        preload: path.join(__dirname, './preload.js'),
+        nodeIntegration: false,
+        // TODO: remove this by using electron contextBridge to specify
+        // exact, argument-sanitation-involved methods instead of just
+        // binding the entire ipcRenderer in. This is necessary because
+        // as of electron 12, contextIsolation defaults to true.
+        contextIsolation: false,
+      },
+      protocolEditorUiConfig.webPreferences
+    ),
+  }
+
+
+const protocolEditorPath =
+  protocolEditorUiConfig.url.protocol === 'file:'
+    ? path.join(app.getAppPath(), protocolEditorUiConfig.url.path)
+    : protocolEditorUiConfig.url.path
+
+export function createProtocolEditorUi(srcFilePath: string): BrowserWindow {
+  log.debug('Creating protocol editor window', { options: WINDOW_OPTS })
+
+  const subWindow = new BrowserWindow(WINDOW_OPTS).once(
+    'ready-to-show',
+    () => {
+      log.debug('Protocol Editor window ready to show')
+      subWindow.show()
+    }
+  )
+  const protocolEditorUrl = `${protocolEditorUiConfig.url.protocol}//${protocolEditorPath}`
+
+  log.info(`Loading ${protocolEditorUrl}`)
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  subWindow.loadURL(protocolEditorUrl)
+
+  // open new windows (<a target="_blank" ...) in browser windows
+  subWindow.webContents.setWindowOpenHandler(({ url }) => {
+    log.debug('Opening external link', { url })
+    // event.preventDefault()
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    shell.openExternal(url)
+    return { action: 'deny' }
+  })
+
+  subWindow.webContents.once('dom-ready', () => {
+    const protocolSourceJSON = getProtocolSourceJSON(srcFilePath)
+    protocolSourceJSON.then(json => {
+      subWindow.webContents.send('set-protocol-source-file', json)
+    })
+  });
+
+  return subWindow
+}

app-shell/src/protocol-storage/file-system.ts

@@ -7,7 +7,7 @@ import { app, shell } from 'electron'
 import type { StoredProtocolDir } from '@opentrons/app/src/redux/protocol-storage'
 import type { Dirent } from 'fs'
 import { analyzeProtocolSource } from '../protocol-analysis'
-import { createProtocolEditorUi } from '../ui'
+import { createProtocolEditorUi } from '../protocol-editor-ui'
 
 /**
  * Module for managing local protocol files on the host filesystem
@@ -105,6 +105,10 @@ export function parseProtocolDirs(
   return Promise.all(tasks)
 }
 
+export function getProtocolSourceJSON(protocolSrcFilePath: string): Promise<any> {
+  return fs.readJSON(protocolSrcFilePath)
+}
+
 export function addProtocolFile(
   mainFileSourcePath: string,
   protocolsDirPath: string
@@ -175,9 +179,10 @@ export function viewProtocolSourceFolder(
 export function editProtocol(
   protocolKey: string,
   protocolsDirPath: string
-): void {
+): Promise<string[]> {
   const protocolDirPath = path.join(protocolsDirPath, protocolKey)
   const srcDirPath = path.join(protocolDirPath, PROTOCOL_SRC_DIRECTORY_NAME)
-  createProtocolEditorUi()
+  const srcFilePathsPromise = readFilesWithinDirectory(srcDirPath)
+  return srcFilePathsPromise
 }
 

app-shell/src/protocol-storage/index.ts

@@ -12,13 +12,15 @@ import {
   POLL,
   PROTOCOL_ADDITION,
   REMOVE_PROTOCOL,
+  SET_EDITING_PROTOCOL_SOURCE,
   UI_INITIALIZED,
   VIEW_PROTOCOL_SOURCE_FOLDER,
 } from '../constants'
 import {
   analyzeProtocol,
   analyzeProtocolFailure,
   analyzeProtocolSuccess,
+  setEditingProtocolSource,
   updateProtocolList,
   updateProtocolListFailure,
 } from '../config/actions'
@@ -27,6 +29,7 @@ import { createFailedAnalysis } from '../protocol-analysis/writeFailedAnalysis'
 import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'
 import type { ProtocolListActionSource as ListSource } from '@opentrons/app/src/redux/protocol-storage/types'
 import type { Action, Dispatch } from '../types'
+import { createProtocolEditorUi } from '../protocol-editor-ui'
 
 const ensureDir: (dir: string) => Promise<void> = fse.ensureDir
 
@@ -219,7 +222,9 @@ export function registerProtocolStorage(dispatch: Dispatch): Dispatch {
         FileSystem.editProtocol(
           action.payload.protocolKey,
           FileSystem.PROTOCOLS_DIRECTORY_PATH
-        )
+        ).then((srcFiles) => {
+          createProtocolEditorUi(srcFiles[0])
+        }).catch(e => { console.error(e) })
         break
       }
 

app-shell/src/types.ts

@@ -63,6 +63,7 @@ export type ANALYZE_PROTOCOL_SUCCESS_TYPE = 'protocolStorage:ANALYZE_PROTOCOL_SU
 export type ANALYZE_PROTOCOL_FAILURE_TYPE = 'protocolStorage:ANALYZE_PROTOCOL_FAILURE'
 export type EDIT_PROTOCOL_TYPE = 'protocolStorage:EDIT_PROTOCOL'
 export type VIEW_PROTOCOL_SOURCE_FOLDER_TYPE = 'protocolStorage:VIEW_PROTOCOL_SOURCE_FOLDER'
+export type SET_EDITING_PROTOCOL_SOURCE_TYPE = 'protocolStorage:SET_EDITING_PROTOCOL_SOURCE'
 
 export type PROTOCOL_ADDITION_TYPE = 'protocolAddition'