UI cleanup (part 4)

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

@@ -57,23 +57,8 @@
   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-small();
   padding: 8px 32px;
-  background-color: $color-destructive-100;
-  color: $color-destructive-600;
-  box-sizing: border-box;
 
   &.inDialog {
     position: sticky;

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

@@ -1,21 +1,47 @@
 import classNames from 'classnames'
+import { CircleAlert, InfoIcon, LightbulbIcon } from 'lucide-react'
 import { CSSProperties, ReactNode } from 'react'
 import styles from './layout.module.scss'
 
 export const FormMessage = ({
-  intro,
+  children,
+  className,
   message,
-  style,
+  theme = 'success',
+  withIcon,
 }: {
-  intro?: string
+  className?: string
   message: string
-  style?: CSSProperties
-}) => (
-  <div className={styles.formMessage} style={style}>
-    {intro ? <span className={styles.intro}>{intro}: </span> : null}
-    <span>{message}</span>
-  </div>
-)
+  theme?: 'success' | 'warning' | 'destructive'
+  withIcon?: boolean
+  children?: ReactNode
+}) => {
+  const Icon = {
+    success: LightbulbIcon,
+    warning: InfoIcon,
+    destructive: CircleAlert,
+  }[theme]
+
+  return (
+    <div
+      className={classNames(
+        'px-4 py-2 rounded-md body-small',
+        {
+          'bg-[#d8f2ec] text-[#078c6e]': theme === 'success',
+          'bg-warning-50 text-warning-700': theme === 'warning',
+          'bg-destructive-50 text-destructive-700': theme === 'destructive',
+        },
+        className
+      )}
+    >
+      <span>
+        {withIcon ? <Icon className="inline w-4 h-4 mr-2" /> : null}
+        {message}
+      </span>
+      {children}
+    </div>
+  )
+}
 
 export const FormError = ({
   inDialog,
@@ -29,7 +55,11 @@ export const FormError = ({
   style?: CSSProperties
 }) => (
   <div
-    className={classNames(styles.formError, { [styles.inDialog]: inDialog })}
+    className={classNames(
+      styles.formError,
+      'w-full bg-destructive-50 text-destructive-700 body-small',
+      { [styles.inDialog]: inDialog }
+    )}
     style={style}
   >
     {intro ? <span className={styles.intro}>{intro}: </span> : null}

ui/src/design-system/components/button/docs-link.tsx

@@ -1,4 +1,4 @@
-import { BookOpenIcon } from 'lucide-react'
+import { BookOpenIcon, ChevronRight } from 'lucide-react'
 import { buttonVariants } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
 import { BasicTooltip } from '../tooltip/basic-tooltip'
@@ -24,8 +24,14 @@ export const DocsLink = ({
       rel="noreferrer"
       target="_blank"
     >
-      <BookOpenIcon className="w-4 h-4" />
-      {isCompact ? null : <span>{translate(STRING.VIEW_DOCS)}</span>}
+      {isCompact ? (
+        <BookOpenIcon className="w-4 h-4" />
+      ) : (
+        <>
+          <span>{translate(STRING.VIEW_DOCS)}</span>
+          <ChevronRight className="w-4 h-4" />
+        </>
+      )}
     </a>
   </BasicTooltip>
 )

ui/src/design-system/components/info-tooltip.tsx

@@ -18,9 +18,11 @@ export const InfoTooltip = (props: {
           <InfoIcon className="w-4 h-4" />
         </Button>
       </Tooltip.Trigger>
-      <Tooltip.Content side="bottom" className="p-4 max-w-xs">
-        <Info {...props} />
-      </Tooltip.Content>
+      <Tooltip.Portal>
+        <Tooltip.Content side="bottom" className="p-4 max-w-xs">
+          <Info {...props} />
+        </Tooltip.Content>
+      </Tooltip.Portal>
     </Tooltip.Root>
   </Tooltip.Provider>
 )

ui/src/design-system/components/select/capture-set-picker.tsx

@@ -0,0 +1,75 @@
+import { FormMessage } from 'components/form/layout/layout'
+import { useCaptureSets } from 'data-services/hooks/capture-sets/useCaptureSets'
+import { ChevronRight } from 'lucide-react'
+import { Select } from 'nova-ui-kit'
+import { Link, useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
+import { STRING, translate } from 'utils/language'
+
+export const CaptureSetPicker = ({
+  value: _value,
+  onValueChange,
+}: {
+  value?: string
+  onValueChange: (value?: string) => void
+}) => {
+  const { projectId } = useParams()
+  const { captureSets = [], isLoading } = useCaptureSets({
+    projectId: projectId as string,
+  })
+  const captureSet = captureSets.find((c) => c.id === _value)
+  const value = captureSet ? _value : ''
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Select.Root
+        key={value}
+        disabled={isLoading || captureSets.length === 0}
+        onValueChange={onValueChange}
+        value={value}
+      >
+        <Select.Trigger loading={isLoading}>
+          <Select.Value placeholder={translate(STRING.SELECT_PLACEHOLDER)} />
+        </Select.Trigger>
+        <Select.Content className="max-h-72">
+          {captureSets.map((c) => (
+            <Select.Item key={c.id} value={c.id}>
+              {c.name}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+      {captureSet?.numImages !== undefined ? (
+        captureSet.numImages === 0 ? (
+          <div className="flex flex-col gap-4">
+            <FormMessage
+              className="flex justify-between gap-4"
+              message={translate(STRING.MESSAGE_CAPTURE_SET_EMPTY)}
+              theme="warning"
+              withIcon
+            >
+              {captureSet.canPopulate ? (
+                <Link
+                  className="font-bold"
+                  to={APP_ROUTES.CAPTURE_SETS({
+                    projectId: projectId as string,
+                  })}
+                >
+                  <span>{translate(STRING.POPULATE)}</span>
+                  <ChevronRight className="inline w-4 h-4 ml-2" />
+                </Link>
+              ) : null}
+            </FormMessage>
+          </div>
+        ) : (
+          <FormMessage
+            message={translate(STRING.MESSAGE_CAPTURE_SET_COUNT, {
+              total: captureSet.numImages.toLocaleString(),
+            })}
+            withIcon
+          />
+        )
+      ) : null}
+    </div>
+  )
+}

ui/src/pages/captures/capture-columns.tsx

@@ -47,7 +47,7 @@ export const columns = ({
   },
   {
     id: 'timestamp',
-    name: translate(STRING.FIELD_LABEL_TIMESTAMP),
+    name: translate(STRING.FIELD_LABEL_CAPTURE),
     sortField: 'timestamp',
     renderCell: (item: Capture) => {
       const detailsRoute = item.sessionId
@@ -67,6 +67,7 @@ export const columns = ({
           <Link to={detailsRoute}>
             <BasicTableCell
               value={item.dateTimeLabel}
+              details={[`${translate(STRING.FIELD_LABEL_ID)}: ${item.id}`]}
               theme={CellTheme.Primary}
             />
           </Link>

ui/src/pages/deployment-details/deployment-details-info.tsx

@@ -44,6 +44,12 @@ export const DeploymentDetailsInfo = ({
       </Dialog.Header>
       <div className={styles.content}>
         <FormSection title={translate(STRING.FIELD_LABEL_GENERAL)}>
+          <FormRow>
+            <InputValue
+              label={translate(STRING.FIELD_LABEL_ID)}
+              value={deployment.id}
+            />
+          </FormRow>
           <FormRow>
             <InputValue
               label={translate(STRING.FIELD_LABEL_NAME)}

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

@@ -54,7 +54,11 @@ export const columns = ({
           keepSearchParams: true,
         })}
       >
-        <BasicTableCell value={item.name} theme={CellTheme.Primary} />
+        <BasicTableCell
+          value={item.name}
+          details={[`${translate(STRING.FIELD_LABEL_ID)}: ${item.id}`]}
+          theme={CellTheme.Primary}
+        />
       </Link>
     ),
   },

ui/src/pages/job-details/job-details-form/job-details-form.tsx

@@ -3,19 +3,22 @@ import { FormField } from 'components/form/form-field'
 import {
   FormActions,
   FormError,
+  FormMessage,
   FormRow,
   FormSection,
 } from 'components/form/layout/layout'
 import { FormConfig } from 'components/form/types'
 import { API_ROUTES } from 'data-services/constants'
 import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
+import { DocsLink } from 'design-system/components/button/docs-link'
 import { SaveButton } from 'design-system/components/button/save-button'
 import { Checkbox } from 'design-system/components/checkbox/checkbox'
 import { InputContent } from 'design-system/components/input/input'
+import { CaptureSetPicker } from 'design-system/components/select/capture-set-picker'
 import { EntityPicker } from 'design-system/components/select/entity-picker'
 import { useForm } from 'react-hook-form'
 import { useParams } from 'react-router-dom'
-import { APP_ROUTES } from 'utils/constants'
+import { APP_ROUTES, DOCS_LINKS } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 import { useFormError } from 'utils/useFormError'
 
@@ -96,14 +99,16 @@ export const JobDetailsForm = ({
           intro={translate(STRING.MESSAGE_COULD_NOT_SAVE)}
           message={errorMessage}
         />
-      ) : (
-        <FormError
-          inDialog
-          intro="Warning"
-          message="Batch processing is currently in development and problems are likely to occur. If you need data processed, we recommend to reach out to the team for support. Thank you for your patience!"
-        />
-      )}
+      ) : null}
       <FormSection>
+        <div className="flex flex-col items-end gap-4">
+          <FormMessage
+            message="Batch processing is currently in development and problems are likely to occur. If you need data processed, we recommend to reach out to the team for support. Thank you for your patience!"
+            theme="warning"
+            withIcon
+          />
+          <DocsLink href={DOCS_LINKS.PROCESSING_DATA} />
+        </div>
         <FormRow>
           <FormField
             name="name"
@@ -142,8 +147,7 @@ export const JobDetailsForm = ({
                   },
                 }}
               >
-                <EntityPicker
-                  collection={API_ROUTES.CAPTURE_SETS}
+                <CaptureSetPicker
                   onValueChange={field.onChange}
                   value={field.value}
                 />