Revert "Revert "Notification system"" (#2183)

* Revert "Revert "Notification system (#2178)" (#2181)" This reverts commit 01f10bb. * fix
dust-tt · Oct 18, 2023 · 0dc8e01 · 0dc8e01
1 parent be0e86b
commit 0dc8e01
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 6 deletions.
diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx
@@ -191,7 +191,6 @@ export default function AppLayout({
   children: React.ReactNode;
 }) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
-
   return (
     <>
       <Head>
@@ -246,7 +245,6 @@ export default function AppLayout({
           content="width=device-width, initial-scale=1, maximum-scale=1"
         />
       </Head>
-
       <div className="light h-full">
         {!hideSidebar && (
           <Transition.Root show={sidebarOpen} as={Fragment}>

diff --git a/front/components/sparkle/Notification.tsx b/front/components/sparkle/Notification.tsx
@@ -0,0 +1,130 @@
+import {
+  CheckCircleStrokeIcon,
+  Icon,
+  IconButton,
+  XCircleStrokeIcon,
+  XMarkIcon,
+} from "@dust-tt/sparkle";
+import { Transition } from "@headlessui/react";
+import React, { useEffect } from "react";
+
+import { classNames } from "@app/lib/utils";
+
+type NotificationType = {
+  title?: string;
+  description?: string;
+  type: "success" | "error";
+};
+
+export const SendNotificationsContext = React.createContext<
+  (n: NotificationType) => void
+>((n) => n);
+
+const NOTIFICATION_DELAY = 5000;
+
+export function NotificationArea({ children }: { children: React.ReactNode }) {
+  const [notifications, setNotifications] = React.useState<
+    (NotificationType & { id: string })[]
+  >([]);
+
+  function sendNotification(n: NotificationType) {
+    const id = Math.random().toString();
+    setNotifications((notifications) => [...notifications, { ...n, id }]);
+    /* After a delay allowing for the notification exit animation, remove the
+    notification from the list */
+    setTimeout(() => {
+      setNotifications((notifications) =>
+        notifications.filter((n) => n.id !== id)
+      );
+    }, NOTIFICATION_DELAY + 1000);
+  }
+
+  return (
+    <SendNotificationsContext.Provider value={sendNotification}>
+      {children}
+      <NotificationsList notifications={notifications} />
+    </SendNotificationsContext.Provider>
+  );
+}
+export function NotificationsList({
+  notifications,
+}: {
+  notifications: (NotificationType & { id: string })[];
+}) {
+  return (
+    <div className="fixed right-0 top-0 z-30 w-80">
+      <div className="flex flex-col items-center justify-center gap-4 p-4">
+        {notifications.map((n) => {
+          return (
+            <Notification
+              key={n.id}
+              title={n.title}
+              description={n.description}
+              type={n.type}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function Notification({ title, description, type }: NotificationType) {
+  const [showNotification, setShowNotification] = React.useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setShowNotification(false);
+    }, NOTIFICATION_DELAY);
+  }, []);
+  return (
+    <Transition
+      show={showNotification}
+      appear={true}
+      enter="transition ease-in-out duration-300 transform"
+      enterFrom="-translate-y-16 opacity-0"
+      enterTo="translate-y-0 opacity-100"
+      leave="transition ease-in-out duration-300 transform"
+      leaveFrom="translate-y-0 opacity-100"
+      leaveTo="-translate-y-16 opacity-0"
+    >
+      <div className="flex rounded-md border border-structure-100 bg-structure-0 p-2 shadow-md">
+        <div>
+          {type === "success" ? (
+            <Icon
+              size="sm"
+              visual={CheckCircleStrokeIcon}
+              className="text-success-500"
+            />
+          ) : (
+            <Icon
+              size="sm"
+              visual={XCircleStrokeIcon}
+              className="text-warning-500"
+            />
+          )}
+        </div>
+        <div className="flex flex-col">
+          <div
+            className={classNames(
+              "text-sm font-semibold capitalize",
+              type === "success" ? "text-success-500" : "text-warning-500"
+            )}
+          >
+            {title || type}
+          </div>
+          <div className="text-xs font-normal capitalize text-element-700">
+            {description}
+          </div>
+        </div>
+        <div>
+          <IconButton
+            icon={XMarkIcon}
+            size="xs"
+            variant="secondary"
+            onClick={() => setShowNotification(false)}
+          />
+        </div>
+      </div>
+    </Transition>
+  );
+}
diff --git a/front/pages/_app.tsx b/front/pages/_app.tsx
@@ -6,6 +6,8 @@ import Link from "next/link";
 import { SessionProvider } from "next-auth/react";
 import { MouseEvent, ReactNode } from "react";
 
+import { NotificationArea } from "@app/components/sparkle/Notification";
+
 function NextLinkWrapper({
   href,
   className,
@@ -49,7 +51,9 @@ export default function App({
   return (
     <SparkleContext.Provider value={{ components: { link: NextLinkWrapper } }}>
       <SessionProvider session={session}>
-        <Component {...pageProps} />
+        <NotificationArea>
+          <Component {...pageProps} />
+        </NotificationArea>
       </SessionProvider>
     </SparkleContext.Provider>
   );

diff --git a/front/pages/w/[wId]/members/index.tsx b/front/pages/w/[wId]/members/index.tsx
@@ -15,8 +15,7 @@ import {
 } from "@dust-tt/sparkle";
 import { UsersIcon } from "@heroicons/react/20/solid";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
-import { useState } from "react";
-import React from "react";
+import React, { useState } from "react";
 import { useSWRConfig } from "swr";
 
 import AppLayout from "@app/components/sparkle/AppLayout";
@@ -205,7 +204,6 @@ export default function WorkspaceAdmin({
             i.inviteEmail.toLowerCase().includes(searchText.toLowerCase())
         ),
     ];
-
     return (
       <>
         <InviteEmailModal