Skip to content

Commit 67c2783

Browse files
annavikannavik
authored
Job form improvements (and some refactoring) (#1151)
* chore: replace old select components everywhere in app * chore: streamline placeholder labels * chore: rename EntitiesPicker to EntityPicker * feat: make capture set and pipeline required fields in job form * fix: improve small screen layout in job details dialog * fix: cleanup * fix: address PR comments
1 parent 8580069 commit 67c2783

30 files changed

Lines changed: 195 additions & 520 deletions

‎ui/src/components/filtering/filter-section.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const FilterSection = ({
1919
className="space-y-4"
2020
defaultOpen={window.innerWidth >= BREAKPOINTS.MD ? defaultOpen : false}
2121
>
22-
<div className="flex items-center justify-between ml-2">
22+
<div className="flex items-center justify-between">
2323
<span className="body-overline font-bold">{title}</span>
2424
<Collapsible.Trigger asChild>
2525
<Button size="icon" variant="ghost">

‎ui/src/components/filtering/filters/algorithm-filter.tsx‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,22 @@
1-
import { useAlgorithms } from 'data-services/hooks/algorithm/useAlgorithms'
2-
import { Select } from 'nova-ui-kit'
3-
import { useParams } from 'react-router-dom'
1+
import { API_ROUTES } from 'data-services/constants'
2+
import { EntityPicker } from 'design-system/components/select/entity-picker'
43
import { FilterProps } from './types'
54

65
export const AlgorithmFilter = ({
76
value,
87
onAdd,
9-
placeholder = 'All algorithms',
10-
}: FilterProps & { placeholder?: string }) => {
11-
const { projectId } = useParams()
12-
const { algorithms = [], isLoading } = useAlgorithms({
13-
projectId: projectId as string,
14-
})
15-
16-
return (
17-
<Select.Root
18-
disabled={algorithms.length === 0}
19-
value={value ?? ''}
20-
onValueChange={onAdd}
21-
>
22-
<Select.Trigger loading={isLoading}>
23-
<Select.Value placeholder={placeholder} />
24-
</Select.Trigger>
25-
<Select.Content className="max-h-72">
26-
{algorithms.map((a) => (
27-
<Select.Item key={a.id} value={a.id}>
28-
{a.name}
29-
</Select.Item>
30-
))}
31-
</Select.Content>
32-
</Select.Root>
33-
)
34-
}
8+
}: FilterProps & { placeholder?: string }) => (
9+
<EntityPicker
10+
collection={API_ROUTES.ALGORITHM}
11+
onValueChange={(value) => {
12+
if (value) {
13+
onAdd(value)
14+
}
15+
}}
16+
value={value}
17+
/>
18+
)
3519

3620
export const NotAlgorithmFilter = (props: FilterProps) => (
37-
<AlgorithmFilter {...props} placeholder="No algorithms" />
21+
<AlgorithmFilter {...props} />
3822
)

‎ui/src/components/filtering/filters/boolean-filter.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Select } from 'nova-ui-kit'
2+
import { STRING, translate } from 'utils/language'
23
import { booleanToString, stringToBoolean } from '../utils'
34
import { FilterProps } from './types'
45

