Friday hotfixes (#4776)

jpggvilaca · web-flow · commit 2c55cc54d7b7 · 2025-09-26T16:47:27.000+02:00
diff --git a/application/ui/src/features/annotator/types.ts b/application/ui/src/features/annotator/types.ts
@@ -30,7 +30,7 @@ export interface Polygon {
 
 export type Shape = Rect | Polygon;
 
-export type Label = { id: string; name: string; color: string; isPrediction: boolean; score?: number };
+export type Label = { id: string; name: string; color: string; isPrediction?: boolean; score?: number };
 
 export type Annotation = {
     id: string;
diff --git a/application/ui/src/features/project/create/create-project-form.tsx b/application/ui/src/features/project/create/create-project-form.tsx
@@ -9,7 +9,7 @@ import { v4 as uuid } from 'uuid';
 
 import { $api } from '../../../api/client';
 import { paths } from '../../../router';
-import { LabelItemProps } from '../label-selection/interface';
+import { Label } from '../../annotator/types';
 import { LabelSelection } from '../label-selection/label-selection.component';
 import { TaskType } from '../task-selection/interface';
 import { TaskSelection } from '../task-selection/task-selection.component';
@@ -19,9 +19,7 @@ import classes from './create-project-form.module.scss';
 
 export const CreateProjectForm = () => {
     const [selectedTask, setSelectedTask] = useState<TaskType>('detection');
-    const [labels, setLabels] = useState<Omit<LabelItemProps, 'onDelete'>[]>([
-        { id: uuid(), colorValue: '#F20004', nameValue: 'Car' },
-    ]);
+    const [labels, setLabels] = useState<Label[]>([{ id: uuid(), color: '#F20004', name: 'Car' }]);
     const [name, setName] = useState<string>('Project #1');
 
     const navigate = useNavigate();
@@ -39,7 +37,7 @@ export const CreateProjectForm = () => {
                     task: {
                         task_type: selectedTask,
                         exclusive_labels: selectedTask === 'classification',
-                        labels: labels.map((label) => ({ name: label.nameValue })),
+                        labels: labels.map((label) => ({ name: label.name })),
                     },
                     name,
                 },
diff --git a/application/ui/src/features/project/details/project-details.component.test.tsx b/application/ui/src/features/project/details/project-details.component.test.tsx
@@ -79,9 +79,9 @@ describe('ProjectDetails', () => {
 
         // Pipeline section headers
         expect(await screen.findByRole('heading', { name: 'Pipeline' })).toBeInTheDocument();
-        expect(screen.getByRole('heading', { name: 'Source(s)' })).toBeInTheDocument();
-        expect(screen.getByRole('heading', { name: 'Model(s)' })).toBeInTheDocument();
-        expect(screen.getByRole('heading', { name: 'Sink(s)' })).toBeInTheDocument();
+        expect(screen.getByRole('heading', { name: 'Source' })).toBeInTheDocument();
+        expect(screen.getByRole('heading', { name: 'Model' })).toBeInTheDocument();
+        expect(screen.getByRole('heading', { name: 'Sink' })).toBeInTheDocument();
 
         // Pipeline content
         expect(screen.getByText('video_file')).toBeInTheDocument();
diff --git a/application/ui/src/features/project/details/project-details.component.tsx b/application/ui/src/features/project/details/project-details.component.tsx
@@ -99,7 +99,7 @@ export const ProjectDetails = () => {
                             <Grid columns={repeat(3, '1fr')} rows={repeat(5, 'auto')} gap='size-300' flex='1'>
                                 <View>
                                     <Heading level={2} marginBottom={'size-300'}>
-                                        Source(s)
+                                        Source
                                     </Heading>
                                     <Flex direction={'column'} gap={'size-300'}>
                                         {Object.entries(pipeline.data.source || {}).map(
@@ -114,7 +114,7 @@ export const ProjectDetails = () => {
                                 </View>
                                 <View>
                                     <Heading level={2} marginBottom={'size-300'}>
-                                        Model(s)
+                                        Model
                                     </Heading>
                                     <Flex direction={'column'} gap={'size-300'}>
                                         {Object.entries(pipeline.data.model || {}).map(
@@ -136,7 +136,7 @@ export const ProjectDetails = () => {
                                 </View>
                                 <View>
                                     <Heading level={2} marginBottom={'size-300'}>
-                                        Sink(s)
+                                        Sink
                                     </Heading>
                                     <Flex direction={'column'} gap={'size-300'}>
                                         {Object.entries(pipeline.data.sink || {}).map(
diff --git a/application/ui/src/features/project/label-selection/interface.ts b/application/ui/src/features/project/label-selection/interface.ts
@@ -1,4 +1,10 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-export type LabelItemProps = { id: string; colorValue: string; nameValue: string; onDelete: (id: string) => void };
+import { Label } from '../../annotator/types';
+
+export type LabelItemProps = {
+    label: Label;
+    onDelete: (id: string) => void;
+    onUpdate: (label: Label) => void;
+};
diff --git a/application/ui/src/features/project/label-selection/label-selection.component.test.tsx b/application/ui/src/features/project/label-selection/label-selection.component.test.tsx
@@ -4,9 +4,10 @@
 import { Toast } from '@geti/ui';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
+import { getMockedLabel } from '../../../test-utils/mocked-labels';
 import { LabelSelection } from './label-selection.component';
 
-const mockLabels = [{ id: 'id-1', colorValue: '#F20004', nameValue: 'Car' }];
+const mockLabels = [getMockedLabel({ id: 'id-1', name: 'Car' })];
 
 const App = ({ labels = mockLabels, setLabels = vi.fn() }) => {
     return (
@@ -33,15 +34,15 @@ describe('LabelSelection', () => {
 
         expect(screen.getByLabelText('Label input for Car')).toBeInTheDocument();
         expect(mockSetLabels).toHaveBeenCalledWith(
-            expect.arrayContaining([mockLabels[0], expect.objectContaining({ nameValue: 'Object' })])
+            expect.arrayContaining([mockLabels[0], expect.objectContaining({ name: 'Object' })])
         );
     });
 
     it('deletes a label item when delete is clicked', () => {
         const mockSetLabels = vi.fn();
         render(
             <App
-                labels={[mockLabels[0], { id: 'id-2', colorValue: '#F20004', nameValue: 'People' }]}
+                labels={[mockLabels[0], getMockedLabel({ id: 'id-2', color: '#F20004', name: 'People' })]}
                 setLabels={mockSetLabels}
             />
         );
@@ -67,11 +68,20 @@ describe('LabelSelection', () => {
     });
 
     it('can edit the label name', () => {
-        render(<App />);
+        const mockSetLabels = vi.fn();
+        render(<App setLabels={mockSetLabels} />);
 
         const input = screen.getByLabelText('Label input for Car');
         fireEvent.change(input, { target: { value: 'Truck' } });
 
-        expect(screen.getByLabelText('Label input for Truck')).toBeInTheDocument();
+        expect(mockSetLabels).toHaveBeenCalledWith(
+            expect.arrayContaining([
+                expect.objectContaining({
+                    id: 'id-1',
+                    name: 'Truck',
+                    color: expect.any(String),
+                }),
+            ])
+        );
     });
 });
diff --git a/application/ui/src/features/project/label-selection/label-selection.component.tsx b/application/ui/src/features/project/label-selection/label-selection.component.tsx
@@ -1,7 +1,7 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 
 import {
     ActionButton,
@@ -19,6 +19,7 @@ import {
 import { Add, Delete } from '@geti/ui/icons';
 import { v4 as uuid } from 'uuid';
 
+import { Label } from '../../annotator/types';
 import { LabelItemProps } from './interface';
 
 import classes from './label-selection.module.scss';
@@ -55,22 +56,21 @@ const LabelInput = ({ value, onChange }: { value: string; onChange: (newValue: s
     );
 };
 
-const LabelItem = ({ id, colorValue, nameValue, onDelete }: LabelItemProps) => {
-    const [color, setColor] = useState<string>(colorValue);
-    const [name, setName] = useState<string>(nameValue);
+const LabelItem = ({ label, onDelete, onUpdate }: LabelItemProps) => {
+    const { id, name, color } = label;
 
     return (
         <Grid columns={['size-400', '1fr', 'size-400']} gap={'size-50'} maxWidth={'640px'} width={'100%'} id={id}>
             <ColorPicker
                 onChange={(newColor) => {
-                    setColor(newColor.toString());
+                    onUpdate({ ...label, color: newColor.toString() });
                 }}
                 value={color ?? undefined}
             />
             <LabelInput
                 value={name}
-                onChange={(newValue) => {
-                    setName(newValue);
+                onChange={(newName) => {
+                    onUpdate({ ...label, name: newName });
                 }}
             />
             <Flex justifyContent={'center'} alignItems={'center'}>
@@ -87,8 +87,8 @@ const LabelItem = ({ id, colorValue, nameValue, onDelete }: LabelItemProps) => {
 };
 
 type LabelSelectionProps = {
-    labels: Omit<LabelItemProps, 'onDelete'>[];
-    setLabels: Dispatch<SetStateAction<Omit<LabelItemProps, 'onDelete'>[]>>;
+    labels: Label[];
+    setLabels: Dispatch<SetStateAction<Label[]>>;
 };
 export const LabelSelection = ({ labels, setLabels }: LabelSelectionProps) => {
     const handleDeleteItem = (id: string) => {
@@ -104,12 +104,18 @@ export const LabelSelection = ({ labels, setLabels }: LabelSelectionProps) => {
             ...labels,
             {
                 id: uuid(),
-                colorValue: '',
-                nameValue: 'Object',
+                color: '',
+                name: 'Object',
             },
         ]);
     };
 
+    const handleUpdateItem = (updatedLabel: Label) => {
+        const updatedLabels = labels.map((label) => (label.id === updatedLabel.id ? updatedLabel : label));
+
+        setLabels(updatedLabels);
+    };
+
     return (
         <Flex
             direction={'column'}
@@ -121,7 +127,14 @@ export const LabelSelection = ({ labels, setLabels }: LabelSelectionProps) => {
         >
             <Flex direction={'column'} alignItems={'center'} gap={'size-100'} width={'100%'}>
                 {labels.map((label) => {
-                    return <LabelItem key={label.id} {...label} onDelete={handleDeleteItem} />;
+                    return (
+                        <LabelItem
+                            key={label.id}
+                            label={label}
+                            onDelete={handleDeleteItem}
+                            onUpdate={handleUpdateItem}
+                        />
+                    );
                 })}
             </Flex>
 
diff --git a/application/ui/src/features/project/list/menu-actions.component.tsx b/application/ui/src/features/project/list/menu-actions.component.tsx
@@ -11,6 +11,8 @@ import { paths } from '../../../router';
 export const MenuActions = ({ projectId }: { projectId: string }) => {
     const navigate = useNavigate();
 
+    const enablePipelineMutation = $api.useMutation('post', '/api/projects/{project_id}/pipeline:enable');
+
     const deleteMutation = $api.useMutation('delete', '/api/projects/{project_id}', {
         onSuccess: () => {
             toast({ type: 'success', message: 'Project deleted successfully' });
@@ -22,8 +24,19 @@ export const MenuActions = ({ projectId }: { projectId: string }) => {
 
     const handleMenuAction = (key: Key) => {
         switch (key) {
-            case 'export':
-                // Handle export action
+            case 'activate':
+                enablePipelineMutation.mutate(
+                    { params: { path: { project_id: projectId } } },
+                    {
+                        onSuccess: () => {
+                            toast({ type: 'success', message: 'Project enabled successfully' });
+                        },
+                        onError: () => {
+                            toast({ type: 'error', message: 'Failed to enable project' });
+                        },
+                    }
+                );
+
                 break;
             case 'edit':
                 navigate(paths.project.details({ projectId }));
@@ -42,8 +55,7 @@ export const MenuActions = ({ projectId }: { projectId: string }) => {
                 <MoreMenu />
             </ActionButton>
             <Menu onAction={handleMenuAction}>
-                {/* TODO: unsupported for now. Uncomment if we ever support this */}
-                {/* <Item key={'export'}>Export</Item> */}
+                <Item key={'activate'}>Activate</Item>
                 <Item key={'edit'}>Edit</Item>
                 <Item key={'delete'}>Delete</Item>
             </Menu>
diff --git a/application/ui/src/features/project/list/project-card.tsx b/application/ui/src/features/project/list/project-card.tsx
@@ -5,6 +5,7 @@ import { Flex, Heading, Tag, Text, View } from '@geti/ui';
 import { clsx } from 'clsx';
 import { NavLink } from 'react-router-dom';
 
+import { $api } from '../../../api/client';
 import { SchemaProjectInput } from '../../../api/openapi-spec';
 import thumbnailUrl from '../../../assets/mocked-project-thumbnail.png';
 import { paths } from '../../../router';
@@ -14,10 +15,15 @@ import classes from './project-list.module.scss';
 
 type ProjectCardProps = {
     item: SchemaProjectInput;
-    isActive: boolean;
 };
 
-export const ProjectCard = ({ item, isActive }: ProjectCardProps) => {
+export const ProjectCard = ({ item }: ProjectCardProps) => {
+    const pipeline = $api.useSuspenseQuery('get', '/api/projects/{project_id}/pipeline', {
+        params: { path: { project_id: item.id || '' } },
+    });
+
+    const isActive = pipeline.data?.status === 'running';
+
     return (
         // TODO: remove this empty string check once
         // https://github.com/open-edge-platform/training_extensions/issues/4721 is done
diff --git a/application/ui/src/features/project/list/project-list.component.tsx b/application/ui/src/features/project/list/project-list.component.tsx
@@ -58,8 +58,8 @@ export const ProjectList = () => {
                 >
                     <NewProjectLink />
 
-                    {projects.data.map((item, index) => (
-                        <ProjectCard key={item.id} item={item} isActive={index === 0} />
+                    {projects.data.map((item) => (
+                        <ProjectCard key={item.id} item={item} />
                     ))}
                 </Grid>
             </Content>
diff --git a/application/ui/src/test-utils/mocked-labels.ts b/application/ui/src/test-utils/mocked-labels.ts
@@ -5,7 +5,7 @@ import { Label } from '../features/annotator/types';
 
 export const getMockedLabel = (label?: Partial<Label>): Label => {
     return {
-        color: 'red',
+        color: '#ffff00',
         id: 'label-1',
         name: 'label-1',
         isPrediction: false,
