UI cleanup (part 3)

ui/src/components/form/layout/layout.module.scss

@@ -57,9 +57,19 @@
   gap: 16px;
 }
 
+.formMessage {
+  width: 100%;
+  @include paragraph-small();
+  padding: 8px 16px;
+  background-color: $color-success-100;
+  color: $color-success-700;
+  box-sizing: border-box;
+  border-radius: 6px;
+}
+
 .formError {
   width: 100%;
-  @include paragraph-x-small();
+  @include paragraph-small();
   padding: 8px 32px;
   background-color: $color-destructive-100;
   color: $color-destructive-600;
@@ -72,6 +82,10 @@
   }
 }
 
+.intro {
+  font-weight: 600;
+}
+
 @media only screen and (max-width: $small-screen-breakpoint) {
   .section {
     margin: 16px;

ui/src/components/form/layout/layout.tsx

@@ -2,6 +2,21 @@ import classNames from 'classnames'
 import { CSSProperties, ReactNode } from 'react'
 import styles from './layout.module.scss'
 
+export const FormMessage = ({
+  intro,
+  message,
+  style,
+}: {
+  intro?: string
+  message: string
+  style?: CSSProperties
+}) => (
+  <div className={styles.formMessage} style={style}>
+    {intro ? <span className={styles.intro}>{intro}: </span> : null}
+    <span>{message}</span>
+  </div>
+)
+
 export const FormError = ({
   inDialog,
   intro,
@@ -17,7 +32,8 @@ export const FormError = ({
     className={classNames(styles.formError, { [styles.inDialog]: inDialog })}
     style={style}
   >
-    {intro ? `${intro}: ${message}` : message}
+    {intro ? <span className={styles.intro}>{intro}: </span> : null}
+    <span>{message}</span>
   </div>
 )
 

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

@@ -28,7 +28,7 @@ export const UserInfoImageUpload = ({
 
   return (
     <>
-      <div className={classNames('bg-primary-50', styles.container)}>
+      <div className={classNames('mb-2 bg-primary-50', styles.container)}>
         <div className={styles.content}>
           {imageUrl ? (
             <>

ui/src/data-services/hooks/captures/useUploadCaptures.ts

@@ -10,7 +10,7 @@ const isRejected = (result: Result) => result.status === 'rejected'
 export const useUploadCaptures = (onSuccess?: () => void) => {
   const queryClient = useQueryClient()
   const [results, setResults] = useState<Result[]>()
-  const { uploadCapture, isLoading, isSuccess } = useUploadCapture()
+  const { uploadCapture, isLoading, isSuccess, reset } = useUploadCapture()
 
   const error = results?.some(isRejected)
     ? 'Not all images could be uploaded, please retry.'
@@ -20,6 +20,10 @@ export const useUploadCaptures = (onSuccess?: () => void) => {
     isLoading,
     isSuccess,
     error,
+    reset: () => {
+      setResults([])
+      reset()
+    },
     uploadCaptures: async (params: {
       deploymentId: string
       files: File[]

ui/src/data-services/models/capture-details.ts

@@ -28,7 +28,7 @@ export class CaptureDetails extends Capture {
       const time1 = j1.updatedAt?.getTime() ?? 0
       const time2 = j2.updatedAt?.getTime() ?? 0
 
-      return time1 - time2
+      return time2 - time1
     })[0]
   }
 

ui/src/data-services/models/capture-set.ts

@@ -32,7 +32,7 @@ export class CaptureSet extends Entity {
       const time1 = j1.updatedAt?.getTime() ?? 0
       const time2 = j2.updatedAt?.getTime() ?? 0
 
-      return time1 - time2
+      return time2 - time1
     })[0]
   }
 

ui/src/data-services/models/deployment.ts

@@ -38,7 +38,7 @@ export class Deployment extends Entity {
       const time1 = j1.updatedAt?.getTime() ?? 0
       const time2 = j2.updatedAt?.getTime() ?? 0
 
-      return time1 - time2
+      return time2 - time1
     })[0]
   }
 

ui/src/design-system/components/file-input/file-input.module.scss

@@ -2,10 +2,11 @@
 @import 'src/design-system/variables/typography.scss';
 
 .container {
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  margin-top: 8px;
   gap: 8px;
 }
 

ui/src/design-system/components/image-upload/image-upload.tsx

@@ -30,7 +30,7 @@ export const ImageUpload = ({
     <>
       <div
         className={classNames(
-          'flex items-center justify-center bg-primary-50',
+          'flex items-center justify-center mb-2 bg-primary-50',
           { 'aspect-video': !imageUrl }
         )}
       >

ui/src/design-system/components/select/entity-picker.tsx

@@ -5,7 +5,7 @@ import { STRING, translate } from 'utils/language'
 
 export const EntityPicker = ({
   collection,
-  value,
+  value: _value,
   onValueChange,
 }: {
   collection: string
@@ -16,12 +16,14 @@ export const EntityPicker = ({
   const { entities = [], isLoading } = useEntities(collection, {
     projectId: projectId as string,
   })
+  const value = entities.some((e) => e.id === _value) ? _value : ''
 
   return (
     <Select.Root
+      key={value}
       disabled={isLoading || entities.length === 0}
       onValueChange={onValueChange}
-      value={entities.some((e) => e.id === value) ? value : ''}
+      value={value}
     >
       <Select.Trigger loading={isLoading}>
         <Select.Value placeholder={translate(STRING.SELECT_PLACEHOLDER)} />

ui/src/pages/captures/upload-images-dialog/select-images-section/select-images-section.tsx

@@ -2,7 +2,7 @@ import { FormSection } from 'components/form/layout/layout'
 import { FileInput } from 'design-system/components/file-input/file-input'
 import { FileInputAccept } from 'design-system/components/file-input/types'
 import { PlusIcon, XIcon } from 'lucide-react'
-import { Button } from 'nova-ui-kit'
+import { Button, buttonVariants } from 'nova-ui-kit'
 import { ReactNode } from 'react'
 import { API_MAX_UPLOAD_SIZE } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
@@ -69,14 +69,20 @@ export const SelectImagesSection = ({
               multiple
               name="select-captures"
               renderInput={({ onClick }) => (
-                <Button
+                <button
                   aria-label={translate(STRING.ADD)}
+                  className="w-full h-full"
                   onClick={onClick}
-                  size="icon"
-                  variant="success"
                 >
-                  <PlusIcon className="w-4 h-4" />
-                </Button>
+                  <div
+                    className={buttonVariants({
+                      size: 'icon',
+                      variant: 'success',
+                    })}
+                  >
+                    <PlusIcon className="w-4 h-4" />
+                  </div>
+                </button>
               )}
               onChange={(files) => {
                 if (!files) {

ui/src/pages/captures/upload-images-dialog/upload-images-dialog.tsx

@@ -53,9 +53,17 @@ export const UploadImagesDialog = ({
     !!project?.settings.defaultProcessingPipeline
   )
 
-  const { uploadCaptures, isLoading, isSuccess, error } = useUploadCaptures()
+  const {
+    uploadCaptures,
+    isLoading,
+    isSuccess,
+    error,
+    reset: resetHook,
+  } = useUploadCaptures()
 
+  // Reset on open state change
   useEffect(() => {
+    resetHook()
     setCurrentSection(Section.Images)
     setImages([])
     setDeployment(undefined)
@@ -70,9 +78,7 @@ export const UploadImagesDialog = ({
         </Button>
       </Dialog.Trigger>
       <Dialog.Content ariaCloselabel={translate(STRING.CLOSE)}>
-        <Dialog.Header
-          title={translate(STRING.UPLOAD_CAPTURES)}
-        ></Dialog.Header>
+        <Dialog.Header title={translate(STRING.UPLOAD_CAPTURES)} />
         {error ? <FormError message={error} /> : null}
         <div className={styles.content}>
           {isSuccess ? (

ui/src/pages/deployments/deployment-columns.tsx

@@ -77,7 +77,9 @@ export const columns = ({
   {
     id: 'status',
     name: 'Latest job status',
-    tooltip: translate(STRING.TOOLTIP_STATUS),
+    tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
+      type: translate(STRING.ENTITY_TYPE_DEPLOYMENT),
+    }),
     renderCell: (item: Deployment) => {
       if (!item.currentJob) {
         return <></>

ui/src/pages/jobs/jobs-columns.tsx

@@ -36,7 +36,6 @@ export const columns = ({
   {
     id: 'status',
     name: translate(STRING.FIELD_LABEL_STATUS),
-    tooltip: translate(STRING.TOOLTIP_STATUS),
     sortField: 'status',
     renderCell: (item: Job) => (
       <StatusTableCell

ui/src/pages/project/capture-sets/capture-set-columns.tsx

@@ -48,7 +48,9 @@ export const columns = ({
   {
     id: 'status',
     name: 'Latest job status',
-    tooltip: translate(STRING.TOOLTIP_STATUS),
+    tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
+      type: translate(STRING.ENTITY_TYPE_CAPTURE_SET),
+    }),
     renderCell: (item: CaptureSet) => {
       if (!item.currentJob) {
         return <></>

ui/src/pages/project/entities/details-form/capture-set-details-form.tsx

@@ -3,6 +3,7 @@ import { FormField } from 'components/form/form-field'
 import {
   FormActions,
   FormError,
+  FormMessage,
   FormRow,
   FormSection,
 } from 'components/form/layout/layout'
@@ -204,6 +205,9 @@ export const CaptureSetDetailsForm = ({
         />
       )}
       <FormSection>
+        <FormMessage
+          message={translate(STRING.MESSAGE_CAPTURE_SET_FORM_INTRO)}
+        />
         <h3 className="body-large font-bold text-muted-foreground/50">
           General
         </h3>
@@ -365,6 +369,10 @@ export const CaptureSetDetailsForm = ({
             />
           ) : null}
         </FormRow>
+        <FormMessage
+          intro={translate(STRING.TIP)}
+          message={translate(STRING.MESSAGE_CAPTURE_SET_TIP)}
+        />
       </FormSection>
       <FormActions>
         <SaveButton isLoading={isLoading} isSuccess={isSuccess} />

ui/src/pages/project/entities/details-form/export-details-form.tsx

@@ -2,6 +2,7 @@ import { FormController } from 'components/form/form-controller'
 import {
   FormActions,
   FormError,
+  FormMessage,
   FormSection,
 } from 'components/form/layout/layout'
 import { FormConfig } from 'components/form/types'
@@ -121,6 +122,10 @@ export const ExportDetailsForm = ({
             </InputContent>
           )}
         />
+        <FormMessage
+          intro={translate(STRING.TIP)}
+          message={translate(STRING.MESSAGE_EXPORT_TIP)}
+        />
       </FormSection>
       <FormActions>
         <SaveButton isLoading={isLoading} isSuccess={isSuccess} />

ui/src/pages/session-details/playback/capture-details/capture-details.module.scss

@@ -14,20 +14,16 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  overflow: hidden;
 }
 
 .jobControls {
-  display: grid;
-  grid-template-columns: 1fr auto;
+  display: flex;
+  flex-wrap: wrap;
   gap: 16px;
   margin-top: 4px;
 }
 
-.pipelinesPickerContainer {
-  max-width: 100%;
-  overflow: auto;
-}
-
 .label {
   display: block;
   @include paragraph-xx-small();
@@ -53,15 +49,6 @@
 }
 
 @media only screen and (max-width: $small-screen-breakpoint) {
-  .jobControls {
-    grid-template-columns: 1fr auto;
-    gap: 16px;
-  }
-
-  .pipelinesPickerContainer {
-    grid-column: span 2;
-  }
-
   .infoWrapper {
     display: none;
   }

ui/src/pages/session-details/playback/capture-details/capture-details.tsx

@@ -243,10 +243,10 @@ const PipelinesPicker = ({
       value={value ?? ''}
     >
       <Select.Trigger
-        className="h-8 !bg-neutral-700 border-none text-neutral-200 body-small focus:ring-0 focus:ring-offset-0"
+        className="w-auto max-w-full h-8 grow !bg-neutral-700 border-none text-neutral-200 body-small focus:ring-0 focus:ring-offset-0"
         loading={isLoading}
       >
-        <Select.Value placeholder="Select a pipeline" />
+        <Select.Value className="truncate" placeholder="Select a pipeline" />
       </Select.Trigger>
       <Select.Content>
         {pipelines.map((p) => (

ui/src/pages/session-details/playback/playback.module.scss

@@ -27,6 +27,7 @@
   gap: 64px;
   box-sizing: border-box;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .sidebarSection {