From b35f4033c5ca186ef41330f6ae17c080f487cb59 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Wed, 22 May 2024 14:58:47 -0400 Subject: [PATCH] Refactor: Collaborator Project Settings (#197) ### TL;DR AddMemberDialog component now uses a Select dropdown for permissions instead of Checkboxes. CollaboratorsTabPanel now includes dismiss functionality for toasts. ### What changed? - Updated AddMemberDialog to use a Select dropdown for permissions - Added dismiss functionality for toasts in CollaboratorsTabPanel ### How to test? Test the functionality of selecting permissions using the dropdown and toast dismissal in CollaboratorsTabPanel. ### Why make this change? To improve user experience and UI consistency in permissions selection and toast management. --- .../project/settings/AddMemberDialog.tsx | 61 ++++++++++--------- .../projects/id/settings/Collaborators.tsx | 14 ++--- 2 files changed, 40 insertions(+), 35 deletions(-) diff --git a/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx b/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx index 66fe97e..e5599e5 100644 --- a/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx +++ b/packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx @@ -1,13 +1,13 @@ import { useCallback } from 'react'; import { useForm } from 'react-hook-form'; -import { AddProjectMemberInput, Permission } from 'gql-client'; import { Typography } from '@snowballtools/material-tailwind-react-fork'; import { Button } from 'components/shared/Button'; import { Modal } from 'components/shared/Modal'; import { Input } from 'components/shared/Input'; -import { Checkbox } from 'components/shared/Checkbox'; +import { Select, SelectOption } from 'components/shared/Select'; +import { AddProjectMemberInput, Permission } from 'gql-client'; interface AddMemberDialogProp { open: boolean; @@ -17,18 +17,30 @@ interface AddMemberDialogProp { interface formData { emailAddress: string; - permissions: { - view: boolean; - edit: boolean; - }; + canEdit: boolean; } +const permissionViewOptions: SelectOption = { + value: Permission.View, + label: Permission.View, +}; +const permissionEditOptions: SelectOption = { + value: Permission.Edit, + label: Permission.Edit, +}; +const permissionsDropdownOptions: SelectOption[] = [ + permissionViewOptions, + permissionEditOptions, +]; + const AddMemberDialog = ({ open, handleOpen, handleAddMember, }: AddMemberDialogProp) => { const { + watch, + setValue, handleSubmit, register, reset, @@ -36,10 +48,7 @@ const AddMemberDialog = ({ } = useForm({ defaultValues: { emailAddress: '', - permissions: { - view: true, - edit: false, - }, + canEdit: false, }, }); @@ -47,11 +56,7 @@ const AddMemberDialog = ({ reset(); handleOpen(); - const permissions = Object.entries(data.permissions) - .filter(([, value]) => value) - .map( - ([key]) => key.charAt(0).toUpperCase() + key.slice(1), - ) as Permission[]; + const permissions = [data.canEdit ? Permission.Edit : Permission.View]; await handleAddMember({ email: data.emailAddress, permissions }); }, []); @@ -72,19 +77,19 @@ const AddMemberDialog = ({ required: 'email field cannot be empty', })} /> - Permissions - - You can change this later if required. - - - + setValue( + 'canEdit', + (value as SelectOption)!.value === Permission.Edit, + ) + } /> diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx index e28a56b..7bb8722 100644 --- a/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx +++ b/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx @@ -16,7 +16,7 @@ const FIRST_MEMBER_CARD = 0; const CollaboratorsTabPanel = () => { const client = useGQLClient(); - const { toast } = useToast(); + const { toast, dismiss } = useToast(); const { project } = useOutletContext(); const [addmemberDialogOpen, setAddMemberDialogOpen] = useState(false); @@ -39,14 +39,14 @@ const CollaboratorsTabPanel = () => { id: 'member_added', title: 'Member added to project', variant: 'success', - onDismiss() {}, + onDismiss: dismiss, }); } else { toast({ id: 'member_not_added', title: 'Invitation not sent', variant: 'error', - onDismiss() {}, + onDismiss: dismiss, }); } }, @@ -63,14 +63,14 @@ const CollaboratorsTabPanel = () => { id: 'member_removed', title: 'Member removed from project', variant: 'success', - onDismiss() {}, + onDismiss: dismiss, }); } else { toast({ id: 'member_not_removed', title: 'Not able to remove member', variant: 'error', - onDismiss() {}, + onDismiss: dismiss, }); } }; @@ -86,14 +86,14 @@ const CollaboratorsTabPanel = () => { id: 'member_permission_updated', title: 'Project member permission updated', variant: 'success', - onDismiss() {}, + onDismiss: dismiss, }); } else { toast({ id: 'member_permission_not_updated', title: 'Project member permission not updated', variant: 'error', - onDismiss() {}, + onDismiss: dismiss, }); } },