resolve merge conflict

2026-10-15 22:46:24 +00:00 · 2024-09-12 08:03:10 -07:00
parent ce9b66ef14 5150c102e6
commit 4c65e9910a
64 changed files with 1157 additions and 573 deletions
@@ -3,7 +3,7 @@ import { NextRouter, useRouter } from "next/router";
 import { useServerConfig } from "@app/context";
 import { useSelectOrganization } from "@app/hooks/api";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
-import { userKeys } from "@app/hooks/api/users/queries";
+import { userKeys } from "@app/hooks/api/users";
 import { queryClient } from "@app/reactQuery";

 export const navigateUserToOrg = async (router: NextRouter, organizationId?: string) => {
@@ -43,6 +43,11 @@ export const useNavigateToSelectOrganization = () => {
      await navigateUserToOrg(router, config.defaultAuthOrgId);
    }

+    const localOrgId = localStorage.getItem("orgData.id")
+    if(!cliCallbackPort && localOrgId != null){
+      await navigateUserToOrg(router, localOrgId);
+    }
+
    queryClient.invalidateQueries(userKeys.getUser);
    let redirectTo = "/login/select-organization";

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useRouter } from "next/router";
-import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { faChevronLeft, faEllipsis, faFolder, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";

@@ -31,6 +31,8 @@ import {
 import { usePopUp } from "@app/hooks/usePopUp";
 import { TabSections } from "@app/views/Org/Types";

+import { UserAuditLogsSection } from "./components/UserProjectsSection/UserAuditLogsSection";
+import { UserGroupsSection } from "./components/UserProjectsSection/UserGroupsSection";
 import { UserDetailsSection, UserOrgMembershipModal, UserProjectsSection } from "./components";

 export const UserPage = withPermission(
@@ -241,7 +243,13 @@ export const UserPage = withPermission(
              <div className="mr-4 w-96">
                <UserDetailsSection membershipId={membershipId} handlePopUpOpen={handlePopUpOpen} />
              </div>
-              <UserProjectsSection membershipId={membershipId} />
+              <div className="w-full space-y-2">
+                <div className="w-full space-y-4">
+                  <UserProjectsSection membershipId={membershipId} />
+                  <UserGroupsSection orgMembership={membership} />
+                  <UserAuditLogsSection orgMembership={membership} />
+                </div>
+              </div>
            </div>
          </div>
        )}
@@ -272,6 +280,7 @@ export const UserPage = withPermission(
          }
          buttonText="Deactivate"
        />
+
        <UpgradePlanModal
          isOpen={popUp.upgradePlan.isOpen}
          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
@@ -0,0 +1,84 @@
+import { useState } from "react";
+import Link from "next/link";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { EmptyState, IconButton, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
+import { withPermission } from "@app/hoc";
+import { OrgUser } from "@app/hooks/api/types";
+import { LogsSection } from "@app/views/Project/AuditLogsPage/components";
+
+type Props = {
+  orgMembership: OrgUser;
+};
+
+export const UserAuditLogsSection = withPermission(
+  ({ orgMembership }: Props) => {
+    const [showFilter, setShowFilter] = useState(false);
+    const { subscription, isLoading } = useSubscription();
+
+    // eslint-disable-next-line no-nested-ternary
+    return subscription?.auditLogs ? (
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <p className="text-lg font-semibold text-gray-200">Audit Logs</p>
+
+          <Tooltip content="Show audit log filters">
+            <IconButton
+              colorSchema="primary"
+              ariaLabel="copy icon"
+              variant="plain"
+              className="group relative"
+              onClick={() => setShowFilter(!showFilter)}
+            >
+              <div className="flex items-center space-x-2">
+                <p>Filter</p>
+                <FontAwesomeIcon icon={faFilter} />
+              </div>
+            </IconButton>
+          </Tooltip>
+        </div>
+        <LogsSection
+          showFilters={showFilter}
+          filterClassName="bg-mineshaft-900 static"
+          presetActor={orgMembership.user.id}
+          isOrgAuditLogs
+        />
+      </div>
+    ) : !isLoading ? (
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <p className="text-lg font-semibold text-gray-200">Audit Logs</p>
+        </div>
+        <EmptyState
+          className="rounded-lg"
+          title={
+            <div>
+              <p>
+                Please{" "}
+                <Link
+                  href={
+                    subscription && subscription.slug !== null
+                      ? `/org/${orgMembership.organization}/billing`
+                      : "https://infisical.com/scheduledemo"
+                  }
+                  passHref
+                >
+                  <a
+                    className="cursor-pointer font-medium text-primary-500 transition-all hover:text-primary-600"
+                    target="_blank"
+                  >
+                    upgrade your subscription
+                  </a>
+                </Link>{" "}
+                to view audit logs for this user
+              </p>
+            </div>
+          }
+        />
+      </div>
+    ) : null;
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Member }
+);
@@ -0,0 +1,45 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
+import { TGroupWithProjectMemberships } from "@app/hooks/api/groups/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  group: TGroupWithProjectMemberships;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromGroup"]>, data?: {}) => void;
+};
+
+export const UserGroupsRow = ({ group, handlePopUpOpen }: Props) => {
+  return (
+    <>
+      <Tr
+        className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        key={`user-project-membership-${group.id}`}
+      >
+        <Td>{group.name}</Td>
+        <Td>
+          <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <Tooltip content="Unassign user from group">
+              <IconButton
+                colorSchema="danger"
+                ariaLabel="copy icon"
+                variant="plain"
+                className="group relative"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlePopUpOpen("removeUserFromGroup", {
+                    groupSlug: group.slug
+                  });
+                }}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+              </IconButton>
+            </Tooltip>
+          </div>
+        </Td>
+      </Tr>
+    </>
+  );
+};
@@ -0,0 +1,68 @@
+import { useCallback } from "react";
+
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal } from "@app/components/v2";
+import { useRemoveUserFromGroup } from "@app/hooks/api";
+import { OrgUser } from "@app/hooks/api/users/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { UserGroupsTable } from "./UserGroupsTable";
+
+type Props = {
+  orgMembership: OrgUser;
+};
+
+export const UserGroupsSection = ({ orgMembership }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "removeUserFromGroup"
+  ] as const);
+
+  const { mutateAsync: removeUserFromGroup } = useRemoveUserFromGroup();
+
+  const handleRemoveUserFromGroup = useCallback(async (groupSlug: string) => {
+    try {
+      await removeUserFromGroup({
+        slug: groupSlug,
+        username: orgMembership.user.username
+      });
+
+      createNotification({
+        type: "success",
+        text: "User removed from group successfully"
+      });
+
+      handlePopUpClose("removeUserFromGroup");
+    } catch (error) {
+      createNotification({
+        type: "error",
+        text: "Failed to remove user from group"
+      });
+    }
+  }, []);
+
+  return (
+    <>
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+          <h3 className="text-lg font-semibold text-mineshaft-100">Groups</h3>
+        </div>
+
+        <UserGroupsTable orgMembership={orgMembership} handlePopUpOpen={handlePopUpOpen} />
+      </div>
+
+      <DeleteActionModal
+        isOpen={popUp.removeUserFromGroup.isOpen}
+        title="Are you sure want to unassign user from group?"
+        onChange={(isOpen) => handlePopUpToggle("removeUserFromGroup", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() => {
+          const popupData = popUp?.removeUserFromGroup?.data as {
+            groupSlug: string;
+          };
+
+          return handleRemoveUserFromGroup(popupData.groupSlug);
+        }}
+      />
+    </>
+  );
+};
@@ -0,0 +1,42 @@
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+
+import { EmptyState, Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
+import { OrgUser } from "@app/hooks/api/types";
+import { useListUserGroupMemberships } from "@app/hooks/api/users/queries";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { UserGroupsRow } from "./UserGroupsRow";
+
+type Props = {
+  orgMembership: OrgUser;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromGroup"]>, data?: {}) => void;
+};
+
+export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => {
+  const { data: groups, isLoading } = useListUserGroupMemberships(orgMembership.user.username);
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Name</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {groups?.map((group) => (
+            <UserGroupsRow
+              key={`user-group-${group.id}`}
+              group={group}
+              handlePopUpOpen={handlePopUpOpen}
+            />
+          ))}
+        </TBody>
+      </Table>
+      {!isLoading && !groups?.length && (
+        <EmptyState title="This user has not been assigned to any groups" icon={faFolder} />
+      )}
+    </TableContainer>
+  );
+};
@@ -12,7 +12,7 @@ export const AuditLogsPage = withProjectPermission(
            <p className="text-3xl font-semibold text-gray-200">Audit Logs</p>
            <div />
          </div>
-          <LogsSection />
+          <LogsSection showFilters />
        </div>
      </div>
    );
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Control, Controller, UseFormReset } from "react-hook-form";
 import { faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";

 import { Button, DatePicker, FormControl, Select, SelectItem } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
@@ -19,11 +20,13 @@ const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label
 }));

 type Props = {
+  presetActor?: string;
+  className?: string;
  control: Control<AuditLogFilterFormData>;
  reset: UseFormReset<AuditLogFilterFormData>;
 };

