Fix merge conflicts

frontend/src/views/Project/AuditLogsPage/AuditLogsPage.tsx

@@ -6,9 +6,9 @@ import { LogsSection } from "./components";
 export const AuditLogsPage = withProjectPermission(
   () => {
     return (
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
-        <div className="max-w-7xl px-6 w-full">
-          <div className="py-6 sticky top-0 z-10 bg-bunker-800">
+      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl px-6">
+          <div className="sticky top-0 z-10 bg-bunker-800 py-6">
             <p className="text-3xl font-semibold text-gray-200">Audit Logs</p>
             <div />
           </div>

frontend/src/views/Project/AuditLogsPage/components/index.tsx

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

frontend/src/views/Project/AuditLogsPage/components/types.tsx

@@ -2,25 +2,25 @@ import * as yup from "yup";
 
 import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
 
-export const auditLogFilterFormSchema = yup.object({
-    eventType: yup.string()
-        .oneOf(Object.values(EventType), "Invalid event type"),
+export const auditLogFilterFormSchema = yup
+  .object({
+    eventType: yup.string().oneOf(Object.values(EventType), "Invalid event type"),
     actor: yup.string(),
-    userAgentType: yup.string()
-        .oneOf(Object.values(UserAgentType), "Invalid user agent type"),
+    userAgentType: yup.string().oneOf(Object.values(UserAgentType), "Invalid user agent type"),
     startDate: yup.date(),
     endDate: yup.date().min(yup.ref("startDate"), "End date cannot be before start date"),
     page: yup.number(),
     perPage: yup.number()
-}).required();
+  })
+  .required();
 
 export type AuditLogFilterFormData = yup.InferType<typeof auditLogFilterFormSchema>;
 
 export type SetValueType = (
-  name: keyof AuditLogFilterFormData, 
-  value: any, 
+  name: keyof AuditLogFilterFormData,
+  value: any,
   options?: {
-    shouldValidate?: boolean,
-    shouldDirty?: boolean
+    shouldValidate?: boolean;
+    shouldDirty?: boolean;
   }
-) => void;
+) => void;

frontend/src/views/Project/AuditLogsPage/index.tsx

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

frontend/src/views/Project/IPAllowListPage/IPAllowlistPage.tsx

@@ -6,8 +6,8 @@ import { IPAllowlistSection } from "./components";
 export const IPAllowlistPage = withProjectPermission(
   () => {
     return (
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
-        <div className="max-w-7xl px-6 w-full">
+      <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl px-6">
           <div className="my-6">
             <p className="text-3xl font-semibold text-gray-200">IP Allowlist</p>
             <div />

frontend/src/views/Project/IPAllowListPage/components/IPAllowlistModal.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, Input, Modal, ModalContent } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useAddTrustedIp, useGetMyIp, useUpdateTrustedIp } from "@app/hooks/api";
@@ -25,7 +25,7 @@ type Props = {
 };
 
 export const IPAllowlistModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { data, isLoading } = useGetMyIp();
 
   const { currentWorkspace } = useWorkspace();

frontend/src/views/Project/IPAllowListPage/components/IPAllowlistSection.tsx

@@ -1,7 +1,7 @@
 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 { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal, UpgradePlanModal } from "@app/components/v2";
 import {
@@ -17,7 +17,7 @@ import { IPAllowlistModal } from "./IPAllowlistModal";
 import { IPAllowlistTable } from "./IPAllowlistTable";
 
 export const IPAllowlistSection = () => {
-  const { createNotification } = useNotificationContext();
+  
   const { mutateAsync } = useDeleteTrustedIp();
   const { subscription } = useSubscription();
   const { currentWorkspace } = useWorkspace();

frontend/src/views/Project/IPAllowListPage/components/index.tsx

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

frontend/src/views/Project/IPAllowListPage/index.tsx

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

frontend/src/views/Project/MembersPage/components/IdentityTab/IdentityTab.tsx

@@ -1,19 +1,17 @@
 import { motion } from "framer-motion";
 
-import { 
-    IdentitySection,
-} from "./components";
+import { IdentitySection } from "./components";
 
 export const IdentityTab = () => {
-    return (
-        <motion.div
-            key="panel-identity"
-            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-identity"
+      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/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 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, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
@@ -30,7 +30,7 @@ type Props = {
 };
 
 export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
-  const { createNotification } = useNotificationContext();
+  
   const { currentOrg } = useOrganization();
   const { currentWorkspace } = useWorkspace();
 

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityRoles.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   Checkbox,
@@ -207,7 +207,7 @@ export const IdentityRoles = ({
   identityId
 }: TMemberRolesProp) => {
   const { currentWorkspace } = useWorkspace();
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
   const [searchRoles, setSearchRoles] = useState("");
 
@@ -318,7 +318,7 @@ export const IdentityRoles = ({
                               icon={faClock}
                               className={twMerge(
                                 new Date() > new Date(temporaryAccessEndTime as string) &&
-                                "text-red-600"
+                                  "text-red-600"
                               )}
                             />
                           </Tooltip>
@@ -391,14 +391,14 @@ export const IdentityRoles = ({
                               defaultValue={
                                 userProjectRoleDetails?.isTemporary
                                   ? {
-                                    isTemporary: true,
-                                    temporaryAccessStartTime:
-                                      userProjectRoleDetails.temporaryAccessStartTime as string,
-                                    temporaryRange:
-                                      userProjectRoleDetails.temporaryRange as string,
-                                    temporaryAccessEndTime:
-                                      userProjectRoleDetails.temporaryAccessEndTime
-                                  }
+                                      isTemporary: true,
+                                      temporaryAccessStartTime:
+                                        userProjectRoleDetails.temporaryAccessStartTime as string,
+                                      temporaryRange:
+                                        userProjectRoleDetails.temporaryRange as string,
+                                      temporaryAccessEndTime:
+                                        userProjectRoleDetails.temporaryAccessEndTime
+                                    }
                                   : false
                               }
                               render={({ field }) => (

frontend/src/views/Project/MembersPage/components/IdentityTab/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 { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
@@ -15,7 +15,7 @@ import { IdentityTable } from "./IdentityTable";
 
 export const IdentitySection = withProjectPermission(
   () => {
-    const { createNotification } = useNotificationContext();
+    
     const { currentWorkspace } = useWorkspace();
 
     const workspaceId = currentWorkspace?.id ?? "";

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/index.tsx

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

frontend/src/views/Project/MembersPage/components/IdentityTab/components/index.tsx

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

frontend/src/views/Project/MembersPage/components/IdentityTab/index.tsx

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

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx

@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 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 { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -57,7 +57,7 @@ const addMemberFormSchema = z.object({
 type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
 
 export const MemberListTab = () => {
-  const { createNotification } = useNotificationContext();
+  
   const { t } = useTranslation();
 
   const { currentOrg } = useOrganization();
@@ -71,7 +71,7 @@ export const MemberListTab = () => {
   const { data: wsKey } = useGetUserWsKey(workspaceId);
   const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
   const { data: orgUsers } = useGetOrgUsers(orgId);
-  
+
   const [searchMemberFilter, setSearchMemberFilter] = useState("");
 
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -105,7 +105,8 @@ export const MemberListTab = () => {
     const orgUser = (orgUsers || []).find(({ id }) => id === orgMembershipId);
     if (!orgUser) return;
 
-    try { // TODO: update
+    try {
+      // TODO: update
       if (currentWorkspace.version === ProjectVersion.V1) {
         await addUserToWorkspace({
           workspaceId,
@@ -236,14 +237,14 @@ export const MemberListTab = () => {
                           a={ProjectPermissionSub.Member}
                         >
                           {(isAllowed) => (
-                              <MemberRoles
-                                roles={roles}
-                                disableEdit={u.id === user?.id || !isAllowed}
-                                onOpenUpgradeModal={(description) =>
-                                  handlePopUpOpen("upgradePlan", { description })
-                                }
-                                membershipId={membershipId}
-                              />
+                            <MemberRoles
+                              roles={roles}
+                              disableEdit={u.id === user?.id || !isAllowed}
+                              onOpenUpgradeModal={(description) =>
+                                handlePopUpOpen("upgradePlan", { description })
+                              }
+                              membershipId={membershipId}
+                            />
                           )}
                         </ProjectPermissionCan>
                       </Td>

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoles.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   Checkbox,
@@ -209,7 +209,7 @@ export const MemberRoles = ({
   onOpenUpgradeModal
 }: TMemberRolesProp) => {
   const { currentWorkspace } = useWorkspace();
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
   const [searchRoles, setSearchRoles] = useState("");
   const { subscription } = useSubscription();
@@ -325,14 +325,12 @@ export const MemberRoles = ({
                       <div>{formatRoleName(role, customRoleName)}</div>
                       {isTemporary && (
                         <div>
-                          <Tooltip
-                            content={isExpired ? "Access expired" : "Temporary access"}
-                          >
+                          <Tooltip content={isExpired ? "Access expired" : "Temporary access"}>
                             <FontAwesomeIcon
                               icon={faClock}
                               className={twMerge(
                                 new Date() > new Date(temporaryAccessEndTime as string) &&
-                                "text-red-600"
+                                  "text-red-600"
                               )}
                             />
                           </Tooltip>
@@ -405,14 +403,14 @@ export const MemberRoles = ({
                               defaultValue={
                                 userProjectRoleDetails?.isTemporary
                                   ? {
-                                    isTemporary: true,
-                                    temporaryAccessStartTime:
-                                      userProjectRoleDetails.temporaryAccessStartTime as string,
-                                    temporaryRange:
-                                      userProjectRoleDetails.temporaryRange as string,
-                                    temporaryAccessEndTime:
-                                      userProjectRoleDetails.temporaryAccessEndTime
-                                  }
+                                      isTemporary: true,
+                                      temporaryAccessStartTime:
+                                        userProjectRoleDetails.temporaryAccessStartTime as string,
+                                      temporaryRange:
+                                        userProjectRoleDetails.temporaryRange as string,
+                                      temporaryAccessEndTime:
+                                        userProjectRoleDetails.temporaryAccessEndTime
+                                    }
                                   : false
                               }
                               render={({ field }) => (

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.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 { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -29,7 +29,7 @@ type Props = {
 
 export const ProjectRoleList = ({ onSelectRole }: Props) => {
   const [searchRoles, setSearchRoles] = useState("");
-  const { createNotification } = useNotificationContext();
+  
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
   const { currentWorkspace } = useWorkspace();
   const workspaceId = currentWorkspace?.id || "";

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -18,7 +18,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 { ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useCreateProjectRole, useUpdateProjectRole } from "@app/hooks/api";
@@ -125,7 +125,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
   const isNonEditable = ["admin", "member", "viewer", "no-access"].includes(role?.slug || "");
   const isNewRole = !role?.slug;
 
-  const { createNotification } = useNotificationContext();
+  
   const { currentWorkspace } = useWorkspace();
   const workspaceId = currentWorkspace?.id || "";
 

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx

@@ -91,7 +91,7 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
   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"
       )}
     >
@@ -99,8 +99,8 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
         <div>
           <FontAwesomeIcon icon={faPuzzlePiece} className="text-4xl" />
         </div>
-        <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">Secret Rollback</div>
+        <div className="flex flex-grow flex-col">
+          <div className="mb-1 text-lg font-medium">Secret Rollback</div>
           <div className="text-xs font-light">Secret rollback control actions</div>
         </div>
         <div>
@@ -120,7 +120,7 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P
       <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/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx

@@ -135,7 +135,7 @@ export const SingleProjectPermission = ({
   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"
       )}
     >
@@ -143,8 +143,8 @@ export const SingleProjectPermission = ({
         <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>
@@ -164,7 +164,7 @@ export const SingleProjectPermission = ({
       <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/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx

@@ -71,7 +71,7 @@ export const WsProjectPermission = ({ 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"
       )}
     >
@@ -79,8 +79,8 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props)
         <div>
           <FontAwesomeIcon icon={faPuzzlePiece} 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">Project control actions</div>
         </div>
         <div>
@@ -99,7 +99,7 @@ export const WsProjectPermission = ({ 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/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx

@@ -1,19 +1,17 @@
 import { motion } from "framer-motion";
 
-import { 
-    ServiceTokenSection, 
-} from "./components";
+import { ServiceTokenSection } from "./components";
 
 export const ServiceTokenTab = () => {
-    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 }}
-        >
-            <ServiceTokenSection />
-        </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 }}
+    >
+      <ServiceTokenSection />
+    </motion.div>
+  );
+};

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -9,7 +9,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { AxiosError } from "axios";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   decryptAssymmetric,
   encryptSymmetric
@@ -79,7 +79,7 @@ type Props = {
 
 export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
   const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
+  
   const { currentWorkspace } = useWorkspace();
   const {
     control,
@@ -161,7 +161,7 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
       });
     } catch (err) {
       console.error(err);
-      const axiosError = err as AxiosError
+      const axiosError = err as AxiosError;
       if (axiosError?.response?.status === 401) {
         createNotification({
           text: "You do not have access to the selected environment/path",

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 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 { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
@@ -18,7 +18,7 @@ type DeleteModalData = { name: string; id: string };
 export const ServiceTokenSection = withProjectPermission(
   () => {
     const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
+    
     const deleteServiceToken = useDeleteServiceToken();
 
     const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
@@ -49,9 +49,7 @@ export const ServiceTokenSection = withProjectPermission(
     return (
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-2 flex justify-between">
-          <p className="text-xl font-semibold text-mineshaft-100">
-            Service Tokens
-          </p>
+          <p className="text-xl font-semibold text-mineshaft-100">Service Tokens</p>
           <ProjectPermissionCan
             I={ProjectPermissionActions.Create}
             a={ProjectPermissionSub.ServiceTokens}

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenSection/index.tsx

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

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/index.tsx

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

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/index.tsx

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

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

@@ -2,4 +2,4 @@ export { GroupsTab } from "./GroupsTab";
 export { IdentityTab } from "./IdentityTab";
 export { MemberListTab } from "./MemberListTab";
 export { ProjectRoleListTab } from "./ProjectRoleListTab";
-export { ServiceTokenTab } from "./ServiceTokenTab";
+export { ServiceTokenTab } from "./ServiceTokenTab";