Implement functionality to update project member permissions in settings (#56)

* Add mutation to update permissions of project member

* Use update project member permission client method in UI

* Handle review changes

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/project/settings/MemberCard.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { Permission } from 'gql-client';
 
 import {
   Select,
@@ -33,8 +34,11 @@ interface MemberCardProps {
   isOwner: boolean;
   isPending: boolean;
   permissions: string[];
-  handleDeletePendingMember: (id: string) => void;
-  removeMemberHandler: () => Promise<void>;
+  handleDeletePendingMember?: (id: string) => void;
+  onRemoveProjectMember?: () => Promise<void>;
+  onUpdateProjectMember?: (data: {
+    permissions: Permission[];
+  }) => Promise<void>;
 }
 
 const MemberCard = ({
@@ -44,7 +48,8 @@ const MemberCard = ({
   isPending,
   permissions,
   handleDeletePendingMember,
-  removeMemberHandler,
+  onRemoveProjectMember,
+  onUpdateProjectMember,
 }: MemberCardProps) => {
   const [selectedPermission, setSelectedPermission] = useState(
     permissions.join('+'),
@@ -52,7 +57,7 @@ const MemberCard = ({
   const [removeMemberDialogOpen, setRemoveMemberDialogOpen] = useState(false);
 
   const handlePermissionChange = useCallback(
-    (value: string) => {
+    async (value: string) => {
       setSelectedPermission(value);
 
       if (value === 'remove') {
@@ -61,6 +66,11 @@ const MemberCard = ({
         setTimeout(() => {
           setSelectedPermission(selectedPermission);
         });
+      } else {
+        if (onUpdateProjectMember) {
+          const permissions = value.split('+') as Permission[];
+          await onUpdateProjectMember({ permissions });
+        }
       }
     },
     [removeMemberDialogOpen, selectedPermission],
@@ -112,7 +122,9 @@ const MemberCard = ({
                 size="sm"
                 className="rounded-full"
                 onClick={() => {
-                  handleDeletePendingMember(member.id);
+                  if (handleDeletePendingMember) {
+                    handleDeletePendingMember(member.id);
+                  }
                 }}
               >
                 D
@@ -128,7 +140,9 @@ const MemberCard = ({
         confirmButtonTitle="Yes, Remove member"
         handleConfirm={() => {
           setRemoveMemberDialogOpen((preVal) => !preVal);
-          removeMemberHandler();
+          if (onRemoveProjectMember) {
+            onRemoveProjectMember();
+          }
         }}
         color="red"
       >

packages/frontend/src/components/projects/project/settings/MembersTabPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import toast, { Toaster } from 'react-hot-toast';
-import { Project } from 'gql-client';
+import { Permission, Project } from 'gql-client';
 
 import { Chip, Button, Typography } from '@material-tailwind/react';
 
@@ -30,17 +30,32 @@ const MembersTabPanel = ({ project }: { project: Project }) => {
   }, [project.id]);
 
   const removeMemberHandler = async (projectMemberId: string) => {
-    const { removeMember: isMemberRemoved } =
-      await client.removeMember(projectMemberId);
+    const { removeProjectMember: isMemberRemoved } =
+      await client.removeProjectMember(projectMemberId);
 
     if (isMemberRemoved) {
-      toast.success('Member removed from project');
       await fetchProjectMembers();
+      toast.success('Member removed from project');
     } else {
       toast.error('Not able to remove member');
     }
   };
 
+  const updateProjectMemberHandler = useCallback(
+    async (projectMemberId: string, data: { permissions: Permission[] }) => {
+      const { updateProjectMember: isProjectMemberUpdated } =
+        await client.updateProjectMember(projectMemberId, data);
+
+      if (isProjectMemberUpdated) {
+        await fetchProjectMembers();
+        toast.success('Project member permission updated');
+      } else {
+        toast.error('Project member permission not updated');
+      }
+    },
+    [],
+  );
+
   useEffect(() => {
     fetchProjectMembers();
   }, [project.id, fetchProjectMembers]);
@@ -73,8 +88,6 @@ const MembersTabPanel = ({ project }: { project: Project }) => {
         isOwner={true}
         isPending={false}
         permissions={[]}
-        handleDeletePendingMember={() => {}}
-        removeMemberHandler={async () => {}}
       />
       {projectMembers.map((projectMember, index) => {
         return (
@@ -92,7 +105,12 @@ const MembersTabPanel = ({ project }: { project: Project }) => {
                 ),
               );
             }}
-            removeMemberHandler={() => removeMemberHandler(projectMember.id)}
+            onRemoveProjectMember={async () =>
+              await removeMemberHandler(projectMember.id)
+            }
+            onUpdateProjectMember={async (data) => {
+              await updateProjectMemberHandler(projectMember.id, data);
+            }}
           />
         );
       })}