fix: Show appropriate UI toasts (meltano#6797)

For whatever reason when removing Google Analytics from the UI I removed all toasts too, rather than just the telemetry toast.

This PR partially reverts meltano#6783 to fix that.

Closes meltano#6794

src/webapp/src/main.js

@@ -12,6 +12,7 @@ import FatalError from '@/middleware/fatalError'
 import flaskContext from '@/utils/flask'
 import FontAwesome from '@/utils/font-awesome'
 import router from '@/router/app'
+import setupToasted from '@/utils/setupToasted'
 import store from '@/store'
 import Upgrade from '@/middleware/upgrade'
 
@@ -22,6 +23,9 @@ Vue.use(FontAwesome)
 Vue.use(Router)
 Vue.use(VueIntercom, { appId: 'ir946q00' })
 
+// Toast setup
+setupToasted()
+
 // Middleware setup
 const service = new Service(axios)
 Vue.use(Upgrade, {

src/webapp/src/utils/setupToasted.js

@@ -0,0 +1,107 @@
+import Vue from 'vue'
+
+import lodash from 'lodash'
+import Toasted from 'vue-toasted'
+
+import router from '@/router/app'
+
+export default function setup() {
+  const toastedOptions = {
+    router,
+    position: 'bottom-right',
+    iconPack: 'fontawesome',
+    theme: 'outline',
+    duration: 9000
+  }
+  Vue.use(Toasted, toastedOptions)
+
+  // Register a Global Forbidden Error Notification Toast.
+  Vue.toasted.register(
+    'forbidden',
+    "You can't access this resource at this moment.",
+    {
+      type: 'error'
+    }
+  )
+
+  // Register a Global General Error Notification Toast.
+  Vue.toasted.register('oops', 'Oops! Something went wrong.', {
+    type: 'error',
+    action: [
+      {
+        text: 'Get Help',
+        onClick: () => {
+          window.open('https://docs.meltano.com/the-project/community')
+        }
+      },
+      {
+        text: 'Close',
+        onClick: (e, toastObject) => {
+          toastObject.goAway(0)
+        }
+      }
+    ]
+  })
+
+  // Register a Global success notification
+  Vue.toasted.register(
+    'success',
+    message => message,
+    Object.assign(lodash.cloneDeep(toastedOptions), {
+      type: 'success',
+      action: [
+        {
+          text: 'OK',
+          onClick: (e, toastObject) => {
+            toastObject.goAway(0)
+          }
+        }
+      ]
+    })
+  )
+
+  // Register a Global error notification
+  Vue.toasted.register(
+    'error',
+    message => message,
+    Object.assign(lodash.cloneDeep(toastedOptions), {
+      type: 'error',
+      action: [
+        {
+          text: 'OK',
+          onClick: (e, toastObject) => {
+            toastObject.goAway(0)
+          }
+        }
+      ]
+    })
+  )
+
+  // Register a Global error notification
+  Vue.toasted.register(
+    'upgrade',
+    'A new version of Meltano is available, please refresh.',
+    {
+      action: [
+        {
+          text: 'Refresh!',
+          onClick: () => document.location.reload()
+        }
+      ],
+      duration: null,
+      closeOnSwipe: false,
+      singleton: true,
+      type: 'info'
+    }
+  )
+
+  // Register the `read-only` killswitch notification
+  Vue.toasted.register(
+    'readonly',
+    message => `The requested action could not be completed: ${message}`,
+    {
+      type: 'warning',
+      singleton: true
+    }
+  )
+}