fix: resolved error in org settings and integrations page alert hidden on no integrations

backend/src/ee/controllers/v1/roleController.ts

@@ -212,12 +212,13 @@ export const getUserPermissions = async (req: Request, res: Response) => {
   const {
     params: { orgId }
   } = await validateRequest(GetUserPermission, req);
-  
-  const { permission } = await getUserOrgPermissions(req.user._id, orgId);
+
+  const { permission, membership } = await getUserOrgPermissions(req.user._id, orgId);
 
   res.status(200).json({
     data: {
-      permissions: packRules(permission.rules)
+      permissions: packRules(permission.rules),
+      membership
     }
   });
 };
@@ -226,11 +227,12 @@ export const getUserWorkspacePermissions = async (req: Request, res: Response) =
   const {
     params: { workspaceId }
   } = await validateRequest(GetUserProjectPermission, req);
-  const { permission } = await getUserProjectPermissions(req.user._id, workspaceId);
+  const { permission, membership } = await getUserProjectPermissions(req.user._id, workspaceId);
 
   res.status(200).json({
     data: {
-      permissions: packRules(permission.rules)
+      permissions: packRules(permission.rules),
+      membership
     }
   });
 };

frontend/src/components/permissions/OrgPermissionCan.tsx

@@ -21,7 +21,7 @@ export const OrgPermissionCan: FunctionComponent<Props> = ({
   allowedLabel,
   ...props
 }) => {
-  const permission = useOrgPermission();
+  const { permission } = useOrgPermission();
 
   return (
     <Can {...props} passThrough={passThrough} ability={props?.ability || permission}>

frontend/src/context/OrgPermissionContext/OrgPermissionContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, ReactNode, useContext } from "react";
 
 import { useGetUserOrgPermissions } from "@app/hooks/api";
+import { OrgUser } from "@app/hooks/api/types";
 
 import { useOrganization } from "../OrganizationContext";
 import { TOrgPermission } from "./types";
@@ -9,7 +10,10 @@ type Props = {
   children: ReactNode;
 };
 
-const OrgPermissionContext = createContext<null | TOrgPermission>(null);
+const OrgPermissionContext = createContext<null | {
+  permission: TOrgPermission;
+  membership: OrgUser | null;
+}>(null);
 
 export const OrgPermissionProvider = ({ children }: Props): JSX.Element => {
   const { currentOrg } = useOrganization();

frontend/src/hoc/withPermission/withPermission.tsx

@@ -21,7 +21,7 @@ export const withPermission = <T extends {}, J extends TOrgPermission>(
   { action, subject, className, containerClassName }: Props<Generics<J>["abilities"]>
 ) => {
   const HOC = (hocProps: T) => {
-    const permission = useOrgPermission();
+    const { permission } = useOrgPermission();
 
     // akhilmhdh: Set as any due to casl/react ts type bug
     // REASON: casl due to its type checking can't seem to union even if union intersection is applied

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

@@ -8,6 +8,7 @@ import { apiRequest } from "@app/config/request";
 import { OrgPermissionSet } from "@app/context/OrgPermissionContext/types";
 import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext/types";
 
+import { OrgUser } from "../users/types";
 import {
   TGetRolesDTO,
   TGetUserOrgPermissionsDTO,
@@ -63,13 +64,16 @@ export const useGetRoles = ({ orgId, workspaceId }: TGetRolesDTO) =>
   });
 
 const getUserOrgPermissions = async ({ orgId }: TGetUserOrgPermissionsDTO) => {
-  if (orgId === "") return [];
+  if (orgId === "") return { permissions: [], membership: null };
 
   const { data } = await apiRequest.get<{
-    data: { permissions: PackRule<RawRuleOf<MongoAbility<OrgPermissionSet>>>[] };
-  }>(`/api/v1/roles/organization/${orgId}/permissions`, {});
-  
-  return data.data.permissions;
+    data: {
+      permissions: PackRule<RawRuleOf<MongoAbility<OrgPermissionSet>>>[];
+      membership: OrgUser;
+    };
+  }>(`/api/v1/roles/organization/${orgId}/permissions`);
+
+  return data.data;
 };
 
 export const useGetUserOrgPermissions = ({ orgId }: TGetUserOrgPermissionsDTO) =>
@@ -78,9 +82,9 @@ export const useGetUserOrgPermissions = ({ orgId }: TGetUserOrgPermissionsDTO) =
     queryFn: () => getUserOrgPermissions({ orgId }),
     // enabled: Boolean(orgId),
     select: (data) => {
-      const rule = unpackRules<RawRuleOf<MongoAbility<OrgPermissionSet>>>(data);
+      const rule = unpackRules<RawRuleOf<MongoAbility<OrgPermissionSet>>>(data.permissions);
       const ability = createMongoAbility<OrgPermissionSet>(rule, { conditionsMatcher });
-      return ability;
+      return { permission: ability, membership: data.membership };
     }
   });
 

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -54,7 +54,7 @@ export const IntegrationsSection = ({
         </div>
       )}
 
