fix: address PR comments

Author: annavik

ui/src/nova-ui-kit/global.scss

@@ -41,53 +41,53 @@
 }
 
 .heading-large {
-  @include heading-large();
+  @include heading-large;
 }
 
 .heading-medium {
-  @include heading-medium();
+  @include heading-medium;
 }
 
 .heading-small {
-  @include heading-small();
+  @include heading-small;
 }
 
 .body-xlarge {
-  @include body-xlarge();
+  @include body-xlarge;
 }
 
 .body-large {
-  @include body-large();
+  @include body-large;
 }
 
 .body-base {
-  @include body-base();
+  @include body-base;
 }
 
 .body-small {
-  @include body-small();
+  @include body-small;
 }
 
 .body-overline {
-  @include body-overline();
+  @include body-overline;
 }
 
 .body-overline-small {
-  @include body-overline-small();
+  @include body-overline-small;
 }
 
 .body-overline-xsmall {
-  @include body-overline-xsmall();
+  @include body-overline-xsmall;
 }
 
 .body-number {
-  @include body-number();
+  @include body-number;
 }
 
 .body-number-small {
-  @include body-number-small();
+  @include body-number-small;
 }
 
 .bubble-label {
-  @include bubble-label();
+  @include bubble-label;
 }

ui/src/pages/session-details/process/process-now.tsx

@@ -18,7 +18,8 @@ export const ProcessNow = ({
   const canProcess = capture.userPermissions.includes(
     UserPermission.RunSingleImage
   )
-  const disabled = capture.hasJobInProgress || !pipelineId || !canProcess
+  const disabled =
+    isLoading || capture.hasJobInProgress || !pipelineId || !canProcess
   // @TODO: also check if pipeline is healthy/available
 
   return (

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

@@ -70,10 +70,11 @@ export const SessionDetailsPage = () => {
 
   return (
     <>
-      <Helmet>
-        <meta name="og:image" content={session.exampleCaptures[0]?.src} />
-      </Helmet>
-
+      {session.exampleCaptures[0] ? (
+        <Helmet>
+          <meta name="og:image" content={session.exampleCaptures[0]?.src} />
+        </Helmet>
+      ) : null}
       <Content session={session} />
     </>
   )

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

@@ -13,16 +13,18 @@ export const StarButton = ({
 }) => {
   const isStarred = capture.isStarred ?? false
   const { starCapture, isLoading } = useStarCapture(capture.id, isStarred)
-  const tooltipContent = canStar
-    ? isStarred
-      ? translate(STRING.STARRED)
-      : translate(STRING.STAR)
-    : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
+
+  if (!canStar) {
+    return null
+  }
 
   return (
-    <BasicTooltip asChild content={tooltipContent}>
+    <BasicTooltip
+      asChild
+      content={isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)}
+    >
       <Button
-        disabled={!canStar}
+        disabled={isLoading}
         aria-label={
           isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)
         }

ui/src/pages/session-details/view-settings.tsx

@@ -46,7 +46,7 @@ export const ViewSettings = ({
         <div className="grid gap-2">
           <Checkbox
             id="show-detections"
-            label="Show detections"
+            label={translate(STRING.SHOW_DETECTIONS)}
             checked={settings.showDetections}
             onCheckedChange={() =>
               onSettingsChange({
@@ -58,7 +58,7 @@ export const ViewSettings = ({
           <div className="flex items-center gap-1">
             <Checkbox
               id="default-filters"
-              label="Default filters"
+              label={translate(STRING.NAV_ITEM_DEFAULT_FILTERS)}
               checked={settings.defaultFilters}
               onCheckedChange={() =>
                 onSettingsChange({

ui/src/utils/language.ts

@@ -328,6 +328,7 @@ export enum STRING {
   SET_PASSWORD_DETAILS,
   SET_PASSWORD,
   SETTINGS,
+  SHOW_DETECTIONS,
   SNAP_TO_DETECTIONS,
   SORT_BY,
   SORT_JOBS_ACTIVITY,
@@ -720,6 +721,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.SET_PASSWORD_DETAILS]: 'Please set a new password for your acccount.',
   [STRING.SET_PASSWORD]: 'Set password',
   [STRING.SETTINGS]: 'Settings',
+  [STRING.SHOW_DETECTIONS]: 'Show detections',
   [STRING.SNAP_TO_DETECTIONS]: 'Snap to captures with detections',
   [STRING.SORT_BY]: 'Sort by',
   [STRING.SORT_JOBS_ACTIVITY]: 'Jobs activity',