Add control for marking captures as starred

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

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import axios from 'axios'
+import { API_ROUTES, API_URL } from 'data-services/constants'
+import { getAuthHeader } from 'data-services/utils'
+import { useUser } from 'utils/user/userContext'
+
+
+export const useStarCapture = (id: string, isStarred: boolean, onSuccess?: () => void) => {
+  const { user } = useUser()
+  const queryClient = useQueryClient()
+
+  const captureDetailUrl = `${API_URL}/${API_ROUTES.CAPTURES}/${id}`
+  const mutationUrl = isStarred ? `${captureDetailUrl}/unstar/` : `${captureDetailUrl}/star/`
+
+  const { mutateAsync, isLoading, isSuccess, error } = useMutation({
+    mutationFn: () =>
+      axios.post(mutationUrl, {
+        headers: getAuthHeader(user),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries([API_ROUTES.CAPTURES])
+      onSuccess?.()
+    },
+  })
+
+  return { starCapture: mutateAsync, isLoading, isSuccess, error }
+}
+

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

@@ -23,6 +23,12 @@ export class CaptureDetails extends Capture {
     )
   }
 
+  get isStarred(): boolean {
+    return this._capture.collections?.some(
+      (collection: any) => collection.method === 'starred'
+    )
+  }
+
   get jobs(): Job[] {
     return this._jobs
   }

ui/src/design-system/components/icon-button/icon-button.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
-import { forwardRef } from 'react'
+import { forwardRef, MouseEvent } from 'react'
 import { Icon, IconTheme, IconType } from '../icon/icon'
+import { LoadingSpinner } from '../loading-spinner/loading-spinner'
 import styles from './icon-button.module.scss'
 
 export enum IconButtonShape {
@@ -22,10 +23,11 @@ interface IconButtonProps {
   disabled?: boolean
   icon: IconType
   iconTransform?: string
+  loading?: boolean
   shape?: IconButtonShape
   theme?: IconButtonTheme
   title?: string
-  onClick?: () => void
+  onClick?: (e: MouseEvent) => void
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
@@ -34,6 +36,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       disabled,
       icon,
       iconTransform,
+      loading,
       shape = IconButtonShape.Square,
       theme = IconButtonTheme.Default,
       title,
@@ -74,17 +77,26 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
           [styles.disabled]: disabled,
         })}
         disabled={disabled}
-        onClick={onClick}
+        onClick={(e) => {
+          if (loading) {
+            return
+          }
+          onClick?.(e)
+        }}
         title={title}
         type="button"
         {...rest}
       >
-        <Icon
-          size={14}
-          theme={iconTheme}
-          transform={iconTransform}
-          type={icon}
-        />
+        {loading ? (
+          <LoadingSpinner size={12} />
+        ) : (
+          <Icon
+            size={14}
+            theme={iconTheme}
+            transform={iconTransform}
+            type={icon}
+          />
+        )}
       </button>
     )
   }

ui/src/design-system/components/icon/icon.tsx

@@ -19,6 +19,8 @@ import RadixCheck from './assets/radix/check.svg?react'
 import Cross from './assets/radix/cross.svg?react'
 import Error from './assets/radix/error.svg?react'
 import ExternalLink from './assets/radix/external-link.svg?react'
+import HeartFilled from './assets/radix/heart-filled.svg?react'
+import Heart from './assets/radix/heart.svg?react'
 import Options from './assets/radix/options.svg?react'
 import Pencil from './assets/radix/pencil.svg?react'
 import Plus from './assets/radix/plus.svg?react'
