Implemented multiple roles Edit invite/collaborator

dashboard/src/main/home/modals/EditInviteOrCollaboratorModal.tsx

@@ -6,6 +6,8 @@ import { Context } from "shared/Context";
 import RadioSelector from "components/RadioSelector";
 import api from "shared/api";
 import { setTimeout } from "timers";
+import { RoleList } from "../project-settings/roles-admin/types";
+import { RoleSelector } from "../project-settings/InviteList";
 
 const EditCollaboratorModal = () => {
   const {
@@ -24,6 +26,9 @@ const EditCollaboratorModal = () => {
   const [selectedRole, setSelectedRole] = useState("");
   const [roleList, setRoleList] = useState([]);
 
+  const [roles, setRoles] = useState<RoleList>([]);
+  const [selectedRoles, setSelectedRoles] = useState<RoleList>([]);
+
   useEffect(() => {
     api
       .getAvailableRoles("<token>", {}, { project_id })
@@ -35,7 +40,17 @@ const EditCollaboratorModal = () => {
         setRoleList(availableRoleList);
         setSelectedRole(user?.kind || "developer");
       });
-  }, []);
+
+    api.listRoles<RoleList>("<token>", {}, { project_id }).then((res) => {
+      const newRoles = res.data;
+      setRoles(newRoles);
+
+      const selectedRoles = newRoles.filter((role) =>
+        user.roles.includes(role.id)
+      );
+      setSelectedRoles(selectedRoles);
+    });
+  }, [project_id]);
 
   const capitalizeFirstLetter = (string: string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);
@@ -57,6 +72,7 @@ const EditCollaboratorModal = () => {
         {
           kind: selectedRole,
           user_id: user.id,
+          roles: selectedRoles.map((role) => role.id),
         },
         { project_id }
       );
@@ -74,7 +90,7 @@ const EditCollaboratorModal = () => {
     try {
       await api.updateInvite(
         "<token>",
-        { kind: selectedRole },
+        { kind: selectedRole, roles: selectedRoles.map((role) => role.id) },
         { project_id, invite_id: user.id }
       );
       setStatus("successful");
@@ -93,10 +109,15 @@ const EditCollaboratorModal = () => {
       </ModalTitle>
       <Subtitle>Specify a different role for this user.</Subtitle>
       <RoleSelectorWrapper>
-        <RadioSelector
+        {/* <RadioSelector
           selected={selectedRole}
           setSelected={setSelectedRole}
           options={roleList}
+        /> */}
+        <RoleSelector
+          onChange={(e) => setSelectedRoles(e)}
+          options={roles}
+          values={selectedRoles}
         />
       </RoleSelectorWrapper>
 

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -494,7 +494,7 @@ const InvitePage: React.FunctionComponent<Props> = ({}) => {
 
 export default InvitePage;
 
-const RoleSelector = ({
+export const RoleSelector = ({
   options,
   onChange,
   values,

dashboard/src/shared/api.tsx

@@ -1554,7 +1554,7 @@ const getAvailableRoles = baseApi<{}, { project_id: number }>(
 );
 
 const updateInvite = baseApi<
-  { kind: string },
+  { kind: string; roles: string[] },
   { project_id: number; invite_id: number }
 >(
   "POST",
@@ -1571,6 +1571,7 @@ const updateCollaborator = baseApi<
   {
     kind: string;
     user_id: number;
+    roles: string[];
   },
   { project_id: number }
 >("POST", ({ project_id }) => `/api/projects/${project_id}/roles`);