Skip to content

Commit 761bf09

Browse files
alex-strukalex-struk
authored
Merge pull request #206 from bcgov/chore/move-local-changes-20260624
Update frontend components and styles
2 parents 67cea5d + 65808df commit 761bf09

21 files changed

Lines changed: 405 additions & 227 deletions

‎apps/frontend/src/App.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,26 @@
99
}
1010

1111
.app-shell-bcds-header .bcds-header--container {
12+
display: flex;
13+
align-items: center;
1214
max-width: none;
1315
width: 100%;
1416
}
1517

1618
.app-shell-bcds-header .bcds-header--title {
1719
flex-grow: 0;
20+
margin-right: auto;
1821
}
1922

2023
.app-shell-bcds-header .app-shell-header-actions {
2124
display: flex;
2225
flex-shrink: 0;
2326
margin-left: auto;
27+
justify-content: flex-end;
28+
}
29+
30+
.app-shell-bcds-header .app-shell-header-actions .mantine-Group-root {
31+
flex-wrap: nowrap;
2432
}
2533

2634
/* Compact name + email in BC header utilities */
@@ -40,6 +48,17 @@
4048
margin-top: 0.25rem;
4149
}
4250

51+
/* Tight title/description pairing in standard page headers */
52+
.bcds-page-header__title-block .bcds-react-aria-Heading,
53+
.bcds-page-header__title-block .bcds-react-aria-Text {
54+
margin: 0 !important;
55+
}
56+
57+
.bcds-page-header__meta {
58+
margin-top: var(--layout-margin-xsmall);
59+
min-height: 3rem;
60+
}
61+
4362
/* BC footer at end of main scroll area (gov.bc.ca pattern — not fixed to viewport) */
4463
.app-shell-bcds-footer {
4564
margin-top: var(--layout-margin-medium);

‎apps/frontend/src/components/upload/DocumentUploadPanel.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -302,8 +302,10 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
302302
<div className="bcds-upload-panel">
303303
<PanelCard>
304304
<div className="bcds-upload-panel__intro">
305-
<Title order={3}>Upload images</Title>
306-
<Text c="dimmed" size="sm">
305+
<Title order={3} mt={0} mb={0}>
306+
Upload images
307+
</Title>
308+
<Text c="dimmed" size="sm" mt={0} mb={0}>
307309
Select a processing model, then drag and drop scans or mobile
308310
captures. Click Upload to start OCR processing.
309311
</Text>
@@ -373,10 +375,10 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
373375
</Dropzone.Idle>
374376

375377
<div>
376-
<Text size="xl" inline>
378+
<Text size="xl" mt={0} mb={0}>
377379
Drag images or click to browse
378380
</Text>
379-
<Text size="sm" c="dimmed" inline mt={7}>
381+
<Text size="sm" c="dimmed" mt="xs" mb={0}>
380382
Accepts {SUPPORTED_FILE_TYPES.join(", ")} up to{" "}
381383
{Math.round(MAX_FILE_SIZE / (1024 * 1024))} MB
382384
</Text>
@@ -412,6 +414,7 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
412414
activeGroup === null
413415
}
414416
loading={isUploading}
417+
leftSection={<IconUpload size={16} />}
415418
data-disabled={activeGroup === null || undefined}
416419
>
417420
{isUploading ? "Uploading..." : "Upload"}
@@ -449,7 +452,7 @@ export const DocumentUploadPanel: React.FC<DocumentUploadPanelProps> = ({
449452
<IconFileDescription size={20} />
450453
</Avatar>
451454
<div className="bcds-upload-queue-row__meta">
452-
<Group gap={4} mb={4} wrap="nowrap">
455+
<Group gap="xs" mb="xs" wrap="nowrap">
453456
<Text fw={600} truncate>
454457
{item.file.name}
455458
</Text>

‎apps/frontend/src/features/annotation/template-models/pages/ModelDetailPage.tsx‎

Lines changed: 93 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
IconCopy,
55
IconFileDescription,
66
IconFileImport,
7+
IconPencil,
78
IconPhoto,
89
IconPlus,
910
IconSparkles,
@@ -257,6 +258,7 @@ export const ModelDetailPage: FC = () => {
257258
const response = await apiService.post<{
258259
labelingDocument?: { id: string };
259260
code?: string;
261+
message?: string;
260262
}>(`/template-models/${routeModelId}/upload`, payload);
261263

262264
if (
@@ -478,7 +480,7 @@ export const ModelDetailPage: FC = () => {
478480

479481
return (
480482
<Stack gap="lg">
481-
<Group justify="space-between">
483+
<Stack gap="xs">
482484
<Group>
483485
<Button
484486
variant="subtle"
@@ -487,55 +489,69 @@ export const ModelDetailPage: FC = () => {
487489
>
488490
Back
489491
</Button>
490-
<Stack gap={2}>
491-
<Title order={2}>{templateModel?.name || "Template Model"}</Title>
492-
{copyableModelId && (
493-
<Group gap="xs">
494-
<Code>{copyableModelId}</Code>
495-
{activeTrainedModel && (
496-
<Code c="dimmed">v{activeTrainedModel.version}</Code>
497-
)}
498-
<CopyButton value={copyableModelId}>
499-
{({ copied, copy }) => (
500-
<Tooltip
501-
label={
502-
copied
503-
? "Copied!"
504-
: activeTrainedModel
505-
? `Copy active model ID (v${activeTrainedModel.version})`
506-
: "Copy model ID"
507-
}
508-
>
509-
<ActionIcon
510-
color={copied ? "green" : "gray"}
511-
variant="subtle"
512-
size="sm"
513-
onClick={copy}
514-
>
515-
{copied ? (
516-
<IconCheck size={14} />
517-
) : (
518-
<IconCopy size={14} />
519-
)}
520-
</ActionIcon>
521-
</Tooltip>
522-
)}
523-
</CopyButton>
524-
</Group>
525-
)}
526-
<Text size="sm" c="dimmed">
527-
{templateModel?.description ||
528-
"Manage template model documents and schema"}
529-
</Text>
530-
</Stack>
531492
</Group>
532-
<Badge
533-
variant="light"
534-
color={getStatusBadgeColor(templateModel?.status || "draft")}
493+
494+
<Stack
495+
className="bcds-page-header__title-block"
496+
style={{ gap: "var(--layout-margin-xsmall)" }}
535497
>
536-
{templateModel?.status || "draft"}
537-
</Badge>
538-
</Group>
498+
<Group gap="sm" align="center" wrap="wrap">
499+
<Title order={2} mt={0} mb={0}>
500+
{templateModel?.name || "Template Model"}
501+
</Title>
502+
<Badge
503+
variant="light"
504+
color={getStatusBadgeColor(templateModel?.status || "draft")}
505+
>
506+
{templateModel?.status || "draft"}
507+
</Badge>
508+
</Group>
509+
<Text size="sm" c="dimmed" mt={0} mb={0}>
510+
{templateModel?.description ||
511+
"Manage template model documents and schema"}
512+
</Text>
513+
</Stack>
514+
515+
<Group gap="xs" wrap="wrap">
516+
{copyableModelId && (
517+
<>
518+
<Text size="sm" c="dimmed" fw={500}>
519+
Model ID
520+
</Text>
521+
<Code>{copyableModelId}</Code>
522+
{activeTrainedModel && (
523+
<Code c="dimmed">v{activeTrainedModel.version}</Code>
524+
)}
525+
<CopyButton value={copyableModelId}>
526+
{({ copied, copy }) => (
527+
<Tooltip
528+
label={
529+
copied
530+
? "Copied!"
531+
: activeTrainedModel
532+
? `Copy active model ID (v${activeTrainedModel.version})`
533+
: "Copy model ID"
534+
}
535+
>
536+
<ActionIcon
537+
color={copied ? "green" : "gray"}
538+
variant="subtle"
539+
size="sm"
540+
onClick={copy}
541+
>
542+
{copied ? (
543+
<IconCheck size={14} />
544+
) : (
545+
<IconCopy size={14} />
546+
)}
547+
</ActionIcon>
548+
</Tooltip>
549+
)}
550+
</CopyButton>
551+
</>
552+
)}
553+
</Group>
554+
</Stack>
539555

540556
<Tabs defaultValue="documents">
541557
<Tabs.List>
@@ -551,7 +567,7 @@ export const ModelDetailPage: FC = () => {
551567
<Group justify="space-between">
552568
<Text fw={600}>Template model documents</Text>
553569
<Button
554-
leftSection={<IconPlus size={16} />}
570+
leftSection={<IconUpload size={16} />}
555571
onClick={() => setIsUploadOpen(true)}
556572
>
557573
Upload documents
@@ -734,25 +750,29 @@ export const ModelDetailPage: FC = () => {
734750
</DataTable.Td>
735751
<DataTable.Td>{field.displayOrder}</DataTable.Td>
736752
<DataTable.Td>
737-
<Group gap="xs">
738-
<Button
739-
size="xs"
740-
variant="light"
741-
onClick={() => {
742-
setEditingField(field);
743-
setSchemaEditorOpen(true);
744-
}}
745-
>
746-
Edit
747-
</Button>
748-
<Button
749-
size="xs"
750-
variant="subtle"
751-
color="red"
752-
onClick={() => deleteField(field.id)}
753-
>
754-
Delete
755-
</Button>
753+
<Group gap="xs" justify="flex-start" wrap="nowrap">
754+
<Tooltip label="Edit field" withArrow>
755+
<ActionIcon
756+
variant="subtle"
757+
onClick={() => {
758+
setEditingField(field);
759+
setSchemaEditorOpen(true);
760+
}}
761+
aria-label={`Edit field ${field.fieldKey}`}
762+
>
763+
<IconPencil size={16} />
764+
</ActionIcon>
765+
</Tooltip>
766+
<Tooltip label="Delete field" withArrow>
767+
<ActionIcon
768+
variant="subtle"
769+
color="red"
770+
onClick={() => deleteField(field.id)}
771+
aria-label={`Delete field ${field.fieldKey}`}
772+
>
773+
<IconTrash size={16} />
774+
</ActionIcon>
775+
</Tooltip>
756776
</Group>
757777
</DataTable.Td>
758778
</DataTable.Tr>
@@ -857,7 +877,11 @@ export const ModelDetailPage: FC = () => {
857877
>
858878
Clear all
859879
</Button>
860-
<Button onClick={handleUpload} loading={isUploading}>
880+
<Button
881+
onClick={handleUpload}
882+
loading={isUploading}
883+
leftSection={<IconUpload size={16} />}
884+
>
861885
{isUploading ? "Uploading..." : "Upload"}
862886
</Button>
863887
</Group>

‎apps/frontend/src/features/benchmarking/components/FileUploadDialog.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,7 @@ export function FileUploadDialog({
264264
onClick={handleUpload}
265265
disabled={selectedFiles.length === 0 || isUploading}
266266
loading={isUploading}
267+
leftSection={<IconUpload size={16} />}
267268
data-testid="upload-submit-btn"
268269
>
269270
Upload

‎apps/frontend/src/features/benchmarking/pages/DatasetDetailPage.tsx‎

Lines changed: 39 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -258,22 +258,38 @@ export function DatasetDetailPage() {
258258
return (
259259
<>
260260
<Stack gap="lg">
261-
<Stack gap={2}>
262-
<Group justify="space-between">
263-
<Group gap="sm" align="center">
264-
<Button
265-
variant="subtle"
266-
leftSection={<IconArrowLeft size={16} />}
267-
onClick={() => navigate("/benchmarking/datasets")}
268-
data-testid="back-to-datasets-btn"
269-
>
270-
Back
271-
</Button>
272-
<Title order={2} data-testid="dataset-name-title">
261+
<Stack gap="xs">
262+
<Group>
263+
<Button
264+
variant="subtle"
265+
leftSection={<IconArrowLeft size={16} />}
266+
onClick={() => navigate("/benchmarking/datasets")}
267+
data-testid="back-to-datasets-btn"
268+
>
269+
Back
270+
</Button>
271+
</Group>
272+
273+
<Group justify="space-between" align="flex-start" wrap="wrap">
274+
<Stack
275+
className="bcds-page-header__title-block"
276+
style={{ gap: "var(--layout-margin-xsmall)" }}
277+
>
278+
<Title order={2} data-testid="dataset-name-title" mt={0} mb={0}>
273279
{dataset.name}
274280
</Title>
275-
</Group>
276-
<Group gap="sm">
281+
<Text
282+
c="dimmed"
283+
size="sm"
284+
data-testid="dataset-description"
285+
mt={0}
286+
mb={0}
287+
>
288+
{dataset.description || "No description"}
289+
</Text>
290+
</Stack>
291+
292+
<Group gap="sm" className="bcds-page-header__meta">
277293
<Button
278294
variant="light"
279295
leftSection={<IconFileCheck size={16} />}
@@ -292,9 +308,15 @@ export function DatasetDetailPage() {
292308
</Button>
293309
</Group>
294310
</Group>
295-
<Text c="dimmed" size="sm" data-testid="dataset-description">
296-
{dataset.description || "No description"}
297-
</Text>
311+
312+
<Group gap="xs" wrap="wrap">
313+
<Text size="sm" c="dimmed" fw={500}>
314+
Dataset ID
315+
</Text>
316+
<Text size="sm" c="dimmed" data-testid="dataset-id-text">
317+
{dataset.id}
318+
</Text>
319+
</Group>
298320
</Stack>
299321

300322
<Tabs

0 commit comments

Comments
 (0)