@@ -50,6 +52,8 @@ export enum IconType {
   ExternalLink = 'external-link',
   Filters = 'filters',
   GalleryView = 'gallery-view',
+  Heart = 'heart',
+  HeartFilled = 'heart-filled',
   Images = 'images',
   Info = 'info',
   Members = 'members',
@@ -98,6 +102,8 @@ const COMPONENT_MAP: { [key in IconType]: FunctionComponent } = {
   [IconType.ExternalLink]: ExternalLink,
   [IconType.Filters]: Filters,
   [IconType.GalleryView]: GalleryView,
+  [IconType.Heart]: Heart,
+  [IconType.HeartFilled]: HeartFilled,
   [IconType.Images]: Images,
   [IconType.Info]: Info,
   [IconType.Members]: Members,

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

@@ -13,15 +13,14 @@
 .sliderControls {
   flex: 0;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
   gap: 16px;
 }
 
 .detailedControls {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 8px;
+  gap: 16px;
 }

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

@@ -1,4 +1,5 @@
 import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetails'
+import { CaptureDetails } from 'data-services/models/capture-details'
 import {
   IconButton,
   IconButtonTheme,
@@ -12,9 +13,11 @@ import { CaptureJob } from '../capture-job/capture-job'
 import { useActiveCaptureId } from '../useActiveCapture'
 import { PipelinesPicker } from './pipelines-picker'
 import styles from './playback-controls.module.scss'
+import { StarButton } from './star-button'
 
 export const PlaybackControls = () => {
   const { activeCaptureId } = useActiveCaptureId()
+  const { capture, isFetching } = useCaptureDetails(activeCaptureId as string)
   const { defaultThreshold, threshold, setThreshold } = useThreshold()
   const [showDetails, setShowDetails] = useState(false)
   const [displayThreshold, setDisplayThreshold] = useState(threshold)
@@ -28,6 +31,11 @@ export const PlaybackControls = () => {
           theme={IconButtonTheme.Neutral}
           onClick={() => setShowDetails(!showDetails)}
         />
+        <StarButton
+          capture={capture}
+          captureFetching={isFetching}
+          captureId={activeCaptureId as string}
+        />
         <PlaybackSlider
           defaultValue={defaultThreshold}
           label="Score"
@@ -39,16 +47,13 @@ export const PlaybackControls = () => {
           }}
         />
       </div>
-      {activeCaptureId && showDetails && (
-        <DetailedControls captureId={activeCaptureId} />
-      )}
+      {showDetails && <DetailedControls capture={capture} />}
     </div>
   )
 }
 
-const DetailedControls = ({ captureId }: { captureId: string }) => {
+const DetailedControls = ({ capture }: { capture?: CaptureDetails }) => {
   const [selectedPipelineId, setSelectedPipelineId] = useState<string>()
-  const { capture } = useCaptureDetails(captureId)
 
   return (
     <div className={styles.detailedControls}>
@@ -57,7 +62,6 @@ const DetailedControls = ({ captureId }: { captureId: string }) => {
         value={selectedPipelineId}
         onValueChange={setSelectedPipelineId}
       />
-
       <CaptureJob capture={capture} pipelineId={selectedPipelineId} />
     </div>
   )

ui/src/pages/session-details/playback/playback-controls/star-button.tsx

@@ -0,0 +1,35 @@
+import { useStarCapture } from 'data-services/hooks/captures/useStarCapture'
+import { CaptureDetails } from 'data-services/models/capture-details'
+import {
+  IconButton,
+  IconButtonTheme,
+} from 'design-system/components/icon-button/icon-button'
+import { IconType } from 'design-system/components/icon/icon'
+import { Tooltip } from 'design-system/components/tooltip/tooltip'
+import { STRING, translate } from 'utils/language'
+
+export const StarButton = ({
+  capture,
+  captureFetching,
+  captureId,
+}: {
+  capture?: CaptureDetails
+  captureFetching?: boolean
+  captureId: string
+}) => {
+  const isStarred = capture?.isStarred ?? false
+  const { starCapture, isLoading } = useStarCapture(captureId, isStarred)
+
+  return (
+    <Tooltip
+      content={isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)}
+    >
+      <IconButton
+        icon={isStarred ? IconType.HeartFilled : IconType.Heart}
+        loading={isLoading || captureFetching}
+        theme={IconButtonTheme.Neutral}
+        onClick={() => starCapture()}
+      />
+    </Tooltip>
+  )
+}

ui/src/utils/language.ts

@@ -24,6 +24,8 @@ export enum STRING {
   SAVED,
   SEARCH_MAP,
   SIGN_UP,
+  STAR,
+  STARRED,
   START,
   SUBMIT,
   SUGGEST_ID,
@@ -189,6 +191,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.SAVED]: 'Saved',
   [STRING.SEARCH_MAP]: 'Search on the map',
   [STRING.SIGN_UP]: 'Sign up',
+  [STRING.STAR]: 'Add to starred collection',
+  [STRING.STARRED]: 'Remove from starred collection',
   [STRING.START]: 'Start',
   [STRING.SUBMIT]: 'Submit',
   [STRING.SUGGEST_ID]: 'Suggest ID',