Setup UI for example captures edit mode

Author: annavik

ui/src/components/header/user-info-dialog/user-info-image-upload/user-info-image-upload.tsx

@@ -40,7 +40,8 @@ export const UserInfoImageUpload = ({
         accept={FileInputAccept.Images}
         label={imageUrl ? 'Change image' : 'Choose image'}
         name="user-image"
-        onChange={onChange}
+        withClear
+        onChange={(files) => onChange(files ? files[0] : null)}
       />
     </>
   )

ui/src/design-system/components/file-input/file-input.tsx

@@ -12,15 +12,19 @@ interface FileInputProps {
   accept?: FileInputAccept
   label?: string
   loading?: boolean
+  multiple?: boolean
   name: string
-  onChange: (file: File | null) => void
+  withClear?: boolean
+  onChange: (files: FileList | null) => void
 }
 
 export const FileInput = ({
   accept = FileInputAccept.All,
   label = 'Choose file',
   loading,
+  multiple,
   name,
+  withClear,
   onChange,
 }: FileInputProps) => {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -32,29 +36,32 @@ export const FileInput = ({
         className={styles.fileInput}
         disabled={loading}
         id={name}
+        multiple={multiple}
         name={name}
         ref={inputRef}
         type="file"
         onChange={(e) => {
-          const file = e.currentTarget.files?.[0]
-          if (!file) {
+          const files = e.currentTarget.files
+          if (!files?.length) {
             return
           }
-          onChange(file)
+          onChange(files)
         }}
       />
       <label htmlFor={name}>{!loading ? label : `${label}...`}</label>
-      <Button
-        label="Clear"
-        theme={ButtonTheme.Plain}
-        onClick={() => {
-          if (inputRef.current) {
-            inputRef.current.value = ''
-            inputRef.current.files = null
-          }
-          onChange(null)
-        }}
-      />
+      {withClear && (
+        <Button
+          label="Clear"
+          theme={ButtonTheme.Plain}
+          onClick={() => {
+            if (inputRef.current) {
+              inputRef.current.value = ''
+              inputRef.current.files = null
+            }
+            onChange(null)
+          }}
+        />
+      )}
     </div>
   )
 }

ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.module.scss

@@ -0,0 +1,34 @@
+@import 'design-system/variables/variables.scss';
+@import 'design-system/variables/colors.scss';
+@import 'design-system/variables/typography.scss';
+
+.collection {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 16px;
+}
+
+.card {
+  background-color: $color-primary-2-50;
+  width: 100%;
+  border: 1px solid $color-neutral-100;
+  border-radius: 4px;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+}
+
+.cardContent {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}

ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx

@@ -0,0 +1,62 @@
+import { DeploymentDetails } from 'data-services/models/deployment-details'
+import { FileInput } from 'design-system/components/file-input/file-input'
+import { FileInputAccept } from 'design-system/components/file-input/types'
+import { InputContent } from 'design-system/components/input/input'
+import { ReactNode, useEffect, useState } from 'react'
+import styles from './section-example-captures.module.scss'
+
+const IMAGE_CONFIG = {
+  MAX_SIZE: 1024 * 1024, // 1MB
+  NUM_IMAGES: 12,
+  RATIO: 16 / 9,
+}
+
+export const SectionExampleCaptures = ({
+  deployment,
+}: {
+  deployment: DeploymentDetails
+}) => {
+  const [files, setFiles] = useState<File[]>([])
+
+  return (
+    <InputContent
+      label="Example captures"
+      description={`Upload a maximum of ${IMAGE_CONFIG.NUM_IMAGES} images. Valid formats are PNG, GIF and JPEG.`}
+    >
+      <div className={styles.collection}>
+        {deployment.exampleCaptures.map((exampelCapture, index) => (
+          <Card key={index}>
+            <img src={exampelCapture.src} />
+          </Card>
+        ))}
+        {files.map((file, index) => (
+          <Card key={index}>
+            <img src={URL.createObjectURL(file)} />
+          </Card>
+        ))}
+        <Card>
+          <FileInput
+            accept={FileInputAccept.Images}
+            label="Choose images"
+            multiple
+            name="example-captures"
+            onChange={(newFiles) => {
+              setFiles([...files, ...Array.from(newFiles ?? [])])
+            }}
+          />
+        </Card>
+      </div>
+    </InputContent>
+  )
+}
+
+const Card = ({ children }: { children: ReactNode }) => (
+  <div
+    className={styles.card}
+    style={{
+      paddingBottom: `${(1 / IMAGE_CONFIG.RATIO) * 100}%`,
+    }}
+  >
+    <div className={styles.cardContent}>{children}</div>
+  </div>
+)

ui/src/pages/deployment-details/deployment-details-form/section-source-images/section-source-images.tsx

@@ -9,10 +9,7 @@ import {
   DeploymentFieldValues,
 } from 'data-services/models/deployment-details'
 import { Button } from 'design-system/components/button/button'
-import { ImageCarousel } from 'design-system/components/image-carousel/image-carousel'
-import { InputValue } from 'design-system/components/input/input'
 import _ from 'lodash'
-import { Status } from 'pages/deployment-details/connection-status/types'
 import { useContext } from 'react'
 import { useForm } from 'react-hook-form'
 import { FormContext } from 'utils/formContext/formContext'
@@ -21,8 +18,8 @@ import { STRING, translate } from 'utils/language'
 import { useSyncSectionStatus } from 'utils/useSyncSectionStatus'
 import { ConnectionStatus } from '../../connection-status/connection-status'
 import { useConnectionStatus } from '../../connection-status/useConnectionStatus'
-import styles from '../../styles.module.scss'
 import { config } from '../config'
+import { SectionExampleCaptures } from '../section-example-captures/section-example-captures'
 import { Section } from '../types'
 
 type SectionSourceImagesFieldValues = Pick<DeploymentFieldValues, 'path'>
@@ -71,26 +68,7 @@ export const SectionSourceImages = ({
             lastUpdated={lastUpdated}
           />
         </FormRow>
-        {status === Status.Connected ? (
-          <>
-            <FormRow>
-              <InputValue
-                label={translate(STRING.FIELD_LABEL_CAPTURES)}
-                value={deployment.numImages}
-              />
-              <InputValue
-                label={translate(STRING.FIELD_LABEL_EXAMPLE_CAPTURES)}
-                value={deployment.exampleCaptures.length}
-              />
-            </FormRow>
-            <div className={styles.exampleCapturesContainer}>
-              <ImageCarousel
-                images={deployment.exampleCaptures}
-                size={{ width: '100%', ratio: 16 / 9 }}
-              />
-            </div>
-          </>
-        ) : null}
+        <SectionExampleCaptures deployment={deployment} />
       </FormSection>
       <FormActions>
         <Button label={translate(STRING.BACK)} onClick={onBack} />

ui/src/pages/project-details/project-image-upload/project-image-upload.tsx

@@ -34,8 +34,9 @@ export const ProjectImageUpload = ({
       <FileInput
         accept={FileInputAccept.Images}
         label={imageUrl ? 'Change image' : 'Choose image'}
-        name="image"
-        onChange={onChange}
+        name="project-image"
+        withClear
+        onChange={(files) => onChange(files ? files[0] : null)}
       />
     </>
   )