feat(ui): changed to a better toast for ui and a global error handler for all server error messages

frontend/src/pages/_app.tsx

@@ -12,7 +12,7 @@ import { config } from "@fortawesome/fontawesome-svg-core";
 import { QueryClientProvider } from "@tanstack/react-query";
 import NProgress from "nprogress";
 
-import NotificationProvider from "@app/components/context/Notifications/NotificationProvider";
+import { NotificationContainer } from "@app/components/notifications";
 import Telemetry from "@app/components/utilities/telemetry/Telemetry";
 import { TooltipProvider } from "@app/components/v2";
 import { publicPaths } from "@app/const";
@@ -30,6 +30,7 @@ import { AppLayout } from "@app/layouts";
 import { queryClient } from "@app/reactQuery";
 
 import "nprogress/nprogress.css";
+import "react-toastify/dist/ReactToastify.css";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import "react-day-picker/dist/style.css";
 import "../styles/globals.css";
@@ -85,15 +86,14 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
   ) {
     return (
       <QueryClientProvider client={queryClient}>
-        <NotificationProvider>
-          <ServerConfigProvider>
-            <UserProvider>
-              <AuthProvider>
-                <Component {...pageProps} />
-              </AuthProvider>
-            </UserProvider>
-          </ServerConfigProvider>
-        </NotificationProvider>
+        <NotificationContainer />
+        <ServerConfigProvider>
+          <UserProvider>
+            <AuthProvider>
+              <Component {...pageProps} />
+            </AuthProvider>
+          </UserProvider>
+        </ServerConfigProvider>
       </QueryClientProvider>
     );
   }
@@ -103,27 +103,26 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
   return (
     <QueryClientProvider client={queryClient}>
       <TooltipProvider>
-        <NotificationProvider>
-          <ServerConfigProvider>
-            <AuthProvider>
-              <OrgProvider>
-                <OrgPermissionProvider>
-                  <WorkspaceProvider>
-                    <ProjectPermissionProvider>
-                      <SubscriptionProvider>
-                        <UserProvider>
-                          <Layout>
-                            <Component {...pageProps} />
-                          </Layout>
-                        </UserProvider>
-                      </SubscriptionProvider>
-                    </ProjectPermissionProvider>
-                  </WorkspaceProvider>
-                </OrgPermissionProvider>
-              </OrgProvider>
-            </AuthProvider>
-          </ServerConfigProvider>
-        </NotificationProvider>
+        <NotificationContainer />
+        <ServerConfigProvider>
+          <AuthProvider>
+            <OrgProvider>
+              <OrgPermissionProvider>
+                <WorkspaceProvider>
+                  <ProjectPermissionProvider>
+                    <SubscriptionProvider>
+                      <UserProvider>
+                        <Layout>
+                          <Component {...pageProps} />
+                        </Layout>
+                      </UserProvider>
+                    </SubscriptionProvider>
+                  </ProjectPermissionProvider>
+                </WorkspaceProvider>
+              </OrgPermissionProvider>
+            </OrgProvider>
+          </AuthProvider>
+        </ServerConfigProvider>
       </TooltipProvider>
     </QueryClientProvider>
   );

frontend/src/pages/integrations/cloudflare-pages/create.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import axios from "axios";
 import queryString from "query-string";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { useCreateIntegration, useGetWorkspaceById } from "@app/hooks/api";
 
 import {
@@ -27,7 +27,7 @@ const cloudflareEnvironments = [
 export default function CloudflarePagesIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
-  const { createNotification } = useNotificationContext();
+  
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
   const [secretPath, setSecretPath] = useState("/");

frontend/src/pages/integrations/cloudflare-workers/create.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import axios from "axios";
 import queryString from "query-string";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { useCreateIntegration, useGetWorkspaceById } from "@app/hooks/api";
 
 import {
@@ -23,7 +23,7 @@ import {
 export default function CloudflareWorkersIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
-  const { createNotification } = useNotificationContext();
+  
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");

frontend/src/pages/integrations/github/create.tsx

@@ -20,7 +20,7 @@ import queryString from "query-string";
 import { twMerge } from "tailwind-merge";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import {
   Button,
   Card,
@@ -98,7 +98,7 @@ type FormData = yup.InferType<typeof schema>;
 export default function GitHubCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
-  const { createNotification } = useNotificationContext();
+  
 
   const integrationAuthId =
     (queryString.parse(router.asPath.split("?")[1]).integrationAuthId as string) ?? "";

frontend/src/pages/login/select-organization.tsx

@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import axios from "axios";
 import jwt_decode from "jwt-decode";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { IsCliLoginSuccessful } from "@app/components/utilities/attemptCliLogin";
 import { Button, Spinner } from "@app/components/v2";
 import { useUser } from "@app/context";
@@ -35,7 +35,7 @@ export default function LoginPage() {
   const selectOrg = useSelectOrganization();
   const { user, isLoading: userLoading } = useUser();
 
-  const { createNotification } = useNotificationContext();
+  
 
   const queryParams = new URLSearchParams(window.location.search);
 

frontend/src/pages/org/[id]/overview/index.tsx

@@ -28,7 +28,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as Tabs from "@radix-ui/react-tabs";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import onboardingCheck from "@app/components/utilities/checks/OnboardingCheck";
 import {
@@ -477,7 +477,7 @@ const OrganizationPage = withPermission(
     const { currentOrg } = useOrganization();
     const routerOrgId = String(router.query.id);
     const orgWorkspaces = workspaces?.filter((workspace) => workspace.orgId === routerOrgId) || [];
-    const { createNotification } = useNotificationContext();
+    
     const addUsersToProject = useAddUserToWsNonE2EE();
 
     const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([