misc: moved admin user deletion to pro

frontend/src/hooks/api/subscriptions/types.ts

@@ -39,4 +39,5 @@ export type SubscriptionPlan = {
   trial_end: number | null;
   has_used_trial: boolean;
   caCrl: boolean;
+  adminUserDeletion: boolean;
 };

frontend/src/views/admin/DashboardPage/UserPanel.tsx

@@ -16,9 +16,10 @@ import {
   Td,
   Th,
   THead,
-  Tr
+  Tr,
+  UpgradePlanModal
 } from "@app/components/v2";
-import { useUser } from "@app/context";
+import { useSubscription, useUser } from "@app/context";
 import { useDebounce, usePopUp } from "@app/hooks";
 import { useAdminDeleteUser, useAdminGetUsers } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -27,8 +28,8 @@ const UserPanelTable = ({
   handlePopUpOpen
 }: {
   handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["removeUser"]>,
-    data: {
+    popUpName: keyof UsePopUpState<["removeUser", "upgradePlan"]>,
+    data?: {
       username: string;
       id: string;
     }
@@ -38,6 +39,7 @@ const UserPanelTable = ({
   const { user } = useUser();
   const userId = user?.id || "";
   const debounedSearchTerm = useDebounce(searchUserFilter, 500);
+  const { subscription } = useSubscription();
 
   const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useAdminGetUsers({
     limit: 20,
@@ -83,7 +85,13 @@ const UserPanelTable = ({
                                 variant="plain"
                                 ariaLabel="update"
                                 isDisabled={userId === id}
-                                onClick={() => handlePopUpOpen("removeUser", { username, id })}
+                                onClick={() => {
+                                  if (!subscription?.adminUserDeletion) {
+                                    handlePopUpOpen("upgradePlan");
+                                    return;
+                                  }
+                                  handlePopUpOpen("removeUser", { username, id });
+                                }}
                               >
                                 <FontAwesomeIcon icon={faXmark} />
                               </IconButton>
@@ -117,7 +125,8 @@ const UserPanelTable = ({
 
 export const UserPanel = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    "removeUser"
+    "removeUser",
+    "upgradePlan"
   ] as const);
 
   const { mutateAsync: deleteUser } = useAdminDeleteUser();
@@ -156,6 +165,11 @@ export const UserPanel = () => {
         onChange={(isOpen) => handlePopUpToggle("removeUser", isOpen)}
         onDeleteApproved={handleRemoveUser}
       />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text="You can delete users via Admin UI if you switch to Infisical's Pro plan."
+      />
     </div>
   );
 };