fix Pr comments

camiloHimura · camiloHimura · commit 97f72da661d3 · 2025-11-05T02:24:48.000+01:00
Signed-off-by: Colorado, Camilo &lt;camilo.colorado@intel.com&gt;
diff --git a/application/ui/src/features/inspect/toolbar/pipeline-configuration.component.tsx b/application/ui/src/features/inspect/toolbar/pipeline-configuration.component.tsx
@@ -37,10 +37,10 @@ export const InputOutputSetup = () => {
                 <Content>
                     <Tabs aria-label='Dataset import tabs' height={'100%'}>
                         <TabList>
-                            <Item key='sources' textValue='FoR'>
+                            <Item key='sources' textValue='Sources'>
                                 <Text>Input</Text>
                             </Item>
-                            <Item key='sinks' textValue='MaR'>
+                            <Item key='sinks' textValue='Sinks'>
                                 <Text>Output</Text>
                             </Item>
                         </TabList>
diff --git a/application/ui/src/features/inspect/toolbar/sources/add-source/add-source.component.tsx b/application/ui/src/features/inspect/toolbar/sources/add-source/add-source.component.tsx
@@ -4,8 +4,8 @@
 import { ReactNode } from 'react';
 
 import { Button, Form } from '@geti/ui';
-import { useConnectSourceToPipeline } from 'src/hooks/use-pipeline.hook';
 
+import { useConnectSourceToPipeline } from '../../../../../hooks/use-pipeline.hook';
 import { useSourceAction } from '../hooks/use-source-action.hook';
 import { SourceConfig } from '../util';
 
diff --git a/application/ui/src/features/inspect/toolbar/sources/add-source/add-source.test.tsx b/application/ui/src/features/inspect/toolbar/sources/add-source/add-source.test.tsx
@@ -3,17 +3,17 @@
 
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useConnectSourceToPipeline } from 'src/hooks/use-pipeline.hook';
 import { TestProviders } from 'src/providers';
 
+import { useConnectSourceToPipeline } from '../../../../../hooks/use-pipeline.hook';
 import { useSourceMutation } from '../hooks/use-source-mutation.hook';
 import { IpCameraFields } from '../ip-camera/ip-camera-fields.component';
-import { ipCameraBodyFormatter, ipCameraInitialConfig } from '../ip-camera/utils';
+import { getIpCameraInitialConfig, ipCameraBodyFormatter } from '../ip-camera/utils';
 import { IPCameraSourceConfig } from '../util';
 import { AddSource } from './add-source.component';
 
 vi.mock('../hooks/use-source-mutation.hook');
