Move custom role paywall to assignment step

frontend/src/views/Project/MembersPage/components/MachineIdentityTab/components/MachineIdentitySection/MachineIdentityTable.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from "react";
 import { faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
@@ -96,13 +95,6 @@ export const MachineIdentityTable = ({
               });
         }
     }
-
-    const findRoleFromId = useCallback(
-        (roleId: string) => {
-            return (roles || []).find(({ _id: id }) => id === roleId);
-        },
-        [roles]
-    );
       
     return (
         <TableContainer>
@@ -141,7 +133,7 @@ export const MachineIdentityTable = ({
                                             return (
                                                 <Select
                                                     value={
-                                                        role === "custom" ? findRoleFromId(customRole)?.slug : role
+                                                        role === "custom" ? customRole.slug : role
                                                     }
                                                     isDisabled={!isAllowed}
                                                     className="w-40 bg-mineshaft-600"

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

@@ -38,9 +38,9 @@ import {
   ProjectPermissionActions,
   ProjectPermissionSub,
   useOrganization,
+  useSubscription,
   useUser,
-  useWorkspace
-} from "@app/context";
+  useWorkspace} from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
   useAddUserToWs,
@@ -60,6 +60,7 @@ type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
 
 export const MemberListTab = () => {
   const { createNotification } = useNotificationContext();
+  const { subscription } = useSubscription();
   const { t } = useTranslation();
 
   const { currentOrg } = useOrganization();
@@ -170,6 +171,15 @@ export const MemberListTab = () => {
     if (!currentOrg?._id) return;
 
     try {
+      const isCustomRole = !["admin", "member", "viewer"].includes(role);
+          
+      if (isCustomRole && subscription && !subscription?.rbac) {
+        handlePopUpOpen("upgradePlan", {
+          description: "You can assign custom roles to members if you upgrade your Infisical plan."
+        });
+        return;
+      }
+          
       await updateUserWorkspaceRole({ membershipId, role });
       createNotification({
         text: "Successfully updated user role",
@@ -302,7 +312,7 @@ export const MemberListTab = () => {
                             {(isAllowed) => (
                               <>
                                 <Select
-                                  defaultValue={
+                                  value={
                                     role === "custom" ? findRoleFromId(customRole)?.slug : role
                                   }
                                   isDisabled={userId === u?._id || !isAllowed}
@@ -443,7 +453,7 @@ export const MemberListTab = () => {
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add custom environments if you switch to Infisical's Team plan."
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
       />
     </div>
   );

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -18,9 +18,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { Button, FormControl, Input, UpgradePlanModal } from "@app/components/v2";
-import { ProjectPermissionSub, useOrganization, useSubscription, useWorkspace } from "@app/context";
-import { usePopUp } from "@app/hooks";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { ProjectPermissionSub, useOrganization, useWorkspace } from "@app/context";
 import { useCreateRole, useUpdateRole } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";
 
@@ -110,8 +109,6 @@ type Props = {
 };
 
 export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
-  const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["upgradePlan"] as const);
-
   const isNonEditable = ["admin", "member", "viewer"].includes(role?.slug || "");
   const isNewRole = !role?.slug;
 
@@ -119,7 +116,6 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?._id || "";
   const { currentWorkspace } = useWorkspace();
-  const { subscription } = useSubscription();
   const workspaceId = currentWorkspace?._id || "";
 
   const {
@@ -155,11 +151,6 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
   };
 
   const handleFormSubmit = async (el: TFormSchema) => {
-    if (subscription && !subscription?.rbac) {
-      handlePopUpOpen("upgradePlan");
-      return;
-    }
-
     if (!isNewRole) {
       await handleRoleUpdate(el);
       return;
@@ -282,17 +273,6 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
           </Button>
         </div>
       </form>
-      {subscription && (
-        <UpgradePlanModal
-          isOpen={popUp.upgradePlan.isOpen}
-          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-          text={
-            subscription.slug === null
-              ? "You can use RBAC under an Enterprise license"
-              : "You can use RBAC if you switch to Infisical's Team Plan."
-          }
-        />
-      )}
     </div>
   );
 };