Pr3 add join leave UI buttons

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: (name: IProject['project_name']) => `${API.PROJECTS.DETAILS(name)}/update`,
 
         // Repos
         REPOS: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/repos`,

frontend/src/components/ButtonWithConfirmation/index.tsx

@@ -6,7 +6,13 @@ import { ConfirmationDialog } from '../ConfirmationDialog';
 
 import { IProps } from './types';
 
-export const ButtonWithConfirmation: React.FC<IProps> = ({ confirmTitle, confirmContent, onClick, ...props }) => {
+export const ButtonWithConfirmation: React.FC<IProps> = ({
+    confirmTitle,
+    confirmContent,
+    onClick,
+    confirmButtonLabel,
+    ...props
+}) => {
     const [showDeleteConfirm, setShowConfirmDelete] = useState(false);
 
     const toggleDeleteConfirm = () => {
@@ -31,6 +37,7 @@ export const ButtonWithConfirmation: React.FC<IProps> = ({ confirmTitle, confirm
                 onConfirm={onConfirm}
                 title={confirmTitle}
                 content={content}
+                confirmButtonLabel={confirmButtonLabel}
             />
         </>
     );

frontend/src/components/ButtonWithConfirmation/types.ts

@@ -5,5 +5,6 @@ import type { IProps as ButtonProps } from '../Button';
 export interface IProps extends Omit<ButtonProps, 'onClick'> {
     confirmTitle?: string;
     confirmContent?: ReactNode;
+    confirmButtonLabel?: string;
     onClick?: () => void;
 }

frontend/src/locale/en.json

@@ -172,6 +172,14 @@
     "runs": "Runs",
     "tags": "Tags",
     "settings": "Settings",
+    "join": "Join",
+    "leave_confirm_title": "Leave project",
+    "leave_confirm_message": "Are you sure you want to leave this project?",
+    "leave": "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 +189,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 +199,13 @@
       "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",
+      "update_visibility_confirm_title": "Change project visibility",
+      "update_visibility_confirm_message": "Are you sure you want to change the project visibility? This will affect who can access this project.",
+      "change_visibility": "Change visibility",
+      "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",
@@ -282,6 +299,10 @@
       "error_notification": "Update project error",
       "validation": {
         "user_name_format": "Only letters, numbers, - or _"
+      },
+      "visibility": {
+        "private": "Private",
+        "public": "Public"
       }
     },
     "create": {

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { debounce } from 'lodash';
@@ -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, useUpdateProjectMutation } 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,23 +54,40 @@ export const ProjectSettings: React.FC = () => {
 
     const [pushNotification] = useNotifications();
     const [updateProjectMembers] = useUpdateProjectMembersMutation();
+    const [updateProject] = useUpdateProjectMutation();
     const { deleteProject, isDeleting } = useDeleteProject();
+    const { data: currentUser } = useGetUserDataQuery({});
 
     const { data, isLoading, error } = useGetProjectQuery({ name: paramProjectName });
 
     useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (error?.status === 404) {
+        if (error && 'status' in error && error.status === 404) {
             riseRouterException();
         }
     }, [error]);
 
+    const currentUserRole = data ? getProjectRoleByUserName(data, currentUser?.username ?? '') : null;
+    const isProjectMember = currentUserRole !== null;
+
     const currentOwner = {
         label: data?.owner.username,
         value: data?.owner.username,
     };
 
+    const visibilityOptions = [
+        { label: t('projects.edit.visibility.private') || '', value: 'private' },
+        { label: t('projects.edit.visibility.public') || '', value: 'public' },
+    ];
+
+    const currentVisibility = data?.isPublic ? 'public' : 'private';
+    const [selectedVisibility, setSelectedVisibility] = useState(
+        data?.isPublic ? visibilityOptions[1] : visibilityOptions[0]
+    );
+
+    useEffect(() => {
+        setSelectedVisibility(data?.isPublic ? visibilityOptions[1] : visibilityOptions[0]);
+    }, [data]);
+
     const {
         data: backendsData,
         isDeleting: isDeletingBackend,
@@ -103,7 +123,7 @@ export const ProjectSettings: React.FC = () => {
                     content: t('projects.edit.update_members_success'),
                 });
             })
-            .catch((error) => {
+            .catch((error: any) => {
                 pushNotification({
                     type: 'error',
                     content: t('common.server_error', { error: error?.data?.detail?.msg }),
@@ -113,14 +133,38 @@ export const ProjectSettings: React.FC = () => {
 
     const debouncedMembersHandler = useCallback(debounce(changeMembersHandler, 1000), []);
 
+    const changeVisibilityHandler = (is_public: boolean) => {
+        updateProject({
+            project_name: paramProjectName,
+            is_public: is_public,
+        })
+            .unwrap()
+            .then(() => {
+                pushNotification({
+                    type: 'success',
+                    content: t('projects.edit.update_visibility_success'),
+                });
+            })
+            .catch((error: any) => {
+                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: any) => {
+                console.error('Delete project failed:', error);
+            });
     };
 
     if (isLoadingPage)
@@ -134,42 +178,44 @@ export const ProjectSettings: React.FC = () => {
         <>
             {data && backendsData && gatewaysData && (
                 <SpaceBetween size="l">
-                    <Container
-                        header={
-                            <Header variant="h2" info={<InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />}>
-                                {t('projects.edit.cli')}
-                            </Header>
-                        }
-                    >
-                        <SpaceBetween size="s">
-                            <Box variant="p" color="text-body-secondary">
-                                Run the following commands to set up the CLI for this project
-                            </Box>
-
-                            <div className={styles.codeWrapper}>
-                                <Hotspot hotspotId={HotspotIds.CONFIGURE_CLI_COMMAND}>
-                                    <Code className={styles.code}>{configCliCommand}</Code>
-
-                                    <div className={styles.copy}>
-                                        <Popover
-                                            dismissButton={false}
-                                            position="top"
-                                            size="small"
-                                            triggerType="custom"
-                                            content={<StatusIndicator type="success">{t('common.copied')}</StatusIndicator>}
-                                        >
-                                            <Button
-                                                formAction="none"
-                                                iconName="copy"
-                                                variant="normal"
-                                                onClick={copyCliCommand}
-                                            />
-                                        </Popover>
-                                    </div>
-                                </Hotspot>
-                            </div>
-                        </SpaceBetween>
-                    </Container>
+                    {isProjectMember && (
+                        <Container
+                            header={
+                                <Header variant="h2" info={<InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />}>
+                                    {t('projects.edit.cli')}
+                                </Header>
+                            }
+                        >
+                            <SpaceBetween size="s">
+                                <Box variant="p" color="text-body-secondary">
+                                    Run the following commands to set up the CLI for this project
+                                </Box>
+
+                                <div className={styles.codeWrapper}>
+                                    <Hotspot hotspotId={HotspotIds.CONFIGURE_CLI_COMMAND}>
+                                        <Code className={styles.code}>{configCliCommand}</Code>
+
+                                        <div className={styles.copy}>
+                                            <Popover
+                                                dismissButton={false}
+                                                position="top"
+                                                size="small"
+                                                triggerType="custom"
+                                                content={<StatusIndicator type="success">{t('common.copied')}</StatusIndicator>}
+                                            >
+                                                <Button
+                                                    formAction="none"
+                                                    iconName="copy"
+                                                    variant="normal"
+                                                    onClick={copyCliCommand}
+                                                />
+                                            </Popover>
+                                        </div>
+                                    </Hotspot>
+                                </div>
+                            </SpaceBetween>
+                        </Container>
+                    )}
 
                     <BackendsTable
                         backends={backendsData}
@@ -190,6 +236,7 @@ export const ProjectSettings: React.FC = () => {
                         members={data.members}
                         readonly={!isProjectManager(data)}
                         isAdmin={isProjectAdmin(data)}
+                        project={data}
                     />
 
                     <Container header={<Header variant="h2">{t('common.danger_zone')}</Header>}>
@@ -216,6 +263,43 @@ export const ProjectSettings: React.FC = () => {
                                     </>
                                 )}
 
+                                {isAvailableProjectManaging && (
+                                    <>
+                                        <Box variant="h5" color="text-body-secondary">
+                                            {t('projects.edit.project_visibility')}
+                                        </Box>
+
+                                        <div>
+                                            <ButtonWithConfirmation
+                                                variant="danger-normal"
+                                                disabled={!isProjectManager(data)}
+                                                formAction="none"
+                                                onClick={() => changeVisibilityHandler(selectedVisibility.value === 'public')}
+                                                confirmTitle={t('projects.edit.update_visibility_confirm_title')}
+                                                confirmButtonLabel={t('projects.edit.change_visibility')}
+                                                confirmContent={
+                                                    <SpaceBetween size="s">
+                                                        <Box variant="p" color="text-body-secondary">
+                                                            {t('projects.edit.update_visibility_confirm_message')}
+                                                        </Box>
+                                                        <div className={styles.dangerSectionField}>
+                                                            <SelectCSD
+                                                                options={visibilityOptions}
+                                                                selectedOption={selectedVisibility}
+                                                                onChange={(event) => setSelectedVisibility(event.detail.selectedOption as { label: string; value: string })}
+                                                                expandToViewport={true}
+                                                                filteringType="auto"
+                                                            />
+                                                        </div>
+                                                    </SpaceBetween>
+                                                }
+                                            >
+                                                {t('projects.edit.change_visibility')}
+                                            </ButtonWithConfirmation>
+                                        </div>
+                                    </>
+                                )}
+
                                 <Box variant="h5" color="text-body-secondary">
                                     {t('projects.edit.owner')}
                                 </Box>

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

@@ -1,14 +1,37 @@
-import React from 'react';
-import { Outlet, useParams } from 'react-router-dom';
+import React, { useMemo } from 'react';
+import { Outlet, useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
-import { ContentLayout, DetailsHeader } from 'components';
+import { Button, ContentLayout, DetailsHeader } from 'components';
+
+import { useAppSelector, useNotifications } from 'hooks';
+import { selectUserData } from 'App/slice';
+import { ROUTES } from 'routes';
+import { useGetProjectQuery, useAddProjectMemberMutation, useRemoveProjectMemberMutation } from 'services/project';
+import { getProjectRoleByUserName } from '../utils';
+import { useProjectMemberActions } from '../hooks/useProjectMemberActions';
 
 export const ProjectDetails: React.FC = () => {
+    const { t } = useTranslation();
     const params = useParams();
+    const navigate = useNavigate();
     const paramProjectName = params.projectName ?? '';
+    const userData = useAppSelector(selectUserData);
+    const { handleJoinProject, handleLeaveProject, isMemberActionLoading } = useProjectMemberActions();
+
+    const { data: project } = useGetProjectQuery({ name: paramProjectName });
+
+    const currentUserRole = useMemo(() => {
+        if (!userData?.username || !project) return null;
+        return getProjectRoleByUserName(project, userData.username);
+    }, [project, userData?.username]);
+
+    const isProjectOwner = userData?.username === project?.owner.username;
+
+    const isMember = currentUserRole !== null;
 
     return (
-        <ContentLayout header={<DetailsHeader title={paramProjectName} />}>
+        <ContentLayout header={<DetailsHeader title={paramProjectName}/>}>
             <Outlet />
         </ContentLayout>
     );