Complete preliminary list, update, create group in project

2026-10-14 21:51:56 +00:00 · 2024-03-20 14:47:12 -07:00
parent 686b88fc97
commit 796d5e3540
37 changed files with 1825 additions and 56 deletions
@@ -10,6 +10,7 @@ export enum ProjectPermissionActions {
 export enum ProjectPermissionSub {
  Role = "role",
  Member = "member",
+  Groups = "groups",
  Settings = "settings",
  Integrations = "integrations",
  Webhooks = "webhooks",
@@ -39,6 +40,7 @@ export type ProjectPermissionSet =
  | [ProjectPermissionActions, ProjectPermissionSub.Role]
  | [ProjectPermissionActions, ProjectPermissionSub.Tags]
  | [ProjectPermissionActions, ProjectPermissionSub.Member]
+  | [ProjectPermissionActions, ProjectPermissionSub.Groups]
  | [ProjectPermissionActions, ProjectPermissionSub.Integrations]
  | [ProjectPermissionActions, ProjectPermissionSub.Webhooks]
  | [ProjectPermissionActions, ProjectPermissionSub.AuditLogs]
@@ -1,5 +1,7 @@
 import { TOrgRole } from "../roles/types";

+// TODO: rectify/standardize types
+
 export type TGroupOrgMembership = TGroup & {
  customRole?: TOrgRole;
 }
@@ -12,4 +14,23 @@ export type TGroup = {
  createAt: string;
  updatedAt: string;
  role: string;
+};
+
+export type TGroupMembership = {
+  id: string;
+  group: TGroup;
+  roles: {
+    id: string;
+    role: "owner" | "admin" | "member" | "no-access" | "custom";
+    customRoleId: string;
+    customRoleName: string;
+    customRoleSlug: string;
+    isTemporary: boolean;
+    temporaryMode: string | null;
+    temporaryRange: string | null;
+    temporaryAccessStartTime: string | null;
+    temporaryAccessEndTime: string | null;
+  }[];
+  createdAt: string;
+  updatedAt: string;
 };
@@ -1,7 +1,9 @@
 export {
+  useAddGroupToWorkspace,
  useAddIdentityToWorkspace,
  useCreateWorkspace,
  useCreateWsEnvironment,
+  useDeleteGroupFromWorkspace,
  useDeleteIdentityFromWorkspace,
  useDeleteUserFromWorkspace,
  useDeleteWorkspace,
@@ -11,6 +13,7 @@ export {
  useGetUserWorkspaces,
  useGetWorkspaceAuthorizations,
  useGetWorkspaceById,
+  useGetWorkspaceGroupMemberships,
  useGetWorkspaceIdentityMemberships,
  useGetWorkspaceIndexStatus,
  useGetWorkspaceIntegrations,
@@ -19,8 +22,8 @@ export {
  useNameWorkspaceSecrets,
  useRenameWorkspace,
  useToggleAutoCapitalization,
+  useUpdateGroupWorkspaceRole,
  useUpdateIdentityWorkspaceRole,
  useUpdateUserWorkspaceRole,
  useUpdateWsEnvironment,
-  useUpgradeProject
-} from "./queries";
+  useUpgradeProject} from "./queries";
@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

 import { apiRequest } from "@app/config/request";

+import { TGroupMembership } from "../groups/types";
 import { IdentityMembership } from "../identities/types";
 import { IntegrationAuth } from "../integrationAuth/types";
 import { TIntegration } from "../integrations/types";
@@ -16,6 +17,7 @@ import {
  RenameWorkspaceDTO,
  TGetUpgradeProjectStatusDTO,
  ToggleAutoCapitalizationDTO,
+  TUpdateWorkspaceGroupRoleDTO,
  TUpdateWorkspaceIdentityRoleDTO,
  TUpdateWorkspaceUserRoleDTO,
  UpdateEnvironmentDTO,
@@ -36,7 +38,9 @@ export const workspaceKeys = {
    [{ workspaceId }, "workspace-audit-logs"] as const,
  getWorkspaceUsers: (workspaceId: string) => [{ workspaceId }, "workspace-users"] as const,
  getWorkspaceIdentityMemberships: (workspaceId: string) =>
-    [{ workspaceId }, "workspace-identity-memberships"] as const
+    [{ workspaceId }, "workspace-identity-memberships"] as const,
+  getWorkspaceGroupMemberships: (workspaceId: string) =>
+    [{ workspaceId }, "workspace-group-memberships"] as const
 };

 const fetchWorkspaceById = async (workspaceId: string) => {
@@ -450,3 +454,90 @@ export const useGetWorkspaceIdentityMemberships = (workspaceId: string) => {
    enabled: true
  });
 };
+
+export const useAddGroupToWorkspace = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      groupSlug,
+      workspaceId,
+      role
+    }: {
+      groupSlug: string;
+      workspaceId: string;
+      role?: string;
+    }) => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.post(
+        `/api/v2/workspace/${workspaceId}/group-memberships/${groupSlug}`,
+        {
+          role
+        }
+      );
+      return groupMembership;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(workspaceId));
+    }
+  });
+};
+
+export const useUpdateGroupWorkspaceRole = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ groupSlug, workspaceId, roles }: TUpdateWorkspaceGroupRoleDTO) => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.patch(
+        `/api/v2/workspace/${workspaceId}/group-memberships/${groupSlug}`,
+        {
+          roles
+        }
+      );
+
+      return groupMembership;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(workspaceId));
+    }
+  });
+};
+
+export const useDeleteGroupFromWorkspace = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      groupSlug,
+      workspaceId
+    }: {
+      groupSlug: string;
+      workspaceId: string;
+    }) => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.delete(
+        `/api/v2/workspace/${workspaceId}/group-memberships/${groupSlug}`
+      );
+      return groupMembership;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(workspaceId));
+    }
+  });
+};
+
+export const useGetWorkspaceGroupMemberships = (workspaceId: string) => {
+  return useQuery({
+    queryKey: workspaceKeys.getWorkspaceGroupMemberships(workspaceId),
+    queryFn: async () => {
+      const {
+        data: { groupMemberships } 
+      } = await apiRequest.get<{ groupMemberships: TGroupMembership[] }>(
+        `/api/v2/workspace/${workspaceId}/group-memberships`
+      );
+      return groupMemberships;
+    },
+    enabled: true
+  });
+};
@@ -111,3 +111,21 @@ export type TUpdateWorkspaceIdentityRoleDTO = {
      }
  )[];
 };