-      {!isBotActive && (
+      {!isBotActive && Boolean(integrations.length) && (
         <div className="px-6 py-4">
           <Alert hideTitle variant="warning">
             <AlertDescription>
@@ -119,7 +119,7 @@ export const IntegrationsSection = ({
                     {integrationSlugNameMapping[integration.integration]}
                   </div>
                 </div>
-                {(integration.integration === "qovery") && (
+                {integration.integration === "qovery" && (
                   <div className="flex flex-row">
                     <div className="ml-2 flex flex-col">
                       <FormLabel label="Org" />
@@ -162,7 +162,8 @@ export const IntegrationsSection = ({
                     </div>
                   </div>
                 )}
-                {((integration.integration === "checkly") || (integration.integration === "github")) && (
+                {(integration.integration === "checkly" ||
+                  integration.integration === "github") && (
                   <div className="ml-2 flex flex-col">
                     <FormLabel label="Secret Suffix" />
                     <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">

frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx

@@ -1,81 +1,70 @@
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    DeleteActionModal
-} from "@app/components/v2";
-import { useOrganization, useUser } from "@app/context";
-import {
-    useDeleteOrgById,
-    useGetOrgUsers
-} from "@app/hooks/api";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { useOrganization, useOrgPermission } from "@app/context";
+import { useDeleteOrgById } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 import { navigateUserToOrg } from "@app/views/Login/Login.utils";
 
 export const OrgDeleteSection = () => {
-    const router = useRouter();
-    const { currentOrg } = useOrganization();
-    const { user } = useUser();
-    const { createNotification } = useNotificationContext();
-    const { data: members } = useGetOrgUsers(currentOrg?._id ?? "");
-    
-    const membershipOrg = members?.find((member) => member.user._id === user._id);
+  const router = useRouter();
+  const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
+  const { membership } = useOrgPermission();
 
-    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
-        "deleteOrg"
-    ] as const);
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteOrg"
+  ] as const);
 
-    const { mutateAsync, isLoading } = useDeleteOrgById();
-    
-    const handleDeleteOrgSubmit = async () => {
-        try {
-            if (!currentOrg?._id) return;
-            
-            await mutateAsync({
-                organizationId: currentOrg?._id
-            });
-        
-            createNotification({
-                text: "Successfully deleted organization",
-                type: "success"
-            });
+  const { mutateAsync, isLoading } = useDeleteOrgById();
 
-            await navigateUserToOrg(router);
-            
-            handlePopUpClose("deleteOrg");
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to delete organization",
-                type: "error"
-            });
-        }
+  const handleDeleteOrgSubmit = async () => {
+    try {
+      if (!currentOrg?._id) return;
+
+      await mutateAsync({
+        organizationId: currentOrg?._id
+      });
+
+      createNotification({
+        text: "Successfully deleted organization",
+        type: "success"
+      });
+
+      await navigateUserToOrg(router);
+
+      handlePopUpClose("deleteOrg");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete organization",
+        type: "error"
+      });
     }
+  };
 
-    return (
-        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
-            <p className="text-xl font-semibold text-mineshaft-100 mb-4">
-                Danger Zone
-            </p>
-            <Button
-                isLoading={isLoading}
-                colorSchema="danger"
-                variant="outline_bg"
-                type="submit"
-                onClick={() => handlePopUpOpen("deleteOrg")}
-                isDisabled={(membershipOrg && membershipOrg.role !== "admin")}
-            >
-                {`Delete ${currentOrg?.name}`}
-            </Button>
-            <DeleteActionModal
-                isOpen={popUp.deleteOrg.isOpen}
-                title="Are you sure want to delete this organization?"
-                subTitle={`Permanently remove ${currentOrg?.name} and all of its data. This action is not reversible, so please be careful.`}
-                onChange={(isOpen) => handlePopUpToggle("deleteOrg", isOpen)}
-                deleteKey="confirm"
-                onDeleteApproved={handleDeleteOrgSubmit}
-            />
-        </div>
-    );
-}
+  return (
+    <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
+      <p className="text-xl font-semibold text-mineshaft-100 mb-4">Danger Zone</p>
+      <Button
+        isLoading={isLoading}
+        colorSchema="danger"
+        variant="outline_bg"
+        type="submit"
+        onClick={() => handlePopUpOpen("deleteOrg")}
+        isDisabled={Boolean(membership && membership.role !== "admin")}
+      >
+        {`Delete ${currentOrg?.name}`}
+      </Button>
+      <DeleteActionModal
+        isOpen={popUp.deleteOrg.isOpen}
+        title="Are you sure want to delete this organization?"
+        subTitle={`Permanently remove ${currentOrg?.name} and all of its data. This action is not reversible, so please be careful.`}
+        onChange={(isOpen) => handlePopUpToggle("deleteOrg", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleDeleteOrgSubmit}
+      />
+    </div>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx

@@ -1,24 +1,17 @@
-import { useOrganization, useUser } from "@app/context";
-import { useGetOrgUsers } from "@app/hooks/api";
+import { useOrgPermission } from "@app/context";
 
 import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
 
 export const OrgGeneralTab = () => {
-  const { currentOrg } = useOrganization();
-  const { user } = useUser();
-  const { data: members } = useGetOrgUsers(currentOrg?._id ?? "");
-
-  const membershipOrg = members?.find((member) => member.user._id === user?._id);
+  const { membership } = useOrgPermission();
 
   return (
     <div>
       <OrgNameChangeSection />
       <OrgIncidentContactsSection />
-      {(membershipOrg && membershipOrg.role === "admin") && (
-        <OrgDeleteSection />
-      )}
+      {membership && membership.role === "admin" && <OrgDeleteSection />}
     </div>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx

@@ -15,7 +15,7 @@ export const OrgIncidentContactsSection = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "addContact"
   ] as const);
-  const permission = useOrgPermission();
+  const { permission } = useOrgPermission();
 
   return (
     <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">