proof of concept new window

Opentrons · Oct 27, 2023 · a73f7aa · a73f7aa
1 parent cecefec
commit a73f7aa
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 4 deletions.
diff --git a/app-shell/src/protocol-storage/file-system.ts b/app-shell/src/protocol-storage/file-system.ts
@@ -7,6 +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'
 
 /**
  * Module for managing local protocol files on the host filesystem
@@ -170,3 +171,13 @@ export function viewProtocolSourceFolder(
   const srcDirPath = path.join(protocolDirPath, PROTOCOL_SRC_DIRECTORY_NAME)
   shell.openPath(srcDirPath)
 }
+
+export function editProtocol(
+  protocolKey: string,
+  protocolsDirPath: string
+): void {
+  const protocolDirPath = path.join(protocolsDirPath, protocolKey)
+  const srcDirPath = path.join(protocolDirPath, PROTOCOL_SRC_DIRECTORY_NAME)
+  createProtocolEditorUi()
+}
+
diff --git a/app-shell/src/protocol-storage/index.ts b/app-shell/src/protocol-storage/index.ts
@@ -7,6 +7,7 @@ import { UI_INITIALIZED } from '@opentrons/app/src/redux/shell/actions'
 import * as ProtocolStorageActions from '@opentrons/app/src/redux/protocol-storage/actions'
 
 import * as FileSystem from './file-system'
+import * as UI from '../ui'
 import { createFailedAnalysis } from '../protocol-analysis/writeFailedAnalysis'
 
 import type { ProtocolListActionSource as ListSource } from '@opentrons/app/src/redux/protocol-storage/types'
@@ -230,6 +231,14 @@ export function registerProtocolStorage(dispatch: Dispatch): Dispatch {
         break
       }
 
+      case ProtocolStorageActions.EDIT_PROTOCOL: {
+        FileSystem.editProtocol(
+          action.payload.protocolKey,
+          FileSystem.PROTOCOLS_DIRECTORY_PATH
+        )
+        break
+      }
+
       case ProtocolStorageActions.OPEN_PROTOCOL_DIRECTORY: {
         shell.openPath(FileSystem.PROTOCOLS_DIRECTORY_PATH)
         break

diff --git a/app-shell/src/ui.ts b/app-shell/src/ui.ts
@@ -61,3 +61,49 @@ export function createUi(): BrowserWindow {
 
   return mainWindow
 }
+
+const PROTOCOL_EDITOR_URL = 'http://localhost:8080'
+export function createProtocolEditorUi(): BrowserWindow {
+  log.debug('Creating protocol editor window', { options: WINDOW_OPTS })
+
+  const subWindow = new BrowserWindow({
+    show: false,
+    useContentSize: true,
+    width: config.width,
+    minWidth: config.minWidth,
+    height: config.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,
+      },
+      config.webPreferences
+    ),
+  }).once(
+    'ready-to-show',
+    () => {
+      log.debug('Protocol Editor window ready to show')
+      subWindow.show()
+    }
+  )
+
+  log.info(`Loading ${PROTOCOL_EDITOR_URL}`)
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  subWindow.loadURL(PROTOCOL_EDITOR_URL)
+
+  // open new windows (<a target="_blank" ...) in browser windows
+  subWindow.webContents.on('new-window', (event, url) => {
+    log.debug('Opening external link', { url })
+    event.preventDefault()
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    shell.openExternal(url)
+  })
+
+  return subWindow
+}
diff --git a/app/src/organisms/ProtocolDetails/AnnotatedSteps.tsx b/app/src/organisms/ProtocolDetails/AnnotatedSteps.tsx
@@ -59,7 +59,7 @@ export const AnnotatedSteps = (
     <Flex
       css={HIDE_SCROLLBAR}
       flexDirection={DIRECTION_COLUMN}
-      maxHeight="25rem"
+      maxHeight="65vh"
       flex="1 1 0"
       overflowY="auto"
     >

diff --git a/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx b/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx
@@ -24,6 +24,7 @@ import {
 } from '../../redux/analytics'
 import {
   analyzeProtocol,
+  editProtocol,
   removeProtocol,
   viewProtocolSourceFolder,
 } from '../../redux/protocol-storage'
@@ -74,6 +75,12 @@ export function ProtocolOverflowMenu(
     dispatch(viewProtocolSourceFolder(protocolKey))
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
+  const handleClickEdit: React.MouseEventHandler<HTMLButtonElement> = e => {
+    e.preventDefault()
+    e.stopPropagation()
+    dispatch(editProtocol(protocolKey))
+    setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
+  }
   const handleClickRun: React.MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
@@ -159,6 +166,9 @@ export function ProtocolOverflowMenu(
           >
             {t('show_in_folder')}
           </MenuItem>
+          <MenuItem onClick={handleClickEdit} >
+            {t('edit')}
+          </MenuItem>
           <MenuItem
             onClick={handleClickDelete}
             data-testid="ProtocolOverflowMenu_deleteProtocol"

diff --git a/app/src/redux/protocol-storage/actions.ts b/app/src/redux/protocol-storage/actions.ts
@@ -38,6 +38,9 @@ export const ANALYZE_PROTOCOL_FAILURE: 'protocolStorage:ANALYZE_PROTOCOL_FAILURE
 export const VIEW_PROTOCOL_SOURCE_FOLDER: 'protocolStorage:VIEW_PROTOCOL_SOURCE_FOLDER' =
   'protocolStorage:VIEW_PROTOCOL_SOURCE_FOLDER'
 
+export const EDIT_PROTOCOL: 'protocolStorage:EDIT_PROTOCOL' =
+  'protocolStorage:EDIT_PROTOCOL'
+
 // action meta literals
 
 export const POLL = 'poll' as const
@@ -129,8 +132,16 @@ export const analyzeProtocolFailure = (
 
 export const viewProtocolSourceFolder = (
   protocolKey: string
-): Types.ViewProtocolSourceFolder => ({
+): Types.ViewProtocolSourceFolderAction => ({
   type: VIEW_PROTOCOL_SOURCE_FOLDER,
   payload: { protocolKey },
   meta: { shell: true },
 })
+
+export const editProtocol = (
+  protocolKey: string
+): Types.EditProtocolAction => ({
+  type: EDIT_PROTOCOL,
+  payload: { protocolKey },
+  meta: { shell: true },
+})
diff --git a/app/src/redux/protocol-storage/types.ts b/app/src/redux/protocol-storage/types.ts
@@ -99,12 +99,18 @@ export interface AnalyzeProtocolFailureAction {
   meta: { shell: true }
 }
 
-export interface ViewProtocolSourceFolder {
+export interface ViewProtocolSourceFolderAction {
   type: 'protocolStorage:VIEW_PROTOCOL_SOURCE_FOLDER'
   payload: { protocolKey: string }
   meta: { shell: true }
 }
 
+export interface EditProtocolAction {
+  type: 'protocolStorage:EDIT_PROTOCOL'
+  payload: { protocolKey: string }
+  meta: { shell: true }
+}
+
 export type ProtocolStorageAction =
   | FetchProtocolsAction
   | UpdateProtocolListAction
@@ -117,4 +123,5 @@ export type ProtocolStorageAction =
   | AnalyzeProtocolAction
   | AnalyzeProtocolSuccessAction
   | AnalyzeProtocolFailureAction
-  | ViewProtocolSourceFolder
+  | ViewProtocolSourceFolderAction
+  | EditProtocolAction