-export const LogsFilter = ({ control, reset }: Props) => {
+export const LogsFilter = ({ presetActor, className, control, reset }: Props) => {
  const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
  const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);

@@ -69,8 +72,13 @@ export const LogsFilter = ({ control, reset }: Props) => {
  };

  return (
-    <div className="sticky top-20 z-10 flex items-center justify-between bg-bunker-800">
-      <div className="flex items-center">
+    <div
+      className={twMerge(
+        "sticky top-20 z-10 flex items-center justify-between bg-bunker-800",
+        className
+      )}
+    >
+      <div className="flex items-center space-x-2">
        <Controller
          control={control}
          name="eventType"
@@ -79,7 +87,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
              label="Event"
              errorText={error?.message}
              isError={Boolean(error)}
-              className="mr-4 w-40"
+              className="w-40"
            >
              <Select
                {...(field.value ? { value: field.value } : { placeholder: "Select" })}
@@ -96,7 +104,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
            </FormControl>
          )}
        />
-        {!isLoading && data && data.length > 0 && (
+        {!isLoading && data && data.length > 0 && !presetActor && (
          <Controller
            control={control}
            name="actor"
@@ -105,7 +113,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
                label="Actor"
                errorText={error?.message}
                isError={Boolean(error)}
-                className="mr-4 w-40"
+                className="w-40"
              >
                <Select
                  {...(field.value ? { value: field.value } : { placeholder: "Select" })}
@@ -127,7 +135,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
              label="Source"
              errorText={error?.message}
              isError={Boolean(error)}
-              className="mr-4 w-40"
+              className="w-40"
            >
              <Select
                {...(field.value ? { value: field.value } : { placeholder: "Select" })}
@@ -149,12 +157,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
          control={control}
          render={({ field: { onChange, ...field }, fieldState: { error } }) => {
            return (
-              <FormControl
-                label="Start date"
-                errorText={error?.message}
-                isError={Boolean(error)}
-                className="mr-4"
-              >
+              <FormControl label="Start date" errorText={error?.message} isError={Boolean(error)}>
                <DatePicker
                  value={field.value || undefined}
                  onChange={(date) => {
@@ -195,26 +198,25 @@ export const LogsFilter = ({ control, reset }: Props) => {
          }}
        />
      </div>
-      <div>
-        <Button
-          isLoading={false}
-          colorSchema="primary"
-          variant="outline_bg"
-          type="submit"
-          leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} className="mr-2" />}
-          onClick={() =>
-            reset({
-              eventType: undefined,
-              actor: undefined,
-              userAgentType: undefined,
-              startDate: undefined,
-              endDate: undefined
-            })
-          }
-        >
-          Clear filters
-        </Button>
-      </div>
+      <Button
+        isLoading={false}
+        colorSchema="primary"
+        variant="outline_bg"
+        className="mt-1.5"
+        type="submit"
+        leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} />}
+        onClick={() =>
+          reset({
+            eventType: undefined,
+            actor: presetActor,
+            userAgentType: undefined,
+            startDate: undefined,
+            endDate: undefined
+          })
+        }
+      >
+        Clear filters
+      </Button>
    </div>
  );
 };
@@ -12,7 +12,19 @@ import { LogsFilter } from "./LogsFilter";
 import { LogsTable } from "./LogsTable";
 import { AuditLogFilterFormData, auditLogFilterFormSchema } from "./types";

-export const LogsSection = () => {
+type Props = {
+  presetActor?: string;
+  showFilters?: boolean;
+  filterClassName?: string;
+  isOrgAuditLogs?: boolean;
+};
+
+export const LogsSection = ({
+  presetActor,
+  filterClassName,
+  isOrgAuditLogs,
+  showFilters
+}: Props) => {
  const { subscription } = useSubscription();
  const router = useRouter();

@@ -21,6 +33,7 @@ export const LogsSection = () => {
  const { control, reset, watch } = useForm<AuditLogFilterFormData>({
    resolver: yupResolver(auditLogFilterFormSchema),
    defaultValues: {
+      actor: presetActor,
      page: 1,
      perPage: 10,
      startDate: new Date(new Date().setDate(new Date().getDate() - 1)), // day before today
@@ -43,10 +56,19 @@ export const LogsSection = () => {

  return (
    <div>
-      <LogsFilter control={control} reset={reset} />
+      {showFilters && (
+        <LogsFilter
+          className={filterClassName}
+          presetActor={presetActor}
+          control={control}
+          reset={reset}
+        />
+      )}
      <LogsTable
+        isOrgAuditLogs={isOrgAuditLogs}
        eventType={eventType}
        userAgentType={userAgentType}
+        showActorColumn={!presetActor}
        actor={actor}
        startDate={startDate}
        endDate={endDate}
@@ -25,15 +25,24 @@ type Props = {
  actor?: string;
  startDate?: Date;
  endDate?: Date;
+  isOrgAuditLogs?: boolean;
+  showActorColumn: boolean;
 };

 const AUDIT_LOG_LIMIT = 15;

-export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate }: Props) => {
+export const LogsTable = ({
+  eventType,
+  userAgentType,
+  showActorColumn,
+  actor,
+  startDate,
+  endDate,
+  isOrgAuditLogs
+}: Props) => {
  const { currentWorkspace } = useWorkspace();

  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useGetAuditLogs(
-    currentWorkspace?.id ?? "",
    {
      eventType,
      userAgentType,
@@ -41,7 +50,8 @@ export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate
      startDate,
      endDate,
      limit: AUDIT_LOG_LIMIT
-    }
+    },
+    !isOrgAuditLogs ? currentWorkspace?.id ?? "" : null
  );

  const isEmpty = !isLoading && !data?.pages?.[0].length;
@@ -54,7 +64,8 @@ export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate
            <Tr>
              <Th>Timestamp</Th>
              <Th>Event</Th>
-              <Th>Actor</Th>
+              {isOrgAuditLogs && <Th>Project</Th>}
+              {showActorColumn && <Th>Actor</Th>}
              <Th>Source</Th>
              <Th>Metadata</Th>
            </Tr>
@@ -64,7 +75,12 @@ export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate
              data?.pages?.map((group, i) => (
                <Fragment key={`auditlog-item-${i + 1}`}>
                  {group.map((auditLog) => (
-                    <LogsTableRow auditLog={auditLog} key={`audit-log-${auditLog.id}`} />
+                    <LogsTableRow
+                      showActorColumn={showActorColumn}
+                      isOrgAuditLogs={isOrgAuditLogs}
+                      auditLog={auditLog}
+                      key={`audit-log-${auditLog.id}`}
+                    />
                  ))}
                </Fragment>
              ))}
@@ -5,9 +5,11 @@ import { Actor, AuditLog, Event } from "@app/hooks/api/auditLogs/types";

 type Props = {
  auditLog: AuditLog;
+  isOrgAuditLogs?: boolean;
+  showActorColumn: boolean;
 };

-export const LogsTableRow = ({ auditLog }: Props) => {
+export const LogsTableRow = ({ auditLog, isOrgAuditLogs, showActorColumn }: Props) => {
  const renderActor = (actor: Actor) => {
    switch (actor.type) {
      case ActorType.USER:
@@ -486,7 +488,8 @@ export const LogsTableRow = ({ auditLog }: Props) => {
    <Tr className={`log-${auditLog.id} h-10 border-x-0 border-b border-t-0`}>
      <Td>{formatDate(auditLog.createdAt)}</Td>
      <Td>{`${eventToNameMap[auditLog.event.type]}`}</Td>
-      {renderActor(auditLog.actor)}
+      {isOrgAuditLogs && <Td>{auditLog.project.name}</Td>}
+      {showActorColumn && renderActor(auditLog.actor)}
      <Td>
        <p>{userAgentTTypeoNameMap[auditLog.userAgentType]}</p>
        <p>{auditLog.ipAddress}</p>
@@ -2,24 +2,37 @@ import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
+import { faCheckCircle, faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { twMerge } from "tailwind-merge";
 import { z } from "zod";

 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  FormControl,
+  Modal,
+  ModalContent
+} from "@app/components/v2";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
-  useAddUserToWsE2EE,
-  useAddUserToWsNonE2EE,
+  useAddUsersToOrg,
  useGetOrgUsers,
-  useGetUserWsKey,
+  useGetProjectRoles,
  useGetWorkspaceUsers
 } from "@app/hooks/api";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 const addMemberFormSchema = z.object({
-  orgMembershipId: z.string().trim()
+  orgMembershipIds: z.array(z.string().trim()).min(1),
+  projectRoleSlugs: z.array(z.string().trim().min(1)).min(1)
 });

 type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
@@ -37,48 +50,52 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
  const orgId = currentOrg?.id || "";
  const workspaceId = currentWorkspace?.id || "";

-  const { data: wsKey } = useGetUserWsKey(workspaceId);
  const { data: members } = useGetWorkspaceUsers(workspaceId);
  const { data: orgUsers } = useGetOrgUsers(orgId);

-  const { mutateAsync: addUserToWorkspace } = useAddUserToWsE2EE();
-  const { mutateAsync: addUserToWorkspaceNonE2EE } = useAddUserToWsNonE2EE();
+  const { data: roles } = useGetProjectRoles(currentWorkspace?.slug || "");

  const {
    control,
    handleSubmit,
    reset,
+    watch,
    formState: { isSubmitting }
-  } = useForm<TAddMemberForm>({ resolver: zodResolver(addMemberFormSchema) });
+  } = useForm<TAddMemberForm>({
+    resolver: zodResolver(addMemberFormSchema),
+    defaultValues: { orgMembershipIds: [], projectRoleSlugs: [ProjectMembershipRole.Member] }
+  });

-  const onAddMember = async ({ orgMembershipId }: TAddMemberForm) => {
+  const { mutateAsync: addMembersToProject } = useAddUsersToOrg();
+
+  const onAddMember = async ({ orgMembershipIds, projectRoleSlugs }: TAddMemberForm) => {
    if (!currentWorkspace) return;
    if (!currentOrg?.id) return;
-    // TODO(akhilmhdh): Move to memory storage
-    const userPrivateKey = localStorage.getItem("PRIVATE_KEY");
-    if (!userPrivateKey || !wsKey) {
-      createNotification({
-        text: "Failed to find private key. Try re-login"
-      });
-      return;
-    }
-    const orgUser = (orgUsers || []).find(({ id }) => id === orgMembershipId);
-    if (!orgUser) return;
+
+    const selectedMembers = orgMembershipIds.map((orgMembershipId) =>
+      orgUsers?.find((orgUser) => orgUser.id === orgMembershipId)
+    );
+
+    if (!selectedMembers) return;

    try {
-      // TODO: update
      if (currentWorkspace.version === ProjectVersion.V1) {
-        await addUserToWorkspace({
-          workspaceId,
-          userPrivateKey,
-          decryptKey: wsKey,
-          members: [{ orgMembershipId, userPublicKey: orgUser.user.publicKey }]
+        createNotification({
+          type: "error",
+          text: "Please upgrade your project to invite new members to the project."
        });
      } else {
-        await addUserToWorkspaceNonE2EE({
-          projectId: workspaceId,
-          usernames: [orgUser.user.username],
-          orgId
+        await addMembersToProject({
+          inviteeEmails: selectedMembers.map((member) => member?.user.username!),
+          organizationId: orgId,
+          organizationRoleSlug: ProjectMembershipRole.Member, // ? This doesn't apply in this case, because we know the users being added are already part of the organization
+          projects: [
+            {
+              slug: currentWorkspace.slug,
+              id: currentWorkspace.id,
+              projectRoleSlug: projectRoleSlugs
+            }
+          ]
        });
      }
      createNotification({
@@ -104,6 +121,9 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
    return (orgUsers || []).filter(({ user: u }) => !wsUserUsernames.has(u.username));
  }, [orgUsers, members]);

+  const selectedOrgMembershipIds = watch("orgMembershipIds");
+  const selectedRoleSlugs = watch("projectRoleSlugs");
+
  return (
    <Modal
      isOpen={popUp?.addMember?.isOpen}
@@ -115,37 +135,183 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
      >
        {filteredOrgUsers.length ? (
          <form onSubmit={handleSubmit(onAddMember)}>
-            <Controller
-              control={control}
-              defaultValue={filteredOrgUsers?.[0]?.user?.username}
-              name="orgMembershipId"
-              render={({ field, fieldState: { error } }) => (
-                <FormControl label="Username" isError={Boolean(error)} errorText={error?.message}>
-                  <Select
-                    position="popper"
-                    className="w-full"
-                    defaultValue={filteredOrgUsers?.[0]?.user?.username}
-                    value={field.value}
-                    onValueChange={field.onChange}
-                  >
-                    {filteredOrgUsers.map(({ id: orgUserId, user: u }) => (
-                      <SelectItem value={orgUserId} key={`org-membership-join-${orgUserId}`}>
-                        {u?.username}
-                      </SelectItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              )}
-            />
+            <div className="flex w-full items-center gap-2">
+              <div className="w-full">
+                <Controller
+                  control={control}
+                  name="orgMembershipIds"
+                  render={({ field }) => (
+                    <FormControl label="Invite users to project">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          {filteredOrgUsers && filteredOrgUsers.length > 0 ? (
+                            <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                              {/* eslint-disable-next-line no-nested-ternary */}
+                              {selectedOrgMembershipIds.length === 1
+                                ? filteredOrgUsers.find(
+                                    (orgUser) => orgUser.id === selectedOrgMembershipIds[0]
+                                  )?.user.username
+                                : selectedOrgMembershipIds.length === 0
+                                ? "No users selected"
+                                : `${selectedOrgMembershipIds.length} users selected`}
+                              <FontAwesomeIcon icon={faChevronDown} className="text-xs" />
+                            </div>
+                          ) : (
+                            <div className="inline-flex w-full cursor-default items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                              No users found
+                            </div>
+                          )}
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                          align="start"
+                          className="thin-scrollbar z-[100] max-h-80"
+                        >
+                          {filteredOrgUsers && filteredOrgUsers.length > 0 ? (
+                            filteredOrgUsers.map((member) => {
+                              const isSelected = selectedOrgMembershipIds.includes(member.id);
+
+                              return (
+                                <DropdownMenuItem
+                                  onSelect={(event) =>
+                                    filteredOrgUsers.length > 1 && event.preventDefault()
+                                  }
+                                  onClick={() => {
+                                    if (selectedOrgMembershipIds.includes(String(member.id))) {
+                                      field.onChange(
+                                        selectedOrgMembershipIds.filter(
+                                          (membershipId: string) =>
+                                            membershipId !== String(member.id)
+                                        )
+                                      );
+                                    } else {
+                                      field.onChange([
+                                        ...selectedOrgMembershipIds,
+                                        String(member.id)
+                                      ]);
+                                    }
+                                  }}
+                                  key={`membership-id-${member.id}`}
+                                  icon={
+                                    isSelected ? (
+                                      <FontAwesomeIcon
+                                        icon={faCheckCircle}
+                                        className="pr-0.5 text-primary"
+                                      />
+                                    ) : (
+                                      <div className="pl-[1.01rem]" />
+                                    )
+                                  }
+                                  iconPos="left"
+                                  className="w-[28.4rem] text-sm"
+                                >
+                                  {member.user.username}
+                                </DropdownMenuItem>
+                              );
+                            })
+                          ) : (
+                            <div />
+                          )}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </FormControl>
+                  )}
+                />
+              </div>
+
+              <div className="flex min-w-fit justify-end">
+                <Controller
+                  control={control}
+                  name="projectRoleSlugs"
+                  render={({ field }) => (
+                    <FormControl
+                      label="Select roles"
+                      tooltipText="Select the roles that you wish to assign to the users"
+                    >
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          {roles && roles.length > 0 ? (
+                            <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                              {/* eslint-disable-next-line no-nested-ternary */}
+                              {selectedRoleSlugs.length === 1
+                                ? roles.find((role) => role.slug === selectedRoleSlugs[0])?.name
+                                : selectedRoleSlugs.length === 0
+                                ? "Select at least one role"
+                                : `${selectedRoleSlugs.length} roles selected`}
+                              <FontAwesomeIcon
+                                icon={faChevronDown}
+                                className={twMerge("ml-2 text-xs")}
+                              />
+                            </div>
+                          ) : (
+                            <div className="inline-flex w-full cursor-default items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
+                              No roles found
+                            </div>
+                          )}
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                          align="start"
+                          className="thin-scrollbar z-[100] max-h-80"
+                        >
+                          {roles && roles.length > 0 ? (
+                            roles.map((role) => {
+                              const isSelected = selectedRoleSlugs.includes(role.slug);
+
+                              return (
+                                <DropdownMenuItem
+                                  onSelect={(event) => roles.length > 1 && event.preventDefault()}
+                                  onClick={() => {
+                                    if (selectedRoleSlugs.includes(String(role.slug))) {
+                                      field.onChange(
+                                        selectedRoleSlugs.filter(
+                                          (roleSlug: string) => roleSlug !== String(role.slug)
+                                        )
+                                      );
+                                    } else {
+                                      field.onChange([...selectedRoleSlugs, role.slug]);
+                                    }
+                                  }}
+                                  key={`role-slug-${role.slug}`}
+                                  icon={
+                                    isSelected ? (
+                                      <FontAwesomeIcon
+                                        icon={faCheckCircle}
+                                        className="pr-0.5 text-primary"
+                                      />
+                                    ) : (
+                                      <div className="pl-[1.01rem]" />
+                                    )
+                                  }
+                                  iconPos="left"
+                                  className="w-[28.4rem] text-sm"
+                                >
+                                  {role.name}
+                                </DropdownMenuItem>
+                              );
+                            })
+                          ) : (
+                            <div />
+                          )}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </div>
+
            <div className="mt-8 flex items-center">
              <Button
                className="mr-4"
                size="sm"
                type="submit"
                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
+                isDisabled={
+                  isSubmitting ||
+                  selectedOrgMembershipIds.length === 0 ||
+                  selectedRoleSlugs.length === 0
+                }
              >
-                Add Member
+                Add Members
              </Button>
              <Button
                colorSchema="secondary"
@@ -222,7 +222,12 @@ export const WorkflowIntegrationTab = () => {
                        />
                      </DropdownMenuTrigger>
                      <DropdownMenuContent
-                        style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+                        style={{
+                          width: "var(--radix-dropdown-menu-trigger-width)",
+                          maxHeight: "350px",
+                          overflowY: "auto"
+                        }}
+                        side="bottom"
                        align="start"
                      >
                        {sortedSlackChannels?.map((slackChannel) => {
@@ -290,7 +295,12 @@ export const WorkflowIntegrationTab = () => {
                        />
                      </DropdownMenuTrigger>
                      <DropdownMenuContent
-                        style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
+                        style={{
+                          width: "var(--radix-dropdown-menu-trigger-width)",
+                          maxHeight: "350px",
+                          overflowY: "auto"
+                        }}
+                        side="bottom"
                        align="start"
                      >
                        {sortedSlackChannels?.map((slackChannel) => {