feat(app): allow multi file upload for labware and protocols (#13898)

Within the file browser that launches when importing protocols or labware into the Opentrons App, support multi file select. Closes RAUT-218
Opentrons · Nov 9, 2023 · e03e988 · e03e988
1 parent 4c97e43
commit e03e988
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 37 deletions.
diff --git a/app-shell/src/dialogs/index.ts b/app-shell/src/dialogs/index.ts
@@ -11,6 +11,17 @@ interface BaseDialogOptions {
 
 interface FileDialogOptions extends BaseDialogOptions {
   filters: Array<{ name: string; extensions: string[] }>
+  properties: Array<
+    | 'openDirectory'
+    | 'createDirectory'
+    | 'openFile'
+    | 'multiSelections'
+    | 'showHiddenFiles'
+    | 'promptToCreate'
+    | 'noResolveAliases'
+    | 'treatPackageAsDirectory'
+    | 'dontAddToRecent'
+  >
 }
 
 const BASE_DIRECTORY_OPTS = {
@@ -55,6 +66,13 @@ export function showOpenFileDialog(
     openDialogOpts = { ...openDialogOpts, filters: options.filters }
   }
 
+  if (options.properties != null) {
+    openDialogOpts = {
+      ...openDialogOpts,
+      properties: [...(openDialogOpts.properties ?? []), ...options.properties],
+    }
+  }
+
   return dialog
     .showOpenDialog(browserWindow, openDialogOpts)
     .then((result: OpenDialogReturnValue) => {

diff --git a/app-shell/src/labware/__tests__/dispatch.test.ts b/app-shell/src/labware/__tests__/dispatch.test.ts
@@ -229,7 +229,13 @@ describe('labware module dispatches', () => {
     return flush().then(() => {
       expect(showOpenFileDialog).toHaveBeenCalledWith(mockMainWindow, {
         defaultPath: '__mock-app-path__',
-        filters: [{ name: 'JSON Labware Definitions', extensions: ['json'] }],
+        filters: [
+          {
+            name: 'JSON Labware Definitions',
+            extensions: ['json'],
+          },
+        ],
+        properties: ['multiSelections'],
       })
       expect(dispatch).not.toHaveBeenCalled()
     })

diff --git a/app-shell/src/labware/index.ts b/app-shell/src/labware/index.ts
@@ -158,6 +158,7 @@ export function registerLabware(
             filters: [
               { name: 'JSON Labware Definitions', extensions: ['json'] },
             ],
+            properties: ['multiSelections' as const],
           }
 
           addLabwareTask = showOpenFileDialog(mainWindow, dialogOptions).then(

diff --git a/app/src/assets/localization/en/protocol_info.json b/app/src/assets/localization/en/protocol_info.json
@@ -3,7 +3,6 @@
   "browse_protocol_library": "Open Protocol Library",
   "cancel_run": "Cancel Run",
   "choose_file": "Choose File...",
-  "choose_protocol_file": "Choose File",
   "choose_snippet_type": "Choose the Labware Offset Data Python Snippet based on target execution environment.",
   "continue_proceed_to_calibrate": "Proceed to Calibrate",
   "continue_verify_calibrations": "Verify pipette and labware calibrations",
@@ -86,6 +85,7 @@
   "unpin_protocol": "Unpin protocol",
   "unpinned_protocol": "Unpinned protocol",
   "update_robot_for_custom_labware": "You have custom labware definitions saved to your app, but this robot needs to be updated before you can use these definitions with Python protocols",
+  "upload": "Upload",
   "upload_and_simulate": "Open a protocol to run on {{robot_name}}",
   "valid_file_types": "Valid file types: Python files (.py) or Protocol Designer files (.json)"
 }
diff --git a/app/src/molecules/UploadInput/__tests__/UploadInput.test.tsx b/app/src/molecules/UploadInput/__tests__/UploadInput.test.tsx
@@ -30,12 +30,12 @@ describe('UploadInput', () => {
   it('renders correct contents for empty state', () => {
     const { getByRole } = render()
 
-    expect(getByRole('button', { name: 'Choose File' })).toBeTruthy()
+    expect(getByRole('button', { name: 'Upload' })).toBeTruthy()
   })
 
   it('opens file select on button click', () => {
     const { getByRole, getByTestId } = render()
-    const button = getByRole('button', { name: 'Choose File' })
+    const button = getByRole('button', { name: 'Upload' })
     const input = getByTestId('file_input')
     input.click = jest.fn()
     fireEvent.click(button)

diff --git a/app/src/molecules/UploadInput/index.tsx b/app/src/molecules/UploadInput/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { css } from 'styled-components'
+import styled, { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import {
   Icon,
@@ -16,7 +16,7 @@ import {
 } from '@opentrons/components'
 import { StyledText } from '../../atoms/text'
 
-const DROP_ZONE_STYLES = css`
+const StyledLabel = styled.label`
   display: flex;
   cursor: pointer;
   flex-direction: ${DIRECTION_COLUMN};
@@ -39,7 +39,7 @@ const DRAG_OVER_STYLES = css`
   border: 2px dashed ${COLORS.blueEnabled};
 `
 
-const INPUT_STYLES = css`
+const StyledInput = styled.input`
   position: fixed;
   clip: rect(1px 1px 1px 1px);
 `
@@ -61,8 +61,7 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
   const handleDrop: React.DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
-    const { files = [] } = 'dataTransfer' in e ? e.dataTransfer : {}
-    props.onUpload(files[0])
+    Array.from(e.dataTransfer.files).forEach(f => props.onUpload(f))
     setIsFileOverDropZone(false)
   }
   const handleDragEnter: React.DragEventHandler<HTMLLabelElement> = e => {
@@ -85,17 +84,10 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
   }
 
   const onChange: React.ChangeEventHandler<HTMLInputElement> = event => {
-    const { files = [] } = event.target ?? {}
-    files?.[0] != null && props.onUpload(files?.[0])
+    ;[...(event.target.files ?? [])].forEach(f => props.onUpload(f))
     if ('value' in event.currentTarget) event.currentTarget.value = ''
   }
 
-  const dropZoneStyles = isFileOverDropZone
-    ? css`
-        ${DROP_ZONE_STYLES} ${DRAG_OVER_STYLES}
-      `
-    : DROP_ZONE_STYLES
-
   return (
     <Flex
       height="100%"
@@ -115,16 +107,16 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
         onClick={handleClick}
         id="UploadInput_protocolUploadButton"
       >
-        {t('choose_protocol_file')}
+        {t('upload')}
       </PrimaryButton>
 
-      <label
+      <StyledLabel
         data-testid="file_drop_zone"
         onDrop={handleDrop}
         onDragOver={handleDragOver}
         onDragEnter={handleDragEnter}
         onDragLeave={handleDragLeave}
-        css={dropZoneStyles}
+        css={isFileOverDropZone ? DRAG_OVER_STYLES : undefined}
       >
         <Icon
           width={SIZE_3}
@@ -133,15 +125,15 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
           marginBottom={SPACING.spacing24}
         />
         {props.dragAndDropText}
-        <input
+        <StyledInput
           id="file_input"
           data-testid="file_input"
           ref={fileInput}
-          css={INPUT_STYLES}
           type="file"
           onChange={onChange}
+          multiple
         />
-      </label>
+      </StyledLabel>
     </Flex>
   )
 }
diff --git a/app/src/organisms/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx b/app/src/organisms/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx
@@ -46,7 +46,7 @@ describe('AddCustomLabwareSlideout', () => {
     const [{ getByText, getByRole }] = render(props)
     getByText('Import a Custom Labware Definition')
     getByText('Or choose a file from your computer to upload.')
-    const btn = getByRole('button', { name: 'Choose File' })
+    const btn = getByRole('button', { name: 'Upload' })
     fireEvent.click(btn)
     expect(mockTrackEvent).toHaveBeenCalledWith({
       name: ANALYTICS_ADD_CUSTOM_LABWARE,

diff --git a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
@@ -29,7 +29,7 @@ import { StyledText } from '../../atoms/text'
 import { Slideout } from '../../atoms/Slideout'
 import { ChooseRobotToRunProtocolSlideout } from '../ChooseRobotToRunProtocolSlideout'
 import { SendProtocolToOT3Slideout } from '../SendProtocolToOT3Slideout'
-import { UploadInput } from './UploadInput'
+import { ProtocolUploadInput } from './ProtocolUploadInput'
 import { ProtocolCard } from './ProtocolCard'
 import { EmptyStateLinks } from './EmptyStateLinks'
 import { MenuItem } from '../../atoms/MenuList/MenuItem'
@@ -254,7 +254,9 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null {
         onCloseClick={() => setShowImportProtocolSlideout(false)}
       >
         <Box marginTop={SPACING.spacing16}>
-          <UploadInput onUpload={() => setShowImportProtocolSlideout(false)} />
+          <ProtocolUploadInput
+            onUpload={() => setShowImportProtocolSlideout(false)}
+          />
         </Box>
       </Slideout>
     </Box>

diff --git a/...rganisms/ProtocolsLanding/UploadInput.tsx → .../ProtocolsLanding/ProtocolUploadInput.tsx b/...rganisms/ProtocolsLanding/UploadInput.tsx → .../ProtocolsLanding/ProtocolUploadInput.tsx
@@ -10,7 +10,7 @@ import {
   SPACING,
 } from '@opentrons/components'
 import { StyledText } from '../../atoms/text'
-import { UploadInput as FileImporter } from '../../molecules/UploadInput'
+import { UploadInput } from '../../molecules/UploadInput'
 import { addProtocol } from '../../redux/protocol-storage'
 import {
   useTrackEvent,
@@ -24,8 +24,9 @@ export interface UploadInputProps {
   onUpload?: () => void
 }
 
-// TODO(bc, 2022-3-21): consider making this generic for any file upload and adding it to molecules/organisms with onUpload taking the files from the event
-export function UploadInput(props: UploadInputProps): JSX.Element | null {
+export function ProtocolUploadInput(
+  props: UploadInputProps
+): JSX.Element | null {
   const { t } = useTranslation(['protocol_info', 'shared'])
   const dispatch = useDispatch<Dispatch>()
   const logger = useLogger(__filename)
@@ -49,7 +50,7 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
       alignItems={ALIGN_CENTER}
       marginY={SPACING.spacing20}
     >
-      <FileImporter
+      <UploadInput
         onUpload={(file: File) => handleUpload(file)}
         uploadText={t('valid_file_types')}
         dragAndDropText={

diff --git a/app/src/organisms/ProtocolsLanding/ProtocolsEmptyState.tsx b/app/src/organisms/ProtocolsLanding/ProtocolsEmptyState.tsx
@@ -9,7 +9,7 @@ import {
 } from '@opentrons/components'
 
 import { StyledText } from '../../atoms/text'
-import { UploadInput } from './UploadInput'
+import { ProtocolUploadInput } from './ProtocolUploadInput'
 import { EmptyStateLinks } from './EmptyStateLinks'
 export function ProtocolsEmptyState(): JSX.Element | null {
   const { t } = useTranslation('protocol_info')
@@ -25,7 +25,7 @@ export function ProtocolsEmptyState(): JSX.Element | null {
       <StyledText role="complementary" as="h1">
         {t('import_a_file')}
       </StyledText>
-      <UploadInput />
+      <ProtocolUploadInput />
       <EmptyStateLinks title={t('no_protocol_yet')} />
     </Flex>
   )

diff --git a/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx
@@ -8,13 +8,13 @@ import {
   useTrackEvent,
   ANALYTICS_IMPORT_PROTOCOL_TO_APP,
 } from '../../../redux/analytics'
-import { UploadInput } from '../UploadInput'
+import { ProtocolUploadInput } from '../ProtocolUploadInput'
 
 jest.mock('../../../redux/analytics')
 
 const mockUseTrackEvent = useTrackEvent as jest.Mock<typeof useTrackEvent>
 
-describe('UploadInput', () => {
+describe('ProtocolUploadInput', () => {
   let onUpload: jest.MockedFunction<() => {}>
   let trackEvent: jest.MockedFunction<any>
   let render: () => ReturnType<typeof renderWithProviders>[0]
@@ -26,7 +26,7 @@ describe('UploadInput', () => {
     render = () => {
       return renderWithProviders(
         <BrowserRouter>
-          <UploadInput onUpload={onUpload} />
+          <ProtocolUploadInput onUpload={onUpload} />
         </BrowserRouter>,
         {
           i18nInstance: i18n,
@@ -41,7 +41,7 @@ describe('UploadInput', () => {
   it('renders correct contents for empty state', () => {
     const { findByText, getByRole } = render()
 
-    getByRole('button', { name: 'Choose File' })
+    getByRole('button', { name: 'Upload' })
     findByText('Drag and drop or')
     findByText('your files')
     findByText(
@@ -52,7 +52,7 @@ describe('UploadInput', () => {
 
   it('opens file select on button click', () => {
     const { getByRole, getByTestId } = render()
-    const button = getByRole('button', { name: 'Choose File' })
+    const button = getByRole('button', { name: 'Upload' })
     const input = getByTestId('file_input')
     input.click = jest.fn()
     fireEvent.click(button)