feat: battle of ts - unlimited edition

frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx

@@ -7,6 +7,7 @@ import { createNotification } from "@app/components/notifications";
 import { Button, Checkbox, Modal, ModalContent, Tooltip } from "@app/components/v2";
 import { useOrgPermission } from "@app/context";
 import { useUpgradePrivilegeSystem } from "@app/hooks/api";
+import { OrgMembershipRole } from "@app/helpers/roles";
 
 const formSchema = z.object({
   isProjectPrivilegesUpdated: z.literal(true),
@@ -21,7 +22,7 @@ type Props = {
 };
 
 export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) => {
-  const { membership } = useOrgPermission();
+  const { hasOrgRole } = useOrgPermission();
   const [step, setStep] = useState<"info" | "upgrade">("info");
 
   const {
@@ -65,7 +66,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
     setStep("info");
   };
 
-  const isAdmin = membership?.role === "admin";
+  const isAdmin = hasOrgRole(OrgMembershipRole.Admin);
 
   return (
     <Modal isOpen={isOpen} onOpenChange={handleClose}>
@@ -274,7 +275,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
                 <Tooltip
                   content={
                     !isAdmin
-                      ? `You cannot perform this upgrade because you are not an organization admin. (Your current role: ${membership?.role ?? "Unknown"})`
+                      ? `You cannot perform this upgrade because you are not an organization admin.`
                       : undefined
                   }
                 >

frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/ExternalMigrationsTab.tsx

@@ -4,12 +4,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button } from "@app/components/v2";
 import { useOrgPermission } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 
 import { SelectImportFromPlatformModal } from "./components/SelectImportFromPlatformModal";
+import { OrgMembershipRole } from "@app/helpers/roles";
 
 export const ExternalMigrationsTab = () => {
-  const { membership } = useOrgPermission();
+  const { hasOrgRole } = useOrgPermission();
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["selectImportPlatform"] as const);
 
@@ -41,7 +41,7 @@ export const ExternalMigrationsTab = () => {
           onClick={() => {
             handlePopUpOpen("selectImportPlatform");
           }}
-          isDisabled={membership?.role !== ProjectMembershipRole.Admin}
+          isDisabled={hasOrgRole(OrgMembershipRole.Admin)}
           leftIcon={<FontAwesomeIcon icon={faPlus} />}
         >
           Import

frontend/src/pages/organization/SettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx

@@ -6,12 +6,13 @@ import { useOrganization, useOrgPermission } from "@app/context";
 import { useDeleteOrgById } from "@app/hooks/api";
 import { clearSession } from "@app/hooks/api/users/queries";
 import { usePopUp } from "@app/hooks/usePopUp";
+import { OrgMembershipRole } from "@app/helpers/roles";
 
 export const OrgDeleteSection = () => {
   const navigate = useNavigate();
   const { currentOrg } = useOrganization();
 
-  const { membership } = useOrgPermission();
+  const { hasOrgRole } = useOrgPermission();
 
   const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteOrg"] as const);
 
@@ -52,7 +53,7 @@ export const OrgDeleteSection = () => {
           variant="outline_bg"
           type="submit"
           onClick={() => handlePopUpOpen("deleteOrg")}
-          isDisabled={Boolean(membership && membership.role !== "admin")}
+          isDisabled={Boolean(!hasOrgRole(OrgMembershipRole.Admin))}
         >
           {`Delete ${currentOrg?.name}`}
         </Button>

frontend/src/pages/organization/SettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx

@@ -3,14 +3,15 @@ import { useOrgPermission } from "@app/context";
 import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
+import { OrgMembershipRole } from "@app/helpers/roles";
 
 export const OrgGeneralTab = () => {
-  const { membership } = useOrgPermission();
+  const { hasOrgRole } = useOrgPermission();
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
       <OrgNameChangeSection />
       <OrgIncidentContactsSection />
-      {membership && membership.role === "admin" && <OrgDeleteSection />}
+      {hasOrgRole(OrgMembershipRole.Admin) && <OrgDeleteSection />}
     </div>
   );
 };