From 6be8d600c660038cb63fc11e16e963c357e07f12 Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Wed, 30 Aug 2023 11:56:55 -0700
Subject: [PATCH] Add new notification system to add notifications from
 anywhere

---
 console/client/src/layout/IDELayout.tsx       | 229 +++++++++---------
 console/client/src/layout/Notification.tsx    | 153 ++++++++----
 console/client/src/providers/AppProviders.tsx |   5 +-
 .../src/providers/notifications-provider.tsx  |  71 ++++++
 .../client/src/providers/schema-provider.tsx  |  13 +-
 5 files changed, 315 insertions(+), 156 deletions(-)
 create mode 100644 console/client/src/providers/notifications-provider.tsx

diff --git a/console/client/src/layout/IDELayout.tsx b/console/client/src/layout/IDELayout.tsx
index 0c92b74f42..e9bd25b54d 100644
--- a/console/client/src/layout/IDELayout.tsx
+++ b/console/client/src/layout/IDELayout.tsx
@@ -1,5 +1,4 @@
 import {Tab} from '@headlessui/react'
-import {InformationCircleIcon} from '@heroicons/react/20/solid'
 import {XMarkIcon} from '@heroicons/react/24/outline'
 import React from 'react'
 import {useSearchParams} from 'react-router-dom'
@@ -9,6 +8,10 @@ import {Timeline} from '../features/timeline/Timeline'
 import {VerbTab} from '../features/verbs/VerbTab'
 import {useClient} from '../hooks/use-client'
 import {ConsoleService} from '../protos/xyz/block/ftl/v1/console/console_connect'
