rename project

Signed-off-by: Colorado, Camilo <camilo.colorado@intel.com>

Author: camiloHimura

application/ui/src/features/inspect/projects-management/add-project-button/add-project-button.component.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { $api } from '@geti-inspect/api';
+import { ActionButton, Text } from '@geti/ui';
+import { AddCircle } from '@geti/ui/icons';
+import { v4 as uuid } from 'uuid';
+
+import styles from './add-project-button.module.scss';
+
+interface AddProjectProps {
+    onSetProjectInEdition: (projectId: string) => void;
+    projectsCount: number;
+}
+
+export const AddProjectButton = ({ onSetProjectInEdition, projectsCount }: AddProjectProps) => {
+    const addProjectMutation = $api.useMutation('post', '/api/projects', {
+        meta: {
+            invalidates: [['get', '/api/projects']],
+        },
+    });
+
+    const addProject = () => {
+        const newProjectId = uuid();
+        const newProjectName = `Project #${projectsCount + 1}`;
+
+        addProjectMutation.mutate({
+            body: {
+                id: newProjectId,
+                name: newProjectName,
+            },
+        });
+
+        onSetProjectInEdition(newProjectId);
+    };
+
+    return (
+        <ActionButton
+            isQuiet
+            width={'100%'}
+            marginStart={'size-100'}
+            marginEnd={'size-350'}
+            UNSAFE_className={styles.addProjectButton}
+            onPress={addProject}
+        >
+            <AddCircle />
+            <Text marginX='size-50'>Add project</Text>
+        </ActionButton>
+    );
+};

application/ui/src/features/inspect/projects-management/add-project-button/add-project-button.module.scss

@@ -0,0 +1,8 @@
+.addProjectButton {
+    color: var(--spectrum-global-color-gray-900);
+
+    & span[class*='spectrum-ActionButton-label'] {
+        text-align: start;
+        margin-left: var(--spectrum-global-dimension-size-100) !important;
+    }
+}

application/ui/src/features/inspect/projects-management/project-list-item/project-edition/project-edition.component.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+import { Loading, TextField, type TextFieldRef } from '@geti/ui';
+
+interface ProjectEditionProps {
+    name: string;
+    isPending: boolean;
+    onChange: (newName: string) => void;
+}
+
+export const ProjectEdition = ({ name, isPending, onChange }: ProjectEditionProps) => {
+    const textFieldRef = useRef<TextFieldRef>(null);
+    const [newName, setNewName] = useState<string>(name);
+
+    const handleBlur = () => {
+        onChange(newName);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            onChange(newName);
+        }
+
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            setNewName(name);
+            onChange(name);
+        }
+    };
+
+    useEffect(() => {
+        textFieldRef.current?.select();
+    }, []);
+
+    return (
+        <>
+            <TextField
+                isQuiet
+                ref={textFieldRef}
+                value={newName}
+                onBlur={handleBlur}
+                onChange={setNewName}
+                onKeyDown={handleKeyDown}
+                isDisabled={isPending}
+                aria-label='Edit project name'
+            />
+            {isPending && <Loading mode={'inline'} size='S' />}
+        </>
+    );
+};

