Add join/leave project UI functionality

Author: haydnli-shopify

frontend/src/api.ts

@@ -56,6 +56,9 @@ export const API = {
         DETAILS: (name: IProject['project_name']) => `${API.PROJECTS.BASE()}/${name}`,
         DETAILS_INFO: (name: IProject['project_name']) => `${API.PROJECTS.DETAILS(name)}/get`,
         SET_MEMBERS: (name: IProject['project_name']) => `${API.PROJECTS.DETAILS(name)}/set_members`,
+        ADD_MEMBERS: (name: IProject['project_name']) => `${API.PROJECTS.DETAILS(name)}/add_members`,
+        REMOVE_MEMBERS: (name: IProject['project_name']) => `${API.PROJECTS.DETAILS(name)}/remove_members`,
+        UPDATE_VISIBILITY: (name: IProject['project_name']) => `${API.PROJECTS.DETAILS(name)}/update_visibility`,
 
         // Repos
         REPOS: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/repos`,

frontend/src/locale/en.json

@@ -172,6 +172,13 @@
     "runs": "Runs",
     "tags": "Tags",
     "settings": "Settings",
+    "join": "Join Project",
+    "leave": "Leave Project",
+    "owner_cannot_leave": "Owner Cannot Leave",
+    "join_success": "Successfully joined the project",
+    "leave_success": "Successfully left the project",
+    "join_error": "Failed to join project",
+    "leave_error": "Failed to leave project",
     "card": {
       "backend": "Backend",
       "settings": "Settings"
@@ -181,6 +188,8 @@
       "project_name": "Project name",
       "owner": "Owner",
       "project_name_description": "Only latin characters, dashes, underscores, and digits",
+      "is_public": "Make project public",
+      "is_public_description": "Public projects can be accessed by any user without being a member",
       "backend": "Backend",
       "backend_config": "Backend config",
       "backend_config_description": "Specify the backend config in the YAML format. Click Info for examples.",
@@ -189,6 +198,10 @@
       "members_empty_message_title": "No members",
       "members_empty_message_text": "Select project's members",
       "update_members_success": "Members are updated",
+      "update_visibility_success": "Project visibility updated successfully",
+      "project_visibility": "Project Visibility",
+      "project_visibility_description": "Control who can access this project",
+      "make_project_public": "Make project public",
       "delete_project_confirm_title": "Delete project",
       "delete_project_confirm_message": "Are you sure you want to delete this project?",
       "delete_projects_confirm_title": "Delete projects",

frontend/src/pages/Project/Details/Settings/index.tsx

@@ -17,18 +17,21 @@ import {
     SelectCSD,
     SpaceBetween,
     StatusIndicator,
+    Toggle,
 } from 'components';
 import { HotspotIds } from 'layouts/AppLayout/TutorialPanel/constants';
 
 import { useBreadcrumbs, useHelpPanel, useNotifications } from 'hooks';
 import { riseRouterException } from 'libs';
 import { ROUTES } from 'routes';
-import { useGetProjectQuery, useUpdateProjectMembersMutation } from 'services/project';
+import { useGetProjectQuery, useUpdateProjectMembersMutation, useUpdateProjectVisibilityMutation } from 'services/project';
 
 import { useCheckAvailableProjectPermission } from 'pages/Project/hooks/useCheckAvailableProjectPermission';
 import { useConfigProjectCliCommand } from 'pages/Project/hooks/useConfigProjectCliComand';
 import { useDeleteProject } from 'pages/Project/hooks/useDeleteProject';
 import { ProjectMembers } from 'pages/Project/Members';
+import { getProjectRoleByUserName } from 'pages/Project/utils';
+import { useGetUserDataQuery } from 'services/user';
 
 import { useBackendsTable } from '../../Backends/hooks';
 import { BackendsTable } from '../../Backends/Table';
@@ -51,7 +54,9 @@ export const ProjectSettings: React.FC = () => {
 
     const [pushNotification] = useNotifications();
     const [updateProjectMembers] = useUpdateProjectMembersMutation();
+    const [updateProjectVisibility] = useUpdateProjectVisibilityMutation();
     const { deleteProject, isDeleting } = useDeleteProject();
+    const { data: currentUser } = useGetUserDataQuery({});
 
     const { data, isLoading, error } = useGetProjectQuery({ name: paramProjectName });
 
@@ -113,14 +118,39 @@ export const ProjectSettings: React.FC = () => {
 
     const debouncedMembersHandler = useCallback(debounce(changeMembersHandler, 1000), []);
 
+    const changeVisibilityHandler = (is_public: boolean) => {
+        updateProjectVisibility({
+            project_name: paramProjectName,
+            is_public,
+        })
+            .unwrap()
+            .then(() => {
+                pushNotification({
+                    type: 'success',
+                    content: t('projects.edit.update_visibility_success'),
+                });
+            })
+            .catch((error) => {
+                pushNotification({
+                    type: 'error',
+                    content: t('common.server_error', { error: error?.data?.detail?.msg }),
+                });
+            });
+    };
+
     const isDisabledButtons = useMemo<boolean>(() => {
         return isDeleting || !data || !isAvailableDeletingPermission(data);
     }, [data, isDeleting, isAvailableDeletingPermission]);
 
     const deleteProjectHandler = () => {
         if (!data) return;
 
-        deleteProject(data).then(() => navigate(ROUTES.PROJECT.LIST));
+        deleteProject(data)
+            .then(() => navigate(ROUTES.PROJECT.LIST))
+            .catch((error) => {
+                // Error is already handled in useDeleteProject hook
+                console.error('Delete project failed:', error);
+            });
     };
 
     if (isLoadingPage)
@@ -185,11 +215,29 @@ export const ProjectSettings: React.FC = () => {
 
                     <GatewaysTable gateways={gatewaysData} />
 
+                    {isAvailableProjectManaging && (
+                        <Container header={<Header variant="h2">{t('projects.edit.project_visibility')}</Header>}>
+                            <SpaceBetween size="s">
+                                <Box variant="p" color="text-body-secondary">
+                                    {t('projects.edit.project_visibility_description')}
+                                </Box>
+                                <Toggle
+                                    checked={data.is_public}
+                                    onChange={(detail) => changeVisibilityHandler(detail.detail.checked)}
+                                    disabled={!isProjectManager(data)}
+                                >
+                                    {t('projects.edit.make_project_public')}
+                                </Toggle>
+                            </SpaceBetween>
+                        </Container>
+                    )}
+
                     <ProjectMembers
                         onChange={debouncedMembersHandler}
                         members={data.members}
                         readonly={!isProjectManager(data)}
                         isAdmin={isProjectAdmin(data)}
+                        project={data}
                     />
 
                     <Container header={<Header variant="h2">{t('common.danger_zone')}</Header>}>

frontend/src/pages/Project/Form/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Container, FormInput, FormUI, Header, SpaceBetween } from 'components';
+import { Button, Container, FormCheckbox, FormInput, FormUI, Header, SpaceBetween } from 'components';
 
 import { useNotifications } from 'hooks';
 import { isResponseServerError, isResponseServerFormFieldError } from 'libs';
@@ -16,6 +16,7 @@ export const ProjectForm: React.FC<IProps> = ({ initialValues, onCancel, loading
 
     const formMethods = useForm<IProject>({
         defaultValues: {
+            is_public: false,
             ...initialValues,
         },
     });
@@ -81,6 +82,14 @@ export const ProjectForm: React.FC<IProps> = ({ initialValues, onCancel, loading
                                     },
                                 }}
                             />
+
+                            <FormCheckbox
+                                label={t('projects.edit.is_public')}
+                                description={t('projects.edit.is_public_description')}
+                                control={control}
+                                name="is_public"
+                                disabled={loading}
+                            />
                         </SpaceBetween>
                     </Container>
                 </SpaceBetween>

frontend/src/pages/Project/Members/index.tsx

@@ -1,12 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
-import { Button, FormSelect, Header, Link, ListEmptyMessage, Pagination, Table } from 'components';
+import { Button, FormSelect, Header, Link, ListEmptyMessage, Pagination, SpaceBetween, Table } from 'components';
 
-import { useCollection } from 'hooks';
+import { useAppSelector, useCollection, useNotifications } from 'hooks';
+import { selectUserData } from 'App/slice';
 import { ROUTES } from 'routes';
 import { useGetUserListQuery } from 'services/user';
+import { useAddProjectMemberMutation, useRemoveProjectMemberMutation } from 'services/project';
 
 import { UserAutosuggest } from './UsersAutosuggest';
 
@@ -16,10 +19,15 @@ import { TRoleSelectOption } from 'pages/User/Form/types';
 
 import styles from './styles.module.scss';
 
-export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, readonly, isAdmin }) => {
+export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, readonly, isAdmin, project }) => {
     const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [pushNotification] = useNotifications();
     const [selectedItems, setSelectedItems] = useState<TProjectMemberWithIndex[]>([]);
     const { data: usersData } = useGetUserListQuery();
+    const userData = useAppSelector(selectUserData);
+    const [addMember, { isLoading: isAdding }] = useAddProjectMemberMutation();
+    const [removeMember, { isLoading: isRemoving }] = useRemoveProjectMemberMutation();
 
     const { handleSubmit, control, getValues, setValue } = useForm<TFormValues>({
         defaultValues: { members: members ?? [] },
@@ -30,6 +38,67 @@ export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, r
         name: 'members',
     });
 
+    const currentUserRole = useMemo(() => {
+        if (!userData?.username) return null;
+        const member = members?.find(m => m.user.username === userData.username);
+        return member?.project_role || null;
+    }, [members, userData?.username]);
+
+    const isProjectOwner = useMemo(() => {
+        return userData?.username === project?.owner.username;
+    }, [userData?.username, project?.owner.username]);
+
+    const isMember = currentUserRole !== null;
+    const isMemberActionLoading = isAdding || isRemoving;
+
+    const handleJoinProject = async () => {
+        if (!userData?.username || !project) return;
+        
+        try {
+            await addMember({
+                project_name: project.project_name,
+                username: userData.username,
+                project_role: 'user',
+            }).unwrap();
+            
+            pushNotification({
+                type: 'success',
+                content: t('projects.join_success'),
+            });
+        } catch (error) {
+            console.error('Failed to join project:', error);
+            pushNotification({
+                type: 'error',
+                content: t('projects.join_error'),
+            });
+        }
+    };
+
+    const handleLeaveProject = async () => {
+        if (!userData?.username || !project) return;
+        
+        try {
+            await removeMember({
+                project_name: project.project_name,
+                username: userData.username,
+            }).unwrap();
+            
+            pushNotification({
+                type: 'success',
+                content: t('projects.leave_success'),
+            });
+            
+            // Redirect to project list after successfully leaving
+            navigate(ROUTES.PROJECT.LIST);
+        } catch (error) {
+            console.error('Failed to leave project:', error);
+            pushNotification({
+                type: 'error',
+                content: t('projects.leave_error'),
+            });
+        }
+    };
+
     useEffect(() => {
         if (members) {
             setValue('members', members);
@@ -60,7 +129,7 @@ export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, r
         { label: t('roles.user'), value: 'user' },
     ];
 
-    const addMember = (username: string) => {
+    const addMemberHandler = (username: string) => {
         const selectedUser = usersData?.find((u) => u.username === username);
 
         if (selectedUser) {
@@ -90,6 +159,61 @@ export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, r
         onChangeHandler();
     };
 
+    const renderMemberActions = () => {
+        const actions = [];
+
+        // Add management actions only if not readonly
+        if (!readonly) {
+            actions.push(
+                <Button
+                    key="delete"
+                    formAction="none"
+                    onClick={deleteSelectedMembers}
+                    disabled={!selectedItems.length}
+                >
+                    {t('common.delete')}
+                </Button>
+            );
+        }
+
+        // Add join/leave button if user is authenticated (available even in readonly mode)
+        if (userData?.username && project) {
+            if (!isMember) {
+                actions.unshift(
+                    <Button
+                        key="join"
+                        onClick={handleJoinProject}
+                        disabled={isMemberActionLoading}
+                        variant="primary"
+                    >
+                        {isMemberActionLoading ? t('common.loading') : t('projects.join')}
+                    </Button>
+                );
+            } else {
+                // Prevent owners and admins from leaving their projects
+                const canLeave = !isProjectOwner && currentUserRole !== 'admin';
+                
+                actions.unshift(
+                    <Button
+                        key="leave"
+                        onClick={handleLeaveProject}
+                        disabled={isMemberActionLoading || !canLeave}
+                        variant="normal"
+                    >
+                        {!canLeave 
+                            ? t('projects.owner_cannot_leave')
+                            : isMemberActionLoading 
+                                ? t('common.loading') 
+                                : t('projects.leave')
+                        }
+                    </Button>
+                );
+            }
+        }
+
+        return actions.length > 0 ? <SpaceBetween size="xs" direction="horizontal">{actions}</SpaceBetween> : undefined;
+    };
+
     const COLUMN_DEFINITIONS = [
         {
             id: 'name',
@@ -153,13 +277,7 @@ export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, r
                     <Header
                         variant="h2"
                         counter={`(${items?.length})`}
-                        actions={
-                            readonly ? undefined : (
-                                <Button formAction="none" onClick={deleteSelectedMembers} disabled={!selectedItems.length}>
-                                    {t('common.delete')}
-                                </Button>
-                            )
-                        }
+                        actions={renderMemberActions()}
                     >
                         {t('projects.edit.members.section_title')}
                     </Header>
@@ -168,7 +286,7 @@ export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, r
                     readonly ? undefined : (
                         <UserAutosuggest
                             disabled={loading}
-                            onSelect={({ detail }) => addMember(detail.value)}
+                            onSelect={({ detail }) => addMemberHandler(detail.value)}
                             optionsFilter={(options) => options.filter((o) => !fields.find((f) => f.user.username === o.value))}
                         />
                     )

frontend/src/pages/Project/Members/types.ts

@@ -4,6 +4,7 @@ export interface IProps {
     onChange: (users: IProjectMember[]) => void;
     readonly?: boolean;
     isAdmin?: boolean;
+    project?: IProject;
 }
 
 export type TProjectMemberWithIndex = IProjectMember & { index: number };