+import {
+  NotificationType,
+  NotificationsContext,
+} from '../providers/notifications-provider'
 import {
   TabSearchParams,
   TabType,
@@ -32,9 +35,9 @@ const unselectedTabStyle = `text-gray-300 bg-slate-100 dark:bg-slate-600`
 export function IDELayout() {
   const client = useClient(ConsoleService)
   const {tabs, activeTab, setActiveTab, setTabs} = React.useContext(TabsContext)
+  const {showNotification} = React.useContext(NotificationsContext)
   const [searchParams, setSearchParams] = useSearchParams()
   const [activeIndex, setActiveIndex] = React.useState(0)
-  const [invalidTabMessage, setInvalidTabMessage] = React.useState<string>()
   const id = searchParams.get(TabSearchParams.id) as string
   const type = searchParams.get(TabSearchParams.type) as string
   // Set active tab index whenever our activeTab context changes
@@ -76,7 +79,11 @@ export function IDELayout() {
         setActiveTab({id: timelineTab.id, type: timelineTab.type})
         // On intial mount we have no query params set for tabs so we want to skip setting invalidTabMessage
         if (type === null && id === null) return
-        return setInvalidTabMessage(msg)
+        return showNotification({
+          title: 'Invalid Tab',
+          message: msg,
+          type: NotificationType.Error,
+        })
       }
       const inTabsList = tabs.some(
         ({id: tabId, type: tabType}) => tabId === id && tabType === type
@@ -104,128 +111,128 @@ export function IDELayout() {
         return setTabs(nextTabs)
       }
       if (moduleExist && !verbExist) {
-        setInvalidTabMessage(`Verb ${verbId} does not exist on ${moduleId}`)
+        return showNotification({
+          title: 'Verb not found',
+          message: `Verb '${verbId}' does not exist on module '${moduleId}'`,
+          type: NotificationType.Error,
+        })
       }
       if (!moduleExist) {
-        setInvalidTabMessage(`Module ${moduleId} does not exist`)
+        return showNotification({
+          title: 'Module not found',
+          message: `Module '${moduleId}' does not exist`,
+          type: NotificationType.Error,
+        })
       }
-      setActiveTab({id: timelineTab.id, type: timelineTab.type})
     }
     void validateTabs()
   }, [id, type])
 
   return (
-    <div className={`h-screen flex flex-col ${bgColor} ${textColor}`}>
-      <Navigation />
+    <>
+      <div className={`h-screen flex flex-col ${bgColor} ${textColor}`}>
+        <Navigation />
 
-      <div className='flex-grow flex overflow-hidden p-1'>
-        {/* Left Column */}
-        <aside className={`w-80 flex flex-col`}>
-          {/* Top Section */}
-          <div
-            className={`flex flex-col h-1/2 overflow-hidden rounded-t ${panelColor}`}
-          >
-            <header className={`px-4 py-2 ${headerTextColor} ${headerColor}`}>
-              Modules
-            </header>
-            <section className={`${panelColor} p-4 overflow-y-auto`}>
-              <ModulesList />
-            </section>
-          </div>
+        <div className='flex-grow flex overflow-hidden p-1'>
+          {/* Left Column */}
+          <aside className={`w-80 flex flex-col`}>
+            {/* Top Section */}
+            <div
+              className={`flex flex-col h-1/2 overflow-hidden rounded-t ${panelColor}`}
+            >
+              <header className={`px-4 py-2 ${headerTextColor} ${headerColor}`}>
+                Modules
+              </header>
+              <section className={`${panelColor} p-4 overflow-y-auto`}>
+                <ModulesList />
+              </section>
+            </div>
 
-          {/* Bottom Section */}
-          <div
-            className={`flex flex-col h-1/2 overflow-hidden mt-1 rounded-t ${panelColor}`}
-          >
-            <header className={`px-4 py-2 ${headerTextColor} ${headerColor}`}>
-              Module Details
-            </header>
-            <section className={`${panelColor} p-4 overflow-y-auto`}>
-              <ModuleDetails />
-            </section>
-          </div>
-        </aside>
+            {/* Bottom Section */}
+            <div
+              className={`flex flex-col h-1/2 overflow-hidden mt-1 rounded-t ${panelColor}`}
+            >
+              <header className={`px-4 py-2 ${headerTextColor} ${headerColor}`}>
+                Module Details
+              </header>
+              <section className={`${panelColor} p-4 overflow-y-auto`}>
+                <ModuleDetails />
+              </section>
+            </div>
+          </aside>
 
-        {/* Main Content */}
-        <main className='flex-grow flex flex-col overflow-hidden pl-1'>
-          <section className='flex-grow overflow-y-auto'>
-            <div className='flex flex-grow overflow-hidden h-full'>
-              <div className={`flex-1 flex flex-col rounded`}>
-                <Tab.Group
-                  selectedIndex={activeIndex}
-                  onChange={handleChangeTab}
-                >
-                  <div>
-                    <Tab.List
-                      className={`flex items-center rounded-t ${headerTextColor}`}
-                    >
-                      {tabs.map(({label, id}, i) => {
-                        return (
-                          <Tab
-                            key={id}
-                            className='flex items-center mr-1 relative'
-                            as='span'
-                          >
-                            <span
-                              className={`px-4 py-2 rounded-t ${
-                                id !== 'timeline' ? 'pr-8' : ''
-                              } ${
-                                activeIndex === i
-                                  ? `${selectedTabStyle}`
-                                  : `${unselectedTabStyle}`
-                              }`}
+          {/* Main Content */}
+          <main className='flex-grow flex flex-col overflow-hidden pl-1'>
+            <section className='flex-grow overflow-y-auto'>
+              <div className='flex flex-grow overflow-hidden h-full'>
+                <div className={`flex-1 flex flex-col rounded`}>
+                  <Tab.Group
+                    selectedIndex={activeIndex}
+                    onChange={handleChangeTab}
+                  >
+                    <div>
+                      <Tab.List
+                        className={`flex items-center rounded-t ${headerTextColor}`}
+                      >
+                        {tabs.map(({label, id}, i) => {
+                          return (
+                            <Tab
+                              key={id}
+                              className='flex items-center mr-1 relative'
+                              as='span'
                             >
-                              {label}
-                            </span>
-                            {i !== 0 && (
-                              <button
-                                onClick={e => {
-                                  e.stopPropagation()
-                                  handleCloseTab(id, i)
-                                }}
-                                className='absolute right-0 mr-2 text-gray-400 hover:text-white'
+                              <span
+                                className={`px-4 py-2 rounded-t ${
+                                  id !== 'timeline' ? 'pr-8' : ''
+                                } ${
+                                  activeIndex === i
+                                    ? `${selectedTabStyle}`
+                                    : `${unselectedTabStyle}`
+                                }`}
                               >
-                                <XMarkIcon className={`h-5 w-5`} />
-                              </button>
-                            )}
-                          </Tab>
-                        )
-                      })}
-                    </Tab.List>
-                    <div className='flex-grow'></div>
-                  </div>
-                  <div className={`flex-1 overflow-y-scroll ${panelColor}`}>
-                    <Tab.Panels>
-                      {tabs.map(({id}, i) => {
-                        return i === 0 ? (
-                          <Tab.Panel key={id}>
-                            <Timeline />
-                          </Tab.Panel>
-                        ) : (
-                          <Tab.Panel key={id}>
-                            <VerbTab id={id} />
-                          </Tab.Panel>
-                        )
-                      })}
-                    </Tab.Panels>
-                  </div>
-                </Tab.Group>
+                                {label}
+                              </span>
+                              {i !== 0 && (
+                                <button
+                                  onClick={e => {
+                                    e.stopPropagation()
+                                    handleCloseTab(id, i)
+                                  }}
+                                  className='absolute right-0 mr-2 text-gray-400 hover:text-white'
+                                >
+                                  <XMarkIcon className={`h-5 w-5`} />
+                                </button>
+                              )}
+                            </Tab>
+                          )
+                        })}
+                      </Tab.List>
+                      <div className='flex-grow'></div>
+                    </div>
+                    <div className={`flex-1 overflow-y-scroll ${panelColor}`}>
+                      <Tab.Panels>
+                        {tabs.map(({id}, i) => {
+                          return i === 0 ? (
+                            <Tab.Panel key={id}>
+                              <Timeline />
+                            </Tab.Panel>
+                          ) : (
+                            <Tab.Panel key={id}>
+                              <VerbTab id={id} />
+                            </Tab.Panel>
+                          )
+                        })}
+                      </Tab.Panels>
+                    </div>
+                  </Tab.Group>
+                </div>
+                <SidePanel />
               </div>
-              <SidePanel />
-            </div>
-          </section>
-        </main>
+            </section>
+          </main>
+        </div>
       </div>
-      {invalidTabMessage && (
-        <Notification
-          color='text-red-400'
-          icon={
-            <InformationCircleIcon className='flex-shrink-0 inline w-4 h-4 mr-3' />
-          }
-          title='Alert!'
-          message={invalidTabMessage}
-        />
-      )}
-    </div>
+      <Notification />
+    </>
   )
 }