application/ui/src/features/inspect/projects-management/project-list-item/project-edition/project-edition.test.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (C) 2025 Intel Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ProjectEdition } from './project-edition.component';
+
+describe('ProjectEdition', () => {
+    const defaultProps = {
+        name: 'Test Project',
+        isPending: false,
+        onChange: vi.fn(),
+    };
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('renders with the initial project name', () => {
+        render(<ProjectEdition {...defaultProps} />);
+
+        const input = screen.getByRole('textbox', { name: /edit project name/i });
+        expect(input).toHaveValue('Test Project');
+    });
+
+    it('auto-selects the text field on mount', async () => {
+        render(<ProjectEdition {...defaultProps} />);
+
+        const input = screen.getByRole('textbox', { name: /edit project name/i }) as HTMLInputElement;
+
+        await waitFor(() => {
+            expect(input.selectionStart).toBe(0);
+            expect(input.selectionEnd).toBe(defaultProps.name.length);
+        });
+    });
+
+    it('calls onBlur with new name when input loses focus', async () => {
+        const onChange = vi.fn();
+
+        render(<ProjectEdition {...defaultProps} onChange={onChange} />);
+
+        const input = screen.getByRole('textbox', { name: /edit project name/i });
+
+        await userEvent.clear(input);
+        await userEvent.type(input, 'New Project Name');
+        await userEvent.tab();
+
+        expect(onChange).toHaveBeenCalledWith('New Project Name');
+    });
+
+    it('calls onBlur with new name when Enter key is pressed', async () => {
+        const onChange = vi.fn();
+
+        render(<ProjectEdition {...defaultProps} onChange={onChange} />);
+
+        const input = screen.getByRole('textbox', { name: /edit project name/i });
+
+        await userEvent.clear(input);
+        await userEvent.type(input, 'New Project Name');
+        await userEvent.keyboard('{Enter}');
+
+        expect(onChange).toHaveBeenCalledWith('New Project Name');
+    });
+
+    it('resets to original name and calls onBlur when Escape key is pressed', async () => {
+        const onChange = vi.fn();
+
+        render(<ProjectEdition {...defaultProps} onChange={onChange} />);
+
+        const input = screen.getByRole('textbox', { name: /edit project name/i });
+
+        await userEvent.clear(input);
+        await userEvent.type(input, 'Modified Name');
+        await userEvent.keyboard('{Escape}');
+
+        expect(input).toHaveValue('Test Project');
+        expect(onChange).toHaveBeenCalledWith('Test Project');
+    });
+
+    it('disables the input when isPending is true', () => {
+        render(<ProjectEdition {...defaultProps} isPending={true} />);
+
+        const input = screen.getByRole('textbox', { name: /edit project name/i });
+        expect(input).toBeDisabled();
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+});

application/ui/src/features/inspect/projects-management/project-list-item/project-list-actions/project-list-actions.component.tsx

@@ -0,0 +1,32 @@
+import { Key } from 'react';
+
+import { ActionButton, Item, Menu, MenuTrigger } from '@geti/ui';
+import { MoreMenu } from 'packages/ui/icons';
+
+interface ProjectActionsProps {
+    onRename: () => void;
+}
+
+const PROJECT_ACTIONS = {
+    RENAME: 'Rename',
+};
+
+export const ProjectActions = ({ onRename }: ProjectActionsProps) => {
+    const handleAction = (key: Key) => {
+        if (key === PROJECT_ACTIONS.RENAME) {
+            onRename();
+        }
+    };
+    return (
+        <MenuTrigger>
+            <ActionButton isQuiet>
+                <MoreMenu />
+            </ActionButton>
+            <Menu onAction={handleAction}>
+                {[PROJECT_ACTIONS.RENAME].map((action) => (
+                    <Item key={action}>{action}</Item>
+                ))}
+            </Menu>
+        </MenuTrigger>
+    );
+};

application/ui/src/features/inspect/projects-management/project-list-item/project-list-actions/project-list-actions.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TestProviders } from 'src/providers';
+
+import { ProjectActions } from './project-list-actions.component';
+
+describe('ProjectActions', () => {
+    it('displays rename option in the menu', async () => {
+        render(
+            <TestProviders>
+                <ProjectActions onRename={vi.fn()} />
+            </TestProviders>
+        );
+
+        await userEvent.click(screen.getByRole('button'));
+
+        expect(screen.getByRole('menuitem', { name: /Rename/i })).toBeVisible();
+    });
+
+    it('calls onRename when rename menu item is clicked', async () => {
+        const mockOnRename = vi.fn();
+        render(
+            <TestProviders>
+                <ProjectActions onRename={mockOnRename} />
+            </TestProviders>
+        );
+
+        await userEvent.click(screen.getByRole('button'));
+        await userEvent.click(screen.getByRole('menuitem', { name: /Rename/i }));
+
+        expect(mockOnRename).toHaveBeenCalledTimes(1);
+    });
+});

application/ui/src/features/inspect/projects-management/project-list-item/project-list-item.component.tsx

@@ -3,80 +3,46 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useEffect, useRef, useState } from 'react';
-
+import { $api } from '@geti-inspect/api';
 import { SchemaProjectList } from '@geti-inspect/api/spec';
