From cac7bd35bc290cbd720919b703cea98b7341ab61 Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Tue, 24 Mar 2026 08:35:17 +0100 Subject: [PATCH 01/13] feat: present pipeline description in table view --- .../pages/project/pipelines/pipelines-columns.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/ui/src/pages/project/pipelines/pipelines-columns.tsx b/ui/src/pages/project/pipelines/pipelines-columns.tsx index eda9f6f58..c202f9b6a 100644 --- a/ui/src/pages/project/pipelines/pipelines-columns.tsx +++ b/ui/src/pages/project/pipelines/pipelines-columns.tsx @@ -31,6 +31,19 @@ export const columns: ( ), }, + { + id: 'description', + name: translate(STRING.FIELD_LABEL_DESCRIPTION), + renderCell: (item: Pipeline) => ( + + ), + }, { id: 'default', name: '', From ff90d7ffcfc75e1d76ec2830cbdc813294b50713 Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Tue, 24 Mar 2026 08:35:45 +0100 Subject: [PATCH 02/13] chore: skip algorithm category count in table view --- ui/src/pages/project/algorithms/algorithms-columns.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/ui/src/pages/project/algorithms/algorithms-columns.tsx b/ui/src/pages/project/algorithms/algorithms-columns.tsx index 711f5a523..5599dfbf2 100644 --- a/ui/src/pages/project/algorithms/algorithms-columns.tsx +++ b/ui/src/pages/project/algorithms/algorithms-columns.tsx @@ -32,14 +32,6 @@ export const columns: (projectId: string) => TableColumn[] = ( sortField: 'task_type', renderCell: (item: Algorithm) => , }, - { - id: 'category_count', - name: translate(STRING.FIELD_LABEL_CATEGORY_COUNT), - sortField: 'category_count', - renderCell: (item: Algorithm) => ( - - ), - }, { id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), From 4a13b50554b5195584c20466fca08a7e13d2bfd5 Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Tue, 24 Mar 2026 08:37:34 +0100 Subject: [PATCH 03/13] fix: adjust line break settings for long table descriptions --- .../table/basic-table-cell/basic-table-cell.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss b/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss index cff085c5d..6376c19da 100644 --- a/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss +++ b/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss @@ -8,6 +8,7 @@ display: block; @include paragraph-medium(); color: $color-neutral-700; + word-break: break-word; } .details { From fbaf13ee558495b384ffdb7b98947d25efaf3c72 Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Tue, 24 Mar 2026 09:26:48 +0100 Subject: [PATCH 04/13] refactor: streamline date handling in tables and code --- ui/src/data-services/models/algorithm.ts | 34 ++--------------- .../data-services/models/capture-details.ts | 4 +- ui/src/data-services/models/capture-set.ts | 4 +- ui/src/data-services/models/deployment.ts | 4 +- ui/src/data-services/models/entity.ts | 12 ++---- ui/src/data-services/models/job.ts | 38 ++++--------------- ui/src/data-services/models/occurrence.ts | 17 ++++----- ui/src/data-services/models/pipeline.ts | 33 ++-------------- .../models/processing-service.ts | 28 -------------- ui/src/data-services/models/session.ts | 17 ++++----- ui/src/data-services/models/species.ts | 16 ++++---- .../design-system/components/input/input.tsx | 27 +++++++++---- .../table/date-table-cell/date-table-cell.tsx | 20 ++++++++++ .../pages/deployments/deployment-columns.tsx | 5 ++- ui/src/pages/jobs/jobs-columns.tsx | 9 +++-- .../pages/occurrences/occurrence-columns.tsx | 5 ++- .../project/algorithms/algorithms-columns.tsx | 5 ++- .../capture-sets/capture-set-columns.tsx | 5 ++- .../project/entities/entities-columns.tsx | 5 ++- .../pages/project/exports/exports-columns.tsx | 5 ++- .../project/pipelines/pipelines-columns.tsx | 5 ++- .../processing-services-columns.tsx | 5 ++- .../pages/project/storage/storage-columns.tsx | 5 ++- ui/src/pages/project/team/team-columns.tsx | 25 ++---------- ui/src/pages/sessions/session-columns.tsx | 5 ++- ui/src/pages/species/species-columns.tsx | 5 ++- ui/src/pages/taxa-lists/taxa-list-columns.tsx | 5 ++- 27 files changed, 132 insertions(+), 216 deletions(-) create mode 100644 ui/src/design-system/components/table/date-table-cell/date-table-cell.tsx diff --git a/ui/src/data-services/models/algorithm.ts b/ui/src/data-services/models/algorithm.ts index 353cbd2c3..c36d507c4 100644 --- a/ui/src/data-services/models/algorithm.ts +++ b/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) } diff --git a/ui/src/data-services/models/capture-details.ts b/ui/src/data-services/models/capture-details.ts index c1c83c301..f71e98040 100644 --- a/ui/src/data-services/models/capture-details.ts +++ b/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] diff --git a/ui/src/data-services/models/capture-set.ts b/ui/src/data-services/models/capture-set.ts index 3605a0f9b..332abb42c 100644 --- a/ui/src/data-services/models/capture-set.ts +++ b/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] diff --git a/ui/src/data-services/models/deployment.ts b/ui/src/data-services/models/deployment.ts index 4e67293da..0426e3452 100644 --- a/ui/src/data-services/models/deployment.ts +++ b/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] diff --git a/ui/src/data-services/models/entity.ts b/ui/src/data-services/models/entity.ts index 9656518f2..8cd909174 100644 --- a/ui/src/data-services/models/entity.ts +++ b/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 { diff --git a/ui/src/data-services/models/job.ts b/ui/src/data-services/models/job.ts index 66302d43e..3e8b43022 100644 --- a/ui/src/data-services/models/job.ts +++ b/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', diff --git a/ui/src/data-services/models/occurrence.ts b/ui/src/data-services/models/occurrence.ts index 8482c5bc9..7e6f03219 100644 --- a/ui/src/data-services/models/occurrence.ts +++ b/ui/src/data-services/models/occurrence.ts @@ -1,5 +1,4 @@ import { getFormatedDateString } from 'utils/date/getFormatedDateString/getFormatedDateString' -import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString' import { UserPermission } from 'utils/user/types' import { Taxon } from './taxa' @@ -21,16 +20,16 @@ export class Occurrence { .map((src: string) => ({ src })) } - get createdAt(): string { - return getFormatedDateTimeString({ - date: new Date(this._occurrence.created_at), - }) + get createdAt(): Date { + return new Date(this._occurrence.created_at) } - get updatedAt(): string { - return getFormatedDateTimeString({ - date: new Date(this._occurrence.updated_at), - }) + get updatedAt(): Date | undefined { + if (!this._occurrence.updated_at) { + return undefined + } + + return new Date(this._occurrence.updated_at) } get dateLabel(): string { diff --git a/ui/src/data-services/models/pipeline.ts b/ui/src/data-services/models/pipeline.ts index 86fc0c755..56b99d8b2 100644 --- a/ui/src/data-services/models/pipeline.ts +++ b/ui/src/data-services/models/pipeline.ts @@ -1,5 +1,6 @@ import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { Algorithm, ServerAlgorithm } from './algorithm' +import { Entity } from './entity' import { ProcessingService } from './processing-service' export type ServerPipeline = any // TODO: Update this type @@ -12,11 +13,13 @@ export enum PipelineEnabledType { Enabled, Disabled, } -export class Pipeline { +export class Pipeline extends Entity { protected readonly _pipeline: ServerPipeline protected readonly _algorithms: Algorithm[] = [] public constructor(pipeline: ServerPipeline) { + super(pipeline) + this._pipeline = pipeline if (pipeline.algorithms) { @@ -30,28 +33,10 @@ export class Pipeline { return this._algorithms } - get createdAt(): string { - return getFormatedDateTimeString({ - date: new Date(this._pipeline.created_at), - }) - } - - get description(): string { - return this._pipeline.description - } - - get id(): string { - return `${this._pipeline.id}` - } - get slug(): string { return `${this._pipeline.slug}` } - get name(): string { - return this._pipeline.name - } - get stages(): { fields: { key: string; label: string; value?: string | number }[] name: string @@ -85,16 +70,6 @@ export class Pipeline { : `${this._pipeline.version}` } - get updatedAt(): string | undefined { - if (!this._pipeline.updated_at) { - return undefined - } - - return getFormatedDateTimeString({ - date: new Date(this._pipeline.updated_at), - }) - } - get currentProcessingService(): { online: boolean service?: ProcessingService diff --git a/ui/src/data-services/models/processing-service.ts b/ui/src/data-services/models/processing-service.ts index 4f92f9116..7f413a527 100644 --- a/ui/src/data-services/models/processing-service.ts +++ b/ui/src/data-services/models/processing-service.ts @@ -36,38 +36,10 @@ export class ProcessingService extends Entity { return this._pipelines } - get createdAt(): string { - return getFormatedDateTimeString({ - date: new Date(this._processingService.created_at), - }) - } - - get id(): string { - return `${this._processingService.id}` - } - - get name(): string { - return `${this._processingService.name}` - } - get endpointUrl(): string { return `${this._processingService.endpoint_url}` } - get description(): string { - return `${this._processingService.description}` - } - - get updatedAt(): string | undefined { - if (!this._processingService.updated_at) { - return undefined - } - - return getFormatedDateTimeString({ - date: new Date(this._processingService.updated_at), - }) - } - get lastChecked(): string | undefined { if (!this._processingService.last_checked) { return undefined diff --git a/ui/src/data-services/models/session.ts b/ui/src/data-services/models/session.ts index a23616b68..bf4eb26ec 100644 --- a/ui/src/data-services/models/session.ts +++ b/ui/src/data-services/models/session.ts @@ -1,7 +1,6 @@ import { getCompactDatespanString } from 'utils/date/getCompactDatespanString/getCompactDatespanString' import { getCompactTimespanString } from 'utils/date/getCompactTimespanString/getCompactTimespanString' import { getFormatedDateString } from 'utils/date/getFormatedDateString/getFormatedDateString' -import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString' export type ServerEvent = any // TODO: Update this type @@ -101,15 +100,15 @@ export class Session { }) } - get createdAt(): string { - return getFormatedDateTimeString({ - date: new Date(this._event.created_at), - }) + get createdAt(): Date { + return new Date(this._event.updated_at) } - get updatedAt(): string { - return getFormatedDateTimeString({ - date: new Date(this._event.updated_at), - }) + get updatedAt(): Date | undefined { + if (!this._event.updated_at) { + return undefined + } + + return new Date(this._event.updated_at) } } diff --git a/ui/src/data-services/models/species.ts b/ui/src/data-services/models/species.ts index 425f29e9f..082144af4 100644 --- a/ui/src/data-services/models/species.ts +++ b/ui/src/data-services/models/species.ts @@ -1,4 +1,3 @@ -import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { UserPermission } from 'utils/user/types' import { Taxon } from './taxa' @@ -37,10 +36,8 @@ export class Species extends Taxon { return this._species.cover_image_url || null } - get createdAt(): string { - return getFormatedDateTimeString({ - date: new Date(this._species.created_at), - }) + get createdAt(): Date { + return new Date(this._species.created_at) } get fieldguideId(): string | null { @@ -109,10 +106,11 @@ export class Species extends Taxon { return tags.sort((t1: Tag, t2: Tag) => t1.id - t2.id) } - get updatedAt(): string { - return getFormatedDateTimeString({ - date: new Date(this._species.updated_at), - }) + get updatedAt(): Date | undefined { + if (!this._species.updated_at) { + return undefined + } + return new Date(this._species.updated_at) } get userPermissions(): UserPermission[] { diff --git a/ui/src/design-system/components/input/input.tsx b/ui/src/design-system/components/input/input.tsx index a264f422f..ae0c26173 100644 --- a/ui/src/design-system/components/input/input.tsx +++ b/ui/src/design-system/components/input/input.tsx @@ -6,9 +6,11 @@ import { FocusEvent, forwardRef, ReactNode, + useMemo, useState, } from 'react' import { Link } from 'react-router-dom' +import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { STRING, translate } from 'utils/language' import { IconButton, IconButtonTheme } from '../icon-button/icon-button' import { IconType } from '../icon/icon' @@ -117,21 +119,30 @@ export const InputValue = ({ to, }: { label: string - value?: string | number + value?: string | number | Date to?: string }) => { - const valueLabel = - value === undefined || value === '' - ? translate(STRING.VALUE_NOT_AVAILABLE) - : _.isNumber(value) - ? value.toLocaleString() - : value + const valueLabel = useMemo(() => { + if (value === undefined || value === '') { + return translate(STRING.VALUE_NOT_AVAILABLE) + } + + if (_.isNumber(value)) { + return value.toLocaleString() + } + + if (_.isDate(value)) { + return getFormatedDateTimeString({ date: value }) + } + + return value + }, [value]) return ( {to ? ( - {value} + {valueLabel} ) : ( {valueLabel} diff --git a/ui/src/design-system/components/table/date-table-cell/date-table-cell.tsx b/ui/src/design-system/components/table/date-table-cell/date-table-cell.tsx new file mode 100644 index 000000000..beabc5014 --- /dev/null +++ b/ui/src/design-system/components/table/date-table-cell/date-table-cell.tsx @@ -0,0 +1,20 @@ +import { getFormatedDateString } from 'utils/date/getFormatedDateString/getFormatedDateString' +import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString' +import { BasicTableCell } from '../basic-table-cell/basic-table-cell' + +interface DateTableCellProps { + date?: Date +} + +export const DateTableCell = ({ date }: DateTableCellProps) => { + if (!date) { + return + } + + return ( + + ) +} diff --git a/ui/src/pages/deployments/deployment-columns.tsx b/ui/src/pages/deployments/deployment-columns.tsx index 627d8055d..449da3005 100644 --- a/ui/src/pages/deployments/deployment-columns.tsx +++ b/ui/src/pages/deployments/deployment-columns.tsx @@ -1,5 +1,6 @@ import { Deployment } from 'data-services/models/deployment' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { ImageTableCell } from 'design-system/components/table/image-table-cell/image-table-cell' import { StatusTableCell } from 'design-system/components/table/status-table-cell/status-table-cell' import { @@ -200,13 +201,13 @@ export const columns: (projectId: string) => TableColumn[] = ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: Deployment) => , + renderCell: (item: Deployment) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Deployment) => , + renderCell: (item: Deployment) => , }, { id: 'actions', diff --git a/ui/src/pages/jobs/jobs-columns.tsx b/ui/src/pages/jobs/jobs-columns.tsx index f46767a55..8a722d92f 100644 --- a/ui/src/pages/jobs/jobs-columns.tsx +++ b/ui/src/pages/jobs/jobs-columns.tsx @@ -1,5 +1,6 @@ import { Job } from 'data-services/models/job' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { StatusTableCell } from 'design-system/components/table/status-table-cell/status-table-cell' import { CellTheme, TableColumn } from 'design-system/components/table/types' import { CancelJob } from 'pages/job-details/job-actions/cancel-job' @@ -111,25 +112,25 @@ export const columns: (projectId: string) => TableColumn[] = ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: Job) => , + renderCell: (item: Job) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Job) => , + renderCell: (item: Job) => , }, { id: 'started-at', name: translate(STRING.FIELD_LABEL_STARTED_AT), sortField: 'started_at', - renderCell: (item: Job) => , + renderCell: (item: Job) => , }, { id: 'finished-at', name: translate(STRING.FIELD_LABEL_FINISHED_AT), sortField: 'finished_at', - renderCell: (item: Job) => , + renderCell: (item: Job) => , }, { id: 'actions', diff --git a/ui/src/pages/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx index fc98d9b1a..efd62fe98 100644 --- a/ui/src/pages/occurrences/occurrence-columns.tsx +++ b/ui/src/pages/occurrences/occurrence-columns.tsx @@ -1,6 +1,7 @@ import { DeterminationScore } from 'components/determination-score' import { Occurrence } from 'data-services/models/occurrence' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { ImageTableCell } from 'design-system/components/table/image-table-cell/image-table-cell' import { CellTheme, @@ -158,13 +159,13 @@ export const columns: ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: Occurrence) => , + renderCell: (item: Occurrence) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Occurrence) => , + renderCell: (item: Occurrence) => , }, ] diff --git a/ui/src/pages/project/algorithms/algorithms-columns.tsx b/ui/src/pages/project/algorithms/algorithms-columns.tsx index 5599dfbf2..c9d260bf0 100644 --- a/ui/src/pages/project/algorithms/algorithms-columns.tsx +++ b/ui/src/pages/project/algorithms/algorithms-columns.tsx @@ -1,5 +1,6 @@ import { Algorithm } from 'data-services/models/algorithm' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { CellTheme, TableColumn } from 'design-system/components/table/types' import { Link } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' @@ -36,12 +37,12 @@ export const columns: (projectId: string) => TableColumn[] = ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: Algorithm) => , + renderCell: (item: Algorithm) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Algorithm) => , + renderCell: (item: Algorithm) => , }, ] diff --git a/ui/src/pages/project/capture-sets/capture-set-columns.tsx b/ui/src/pages/project/capture-sets/capture-set-columns.tsx index faf9c8f14..9b8e6e3b7 100644 --- a/ui/src/pages/project/capture-sets/capture-set-columns.tsx +++ b/ui/src/pages/project/capture-sets/capture-set-columns.tsx @@ -1,6 +1,7 @@ import { API_ROUTES } from 'data-services/constants' import { CaptureSet } from 'data-services/models/capture-set' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { StatusTableCell } from 'design-system/components/table/status-table-cell/status-table-cell' import { CellTheme, @@ -145,13 +146,13 @@ export const columns: (projectId: string) => TableColumn[] = ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: CaptureSet) => , + renderCell: (item: CaptureSet) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: CaptureSet) => , + renderCell: (item: CaptureSet) => , }, { id: 'actions', diff --git a/ui/src/pages/project/entities/entities-columns.tsx b/ui/src/pages/project/entities/entities-columns.tsx index c4a0097a2..639fc4ab3 100644 --- a/ui/src/pages/project/entities/entities-columns.tsx +++ b/ui/src/pages/project/entities/entities-columns.tsx @@ -1,5 +1,6 @@ import { Entity } from 'data-services/models/entity' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { TableColumn } from 'design-system/components/table/types' import { STRING, translate } from 'utils/language' import { DeleteEntityDialog } from './delete-entity-dialog' @@ -39,13 +40,13 @@ export const columns: ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: Entity) => , + renderCell: (item: Entity) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Entity) => , + renderCell: (item: Entity) => , }, { id: 'actions', diff --git a/ui/src/pages/project/exports/exports-columns.tsx b/ui/src/pages/project/exports/exports-columns.tsx index 0dff2300e..e93244ffd 100644 --- a/ui/src/pages/project/exports/exports-columns.tsx +++ b/ui/src/pages/project/exports/exports-columns.tsx @@ -4,6 +4,7 @@ import { Export } from 'data-services/models/export' import { JobStatusType } from 'data-services/models/job' import { StatusBar } from 'design-system/components/status/status-bar' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { CellTheme, TableColumn, @@ -76,13 +77,13 @@ export const columns: (projectId: string) => TableColumn[] = ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: Export) => , + renderCell: (item: Export) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Export) => , + renderCell: (item: Export) => , }, { id: 'actions', diff --git a/ui/src/pages/project/pipelines/pipelines-columns.tsx b/ui/src/pages/project/pipelines/pipelines-columns.tsx index c202f9b6a..58f0abbdb 100644 --- a/ui/src/pages/project/pipelines/pipelines-columns.tsx +++ b/ui/src/pages/project/pipelines/pipelines-columns.tsx @@ -1,5 +1,6 @@ import { Pipeline } from 'data-services/models/pipeline' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { CellTheme, TableColumn } from 'design-system/components/table/types' import { Link } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' @@ -76,12 +77,12 @@ export const columns: ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: Pipeline) => , + renderCell: (item: Pipeline) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Pipeline) => , + renderCell: (item: Pipeline) => , }, ] diff --git a/ui/src/pages/project/processing-services/processing-services-columns.tsx b/ui/src/pages/project/processing-services/processing-services-columns.tsx index 9c5331a5e..c33e6e40c 100644 --- a/ui/src/pages/project/processing-services/processing-services-columns.tsx +++ b/ui/src/pages/project/processing-services/processing-services-columns.tsx @@ -1,6 +1,7 @@ import { API_ROUTES } from 'data-services/constants' import { ProcessingService } from 'data-services/models/processing-service' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { StatusTableCell } from 'design-system/components/table/status-table-cell/status-table-cell' import { CellTheme, TableColumn } from 'design-system/components/table/types' import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog' @@ -71,7 +72,7 @@ export const columns: ( name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', renderCell: (item: ProcessingService) => ( - + ), }, { @@ -79,7 +80,7 @@ export const columns: ( name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', renderCell: (item: ProcessingService) => ( - + ), }, { diff --git a/ui/src/pages/project/storage/storage-columns.tsx b/ui/src/pages/project/storage/storage-columns.tsx index 08bebc0fc..fd8cf7935 100644 --- a/ui/src/pages/project/storage/storage-columns.tsx +++ b/ui/src/pages/project/storage/storage-columns.tsx @@ -1,6 +1,7 @@ import { API_ROUTES } from 'data-services/constants' import { StorageSource } from 'data-services/models/storage' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { TableColumn, TextAlign } from 'design-system/components/table/types' import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog' import { UpdateEntityDialog } from 'pages/project/entities/entity-details-dialog' @@ -54,7 +55,7 @@ export const columns: ( name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', renderCell: (item: StorageSource) => ( - + ), }, { @@ -62,7 +63,7 @@ export const columns: ( name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', renderCell: (item: StorageSource) => ( - + ), }, { diff --git a/ui/src/pages/project/team/team-columns.tsx b/ui/src/pages/project/team/team-columns.tsx index 3bd76f049..8dbf045cd 100644 --- a/ui/src/pages/project/team/team-columns.tsx +++ b/ui/src/pages/project/team/team-columns.tsx @@ -1,12 +1,11 @@ import { Member } from 'data-services/models/member' import { Badge } from 'design-system/components/badge/badge' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { TableColumn } from 'design-system/components/table/types' import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' import { InfoIcon, UserIcon } from 'lucide-react' import { Button } from 'nova-ui-kit' -import { getFormatedDateString } from 'utils/date/getFormatedDateString/getFormatedDateString' -import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString' import { STRING, translate } from 'utils/language' import { LeaveTeamDialog } from './leave-team-dialog' import { ManageAccessDialog } from './manage-access-dialog' @@ -70,31 +69,13 @@ export const columns: (userId?: string) => TableColumn[] = ( id: 'added-at', name: translate(STRING.FIELD_LABEL_ADDED_AT), sortField: 'created_at', - renderCell: (item: Member) => ( - - ), + renderCell: (item: Member) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Member) => ( - - ), + renderCell: (item: Member) => , }, { id: 'actions', diff --git a/ui/src/pages/sessions/session-columns.tsx b/ui/src/pages/sessions/session-columns.tsx index c6a965a7d..f64a47f88 100644 --- a/ui/src/pages/sessions/session-columns.tsx +++ b/ui/src/pages/sessions/session-columns.tsx @@ -1,5 +1,6 @@ import { Session } from 'data-services/models/session' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { ImageTableCell } from 'design-system/components/table/image-table-cell/image-table-cell' import { CellTheme, @@ -138,12 +139,12 @@ export const columns: (projectId: string) => TableColumn[] = ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: Session) => , + renderCell: (item: Session) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Session) => , + renderCell: (item: Session) => , }, ] diff --git a/ui/src/pages/species/species-columns.tsx b/ui/src/pages/species/species-columns.tsx index 86ccd7036..0e0a7cfa3 100644 --- a/ui/src/pages/species/species-columns.tsx +++ b/ui/src/pages/species/species-columns.tsx @@ -2,6 +2,7 @@ import { DeterminationScore } from 'components/determination-score' import { Tag } from 'components/taxon-tags/tag' import { Species } from 'data-services/models/species' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { ImageTableCell } from 'design-system/components/table/image-table-cell/image-table-cell' import { CellTheme, @@ -116,12 +117,12 @@ export const columns: (project: { id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: Species) => , + renderCell: (item: Species) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: Species) => , + renderCell: (item: Species) => , }, ] diff --git a/ui/src/pages/taxa-lists/taxa-list-columns.tsx b/ui/src/pages/taxa-lists/taxa-list-columns.tsx index 61ae7419d..4f9d7e618 100644 --- a/ui/src/pages/taxa-lists/taxa-list-columns.tsx +++ b/ui/src/pages/taxa-lists/taxa-list-columns.tsx @@ -1,6 +1,7 @@ import { API_ROUTES } from 'data-services/constants' import { TaxaList } from 'data-services/models/taxa-list' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' +import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' import { CellTheme, TableColumn, @@ -64,13 +65,13 @@ export const columns: (projectId: string) => TableColumn[] = ( id: 'created-at', name: translate(STRING.FIELD_LABEL_CREATED_AT), sortField: 'created_at', - renderCell: (item: TaxaList) => , + renderCell: (item: TaxaList) => , }, { id: 'updated-at', name: translate(STRING.FIELD_LABEL_UPDATED_AT), sortField: 'updated_at', - renderCell: (item: TaxaList) => , + renderCell: (item: TaxaList) => , }, { id: 'actions', From 6b8cd183b9db1c0630cec1e46c1dface6e3fa584 Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Tue, 24 Mar 2026 09:32:15 +0100 Subject: [PATCH 05/13] style: update column settings icon and tooltip --- ui/package.json | 2 +- .../table/column-settings/column-settings.tsx | 6 +++--- ui/yarn.lock | 12 ++++++------ 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/ui/package.json b/ui/package.json index 721d2b5d1..c7db5adae 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/design-system/components/table/column-settings/column-settings.tsx b/ui/src/design-system/components/table/column-settings/column-settings.tsx index 3256879c1..dc5ad9d31 100644 --- a/ui/src/design-system/components/table/column-settings/column-settings.tsx +++ b/ui/src/design-system/components/table/column-settings/column-settings.tsx @@ -1,6 +1,6 @@ import { Checkbox } from 'design-system/components/checkbox/checkbox' import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' -import { SettingsIcon } from 'lucide-react' +import { Columns3CogIcon } from 'lucide-react' import { Button, Popover } from 'nova-ui-kit' import { STRING, translate } from 'utils/language' import styles from './column-settings.module.scss' @@ -17,10 +17,10 @@ export const ColumnSettings = ({ onColumnSettingsChange, }: ColumnSettingsProps) => ( - + diff --git a/ui/yarn.lock b/ui/yarn.lock index 292f08a76..511a2b742 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -5117,7 +5117,7 @@ __metadata: jest-environment-jsdom: "npm:^29.7.0" leaflet: "npm:^1.9.3" lodash: "npm:^4.17.21" - lucide-react: "npm:^0.454.0" + lucide-react: "npm:^1.0.1" nova-ui-kit: "npm:^1.1.33" plotly.js: "npm:^2.25.2" postcss: "npm:^8.4.47" @@ -9662,12 +9662,12 @@ __metadata: languageName: node linkType: hard -"lucide-react@npm:^0.454.0": - version: 0.454.0 - resolution: "lucide-react@npm:0.454.0" +"lucide-react@npm:^1.0.1": + version: 1.0.1 + resolution: "lucide-react@npm:1.0.1" peerDependencies: - react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc - checksum: e5eebe542e32f0c2210a702fddbbe6e37b977dc7d8ff991b7fd5e886f96adf2ac4870275b618c79d6b2f611da1bfb8696062c5138b06ee728090309b8e27ca07 + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + checksum: dc5834ef128bbdb9f7d1c6b8cc37b70807203b3dcb91977d3dfa28cbe995c7a0f099689e4191625292238fd18a5f815883d829bef26f318c35b79b336413862a languageName: node linkType: hard From 7c426ef57748c588fc55fa17373be5c257abcf26 Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Tue, 24 Mar 2026 10:52:53 +0100 Subject: [PATCH 06/13] fix: adjust quick actions popover position and error handling --- .../id-quick-actions/id-button.tsx | 29 ++++++++++++++----- .../id-quick-actions/id-quick-actions.tsx | 6 ++-- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/ui/src/pages/occurrence-details/id-quick-actions/id-button.tsx b/ui/src/pages/occurrence-details/id-quick-actions/id-button.tsx index a2215f4ef..29ac210f9 100644 --- a/ui/src/pages/occurrence-details/id-quick-actions/id-button.tsx +++ b/ui/src/pages/occurrence-details/id-quick-actions/id-button.tsx @@ -1,10 +1,11 @@ +import classNames from 'classnames' import { IdentificationFieldValues } from 'data-services/hooks/identifications/types' import { useCreateIdentifications } from 'data-services/hooks/identifications/useCreateIdentifications' -import { Button, ButtonTheme } from 'design-system/components/button/button' import { IconType } from 'design-system/components/icon/icon' import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' +import { AlertCircleIcon, CheckIcon, Loader2Icon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { useMemo } from 'react' -import styles from './id-quick-actions.module.scss' import { useRecentIdentifications } from './useRecentOptions' interface IdButtonProps { @@ -34,22 +35,34 @@ export const IdButton = ({ const { addRecentIdentification } = useRecentIdentifications() return ( - + ) } diff --git a/ui/src/pages/occurrence-details/id-quick-actions/id-quick-actions.tsx b/ui/src/pages/occurrence-details/id-quick-actions/id-quick-actions.tsx index 407a8c231..511d736fc 100644 --- a/ui/src/pages/occurrence-details/id-quick-actions/id-quick-actions.tsx +++ b/ui/src/pages/occurrence-details/id-quick-actions/id-quick-actions.tsx @@ -68,12 +68,12 @@ export const IdQuickActions = ({
{sections.map((section, index) => ( From 4af6d2c1fb13783d3b48aad87262c487cd2cd221 Mon Sep 17 00:00:00 2001 From: Anna Viklund Date: Tue, 24 Mar 2026 11:45:59 +0100 Subject: [PATCH 07/13] chore: use button component from UI kit everywhere --- .../cookie-dialog/cookie-dialog.module.scss | 2 +- .../cookie-dialog/cookie-dialog.tsx | 39 ++++--- .../filtering/default-filter-control.tsx | 22 ++-- .../terms-of-service-info.tsx | 17 ++- .../components/button/button.module.scss | 76 ------------ .../components/button/button.tsx | 86 -------------- .../combo-box-simple/combo-box-simple.tsx | 9 +- .../icon-button/icon-button.module.scss | 66 ----------- .../components/icon-button/icon-button.tsx | 109 ------------------ .../image-carousel/image-carousel.tsx | 29 +++-- .../design-system/components/input/input.tsx | 48 +++++--- .../page-button/page-button.tsx | 13 ++- .../pagination-bar/pagination-bar.tsx | 24 ++-- .../components/popover/popover.module.scss | 2 +- .../components/popover/popover.tsx | 10 +- ui/src/pages/auth/login.tsx | 23 ++-- ui/src/pages/auth/reset-password.tsx | 15 +-- ui/src/pages/auth/sign-up.tsx | 28 +++-- .../select-images-section.tsx | 29 ++--- .../delete-deployment-dialog.tsx | 34 ------ .../deployment-details-form.tsx | 20 ++-- .../section-general/section-general.tsx | 10 +- .../location-map/location-map.tsx | 35 ++---- .../section-location/section-location.tsx | 14 +-- .../actions/sync-source-images.tsx | 23 ++-- .../section-source-images.tsx | 6 +- .../deployment-details-info.tsx | 6 +- .../pages/deployments/deployment-columns.tsx | 11 +- .../job-details/job-actions/cancel-job.tsx | 24 ++-- .../job-details/job-actions/queue-job.tsx | 29 +++-- .../job-details/job-actions/retry-job.tsx | 29 +++-- ui/src/pages/job-details/job-details.tsx | 4 - ui/src/pages/jobs/delete-jobs-dialog.tsx | 40 ------- ui/src/pages/jobs/jobs-columns.tsx | 11 +- ui/src/pages/jobs/jobs.tsx | 1 - .../pages/occurrences/occurrence-columns.tsx | 2 +- .../pages/occurrences/occurrence-gallery.tsx | 2 +- .../details-form/export-details-form.tsx | 11 +- .../capture-navigation/capture-navigation.tsx | 30 +++-- .../session-details/playback/playback.tsx | 8 +- ui/src/utils/constants.ts | 2 +- 41 files changed, 299 insertions(+), 700 deletions(-) delete mode 100644 ui/src/design-system/components/button/button.module.scss delete mode 100644 ui/src/design-system/components/button/button.tsx delete mode 100644 ui/src/design-system/components/icon-button/icon-button.module.scss delete mode 100644 ui/src/design-system/components/icon-button/icon-button.tsx delete mode 100644 ui/src/pages/deployment-details/delete-deployment-dialog.tsx delete mode 100644 ui/src/pages/jobs/delete-jobs-dialog.tsx diff --git a/ui/src/components/cookie-dialog/cookie-dialog.module.scss b/ui/src/components/cookie-dialog/cookie-dialog.module.scss index 5d670f1fe..cc42db79c 100644 --- a/ui/src/components/cookie-dialog/cookie-dialog.module.scss +++ b/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) { diff --git a/ui/src/components/cookie-dialog/cookie-dialog.tsx b/ui/src/components/cookie-dialog/cookie-dialog.tsx index 483eb8173..57210855f 100644 --- a/ui/src/components/cookie-dialog/cookie-dialog.tsx +++ b/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,11 +56,13 @@ const IntroContent = ({
) @@ -135,14 +143,19 @@ const SetCookiesContent = ({
) diff --git a/ui/src/components/filtering/default-filter-control.tsx b/ui/src/components/filtering/default-filter-control.tsx index 73a3ecc81..388e7382b 100644 --- a/ui/src/components/filtering/default-filter-control.tsx +++ b/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 }) => ( - + { Terms of Service.

- setUserPreferences({ ...userPreferences, termsMessageSeen: true }) } - /> + size="icon" + variant="ghost" + > + +
) diff --git a/ui/src/design-system/components/button/button.module.scss b/ui/src/design-system/components/button/button.module.scss deleted file mode 100644 index 3821ce6c3..000000000 --- a/ui/src/design-system/components/button/button.module.scss +++ /dev/null @@ -1,76 +0,0 @@ -@import 'src/design-system/variables/colors.scss'; -@import 'src/design-system/variables/typography.scss'; - -.button { - display: flex; - align-items: center; - justify-content: center; - gap: 6px; - height: 28px; - padding: 0 16px; - border-radius: 8px; - @include paragraph-x-small(); - font-weight: 600; - border: 1px solid $color-neutral-100; - outline: none; - background-color: $color-generic-white; - color: $color-primary-1-600; - box-sizing: border-box; - white-space: nowrap; - - &.success { - background-color: $color-success-500; - color: $color-generic-white; - border-color: $color-success-500; - } - - &.plain { - background-color: transparent; - border-color: transparent; - } - - &.neutral { - background-color: $color-neutral-600; - color: $color-generic-white; - border-color: $color-neutral-600; - } - - &.destructive { - background-color: $color-destructive-500; - color: $color-generic-white; - border-color: $color-destructive-500; - } - - &.error { - color: $color-destructive-600; - } - - &:not(.disabled) { - &:hover { - cursor: pointer; - opacity: 0.7; - } - } - - &.disabled { - opacity: 0.5; - } - - &:focus-visible { - box-shadow: 0 0 0 2px $color-generic-black; - } -} - -.label { - padding-top: 2px; -} - -.details { - padding-top: 2px; - @include paragraph-xx-small(); - color: $color-neutral-300; - font-weight: 600; - flex-grow: 1; - text-align: right; - margin-left: 8px; -} diff --git a/ui/src/design-system/components/button/button.tsx b/ui/src/design-system/components/button/button.tsx deleted file mode 100644 index b22eb47bd..000000000 --- a/ui/src/design-system/components/button/button.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import classNames from 'classnames' -import { forwardRef, MouseEvent } from 'react' -import { Icon, IconTheme, IconType } from '../icon/icon' -import styles from './button.module.scss' - -export enum ButtonTheme { - Default = 'default', - Success = 'success', - Plain = 'plain', - Neutral = 'neutral', - Destructive = 'destructive', - Error = 'error', -} - -interface ButtonProps { - customClass?: string - details?: string - disabled?: boolean - icon?: IconType - label: string - loading?: boolean - theme?: ButtonTheme - type?: 'submit' | 'button' - onClick?: (e: MouseEvent) => void -} - -export const Button = forwardRef( - ({ ...props }, forwardedRef) => { - const { - customClass, - details, - disabled, - icon, - label, - loading, - theme = ButtonTheme.Default, - type = 'button', - onClick, - ...rest - } = props - - const iconTheme = (() => { - switch (theme) { - case ButtonTheme.Success: - case ButtonTheme.Neutral: - case ButtonTheme.Destructive: - return IconTheme.Light - case ButtonTheme.Error: - return IconTheme.Error - default: - return IconTheme.Primary - } - })() - - return ( - - ) - } -) diff --git a/ui/src/design-system/components/combo-box/combo-box-simple/combo-box-simple.tsx b/ui/src/design-system/components/combo-box/combo-box-simple/combo-box-simple.tsx index 4e0462560..3dc53af79 100644 --- a/ui/src/design-system/components/combo-box/combo-box-simple/combo-box-simple.tsx +++ b/ui/src/design-system/components/combo-box/combo-box-simple/combo-box-simple.tsx @@ -2,9 +2,9 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import classNames from 'classnames' import { Command } from 'cmdk' import { LoadingSpinner } from 'design-system/components/loading-spinner/loading-spinner' +import { SearchIcon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { useState } from 'react' -import { Button } from '../../button/button' -import { IconType } from '../../icon/icon' import styles from '../styles.module.scss' export const ComboBoxSimple = ({ @@ -32,7 +32,10 @@ export const ComboBoxSimple = ({ return ( - void -} - -export const IconButton = forwardRef( - ({ ...props }, forwardedRef) => { - const { - customClass, - disabled, - icon, - iconTransform, - loading, - shape = IconButtonShape.Square, - theme = IconButtonTheme.Default, - title, - onClick, - ...rest - } = props - - const iconTheme = (() => { - switch (theme) { - case IconButtonTheme.Default: - return IconTheme.Primary - case IconButtonTheme.Plain: - return IconTheme.Dark - case IconButtonTheme.Error: - return IconTheme.Error - default: - return IconTheme.Light - } - })() - - return ( - - ) - } -) diff --git a/ui/src/design-system/components/image-carousel/image-carousel.tsx b/ui/src/design-system/components/image-carousel/image-carousel.tsx index 1b7c8bd56..e6a9b1e9c 100644 --- a/ui/src/design-system/components/image-carousel/image-carousel.tsx +++ b/ui/src/design-system/components/image-carousel/image-carousel.tsx @@ -1,11 +1,8 @@ import classNames from 'classnames' import { LicenseInfo } from 'components/license-info/license-info' -import { - IconButton, - IconButtonShape, - IconButtonTheme, -} from 'design-system/components/icon-button/icon-button' import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' +import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { ReactNode, useEffect, useRef, useState } from 'react' import { Link } from 'react-router-dom' import { getTotalLabel } from 'utils/numberFormats' @@ -179,12 +176,13 @@ const MultiImageCarousel = ({ [styles.visible]: paused, })} > - showPrev(slideIndex)} - /> + size="icon" + variant="success" + > + +
- showNext(slideIndex)} - /> + size="icon" + variant="success" + > + +
diff --git a/ui/src/design-system/components/input/input.tsx b/ui/src/design-system/components/input/input.tsx index ae0c26173..0aad04cc9 100644 --- a/ui/src/design-system/components/input/input.tsx +++ b/ui/src/design-system/components/input/input.tsx @@ -1,5 +1,7 @@ import classNames from 'classnames' import _ from 'lodash' +import { CheckIcon, EyeIcon, PenIcon, XIcon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { ChangeEvent, CSSProperties, @@ -12,8 +14,6 @@ import { import { Link } from 'react-router-dom' import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { STRING, translate } from 'utils/language' -import { IconButton, IconButtonTheme } from '../icon-button/icon-button' -import { IconType } from '../icon/icon' import { BasicTooltip } from '../tooltip/basic-tooltip' import styles from './input.module.scss' @@ -92,13 +92,16 @@ export const Input = forwardRef( asChild content={`${type === 'password' ? 'Show' : 'Hide'} password`} > - setType(type === 'password' ? 'text' : 'password') } - /> + size="icon" + type="button" + variant="ghost" + > + + ) : null} @@ -196,8 +199,7 @@ export const LockedInput = ({ }) => (
- { if (editing) { setEditing(false) @@ -206,15 +208,28 @@ export const LockedInput = ({ setEditing(true) } }} - /> + size="icon" + type="button" + variant="ghost" + > + {editing ? ( + + ) : ( + + )} + {editing && ( - { setEditing(false) onSubmit() }} - /> + size="icon" + type="button" + variant="ghost" + > + + )}
@@ -234,7 +249,14 @@ export const EditableInput = ({
{!editing && ( - onEdit()} /> + )}
{children} diff --git a/ui/src/design-system/components/pagination-bar/page-button/page-button.tsx b/ui/src/design-system/components/pagination-bar/page-button/page-button.tsx index 071e82b56..2495d6525 100644 --- a/ui/src/design-system/components/pagination-bar/page-button/page-button.tsx +++ b/ui/src/design-system/components/pagination-bar/page-button/page-button.tsx @@ -1,5 +1,4 @@ -import { Button, ButtonTheme } from '../../button/button' -import styles from './page-button.module.scss' +import { Button } from 'nova-ui-kit' interface PageButtonProps { page: number @@ -9,10 +8,12 @@ interface PageButtonProps { export const PageButton = ({ page, active, onClick }: PageButtonProps) => ( ) diff --git a/ui/src/design-system/components/pagination-bar/pagination-bar.tsx b/ui/src/design-system/components/pagination-bar/pagination-bar.tsx index 57e0ed320..8a3db4dbb 100644 --- a/ui/src/design-system/components/pagination-bar/pagination-bar.tsx +++ b/ui/src/design-system/components/pagination-bar/pagination-bar.tsx @@ -1,5 +1,5 @@ -import { IconButton, IconButtonShape } from '../icon-button/icon-button' -import { IconType } from '../icon/icon' +import { ChevronLeft, ChevronRight } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { getPageWindow } from './getPageWindow' import { InfoLabel } from './info-label/info-label' import { PageButton } from './page-button/page-button' @@ -38,12 +38,14 @@ export const PaginationBar = ({
- setPage(currentPage - 1)} - /> + size="icon" + variant="outline" + > + +
{!pageWindow.includes(firstPage) && ( <> @@ -70,12 +72,14 @@ export const PaginationBar = ({ )}
- = lastPage} - icon={IconType.ToggleRight} - shape={IconButtonShape.RoundLarge} onClick={() => setPage(currentPage + 1)} - /> + size="icon" + variant="outline" + > + +
) diff --git a/ui/src/design-system/components/popover/popover.module.scss b/ui/src/design-system/components/popover/popover.module.scss index 4324e87d7..5c7ab17c2 100644 --- a/ui/src/design-system/components/popover/popover.module.scss +++ b/ui/src/design-system/components/popover/popover.module.scss @@ -6,7 +6,7 @@ background-color: $color-generic-white; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); outline: none; - z-index: 3; + z-index: 50; } .popoverClose { diff --git a/ui/src/design-system/components/popover/popover.tsx b/ui/src/design-system/components/popover/popover.tsx index 0c0acfc2f..2192afe36 100644 --- a/ui/src/design-system/components/popover/popover.tsx +++ b/ui/src/design-system/components/popover/popover.tsx @@ -1,5 +1,6 @@ import * as Popover from '@radix-ui/react-popover' -import { CSSProperties, ReactNode } from 'react' +import classNames from 'classnames' +import { ReactNode } from 'react' import { Icon, IconType } from '../icon/icon' import styles from './popover.module.scss' @@ -30,28 +31,27 @@ const Content = ({ align, ariaCloselabel, children, + className, container, disableOutsideClose, hideClose, side, - style, }: { align?: 'start' | 'center' | 'end' ariaCloselabel: string children: ReactNode + className?: string container?: HTMLElement disableOutsideClose?: boolean hideClose?: boolean side?: 'top' | 'right' | 'bottom' | 'left' - style?: CSSProperties }) => ( { if (disableOutsideClose) { diff --git a/ui/src/pages/auth/login.tsx b/ui/src/pages/auth/login.tsx index 17e69ebc3..352639a72 100644 --- a/ui/src/pages/auth/login.tsx +++ b/ui/src/pages/auth/login.tsx @@ -7,7 +7,7 @@ import { Loader2Icon } from 'lucide-react' import { Button, buttonVariants } from 'nova-ui-kit' import { useForm } from 'react-hook-form' import { Link, useLocation, useNavigate } from 'react-router-dom' -import { APP_ROUTES, LANDING_PAGE_WAITLIST_URL } from 'utils/constants' +import { APP_ROUTES, LANDING_PAGE_CONTACT_URL } from 'utils/constants' import { STRING, translate } from 'utils/language' import { useFormError } from 'utils/useFormError' import { usePageBreadcrumb } from 'utils/usePageBreadcrumb' @@ -40,7 +40,6 @@ export const Login = () => { onSuccess: () => navigate(state?.to ?? APP_ROUTES.HOME), }) const { - getValues, control, handleSubmit, setError: setFieldError, @@ -83,18 +82,6 @@ export const Login = () => { )}
-

- {translate(STRING.FORGOT_PASSWORD)}{' '} - - {translate(STRING.RESET)} - -

-

- {translate(STRING.OR).toUpperCase()} -

{ {translate(STRING.VIEW_PUBLIC_PROJECTS)} - {translate(STRING.SIGN_UP)} + Get in touch { />
+

+ {translate(STRING.FORGOT_PASSWORD)} Please reach out and we will help + you. +

) } diff --git a/ui/src/pages/auth/reset-password.tsx b/ui/src/pages/auth/reset-password.tsx index e1ea4944f..37aa7d85e 100644 --- a/ui/src/pages/auth/reset-password.tsx +++ b/ui/src/pages/auth/reset-password.tsx @@ -2,7 +2,8 @@ import classNames from 'classnames' import { FormField } from 'components/form/form-field' import { FormConfig } from 'components/form/types' import { useResetPassword } from 'data-services/hooks/auth/useResetPassword' -import { Button, ButtonTheme } from 'design-system/components/button/button' +import { Loader2Icon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { useState } from 'react' import { useForm } from 'react-hook-form' import { Link, useLocation } from 'react-router-dom' @@ -68,12 +69,12 @@ export const ResetPassword = () => { config={config} control={control} /> - )} {email && ( diff --git a/ui/src/pages/auth/sign-up.tsx b/ui/src/pages/auth/sign-up.tsx index a249695c9..b7e558f2a 100644 --- a/ui/src/pages/auth/sign-up.tsx +++ b/ui/src/pages/auth/sign-up.tsx @@ -2,11 +2,12 @@ import classNames from 'classnames' import { FormField } from 'components/form/form-field' import { FormConfig } from 'components/form/types' import { useSignUp } from 'data-services/hooks/auth/useSignUp' -import { Button, ButtonTheme } from 'design-system/components/button/button' import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' +import { Loader2Icon } from 'lucide-react' +import { Button, buttonVariants } from 'nova-ui-kit' import { useState } from 'react' import { useForm } from 'react-hook-form' -import { Link, useNavigate } from 'react-router-dom' +import { Link } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' import { STRING, translate } from 'utils/language' import { useFormError } from 'utils/useFormError' @@ -36,7 +37,6 @@ const config: FormConfig = { } export const SignUp = () => { - const navigate = useNavigate() const [signedUpEmail, setSignedUpEmail] = useState() const { control, @@ -77,12 +77,10 @@ export const SignUp = () => { config={config} control={control} /> - {errorMessage && (

{errorMessage} @@ -113,12 +111,12 @@ export const SignUp = () => {

{translate(STRING.OR).toUpperCase()}

-
) diff --git a/ui/src/pages/captures/upload-images-dialog/select-images-section/select-images-section.tsx b/ui/src/pages/captures/upload-images-dialog/select-images-section/select-images-section.tsx index 79990570b..f4abbcb1a 100644 --- a/ui/src/pages/captures/upload-images-dialog/select-images-section/select-images-section.tsx +++ b/ui/src/pages/captures/upload-images-dialog/select-images-section/select-images-section.tsx @@ -1,12 +1,8 @@ import { FormSection } from 'components/form/layout/layout' import { FileInput } from 'design-system/components/file-input/file-input' import { FileInputAccept } from 'design-system/components/file-input/types' -import { - IconButton, - IconButtonShape, - IconButtonTheme, -} from 'design-system/components/icon-button/icon-button' -import { IconType } from 'design-system/components/icon/icon' +import { PlusIcon, XIcon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { ReactNode } from 'react' import { API_MAX_UPLOAD_SIZE } from 'utils/constants' import { STRING, translate } from 'utils/language' @@ -50,15 +46,17 @@ export const SelectImagesSection = ({
- setImages( images.filter((image) => image.file.name !== file.name) ) } - /> + size="icon" + variant="outline" + > + +
))} @@ -69,13 +67,10 @@ export const SelectImagesSection = ({ accept={FileInputAccept.Images} multiple name="select-captures" - renderInput={(props) => ( - + renderInput={({ onClick }) => ( + )} onChange={(files) => { if (!files) { diff --git a/ui/src/pages/deployment-details/delete-deployment-dialog.tsx b/ui/src/pages/deployment-details/delete-deployment-dialog.tsx deleted file mode 100644 index de6a3a00c..000000000 --- a/ui/src/pages/deployment-details/delete-deployment-dialog.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import classNames from 'classnames' -import { DeleteForm } from 'components/form/delete-form/delete-form' -import { useDeleteDeployment } from 'data-services/hooks/deployments/useDeleteDeployment' -import * as Dialog from 'design-system/components/dialog/dialog' -import { IconButton } from 'design-system/components/icon-button/icon-button' -import { IconType } from 'design-system/components/icon/icon' -import { useState } from 'react' -import { STRING, translate } from 'utils/language' -import styles from './styles.module.scss' - -export const DeleteDeploymentDialog = ({ id }: { id: string }) => { - const [isOpen, setIsOpen] = useState(false) - const { deleteProject, isLoading, isSuccess, error } = useDeleteDeployment() - - return ( - - - - - -
- setIsOpen(false)} - onSubmit={() => deleteProject(id)} - /> -
- - - ) -} diff --git a/ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx b/ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx index 7b42ae7a3..e3af5bdad 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx @@ -3,9 +3,10 @@ import { DeploymentDetails, DeploymentFieldValues, } from 'data-services/models/deployment-details' -import { Button, ButtonTheme } from 'design-system/components/button/button' import * as Dialog from 'design-system/components/dialog/dialog' import { FormStepper as _FormStepper } from 'design-system/components/form-stepper/form-stepper' +import { Loader2Icon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { useCallback, useContext, useMemo } from 'react' import { FormContext, FormContextProvider } from 'utils/formContext/formContext' import { STRING, translate } from 'utils/language' @@ -65,10 +66,13 @@ export const DeploymentDetailsForm = ({
@@ -121,11 +125,13 @@ const SaveButton = ({ return ( ) } diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx index 5de361203..ca1170cad 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx @@ -10,11 +10,11 @@ import { DeploymentDetails, DeploymentFieldValues, } from 'data-services/models/deployment-details' -import { Button, ButtonTheme } from 'design-system/components/button/button' import { ImageUpload } from 'design-system/components/image-upload/image-upload' import { InputContent } from 'design-system/components/input/input' import { EntityPicker } from 'design-system/components/select/entity-picker' import _ from 'lodash' +import { Button } from 'nova-ui-kit' import { useContext } from 'react' import { useForm } from 'react-hook-form' import { FormContext } from 'utils/formContext/formContext' @@ -127,11 +127,9 @@ export const SectionGeneral = ({ - ) diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-location/location-map/location-map.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-location/location-map/location-map.tsx index ef8cf8d23..dc9cde4a6 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/section-location/location-map/location-map.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/section-location/location-map/location-map.tsx @@ -1,6 +1,7 @@ -import { Button } from 'design-system/components/button/button' import { EditableMap } from 'design-system/map/editable-map/editable-map' import { Map, MarkerPosition } from 'design-system/map/types' +import { Loader2Icon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { useRef, useState } from 'react' import { STRING, translate } from 'utils/language' import { GeoSearch } from '../geo-search/geo-search' @@ -9,49 +10,37 @@ import styles from './location-map.module.scss' export const LocationMap = ({ center, markerPosition, - resetTo, + onMarkerPositionChange, }: { center: MarkerPosition markerPosition: MarkerPosition - resetTo?: MarkerPosition + onMarkerPositionChange: (markerPosition: MarkerPosition) => void }) => { const mapRef = useRef(null) const [loadingLocation, setLoadingLocation] = useState(false) - const resetDisabled = (() => { - if (!resetTo) { - return false - } - if (!resetTo.equals(markerPosition)) { - return false - } - return true - })() - return (
- + ) diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-source-images/actions/sync-source-images.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-source-images/actions/sync-source-images.tsx index 838442ccf..45af8551b 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/section-source-images/actions/sync-source-images.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/section-source-images/actions/sync-source-images.tsx @@ -1,8 +1,7 @@ import { useSyncDeploymentSourceImages } from 'data-services/hooks/deployments/useSyncDeploymentSourceImages' -import { Button, ButtonTheme } from 'design-system/components/button/button' -import { IconButton } from 'design-system/components/icon-button/icon-button' -import { IconType } from 'design-system/components/icon/icon' import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' +import { CheckIcon, EyeIcon, Loader2Icon } from 'lucide-react' +import { Button, buttonVariants } from 'nova-ui-kit' import { Link } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' import { getAppRoute } from 'utils/getAppRoute' @@ -24,19 +23,25 @@ export const SyncDeploymentSourceImages = ({ return (
{projectId && jobId && ( - + )} diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-source-images/section-source-images.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-source-images/section-source-images.tsx index 4be72f9b6..5c011c762 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/section-source-images/section-source-images.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/section-source-images/section-source-images.tsx @@ -10,10 +10,10 @@ import { DeploymentDetails, DeploymentFieldValues, } from 'data-services/models/deployment-details' -import { Button } from 'design-system/components/button/button' import { InputContent, InputValue } from 'design-system/components/input/input' import { EntityPicker } from 'design-system/components/select/entity-picker' import _ from 'lodash' +import { Button } from 'nova-ui-kit' import { ConnectionStatus } from 'pages/project/storage/connection-status' import { useContext, useState } from 'react' import { useForm } from 'react-hook-form' @@ -102,7 +102,9 @@ export const SectionSourceImages = ({ isConnected={isConnected} /> - ) diff --git a/ui/src/pages/deployment-details/deployment-details-info.tsx b/ui/src/pages/deployment-details/deployment-details-info.tsx index 7cd477082..e2dde0daf 100644 --- a/ui/src/pages/deployment-details/deployment-details-info.tsx +++ b/ui/src/pages/deployment-details/deployment-details-info.tsx @@ -1,11 +1,11 @@ import { FormRow, FormSection } from 'components/form/layout/layout' import { DeploymentDetails } from 'data-services/models/deployment-details' -import { Button } from 'design-system/components/button/button' import * as Dialog from 'design-system/components/dialog/dialog' import { ImageCarousel } from 'design-system/components/image-carousel/image-carousel' import { InputContent, InputValue } from 'design-system/components/input/input' import { MultiMarkerMap } from 'design-system/map/multi-marker-map/multi-marker-map' import { MarkerPosition } from 'design-system/map/types' +import { Button } from 'nova-ui-kit' import { useMemo } from 'react' import { STRING, translate } from 'utils/language' import styles from './styles.module.scss' @@ -33,7 +33,9 @@ export const DeploymentDetailsInfo = ({
{deployment.canUpdate ? ( - ) : null}
diff --git a/ui/src/pages/deployments/deployment-columns.tsx b/ui/src/pages/deployments/deployment-columns.tsx index 449da3005..d8ce0697b 100644 --- a/ui/src/pages/deployments/deployment-columns.tsx +++ b/ui/src/pages/deployments/deployment-columns.tsx @@ -1,3 +1,4 @@ +import { API_ROUTES } from 'data-services/constants' import { Deployment } from 'data-services/models/deployment' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' @@ -9,7 +10,7 @@ import { TableColumn, TextAlign, } from 'design-system/components/table/types' -import { DeleteDeploymentDialog } from 'pages/deployment-details/delete-deployment-dialog' +import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog' import { Link } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' import { getAppRoute } from 'utils/getAppRoute' @@ -218,7 +219,13 @@ export const columns: (projectId: string) => TableColumn[] = ( }, renderCell: (item: Deployment) => (
- {item.canDelete && } + {item.canDelete && ( + + )}
), }, diff --git a/ui/src/pages/job-details/job-actions/cancel-job.tsx b/ui/src/pages/job-details/job-actions/cancel-job.tsx index f8dd5cec3..7121aca07 100644 --- a/ui/src/pages/job-details/job-actions/cancel-job.tsx +++ b/ui/src/pages/job-details/job-actions/cancel-job.tsx @@ -1,22 +1,24 @@ import { useCancelJob } from 'data-services/hooks/jobs/useCancelJob' -import { Button } from 'design-system/components/button/button' -import { IconType } from 'design-system/components/icon/icon' +import { CheckIcon, Loader2Icon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { STRING, translate } from 'utils/language' export const CancelJob = ({ jobId }: { jobId: string }) => { const { cancelJob, isLoading, isSuccess } = useCancelJob() - if (isSuccess) { - return ( - ) } diff --git a/ui/src/pages/job-details/job-actions/queue-job.tsx b/ui/src/pages/job-details/job-actions/queue-job.tsx index ec0e706d2..acd581bc3 100644 --- a/ui/src/pages/job-details/job-actions/queue-job.tsx +++ b/ui/src/pages/job-details/job-actions/queue-job.tsx @@ -1,27 +1,24 @@ import { useQueueJob } from 'data-services/hooks/jobs/useQueueJob' -import { Button, ButtonTheme } from 'design-system/components/button/button' -import { IconType } from 'design-system/components/icon/icon' +import { CheckIcon, Loader2Icon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { STRING, translate } from 'utils/language' export const QueueJob = ({ jobId }: { jobId: string }) => { const { queueJob, isLoading, isSuccess } = useQueueJob() - if (isSuccess) { - return ( - ) } diff --git a/ui/src/pages/job-details/job-actions/retry-job.tsx b/ui/src/pages/job-details/job-actions/retry-job.tsx index 2fa76fcb2..bd8a3a2a6 100644 --- a/ui/src/pages/job-details/job-actions/retry-job.tsx +++ b/ui/src/pages/job-details/job-actions/retry-job.tsx @@ -1,27 +1,24 @@ import { useRetryJob } from 'data-services/hooks/jobs/useRetryJob' -import { Button, ButtonTheme } from 'design-system/components/button/button' -import { IconType } from 'design-system/components/icon/icon' +import { CheckIcon, Loader2Icon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { STRING, translate } from 'utils/language' export const RetryJob = ({ jobId }: { jobId: string }) => { const { retryJob, isLoading, isSuccess } = useRetryJob() - if (isSuccess) { - return ( - ) } diff --git a/ui/src/pages/job-details/job-details.tsx b/ui/src/pages/job-details/job-details.tsx index e2664772e..962c44807 100644 --- a/ui/src/pages/job-details/job-details.tsx +++ b/ui/src/pages/job-details/job-details.tsx @@ -13,7 +13,6 @@ import { } from 'design-system/components/wizard/status-bullet/status-bullet' import * as Wizard from 'design-system/components/wizard/wizard' import { CodeBlock } from 'nova-ui-kit' -import { DeleteJobsDialog } from 'pages/jobs/delete-jobs-dialog' import { useState } from 'react' import { useParams } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' @@ -29,12 +28,10 @@ export const JobDetails = ({ job, title, isFetching, - onDelete, }: { job: Job title: string isFetching?: boolean - onDelete: () => void }) => ( <> @@ -45,7 +42,6 @@ export const JobDetails = ({ {job.canQueue && } {job.canCancel && } {job.canRetry && } - {job.canDelete && }
diff --git a/ui/src/pages/jobs/delete-jobs-dialog.tsx b/ui/src/pages/jobs/delete-jobs-dialog.tsx deleted file mode 100644 index d09bb505a..000000000 --- a/ui/src/pages/jobs/delete-jobs-dialog.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import classNames from 'classnames' -import { DeleteForm } from 'components/form/delete-form/delete-form' -import { useDeleteJob } from 'data-services/hooks/jobs/useDeleteJob' -import * as Dialog from 'design-system/components/dialog/dialog' -import { IconButton } from 'design-system/components/icon-button/icon-button' -import { IconType } from 'design-system/components/icon/icon' -import { useState } from 'react' -import { STRING, translate } from 'utils/language' -import styles from './jobs.module.scss' - -export const DeleteJobsDialog = ({ - id, - onDelete, -}: { - id: string - onDelete?: () => void -}) => { - const [isOpen, setIsOpen] = useState(false) - const { deleteJob, isLoading, isSuccess, error } = useDeleteJob(onDelete) - - return ( - - - - - -
- setIsOpen(false)} - onSubmit={() => deleteJob(id)} - /> -
- - - ) -} diff --git a/ui/src/pages/jobs/jobs-columns.tsx b/ui/src/pages/jobs/jobs-columns.tsx index 8a722d92f..c79363286 100644 --- a/ui/src/pages/jobs/jobs-columns.tsx +++ b/ui/src/pages/jobs/jobs-columns.tsx @@ -1,3 +1,4 @@ +import { API_ROUTES } from 'data-services/constants' import { Job } from 'data-services/models/job' import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell' import { DateTableCell } from 'design-system/components/table/date-table-cell/date-table-cell' @@ -5,11 +6,11 @@ import { StatusTableCell } from 'design-system/components/table/status-table-cel import { CellTheme, TableColumn } from 'design-system/components/table/types' import { CancelJob } from 'pages/job-details/job-actions/cancel-job' import { QueueJob } from 'pages/job-details/job-actions/queue-job' +import { DeleteEntityDialog } from 'pages/project/entities/delete-entity-dialog' import { Link } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' import { getAppRoute } from 'utils/getAppRoute' import { STRING, translate } from 'utils/language' -import { DeleteJobsDialog } from './delete-jobs-dialog' import styles from './jobs.module.scss' export const columns: (projectId: string) => TableColumn[] = ( @@ -143,7 +144,13 @@ export const columns: (projectId: string) => TableColumn[] = (
{item.canQueue && } {item.canCancel && } - {item.canDelete && } + {item.canDelete && ( + + )}
), }, diff --git a/ui/src/pages/jobs/jobs.tsx b/ui/src/pages/jobs/jobs.tsx index 7ed8f5663..60871540d 100644 --- a/ui/src/pages/jobs/jobs.tsx +++ b/ui/src/pages/jobs/jobs.tsx @@ -141,7 +141,6 @@ const JobDetailsDialog = ({ id }: { id: string }) => { type: _.capitalize(translate(STRING.ENTITY_TYPE_JOB)), })} isFetching={isFetching} - onDelete={closeDialog} /> ) : null} diff --git a/ui/src/pages/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx index efd62fe98..16bd08e29 100644 --- a/ui/src/pages/occurrences/occurrence-columns.tsx +++ b/ui/src/pages/occurrences/occurrence-columns.tsx @@ -215,7 +215,7 @@ const TaxonCell = ({
)} diff --git a/ui/src/pages/occurrences/occurrence-gallery.tsx b/ui/src/pages/occurrences/occurrence-gallery.tsx index 88c954631..5b10d11f9 100644 --- a/ui/src/pages/occurrences/occurrence-gallery.tsx +++ b/ui/src/pages/occurrences/occurrence-gallery.tsx @@ -198,7 +198,7 @@ export const OccurrenceGallery = ({ )} diff --git a/ui/src/pages/project/entities/details-form/export-details-form.tsx b/ui/src/pages/project/entities/details-form/export-details-form.tsx index 5cce86403..1127bc450 100644 --- a/ui/src/pages/project/entities/details-form/export-details-form.tsx +++ b/ui/src/pages/project/entities/details-form/export-details-form.tsx @@ -7,8 +7,7 @@ import { import { FormConfig } from 'components/form/types' import { API_ROUTES } from 'data-services/constants' import { Export, SERVER_EXPORT_TYPES } from 'data-services/models/export' -import { Button, ButtonTheme } from 'design-system/components/button/button' -import { IconType } from 'design-system/components/icon/icon' +import { SaveButton } from 'design-system/components/button/save-button' import { InputContent } from 'design-system/components/input/input' import { EntityPicker } from 'design-system/components/select/entity-picker' import { Select } from 'nova-ui-kit' @@ -112,13 +111,7 @@ export const ExportDetailsForm = ({ /> - {totalCaptures && ( {currentIndex?.toLocaleString()} / {totalCaptures.toLocaleString()} )} - + size="icon" + variant="outline" + > + +
) } diff --git a/ui/src/pages/session-details/playback/playback.tsx b/ui/src/pages/session-details/playback/playback.tsx index 7d99b0be3..f079c7c73 100644 --- a/ui/src/pages/session-details/playback/playback.tsx +++ b/ui/src/pages/session-details/playback/playback.tsx @@ -8,7 +8,6 @@ import { Checkbox, CheckboxTheme, } from 'design-system/components/checkbox/checkbox' -import { IconButtonTheme } from 'design-system/components/icon-button/icon-button' import { useEffect, useState } from 'react' import { ActivityPlot } from './activity-plot/lazy-activity-plot' import { CaptureDetails } from './capture-details/capture-details' @@ -88,12 +87,7 @@ export const Playback = ({ onCheckedChange={setDefaultFilters} theme={CheckboxTheme.Neutral} /> - {project ? ( - - ) : null} + {project ? : null} Date: Tue, 24 Mar 2026 14:25:51 +0100 Subject: [PATCH 08/13] chore: use icons from library everywhere --- .../blueprint-collection.tsx | 7 - ui/src/design-system/components/card/card.tsx | 8 +- .../components/checkbox/checkbox.tsx | 8 +- .../components/dialog/dialog.tsx | 4 +- .../components/icon/assets/checkmark.svg | 3 - .../components/icon/assets/close.svg | 3 - .../components/icon/assets/detections.svg | 3 - .../components/icon/assets/download.svg | 3 - .../components/icon/assets/filters.svg | 3 - .../components/icon/assets/gallery-view.svg | 3 - .../components/icon/assets/identifiers.svg | 3 - .../components/icon/assets/info.svg | 3 - .../components/icon/assets/members.svg | 3 - .../components/icon/assets/photograph.svg | 3 - .../components/icon/assets/play-button.svg | 4 - .../components/icon/assets/radix/check.svg | 8 - .../icon/assets/radix/circle-backslash.svg | 8 - .../components/icon/assets/radix/clock.svg | 5 - .../components/icon/assets/radix/cross.svg | 5 - .../components/icon/assets/radix/error.svg | 5 - .../icon/assets/radix/external-link.svg | 5 - .../icon/assets/radix/heart-filled.svg | 5 - .../components/icon/assets/radix/heart.svg | 5 - .../components/icon/assets/radix/minus.svg | 5 - .../components/icon/assets/radix/options.svg | 5 - .../components/icon/assets/radix/pencil.svg | 5 - .../components/icon/assets/radix/plus.svg | 5 - .../icon/assets/radix/question-mark.svg | 8 - .../components/icon/assets/radix/search.svg | 5 - .../icon/assets/radix/toggle-down.svg | 5 - .../icon/assets/radix/toggle-left.svg | 5 - .../icon/assets/radix/toggle-right.svg | 5 - .../components/icon/assets/radix/trash.svg | 5 - .../components/icon/assets/radix/update.svg | 8 - .../components/icon/assets/settings.svg | 3 - .../components/icon/assets/shield-check.svg | 3 - .../components/icon/assets/sort.svg | 3 - .../components/icon/assets/table-view.svg | 3 - .../components/icon/icon.module.scss | 40 ---- ui/src/design-system/components/icon/icon.tsx | 176 ------------------ .../image-carousel/image-carousel.tsx | 9 +- .../assets/captures.svg} | 0 .../assets/deployments.svg | 0 .../assets/jobs.svg} | 0 .../assets/occurrences.svg | 0 .../assets/project.svg} | 0 .../{icon => navigation}/assets/sessions.svg | 0 .../assets/taxa.svg} | 0 .../navigation/navigation-bar-icon.tsx | 44 +++++ .../navigation/navigation-bar.module.scss | 12 ++ .../components/navigation/navigation-bar.tsx | 10 +- .../components/popover/popover.tsx | 4 +- .../components/status-info/status-info.tsx | 27 +++ .../components}/status-info/types.ts | 0 .../table/table-header/table-header.tsx | 5 +- ui/src/design-system/components/tabs/tabs.tsx | 12 +- .../components/toggle-group/toggle-group.tsx | 10 +- .../wizard/status-bullet/status-bullet.tsx | 11 +- .../components/wizard/wizard.tsx | 4 +- ui/src/pages/auth/login.tsx | 9 +- ui/src/pages/auth/sign-up.tsx | 9 +- ui/src/pages/captures/captures.tsx | 6 +- ui/src/pages/job-details/job-details.tsx | 4 +- .../id-quick-actions/id-button.tsx | 5 - .../pages/occurrences/occurrence-gallery.tsx | 15 +- ui/src/pages/occurrences/occurrences.tsx | 7 +- .../processing-services/connection-status.tsx | 6 +- .../status-info/status-info.module.scss | 53 ------ .../status-info/status-info.tsx | 46 ----- .../project/storage/connection-status.tsx | 4 +- .../status-info/status-info.module.scss | 53 ------ .../storage/status-info/status-info.tsx | 45 ----- .../project/storage/status-info/types.ts | 5 - ui/src/pages/sessions/sessions.tsx | 6 +- ui/src/pages/species/species.tsx | 6 +- ui/src/utils/useNavItems.ts | 9 - 76 files changed, 138 insertions(+), 694 deletions(-) delete mode 100644 ui/src/design-system/components/icon/assets/checkmark.svg delete mode 100644 ui/src/design-system/components/icon/assets/close.svg delete mode 100755 ui/src/design-system/components/icon/assets/detections.svg delete mode 100755 ui/src/design-system/components/icon/assets/download.svg delete mode 100755 ui/src/design-system/components/icon/assets/filters.svg delete mode 100755 ui/src/design-system/components/icon/assets/gallery-view.svg delete mode 100755 ui/src/design-system/components/icon/assets/identifiers.svg delete mode 100755 ui/src/design-system/components/icon/assets/info.svg delete mode 100755 ui/src/design-system/components/icon/assets/members.svg delete mode 100644 ui/src/design-system/components/icon/assets/photograph.svg delete mode 100755 ui/src/design-system/components/icon/assets/play-button.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/check.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/circle-backslash.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/clock.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/cross.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/error.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/external-link.svg delete mode 100755 ui/src/design-system/components/icon/assets/radix/heart-filled.svg delete mode 100755 ui/src/design-system/components/icon/assets/radix/heart.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/minus.svg delete mode 100755 ui/src/design-system/components/icon/assets/radix/options.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/pencil.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/plus.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/question-mark.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/search.svg delete mode 100755 ui/src/design-system/components/icon/assets/radix/toggle-down.svg delete mode 100755 ui/src/design-system/components/icon/assets/radix/toggle-left.svg delete mode 100755 ui/src/design-system/components/icon/assets/radix/toggle-right.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/trash.svg delete mode 100644 ui/src/design-system/components/icon/assets/radix/update.svg delete mode 100644 ui/src/design-system/components/icon/assets/settings.svg delete mode 100644 ui/src/design-system/components/icon/assets/shield-check.svg delete mode 100755 ui/src/design-system/components/icon/assets/sort.svg delete mode 100755 ui/src/design-system/components/icon/assets/table-view.svg delete mode 100644 ui/src/design-system/components/icon/icon.module.scss delete mode 100644 ui/src/design-system/components/icon/icon.tsx rename ui/src/design-system/components/{icon/assets/images.svg => navigation/assets/captures.svg} (100%) rename ui/src/design-system/components/{icon => navigation}/assets/deployments.svg (100%) rename ui/src/design-system/components/{icon/assets/batch-id.svg => navigation/assets/jobs.svg} (100%) rename ui/src/design-system/components/{icon => navigation}/assets/occurrences.svg (100%) rename ui/src/design-system/components/{icon/assets/overview.svg => navigation/assets/project.svg} (100%) rename ui/src/design-system/components/{icon => navigation}/assets/sessions.svg (100%) rename ui/src/design-system/components/{icon/assets/species.svg => navigation/assets/taxa.svg} (100%) create mode 100644 ui/src/design-system/components/navigation/navigation-bar-icon.tsx create mode 100644 ui/src/design-system/components/status-info/status-info.tsx rename ui/src/{pages/project/processing-services => design-system/components}/status-info/types.ts (100%) delete mode 100644 ui/src/pages/project/processing-services/status-info/status-info.module.scss delete mode 100644 ui/src/pages/project/processing-services/status-info/status-info.tsx delete mode 100644 ui/src/pages/project/storage/status-info/status-info.module.scss delete mode 100644 ui/src/pages/project/storage/status-info/status-info.tsx delete mode 100644 ui/src/pages/project/storage/status-info/types.ts diff --git a/ui/src/components/blueprint-collection/blueprint-collection.tsx b/ui/src/components/blueprint-collection/blueprint-collection.tsx index 6825a10f5..fee6b85a3 100644 --- a/ui/src/components/blueprint-collection/blueprint-collection.tsx +++ b/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 (
- {item.countLabel?.length ? ( - - - {item.countLabel} - - ) : null} {item.timeLabel} diff --git a/ui/src/design-system/components/card/card.tsx b/ui/src/design-system/components/card/card.tsx index 86e34d860..beb962646 100644 --- a/ui/src/design-system/components/card/card.tsx +++ b/ui/src/design-system/components/card/card.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames' +import { ImageIcon } from 'lucide-react' import { ReactNode } from 'react' import { Link } from 'react-router-dom' import { Badge } from '../badge/badge' -import { Icon, IconTheme, IconType } from '../icon/icon' import styles from './card.module.scss' export enum CardSize { @@ -49,11 +49,7 @@ export const Card = ({ ) ) : (
- +
)}
diff --git a/ui/src/design-system/components/checkbox/checkbox.tsx b/ui/src/design-system/components/checkbox/checkbox.tsx index e6e2098e5..4d8ca6961 100644 --- a/ui/src/design-system/components/checkbox/checkbox.tsx +++ b/ui/src/design-system/components/checkbox/checkbox.tsx @@ -1,6 +1,6 @@ import * as _Checkbox from '@radix-ui/react-checkbox' import classNames from 'classnames' -import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' +import { CheckIcon, MinusIcon } from 'lucide-react' import styles from './checkbox.module.scss' export enum CheckboxTheme { @@ -38,11 +38,9 @@ export const Checkbox = ({ onCheckedChange={onCheckedChange} > <_Checkbox.Indicator className={styles.checkboxIndicator}> - {checked === true && ( - - )} + {checked === true && } {checked === 'indeterminate' && ( - + )} diff --git a/ui/src/design-system/components/dialog/dialog.tsx b/ui/src/design-system/components/dialog/dialog.tsx index 242b39e8e..1866e11fb 100644 --- a/ui/src/design-system/components/dialog/dialog.tsx +++ b/ui/src/design-system/components/dialog/dialog.tsx @@ -1,8 +1,8 @@ import * as Dialog from '@radix-ui/react-dialog' import classNames from 'classnames' import { ErrorState } from 'components/error-state/error-state' +import { XIcon } from 'lucide-react' import { ReactNode } from 'react' -import { Icon, IconType } from '../icon/icon' import { LoadingSpinner } from '../loading-spinner/loading-spinner' import styles from './dialog.module.scss' @@ -69,7 +69,7 @@ const Content = ({ )}
- + diff --git a/ui/src/design-system/components/icon/assets/checkmark.svg b/ui/src/design-system/components/icon/assets/checkmark.svg deleted file mode 100644 index cfdb25e8e..000000000 --- a/ui/src/design-system/components/icon/assets/checkmark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/close.svg b/ui/src/design-system/components/icon/assets/close.svg deleted file mode 100644 index 8bbe2ad67..000000000 --- a/ui/src/design-system/components/icon/assets/close.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/detections.svg b/ui/src/design-system/components/icon/assets/detections.svg deleted file mode 100755 index 591666953..000000000 --- a/ui/src/design-system/components/icon/assets/detections.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/download.svg b/ui/src/design-system/components/icon/assets/download.svg deleted file mode 100755 index e39d17627..000000000 --- a/ui/src/design-system/components/icon/assets/download.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/filters.svg b/ui/src/design-system/components/icon/assets/filters.svg deleted file mode 100755 index 1bb12dafb..000000000 --- a/ui/src/design-system/components/icon/assets/filters.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/gallery-view.svg b/ui/src/design-system/components/icon/assets/gallery-view.svg deleted file mode 100755 index 2fe7fadb5..000000000 --- a/ui/src/design-system/components/icon/assets/gallery-view.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/identifiers.svg b/ui/src/design-system/components/icon/assets/identifiers.svg deleted file mode 100755 index c5a244f61..000000000 --- a/ui/src/design-system/components/icon/assets/identifiers.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/info.svg b/ui/src/design-system/components/icon/assets/info.svg deleted file mode 100755 index e75fb86a6..000000000 --- a/ui/src/design-system/components/icon/assets/info.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/members.svg b/ui/src/design-system/components/icon/assets/members.svg deleted file mode 100755 index 93d50e20d..000000000 --- a/ui/src/design-system/components/icon/assets/members.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/photograph.svg b/ui/src/design-system/components/icon/assets/photograph.svg deleted file mode 100644 index a06208b2e..000000000 --- a/ui/src/design-system/components/icon/assets/photograph.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/play-button.svg b/ui/src/design-system/components/icon/assets/play-button.svg deleted file mode 100755 index 01f105e94..000000000 --- a/ui/src/design-system/components/icon/assets/play-button.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/ui/src/design-system/components/icon/assets/radix/check.svg b/ui/src/design-system/components/icon/assets/radix/check.svg deleted file mode 100644 index 476a3baa1..000000000 --- a/ui/src/design-system/components/icon/assets/radix/check.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/circle-backslash.svg b/ui/src/design-system/components/icon/assets/radix/circle-backslash.svg deleted file mode 100644 index 40c4dd539..000000000 --- a/ui/src/design-system/components/icon/assets/radix/circle-backslash.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/clock.svg b/ui/src/design-system/components/icon/assets/radix/clock.svg deleted file mode 100644 index 9009039a1..000000000 --- a/ui/src/design-system/components/icon/assets/radix/clock.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/cross.svg b/ui/src/design-system/components/icon/assets/radix/cross.svg deleted file mode 100644 index 07601dd80..000000000 --- a/ui/src/design-system/components/icon/assets/radix/cross.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/error.svg b/ui/src/design-system/components/icon/assets/radix/error.svg deleted file mode 100644 index cfa5e8b17..000000000 --- a/ui/src/design-system/components/icon/assets/radix/error.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/external-link.svg b/ui/src/design-system/components/icon/assets/radix/external-link.svg deleted file mode 100644 index f09326097..000000000 --- a/ui/src/design-system/components/icon/assets/radix/external-link.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/heart-filled.svg b/ui/src/design-system/components/icon/assets/radix/heart-filled.svg deleted file mode 100755 index a92ac8091..000000000 --- a/ui/src/design-system/components/icon/assets/radix/heart-filled.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/heart.svg b/ui/src/design-system/components/icon/assets/radix/heart.svg deleted file mode 100755 index 5a2a4b76f..000000000 --- a/ui/src/design-system/components/icon/assets/radix/heart.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/minus.svg b/ui/src/design-system/components/icon/assets/radix/minus.svg deleted file mode 100644 index 7256b1a55..000000000 --- a/ui/src/design-system/components/icon/assets/radix/minus.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - \ No newline at end of file diff --git a/ui/src/design-system/components/icon/assets/radix/options.svg b/ui/src/design-system/components/icon/assets/radix/options.svg deleted file mode 100755 index 4e0e53997..000000000 --- a/ui/src/design-system/components/icon/assets/radix/options.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/pencil.svg b/ui/src/design-system/components/icon/assets/radix/pencil.svg deleted file mode 100644 index 1c0d5270f..000000000 --- a/ui/src/design-system/components/icon/assets/radix/pencil.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/plus.svg b/ui/src/design-system/components/icon/assets/radix/plus.svg deleted file mode 100644 index 583c01355..000000000 --- a/ui/src/design-system/components/icon/assets/radix/plus.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/question-mark.svg b/ui/src/design-system/components/icon/assets/radix/question-mark.svg deleted file mode 100644 index 577aae534..000000000 --- a/ui/src/design-system/components/icon/assets/radix/question-mark.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/search.svg b/ui/src/design-system/components/icon/assets/radix/search.svg deleted file mode 100644 index ce7cb3552..000000000 --- a/ui/src/design-system/components/icon/assets/radix/search.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/toggle-down.svg b/ui/src/design-system/components/icon/assets/radix/toggle-down.svg deleted file mode 100755 index 4aee7beef..000000000 --- a/ui/src/design-system/components/icon/assets/radix/toggle-down.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - \ No newline at end of file diff --git a/ui/src/design-system/components/icon/assets/radix/toggle-left.svg b/ui/src/design-system/components/icon/assets/radix/toggle-left.svg deleted file mode 100755 index de0d7a9d5..000000000 --- a/ui/src/design-system/components/icon/assets/radix/toggle-left.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/toggle-right.svg b/ui/src/design-system/components/icon/assets/radix/toggle-right.svg deleted file mode 100755 index f62a1ee75..000000000 --- a/ui/src/design-system/components/icon/assets/radix/toggle-right.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/trash.svg b/ui/src/design-system/components/icon/assets/radix/trash.svg deleted file mode 100644 index 3d130eaa2..000000000 --- a/ui/src/design-system/components/icon/assets/radix/trash.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/radix/update.svg b/ui/src/design-system/components/icon/assets/radix/update.svg deleted file mode 100644 index b529b2b08..000000000 --- a/ui/src/design-system/components/icon/assets/radix/update.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/settings.svg b/ui/src/design-system/components/icon/assets/settings.svg deleted file mode 100644 index cfc89e360..000000000 --- a/ui/src/design-system/components/icon/assets/settings.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/shield-check.svg b/ui/src/design-system/components/icon/assets/shield-check.svg deleted file mode 100644 index 12076711c..000000000 --- a/ui/src/design-system/components/icon/assets/shield-check.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/sort.svg b/ui/src/design-system/components/icon/assets/sort.svg deleted file mode 100755 index e10dcb12e..000000000 --- a/ui/src/design-system/components/icon/assets/sort.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/assets/table-view.svg b/ui/src/design-system/components/icon/assets/table-view.svg deleted file mode 100755 index b74fcce49..000000000 --- a/ui/src/design-system/components/icon/assets/table-view.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/src/design-system/components/icon/icon.module.scss b/ui/src/design-system/components/icon/icon.module.scss deleted file mode 100644 index a10a7d27f..000000000 --- a/ui/src/design-system/components/icon/icon.module.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import 'src/design-system/variables/colors.scss'; -@import 'src/design-system/variables/typography.scss'; - -.wrapper { - display: inline-flex; - align-items: center; - justify-content: center; - transition: transform 400ms ease; - - &.light { - color: $color-generic-white; - } - - &.dark { - color: $color-neutral-700; - } - - &.neutral { - color: $color-neutral-300; - } - - &.primary { - color: $color-primary-1-600; - } - - &.success { - color: $color-success-700; - } - - &.error { - color: $color-destructive-600; - } - - &.fixedSized { - > * { - width: 100%; - height: 100%; - } - } -} diff --git a/ui/src/design-system/components/icon/icon.tsx b/ui/src/design-system/components/icon/icon.tsx deleted file mode 100644 index 6a6c12548..000000000 --- a/ui/src/design-system/components/icon/icon.tsx +++ /dev/null @@ -1,176 +0,0 @@ -import classNames from 'classnames' -import { FunctionComponent } from 'react' -import BatchId from './assets/batch-id.svg?react' -import Checkmark from './assets/checkmark.svg?react' -import Close from './assets/close.svg?react' -import Deployments from './assets/deployments.svg?react' -import Detections from './assets/detections.svg?react' -import Download from './assets/download.svg?react' -import Filters from './assets/filters.svg?react' -import GalleryView from './assets/gallery-view.svg?react' -import Images from './assets/images.svg?react' -import Info from './assets/info.svg?react' -import Members from './assets/members.svg?react' -import Occurrences from './assets/occurrences.svg?react' -import Overview from './assets/overview.svg?react' -import Photograph from './assets/photograph.svg?react' -import PlayButton from './assets/play-button.svg?react' -import RadixCheck from './assets/radix/check.svg?react' -import CircleBackslash from './assets/radix/circle-backslash.svg?react' -import RadixClock from './assets/radix/clock.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 RadixMinus from './assets/radix/minus.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' -import RadixQuestionMark from './assets/radix/question-mark.svg?react' -import RadixSearch from './assets/radix/search.svg?react' -import ToggleDown from './assets/radix/toggle-down.svg?react' -import ToggleLeft from './assets/radix/toggle-left.svg?react' -import ToggleRight from './assets/radix/toggle-right.svg?react' -import RadixTrash from './assets/radix/trash.svg?react' -import RadixUpdate from './assets/radix/update.svg?react' -import Sessions from './assets/sessions.svg?react' -import Settings from './assets/settings.svg?react' -import ShieldCheck from './assets/shield-check.svg?react' -import Sort from './assets/sort.svg?react' -import Species from './assets/species.svg?react' -import TableView from './assets/table-view.svg?react' -import styles from './icon.module.scss' - -export enum IconType { - BatchId = 'batch-id', - Checkmark = 'checkmark', - CircleBackslash = 'circle-backslash', - Close = 'close', - Cross = 'cross', - Deployments = 'deployments', - Detections = 'detections', - Download = 'download', - Error = 'error', - ExternalLink = 'external-link', - Filters = 'filters', - GalleryView = 'gallery-view', - Heart = 'heart', - HeartFilled = 'heart-filled', - Images = 'images', - Info = 'info', - Members = 'members', - Occurrences = 'occurrences', - Options = 'options', - Overview = 'overview', - Pencil = 'pencil', - Photograph = 'photograph', - PlayButton = 'play-button', - Plus = 'plus', - RadixCheck = 'radix-check', - RadixClock = 'radix-clock', - RadixMinus = 'radix-minus', - RadixQuestionMark = 'radix-question-mark', - RadixSearch = 'radix-search', - RadixTrash = 'radix-trash', - RadixUpdate = 'radix-update', - Sessions = 'sessions', - Settings = 'settings', - ShieldCheck = 'shield-check', - Sort = 'sort', - Species = 'species', - TableView = 'table-view', - ToggleDown = 'toggle-down', - ToggleLeft = 'toggle-left', - ToggleRight = 'toggle-right', -} - -export enum IconTheme { - Light = 'light', - Neutral = 'neutral', - Dark = 'dark', - Primary = 'primary', - Success = 'success', - Error = 'error', -} - -const COMPONENT_MAP: { [key in IconType]: FunctionComponent } = { - [IconType.BatchId]: BatchId, - [IconType.Checkmark]: Checkmark, - [IconType.CircleBackslash]: CircleBackslash, - [IconType.Close]: Close, - [IconType.Cross]: Cross, - [IconType.Deployments]: Deployments, - [IconType.Detections]: Detections, - [IconType.Download]: Download, - [IconType.Error]: Error, - [IconType.ExternalLink]: ExternalLink, - [IconType.Filters]: Filters, - [IconType.GalleryView]: GalleryView, - [IconType.Heart]: Heart, - [IconType.HeartFilled]: HeartFilled, - [IconType.Images]: Images, - [IconType.Info]: Info, - [IconType.Members]: Members, - [IconType.Occurrences]: Occurrences, - [IconType.Options]: Options, - [IconType.Overview]: Overview, - [IconType.Pencil]: Pencil, - [IconType.Photograph]: Photograph, - [IconType.PlayButton]: PlayButton, - [IconType.Plus]: Plus, - [IconType.RadixCheck]: RadixCheck, - [IconType.RadixClock]: RadixClock, - [IconType.RadixMinus]: RadixMinus, - [IconType.RadixQuestionMark]: RadixQuestionMark, - [IconType.RadixSearch]: RadixSearch, - [IconType.RadixTrash]: RadixTrash, - [IconType.RadixUpdate]: RadixUpdate, - [IconType.Sessions]: Sessions, - [IconType.Settings]: Settings, - [IconType.ShieldCheck]: ShieldCheck, - [IconType.Sort]: Sort, - [IconType.Species]: Species, - [IconType.TableView]: TableView, - [IconType.ToggleDown]: ToggleDown, - [IconType.ToggleLeft]: ToggleLeft, - [IconType.ToggleRight]: ToggleRight, -} - -interface IconProps { - size?: number - theme?: IconTheme - transform?: string - type: IconType -} - -export const Icon = ({ - size, - theme = IconTheme.Dark, - transform, - type, -}: IconProps) => { - const Component = COMPONENT_MAP[type] - const fixedSized = size !== undefined - - return ( -
- -
- ) -} diff --git a/ui/src/design-system/components/image-carousel/image-carousel.tsx b/ui/src/design-system/components/image-carousel/image-carousel.tsx index e6a9b1e9c..6b7ecdd44 100644 --- a/ui/src/design-system/components/image-carousel/image-carousel.tsx +++ b/ui/src/design-system/components/image-carousel/image-carousel.tsx @@ -1,7 +1,6 @@ import classNames from 'classnames' import { LicenseInfo } from 'components/license-info/license-info' -import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' -import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' +import { ChevronLeftIcon, ChevronRightIcon, ImageIcon } from 'lucide-react' import { Button } from 'nova-ui-kit' import { ReactNode, useEffect, useRef, useState } from 'react' import { Link } from 'react-router-dom' @@ -92,11 +91,7 @@ const BasicImageCarousel = ({ {image ? ( {image.alt} ) : ( - + )} diff --git a/ui/src/design-system/components/icon/assets/images.svg b/ui/src/design-system/components/navigation/assets/captures.svg similarity index 100% rename from ui/src/design-system/components/icon/assets/images.svg rename to ui/src/design-system/components/navigation/assets/captures.svg diff --git a/ui/src/design-system/components/icon/assets/deployments.svg b/ui/src/design-system/components/navigation/assets/deployments.svg similarity index 100% rename from ui/src/design-system/components/icon/assets/deployments.svg rename to ui/src/design-system/components/navigation/assets/deployments.svg diff --git a/ui/src/design-system/components/icon/assets/batch-id.svg b/ui/src/design-system/components/navigation/assets/jobs.svg similarity index 100% rename from ui/src/design-system/components/icon/assets/batch-id.svg rename to ui/src/design-system/components/navigation/assets/jobs.svg diff --git a/ui/src/design-system/components/icon/assets/occurrences.svg b/ui/src/design-system/components/navigation/assets/occurrences.svg similarity index 100% rename from ui/src/design-system/components/icon/assets/occurrences.svg rename to ui/src/design-system/components/navigation/assets/occurrences.svg diff --git a/ui/src/design-system/components/icon/assets/overview.svg b/ui/src/design-system/components/navigation/assets/project.svg similarity index 100% rename from ui/src/design-system/components/icon/assets/overview.svg rename to ui/src/design-system/components/navigation/assets/project.svg diff --git a/ui/src/design-system/components/icon/assets/sessions.svg b/ui/src/design-system/components/navigation/assets/sessions.svg similarity index 100% rename from ui/src/design-system/components/icon/assets/sessions.svg rename to ui/src/design-system/components/navigation/assets/sessions.svg diff --git a/ui/src/design-system/components/icon/assets/species.svg b/ui/src/design-system/components/navigation/assets/taxa.svg similarity index 100% rename from ui/src/design-system/components/icon/assets/species.svg rename to ui/src/design-system/components/navigation/assets/taxa.svg diff --git a/ui/src/design-system/components/navigation/navigation-bar-icon.tsx b/ui/src/design-system/components/navigation/navigation-bar-icon.tsx new file mode 100644 index 000000000..a73ac9306 --- /dev/null +++ b/ui/src/design-system/components/navigation/navigation-bar-icon.tsx @@ -0,0 +1,44 @@ +import classNames from 'classnames' +import { FunctionComponent } from 'react' +import Captures from './assets/captures.svg?react' +import Deployments from './assets/deployments.svg?react' +import Jobs from './assets/jobs.svg?react' +import Occurrences from './assets/occurrences.svg?react' +import Project from './assets/project.svg?react' +import Sessions from './assets/sessions.svg?react' +import Taxa from './assets/taxa.svg?react' +import styles from './navigation-bar.module.scss' + +const ICON_MAP: { [id: string]: FunctionComponent } = { + captures: Captures, + deployments: Deployments, + jobs: Jobs, + occurrences: Occurrences, + project: Project, + sessions: Sessions, + species: Taxa, +} + +export const NavigationBarIcon = ({ + isActive, + id, +}: { + isActive?: boolean + id: string +}) => { + const Icon = ICON_MAP[id] + + if (!Icon) { + return null + } + + return ( +
+ +
+ ) +} diff --git a/ui/src/design-system/components/navigation/navigation-bar.module.scss b/ui/src/design-system/components/navigation/navigation-bar.module.scss index 0449f03bd..84e0cbedc 100644 --- a/ui/src/design-system/components/navigation/navigation-bar.module.scss +++ b/ui/src/design-system/components/navigation/navigation-bar.module.scss @@ -84,6 +84,18 @@ transition: left 400ms ease, width 200ms ease; } +.icon { + display: inline-flex; + align-items: center; + justify-content: center; + transition: transform 400ms ease; + color: $color-primary-1-600; + + &.active { + color: $color-success-700; + } +} + @media only screen and (max-width: $small-screen-breakpoint) { .topContent { margin-bottom: 0; diff --git a/ui/src/design-system/components/navigation/navigation-bar.tsx b/ui/src/design-system/components/navigation/navigation-bar.tsx index c0d13acdb..7b64ca25f 100644 --- a/ui/src/design-system/components/navigation/navigation-bar.tsx +++ b/ui/src/design-system/components/navigation/navigation-bar.tsx @@ -1,13 +1,12 @@ import classNames from 'classnames' import { useEffect, useState } from 'react' -import { Icon, IconTheme, IconType } from '../icon/icon' +import { NavigationBarIcon } from './navigation-bar-icon' import styles from './navigation-bar.module.scss' interface NavigationBarProps { activeItemId: string items: { count?: number - icon?: IconType id: string path?: string title: string @@ -59,12 +58,7 @@ export const NavigationBar = ({ }} >
- {item.icon && ( - - )} + {item.count !== undefined && ( {item.count.toLocaleString()} diff --git a/ui/src/design-system/components/popover/popover.tsx b/ui/src/design-system/components/popover/popover.tsx index 2192afe36..f906397ba 100644 --- a/ui/src/design-system/components/popover/popover.tsx +++ b/ui/src/design-system/components/popover/popover.tsx @@ -1,7 +1,7 @@ import * as Popover from '@radix-ui/react-popover' import classNames from 'classnames' +import { XIcon } from 'lucide-react' import { ReactNode } from 'react' -import { Icon, IconType } from '../icon/icon' import styles from './popover.module.scss' const Root = ({ @@ -65,7 +65,7 @@ const Content = ({ className={styles.popoverClose} aria-label={ariaCloselabel} > - + )} diff --git a/ui/src/design-system/components/status-info/status-info.tsx b/ui/src/design-system/components/status-info/status-info.tsx new file mode 100644 index 000000000..d39610640 --- /dev/null +++ b/ui/src/design-system/components/status-info/status-info.tsx @@ -0,0 +1,27 @@ +import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' +import { CircleCheckIcon, CircleQuestionMark, Loader2Icon } from 'lucide-react' +import { Status } from './types' + +export const StatusInfo = ({ + status, + tooltip, +}: { + status: Status + tooltip?: string +}) => ( + + + +) + +const StatusIcon = ({ status }: { status: Status }) => { + if (status === Status.Connected) { + return + } + + if (status === Status.NotConnected) { + return + } + + return +} diff --git a/ui/src/pages/project/processing-services/status-info/types.ts b/ui/src/design-system/components/status-info/types.ts similarity index 100% rename from ui/src/pages/project/processing-services/status-info/types.ts rename to ui/src/design-system/components/status-info/types.ts diff --git a/ui/src/design-system/components/table/table-header/table-header.tsx b/ui/src/design-system/components/table/table-header/table-header.tsx index 7540df7ee..b9556703e 100644 --- a/ui/src/design-system/components/table/table-header/table-header.tsx +++ b/ui/src/design-system/components/table/table-header/table-header.tsx @@ -1,7 +1,6 @@ import classNames from 'classnames' -import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' -import { InfoIcon } from 'lucide-react' +import { ArrowDownIcon, InfoIcon } from 'lucide-react' import { TableColumn, TableSortSettings } from '../types' import styles from './table-header.module.scss' @@ -112,7 +111,7 @@ const SortableTableHeader = ({ sortActive && sortSettings?.order === 'asc', })} > - +
) : null} diff --git a/ui/src/design-system/components/tabs/tabs.tsx b/ui/src/design-system/components/tabs/tabs.tsx index a174f85df..d8b3f971d 100644 --- a/ui/src/design-system/components/tabs/tabs.tsx +++ b/ui/src/design-system/components/tabs/tabs.tsx @@ -1,6 +1,5 @@ import * as Tabs from '@radix-ui/react-tabs' import { ReactNode } from 'react' -import { Icon, IconType } from '../icon/icon' import styles from './tabs.module.scss' const Root = ({ @@ -37,17 +36,8 @@ const List = ({ ) -const Trigger = ({ - value, - label, - icon, -}: { - value: string - label: string - icon?: IconType -}) => ( +const Trigger = ({ value, label }: { value: string; label: string }) => ( - {icon && } {label} ) diff --git a/ui/src/design-system/components/toggle-group/toggle-group.tsx b/ui/src/design-system/components/toggle-group/toggle-group.tsx index 932dd5da3..28efe9027 100644 --- a/ui/src/design-system/components/toggle-group/toggle-group.tsx +++ b/ui/src/design-system/components/toggle-group/toggle-group.tsx @@ -1,12 +1,13 @@ import * as _ToggleGroup from '@radix-ui/react-toggle-group' import classNames from 'classnames' -import { Icon, IconTheme, IconType } from '../icon/icon' import { BasicTooltip } from '../tooltip/basic-tooltip' import styles from './toggle-group.module.scss' interface ToggleGroupProps { items: { - icon: IconType + Icon: React.ComponentType<{ + className?: string + }> value: string label: string }[] @@ -38,9 +39,8 @@ export const ToggleGroup = ({ [styles.last]: index === items.length - 1, })} > - diff --git a/ui/src/design-system/components/wizard/status-bullet/status-bullet.tsx b/ui/src/design-system/components/wizard/status-bullet/status-bullet.tsx index 9fb65f3c3..e442280f7 100644 --- a/ui/src/design-system/components/wizard/status-bullet/status-bullet.tsx +++ b/ui/src/design-system/components/wizard/status-bullet/status-bullet.tsx @@ -1,5 +1,4 @@ import classNames from 'classnames' -import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' import styles from './status-bullet.module.scss' export enum StatusBulletTheme { @@ -9,15 +8,17 @@ export enum StatusBulletTheme { } interface StatusBulletProps { - icon?: IconType - value?: number + Icon?: React.ComponentType<{ + className?: string + }> theme?: StatusBulletTheme + value?: number } export const StatusBullet = ({ - icon, theme = StatusBulletTheme.Default, value, + Icon, }: StatusBulletProps) => (
- {icon ? : null} + {Icon ? : null} {value ? {value} : null}
) diff --git a/ui/src/design-system/components/wizard/wizard.tsx b/ui/src/design-system/components/wizard/wizard.tsx index 5cc99ed79..ae7ec310d 100644 --- a/ui/src/design-system/components/wizard/wizard.tsx +++ b/ui/src/design-system/components/wizard/wizard.tsx @@ -1,7 +1,7 @@ import * as Accordion from '@radix-ui/react-accordion' import classNames from 'classnames' +import { ChevronDownIcon } from 'lucide-react' import { ReactNode, forwardRef } from 'react' -import { Icon, IconType } from '../icon/icon' import styles from './wizard.module.scss' const Root = ({ @@ -64,7 +64,7 @@ const Trigger = forwardRef< {title} {showToggle && (
- +
)} diff --git a/ui/src/pages/auth/login.tsx b/ui/src/pages/auth/login.tsx index 352639a72..3710f2d10 100644 --- a/ui/src/pages/auth/login.tsx +++ b/ui/src/pages/auth/login.tsx @@ -2,8 +2,7 @@ import classNames from 'classnames' import { FormField } from 'components/form/form-field' import { FormConfig } from 'components/form/types' import { useLogin } from 'data-services/hooks/auth/useLogin' -import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' -import { Loader2Icon } from 'lucide-react' +import { ExternalLinkIcon, Loader2Icon } from 'lucide-react' import { Button, buttonVariants } from 'nova-ui-kit' import { useForm } from 'react-hook-form' import { Link, useLocation, useNavigate } from 'react-router-dom' @@ -95,11 +94,7 @@ export const Login = () => { className={buttonVariants({ size: 'small', variant: 'outline' })} > Get in touch - +

diff --git a/ui/src/pages/auth/sign-up.tsx b/ui/src/pages/auth/sign-up.tsx index b7e558f2a..41462d070 100644 --- a/ui/src/pages/auth/sign-up.tsx +++ b/ui/src/pages/auth/sign-up.tsx @@ -2,8 +2,7 @@ import classNames from 'classnames' import { FormField } from 'components/form/form-field' import { FormConfig } from 'components/form/types' import { useSignUp } from 'data-services/hooks/auth/useSignUp' -import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' -import { Loader2Icon } from 'lucide-react' +import { CheckIcon, Loader2Icon } from 'lucide-react' import { Button, buttonVariants } from 'nova-ui-kit' import { useState } from 'react' import { useForm } from 'react-hook-form' @@ -91,11 +90,7 @@ export const SignUp = () => {

{isSuccess ? ( <> - + {translate(STRING.MESSAGE_SIGNED_UP)} ) : ( diff --git a/ui/src/pages/captures/captures.tsx b/ui/src/pages/captures/captures.tsx index 474af8e69..cef7983f7 100644 --- a/ui/src/pages/captures/captures.tsx +++ b/ui/src/pages/captures/captures.tsx @@ -1,7 +1,6 @@ import { FilterControl } from 'components/filtering/filter-control' import { FilterSection } from 'components/filtering/filter-section' import { useCaptures } from 'data-services/hooks/captures/useCaptures' -import { IconType } from 'design-system/components/icon/icon' import { PageFooter } from 'design-system/components/page-footer/page-footer' import { PageHeader } from 'design-system/components/page-header/page-header' import { PaginationBar } from 'design-system/components/pagination-bar/pagination-bar' @@ -9,6 +8,7 @@ import { SortControl } from 'design-system/components/sort-control' import { ColumnSettings } from 'design-system/components/table/column-settings/column-settings' import { Table } from 'design-system/components/table/table/table' import { ToggleGroup } from 'design-system/components/toggle-group/toggle-group' +import { Grid2X2Icon, TableIcon } from 'lucide-react' import { useState } from 'react' import { useParams } from 'react-router-dom' import { DOCS_LINKS } from 'utils/constants' @@ -78,12 +78,12 @@ export const Captures = () => { { value: 'table', label: translate(STRING.TAB_ITEM_TABLE), - icon: IconType.TableView, + Icon: TableIcon, }, { value: 'gallery', label: translate(STRING.TAB_ITEM_GALLERY), - icon: IconType.GalleryView, + Icon: Grid2X2Icon, }, ]} value={selectedView} diff --git a/ui/src/pages/job-details/job-details.tsx b/ui/src/pages/job-details/job-details.tsx index 962c44807..ab42681a9 100644 --- a/ui/src/pages/job-details/job-details.tsx +++ b/ui/src/pages/job-details/job-details.tsx @@ -4,7 +4,6 @@ import { Export } from 'data-services/models/export' import { JobStatusType } from 'data-services/models/job' import { JobDetails as Job } from 'data-services/models/job-details' import * as Dialog from 'design-system/components/dialog/dialog' -import { IconType } from 'design-system/components/icon/icon' import { InputContent, InputValue } from 'design-system/components/input/input' import { StatusBar } from 'design-system/components/status/status-bar' import { @@ -12,6 +11,7 @@ import { StatusBulletTheme, } from 'design-system/components/wizard/status-bullet/status-bullet' import * as Wizard from 'design-system/components/wizard/wizard' +import { CheckIcon } from 'lucide-react' import { CodeBlock } from 'nova-ui-kit' import { useState } from 'react' import { useParams } from 'react-router-dom' @@ -199,7 +199,7 @@ const JobStages = ({ job }: { job: Job }) => { {stage.status.type === JobStatusType.Success ? ( ) : ( diff --git a/ui/src/pages/occurrence-details/id-quick-actions/id-button.tsx b/ui/src/pages/occurrence-details/id-quick-actions/id-button.tsx index 29ac210f9..ade068028 100644 --- a/ui/src/pages/occurrence-details/id-quick-actions/id-button.tsx +++ b/ui/src/pages/occurrence-details/id-quick-actions/id-button.tsx @@ -1,7 +1,6 @@ import classNames from 'classnames' import { IdentificationFieldValues } from 'data-services/hooks/identifications/types' import { useCreateIdentifications } from 'data-services/hooks/identifications/useCreateIdentifications' -import { IconType } from 'design-system/components/icon/icon' import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' import { AlertCircleIcon, CheckIcon, Loader2Icon } from 'lucide-react' import { Button } from 'nova-ui-kit' @@ -38,11 +37,7 @@ export const IdButton = ({ diff --git a/ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx b/ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx index e3af5bdad..0bfc4119b 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/deployment-details-form.tsx @@ -127,6 +127,7 @@ const SaveButton = ({ disabled={!allValid || !someDirty || isLoading} onClick={onSaveClick} size="small" + type="button" variant="success" > {translate(STRING.SAVE)} diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx index ca1170cad..5b2570dbd 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/section-general/section-general.tsx @@ -127,7 +127,7 @@ export const SectionGeneral = ({ - diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-location/location-map/location-map.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-location/location-map/location-map.tsx index dc9cde4a6..bc68a6a04 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/section-location/location-map/location-map.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/section-location/location-map/location-map.tsx @@ -27,6 +27,7 @@ export const LocationMap = ({

- diff --git a/ui/src/pages/deployment-details/deployment-details-form/section-source-images/actions/sync-source-images.tsx b/ui/src/pages/deployment-details/deployment-details-form/section-source-images/actions/sync-source-images.tsx index 45af8551b..5b1353129 100644 --- a/ui/src/pages/deployment-details/deployment-details-form/section-source-images/actions/sync-source-images.tsx +++ b/ui/src/pages/deployment-details/deployment-details-form/section-source-images/actions/sync-source-images.tsx @@ -23,7 +23,7 @@ export const SyncDeploymentSourceImages = ({ return (
diff --git a/ui/src/pages/job-details/job-actions/cancel-job.tsx b/ui/src/pages/job-details/job-actions/cancel-job.tsx index 7121aca07..a45866f3e 100644 --- a/ui/src/pages/job-details/job-actions/cancel-job.tsx +++ b/ui/src/pages/job-details/job-actions/cancel-job.tsx @@ -8,7 +8,7 @@ export const CancelJob = ({ jobId }: { jobId: string }) => { return (
)} diff --git a/ui/src/pages/occurrences/occurrence-gallery.tsx b/ui/src/pages/occurrences/occurrence-gallery.tsx index 05c5567f3..048601858 100644 --- a/ui/src/pages/occurrences/occurrence-gallery.tsx +++ b/ui/src/pages/occurrences/occurrence-gallery.tsx @@ -189,7 +189,6 @@ export const OccurrenceGallery = ({ )} diff --git a/ui/src/pages/project/entities/entities-columns.tsx b/ui/src/pages/project/entities/entities-columns.tsx index 639fc4ab3..88d86772d 100644 --- a/ui/src/pages/project/entities/entities-columns.tsx +++ b/ui/src/pages/project/entities/entities-columns.tsx @@ -28,10 +28,7 @@ export const columns: ( name: translate(STRING.FIELD_LABEL_DESCRIPTION), renderCell: (item: Entity) => ( ), diff --git a/ui/src/pages/project/pipelines/pipelines-columns.tsx b/ui/src/pages/project/pipelines/pipelines-columns.tsx index 58f0abbdb..61b1231a4 100644 --- a/ui/src/pages/project/pipelines/pipelines-columns.tsx +++ b/ui/src/pages/project/pipelines/pipelines-columns.tsx @@ -37,10 +37,7 @@ export const columns: ( name: translate(STRING.FIELD_LABEL_DESCRIPTION), renderCell: (item: Pipeline) => ( ), diff --git a/ui/src/pages/project/team/leave-team-dialog.tsx b/ui/src/pages/project/team/leave-team-dialog.tsx index 2311af300..0d2e6ae52 100644 --- a/ui/src/pages/project/team/leave-team-dialog.tsx +++ b/ui/src/pages/project/team/leave-team-dialog.tsx @@ -47,7 +47,7 @@ export const LeaveTeamDialog = ({ member }: { member: Member }) => { {translate(STRING.CANCEL)} diff --git a/ui/src/components/filtering/filter-control.tsx b/ui/src/components/filtering/filter-control.tsx index 99933c7e7..bdbb04b66 100644 --- a/ui/src/components/filtering/filter-control.tsx +++ b/ui/src/components/filtering/filter-control.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames' import { ChevronRightIcon, InfoIcon, XIcon } from 'lucide-react' import { Button, buttonVariants, Tooltip } from 'nova-ui-kit' import { Link } from 'react-router-dom' +import { STRING, translate } from 'utils/language' import { useFilters } from 'utils/useFilters' import { AlgorithmFilter, NotAlgorithmFilter } from './filters/algorithm-filter' import { BooleanFilter } from './filters/boolean-filter' @@ -92,6 +93,7 @@ export const FilterControl = ({ /> {clearable && filter.value && ( diff --git a/ui/src/components/filtering/filter-section.tsx b/ui/src/components/filtering/filter-section.tsx index 8f6248c9a..3c056a3cb 100644 --- a/ui/src/components/filtering/filter-section.tsx +++ b/ui/src/components/filtering/filter-section.tsx @@ -2,6 +2,7 @@ import { BREAKPOINTS } from 'components/constants' import { ChevronsUpDown } from 'lucide-react' import { Box, Button, Collapsible } from 'nova-ui-kit' import { ReactNode } from 'react' +import { STRING, translate } from 'utils/language' interface FilterSectionProps { children?: ReactNode @@ -22,7 +23,11 @@ export const FilterSection = ({
{title} - diff --git a/ui/src/components/taxon-tags/tags-form.tsx b/ui/src/components/taxon-tags/tags-form.tsx index eb949a4c5..4199d1331 100644 --- a/ui/src/components/taxon-tags/tags-form.tsx +++ b/ui/src/components/taxon-tags/tags-form.tsx @@ -30,7 +30,12 @@ export const TagsForm = ({ species }: { species: Species }) => { }} > - diff --git a/ui/src/components/terms-of-service-info/terms-of-service-info.tsx b/ui/src/components/terms-of-service-info/terms-of-service-info.tsx index dd688797d..ccaf76a90 100644 --- a/ui/src/components/terms-of-service-info/terms-of-service-info.tsx +++ b/ui/src/components/terms-of-service-info/terms-of-service-info.tsx @@ -3,6 +3,7 @@ import { Button } from 'nova-ui-kit' import { useEffect } from 'react' import { Link } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' +import { STRING, translate } from 'utils/language' import { useUserPreferences } from 'utils/userPreferences/userPreferencesContext' import styles from './terms-of-service-info.module.scss' @@ -28,6 +29,7 @@ export const TermsOfServiceInfo = () => {

diff --git a/ui/src/design-system/components/image-carousel/image-carousel.tsx b/ui/src/design-system/components/image-carousel/image-carousel.tsx index 6b7ecdd44..d76be5776 100644 --- a/ui/src/design-system/components/image-carousel/image-carousel.tsx +++ b/ui/src/design-system/components/image-carousel/image-carousel.tsx @@ -4,6 +4,7 @@ import { ChevronLeftIcon, ChevronRightIcon, ImageIcon } from 'lucide-react' import { Button } from 'nova-ui-kit' import { ReactNode, useEffect, useRef, useState } from 'react' import { Link } from 'react-router-dom' +import { STRING, translate } from 'utils/language' import { getTotalLabel } from 'utils/numberFormats' import styles from './image-carousel.module.scss' import { CarouselTheme } from './types' @@ -172,6 +173,7 @@ const MultiImageCarousel = ({ })} > {editing && ( diff --git a/ui/src/design-system/components/pagination-bar/pagination-bar.tsx b/ui/src/design-system/components/pagination-bar/pagination-bar.tsx index 8a3db4dbb..e86a81d08 100644 --- a/ui/src/design-system/components/pagination-bar/pagination-bar.tsx +++ b/ui/src/design-system/components/pagination-bar/pagination-bar.tsx @@ -1,5 +1,6 @@ import { ChevronLeft, ChevronRight } from 'lucide-react' import { Button } from 'nova-ui-kit' +import { STRING, translate } from 'utils/language' import { getPageWindow } from './getPageWindow' import { InfoLabel } from './info-label/info-label' import { PageButton } from './page-button/page-button' @@ -39,6 +40,7 @@ export const PaginationBar = ({
)} diff --git a/ui/src/pages/captures/upload-images-dialog/upload-images-dialog.tsx b/ui/src/pages/captures/upload-images-dialog/upload-images-dialog.tsx index f6f0a4179..25482f719 100644 --- a/ui/src/pages/captures/upload-images-dialog/upload-images-dialog.tsx +++ b/ui/src/pages/captures/upload-images-dialog/upload-images-dialog.tsx @@ -334,7 +334,7 @@ const DefaultPipelineInfo = ({ project }: { project: ProjectDetails }) => ( - diff --git a/ui/src/pages/occurrence-details/identification-card/human-identification.tsx b/ui/src/pages/occurrence-details/identification-card/human-identification.tsx index 9f73a7b92..903294473 100644 --- a/ui/src/pages/occurrence-details/identification-card/human-identification.tsx +++ b/ui/src/pages/occurrence-details/identification-card/human-identification.tsx @@ -17,6 +17,7 @@ import { Link, useParams } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { getAppRoute } from 'utils/getAppRoute' +import { STRING, translate } from 'utils/language' import { UserInfo, UserPermission } from 'utils/user/types' import { Agree } from '../agree/agree' @@ -109,6 +110,7 @@ export const HumanIdentification = ({ )} {showDelete && ( diff --git a/ui/src/pages/project/entities/delete-entity-dialog.tsx b/ui/src/pages/project/entities/delete-entity-dialog.tsx index a211c928d..878cd7b6d 100644 --- a/ui/src/pages/project/entities/delete-entity-dialog.tsx +++ b/ui/src/pages/project/entities/delete-entity-dialog.tsx @@ -26,7 +26,12 @@ export const DeleteEntityDialog = ({ return ( - diff --git a/ui/src/pages/project/entities/details-form/capture-set-details-form.tsx b/ui/src/pages/project/entities/details-form/capture-set-details-form.tsx index a80ba05a9..03f2be3fe 100644 --- a/ui/src/pages/project/entities/details-form/capture-set-details-form.tsx +++ b/ui/src/pages/project/entities/details-form/capture-set-details-form.tsx @@ -244,6 +244,7 @@ export const CaptureSetDetailsForm = ({ /> {field.value && ( diff --git a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx b/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx index 23803c79e..52708b2ad 100644 --- a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx +++ b/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx @@ -3,6 +3,7 @@ import { TimelineTick } from 'data-services/models/timeline-tick' import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import { Button } from 'nova-ui-kit' import { useEffect, useState } from 'react' +import { STRING, translate } from 'utils/language' import { findClosestCaptureId } from '../utils' import styles from './capture-navigation.module.scss' @@ -87,6 +88,7 @@ export const CaptureNavigation = ({ return (