diff --git a/console/client/src/layout/Notification.tsx b/console/client/src/layout/Notification.tsx
index 7355311e59..8a9e8267ea 100644
--- a/console/client/src/layout/Notification.tsx
+++ b/console/client/src/layout/Notification.tsx
@@ -1,48 +1,119 @@
-import React from 'react'
 import {Transition} from '@headlessui/react'
-import {Portal} from '@headlessui/react'
+import {XMarkIcon} from '@heroicons/react/20/solid'
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+} from '@heroicons/react/24/outline'
+import React, {Fragment} from 'react'
+import {
+  NotificationType,
+  NotificationsContext,
+} from '../providers/notifications-provider'
 
-export const Notification: React.FC<{
-  title: string
-  message: string
-  icon?: React.ReactNode
-  color: string
-}> = ({title, message, icon, color}) => {
-  const [active, setActive] = React.useState(false)
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
-      setActive(true)
-    }, 50)
+export const Notification: React.FC = () => {
+  const {isOpen, notification, closeNotification} =
+    React.useContext(NotificationsContext)
+
+  const iconColor = () => {
+    switch (notification?.type) {
+      case NotificationType.Success:
+        return 'text-green-400'
+      case NotificationType.Error:
+        return 'text-red-400'
+      case NotificationType.Warning:
+        return 'text-yellow-400'
+      case NotificationType.Info:
+        return 'text-blue-400'
+      default:
+        return 'text-gray-400'
+    }
+  }
+
+  const icon = () => {
+    switch (notification?.type) {
+      case NotificationType.Success:
+        return (
+          <CheckCircleIcon
+            className={`h-6 w-6 ${iconColor()}`}
+            aria-hidden='true'
+          />
+        )
+      case NotificationType.Error:
+        return (
+          <ExclamationTriangleIcon
+            className={`h-6 w-6 ${iconColor()}`}
+            aria-hidden='true'
+          />
+        )
+      case NotificationType.Warning:
+        return (
+          <ExclamationCircleIcon
+            className={`h-6 w-6 ${iconColor()}`}
+            aria-hidden='true'
+          />
+        )
+      case NotificationType.Info:
+        return (
+          <InformationCircleIcon
+            className={`h-6 w-6 ${iconColor()}`}
+            aria-hidden='true'
+          />
+        )
+      default:
+        return <></>
+    }
+  }
 
-    return () => clearTimeout(timer)
-  }, [])
   return (
-    <Portal>
-      <Transition
-        show={active}
-        enter='transition-opacity duration-150'
-        enterFrom='opacity-0'
-        enterTo='opacity-150'
-        leave='transition-opacity duration-150'
-        leaveFrom='opacity-150'
-        leaveTo='opacity-0'
-      >
-        <div
-          className={`${color} z-10 bg-opacity-5 fixed bottom-0.5 left-1/2 flex items-center p-4 mb-4 text-sm  rounded-lg bg-gray-800 gap-1`}
-          role='alert'
-          style={
-            {
-              transform: `translateX(-50%)`,
-              width: `calc(100% - 2rem)`,
-              '--tw-bg-opacity': '0.85',
-            } as React.CSSProperties
-          }
+    <div
+      aria-live='assertive'
+      className='pointer-events-none z-30 fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6'
+    >
+      <div className='flex w-full flex-col items-center space-y-4 sm:items-end'>
+        <Transition
+          show={isOpen}
+          as={Fragment}
+          enter='transform ease-out duration-300 transition'
+          enterFrom='translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2'
+          enterTo='translate-y-0 opacity-100 sm:translate-x-0'
+          leave='transition ease-in duration-100'
+          leaveFrom='opacity-100'
+          leaveTo='opacity-0'
         >
-          {icon}
-          <span className='font-medium'>{title}</span>
-          <span>{message}</span>
-        </div>
-      </Transition>
-    </Portal>
+          <div className='pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5'>
+            <div className='p-4'>
+              <div className='flex items-start'>
+                <div className='flex-shrink-0'>{icon()}</div>
+                <div className='ml-3 w-0 flex-1 pt-0.5'>
+                  <p className='text-sm font-medium text-gray-900'>
+                    {notification?.title}
+                  </p>
+                  <p className='mt-1 text-sm text-gray-500'>
+                    {notification?.message}
+                  </p>
+                </div>
+                <div className='ml-4 flex flex-shrink-0'>
+                  <button
+                    type='button'
+                    className='inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
+                    onClick={() => {
+                      closeNotification()
+                    }}
+                  >
+                    <span className='sr-only'>Close</span>
+                    <XMarkIcon
+                      className='h-5 w-5'
+                      aria-hidden='true'
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
   )
 }
