Consider job permissions in UI

ui/src/data-services/hooks/jobs/useJobs.ts

@@ -4,6 +4,7 @@ import { FetchParams } from 'data-services/types'
 import { getFetchUrl } from 'data-services/utils'
 import { useMemo } from 'react'
 import { useAuthorizedQuery } from '../auth/useAuthorizedQuery'
+import { UserPermission } from 'utils/user/types'
 
 const REFETCH_INTERVAL = 10000 // Refetch every 10 second
 
@@ -14,6 +15,7 @@ export const useJobs = (
 ): {
   jobs?: Job[]
   total: number
+  userPermissions?: UserPermission[]
   isLoading: boolean
   isFetching: boolean
   error?: unknown
@@ -22,6 +24,7 @@ export const useJobs = (
 
   const { data, isLoading, isFetching, error } = useAuthorizedQuery<{
     results: ServerJob[]
+    user_permissions?: UserPermission[]
     count: number
   }>({
     queryKey: [API_ROUTES.JOBS, params],
@@ -34,6 +37,7 @@ export const useJobs = (
   return {
     jobs,
     total: data?.count ?? 0,
+    userPermissions: data?.user_permissions,
     isLoading,
     isFetching,
     error,

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

@@ -1,3 +1,4 @@
+import { UserPermission } from 'utils/user/types'
 import { Capture, ServerCapture } from './capture'
 import { Job, JobStatus } from './job'
 
@@ -14,6 +15,10 @@ export class CaptureDetails extends Capture {
     }
   }
 
+  get canUpdate(): boolean {
+    return this._capture.user_permissions.includes(UserPermission.Update)
+  }
+
   get hasJobInProgress(): boolean {
     return this._jobs.some(
       (job) =>

ui/src/pages/jobs/jobs.tsx

@@ -18,16 +18,19 @@ import { STRING, translate } from 'utils/language'
 import { usePagination } from 'utils/usePagination'
 import { columns } from './jobs-columns'
 import styles from './jobs.module.scss'
+import { UserPermission } from 'utils/user/types'
 
 export const Jobs = () => {
   const { projectId, id } = useParams()
   const { pagination, setPage } = usePagination()
   const [sort, setSort] = useState<TableSortSettings>()
-  const { jobs, total, isLoading, isFetching, error } = useJobs({
-    projectId,
-    pagination,
-    sort,
-  })
+  const { jobs, userPermissions, total, isLoading, isFetching, error } =
+    useJobs({
+      projectId,
+      pagination,
+      sort,
+    })
+  const canCreate = userPermissions?.includes(UserPermission.Create)
 
   if (!isLoading && error) {
     return <Error />
@@ -55,7 +58,11 @@ export const Jobs = () => {
           setPage={setPage}
         />
       ) : null}
-      {!isLoading && id ? <JobDetailsDialog id={id} /> : <NewJobDialog />}
+      {!isLoading && id ? (
+        <JobDetailsDialog id={id} />
+      ) : canCreate ? (
+        <NewJobDialog />
+      ) : null}
     </>
   )
 }

ui/src/pages/session-details/playback/capture-job/process-now.tsx

@@ -30,9 +30,14 @@ export const ProcessNow = ({
     )
   }
 
+  const tooltipContent = capture.canUpdate
+    ? translate(STRING.MESSAGE_PROCESS_NOW_TOOLTIP)
+    : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
+
   return (
-    <Tooltip content={translate(STRING.MESSAGE_PROCESS_NOW_TOOLTIP)}>
+    <Tooltip content={tooltipContent}>
       <Button
+        disabled={!capture.canUpdate}
         icon={icon}
         label={translate(STRING.PROCESS_NOW)}
         loading={isLoading}

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

@@ -20,12 +20,17 @@ export const StarButton = ({
   const isStarred = capture?.isStarred ?? false
   const { starCapture, isLoading } = useStarCapture(captureId, isStarred)
 
+  const tooltipContent = capture?.canUpdate
+    ? isStarred
+      ? translate(STRING.STARRED)
+      : translate(STRING.STAR)
+    : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
+
   return (
-    <Tooltip
-      content={isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)}
-    >
+    <Tooltip content={tooltipContent}>
       <IconButton
         icon={isStarred ? IconType.HeartFilled : IconType.Heart}
+        disabled={!capture?.canUpdate}
         loading={isLoading || captureFetching}
         theme={IconButtonTheme.Neutral}
         onClick={() => starCapture()}

ui/src/utils/language.ts

@@ -113,6 +113,7 @@ export enum STRING {
   MESSAGE_NO_IMAGE,
   MESSAGE_NO_RESULTS,
   MESSAGE_PASSWORD_FORMAT,
+  MESSAGE_PERMISSIONS_MISSING,
   MESSAGE_PROCESS_NOW_TOOLTIP,
   MESSAGE_RESULT_RANGE,
   MESSAGE_SIGNED_UP,
@@ -295,6 +296,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.MESSAGE_NO_RESULTS]: 'No results to show',
   [STRING.MESSAGE_PASSWORD_FORMAT]:
     'The password must contain at least 8 characters and cannot be entirely numeric.',
+  [STRING.MESSAGE_PERMISSIONS_MISSING]:
+    'Permissions missing to perform the action',
   [STRING.MESSAGE_PROCESS_NOW_TOOLTIP]:
     'Process this single image with presets',
   [STRING.MESSAGE_RESULT_RANGE]: