Update UpgradePlanModal message to show relevant message on user actions

frontend/src/pages/admin/OverviewPage/components/UserPanel.tsx

@@ -32,8 +32,12 @@ import {
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+const deleteUserUpgradePlanMessage = "Deleting users via Admin UI"
+const addServerAdminUpgradePlanMessage = "Granting another user Server Admin permissions"
+
 const UserPanelTable = ({
-  handlePopUpOpen
+  handlePopUpOpen,
+  setUpgradePlanMessage
 }: {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<["removeUser", "upgradePlan", "upgradeToServerAdmin"]>,
@@ -42,6 +46,7 @@ const UserPanelTable = ({
       id: string;
     }
   ) => void;
+  setUpgradePlanMessage: (message: string) => void;
 }) => {
   const [searchUserFilter, setSearchUserFilter] = useState("");
   const { user } = useUser();
@@ -105,6 +110,7 @@ const UserPanelTable = ({
                                     onClick={(e) => {
                                       e.stopPropagation();
                                       if (!subscription?.instanceUserManagement) {
+                                        setUpgradePlanMessage(deleteUserUpgradePlanMessage)
                                         handlePopUpOpen("upgradePlan");
                                         return;
                                       }
@@ -118,6 +124,7 @@ const UserPanelTable = ({
                                       onClick={(e) => {
                                         e.stopPropagation();
                                         if (!subscription?.instanceUserManagement) {
+                                          setUpgradePlanMessage(addServerAdminUpgradePlanMessage)
                                           handlePopUpOpen("upgradePlan");
                                           return;
                                         }
@@ -164,6 +171,8 @@ export const UserPanel = () => {
     "upgradeToServerAdmin"
   ] as const);
 
+  const [upgradePlanMessage, setUpgradePlanMessage] = useState<string>(deleteUserUpgradePlanMessage)
+  
   const { mutateAsync: deleteUser } = useAdminDeleteUser();
   const { mutateAsync: grantAdminAccess } = useAdminGrantServerAdminAccess();
 
@@ -210,7 +219,7 @@ export const UserPanel = () => {
       <div className="mb-4">
         <p className="text-xl font-semibold text-mineshaft-100">Users</p>
       </div>
-      <UserPanelTable handlePopUpOpen={handlePopUpOpen} />
+      <UserPanelTable handlePopUpOpen={handlePopUpOpen} setUpgradePlanMessage={setUpgradePlanMessage}/>
       <DeleteActionModal
         isOpen={popUp.removeUser.isOpen}
         deleteKey="remove"
@@ -234,7 +243,7 @@ export const UserPanel = () => {
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="Deleting users via Admin UI is only available on Infisical's Pro plan and above."
+        text={`${upgradePlanMessage} is only available on Infisical's Pro plan and above.`}
       />
     </div>
   );