diff --git a/console/client/src/providers/AppProviders.tsx b/console/client/src/providers/AppProviders.tsx
index 6b981cd87a..4227d3e5db 100644
--- a/console/client/src/providers/AppProviders.tsx
+++ b/console/client/src/providers/AppProviders.tsx
@@ -1,6 +1,7 @@
 import App from '../App'
 import {DarkModeProvider} from './dark-mode-provider'
 import ModulesProvider from './modules-provider'
+import {NotificationsProvider} from './notifications-provider'
 import SchemaProvider from './schema-provider'
 import {SelectedModuleProvider} from './selected-module-provider'
 import {SelectedTimelineEntryProvider} from './selected-timeline-entry-provider'
@@ -16,7 +17,9 @@ export function AppProviders() {
             <SelectedTimelineEntryProvider>
               <TabsProvider>
                 <SidePanelProvider>
-                  <App />
+                  <NotificationsProvider>
+                    <App />
+                  </NotificationsProvider>
                 </SidePanelProvider>
               </TabsProvider>
             </SelectedTimelineEntryProvider>
diff --git a/console/client/src/providers/notifications-provider.tsx b/console/client/src/providers/notifications-provider.tsx
new file mode 100644
index 0000000000..919a20a4fb
--- /dev/null
+++ b/console/client/src/providers/notifications-provider.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+
+export enum NotificationType {
+  Success,
+  Error,
+  Warning,
+  Info,
+}
+
+interface Notification {
+  title: string
+  message: string
+  type: NotificationType
+}
+
+interface NotificationContextType {
+  isOpen: boolean
+  notification?: Notification
+  showNotification: (
+    notification: Notification,
+    duration?: number | 'indefinite'
+  ) => void
+  closeNotification: () => void
+}
+
+const defaultContextValue: NotificationContextType = {
+  isOpen: false,
+  showNotification: () => {},
+  closeNotification: () => {},
+}
+
+export const NotificationsContext =
+  React.createContext<NotificationContextType>(defaultContextValue)
+
+export const NotificationsProvider = ({children}) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [notification, setNotification] = React.useState<Notification>()
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+  const closeNotification = () => {
+    setIsOpen(false)
+    setNotification(undefined)
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+  }
+
+  const showNotification = (
+    notification: Notification,
+    duration: number | 'indefinite' = 4000
+  ) => {
+    setIsOpen(true)
+    setNotification(notification)
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    if (duration !== 'indefinite') {
+      timeoutRef.current = setTimeout(() => {
+        closeNotification()
+      }, duration)
+    }
+  }
+
+  return (
+    <NotificationsContext.Provider
+      value={{isOpen, showNotification, closeNotification, notification}}
+    >
+      {children}
+    </NotificationsContext.Provider>
+  )
+}
diff --git a/console/client/src/providers/schema-provider.tsx b/console/client/src/providers/schema-provider.tsx
index df75ce5aa0..3781c354c8 100644
--- a/console/client/src/providers/schema-provider.tsx
+++ b/console/client/src/providers/schema-provider.tsx
@@ -1,10 +1,10 @@
 import {createContext, useEffect, useState} from 'react'
