Resolve PR review issues

backend/src/ee/routes/v1/group-router.ts

@@ -13,7 +13,7 @@ export const registerGroupRouter = async (server: FastifyZodProvider) => {
     onRequest: verifyAuth([AuthMode.JWT]),
     schema: {
       body: z.object({
-        name: z.string().trim().min(1).describe(GROUPS.CREATE.name),
+        name: z.string().trim().min(1).max(50).describe(GROUPS.CREATE.name),
         slug: z
           .string()
           .min(5)

backend/src/ee/services/group/group-dal.ts

@@ -118,9 +118,8 @@ export const groupDALFactory = (db: TDbClient) => {
           db.ref("firstName").withSchema(TableName.Users),
           db.ref("lastName").withSchema(TableName.Users),
           db.ref("id").withSchema(TableName.Users).as("userId")
-          // db.raw(`CASE WHEN "${TableName.UserGroupMembership}"."groupId" IS NOT NULL THEN TRUE ELSE FALSE END as isPartOfGroup`)
         )
-        .where({ isGhost: false }) // MAKE SURE USER IS NOT A GHOST USER
+        .where({ isGhost: false })
         .offset(offset);
 
       if (limit) {

backend/src/ee/services/license/__mocks__/licence-fns.ts

@@ -12,15 +12,15 @@ export const getDefaultOnPremFeatures = () => {
     secretVersioning: true,
     pitRecovery: false,
     ipAllowlisting: true,
-    rbac: true,
+    rbac: false,
     customRateLimits: false,
     customAlerts: false,
     auditLogs: false,
     auditLogsRetentionDays: 0,
-    samlSSO: true,
+    samlSSO: false,
-    scim: true,
+    scim: false,
     ldap: false,
-    groups: true,
+    groups: false,
     status: null,
     trial_end: null,
     has_used_trial: true,

backend/src/ee/services/license/licence-fns.ts

@@ -19,15 +19,15 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
   secretVersioning: true,
   pitRecovery: false,
   ipAllowlisting: false,
-  rbac: true,
+  rbac: false,
   customRateLimits: false,
   customAlerts: false,
   auditLogs: false,
   auditLogsRetentionDays: 0,
-  samlSSO: true,
+  samlSSO: false,
-  scim: true,
+  scim: false,
   ldap: false,
-  groups: true,
+  groups: false,
   status: null,
   trial_end: null,
   has_used_trial: true,

backend/src/ee/services/license/license-types.ts

@@ -35,15 +35,15 @@ export type TFeatureSet = {
   secretVersioning: true;
   pitRecovery: false;
   ipAllowlisting: false;
-  rbac: true;
+  rbac: false;
   customRateLimits: false;
   customAlerts: false;
   auditLogs: false;
   auditLogsRetentionDays: 0;
-  samlSSO: true;
+  samlSSO: false;
-  scim: true;
+  scim: false;
   ldap: false;
-  groups: true;
+  groups: false;
   status: null;
   trial_end: null;
   has_used_trial: true;

backend/src/services/group-project/group-project-service.ts

@@ -92,8 +92,8 @@ export const groupProjectServiceFactory = ({
       role,
       project.id
     );
-    const hasPriviledge = isAtLeastAsPrivileged(permission, rolePermission);
+    const hasPrivilege = isAtLeastAsPrivileged(permission, rolePermission);
-    if (!hasPriviledge)
+    if (!hasPrivilege)
       throw new ForbiddenRequestError({
         message: "Failed to add group to project with more privileged role"
       });
@@ -226,7 +226,7 @@ export const groupProjectServiceFactory = ({
 
     const customRolesGroupBySlug = groupBy(customRoles, ({ slug }) => slug);
 
-    const santiziedProjectMembershipRoles = roles.map((inputRole) => {
+    const sanitizedProjectMembershipRoles = roles.map((inputRole) => {
       const isCustomRole = Boolean(customRolesGroupBySlug?.[inputRole.role]?.[0]);
       if (!inputRole.isTemporary) {
         return {
@@ -252,7 +252,7 @@ export const groupProjectServiceFactory = ({
 
     const updatedRoles = await groupProjectMembershipRoleDAL.transaction(async (tx) => {
       await groupProjectMembershipRoleDAL.delete({ projectMembershipId: projectGroup.id }, tx);
-      return groupProjectMembershipRoleDAL.insertMany(santiziedProjectMembershipRoles, tx);
+      return groupProjectMembershipRoleDAL.insertMany(sanitizedProjectMembershipRoles, tx);
     });
 
     return updatedRoles;
@@ -325,8 +325,8 @@ export const groupProjectServiceFactory = ({
     );
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Groups);
 
-    const groupMemberhips = await groupProjectDAL.findByProjectId(project.id);
+    const groupMemberships = await groupProjectDAL.findByProjectId(project.id);
-    return groupMemberhips;
+    return groupMemberships;
   };
 
   return {

backend/src/services/identity-project/identity-project-service.ts

@@ -163,7 +163,7 @@ export const identityProjectServiceFactory = ({
 
     const customRolesGroupBySlug = groupBy(customRoles, ({ slug }) => slug);
 
-    const santiziedProjectMembershipRoles = roles.map((inputRole) => {
+    const sanitizedProjectMembershipRoles = roles.map((inputRole) => {
       const isCustomRole = Boolean(customRolesGroupBySlug?.[inputRole.role]?.[0]);
       if (!inputRole.isTemporary) {
         return {
@@ -189,7 +189,7 @@ export const identityProjectServiceFactory = ({
 
     const updatedRoles = await identityProjectMembershipRoleDAL.transaction(async (tx) => {
       await identityProjectMembershipRoleDAL.delete({ projectMembershipId: projectIdentity.id }, tx);
-      return identityProjectMembershipRoleDAL.insertMany(santiziedProjectMembershipRoles, tx);
+      return identityProjectMembershipRoleDAL.insertMany(sanitizedProjectMembershipRoles, tx);
     });
 
     return updatedRoles;
@@ -226,7 +226,7 @@ export const identityProjectServiceFactory = ({
     if (!hasRequiredPriviledges)
       throw new ForbiddenRequestError({ message: "Failed to delete more privileged identity" });
 
-    const [deletedIdentity] = await identityProjectDAL.delete({ identityId }); // TODO: fix
+    const [deletedIdentity] = await identityProjectDAL.delete({ identityId });
     return deletedIdentity;
   };
 
@@ -246,8 +246,8 @@ export const identityProjectServiceFactory = ({
     );
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Identity);
 
-    const identityMemberhips = await identityProjectDAL.findByProjectId(projectId);
+    const identityMemberships = await identityProjectDAL.findByProjectId(projectId);
-    return identityMemberhips;
+    return identityMemberships;
   };
 
   return {

backend/src/services/identity/identity-service.ts

@@ -157,8 +157,8 @@ export const identityServiceFactory = ({
     const { permission } = await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
     ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Identity);
 
-    const identityMemberhips = await identityOrgMembershipDAL.findByOrgId(orgId);
+    const identityMemberships = await identityOrgMembershipDAL.findByOrgId(orgId);
-    return identityMemberhips;
+    return identityMemberships;
   };
 
   return {

backend/src/services/project-membership/project-membership-service.ts

@@ -362,7 +362,7 @@ export const projectMembershipServiceFactory = ({
     if (customRoles.length !== customInputRoles.length) throw new BadRequestError({ message: "Custom role not found" });
     const customRolesGroupBySlug = groupBy(customRoles, ({ slug }) => slug);
 
-    const santiziedProjectMembershipRoles = roles.map((inputRole) => {
+    const sanitizedProjectMembershipRoles = roles.map((inputRole) => {
       const isCustomRole = Boolean(customRolesGroupBySlug?.[inputRole.role]?.[0]);
       if (!inputRole.isTemporary) {
         return {
@@ -388,7 +388,7 @@ export const projectMembershipServiceFactory = ({
 
     const updatedRoles = await projectMembershipDAL.transaction(async (tx) => {
       await projectUserMembershipRoleDAL.delete({ projectMembershipId: membershipId }, tx);
-      return projectUserMembershipRoleDAL.insertMany(santiziedProjectMembershipRoles, tx);
+      return projectUserMembershipRoleDAL.insertMany(sanitizedProjectMembershipRoles, tx);
     });
 
     return updatedRoles;

frontend/src/hooks/api/workspace/index.tsx

@@ -1,9 +1,12 @@
 export {
   useAddGroupToWorkspace,
+  useDeleteGroupFromWorkspace,
+  useUpdateGroupWorkspaceRole
+} from "./mutations";
+export {
   useAddIdentityToWorkspace,
   useCreateWorkspace,
   useCreateWsEnvironment,
-  useDeleteGroupFromWorkspace,
   useDeleteIdentityFromWorkspace,
   useDeleteUserFromWorkspace,
   useDeleteWorkspace,
@@ -22,8 +25,8 @@ export {
   useNameWorkspaceSecrets,
   useRenameWorkspace,
   useToggleAutoCapitalization,
-  useUpdateGroupWorkspaceRole,
   useUpdateIdentityWorkspaceRole,
   useUpdateUserWorkspaceRole,
   useUpdateWsEnvironment,
-  useUpgradeProject} from "./queries";
+  useUpgradeProject
+} from "./queries";

frontend/src/hooks/api/workspace/mutations.tsx

@@ -0,0 +1,64 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { workspaceKeys } from "./queries";
+import { TUpdateWorkspaceGroupRoleDTO } from "./types";
+
+export const useAddGroupToWorkspace = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      groupSlug,
+      projectSlug,
+      role
+    }: {
+      groupSlug: string;
+      projectSlug: string;
+      role?: string;
+    }) => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.post(`/api/v2/workspace/${projectSlug}/groups/${groupSlug}`, {
+        role
+      });
+      return groupMembership;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(projectSlug));
+    }
+  });
+};
+
+export const useUpdateGroupWorkspaceRole = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ groupSlug, projectSlug, roles }: TUpdateWorkspaceGroupRoleDTO) => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.patch(`/api/v2/workspace/${projectSlug}/groups/${groupSlug}`, {
+        roles
+      });
+
+      return groupMembership;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(projectSlug));
+    }
+  });
+};
+
+export const useDeleteGroupFromWorkspace = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ groupSlug, projectSlug }: { groupSlug: string; projectSlug: string }) => {
+      const {
+        data: { groupMembership }
+      } = await apiRequest.delete(`/api/v2/workspace/${projectSlug}/groups/${groupSlug}`);
+      return groupMembership;
+    },
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(projectSlug));
+    }
+  });
+};

frontend/src/hooks/api/workspace/queries.tsx

@@ -17,7 +17,6 @@ import {
   RenameWorkspaceDTO,
   TGetUpgradeProjectStatusDTO,
   ToggleAutoCapitalizationDTO,
-  TUpdateWorkspaceGroupRoleDTO,
   TUpdateWorkspaceIdentityRoleDTO,
   TUpdateWorkspaceUserRoleDTO,
   UpdateEnvironmentDTO,
@@ -455,83 +454,12 @@ export const useGetWorkspaceIdentityMemberships = (workspaceId: string) => {
   });
 };
 
-export const useAddGroupToWorkspace = () => {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async ({
-      groupSlug,
-      projectSlug,
-      role
-    }: {
-      groupSlug: string;
-      projectSlug: string;
-      role?: string;
-    }) => {
-      const {
-        data: { groupMembership }
-      } = await apiRequest.post(
-        `/api/v2/workspace/${projectSlug}/groups/${groupSlug}`,
-        {
-          role
-        }
-      );
-      return groupMembership;
-    },
-    onSuccess: (_, { projectSlug }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(projectSlug));
-    }
-  });
-};
-
-export const useUpdateGroupWorkspaceRole = () => {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async ({ groupSlug, projectSlug, roles }: TUpdateWorkspaceGroupRoleDTO) => {
-      const {
-        data: { groupMembership }
-      } = await apiRequest.patch(
-        `/api/v2/workspace/${projectSlug}/groups/${groupSlug}`, {
-          roles
-        }
-      );
-
-      return groupMembership;
-    },
-    onSuccess: (_, { projectSlug }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(projectSlug));
-    }
-  });
-};
-
-export const useDeleteGroupFromWorkspace = () => {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async ({
-      groupSlug,
-      projectSlug
-    }: {
-      groupSlug: string;
-      projectSlug: string;
-    }) => {
-      const {
-        data: { groupMembership }
-      } = await apiRequest.delete(
-        `/api/v2/workspace/${projectSlug}/groups/${groupSlug}`
-      );
-      return groupMembership;
-    },
-    onSuccess: (_, { projectSlug }) => {
-      queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(projectSlug));
-    }
-  });
-};
-
 export const useListWorkspaceGroups = (projectSlug: string) => {
   return useQuery({
     queryKey: workspaceKeys.getWorkspaceGroupMemberships(projectSlug),
     queryFn: async () => {
       const {
-        data: { groupMemberships } 
+        data: { groupMemberships }
       } = await apiRequest.get<{ groupMemberships: TGroupMembership[] }>(
         `/api/v2/workspace/${projectSlug}/groups`
       );

frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupModal.tsx

@@ -4,19 +4,23 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
-import { useOrganization } from "@app/context";
 import {
-    useCreateGroup,
+  Button,
-    useGetOrgRoles,
+  FormControl,
-    useUpdateGroup
+  Input,
-} from "@app/hooks/api";
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useCreateGroup, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const GroupFormSchema = z.object({
-    name: z.string().min(1, "Name cannot be empty").max(50, "Name must be 50 characters or fewer"),
+  name: z.string().min(1, "Name cannot be empty").max(50, "Name must be 50 characters or fewer"),
-    slug: z.string().min(1, "Slug cannot be empty").max(36, "Slug must be 36 characters or fewer"),
+  slug: z.string().min(5, "Slug cannot be empty").max(36, "Slug must be 36 characters or fewer"),
-    role: z.string()
+  role: z.string()
 });
 
 export type TGroupFormData = z.infer<typeof GroupFormSchema>;
@@ -27,185 +31,158 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["group"]>, state?: boolean) => void;
 };
 
-export const OrgGroupModal = ({
+export const OrgGroupModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
-  popUp,
+  const { currentOrg } = useOrganization();
-  handlePopUpClose,
+  const { data: roles } = useGetOrgRoles(currentOrg?.id || "");
-  handlePopUpToggle
+  const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateGroup();
-}: Props) => {
+  const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateGroup();
-    const { currentOrg } = useOrganization();
-    const { data: roles } = useGetOrgRoles(currentOrg?.id || "");
-    const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateGroup();
-    const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateGroup();
-    
-    const {
-        control,
-        handleSubmit,
-        reset,
-    } = useForm<TGroupFormData>({
-        resolver: zodResolver(GroupFormSchema)
-    });
-    
-    useEffect(() => {
-        const group = popUp?.group?.data as {
-            groupId: string;
-            name: string;
-            slug: string;
-            role: string;
-            customRole: {
-                name: string;
-                slug: string;
-            };
-        };
 
-        if (!roles?.length) return;
+  const { control, handleSubmit, reset } = useForm<TGroupFormData>({
+    resolver: zodResolver(GroupFormSchema)
+  });
 
-        if (group) {
+  useEffect(() => {
-            reset({
+    const group = popUp?.group?.data as {
-                name: group.name,
+      groupId: string;
-                slug: group.slug,
+      name: string;
-                role: group?.customRole?.slug ?? group.role
+      slug: string;
-            });
+      role: string;
-        } else {
+      customRole: {
-            reset({
+        name: string;
-                name: "",
+        slug: string;
-                slug: "",
+      };
-                role: roles[0].slug
+    };
-            });
-        }
-    }, [popUp?.group?.data, roles]);
-    
-    const onGroupModalSubmit = async ({
-        name,
-        slug,
-        role
-    }: TGroupFormData) => {
-        try {
-            if (!currentOrg?.id) return;
 
-            const group = popUp?.group?.data as {
+    if (!roles?.length) return;
-                groupId: string;
+
-                name: string;
+    if (group) {
-                slug: string;
+      reset({
-            };
+        name: group.name,
-            
+        slug: group.slug,
-            if (group) {
+        role: group?.customRole?.slug ?? group.role
-                await updateMutateAsync({
+      });
-                    currentSlug: group.slug,
+    } else {
-                    name,
+      reset({
-                    slug,
+        name: "",
-                    role: role || undefined
+        slug: "",
-                });
+        role: roles[0].slug
-            } else {
+      });
-                await createMutateAsync({
-                    name,
-                    slug,
-                    organizationId: currentOrg.id,
-                    role: role || undefined
-                });
-            }
-            handlePopUpToggle("group", false);
-            reset();
-            
-            createNotification({
-                text: `Successfully ${popUp?.group?.data ? "updated" : "created"} group`,
-                type: "success"
-            });
-        } catch (err) {
-            createNotification({
-                text: `Failed to ${popUp?.group?.data ? "updated" : "created"} group`,
-                type: "error"
-            });
-        }
     }
-    
+  }, [popUp?.group?.data, roles]);
-    return (
+
-        <Modal
+  const onGroupModalSubmit = async ({ name, slug, role }: TGroupFormData) => {
-            isOpen={popUp?.group?.isOpen}
+    try {
-            onOpenChange={(isOpen) => {
+      if (!currentOrg?.id) return;
-                handlePopUpToggle("group", isOpen);
+
-                reset();
+      const group = popUp?.group?.data as {
-            }}
+        groupId: string;
-        >
+        name: string;
-            <ModalContent title={`${popUp?.group?.data ? "Update" : "Create"} Group`}>
+        slug: string;
-                <form onSubmit={handleSubmit(onGroupModalSubmit)}>
+      };
-                    <Controller
+
-                        control={control}
+      if (group) {
-                        name="name"
+        await updateMutateAsync({
-                        render={({ field, fieldState: { error } }) => (
+          currentSlug: group.slug,
-                            <FormControl
+          name,
-                                label="Name"
+          slug,
-                                errorText={error?.message}
+          role: role || undefined
-                                isError={Boolean(error)}
+        });
-                            >
+      } else {
-                                <Input 
+        await createMutateAsync({
-                                    {...field} 
+          name,
-                                    placeholder="Engineering"
+          slug,
-                                />
+          organizationId: currentOrg.id,
-                            </FormControl>
+          role: role || undefined
-                        )}
+        });
-                    />
+      }
-                    <Controller
+      handlePopUpToggle("group", false);
-                        control={control}
+      reset();
-                        name="slug"
+
-                        render={({ field, fieldState: { error } }) => (
+      createNotification({
-                            <FormControl
+        text: `Successfully ${popUp?.group?.data ? "updated" : "created"} group`,
-                                label="Slug"
+        type: "success"
-                                errorText={error?.message}
+      });
-                                isError={Boolean(error)}
+    } catch (err) {
-                            >
+      createNotification({
-                                <Input 
+        text: `Failed to ${popUp?.group?.data ? "updated" : "created"} group`,
-                                    {...field} 
+        type: "error"
-                                    placeholder="engineering"
+      });
-                                />
+    }
-                            </FormControl>
+  };
-                        )}
+
-                    />
+  return (
-                    <Controller
+    <Modal
-                        control={control}
+      isOpen={popUp?.group?.isOpen}
-                        name="role"
+      onOpenChange={(isOpen) => {
-                        defaultValue=""
+        handlePopUpToggle("group", isOpen);
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+        reset();
-                            <FormControl
+      }}
-                                label={`${popUp?.group?.data ? "Update" : ""} Role`}
+    >
-                                errorText={error?.message}
+      <ModalContent title={`${popUp?.group?.data ? "Update" : "Create"} Group`}>
-                                isError={Boolean(error)}
+        <form onSubmit={handleSubmit(onGroupModalSubmit)}>
-                                className="mt-4"
+          <Controller
-                            >
+            control={control}
-                                <Select
+            name="name"
-                                    defaultValue={field.value}
+            render={({ field, fieldState: { error } }) => (
-                                    {...field}
+              <FormControl label="Name" errorText={error?.message} isError={Boolean(error)}>
-                                    onValueChange={(e) => onChange(e)}
+                <Input {...field} placeholder="Engineering" />
-                                    className="w-full"
+              </FormControl>
-                                >
+            )}
-                                    {(roles || []).map(({ name, slug }) => (
+          />
-                                        <SelectItem value={slug} key={`org-group-role-${slug}`}>
+          <Controller
-                                            {name}
+            control={control}
-                                        </SelectItem>
+            name="slug"
-                                    ))}
+            render={({ field, fieldState: { error } }) => (
-                                </Select>
+              <FormControl label="Slug" errorText={error?.message} isError={Boolean(error)}>
-                            </FormControl>
+                <Input {...field} placeholder="engineering" />
-                        )}
+              </FormControl>
-                    />
+            )}
-                    <div className="mt-8 flex items-center">
+          />
-                        <Button
+          <Controller
-                            className="mr-4"
+            control={control}
-                            size="sm"
+            name="role"
-                            type="submit"
+            defaultValue=""
-                            isLoading={createIsLoading || updateIsLoading}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                        >
+              <FormControl
-                            {!popUp?.group?.data ? "Create" : "Update"}
+                label={`${popUp?.group?.data ? "Update" : ""} Role`}
-                        </Button>
+                errorText={error?.message}
-                        <Button 
+                isError={Boolean(error)}
-                            colorSchema="secondary" 
+                className="mt-4"
-                            variant="plain"
+              >
-                            onClick={() => handlePopUpClose("group")}
+                <Select
-                        >
+                  defaultValue={field.value}
-                            Cancel
+                  {...field}
-                        </Button>
+                  onValueChange={(e) => onChange(e)}
-                    </div>
+                  className="w-full"
-                </form>
+                >
-            </ModalContent>
+                  {(roles || []).map(({ name, slug }) => (
-        </Modal>
+                    <SelectItem value={slug} key={`org-group-role-${slug}`}>
-        
+                      {name}
-    );
+                    </SelectItem>
-}
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={createIsLoading || updateIsLoading}
+            >
+              {!popUp?.group?.data ? "Create" : "Update"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpClose("group")}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -5,7 +5,13 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 
-import { GroupsTab, IdentityTab, MemberListTab, ProjectRoleListTab, ServiceTokenTab } from "./components";
+import {
+  GroupsTab,
+  IdentityTab,
+  MemberListTab,
+  ProjectRoleListTab,
+  ServiceTokenTab
+} from "./components";
 
 enum TabSections {
   Member = "members",
@@ -18,8 +24,6 @@ enum TabSections {
 export const MembersPage = withProjectPermission(
   () => {
     const { currentWorkspace } = useWorkspace();
-    console.log("currentWorkspace: ", currentWorkspace);
-
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
@@ -44,7 +48,7 @@ export const MembersPage = withProjectPermission(
             {currentWorkspace?.version && currentWorkspace.version > 1 && (
               <TabPanel value={TabSections.Groups}>
                 <motion.div
-                  key="panel-1"
+                  key="panel-groups"
                   transition={{ duration: 0.15 }}
                   initial={{ opacity: 0, translateX: 30 }}
                   animate={{ opacity: 1, translateX: 0 }}