-vi.mock('src/hooks/use-pipeline.hook');
+vi.mock('../../../../../hooks/use-pipeline.hook');
 
 describe('add-source', () => {
     beforeEach(() => {
@@ -26,6 +26,7 @@ describe('add-source', () => {
         stream_url: 'rtsp://192.168.1.100:554/stream',
         source_type: 'ip_camera',
         auth_required: false,
+        project_id: '123',
     };
 
     it('calls connectToPipelineMutation after successful submit', async () => {
@@ -40,8 +41,8 @@ describe('add-source', () => {
             <TestProviders>
                 <AddSource
                     onSaved={mockOnSaved}
-                    config={ipCameraInitialConfig}
-                    componentFields={(state: IPCameraSourceConfig) => <IpCameraFields state={state} />}
+                    config={getIpCameraInitialConfig(newConfig.project_id)}
+                    componentFields={(state: IPCameraSourceConfig) => <IpCameraFields defaultState={state} />}
                     bodyFormatter={ipCameraBodyFormatter}
                 />
             </TestProviders>
diff --git a/application/ui/src/features/inspect/toolbar/sources/edit-source-form.component.tsx b/application/ui/src/features/inspect/toolbar/sources/edit-source-form.component.tsx
@@ -9,18 +9,18 @@ import { VideoFileFields } from './video-file/video-file-fields.component';
 import { webcamBodyFormatter } from './webcam/utils';
 import { WebcamFields } from './webcam/webcam-fields.component';
 
-interface EditSourceFactoryProps {
+interface EditSourceFormProps {
     config: SourceConfig;
     onSaved: () => void;
 }
 
-export const EditSourceFactory = ({ config, onSaved }: EditSourceFactoryProps) => {
+export const EditSourceForm = ({ config, onSaved }: EditSourceFormProps) => {
     if (config.source_type === 'webcam') {
         return (
             <EditSource
                 onSaved={onSaved}
                 config={config}
-                componentFields={(state) => <WebcamFields state={state} />}
+                componentFields={(state) => <WebcamFields defaultState={state} />}
                 bodyFormatter={webcamBodyFormatter}
             />
         );
@@ -31,7 +31,7 @@ export const EditSourceFactory = ({ config, onSaved }: EditSourceFactoryProps) =
             <EditSource
                 onSaved={onSaved}
                 config={config}
-                componentFields={(state) => <IpCameraFields state={state} />}
+                componentFields={(state) => <IpCameraFields defaultState={state} />}
                 bodyFormatter={ipCameraBodyFormatter}
             />
         );
@@ -42,7 +42,7 @@ export const EditSourceFactory = ({ config, onSaved }: EditSourceFactoryProps) =
             <EditSource
                 onSaved={onSaved}
                 config={config}
-                componentFields={(state: VideoFileSourceConfig) => <VideoFileFields state={state} />}
+                componentFields={(state: VideoFileSourceConfig) => <VideoFileFields defaultState={state} />}
                 bodyFormatter={videoFileBodyFormatter}
             />
         );
@@ -52,7 +52,7 @@ export const EditSourceFactory = ({ config, onSaved }: EditSourceFactoryProps) =
         <EditSource
             onSaved={onSaved}
             config={config as ImagesFolderSourceConfig}
-            componentFields={(state: ImagesFolderSourceConfig) => <ImageFolderFields state={state} />}
+            componentFields={(state: ImagesFolderSourceConfig) => <ImageFolderFields defaultState={state} />}
             bodyFormatter={imageFolderBodyFormatter}
         />
     );
diff --git a/application/ui/src/features/inspect/toolbar/sources/edit-source/edit-source.component.tsx b/application/ui/src/features/inspect/toolbar/sources/edit-source/edit-source.component.tsx
@@ -4,8 +4,8 @@
 import { ReactNode, useRef } from 'react';
 
 import { Button, ButtonGroup, Divider, Form, View } from '@geti/ui';
-import { useConnectSourceToPipeline } from 'src/hooks/use-pipeline.hook';
 
+import { useConnectSourceToPipeline } from '../../../../../hooks/use-pipeline.hook';
 import { useSourceAction } from '../hooks/use-source-action.hook';
 import { SourceConfig } from '../util';
 
diff --git a/application/ui/src/features/inspect/toolbar/sources/edit-source/edit-source.test.tsx b/application/ui/src/features/inspect/toolbar/sources/edit-source/edit-source.test.tsx
@@ -3,17 +3,17 @@
 
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useConnectSourceToPipeline } from 'src/hooks/use-pipeline.hook';
 import { TestProviders } from 'src/providers';
 
+import { useConnectSourceToPipeline } from '../../../../../hooks/use-pipeline.hook';
 import { useSourceMutation } from '../hooks/use-source-mutation.hook';
 import { IpCameraFields } from '../ip-camera/ip-camera-fields.component';
-import { ipCameraBodyFormatter, ipCameraInitialConfig } from '../ip-camera/utils';
+import { getIpCameraInitialConfig, ipCameraBodyFormatter } from '../ip-camera/utils';
 import { IPCameraSourceConfig } from '../util';
 import { EditSource } from './edit-source.component';
 
 vi.mock('../hooks/use-source-mutation.hook');
-vi.mock('src/hooks/use-pipeline.hook');
+vi.mock('../../../../../hooks/use-pipeline.hook');
 
 describe('EditIpCamera', () => {
     beforeEach(() => {
@@ -23,6 +23,7 @@ describe('EditIpCamera', () => {
     const updatedConfig: IPCameraSourceConfig = {
         id: 'existing-source-id',
         name: 'Updated Camera',
+        project_id: '123',
         stream_url: 'rtsp://192.168.1.201:554/stream',
         source_type: 'ip_camera',
         auth_required: true,
@@ -32,9 +33,9 @@ describe('EditIpCamera', () => {
         render(
             <TestProviders>
                 <EditSource
-                    config={ipCameraInitialConfig}
+                    config={getIpCameraInitialConfig(updatedConfig.project_id)}
                     onSaved={mockOnSaved}
-                    componentFields={(state: IPCameraSourceConfig) => <IpCameraFields state={state} />}
+                    componentFields={(state: IPCameraSourceConfig) => <IpCameraFields defaultState={state} />}
                     bodyFormatter={ipCameraBodyFormatter}
                 />
             </TestProviders>
diff --git a/application/ui/src/features/inspect/toolbar/sources/hooks/use-source-mutation.hook.tsx b/application/ui/src/features/inspect/toolbar/sources/hooks/use-source-mutation.hook.tsx
@@ -27,17 +27,15 @@ export const useSourceMutation = (isNewSource: boolean) => {
 
     return async (body: SourceConfig) => {
         if (isNewSource) {
-            const sourcePayload = {
-                ...body,
-                id: uuid(),
-            };
+            const id = uuid();
+            const sourcePayload = { ...body, id };
 
-            const response = await addSource.mutateAsync({
+            await addSource.mutateAsync({
                 body: sourcePayload,
                 params: { path: { project_id: projectId } },
             });
 
-            return String(response.id);
+            return id;
         }
 
         const response = await updateSource.mutateAsync({
diff --git a/application/ui/src/features/inspect/toolbar/sources/hooks/use-source-mutation.test.tsx b/application/ui/src/features/inspect/toolbar/sources/hooks/use-source-mutation.test.tsx
@@ -6,36 +6,42 @@ import { HttpResponse } from 'msw';
 import { http } from 'src/api/utils';
 import { server } from 'src/msw-node-setup';
 import { TestProviders } from 'src/providers';
+import { v4 as uuid } from 'uuid';
 
 import { WebcamSourceConfig } from '../util';
 import { useSourceMutation } from './use-source-mutation.hook';
 
 const mockedSource: WebcamSourceConfig = {
     id: 'original-id',
+    project_id: '123',
     name: 'Mock Source',
     source_type: 'webcam' as const,
     device_id: 0,
 };
 
+const mockedId = 'uuid-123';
 vi.mock('@geti-inspect/hooks', () => ({ useProjectIdentifier: () => ({ projectId: 'project-id-123' }) }));
+vi.mock('uuid', () => ({ v4: vi.fn(() => mockedId) }));
 
 describe('useSourceMutation', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
     it('creates a new source and return its resource id', async () => {
-        const newResourceId = 'resource-id-123';
         const { result } = renderHook(() => useSourceMutation(true), {
             wrapper: TestProviders,
         });
 
         server.use(
-            http.post('/api/projects/{project_id}/sources', () =>
-                HttpResponse.json({ ...mockedSource, id: newResourceId })
-            ),
+            http.post('/api/projects/{project_id}/sources', () => HttpResponse.json({ ...mockedSource })),
             http.patch('/api/projects/{project_id}/sources/{source_id}', () => HttpResponse.error())
         );
 
         await act(async () => {
             const response = await result.current(mockedSource);
-            expect(response).toBe(newResourceId);
+            expect(uuid).toHaveBeenCalled();
+            expect(response).toBe(mockedId);
         });
     });
 
diff --git a/application/ui/src/features/inspect/toolbar/sources/image-folder/image-folder-fields.component.tsx b/application/ui/src/features/inspect/toolbar/sources/image-folder/image-folder-fields.component.tsx
@@ -9,22 +9,22 @@ import { ImagesFolderSourceConfig } from '../util';
 import classes from './image-folder-fields.module.scss';
 
 type ImageFolderFieldsProps = {
-    state: ImagesFolderSourceConfig;
+    defaultState: ImagesFolderSourceConfig;
 };
 
-export const ImageFolderFields = ({ state }: ImageFolderFieldsProps) => {
+export const ImageFolderFields = ({ defaultState }: ImageFolderFieldsProps) => {
     return (
         <Flex direction='column' gap='size-200'>
-            <TextField isHidden label='id' name='id' defaultValue={state.id} />
-            <TextField isHidden label='project_id' name='project_id' defaultValue={state.project_id} />
-            <TextField width={'100%'} label='Name' name='name' defaultValue={state.name} />
+            <TextField isHidden label='id' name='id' defaultValue={defaultState?.id} />
+            <TextField isHidden label='project_id' name='project_id' defaultValue={defaultState.project_id} />
+            <TextField width={'100%'} label='Name' name='name' defaultValue={defaultState.name} />
 
             <Flex direction='row' gap='size-200'>
                 <TextField
                     flex='1'
                     label='Images folder path'
                     name='images_folder_path'
-                    defaultValue={state.images_folder_path}
+                    defaultValue={defaultState.images_folder_path}
                 />
 
                 <Flex
@@ -41,8 +41,8 @@ export const ImageFolderFields = ({ state }: ImageFolderFieldsProps) => {
             <Switch
                 aria-label='ignore existing images'
                 name='ignore_existing_images'
-                defaultSelected={state.ignore_existing_images}
-                key={state.ignore_existing_images ? 'true' : 'false'}
+                defaultSelected={defaultState.ignore_existing_images}
+                key={defaultState.ignore_existing_images ? 'true' : 'false'}
             >
                 Ignore existing images
             </Switch>
diff --git a/application/ui/src/features/inspect/toolbar/sources/image-folder/utils.ts b/application/ui/src/features/inspect/toolbar/sources/image-folder/utils.ts
@@ -15,5 +15,5 @@ export const imageFolderBodyFormatter = (formData: FormData): ImagesFolderSource
     source_type: 'images_folder',
     project_id: String(formData.get('project_id')),
     images_folder_path: String(formData.get('images_folder_path')),
-    ignore_existing_images: formData.get('ignore_existing_images') === 'on' ? true : false,
+    ignore_existing_images: formData.get('ignore_existing_images') === 'on',
 });
diff --git a/application/ui/src/features/inspect/toolbar/sources/ip-camera/ip-camera-fields.component.tsx b/application/ui/src/features/inspect/toolbar/sources/ip-camera/ip-camera-fields.component.tsx
@@ -6,21 +6,21 @@ import { Flex, Switch, TextField } from '@geti/ui';
 import { IPCameraSourceConfig } from '../util';
 
 type IpCameraFieldsProps = {
-    state: IPCameraSourceConfig;
+    defaultState: IPCameraSourceConfig;
 };
 
-export const IpCameraFields = ({ state }: IpCameraFieldsProps) => {
+export const IpCameraFields = ({ defaultState }: IpCameraFieldsProps) => {
     return (
         <Flex direction='column' gap='size-200'>
-            <TextField isHidden label='id' name='id' defaultValue={state.id} />
-            <TextField isHidden label='project_id' name='project_id' defaultValue={state.project_id} />
-            <TextField width={'100%'} label='Name' name='name' defaultValue={state.name} />
-            <TextField width={'100%'} label='Stream Url:' name='stream_url' defaultValue={state.stream_url} />
+            <TextField isHidden label='id' name='id' defaultValue={defaultState?.id} />
+            <TextField isHidden label='project_id' name='project_id' defaultValue={defaultState.project_id} />
+            <TextField width={'100%'} label='Name' name='name' defaultValue={defaultState.name} />
+            <TextField width={'100%'} label='Stream Url:' name='stream_url' defaultValue={defaultState.stream_url} />
             <Switch
                 name='auth_required'
                 aria-label='Require Authentication'
-                defaultSelected={state.auth_required}
-                key={state.auth_required ? 'true' : 'false'}
+                defaultSelected={defaultState.auth_required}
+                key={defaultState.auth_required ? 'true' : 'false'}
             >
                 Require Authentication
             </Switch>
diff --git a/application/ui/src/features/inspect/toolbar/sources/ip-camera/utils.ts b/application/ui/src/features/inspect/toolbar/sources/ip-camera/utils.ts
@@ -15,5 +15,5 @@ export const ipCameraBodyFormatter = (formData: FormData): IPCameraSourceConfig
     source_type: 'ip_camera',
     project_id: String(formData.get('project_id')),
     stream_url: String(formData.get('stream_url')),
-    auth_required: String(formData.get('auth_required')) === 'on' ? true : false,
+    auth_required: String(formData.get('auth_required')) === 'on',
 });
diff --git a/application/ui/src/features/inspect/toolbar/sources/source-factory.component.tsx b/application/ui/src/features/inspect/toolbar/sources/source-factory.component.tsx
@@ -7,7 +7,7 @@ import { useProjectIdentifier } from '@geti-inspect/hooks';
 import { isEmpty } from 'lodash-es';
 
 import { $api } from '../../../../api/client';
-import { EditSourceFactory } from './edit-source-factory.component';
+import { EditSourceForm } from './edit-source-form.component';
 import { SourcesList } from './source-list/source-list.component';
 import { SourceOptions } from './source-options.component';
 import { SourceConfig } from './util';
@@ -26,23 +26,17 @@ export const SourceFactory = () => {
         setView('options');
     };
 
-    const handleEditSourceFactory = (source: SourceConfig) => {
+    const handleEditSource = (source: SourceConfig) => {
         setView('edit');
         setCurrentSource(source);
     };
 
     if (view === 'edit' && !isEmpty(currentSource)) {
-        return <EditSourceFactory config={currentSource} onSaved={() => setView('list')} />;
+        return <EditSourceForm config={currentSource} onSaved={() => setView('list')} />;
     }
 
     if (view === 'list') {
-        return (
-            <SourcesList
-                sources={sources}
-                onAddSource={handleAddSource}
-                onEditSourceFactory={handleEditSourceFactory}
-            />
-        );
+        return <SourcesList sources={sources} onAddSource={handleAddSource} onEditSource={handleEditSource} />;
     }
 
     return <SourceOptions onSaved={() => setView('list')} />;
diff --git a/application/ui/src/features/inspect/toolbar/sources/source-list/source-icon/source-icon.component.tsx b/application/ui/src/features/inspect/toolbar/sources/source-list/source-icon/source-icon.component.tsx
@@ -17,9 +17,5 @@ export const SourceIcon = ({ type }: SourceIconProps) => {
         return <VideoFile />;
     }
 
-    if (type === 'images_folder') {
-        return <ImagesFolder />;
-    }
-
-    return <></>;
+    return <ImagesFolder />;
 };
diff --git a/application/ui/src/features/inspect/toolbar/sources/source-list/source-list.component.tsx b/application/ui/src/features/inspect/toolbar/sources/source-list/source-list.component.tsx
diff --git a/application/ui/src/features/inspect/toolbar/sources/source-menu/source-menu.component.tsx b/application/ui/src/features/inspect/toolbar/sources/source-menu/source-menu.component.tsx
diff --git a/application/ui/src/features/inspect/toolbar/sources/source-options.component.tsx b/application/ui/src/features/inspect/toolbar/sources/source-options.component.tsx
diff --git a/application/ui/src/features/inspect/toolbar/sources/video-file/video-file-fields.component.tsx b/application/ui/src/features/inspect/toolbar/sources/video-file/video-file-fields.component.tsx
diff --git a/application/ui/src/features/inspect/toolbar/sources/webcam/webcam-fields.component.tsx b/application/ui/src/features/inspect/toolbar/sources/webcam/webcam-fields.component.tsx
diff --git a/application/ui/src/providers.tsx b/application/ui/src/providers.tsx
diff --git a/application/ui/vitest.config.ts b/application/ui/vitest.config.ts