+import {useClient} from '../hooks/use-client'
+import {ControllerService} from '../protos/xyz/block/ftl/v1/ftl_connect.ts'
 import {
   DeploymentChangeType,
   PullSchemaResponse,
 } from '../protos/xyz/block/ftl/v1/ftl_pb'
-import {useClient} from '../hooks/use-client'
-import {ControllerService} from '../protos/xyz/block/ftl/v1/ftl_connect.ts'
 
 export const schemaContext = createContext<PullSchemaResponse[]>([])
 
@@ -17,9 +17,13 @@ const SchemaProvider = (props: Props) => {
   const [schema, setSchema] = useState<PullSchemaResponse[]>([])
 
   useEffect(() => {
+    const abortController = new AbortController()
+
     async function fetchSchema() {
       const schemaMap = new Map<string, PullSchemaResponse>()
-      for await (const response of client.pullSchema({})) {
+      for await (const response of client.pullSchema({
+        signal: abortController.signal,
+      })) {
         const moduleName = response.moduleName ?? ''
         switch (response.changeType) {
           case DeploymentChangeType.DEPLOYMENT_ADDED:
@@ -43,6 +47,9 @@ const SchemaProvider = (props: Props) => {
     }
 
     void fetchSchema()
+    return () => {
+      abortController.abort()
+    }
   }, [client])
 
   return (