@@ -26,9 +27,9 @@ export const BooleanFilter = ({
2627
}}
2728
>
2829
<Select.Trigger>
29-
<Select.Value placeholder="Select a value" />
30+
<Select.Value placeholder={translate(STRING.SELECT_PLACEHOLDER)} />
3031
</Select.Trigger>
31-
<Select.Content className="max-h-72">
32+
<Select.Content>
3233
{OPTIONS.map((option) => (
3334
<Select.Item
3435
key={booleanToString(option.value)}

‎ui/src/components/filtering/filters/capture-set-filter.tsx‎

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,17 @@
1-
import { useCaptureSets } from 'data-services/hooks/capture-sets/useCaptureSets'
2-
import { Select } from 'nova-ui-kit'
3-
import { useParams } from 'react-router-dom'
1+
import { API_ROUTES } from 'data-services/constants'
2+
import { EntityPicker } from 'design-system/components/select/entity-picker'
43
import { FilterProps } from './types'
54

6-
export const CaptureSetFilter = ({ value, onAdd }: FilterProps) => {
7-
const { projectId } = useParams()
8-
const { captureSets = [], isLoading } = useCaptureSets({
9-
projectId: projectId as string,
10-
})
11-
12-
return (
13-
<Select.Root
14-
disabled={captureSets.length === 0}
15-
value={value ?? ''}
16-
onValueChange={onAdd}
17-
>
18-
<Select.Trigger loading={isLoading}>
19-
<Select.Value placeholder="All capture sets" />
20-
</Select.Trigger>
21-
<Select.Content className="max-h-72">
22-
{captureSets.map((c) => (
23-
<Select.Item key={c.id} value={c.id}>
24-
{c.name}
25-
</Select.Item>
26-
))}
27-
</Select.Content>
28-
</Select.Root>
29-
)
30-
}
5+
export const CaptureSetFilter = ({ onAdd, onClear, value }: FilterProps) => (
6+
<EntityPicker
7+
collection={API_ROUTES.CAPTURE_SETS}
8+
onValueChange={(value) => {
9+
if (value) {
10+
onAdd(value)
11+
} else {
12+
onClear()
13+
}
14+
}}
15+
value={value}
16+
/>
17+
)

‎ui/src/components/filtering/filters/pipeline-filter.tsx‎

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,17 @@
1-
import { usePipelines } from 'data-services/hooks/pipelines/usePipelines'
2-
import { Select } from 'nova-ui-kit'
3-
import { useParams } from 'react-router-dom'
1+
import { API_ROUTES } from 'data-services/constants'
2+
import { EntityPicker } from 'design-system/components/select/entity-picker'
43
import { FilterProps } from './types'
54

6-
export const PipelineFilter = ({ value, onAdd }: FilterProps) => {
7-
const { projectId } = useParams()
8-
const { pipelines = [], isLoading } = usePipelines({
9-
projectId: projectId as string,
10-
})
11-
12-
return (
13-
<Select.Root
14-
disabled={pipelines.length === 0}
15-
value={value ?? ''}
16-
onValueChange={onAdd}
17-
>
18-
<Select.Trigger loading={isLoading}>
19-
<Select.Value placeholder="All pipelines" />
20-
</Select.Trigger>
21-
<Select.Content className="max-h-72">
22-
{pipelines.map((p) => (
23-
<Select.Item key={p.id} value={p.id}>
24-
{p.name}
25-
</Select.Item>
26-
))}
27-
</Select.Content>
28-
</Select.Root>
29-
)
30-
}
5+
export const PipelineFilter = ({ onAdd, onClear, value }: FilterProps) => (
6+
<EntityPicker
7+
collection={API_ROUTES.PIPELINES}
8+
onValueChange={(value) => {
9+
if (value) {
10+
onAdd(value)
11+
} else {
12+
onClear()
13+
}
14+
}}
15+
value={value}
16+
/>
17+
)

‎ui/src/components/filtering/filters/station-filter.tsx‎

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,17 @@
1-
import { useDeployments } from 'data-services/hooks/deployments/useDeployments'
2-
import { Select } from 'nova-ui-kit'
3-
import { useParams } from 'react-router-dom'
1+
import { API_ROUTES } from 'data-services/constants'
2+
import { EntityPicker } from 'design-system/components/select/entity-picker'
43
import { FilterProps } from './types'
54

6-
export const StationFilter = ({ value, onAdd }: FilterProps) => {
7-
const { projectId } = useParams()
8-
const { deployments = [], isLoading } = useDeployments({
9-
projectId: projectId as string,
10-
})
11-
12-
return (
13-
<Select.Root
14-
disabled={deployments.length === 0}
15-
value={value ?? ''}
16-
onValueChange={onAdd}
17-
>
18-
<Select.Trigger loading={isLoading}>
19-
<Select.Value placeholder="All stations" />
20-
</Select.Trigger>
21-
<Select.Content className="max-h-72">
22-
{deployments.map((d) => (
23-
<Select.Item key={d.id} value={d.id}>
24-
{d.name}
25-
</Select.Item>
26-
))}
27-
</Select.Content>
28-
</Select.Root>
29-
)
30-
}
5+
export const StationFilter = ({ onAdd, onClear, value }: FilterProps) => (
6+
<EntityPicker
7+
collection={API_ROUTES.DEPLOYMENTS}
8+
onValueChange={(value) => {
9+
if (value) {
10+
onAdd(value)
11+
} else {
12+
onClear()
13+
}
14+
}}
15+
value={value}
16+
/>
17+
)

‎ui/src/components/filtering/filters/status-filter.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Job, SERVER_JOB_STATUS_CODES } from 'data-services/models/job'
22
import { Select } from 'nova-ui-kit'
3+
import { STRING, translate } from 'utils/language'
34
import { FilterProps } from './types'
45

56
const OPTIONS = SERVER_JOB_STATUS_CODES.map((code) => {
@@ -10,10 +11,10 @@ const OPTIONS = SERVER_JOB_STATUS_CODES.map((code) => {
1011
}
1112
}).sort((o1, o2) => o1.type - o2.type)
1213

13-
export const StatusFilter = ({ value, onAdd }: FilterProps) => (
14+
export const StatusFilter = ({ onAdd, value }: FilterProps) => (
1415
<Select.Root value={value ?? ''} onValueChange={onAdd}>
1516
<Select.Trigger>
16-
<Select.Value placeholder="Select a value" />
17+
<Select.Value placeholder={translate(STRING.SELECT_PLACEHOLDER)} />
1718
</Select.Trigger>
1819
<Select.Content>
1920
{OPTIONS.map((option) => (

‎ui/src/components/filtering/filters/tag-filter.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Select } from 'nova-ui-kit'
2+
import { STRING, translate } from 'utils/language'
23
import { FilterProps } from './types'
34

45
export const TagFilter = ({ data = [], value, onAdd }: FilterProps) => {
@@ -11,9 +12,9 @@ export const TagFilter = ({ data = [], value, onAdd }: FilterProps) => {
1112
onValueChange={onAdd}
1213
>
1314
<Select.Trigger>
14-
<Select.Value placeholder="Select a value" />
15+
<Select.Value placeholder={translate(STRING.SELECT_PLACEHOLDER)} />
1516
</Select.Trigger>
16-
<Select.Content className="max-h-72">
17+
<Select.Content>
1718
{tags.map((option) => (
1819
<Select.Item key={option.id} value={`${option.id}`}>
1920
{option.name}

‎ui/src/components/filtering/filters/taxa-list-filter.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { TaxaList } from 'data-services/models/taxa-list'
22
import { Select } from 'nova-ui-kit'
3+
import { STRING, translate } from 'utils/language'
34
import { FilterProps } from './types'
45

56
export const TaxaListFilter = ({ data = [], value, onAdd }: FilterProps) => {
@@ -12,9 +13,9 @@ export const TaxaListFilter = ({ data = [], value, onAdd }: FilterProps) => {
1213
onValueChange={onAdd}
1314
>
1415
<Select.Trigger>
15-
<Select.Value placeholder="All taxa lists" />
16+
<Select.Value placeholder={translate(STRING.SELECT_PLACEHOLDER)} />
1617
</Select.Trigger>
17-
<Select.Content className="max-h-72">
18+
<Select.Content>
1819
{taxaLists.map((list) => (
1920
<Select.Item key={list.id} value={list.id}>
2021
{list.name}

‎ui/src/components/filtering/filters/taxon-filter.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ChevronDownIcon, Loader2Icon } from 'lucide-react'
44
import { Button, Popover } from 'nova-ui-kit'
55
import { useState } from 'react'
66
import { useParams } from 'react-router-dom'
7+
import { STRING, translate } from 'utils/language'
78
import { FilterProps } from './types'
89

910
export const TaxonFilter = ({ value, onAdd, onClear }: FilterProps) => {
@@ -18,7 +19,7 @@ export const TaxonFilter = ({ value, onAdd, onClear }: FilterProps) => {
1819
if (value && isLoading) {
1920
return 'Loading...'
2021
}
21-
return 'All taxa'
22+
return translate(STRING.SELECT_TAXON_PLACEHOLDER)
2223
})()
2324

2425
return (

0 commit comments

Comments
 (0)