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/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/components/cookie-dialog/cookie-dialog.module.scss b/ui/src/components/cookie-dialog/cookie-dialog.module.scss index 5d670f1fe..bfe5d1f8b 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) { @@ -58,8 +58,4 @@ padding: 16px; border-radius: 0; } - - .actions { - gap: 8px; - } } 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..d35c09804 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,22 @@ export const DefaultFiltersControl = ({ field }: { field: string }) => { } export const DefaultFiltersPopover = ({ - buttonTheme = IconButtonTheme.Plain, + className, project, }: { - buttonTheme?: IconButtonTheme + className?: string project: ProjectDetails }) => ( - + {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 128b157f2..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 @@ -1,11 +1,9 @@ -import { - IconButton, - IconButtonTheme, -} from 'design-system/components/icon-button/icon-button' -import { IconType } from 'design-system/components/icon/icon' +import { XIcon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { useEffect } from 'react' import { Link } from 'react-router-dom' import { APP_ROUTES } from 'utils/constants' +import { STRING, translate } from 'utils/language' import { useUserPreferences } from 'utils/userPreferences/userPreferencesContext' import styles from './terms-of-service-info.module.scss' @@ -30,13 +28,16 @@ export const TermsOfServiceInfo = () => { Terms of Service.

- setUserPreferences({ ...userPreferences, termsMessageSeen: true }) } - /> + size="icon" + variant="ghost" + > + +
) 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..c1fbc9fb0 100644 --- a/ui/src/data-services/models/capture-details.ts +++ b/ui/src/data-services/models/capture-details.ts @@ -25,10 +25,10 @@ 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 time1 = j1.updatedAt?.getTime() ?? 0 + const time2 = j2.updatedAt?.getTime() ?? 0 - return date2.getTime() - date1.getTime() + return time1 - time2 })[0] } diff --git a/ui/src/data-services/models/capture-set.ts b/ui/src/data-services/models/capture-set.ts index 3605a0f9b..743978731 100644 --- a/ui/src/data-services/models/capture-set.ts +++ b/ui/src/data-services/models/capture-set.ts @@ -29,10 +29,10 @@ 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 time1 = j1.updatedAt?.getTime() ?? 0 + const time2 = j2.updatedAt?.getTime() ?? 0 - return date2.getTime() - date1.getTime() + return time1 - time2 })[0] } diff --git a/ui/src/data-services/models/deployment.ts b/ui/src/data-services/models/deployment.ts index 4e67293da..99b875f05 100644 --- a/ui/src/data-services/models/deployment.ts +++ b/ui/src/data-services/models/deployment.ts @@ -35,10 +35,10 @@ 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 time1 = j1.updatedAt?.getTime() ?? 0 + const time2 = j2.updatedAt?.getTime() ?? 0 - return date2.getTime() - date1.getTime() + return time1 - time2 })[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/export.ts b/ui/src/data-services/models/export.ts index 9db63c9a3..d96ee2e39 100644 --- a/ui/src/data-services/models/export.ts +++ b/ui/src/data-services/models/export.ts @@ -44,8 +44,10 @@ export class Export extends Entity { } get filtersLabels(): string[] { const filtersObj = this._data.filters || {} - return Object.entries(filtersObj).map(([key, _value]) => { + + return Object.entries(filtersObj).map(([_key, _value]) => { const value = _value as string + const key = _key.replace('collection', 'capture set') // TODO: Temporary fix until backend terminology is updated return `${snakeCaseToSentenceCase(key)}: ${value}` }) 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..26059af54 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.created_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/bulk-action-bar/bulk-action-bar.tsx b/ui/src/design-system/components/bulk-action-bar/bulk-action-bar.tsx index bf9364695..89193533f 100644 --- a/ui/src/design-system/components/bulk-action-bar/bulk-action-bar.tsx +++ b/ui/src/design-system/components/bulk-action-bar/bulk-action-bar.tsx @@ -1,6 +1,7 @@ import { XIcon } from 'lucide-react' import { Button } from 'nova-ui-kit' import { ReactNode } from 'react' +import { STRING, translate } from 'utils/language' import styles from './bulk-action-bar.module.scss' interface BulkActionBarProps { @@ -19,7 +20,12 @@ export const BulkActionBar = ({ {selectedItems.length} selected {children} - 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/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/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 ( - - + diff --git a/ui/src/design-system/components/icon-button/icon-button.module.scss b/ui/src/design-system/components/icon-button/icon-button.module.scss deleted file mode 100644 index 57b97ee11..000000000 --- a/ui/src/design-system/components/icon-button/icon-button.module.scss +++ /dev/null @@ -1,66 +0,0 @@ -@import 'src/design-system/variables/colors.scss'; -@import 'src/design-system/variables/typography.scss'; - -.iconButton { - display: flex; - align-items: center; - justify-content: center; - border: 1px solid $color-neutral-100; - outline: none; - background-color: $color-generic-white; - box-sizing: border-box; - - // Shape - &.square { - width: 28px; - height: 28px; - border-radius: 6px; - } - - &.round { - width: 24px; - height: 24px; - border-radius: 50%; - } - - &.roundLarge { - width: 32px; - height: 32px; - border-radius: 50%; - } - - // Theme - &.neutral { - background-color: $color-neutral-600; - border-color: $color-neutral-600; - } - - &.plain { - background-color: transparent; - border-color: transparent; - } - - &.primary { - background-color: $color-primary-2-500; - border-color: $color-primary-2-500; - } - - &.success { - background-color: $color-success-500; - border-color: $color-success-500; - } - - // Other - &.disabled { - opacity: 0.5; - } - - &:hover:not(.disabled) { - cursor: pointer; - opacity: 0.7; - } - - &:focus-visible { - box-shadow: 0 0 0 2px $color-generic-black; - } -} diff --git a/ui/src/design-system/components/icon-button/icon-button.tsx b/ui/src/design-system/components/icon-button/icon-button.tsx deleted file mode 100644 index 73c7e2fd1..000000000 --- a/ui/src/design-system/components/icon-button/icon-button.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import classNames from 'classnames' -import { forwardRef, MouseEvent } from 'react' -import { Icon, IconTheme, IconType } from '../icon/icon' -import { LoadingSpinner } from '../loading-spinner/loading-spinner' -import styles from './icon-button.module.scss' - -export enum IconButtonShape { - Square = 'square', - Round = 'round', - RoundLarge = 'round-large', -} - -export enum IconButtonTheme { - Default = 'default', - Neutral = 'neutral', - Plain = 'plain', - Primary = 'primary', - Success = 'success', - Error = 'error', -} - -interface IconButtonProps { - customClass?: string - disabled?: boolean - icon: IconType - iconTransform?: string - loading?: boolean - shape?: IconButtonShape - theme?: IconButtonTheme - title?: string - onClick?: (e: MouseEvent) => 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/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 1b7c8bd56..d76be5776 100644 --- a/ui/src/design-system/components/image-carousel/image-carousel.tsx +++ b/ui/src/design-system/components/image-carousel/image-carousel.tsx @@ -1,13 +1,10 @@ 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, 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' @@ -95,11 +92,7 @@ const BasicImageCarousel = ({ {image ? ( {image.alt} ) : ( - + )} @@ -179,12 +172,14 @@ 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 a264f422f..9b8a283d2 100644 --- a/ui/src/design-system/components/input/input.tsx +++ b/ui/src/design-system/components/input/input.tsx @@ -1,17 +1,19 @@ import classNames from 'classnames' import _ from 'lodash' +import { CheckIcon, EyeIcon, PenIcon, XIcon } from 'lucide-react' +import { Button } from 'nova-ui-kit' import { ChangeEvent, CSSProperties, 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' import { BasicTooltip } from '../tooltip/basic-tooltip' import styles from './input.module.scss' @@ -90,13 +92,17 @@ export const Input = forwardRef( asChild content={`${type === 'password' ? 'Show' : 'Hide'} password`} > - setType(type === 'password' ? 'text' : 'password') } - /> + size="icon" + type="button" + variant="ghost" + > + + ) : null} @@ -117,21 +123,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} @@ -185,8 +200,8 @@ export const LockedInput = ({ }) => (
- { if (editing) { setEditing(false) @@ -195,15 +210,29 @@ export const LockedInput = ({ setEditing(true) } }} - /> + size="icon" + type="button" + variant="ghost" + > + {editing ? ( + + ) : ( + + )} + {editing && ( - { setEditing(false) onSubmit() }} - /> + size="icon" + type="button" + variant="ghost" + > + + )}
@@ -223,7 +252,15 @@ export const EditableInput = ({
{!editing && ( - onEdit()} /> + )}
{children} 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/page-header/page-header.tsx b/ui/src/design-system/components/page-header/page-header.tsx index 5d0c82271..c22cb8e8d 100644 --- a/ui/src/design-system/components/page-header/page-header.tsx +++ b/ui/src/design-system/components/page-header/page-header.tsx @@ -33,7 +33,11 @@ export const PageHeader = ({

{title}

{tooltip ? ( - 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..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 { 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 { STRING, translate } from 'utils/language' import { getPageWindow } from './getPageWindow' import { InfoLabel } from './info-label/info-label' import { PageButton } from './page-button/page-button' @@ -38,12 +39,15 @@ export const PaginationBar = ({
- setPage(currentPage - 1)} - /> + size="icon" + variant="outline" + > + +
{!pageWindow.includes(firstPage) && ( <> @@ -70,12 +74,15 @@ 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.tsx b/ui/src/design-system/components/popover/popover.tsx index 0c0acfc2f..f906397ba 100644 --- a/ui/src/design-system/components/popover/popover.tsx +++ b/ui/src/design-system/components/popover/popover.tsx @@ -1,6 +1,7 @@ import * as Popover from '@radix-ui/react-popover' -import { CSSProperties, ReactNode } from 'react' -import { Icon, IconType } from '../icon/icon' +import classNames from 'classnames' +import { XIcon } from 'lucide-react' +import { ReactNode } from 'react' import styles from './popover.module.scss' const Root = ({ @@ -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) { @@ -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/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 { 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..dac4c1030 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,15 @@ export const ColumnSettings = ({ onColumnSettingsChange, }: ColumnSettingsProps) => ( - + - 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/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 17e69ebc3..3710f2d10 100644 --- a/ui/src/pages/auth/login.tsx +++ b/ui/src/pages/auth/login.tsx @@ -2,12 +2,11 @@ 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' -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 +39,6 @@ export const Login = () => { onSuccess: () => navigate(state?.to ?? APP_ROUTES.HOME), }) const { - getValues, control, handleSubmit, setError: setFieldError, @@ -83,18 +81,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..5de07dbd4 100644 --- a/ui/src/pages/auth/sign-up.tsx +++ b/ui/src/pages/auth/sign-up.tsx @@ -2,11 +2,11 @@ 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 { CheckIcon, 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 +36,6 @@ const config: FormConfig = { } export const SignUp = () => { - const navigate = useNavigate() const [signedUpEmail, setSignedUpEmail] = useState() const { control, @@ -77,12 +76,10 @@ export const SignUp = () => { config={config} control={control} /> - {errorMessage && (

{errorMessage} @@ -93,11 +90,7 @@ export const SignUp = () => {

{isSuccess ? ( <> - + {translate(STRING.MESSAGE_SIGNED_UP)} ) : ( @@ -113,12 +106,12 @@ export const SignUp = () => {

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

-
) 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/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..7245360a9 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,18 @@ export const SelectImagesSection = ({
- setImages( images.filter((image) => image.file.name !== file.name) ) } - /> + size="icon" + variant="outline" + > + +
))} @@ -69,13 +68,15 @@ export const SelectImagesSection = ({ accept={FileInputAccept.Images} multiple name="select-captures" - renderInput={(props) => ( - + renderInput={({ onClick }) => ( + )} onChange={(files) => { if (!files) { 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..ed904eaf0 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 @@ -316,7 +316,7 @@ const SectionUpload = ({ {translate(STRING.BACK)} 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..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 @@ -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,14 @@ 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..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 @@ -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..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 @@ -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,38 @@ 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..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 @@ -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..8e6bd753d 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 627d8055d..d8ce0697b 100644 --- a/ui/src/pages/deployments/deployment-columns.tsx +++ b/ui/src/pages/deployments/deployment-columns.tsx @@ -1,5 +1,7 @@ +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' 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 { @@ -8,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' @@ -200,13 +202,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', @@ -217,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..a45866f3e 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..f370a918c 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..0d8018b62 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..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,8 +11,8 @@ 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 { 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 && }
@@ -203,7 +199,7 @@ const JobStages = ({ job }: { job: Job }) => { {stage.status.type === JobStatusType.Success ? ( ) : ( 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 f46767a55..c79363286 100644 --- a/ui/src/pages/jobs/jobs-columns.tsx +++ b/ui/src/pages/jobs/jobs-columns.tsx @@ -1,14 +1,16 @@ +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' 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' 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[] = ( @@ -111,25 +113,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', @@ -142,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/occurrence-details/id-quick-actions/id-button.tsx b/ui/src/pages/occurrence-details/id-quick-actions/id-button.tsx index a2215f4ef..8b73a0fe7 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,10 @@ +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 +34,30 @@ 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..5d4d46a4a 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 @@ -14,14 +14,12 @@ interface IdQuickActionsProps { containerRef?: RefObject occurrenceIds: string[] occurrenceTaxa: Taxon[] - zIndex?: number } export const IdQuickActions = ({ containerRef, occurrenceIds = [], occurrenceTaxa = [], - zIndex, }: IdQuickActionsProps) => { const [open, setIsOpen] = useState(false) const { recentIdentifications } = useRecentIdentifications() @@ -63,17 +61,20 @@ export const IdQuickActions = ({ return ( -
{sections.map((section, index) => ( 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/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx index fc98d9b1a..b550aff3f 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) => , }, ] @@ -214,7 +215,6 @@ const TaxonCell = ({
)} diff --git a/ui/src/pages/occurrences/occurrence-gallery.tsx b/ui/src/pages/occurrences/occurrence-gallery.tsx index 88c954631..3ba1906ad 100644 --- a/ui/src/pages/occurrences/occurrence-gallery.tsx +++ b/ui/src/pages/occurrences/occurrence-gallery.tsx @@ -5,10 +5,9 @@ import galleryStyles from 'components/gallery/gallery.module.scss' import { Occurrence } from 'data-services/models/occurrence' import { Taxon } from 'data-services/models/taxa' import cardStyles from 'design-system/components/card/card.module.scss' -import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' import { LoadingSpinner } from 'design-system/components/loading-spinner/loading-spinner' import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' -import { CheckIcon } from 'lucide-react' +import { CheckIcon, ImageIcon } from 'lucide-react' import { Button, IdentificationScore } from 'nova-ui-kit' import { Agree } from 'pages/occurrence-details/agree/agree' import { IdQuickActions } from 'pages/occurrence-details/id-quick-actions/id-quick-actions' @@ -103,11 +102,7 @@ export const OccurrenceGallery = ({ ) : (
- +
)}
@@ -117,11 +112,7 @@ export const OccurrenceGallery = ({ ) : (
- +
)} @@ -134,6 +125,7 @@ export const OccurrenceGallery = ({ )} > diff --git a/ui/src/pages/project/algorithms/algorithms-columns.tsx b/ui/src/pages/project/algorithms/algorithms-columns.tsx index 711f5a523..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' @@ -32,24 +33,16 @@ 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), 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/capture-sets/capture-sets.tsx b/ui/src/pages/project/capture-sets/capture-sets.tsx index a029137ef..355aece1c 100644 --- a/ui/src/pages/project/capture-sets/capture-sets.tsx +++ b/ui/src/pages/project/capture-sets/capture-sets.tsx @@ -69,17 +69,17 @@ export const CaptureSets = () => { isFetching={isFetching} tooltip={translate(STRING.TOOLTIP_CAPTURE_SET)} > - {canCreate && ( )} + { 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/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 eda9f6f58..61b1231a4 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' @@ -31,6 +32,16 @@ export const columns: ( ), }, + { + id: 'description', + name: translate(STRING.FIELD_LABEL_DESCRIPTION), + renderCell: (item: Pipeline) => ( + + ), + }, { id: 'default', name: '', @@ -63,12 +74,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/connection-status.tsx b/ui/src/pages/project/processing-services/connection-status.tsx index 05f1e47e8..c13ca20c9 100644 --- a/ui/src/pages/project/processing-services/connection-status.tsx +++ b/ui/src/pages/project/processing-services/connection-status.tsx @@ -1,13 +1,13 @@ import { FormRow } from 'components/form/layout/layout' import { useTestProcessingServiceConnection } from 'data-services/hooks/processing-services/useTestProcessingServiceConnection' import { InputValue } from 'design-system/components/input/input' +import { StatusInfo } from 'design-system/components/status-info/status-info' +import { Status } from 'design-system/components/status-info/types' import * as Wizard from 'design-system/components/wizard/wizard' import { useEffect, useState } from 'react' import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { STRING, translate } from 'utils/language' import styles from './processing-services.module.scss' -import { StatusInfo } from './status-info/status-info' -import { Status } from './status-info/types' export const ConnectionStatus = ({ regex, @@ -128,7 +128,7 @@ export const ConnectionStatus = ({ ( - + ), }, { @@ -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/processing-services/status-info/status-info.module.scss b/ui/src/pages/project/processing-services/status-info/status-info.module.scss deleted file mode 100644 index 5e8592ea9..000000000 --- a/ui/src/pages/project/processing-services/status-info/status-info.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import 'src/design-system/variables/colors.scss'; -@import 'src/design-system/variables/typography.scss'; - -.wrapper { - display: flex; - align-items: center; - height: 38px; -} - -.content { - display: inline-flex; - align-items: center; - justify-content: flex-start; - gap: 8px; - - span { - @include paragraph-small(); - color: $color-neutral-300; - } -} - -.iconContainer { - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - box-sizing: border-box; - border-radius: 50%; - border-width: 2px; - border-style: solid; - flex-shrink: 0; - - &.notConnected { - border-color: $color-destructive-500; - } - - &.connecting { - border-color: $color-warning-500; - border-top-color: transparent; - animation: spin 0.7s ease-in-out infinite; - } - - &.connected { - border-color: $color-success-600; - } -} - -@keyframes spin { - to { - -webkit-transform: rotate(360deg); - } -} diff --git a/ui/src/pages/project/processing-services/status-info/status-info.tsx b/ui/src/pages/project/processing-services/status-info/status-info.tsx deleted file mode 100644 index a23a0162f..000000000 --- a/ui/src/pages/project/processing-services/status-info/status-info.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import classNames from 'classnames' -import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' -import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' -import styles from './status-info.module.scss' -import { Status } from './types' - -const statusInfo: { - [key in Status]: { icon?: IconType; className: string } -} = { - [Status.NotConnected]: { - icon: IconType.RadixQuestionMark, - className: styles.notConnected, - }, - [Status.Connecting]: { - className: styles.connecting, - }, - [Status.Connected]: { - icon: IconType.RadixCheck, - className: styles.connected, - }, -} - -// TODO: This component looks identical to /pages/project/storage/status-info/status-info.tsx, remove repeated code? -export const StatusInfo = ({ - status, - tooltip, -}: { - status: Status - tooltip?: string -}) => { - const info = statusInfo[status] - - return ( -
- -
-
- {info.icon && ( - - )} -
-
- -
- ) -} diff --git a/ui/src/pages/project/storage/connection-status.tsx b/ui/src/pages/project/storage/connection-status.tsx index cd687a81a..554e045a1 100644 --- a/ui/src/pages/project/storage/connection-status.tsx +++ b/ui/src/pages/project/storage/connection-status.tsx @@ -1,13 +1,13 @@ import { FormRow } from 'components/form/layout/layout' import { useTestStorageConnection } from 'data-services/hooks/storage-sources/useTestStorageConnection' import { InputContent, InputValue } from 'design-system/components/input/input' +import { StatusInfo } from 'design-system/components/status-info/status-info' +import { Status } from 'design-system/components/status-info/types' import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' import * as Wizard from 'design-system/components/wizard/wizard' import { useEffect, useState } from 'react' import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString' import { STRING, translate } from 'utils/language' -import { StatusInfo } from './status-info/status-info' -import { Status } from './status-info/types' import styles from './storage.module.scss' export const ConnectionStatus = ({ diff --git a/ui/src/pages/project/storage/status-info/status-info.module.scss b/ui/src/pages/project/storage/status-info/status-info.module.scss deleted file mode 100644 index 5e8592ea9..000000000 --- a/ui/src/pages/project/storage/status-info/status-info.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import 'src/design-system/variables/colors.scss'; -@import 'src/design-system/variables/typography.scss'; - -.wrapper { - display: flex; - align-items: center; - height: 38px; -} - -.content { - display: inline-flex; - align-items: center; - justify-content: flex-start; - gap: 8px; - - span { - @include paragraph-small(); - color: $color-neutral-300; - } -} - -.iconContainer { - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - box-sizing: border-box; - border-radius: 50%; - border-width: 2px; - border-style: solid; - flex-shrink: 0; - - &.notConnected { - border-color: $color-destructive-500; - } - - &.connecting { - border-color: $color-warning-500; - border-top-color: transparent; - animation: spin 0.7s ease-in-out infinite; - } - - &.connected { - border-color: $color-success-600; - } -} - -@keyframes spin { - to { - -webkit-transform: rotate(360deg); - } -} diff --git a/ui/src/pages/project/storage/status-info/status-info.tsx b/ui/src/pages/project/storage/status-info/status-info.tsx deleted file mode 100644 index 6cb306b4e..000000000 --- a/ui/src/pages/project/storage/status-info/status-info.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import classNames from 'classnames' -import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon' -import { BasicTooltip } from 'design-system/components/tooltip/basic-tooltip' -import styles from './status-info.module.scss' -import { Status } from './types' - -const statusInfo: { - [key in Status]: { icon?: IconType; className: string } -} = { - [Status.NotConnected]: { - icon: IconType.RadixQuestionMark, - className: styles.notConnected, - }, - [Status.Connecting]: { - className: styles.connecting, - }, - [Status.Connected]: { - icon: IconType.RadixCheck, - className: styles.connected, - }, -} - -export const StatusInfo = ({ - status, - tooltip, -}: { - status: Status - tooltip?: string -}) => { - const info = statusInfo[status] - - return ( -
- -
-
- {info.icon && ( - - )} -
-
- -
- ) -} diff --git a/ui/src/pages/project/storage/status-info/types.ts b/ui/src/pages/project/storage/status-info/types.ts deleted file mode 100644 index 1f3bc62a7..000000000 --- a/ui/src/pages/project/storage/status-info/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum Status { - NotConnected, - Connecting, - Connected, -} 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/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)} {totalCaptures && ( {currentIndex?.toLocaleString()} / {totalCaptures.toLocaleString()} )} - + size="icon" + > + + ) } diff --git a/ui/src/pages/session-details/playback/frame/frame.tsx b/ui/src/pages/session-details/playback/frame/frame.tsx index 10915e6ea..843d3362a 100644 --- a/ui/src/pages/session-details/playback/frame/frame.tsx +++ b/ui/src/pages/session-details/playback/frame/frame.tsx @@ -248,6 +248,7 @@ const FrameDetections = ({ {detection.label}