Fix merge conflicts

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/OrgIdentityTab.tsx

@@ -1,19 +1,17 @@
 import { motion } from "framer-motion";
 
-import { 
-    IdentitySection
-} from "./components";
+import { IdentitySection } from "./components";
 
 export const OrgIdentityTab = () => {
-    return (
-        <motion.div
-            key="panel-service-token"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <IdentitySection />
-        </motion.div>
-    );
-}
+  return (
+    <motion.div
+      key="panel-service-token"
+      transition={{ duration: 0.15 }}
+      initial={{ opacity: 0, translateX: 30 }}
+      animate={{ opacity: 1, translateX: 0 }}
+      exit={{ opacity: 0, translateX: 30 }}
+    >
+      <IdentitySection />
+    </motion.div>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx

@@ -1,14 +1,14 @@
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import {
-    FormControl,
-    Modal,
-    ModalContent,
-    Select,
-    SelectItem,
-    UpgradePlanModal
+  FormControl,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  UpgradePlanModal
 } from "@app/components/v2";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -16,93 +16,90 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
 
 type Props = {
-    popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
-    handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>, state?: boolean) => void;
-}
+  popUp: UsePopUpState<["identityAuthMethod", "upgradePlan"]>;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod", "upgradePlan"]>,
+    state?: boolean
+  ) => void;
+};
 
-const identityAuthMethods = [
-    { label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH }
-];
+const identityAuthMethods = [{ label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH }];
 
