Rename group fns and add upgrade plan modal to project level groups tab

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

@@ -18,11 +18,11 @@ import { OrgPermissionActions, OrgPermissionSubjects } from "../permission/org-p
 import { TPermissionServiceFactory } from "../permission/permission-service";
 import { TGroupDALFactory } from "./group-dal";
 import {
+  TAddUserToGroupDTO,
   TCreateGroupDTO,
-  TCreateGroupUserMembershipDTO,
   TDeleteGroupDTO,
-  TDeleteGroupUserMembershipDTO,
+  TListGroupUsersDTO,
-  TGetGroupUserMembershipsDTO,
+  TRemoveUserFromGroupDTO,
   TUpdateGroupDTO
 } from "./group-types";
 import { TUserGroupMembershipDALFactory } from "./user-group-membership-dal";
@@ -185,13 +185,7 @@ export const groupServiceFactory = ({
     return group;
   };
 
-  const listGroupUsers = async ({
+  const listGroupUsers = async ({ groupSlug, actor, actorId, actorAuthMethod, actorOrgId }: TListGroupUsersDTO) => {
-    groupSlug,
-    actor,
-    actorId,
-    actorAuthMethod,
-    actorOrgId
-  }: TGetGroupUserMembershipsDTO) => {
     if (!actorOrgId) throw new BadRequestError({ message: "Failed to create group without organization" });
 
     const { permission } = await permissionService.getOrgPermission(
@@ -224,7 +218,7 @@ export const groupServiceFactory = ({
     actorId,
     actorAuthMethod,
     actorOrgId
-  }: TCreateGroupUserMembershipDTO) => {
+  }: TAddUserToGroupDTO) => {
     if (!actorOrgId) throw new BadRequestError({ message: "Failed to create group without organization" });
 
     const { permission } = await permissionService.getOrgPermission(
@@ -368,7 +362,7 @@ export const groupServiceFactory = ({
     actorId,
     actorAuthMethod,
     actorOrgId
-  }: TDeleteGroupUserMembershipDTO) => {
+  }: TRemoveUserFromGroupDTO) => {
     if (!actorOrgId) throw new BadRequestError({ message: "Failed to create group without organization" });
 
     const { permission } = await permissionService.getOrgPermission(

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

@@ -19,16 +19,16 @@ export type TDeleteGroupDTO = {
   groupSlug: string;
 } & TGenericPermission;
 
-export type TGetGroupUserMembershipsDTO = {
+export type TListGroupUsersDTO = {
   groupSlug: string;
 } & TGenericPermission;
 
-export type TCreateGroupUserMembershipDTO = {
+export type TAddUserToGroupDTO = {
   groupSlug: string;
   username: string;
 } & TGenericPermission;
 
-export type TDeleteGroupUserMembershipDTO = {
+export type TRemoveUserFromGroupDTO = {
   groupSlug: string;
   username: string;
 } & TGenericPermission;

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

@@ -1,9 +1,9 @@
 export {
+    useAddUserToGroup,
     useCreateGroup,
-    useCreateGroupUserMembership,
     useDeleteGroup,
-    useDeleteGroupUserMembership,
+    useRemoveUserFromGroup,
     useUpdateGroup} from "./mutations";
 export {
-    useGetGroupUserMemberships
+    useListGroupUsers
 } from "./queries";

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

@@ -85,7 +85,7 @@ export const useDeleteGroup = () => {
     });
 };
 
-export const useCreateGroupUserMembership = () => {
+export const useAddUserToGroup = () => {
     const queryClient = useQueryClient();
     return useMutation({
         mutationFn: async ({ 
@@ -107,7 +107,7 @@ export const useCreateGroupUserMembership = () => {
     });
 };
 
-export const useDeleteGroupUserMembership = () => {
+export const useRemoveUserFromGroup = () => {
     const queryClient = useQueryClient();
     return useMutation({
         mutationFn: async ({ 

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

@@ -15,7 +15,7 @@ type TUser = {
   isPartOfGroup: boolean;
 }
 
-export const useGetGroupUserMemberships = (groupSlug: string) => {
+export const useListGroupUsers = (groupSlug: string) => {
   return useQuery({
     queryKey: groupKeys.getGroupUserMembership(groupSlug),
     queryFn: async () => {

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

@@ -13,12 +13,12 @@ export {
   useGetUserWorkspaces,
   useGetWorkspaceAuthorizations,
   useGetWorkspaceById,
-  useGetWorkspaceGroupMemberships,
   useGetWorkspaceIdentityMemberships,
   useGetWorkspaceIndexStatus,
   useGetWorkspaceIntegrations,
   useGetWorkspaceSecrets,
   useGetWorkspaceUsers,
+  useListWorkspaceGroups,
   useNameWorkspaceSecrets,
   useRenameWorkspace,
   useToggleAutoCapitalization,

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

@@ -526,7 +526,7 @@ export const useDeleteGroupFromWorkspace = () => {
   });
 };
 
-export const useGetWorkspaceGroupMemberships = (projectSlug: string) => {
+export const useListWorkspaceGroups = (projectSlug: string) => {
   return useQuery({
     queryKey: workspaceKeys.getWorkspaceGroupMemberships(projectSlug),
     queryFn: async () => {

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

@@ -24,9 +24,9 @@ import {
     OrgPermissionSubjects
 } from "@app/context";
 import { 
-    useCreateGroupUserMembership,
+    useAddUserToGroup,
-    useDeleteGroupUserMembership,
+    useListGroupUsers,
-    useGetGroupUserMemberships} from "@app/hooks/api";
+    useRemoveUserFromGroup} from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
@@ -44,9 +44,9 @@ export const OrgGroupMembersModal = ({
         slug: string;
     };
     
-    const { data: users, isLoading } = useGetGroupUserMemberships(popUpData?.slug ?? "");
+    const { data: users, isLoading } = useListGroupUsers(popUpData?.slug ?? "");
-    const { mutateAsync: assignMutateAsync } = useCreateGroupUserMembership();
+    const { mutateAsync: assignMutateAsync } = useAddUserToGroup();
-    const { mutateAsync: unassignMutateAsync } = useDeleteGroupUserMembership();
+    const { mutateAsync: unassignMutateAsync } = useRemoveUserFromGroup();
     
     const handleAssignment = async (username: string, assign: boolean) => {
         try {

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 import Link from "next/link";
-import { yupResolver } from "@hookform/resolvers/yup";
+import { zodResolver } from "@hookform/resolvers/zod";
-import * as yup from "yup";
+import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import {
@@ -17,20 +17,16 @@ import {
     useAddGroupToWorkspace,
     useGetOrganizationGroups,
     useGetProjectRoles,
-    useGetWorkspaceGroupMemberships,
+    useListWorkspaceGroups,
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
-// TODO: change this to zod
+const schema = z.object({
+    slug: z.string(),
+    role: z.string()
+});
 
-const schema = yup
+export type FormData = z.infer<typeof schema>;
-  .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"]>;
@@ -48,7 +44,7 @@ export const GroupModal = ({
     const workspaceId = currentWorkspace?.id || "";
     
     const { data: groups } = useGetOrganizationGroups(orgId);
-    const { data: groupMemberships } = useGetWorkspaceGroupMemberships(currentWorkspace?.slug || "");
+    const { data: groupMemberships } = useListWorkspaceGroups(currentWorkspace?.slug || "");
     
     const { data: roles } = useGetProjectRoles(workspaceId);
     
@@ -70,7 +66,7 @@ export const GroupModal = ({
         reset,
         formState: { isSubmitting }
       } = useForm<FormData>({
-        resolver: yupResolver(schema)
+        resolver: zodResolver(schema)
       });
 
     const onFormSubmit = async ({ slug, role }: FormData) => {

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx

@@ -5,9 +5,10 @@ import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
     Button,
-    DeleteActionModal
+    DeleteActionModal,
+    UpgradePlanModal
 } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub,useWorkspace } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useSubscription,useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteGroupFromWorkspace } from "@app/hooks/api";
 
@@ -15,6 +16,7 @@ import { GroupModal } from "./GroupModal";
 import { GroupTable } from "./GroupsTable";
 
 export const GroupsSection = () => {
+    const { subscription } = useSubscription();
     const { currentWorkspace } = useWorkspace();
 
     const { mutateAsync: deleteMutateAsync } = useDeleteGroupFromWorkspace();
@@ -25,6 +27,16 @@ export const GroupsSection = () => {
         "upgradePlan"
     ] as const);
 
+    const handleAddGroupModal = () => {
+        if (!subscription?.groups) {
+            handlePopUpOpen("upgradePlan", {
+                description: "You can manage users more efficiently with groups if you upgrade your Infisical plan."
+            });
+        } else {
+            handlePopUpOpen("group");
+        }
+    }
+
     const onRemoveGroupSubmit = async (groupSlug: string) => {
         try {
             await deleteMutateAsync({
@@ -60,7 +72,7 @@ export const GroupsSection = () => {
                             colorSchema="primary"
                             type="submit"
                             leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                            onClick={() => handlePopUpOpen("group")}
+                            onClick={() => handleAddGroupModal()}
                             isDisabled={!isAllowed}
                         >
                             Add Group
@@ -83,6 +95,11 @@ export const GroupsSection = () => {
                     )
                 }
             />
+            <UpgradePlanModal
+                isOpen={popUp.upgradePlan.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+                text={(popUp.upgradePlan?.data as { description: string })?.description}
+            />
         </div>
     );
 }

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx

@@ -16,7 +16,7 @@ import {
   Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useGetWorkspaceGroupMemberships } from "@app/hooks/api";
+import { useListWorkspaceGroups } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { GroupRoles } from "./GroupRoles";
@@ -33,7 +33,7 @@ type Props = {
 
 export const GroupTable = ({ handlePopUpOpen }: Props) => {
   const { currentWorkspace } = useWorkspace();
-  const { data, isLoading } = useGetWorkspaceGroupMemberships(currentWorkspace?.slug || "");
+  const { data, isLoading } = useListWorkspaceGroups(currentWorkspace?.slug || "");
   return (
     <TableContainer>
         <Table>