UI cleanup (part 1)

ui/package.json

@@ -28,7 +28,7 @@
     "cmdk": "^0.2.0",
     "leaflet": "^1.9.3",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.454.0",
+    "lucide-react": "^1.0.1",
     "nova-ui-kit": "^1.1.33",
     "plotly.js": "^2.25.2",
     "react": "^18.2.0",

ui/src/components/blueprint-collection/blueprint-collection.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames'
 import { LicenseInfo } from 'components/license-info/license-info'
-import { Icon, IconType } from 'design-system/components/icon/icon'
 import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip'
 import { EyeIcon } from 'lucide-react'
 import { buttonVariants } from 'nova-ui-kit'
@@ -54,12 +53,6 @@ export const BlueprintItem = ({
   return (
     <div className={classNames(styles.blueprintItem, 'group')}>
       <div className={styles.blueprintInfo} style={{ width: size.width }}>
-        {item.countLabel?.length ? (
-          <span className={styles.count}>
-            <Icon type={IconType.Detections} size={12} />
-            <span>{item.countLabel}</span>
-          </span>
-        ) : null}
         <span className="grow text-muted-foreground text-right">
           {item.timeLabel}
         </span>

ui/src/components/cookie-dialog/cookie-dialog.module.scss

@@ -47,7 +47,7 @@
 
 .actions {
   display: flex;
-  gap: 16px;
+  gap: 8px;
 }
 
 @media only screen and (max-width: $small-screen-breakpoint) {

ui/src/components/cookie-dialog/cookie-dialog.tsx

@@ -1,6 +1,6 @@
 import * as Dialog from '@radix-ui/react-dialog'
-import { Button, ButtonTheme } from 'design-system/components/button/button'
 import { Checkbox } from 'design-system/components/checkbox/checkbox'
+import { Button } from 'nova-ui-kit'
 import { useState } from 'react'
 import { useCookieConsent } from 'utils/cookieConsent/cookieConsentContext'
 import { CookieCategory } from 'utils/cookieConsent/types'
@@ -56,30 +56,38 @@ const IntroContent = ({
       </div>
       <div className={styles.actions}>
         <Button
-          label="Set cookies"
           onClick={() => onSectionChange(CookieDialogSection.SetCookies)}
-        />
+          size="small"
+          variant="outline"
+        >
+          <span>Set cookies</span>
+        </Button>
         <Button
-          label="Refuse cookies"
           onClick={() =>
             setSettings({
               [CookieCategory.Necessary]: true,
               [CookieCategory.Functionality]: false,
               [CookieCategory.Performance]: false,
             })
           }
-        />
+          size="small"
+          variant="outline"
+        >
+          <span>Refuse</span>
+        </Button>
         <Button
-          label="Accept cookies"
-          theme={ButtonTheme.Success}
           onClick={() =>
             setSettings({
               [CookieCategory.Necessary]: true,
               [CookieCategory.Functionality]: true,
               [CookieCategory.Performance]: true,
             })
           }
-        />
+          size="small"
+          variant="success"
+        >
+          <span>Accept</span>
+        </Button>
       </div>
     </div>
   )
@@ -135,14 +143,19 @@ const SetCookiesContent = ({
       </div>
       <div className={styles.actions}>
         <Button
-          label={translate(STRING.CANCEL)}
           onClick={() => onSectionChange(CookieDialogSection.Intro)}
-        />
+          size="small"
+          variant="outline"
+        >
+          <span>{translate(STRING.CANCEL)}</span>
+        </Button>
         <Button
-          label={translate(STRING.SAVE)}
-          theme={ButtonTheme.Success}
           onClick={() => setSettings(formValues)}
-        />
+          size="small"
+          variant="success"
+        >
+          <span>{translate(STRING.SAVE)}</span>
+        </Button>
       </div>
     </div>
   )

ui/src/components/filtering/default-filter-control.tsx

@@ -5,15 +5,9 @@ import {
 } from 'components/form/layout/layout'
 import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
 import { ProjectDetails } from 'data-services/models/project-details'
-import {
-  IconButton,
-  IconButtonShape,
-  IconButtonTheme,
-} from 'design-system/components/icon-button/icon-button'
-import { IconType } from 'design-system/components/icon/icon'
 import { InputValue } from 'design-system/components/input/input'
-import { ChevronRightIcon } from 'lucide-react'
-import { buttonVariants, Popover, Switch } from 'nova-ui-kit'
+import { ChevronRightIcon, InfoIcon } from 'lucide-react'
+import { Button, buttonVariants, Popover, Switch } from 'nova-ui-kit'
 import { Link, useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
@@ -53,19 +47,17 @@ export const DefaultFiltersControl = ({ field }: { field: string }) => {
 }
 
 export const DefaultFiltersPopover = ({
-  buttonTheme = IconButtonTheme.Plain,
+  className,
   project,
 }: {
-  buttonTheme?: IconButtonTheme
+  className?: string
   project: ProjectDetails
 }) => (
   <Popover.Root>
     <Popover.Trigger asChild>
-      <IconButton
-        icon={IconType.Info}
-        shape={IconButtonShape.Round}
-        theme={buttonTheme}
-      />
+      <Button className={className} size="icon" variant="ghost">
+        <InfoIcon className="w-4 h-4" />
+      </Button>
     </Popover.Trigger>
     <Popover.Content className="p-0">
       <FormSection

ui/src/components/terms-of-service-info/terms-of-service-info.tsx

@@ -1,8 +1,5 @@
-import {
-  IconButton,
-  IconButtonTheme,
-} from 'design-system/components/icon-button/icon-button'
-import { IconType } from 'design-system/components/icon/icon'
+import { XIcon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
 import { useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
@@ -30,13 +27,15 @@ export const TermsOfServiceInfo = () => {
         <Link to={APP_ROUTES.TERMS_OF_SERVICE}>Terms of Service.</Link>
       </p>
       <div className={styles.iconContainer}>
-        <IconButton
-          icon={IconType.Cross}
-          theme={IconButtonTheme.Plain}
+        <Button
           onClick={() =>
             setUserPreferences({ ...userPreferences, termsMessageSeen: true })
           }
-        />
+          size="icon"
+          variant="ghost"
+        >
+          <XIcon className="w-4 h-4" />
+        </Button>
       </div>
     </div>
   )

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

@@ -1,31 +1,15 @@
-import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { snakeCaseToSentenceCase } from 'utils/snakeCaseToSentenceCase'
+import { Entity } from './entity'
 
 export type ServerAlgorithm = any // TODO: Update this type
 
-export class Algorithm {
+export class Algorithm extends Entity {
   protected readonly _algorithm: ServerAlgorithm
 
   public constructor(algorithm: ServerAlgorithm) {
-    this._algorithm = algorithm
-  }
-
-  get createdAt(): string {
-    return getFormatedDateTimeString({
-      date: new Date(this._algorithm.created_at),
-    })
-  }
-
-  get description(): string | undefined {
-    return this._algorithm.description
-  }
+    super(algorithm)
 
-  get id(): string {
-    return `${this._algorithm.id}`
-  }
-
-  get name(): string {
-    return this._algorithm.name
+    this._algorithm = algorithm
   }
 
   get key(): string {
@@ -40,16 +24,6 @@ export class Algorithm {
     return this._algorithm.uri
   }
 
-  get updatedAt(): string | undefined {
-    if (!this._algorithm.updated_at) {
-      return undefined
-    }
-
-    return getFormatedDateTimeString({
-      date: new Date(this._algorithm.updated_at),
-    })
-  }
-
   get taskType(): string {
     return snakeCaseToSentenceCase(this._algorithm.task_type)
   }

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

@@ -25,8 +25,8 @@ export class CaptureDetails extends Capture {
     }
 
     return this._jobs.sort((j1: Job, j2: Job) => {
-      const date1 = new Date(j1.updatedAt as string)
-      const date2 = new Date(j2.updatedAt as string)
+      const date1 = j1.updatedAt as Date
+      const date2 = j2.updatedAt as Date
 
       return date2.getTime() - date1.getTime()
     })[0]

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

@@ -29,8 +29,8 @@ export class CaptureSet extends Entity {
     }
 
     return this._jobs.sort((j1: Job, j2: Job) => {
-      const date1 = new Date(j1.updatedAt as string)
-      const date2 = new Date(j2.updatedAt as string)
+      const date1 = j1.updatedAt as Date
+      const date2 = j2.updatedAt as Date
 
       return date2.getTime() - date1.getTime()
     })[0]

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

@@ -35,8 +35,8 @@ export class Deployment extends Entity {
     }
 
     return this._jobs.sort((j1: Job, j2: Job) => {
-      const date1 = new Date(j1.updatedAt as string)
-      const date2 = new Date(j2.updatedAt as string)
+      const date1 = j1.updatedAt as Date
+      const date2 = j2.updatedAt as Date
 
       return date2.getTime() - date1.getTime()
     })[0]

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

@@ -18,14 +18,12 @@ export class Entity {
     return this._data.user_permissions?.includes(UserPermission.Delete)
   }
 
-  get createdAt(): string | undefined {
+  get createdAt(): Date | undefined {
     if (!this._data.created_at) {
       return undefined
     }
 
-    return getFormatedDateTimeString({
-      date: new Date(this._data.created_at),
-    })
+    return new Date(this._data.created_at)
   }
 
   get description(): string | undefined {
@@ -40,14 +38,12 @@ export class Entity {
     return this._data.name
   }
 
-  get updatedAt(): string | undefined {
+  get updatedAt(): Date | undefined {
     if (!this._data.updated_at) {
       return undefined
     }
 
-    return getFormatedDateTimeString({
-      date: new Date(this._data.updated_at),
-    })
+    return new Date(this._data.updated_at)
   }
 
   get updatedAtDetailed(): string | undefined {

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

@@ -1,5 +1,5 @@
-import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { UserPermission } from 'utils/user/types'
+import { Entity } from './entity'
 import { Pipeline } from './pipeline'
 
 export const SERVER_JOB_STATUS_CODES = [
@@ -36,10 +36,12 @@ export enum JobStatusType {
   Neutral,
 }
 
-export class Job {
+export class Job extends Entity {
   protected readonly _job: ServerJob
 
   public constructor(job: ServerJob) {
+    super(job)
+
     this._job = job
   }
 
@@ -72,40 +74,24 @@ export class Job {
     )
   }
 
-  get createdAt(): string | undefined {
-    if (!this._job.created_at) {
-      return
-    }
-
-    return getFormatedDateTimeString({ date: new Date(this._job.created_at) })
-  }
-
   get export(): { id: string; format: string } | undefined {
     return this._job.data_export
   }
 
-  get finishedAt(): string | undefined {
+  get finishedAt(): Date | undefined {
     if (!this._job.finished_at) {
       return
     }
 
-    return getFormatedDateTimeString({ date: new Date(this._job.finished_at) })
-  }
-
-  get id(): string {
-    return `${this._job.id}`
+    return new Date(this._job.finished_at)
   }
 
-  get startedAt(): string | undefined {
+  get startedAt(): Date | undefined {
     if (!this._job.started_at) {
       return
     }
 
-    return getFormatedDateTimeString({ date: new Date(this._job.started_at) })
-  }
-
-  get name(): string {
-    return this._job.name
+    return new Date(this._job.started_at)
   }
 
   get pipeline(): Pipeline | undefined {
@@ -171,14 +157,6 @@ export class Job {
     )
   }
 
-  get updatedAt(): string | undefined {
-    if (!this._job.updated_at) {
-      return
-    }
-
-    return getFormatedDateTimeString({ date: new Date(this._job.updated_at) })
-  }
-
   static getJobTypeInfo(key: ServerJobType) {
     const label = {
       ml: 'ML pipeline',