-const schema = yup.object({
-    authMethod: yup.string().required("Auth method is required"), // TODO: better enforcement here
-}).required();
+const schema = yup
+  .object({
+    authMethod: yup.string().required("Auth method is required") // TODO: better enforcement here
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
-export const IdentityAuthMethodModal = ({
-    popUp,
-    handlePopUpOpen,
-    handlePopUpToggle
-}: Props) => {
+export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+  const {
+    control
+    // watch,
+  } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
 
-    const {
-        control,
-        // watch,
-    } = useForm<FormData>({
-        resolver: yupResolver(schema)
-    });
+  const identityAuthMethodData = popUp?.identityAuthMethod?.data as {
+    identityId: string;
+    name: string;
+    authMethod?: IdentityAuthMethod;
+  };
 
-    const identityAuthMethodData = popUp?.identityAuthMethod?.data as {
-        identityId: string;
-        name: string;
-        authMethod?: IdentityAuthMethod;
-    }
-    
-    // const authMethod = watch("authMethod");
-    
-    const renderIdentityAuthForm = () => {
-        return (
-            <IdentityUniversalAuthForm 
-                handlePopUpOpen={handlePopUpOpen}
-                handlePopUpToggle={handlePopUpToggle}
-                identityAuthMethodData={identityAuthMethodData}
-            />
-        );
-    }
-    
+  // const authMethod = watch("authMethod");
+
+  const renderIdentityAuthForm = () => {
     return (
-        <Modal
-            isOpen={popUp?.identityAuthMethod?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("identityAuthMethod", isOpen);
-            }}
-        >
-            <ModalContent title={`${identityAuthMethodData?.authMethod ? "Update" : "Configure"} Identity Auth Method for ${identityAuthMethodData?.name ?? ""}`}>
-                <Controller
-                    control={control}
-                    name="authMethod"
-                    defaultValue={IdentityAuthMethod.UNIVERSAL_AUTH}
-                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                        <FormControl
-                            label="Auth Method"
-                            errorText={error?.message}
-                            isError={Boolean(error)}
-                        >
-                            <Select
-                                defaultValue={field.value}
-                                {...field}
-                                onValueChange={(e) => onChange(e)}
-                                className="w-full"
-                            >
-                                {identityAuthMethods.map(({ label, value }) => (
-                                    <SelectItem value={String(value || "")} key={label}>
-                                        {label}
-                                    </SelectItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-                    )}
-                />
-                {renderIdentityAuthForm()}
-                <UpgradePlanModal
-                    isOpen={popUp?.upgradePlan?.isOpen}
-                    onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                    text="You can use IP allowlisting if you switch to Infisical's Pro plan."
-                />
-            </ModalContent>
-        </Modal>
+      <IdentityUniversalAuthForm
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+        identityAuthMethodData={identityAuthMethodData}
+      />
     );
-}
+  };
 
+  return (
+    <Modal
+      isOpen={popUp?.identityAuthMethod?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("identityAuthMethod", isOpen);
+      }}
+    >
+      <ModalContent
+        title={`${
+          identityAuthMethodData?.authMethod ? "Update" : "Configure"
+        } Identity Auth Method for ${identityAuthMethodData?.name ?? ""}`}
+      >
+        <Controller
+          control={control}
+          name="authMethod"
+          defaultValue={IdentityAuthMethod.UNIVERSAL_AUTH}
+          render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            <FormControl label="Auth Method" errorText={error?.message} isError={Boolean(error)}>
+              <Select
+                defaultValue={field.value}
+                {...field}
+                onValueChange={(e) => onChange(e)}
+                className="w-full"
+              >
+                {identityAuthMethods.map(({ label, value }) => (
+                  <SelectItem value={String(value || "")} key={label}>
+                    {label}
+                  </SelectItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+        {renderIdentityAuthForm()}
+        <UpgradePlanModal
+          isOpen={popUp?.upgradePlan?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="You can use IP allowlisting if you switch to Infisical's Pro plan."
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -3,7 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   FormControl,
@@ -15,7 +15,7 @@ import {
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useCreateIdentity, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { IdentityAuthMethod, useAddIdentityUniversalAuth } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
@@ -40,8 +40,8 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
 };
 
-export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
-  const { createNotification } = useNotificationContext();
+export const IdentityModal = ({ popUp, /* handlePopUpOpen, */ handlePopUpToggle }: Props) => {
+  
 
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -50,6 +50,7 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro
 
   const { mutateAsync: createMutateAsync } = useCreateIdentity();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentity();
+  const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
 
   const {
     control,
@@ -112,21 +113,31 @@ export const IdentityModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pro
         // create
 
         const {
-          id: createdId,
-          name: createdName,
-          authMethod
+          id: createdId
+          // name: createdName,
+          // authMethod
         } = await createMutateAsync({
           name,
           role: role || undefined,
           organizationId: orgId
         });
 
-        handlePopUpToggle("identity", false);
-        handlePopUpOpen("identityAuthMethod", {
+        await addMutateAsync({
+          organizationId: orgId,
           identityId: createdId,
-          name: createdName,
-          authMethod
+          clientSecretTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+          accessTokenTTL: 2592000,
+          accessTokenMaxTTL: 2592000,
+          accessTokenNumUsesLimit: 0
         });
+
+        handlePopUpToggle("identity", false);
+        // handlePopUpOpen("identityAuthMethod", {
+        //   identityId: createdId,
+        //   name: createdName,
+        //   authMethod
+        // });
       }
 
       createNotification({

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { faArrowUpRightFromSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
@@ -20,7 +20,7 @@ export const IdentitySection = withPermission(
     const { currentOrg } = useOrganization();
     const orgId = currentOrg?.id || "";
 
-    const { createNotification } = useNotificationContext();
+    
     const { mutateAsync: deleteMutateAsync } = useDeleteIdentity();
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
       "identity",

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -1,7 +1,7 @@
 import { faKey, faLock, faPencil, faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   EmptyState,
@@ -44,7 +44,7 @@ type Props = {
 };
 
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
 

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal.tsx

@@ -7,7 +7,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { format } from "date-fns";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   DeleteActionModal,
@@ -66,7 +66,7 @@ export const IdentityUniversalAuthClientSecretModal = ({
   handlePopUpToggle
 }: Props) => {
   const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
+  
   const [token, setToken] = useState("");
   const [isClientSecretCopied, setIsClientSecretCopied] = useToggle(false);
   const [isClientIdCopied, setIsClientIdCopied] = useToggle(false);

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
@@ -63,7 +63,7 @@ export const IdentityUniversalAuthForm = ({
   handlePopUpToggle,
   identityAuthMethodData
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
   const { subscription } = useSubscription();

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/index.tsx

@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
+export { IdentitySection } from "./IdentitySection";

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/index.tsx

@@ -1 +1 @@
-export { IdentitySection } from "./IdentitySection";
+export { IdentitySection } from "./IdentitySection";

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/index.tsx

@@ -1 +1 @@
-export { OrgIdentityTab } from "./OrgIdentityTab";
+export { OrgIdentityTab } from "./OrgIdentityTab";

frontend/src/views/Org/MembersPage/components/OrgMembersTab/OrgMembersTab.tsx

@@ -3,15 +3,15 @@ import { motion } from "framer-motion";
 import { OrgMembersSection } from "./components";
 
 export const OrgMembersTab = () => {
-    return (
-        <motion.div
-            key="panel-org-members"
-            transition={{ duration: 0.15 }}
-            initial={{ opacity: 0, translateX: 30 }}
-            animate={{ opacity: 1, translateX: 0 }}
-            exit={{ opacity: 0, translateX: 30 }}
-        >
-            <OrgMembersSection />
-        </motion.div>
-    );
-}
+  return (
+    <motion.div
+        key="panel-org-members"
+        transition={{ duration: 0.15 }}
+        initial={{ opacity: 0, translateX: 30 }}
+        animate={{ opacity: 1, translateX: 0 }}
+        exit={{ opacity: 0, translateX: 30 }}
+    >
+        <OrgMembersSection />
+    </motion.div>
+  );
+}

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, IconButton, Input, Modal, ModalContent } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useToggle } from "@app/hooks";
@@ -30,7 +30,7 @@ export const AddOrgMemberModal = ({
   completeInviteLink,
   setCompleteInviteLink
 }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
 
   const { data: serverDetails } = useFetchServerStatus();

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -23,11 +23,11 @@ import { AddOrgMemberModal } from "./AddOrgMemberModal";
 import { OrgMembersTable } from "./OrgMembersTable";
 
 export const OrgMembersSection = () => {
-  const { createNotification } = useNotificationContext();
+  
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id ?? "";
-  
+
   const [completeInviteLink, setCompleteInviteLink] = useState<string>("");
 
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 import { faMagnifyingGlass, faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -49,7 +49,7 @@ type Props = {
 };
 
 export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const { user } = useUser();
@@ -208,7 +208,8 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                                     ))}
                                 </Select>
                               )}
-                              {(status === "invited" || status === "verified") && email &&
+                              {(status === "invited" || status === "verified") &&
+                                email &&
                                 serverDetails?.emailConfigured && (
                                   <Button
                                     isDisabled={!isAllowed}
@@ -240,7 +241,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                                     });
                                     return;
                                   }
-                                  
+
                                   handlePopUpOpen("removeMember", { orgMembershipId, username });
                                 }}
                                 size="lg"

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/index.tsx

@@ -1 +1 @@
-export { OrgMembersSection } from "./OrgMembersSection";
+export { OrgMembersSection } from "./OrgMembersSection";

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/index.tsx

@@ -1 +1 @@
-export { OrgMembersSection } from "./OrgMembersSection";
+export { OrgMembersSection } from "./OrgMembersSection";

frontend/src/views/Org/MembersPage/components/OrgMembersTab/index.tsx

@@ -1 +1 @@
-export { OrgMembersTab } from "./OrgMembersTab";
+export { OrgMembersTab } from "./OrgMembersTab";

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx

@@ -14,7 +14,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useCreateOrgRole, useUpdateOrgRole } from "@app/hooks/api";
@@ -107,7 +107,7 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
   const isNonEditable = ["owner", "admin", "member", "no-access"].includes(role?.slug || "");
   const isNewRole = !role?.slug;
 
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
   const {

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx

@@ -71,7 +71,7 @@ const getPermissionList = (option: Props["formName"]) => {
     case "incident-contact":
       return INCIDENT_CONTACTS_PERMISSIONS;
     case "member":
-      return MEMBERS_PERMISSIONS
+      return MEMBERS_PERMISSIONS;
     default:
       return PERMISSIONS;
   }
@@ -149,7 +149,7 @@ export const SimpleLevelPermissionOption = ({
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -157,8 +157,8 @@ export const SimpleLevelPermissionOption = ({
         <div>
           <FontAwesomeIcon icon={icon} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">{title}</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">{title}</div>
           <div className="text-xs font-light">{subtitle}</div>
         </div>
         <div>
@@ -178,7 +178,7 @@ export const SimpleLevelPermissionOption = ({
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           getPermissionList(formName).map(({ action, label }) => (

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx

@@ -76,7 +76,7 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
   return (
     <div
       className={twMerge(
-        "px-10 py-6 bg-mineshaft-800 rounded-md",
+        "rounded-md bg-mineshaft-800 px-10 py-6",
         selectedPermissionCategory !== Permission.NoAccess && "border-l-2 border-primary-600"
       )}
     >
@@ -84,8 +84,8 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
         <div>
           <FontAwesomeIcon icon={faMoneyBill} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">Project</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">Project</div>
           <div className="text-xs font-light">
             View and create new projects in this organization
           </div>
@@ -107,7 +107,7 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
       <motion.div
         initial={false}
         animate={{ height: isCustom ? "2.5rem" : 0, paddingTop: isCustom ? "1rem" : 0 }}
-        className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
+        className="grid auto-cols-min grid-flow-col gap-8 overflow-hidden"
       >
         {isCustom &&
           PERMISSIONS.map(({ action, label }) => (

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { faEdit, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -31,7 +31,7 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
   const [searchRoles, setSearchRoles] = useState("");
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
 
   const { data: roles, isLoading: isRolesLoading } = useGetOrgRoles(orgId);

frontend/src/views/Org/MembersPage/components/index.tsx

@@ -1,4 +1,4 @@
 export { OrgGroupsTab } from "./OrgGroupsTab";
 export { OrgIdentityTab } from "./OrgIdentityTab";
 export { OrgMembersTab } from "./OrgMembersTab";
-export { OrgRoleTabSection } from "./OrgRoleTabSection";
+export { OrgRoleTabSection } from "./OrgRoleTabSection";

frontend/src/views/Org/NonePage/NonePage.tsx

@@ -6,7 +6,7 @@ import { CreateOrgModal } from "../components";
 
 export const NonePage = () => {
   const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
-  
+
   useEffect(() => {
     handlePopUpToggle("createOrg", true);
   }, []);
@@ -19,4 +19,4 @@ export const NonePage = () => {
       />
     </div>
   );
-};
+};

frontend/src/views/Org/NonePage/index.tsx

@@ -1 +1 @@
-export { NonePage } from "./NonePage";
+export { NonePage } from "./NonePage";

frontend/src/views/Org/components/CreateOrgModal.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
 import z from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { useCreateOrg, useSelectOrganization } from "@app/hooks/api";
 
@@ -22,7 +22,7 @@ interface CreateOrgModalProps {
 }
 
 export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) => {
-  const { createNotification } = useNotificationContext();
+  
   const router = useRouter();
 
   const {