feat: show error when update notebook fail

src/flows/context/api.tsx

@@ -7,7 +7,7 @@ import {
   deleteNotebook,
   getNotebooks,
 } from 'src/client/notebooksRoutes'
-import {notebookUpdateFail} from 'src/shared/copy/notifications'
+import {notebookEditFail, notebookUpdateFail} from 'src/shared/copy/notifications'
 import {notify} from 'src/shared/actions/notifications'
 
 const DEFAULT_API_FLOW: PatchNotebookParams = {
@@ -21,7 +21,7 @@ let reportMaxTimeout = null
 const REPORT_DECAY = 500 // number of miliseconds to wait after last event before sending
 const REPORT_MAX_WAIT = 5000 // max number of miliseconds to wait between sends
 
-export const pooledUpdateAPI = (flow: PatchNotebookParams) => {
+export const pooledUpdateAPI = (flow: PatchNotebookParams, dispatch: Function) => {
   stagedFlow = flow
 
   if (!!reportDecayTimeout) {
@@ -40,14 +40,14 @@ export const pooledUpdateAPI = (flow: PatchNotebookParams) => {
 
       clearTimeout(reportDecayTimeout)
       reportDecayTimeout = null
-      updateAPI(stagedFlow)
+      updateAPI(stagedFlow).catch(err => dispatch(notify(notebookEditFail(err.message))))
 
       stagedFlow = DEFAULT_API_FLOW
     }, REPORT_MAX_WAIT)
   }
 
   reportDecayTimeout = setTimeout(() => {
-    updateAPI(stagedFlow)
+    updateAPI(stagedFlow).catch(err => dispatch(notify(notebookEditFail(err.message))))
 
     stagedFlow = DEFAULT_API_FLOW
   }, REPORT_DECAY)

src/flows/context/flow.current.tsx

@@ -1,11 +1,11 @@
-import React, {FC, useCallback, useRef, useState, useEffect} from 'react'
+import React, {FC, useCallback, useEffect, useRef, useState} from 'react'
 import {Flow, PipeData, PipeMeta} from 'src/types/flows'
 import {customAlphabet} from 'nanoid'
 import {PIPE_DEFINITIONS, PROJECT_NAME_PLURAL} from 'src/flows'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {Doc} from 'yjs'
 import {WebsocketProvider} from 'y-websocket'
-import {serialize, hydrate} from 'src/flows/context/flow.list'
+import {hydrate, serialize} from 'src/flows/context/flow.list'
 import {useParams} from 'react-router-dom'
 import {
   deleteNotebook,
@@ -195,7 +195,7 @@ export const FlowProvider: FC = ({children}) => {
         ...flow,
       })
 
-      pooledUpdateAPI({id, ...apiFlow})
+      pooledUpdateAPI({id, ...apiFlow}, dispatch)
     },
     [id]
   )

src/shared/copy/notifications/categories/notebooks.ts

@@ -41,6 +41,11 @@ export const notebookDeleteSuccess = (): Notification => ({
   message: 'Notebook was deleted successfully',
 })
 
+export const notebookEditFail = (message: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to edit Notebook: ${message}`,
+})
+
 export const csvUploaderErrorNotification = (
   message: string
 ): Notification => ({