From 4b31b03993b8895de7dc828085d3525480e502b4 Mon Sep 17 00:00:00 2001
From: Michael Mauderer <michael.mauderer@enso.org>
Date: Wed, 20 Dec 2023 14:32:36 +0100
Subject: [PATCH] Add new errors. Working integration with dashboard.

---
 app/gui2/src/components/GraphEditor.vue       | 44 ++++++++++++++++---
 app/gui2/stories/GraphEditor.story.vue        |  2 +-
 .../src/authentication/src/components/app.tsx |  1 +
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index 3622d6bac8b45..d3adb4df39427 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -29,9 +29,10 @@ import { colorFromString } from '@/util/colors'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import * as set from 'lib0/set'
+import { toast } from 'react-toastify'
 import type { ExprId, NodeMetadata } from 'shared/yjsModel'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { toast } from 'vue3-toastify'
+import { ProjectManagerEvents } from '../../../ide-desktop/lib/dashboard/src/authentication/src/dashboard/projectManager'
 import { type Usage } from './ComponentBrowser/input'
 
 const EXECUTION_MODES = ['design', 'live']
@@ -51,24 +52,53 @@ const componentBrowserUsage = ref<Usage>({ type: 'newNode' })
 const suggestionDb = useSuggestionDbStore()
 const interaction = provideInteractionHandler()
 
+/// === UI Messages and Errors ===
 function initStartupToast() {
   const startupToast = toast.info('Initializing the project. This can take up to one minute.', {
     autoClose: false,
   })
   projectStore.firstExecution.then(() => {
-    if (startupToast != null) {
-      toast.remove(startupToast)
-    }
+    toast.dismiss(startupToast)
   })
   onUnmounted(() => {
-    if (startupToast != null) {
-      toast.remove(startupToast)
-    }
+    toast.dismiss(startupToast)
+  })
+}
+
+function initiConnectionLostToast() {
+  let connectionLostToast = 'connectionLostToast'
+  document.addEventListener(
+    ProjectManagerEvents.loadingFailed,
+    () => {
+      toast.error('Lost connection to Language Server.', {
+        autoClose: false,
+        toastId: connectionLostToast,
+      })
+    },
+    { once: true },
+  )
+  onUnmounted(() => {
+    toast.dismiss(connectionLostToast)
   })
 }
 
+projectStore.lsRpcConnection.catch((err) => {
+  toast.error(`Connection to language server failed: ${err}`)
+})
+
+projectStore.lsRpcConnection.then((ls) => {
+  ls.client.onError((err) => {
+    toast.error(`Language server error: ${err}`)
+  })
+})
+
+projectStore.executionContext.on('executionFailed', (err) => {
+  toast.error(`Execution Failed: ${err}`, {})
+})
+
 onMounted(() => {
   initStartupToast()
+  initiConnectionLostToast()
 })
 
 const nodeSelection = provideGraphSelection(graphNavigator, graphStore.nodeRects, {
diff --git a/app/gui2/stories/GraphEditor.story.vue b/app/gui2/stories/GraphEditor.story.vue
index e6ba30cb13117..7f2fbd6f63951 100644
--- a/app/gui2/stories/GraphEditor.story.vue
+++ b/app/gui2/stories/GraphEditor.story.vue
@@ -48,7 +48,7 @@ main =
     autoPropsDisabled
   >
     <MockProjectStoreWrapper v-model="text">
-      <Suspense><GraphEditor /></Suspense>
+      <Suspense> <GraphEditor /></Suspense>
     </MockProjectStoreWrapper>
 
     <template #controls><HstCode v-model="text" title="code" /></template>
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx
index cfcd3da1a7329..bbfbb677717ec 100644
--- a/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx
+++ b/app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx
@@ -143,6 +143,7 @@ export default function App(props: AppProps) {
                 draggable={false}
                 toastClassName="text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl"
                 transition={toastify.Zoom}
+                limit={3}
             />
             <Router basename={getMainPageUrl().pathname}>
                 <AppRouter {...props} />