feat(api-client,app,react-api-client): upload splash logo from desktop app (#14941)

adds the upload input component, api-client, and react-api-client
functions needed to upload a splash logo from the factory mode slideout

closes PLAT-283

Author: brenthagen

api-client/src/robot/index.ts

@@ -4,6 +4,7 @@ export { acknowledgeEstopDisengage } from './acknowledgeEstopDisengage'
 export { getLights } from './getLights'
 export { setLights } from './setLights'
 export { getRobotSettings } from './getRobotSettings'
+export { updateRobotSetting } from './updateRobotSetting'
 
 export type {
   DoorStatus,
@@ -15,4 +16,5 @@ export type {
   RobotSettingsField,
   RobotSettingsResponse,
   SetLightsData,
+  UpdateRobotSettingRequest,
 } from './types'

api-client/src/robot/types.ts

@@ -38,6 +38,11 @@ export interface RobotSettingsField {
 
 export type RobotSettings = RobotSettingsField[]
 
+export interface UpdateRobotSettingRequest {
+  id: string
+  value: boolean | null
+}
+
 export interface RobotSettingsResponse {
   settings: RobotSettings
   links?: { restart?: string }

api-client/src/robot/updateRobotSetting.ts

@@ -0,0 +1,18 @@
+import { POST, request } from '../request'
+
+import type { ResponsePromise } from '../request'
+import type { HostConfig } from '../types'
+import type { RobotSettingsResponse, UpdateRobotSettingRequest } from './types'
+
+export function updateRobotSetting(
+  config: HostConfig,
+  id: string,
+  value: boolean
+): ResponsePromise<RobotSettingsResponse> {
+  return request<RobotSettingsResponse, UpdateRobotSettingRequest>(
+    POST,
+    '/settings',
+    { id, value },
+    config
+  )
+}

api-client/src/system/createSplash.ts

@@ -0,0 +1,24 @@
+import { POST, request } from '../request'
+import type { ResponsePromise } from '../request'
+import type { HostConfig } from '../types'
+
+export function createSplash(
+  config: HostConfig,
+  file: File
+): ResponsePromise<void> {
+  // sanitize file name to ensure no spaces
+  const renamedFile = new File([file], file.name.replace(' ', '_'), {
+    type: 'image/png',
+  })
+
+  const formData = new FormData()
+  formData.append('file', renamedFile)
+
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  return request<void, FormData>(
+    POST,
+    '/system/oem_mode/upload_splash',
+    formData,
+    config
+  )
+}

api-client/src/system/index.ts

@@ -1,4 +1,5 @@
 export { createAuthorization } from './createAuthorization'
 export { createRegistration } from './createRegistration'
+export { createSplash } from './createSplash'
 export { getConnections } from './getConnections'
 export * from './types'

app/src/assets/localization/en/device_settings.json

@@ -29,6 +29,7 @@
   "check_for_updates": "Check for updates",
   "checking_for_updates": "Checking for updates",
   "choose": "Choose...",
+  "choose_file": "Choose file",
   "choose_network_type": "Choose network type",
   "choose_reset_settings": "Choose reset settings",
   "clear_all_data": "Clear all data",
@@ -293,6 +294,9 @@
   "update_robot_software": "Update robot software manually with a local file (.zip)",
   "updating": "Updating",
   "update_requires_restarting_robot": "Updating the robot software requires restarting the robot",
+  "upload_custom_logo_description": "Upload a logo for the robot to display during boot up. If no file is uploaded, we will display an anonymous logo.",
+  "upload_custom_logo_dimensions": "The logo must fit within dimensions 1024 x 600 and be a PNG file (.png).",
+  "upload_custom_logo": "Upload custom logo",
   "usage_settings": "Usage Settings",
   "usb": "USB",
   "usb_to_ethernet_description": "Looking for USB-to-Ethernet Adapter info?",

app/src/molecules/FileUpload/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { css } from 'styled-components'
+
+import {
+  ALIGN_CENTER,
+  BORDERS,
+  Btn,
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  Icon,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
+
+const FILE_UPLOAD_STYLE = css`
+&:hover > svg {
+  background: ${COLORS.black90}${COLORS.opacity20HexCode};
+}
+&:active > svg {
+  background: ${COLORS.black90}${COLORS.opacity20HexCode}};
+}
+`
+
+interface FileUploadProps {
+  file: File
+  fileError: string | null
+  handleClick: () => unknown
+}
+
+export function FileUpload({
+  file,
+  fileError,
+  handleClick,
+}: FileUploadProps): JSX.Element {
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <Btn onClick={handleClick} aria-label="remove_file">
+        <Flex
+          alignItems={ALIGN_CENTER}
+          backgroundColor={fileError == null ? COLORS.grey20 : COLORS.red30}
+          borderRadius={BORDERS.borderRadius4}
+          height={SPACING.spacing44}
+          justifyContent={JUSTIFY_SPACE_BETWEEN}
+          padding={SPACING.spacing8}
+          css={FILE_UPLOAD_STYLE}
+        >
+          <StyledText as="p">{file.name}</StyledText>
+          <Icon name="close" size="1.5rem" borderRadius="50%" />
+        </Flex>
+      </Btn>
+      {fileError != null ? (
+        <StyledText as="label" color={COLORS.red50}>
+          {fileError}
+        </StyledText>
+      ) : null}
+    </Flex>
+  )
+}

app/src/molecules/UploadInput/index.tsx

@@ -45,11 +45,19 @@ const StyledInput = styled.input`
 export interface UploadInputProps {
   onUpload: (file: File) => unknown
   onClick?: () => void
+  uploadButtonText?: string
   uploadText?: string | JSX.Element
   dragAndDropText?: string | JSX.Element
 }
 
 export function UploadInput(props: UploadInputProps): JSX.Element | null {
+  const {
+    dragAndDropText,
+    onClick,
+    onUpload,
+    uploadButtonText,
+    uploadText,
+  } = props
   const { t } = useTranslation('protocol_info')
 
   const fileInput = React.useRef<HTMLInputElement>(null)
@@ -60,7 +68,7 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
   const handleDrop: React.DragEventHandler<HTMLLabelElement> = e => {
     e.preventDefault()
     e.stopPropagation()
-    Array.from(e.dataTransfer.files).forEach(f => props.onUpload(f))
+    Array.from(e.dataTransfer.files).forEach(f => onUpload(f))
     setIsFileOverDropZone(false)
   }
   const handleDragEnter: React.DragEventHandler<HTMLLabelElement> = e => {
@@ -81,11 +89,11 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
   }
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = _event => {
-    props.onClick != null ? props.onClick() : fileInput.current?.click()
+    onClick != null ? onClick() : fileInput.current?.click()
   }
 
   const onChange: React.ChangeEventHandler<HTMLInputElement> = event => {
-    ;[...(event.target.files ?? [])].forEach(f => props.onUpload(f))
+    ;[...(event.target.files ?? [])].forEach(f => onUpload(f))
     if ('value' in event.currentTarget) event.currentTarget.value = ''
   }
 
@@ -97,18 +105,20 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
       alignItems={ALIGN_CENTER}
       gridGap={SPACING.spacing24}
     >
-      <StyledText
-        as="p"
-        textAlign={TYPOGRAPHY.textAlignCenter}
-        marginTop={SPACING.spacing16}
-      >
-        {props.uploadText}
-      </StyledText>
+      {uploadText != null ? (
+        <StyledText
+          as="p"
+          textAlign={TYPOGRAPHY.textAlignCenter}
+          marginTop={SPACING.spacing16}
+        >
+          {uploadText}
+        </StyledText>
+      ) : null}
       <PrimaryButton
         onClick={handleClick}
         id="UploadInput_protocolUploadButton"
       >
-        {t('upload')}
+        {uploadButtonText ?? t('upload')}
       </PrimaryButton>
 
       <StyledLabel
@@ -127,7 +137,7 @@ export function UploadInput(props: UploadInputProps): JSX.Element | null {
           name="upload"
           marginBottom={SPACING.spacing24}
         />
-        {props.dragAndDropText}
+        {dragAndDropText}
         <StyledInput
           id="file_input"
           data-testid="file_input"