+
+export type TUpdateWorkspaceGroupRoleDTO = {
+  groupSlug: string;
+  workspaceId: string;
+  roles: (
+    | {
+        role: string;
+        isTemporary?: false;
+      }
+    | {
+        role: string;
+        isTemporary: true;
+        temporaryMode: ProjectUserMembershipTemporaryMode;
+        temporaryRange: string;
+        temporaryAccessStartTime: string;
+      }
+  )[];
+};
@@ -1,9 +1,13 @@
-import { faUsers } from "@fortawesome/free-solid-svg-icons";
+import { useMemo,useState } from "react";
+import { faMagnifyingGlass,faUsers } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
    Button,
    EmptyState,
+    Input,
    Modal,
    ModalContent,
    Table,
@@ -15,6 +19,10 @@ import {
    THead,
    Tr
 } from "@app/components/v2";
+import {
+    OrgPermissionActions,
+    OrgPermissionSubjects
+} from "@app/context";
 import { 
    useCreateGroupUserMembership,
    useDeleteGroupUserMembership,
@@ -23,7 +31,6 @@ import { UsePopUpState } from "@app/hooks/usePopUp";

 type Props = {
  popUp: UsePopUpState<["groupMembers"]>;
-//   handlePopUpClose: (popUpName: keyof UsePopUpState<["groupMembers"]>) => void;
  handlePopUpToggle: (popUpName: keyof UsePopUpState<["groupMembers"]>, state?: boolean) => void;
 };

@@ -31,6 +38,7 @@ export const OrgGroupMembersModal = ({
    popUp,
    handlePopUpToggle
 }: Props) => {
+    const [searchMemberFilter, setSearchMemberFilter] = useState("");
    const { createNotification } = useNotificationContext();
    
    const popUpData = popUp?.groupMembers?.data as {
@@ -69,6 +77,17 @@ export const OrgGroupMembersModal = ({
        }
    }
    
+    const filterdUser = useMemo(
+        () =>
+        users?.filter(
+            ({ firstName, lastName, username }) =>
+              firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+              lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+              username?.toLowerCase().includes(searchMemberFilter.toLowerCase())
+          ),
+        [users, searchMemberFilter]
+      );
+    
    return (
        <Modal
            isOpen={popUp?.groupMembers?.isOpen}
@@ -77,17 +96,23 @@ export const OrgGroupMembersModal = ({
            }}
        >
            <ModalContent title="Manage Group Members">
-                <TableContainer>
+                <Input
+                    value={searchMemberFilter}
+                    onChange={(e) => setSearchMemberFilter(e.target.value)}
+                    leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+                    placeholder="Search members..."
+                />
+                <TableContainer className="mt-4">
                    <Table>
                        <THead>
                            <Tr>
                                <Th>User</Th>
-                                <Th>Status</Th>
+                                <Th />
                            </Tr>
                        </THead>
                        <TBody>
                            {isLoading && <TableSkeleton columns={2} innerKey="group-users" />}
-                            {!isLoading && users?.map(({
+                            {!isLoading && filterdUser?.map(({
                                id,
                                firstName,
                                lastName,
@@ -100,24 +125,33 @@ export const OrgGroupMembersModal = ({
                                            <p>{`${firstName} ${lastName}`}</p>
                                            <p>{username}</p>
                                        </Td>
-                                        <Td>
-                                            <Button
-                                                // isLoading={isLoading}
-                                                // isDisabled={!isAllowed}
-                                                colorSchema="primary"
-                                                variant="outline_bg"
-                                                type="submit"
-                                                onClick={() => handleAssignment(username, !isPartOfGroup)}
+                                        <Td className="flex justify-end">
+                                            <OrgPermissionCan
+                                                I={OrgPermissionActions.Edit}
+                                                a={OrgPermissionSubjects.Groups}
                                            >
-                                                {isPartOfGroup ? "Unassign" : "Assign"}
-                                            </Button>
+                                                {(isAllowed) => {
+                                                    return (
+                                                        <Button
+                                                            isLoading={isLoading}
+                                                            isDisabled={!isAllowed}
+                                                            colorSchema="primary"
+                                                            variant="outline_bg"
+                                                            type="submit"
+                                                            onClick={() => handleAssignment(username, !isPartOfGroup)}
+                                                        >
+                                                            {isPartOfGroup ? "Unassign" : "Assign"}
+                                                        </Button>
+                                                    );
+                                                }}
+                                            </OrgPermissionCan>
                                        </Td>
                                    </Tr>
                                );
                            })}
                        </TBody>
                    </Table>
-                    {!isLoading && !users?.length && (
+                    {!isLoading && !filterdUser?.length && (
                        <EmptyState
                            title="No users found"
                            icon={faUsers}
@@ -96,7 +96,6 @@ export const OrgGroupsSection = () => {
            />
            <OrgGroupMembersModal
                popUp={popUp}
-                handlePopUpClose={handlePopUpClose}
                handlePopUpToggle={handlePopUpToggle}
            />
            <DeleteActionModal
@@ -115,7 +115,7 @@ export const OrgGroupsTable = ({
                                    <Td>
                                    <OrgPermissionCan
                                        I={OrgPermissionActions.Edit}
-                                        a={OrgPermissionSubjects.Identity}
+                                        a={OrgPermissionSubjects.Groups}
                                    >
                                        {(isAllowed) => {
                                            return (
@@ -5,11 +5,12 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";

-import { IdentityTab, MemberListTab, ProjectRoleListTab, ServiceTokenTab } from "./components";
+import { GroupsTab, IdentityTab, MemberListTab, ProjectRoleListTab, ServiceTokenTab } from "./components";

 enum TabSections {
  Member = "members",
  Roles = "roles",
+  Groups = "groups",
  Identities = "identities",
  ServiceTokens = "service-tokens"
 }
@@ -23,6 +24,7 @@ export const MembersPage = withProjectPermission(
          <Tabs defaultValue={TabSections.Member}>
            <TabList>
              <Tab value={TabSections.Member}>People</Tab>
+              <Tab value={TabSections.Groups}>Groups</Tab>
              <Tab value={TabSections.Identities}>
                <div className="flex items-center">
                  <p>Machine Identities</p>
@@ -42,6 +44,17 @@ export const MembersPage = withProjectPermission(
                <MemberListTab />
              </motion.div>
            </TabPanel>
+            <TabPanel value={TabSections.Groups}>
+              <motion.div
+                key="panel-1"
+                transition={{ duration: 0.15 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: 30 }}
+              >
+                <GroupsTab />
+              </motion.div>
+            </TabPanel>
            <TabPanel value={TabSections.Identities}>
              <IdentityTab />
            </TabPanel>
@@ -0,0 +1,19 @@
+import { motion } from "framer-motion";
+
+import {
+    GroupsSection
+} from "./components";
+
+export const GroupsTab = () => {
+    return (
+        <motion.div
+            key="panel-groups"
+            transition={{ duration: 0.15 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+        >
+            <GroupsSection />
+        </motion.div>
+    );
+}
@@ -0,0 +1,187 @@
+import { useMemo } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Link from "next/link";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Modal,
+    ModalContent,
+    Select,
+    SelectItem} from "@app/components/v2";
+import { useOrganization, useWorkspace } from "@app/context";
+import { 
+    useAddGroupToWorkspace,
+    useGetOrganizationGroups,
+    useGetProjectRoles,
+    useGetWorkspaceGroupMemberships,
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+// TODO: change this to zod
+
+const schema = yup
+  .object({
+    slug: yup.string().required("Group slug is required"),
+    role: yup.string()
+  })
+  .required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["group"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["group"]>, state?: boolean) => void;
+};
+
+export const GroupModal = ({
+    popUp,
+    handlePopUpToggle
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    const { currentWorkspace } = useWorkspace();
+
+    const orgId = currentOrg?.id || "";
+    const workspaceId = currentWorkspace?.id || "";
+    
+    const { data: groups } = useGetOrganizationGroups(orgId);
+    const { data: groupMemberships } = useGetWorkspaceGroupMemberships(workspaceId);
+    
+    const { data: roles } = useGetProjectRoles(workspaceId);
+    
+    const { mutateAsync: addGroupToWorkspaceMutateAsync } = useAddGroupToWorkspace();
+    
+    const filteredGroupMembershipOrgs = useMemo(() => {
+        const wsGroupIds = new Map();
+
+        groupMemberships?.forEach((groupMembership) => {
+            wsGroupIds.set(groupMembership.group.id, true);
+        });
+
+        return (groups || []).filter(({ id }) => !wsGroupIds.has(id));
+    }, [groups, groupMemberships]);
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+      } = useForm<FormData>({
+        resolver: yupResolver(schema)
+      });
+
+    const onFormSubmit = async ({ slug, role }: FormData) => {
+        try {
+            await addGroupToWorkspaceMutateAsync({
+                workspaceId,
+                groupSlug: slug,
+                role: role || undefined
+            });
+            
+            reset();
+            handlePopUpToggle("group", false);
+            
+            createNotification({
+                text: "Successfully added group to project",
+                type: "success"
+            });
+        
+        } catch (err) {
+            createNotification({
+                text: "Failed to add group to project",
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <Modal
+            isOpen={popUp?.group?.isOpen}
+            onOpenChange={(isOpen) => {
+                handlePopUpToggle("group", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Add Group to Project">
+            {filteredGroupMembershipOrgs.length ? (
+                <form onSubmit={handleSubmit(onFormSubmit)}>
+                    <Controller
+                        control={control}
+                        name="slug"
+                        defaultValue={filteredGroupMembershipOrgs?.[0]?.id}
+                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                            <FormControl label="Group" errorText={error?.message} isError={Boolean(error)}>
+                            <Select
+                                defaultValue={field.value}
+                                {...field}
+                                onValueChange={(e) => onChange(e)}
+                                className="w-full"
+                            >
+                                {filteredGroupMembershipOrgs.map(({ name, slug, id }) => (
+                                    <SelectItem value={slug} key={`org-group-${id}`}>
+                                        {name}
+                                    </SelectItem>
+                                ))}
+                            </Select>
+                            </FormControl>
+                        )}
+                    />
+                    <Controller
+                        control={control}
+                        name="role"
+                        defaultValue=""
+                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                            <FormControl
+                                label="Role"
+                                errorText={error?.message}
+                                isError={Boolean(error)}
+                                className="mt-4"
+                            >
+                            <Select
+                                defaultValue={field.value}
+                                {...field}
+                                onValueChange={(e) => onChange(e)}
+                                className="w-full"
+                            >
+                                {(roles || []).map(({ name, slug }) => (
+                                    <SelectItem value={slug} key={`st-role-${slug}`}>
+                                        {name}
+                                    </SelectItem>
+                                ))}
+                            </Select>
+                            </FormControl>
+                        )}
+                    />
+                    <div className="flex items-center">
+                        <Button
+                            className="mr-4"
+                            size="sm"
+                            type="submit"
+                            isLoading={isSubmitting}
+                            isDisabled={isSubmitting}
+                        >
+                            {popUp?.group?.data ? "Update" : "Create"}
+                        </Button>
+                        <Button colorSchema="secondary" variant="plain">
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            ) : (
+                <div className="flex flex-col space-y-4">
+                    <div className="text-sm">
+                    All groups in your organization have already been added to this project.
+                    </div>
+                    <Link href={`/org/${currentWorkspace?.orgId}/members`}>
+                    <Button variant="outline_bg">Create a new group</Button>
+                    </Link>
+                </div>
+            )}
+            </ModalContent>
+      </Modal>
+    );
+}
@@ -0,0 +1,458 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faClock, faEdit, faSearch } 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 { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  IconButton,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Spinner,
+  Tag,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useGetProjectRoles, useUpdateGroupWorkspaceRole } from "@app/hooks/api";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { TWorkspaceUser } from "@app/hooks/api/types";
+import { ProjectUserMembershipTemporaryMode } from "@app/hooks/api/workspace/types";
+import { groupBy } from "@app/lib/fn/array";
+
+const temporaryRoleFormSchema = z.object({
+  temporaryRange: z.string().min(1, "Required")
+});
+
+type TTemporaryRoleFormSchema = z.infer<typeof temporaryRoleFormSchema>;
+
+type TTemporaryRoleFormProps = {
+  temporaryConfig?: {
+    isTemporary?: boolean;
+    temporaryAccessEndTime?: string | null;
+    temporaryAccessStartTime?: string | null;
+    temporaryRange?: string | null;
+  };
+  onSetTemporary: (data: { temporaryRange: string; temporaryAccessStartTime?: string }) => void;
+  onRemoveTemporary: () => void;
+};
+
+const IdentityTemporaryRoleForm = ({
+  temporaryConfig: defaultValues = {},
+  onSetTemporary,
+  onRemoveTemporary
+}: TTemporaryRoleFormProps) => {
+  const { popUp, handlePopUpToggle } = usePopUp(["setTempRole"] as const);
+  const { control, handleSubmit } = useForm<TTemporaryRoleFormSchema>({
+    resolver: zodResolver(temporaryRoleFormSchema),
+    values: {
+      temporaryRange: defaultValues.temporaryRange || "1h"
+    }
+  });
+  const isTemporaryFieldValue = defaultValues.isTemporary;
+  const isExpired =
+    isTemporaryFieldValue && new Date() > new Date(defaultValues.temporaryAccessEndTime || "");
+
+  return (
+    <Popover
+      open={popUp.setTempRole.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("setTempRole", isOpen);
+      }}
+    >
+      <PopoverTrigger>
+        <IconButton ariaLabel="role-temp" variant="plain" size="md">
+          <Tooltip content={isExpired ? "Access Expired" : "Grant Temporary Access"}>
+            <FontAwesomeIcon
+              icon={faClock}
+              className={twMerge(
+                isTemporaryFieldValue && "text-primary",
+                isExpired && "text-red-600"
+              )}
+            />
+          </Tooltip>
+        </IconButton>
+      </PopoverTrigger>
+      <PopoverContent
+        arrowClassName="fill-gray-600"
+        side="right"
+        sideOffset={12}
+        hideCloseBtn
+        className="border border-gray-600 pt-4"
+      >
+        <div className="flex flex-col space-y-4">
+          <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+            Set Role Temporarily
+          </div>
+          {isExpired && <Tag colorSchema="red">Expired</Tag>}
+          <Controller
+            control={control}
+            name="temporaryRange"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Validity"
+                isError={Boolean(error?.message)}
+                errorText={error?.message}
+                helperText={
+                  <span>
+                    1m, 2h, 3d.{" "}
+                    <a
+                      href="https://github.com/vercel/ms?tab=readme-ov-file#examples"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary-700"
+                    >
+                      More
+                    </a>
+                  </span>
+                }
+              >
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center space-x-2">
+            {isTemporaryFieldValue && (
+              <Button
+                size="xs"
+                type="submit"
+                onClick={() => {
+                  handleSubmit(({ temporaryRange }) => {
+                    onSetTemporary({
+                      temporaryRange,
+                      temporaryAccessStartTime: new Date().toISOString()
+                    });
+                    handlePopUpToggle("setTempRole");
+                  })();
+                }}
+              >
+                Restart
+              </Button>
+            )}
+            {!isTemporaryFieldValue ? (
+              <Button
+                size="xs"
+                type="submit"
+                onClick={() =>
+                  handleSubmit(({ temporaryRange }) => {
+                    onSetTemporary({
+                      temporaryRange,
+                      temporaryAccessStartTime:
+                        defaultValues.temporaryAccessStartTime || new Date().toISOString()
+                    });
+                    handlePopUpToggle("setTempRole");
+                  })()
+                }
+              >
+                Grant access
+              </Button>
+            ) : (
+              <Button
+                size="xs"
+                variant="outline_bg"
+                colorSchema="danger"
+                onClick={() => {
+                  onRemoveTemporary();
+                  handlePopUpToggle("setTempRole");
+                }}
+              >
+                Revoke Access
+              </Button>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const formSchema = z.record(
+  z.object({
+    isChecked: z.boolean().optional(),
+    temporaryAccess: z.union([
+      z.object({
+        isTemporary: z.literal(true),
+        temporaryRange: z.string().min(1),
+        temporaryAccessStartTime: z.string().datetime(),
+        temporaryAccessEndTime: z.string().datetime().nullable().optional()
+      }),
+      z.boolean()
+    ])
+  })
+);
+type TForm = z.infer<typeof formSchema>;
+
+export type TMemberRolesProp = {
+  disableEdit?: boolean;
+  groupSlug: string;
+  roles: TWorkspaceUser["roles"];
+};
+
+const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
+
+export const GroupRoles = ({
+  roles = [],
+  disableEdit = false,
+  groupSlug
+}: TMemberRolesProp) => {
+  const { currentWorkspace } = useWorkspace();
+  const { createNotification } = useNotificationContext();
+  const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
+  const [searchRoles, setSearchRoles] = useState("");
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    setValue,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const workspaceId = currentWorkspace?.id || "";
+
+  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(workspaceId);
+  const userRolesGroupBySlug = groupBy(roles, ({ customRoleSlug, role }) => customRoleSlug || role);
+
+  const updateGroupWorkspaceRole = useUpdateGroupWorkspaceRole();
+
+  const handleRoleUpdate = async (data: TForm) => {
+    const selectedRoles = Object.keys(data)
+      .filter((el) => Boolean(data[el].isChecked))
+      .map((el) => {
+        const isTemporary = Boolean(data[el].temporaryAccess);
+        if (!isTemporary) {
+          return { role: el, isTemporary: false as const };
+        }
+
+        const tempCfg = data[el].temporaryAccess as {
+          temporaryRange: string;
+          temporaryAccessStartTime: string;
+        };
+
+        return {
+          role: el,
+          isTemporary: true as const,
+          temporaryMode: ProjectUserMembershipTemporaryMode.Relative,
+          temporaryRange: tempCfg.temporaryRange,
+          temporaryAccessStartTime: tempCfg.temporaryAccessStartTime
+        };
+      });
+
+    try {
+      await updateGroupWorkspaceRole.mutateAsync({
+        workspaceId,
+        groupSlug,
+        roles: selectedRoles
+      });
+      createNotification({ text: "Successfully updated group role", type: "success" });
+      handlePopUpToggle("editRole");
+      setSearchRoles("");
+    } catch (err) {
+      createNotification({ text: "Failed to update group role", type: "error" });
+    }
+  };
+
+  const formatRoleName = (role: string, customRoleName?: string) => {
+    if (role === ProjectMembershipRole.Custom) return customRoleName;
+    if (role === ProjectMembershipRole.Member) return "Developer";
+    return role;
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      {roles
+        .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+        .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+          const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+          return (
+            <Tag key={id} className="capitalize">
+              <div className="flex items-center space-x-2">
+                <div>{formatRoleName(role, customRoleName)}</div>
+                {isTemporary && (
+                  <div>
+                    <Tooltip content={isExpired ? "Expired Temporary Access" : "Temporary Access"}>
+                      <FontAwesomeIcon
+                        icon={faClock}
+                        className={twMerge(isExpired && "text-red-600")}
+                      />
+                    </Tooltip>
+                  </div>
+                )}
+              </div>
+            </Tag>
+          );
+        })}
+      {roles.length > MAX_ROLES_TO_BE_SHOWN_IN_TABLE && (
+        <HoverCard>
+          <HoverCardTrigger>
+            <Tag>+{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}</Tag>
+          </HoverCardTrigger>
+          <HoverCardContent className="border border-gray-700 bg-mineshaft-800 p-4">
+            {roles
+              .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+              .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+                const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+                return (
+                  <Tag key={id} className="capitalize">
+                    <div className="flex items-center space-x-2">
+                      <div>{formatRoleName(role, customRoleName)}</div>
+                      {isTemporary && (
+                        <div>
+                          <Tooltip
+                            content={isExpired ? "Expired Temporary Access" : "Temporary Access"}
+                          >
+                            <FontAwesomeIcon
+                              icon={faClock}
+                              className={twMerge(
+                                new Date() > new Date(temporaryAccessEndTime as string) &&
+                                "text-red-600"
+                              )}
+                            />
+                          </Tooltip>
+                        </div>
+                      )}
+                    </div>
+                  </Tag>
+                );
+              })}{" "}
+          </HoverCardContent>
+        </HoverCard>
+      )}
+      <div>
+        <Popover
+          open={popUp.editRole.isOpen}
+          onOpenChange={(isOpen) => {
+            handlePopUpToggle("editRole", isOpen);
+            reset();
+          }}
+        >
+          {!disableEdit && (
+            <PopoverTrigger>
+              <IconButton size="sm" variant="plain" ariaLabel="update">
+                <FontAwesomeIcon icon={faEdit} />
+              </IconButton>
+            </PopoverTrigger>
+          )}
+          <PopoverContent hideCloseBtn className="pt-4">
+            {isRolesLoading ? (
+              <div className="flex h-8 w-full items-center justify-center">
+                <Spinner />
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit(handleRoleUpdate)} id="role-update-form">
+                <div className="thin-scrollbar max-h-80 space-y-4 overflow-y-auto">
+                  {projectRoles
+                    ?.filter(
+                      ({ name, slug }) =>
+                        name.toLowerCase().includes(searchRoles.toLowerCase()) ||
+                        slug.toLowerCase().includes(searchRoles.toLowerCase())
+                    )
+                    ?.map(({ id, name, slug }) => {
+                      const userProjectRoleDetails = userRolesGroupBySlug?.[slug]?.[0];
+
+                      return (
+                        <div key={id} className="flex items-center space-x-4">
+                          <div className="flex-grow">
+                            <Controller
+                              control={control}
+                              defaultValue={Boolean(userProjectRoleDetails?.id)}
+                              name={`${slug}.isChecked`}
+                              render={({ field }) => (
+                                <Checkbox
+                                  id={slug}
+                                  isChecked={field.value}
+                                  onCheckedChange={(isChecked) => {
+                                    field.onChange(isChecked);
+                                    setValue(`${slug}.temporaryAccess`, false);
+                                  }}
+                                >
+                                  {name}
+                                </Checkbox>
+                              )}
+                            />
+                          </div>
+                          <div>
+                            <Controller
+                              control={control}
+                              name={`${slug}.temporaryAccess`}
+                              defaultValue={
+                                userProjectRoleDetails?.isTemporary
+                                  ? {
+                                    isTemporary: true,
+                                    temporaryAccessStartTime:
+                                      userProjectRoleDetails.temporaryAccessStartTime as string,
+                                    temporaryRange:
+                                      userProjectRoleDetails.temporaryRange as string,
+                                    temporaryAccessEndTime:
+                                      userProjectRoleDetails.temporaryAccessEndTime
+                                  }
+                                  : false
+                              }
+                              render={({ field }) => (
+                                <IdentityTemporaryRoleForm
+                                  temporaryConfig={
+                                    typeof field.value === "boolean"
+                                      ? { isTemporary: field.value }
+                                      : field.value
+                                  }
+                                  onSetTemporary={(data) => {
+                                    setValue(`${slug}.isChecked`, true, { shouldDirty: true });
+                                    field.onChange({ isTemporary: true, ...data });
+                                  }}
+                                  onRemoveTemporary={() => {
+                                    setValue(`${slug}.isChecked`, false, { shouldDirty: true });
+                                    field.onChange(false);
+                                  }}
+                                />
+                              )}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
+                </div>
+                <div className="mt-3 flex items-center space-x-2 border-t border-t-gray-700 pt-3">
+                  <div>
+                    <Input
+                      className="w-full p-1.5 pl-8"
+                      size="xs"
+                      value={searchRoles}
+                      onChange={(el) => setSearchRoles(el.target.value)}
+                      leftIcon={<FontAwesomeIcon icon={faSearch} />}
+                      placeholder="Search roles.."
+                    />
+                  </div>
+                  <div>
+                    <Button
+                      size="xs"
+                      type="submit"
+                      form="role-update-form"
+                      leftIcon={<FontAwesomeIcon icon={faCheck} />}
+                      isDisabled={!isDirty || isSubmitting}
+                      isLoading={isSubmitting}
+                    >
+                      Save
+                    </Button>
+                  </div>
+                </div>
+              </form>
+            )}
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,91 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+    Button,
+    DeleteActionModal
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub,useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteGroupFromWorkspace } from "@app/hooks/api";
+
+import { GroupModal } from "./GroupModal";
+import { GroupTable } from "./GroupsTable";
+
+export const GroupsSection = () => {
+    const { createNotification } = useNotificationContext();
+    const { currentWorkspace } = useWorkspace();
+
+    const workspaceId = currentWorkspace?.id ?? "";
+    
+    const { mutateAsync: deleteMutateAsync } = useDeleteGroupFromWorkspace();
+    
+    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+        "group",
+        "deleteGroup",
+        "upgradePlan"
+    ] as const);
+
+    const onRemoveGroupSubmit = async (groupSlug: string) => {
+        try {
+            await deleteMutateAsync({
+                groupSlug,
+                workspaceId
+            });
+  
+            createNotification({
+                text: "Successfully removed identity from project",
+                type: "success"
+            });
+  
+          handlePopUpClose("deleteGroup");
+        } catch (err) {
+            console.error(err);
+            const error = err as any;
+            const text = error?.response?.data?.message ?? "Failed to remove group from project";
+    
+            createNotification({
+                text,
+                type: "error"
+            });
+        }
+    };
+      
+    return (
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+            <div className="mb-4 flex items-center justify-between">
+                <p className="text-xl font-semibold text-mineshaft-100">Groups</p>
+                <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Groups}>
+                    {(isAllowed) => (
+                        <Button
+                            colorSchema="primary"
+                            type="submit"
+                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                            onClick={() => handlePopUpOpen("group")}
+                            isDisabled={!isAllowed}
+                        >
+                            Add Group
+                        </Button>
+                    )}
+                </ProjectPermissionCan>
+            </div>
+            <GroupModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+            <GroupTable handlePopUpOpen={handlePopUpOpen} />
+            <DeleteActionModal
+                isOpen={popUp.deleteGroup.isOpen}
+                title={`Are you sure want to remove the group ${
+                    (popUp?.deleteGroup?.data as { name: string })?.name || ""
+                } from the project?`}
+                onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
+                deleteKey="confirm"
+                onDeleteApproved={() =>
+                    onRemoveGroupSubmit(
+                        (popUp?.deleteGroup?.data as { slug: string })?.slug
+                    )
+                }
+            />
+        </div>
+    );
+}
@@ -0,0 +1,103 @@
+import { faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useGetWorkspaceGroupMemberships } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { GroupRoles } from "./GroupRoles";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteGroup", "group"]>,
+    data?: {
+      slug?: string;
+      name?: string;
+    }
+  ) => void;
+};
+
+export const GroupTable = ({ handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isLoading } = useGetWorkspaceGroupMemberships(currentWorkspace?.id || "");
+  return (
+    <TableContainer>
+        <Table>
+            <THead>
+            <Tr>
+                <Th>Name</Th>
+                <Th>Role</Th>
+                <Th>Added on</Th>
+                <Th className="w-5" />
+            </Tr>
+            </THead>
+            <TBody>
+            {isLoading && <TableSkeleton columns={4} innerKey="project-groups" />}
+            {!isLoading &&
+                data &&
+                data.length > 0 &&
+                data.map(({ group: { id, name, slug }, roles, createdAt }) => {
+                    return (
+                        <Tr className="h-10" key={`st-v3-${id}`}>
+                        <Td>{name}</Td>
+                        <Td>
+                            <ProjectPermissionCan
+                                I={ProjectPermissionActions.Edit}
+                                a={ProjectPermissionSub.Groups}
+                            >
+                                {(isAllowed) => (
+                                    <GroupRoles roles={roles} disableEdit={!isAllowed} groupSlug={slug} />
+                                )}
+                            </ProjectPermissionCan>
+                        </Td>
+                        <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                        <Td className="flex justify-end">
+                            <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.Groups}
+                            >
+                            {(isAllowed) => (
+                                <IconButton
+                                onClick={() => {
+                                    handlePopUpOpen("deleteGroup", {
+                                        slug,
+                                        name
+                                    });
+                                }}
+                                size="lg"
+                                colorSchema="danger"
+                                variant="plain"
+                                ariaLabel="update"
+                                className="ml-4"
+                                isDisabled={!isAllowed}
+                                >
+                                <FontAwesomeIcon icon={faXmark} />
+                                </IconButton>
+                            )}
+                            </ProjectPermissionCan>
+                        </Td>
+                        </Tr>
+                    );
+                })}
+            </TBody>
+        </Table>
+        {!isLoading && data?.length === 0 && (
+            <EmptyState title="No groups have been added to this project" icon={faServer} />
+        )}
+    </TableContainer>
+  );
+};
@@ -0,0 +1 @@
+export { GroupsSection } from "./GroupsSection";
@@ -0,0 +1 @@
+export { GroupsSection } from "./GroupsSection";
@@ -0,0 +1 @@
+export { GroupsTab } from "./GroupsTab";
@@ -1,3 +1,4 @@
+export { GroupsTab } from "./GroupsTab";
 export { IdentityTab } from "./IdentityTab";
 export { MemberListTab } from "./MemberListTab";
 export { ProjectRoleListTab } from "./ProjectRoleListTab";
				`@@ -0,0 +1 @@`
				`export { GroupsSection } from "./GroupsSection";`