-import { Flex, PhotoPlaceholder, Text, TextField, type TextFieldRef } from '@geti/ui';
+import { Flex, PhotoPlaceholder, Text } from '@geti/ui';
 import { clsx } from 'clsx';
 import { useNavigate } from 'react-router';
 
 import { useWebRTCConnection } from '../../../../components/stream/web-rtc-connection-provider';
 import { paths } from '../../../../routes/paths';
+import { ProjectEdition } from './project-edition/project-edition.component';
+import { ProjectActions } from './project-list-actions/project-list-actions.component';
 
 import styles from './project-list-item.module.scss';
 
 export type Project = SchemaProjectList['projects'][number];
 
-interface ProjectEditionProps {
-    onBlur: (newName: string) => void;
-    name: string;
-}
-
-const ProjectEdition = ({ name, onBlur }: ProjectEditionProps) => {
-    const textFieldRef = useRef<TextFieldRef>(null);
-    const [newName, setNewName] = useState<string>(name);
-
-    const handleBlur = () => {
-        onBlur(newName);
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            onBlur(newName);
-        }
-
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            setNewName(name);
-            onBlur(name);
-        }
-    };
-
-    useEffect(() => {
-        textFieldRef.current?.select();
-    }, []);
-
-    return (
-        <TextField
-            isQuiet
-            ref={textFieldRef}
-            value={newName}
-            onBlur={handleBlur}
-            onKeyDown={handleKeyDown}
-            onChange={setNewName}
-            aria-label='Edit project name'
-        />
-    );
-};
-
 interface ProjectListItemProps {
     project: Project;
     isActive: boolean;
     isInEditMode: boolean;
-    onBlur: (projectId: string, newName: string) => void;
+    setProjectInEdition: (projectId: string | null) => void;
 }
 
-export const ProjectListItem = ({ project, isInEditMode, isActive, onBlur }: ProjectListItemProps) => {
+export const ProjectListItem = ({ project, isActive, isInEditMode, setProjectInEdition }: ProjectListItemProps) => {
     const navigate = useNavigate();
     const { stop } = useWebRTCConnection();
 
-    const handleBlur = (newProjectId?: string) => (newName: string) => {
-        if (newProjectId === undefined) {
+    const updateProject = $api.useMutation('patch', '/api/projects/{project_id}', {
+        onSettled: () => setProjectInEdition(null),
+        meta: { invalidates: [['get', '/api/projects']] },
+    });
+
+    const handleNameChange = (projectId?: string) => (newName: string) => {
+        if (projectId === undefined) {
             return;
         }
 
-        onBlur(newProjectId, newName);
+        updateProject.mutate({
+            params: { path: { project_id: projectId } },
+            body: { name: newName },
+        });
     };
 
     const handleNavigateToProject = () => {
@@ -95,7 +61,11 @@ export const ProjectListItem = ({ project, isInEditMode, isActive, onBlur }: Pro
         >
             <Flex justifyContent='space-between' alignItems='center' marginX={'size-200'}>
                 {isInEditMode ? (
-                    <ProjectEdition name={project.name} onBlur={handleBlur(project.id)} />
+                    <ProjectEdition
+                        name={project.name}
+                        onChange={handleNameChange(project.id)}
+                        isPending={updateProject.isPending}
+                    />
                 ) : (
                     <Flex alignItems={'center'} gap={'size-100'}>
                         <PhotoPlaceholder
@@ -107,6 +77,8 @@ export const ProjectListItem = ({ project, isInEditMode, isActive, onBlur }: Pro
                         <Text>{project.name}</Text>
                     </Flex>
                 )}
+
+                <ProjectActions onRename={() => setProjectInEdition(project.id ?? null)} />
             </Flex>
         </li>
     );