Removed notification plugin injection and indirection through app sto…

…re variable. Directly use notify composable instead

This also solves the issue of not being able to show multiple notifications at the same time

frontend/src/components/GNotify.vue

@@ -5,19 +5,18 @@ SPDX-License-Identifier: Apache-2.0
 -->
 <template>
   <notifications
-    :group="group"
-    :width="width"
-    :position="position"
-    :duration="props.duration"
+    position="bottom right"
     class="ma-2"
+    width="360px"
   >
     <template #body="{ item, close }">
       <v-alert
-        :density="props.density"
-        :variant="props.variant"
+        compact
+        flat
         :color="item.type"
         :title="item.title"
         :text="item.text"
+        :width="item.width"
         closable
         class="mt-2 overflow-wrap"
         @click:close="close"
@@ -26,98 +25,6 @@ SPDX-License-Identifier: Apache-2.0
   </notifications>
 </template>
 
-<script setup>
-import {
-  inject,
-  watch,
-  toRef,
-  toRefs,
-  nextTick,
-} from 'vue'
-
-import { useAppStore } from '@/store/app'
-
-// props
-const props = defineProps({
-  group: {
-    type: String,
-    default: 'default',
-  },
-  width: {
-    type: String,
-    default: '360px',
-  },
-  position: {
-    type: String,
-    default: 'bottom right',
-  },
-  duration: {
-    type: Number,
-    default: 5000,
-  },
-  density: {
-    type: String,
-    default: 'compact',
-  },
-  variant: {
-    type: String,
-    default: 'flat',
-  },
-})
-
-const { group, width, position } = toRefs(props)
-
-const store = useAppStore()
-const notify = inject('notify')
-const alert = toRef(store, props.group === 'headerWarning' ? 'headerWarningAlert' : 'defaultAlert')
-
-function getType (value) {
-  if (value.type === 'warn') {
-    return 'warning'
-  }
-  if (['success', 'info', 'warning', 'error'].includes(value.type)) {
-    return value.type
-  }
-  return 'secondary'
-}
-
-function getDuration (value, type) {
-  if (value.duration) {
-    return value.duration
-  }
-  return type === 'success'
-    ? 3000
-    : props.duration
-}
-
-function getGroup (value) {
-  return value.group
-    ? value.group
-    : props.group
-}
-
-// watches
-watch(alert, value => {
-  if (value) {
-    const type = getType(value)
-    const duration = getDuration(value, type)
-
-    const options = {
-      group: getGroup(value),
-      type,
-      title: value.title,
-      text: value.message,
-      duration,
-    }
-
-    alert.value = null
-    nextTick(() => notify(options))
-  }
-}, {
-  immediate: true,
-})
-</script>
-
 <style lang="scss" scoped>
 
 .overflow-wrap {

frontend/src/components/GRetryOperation.vue

@@ -73,7 +73,7 @@ async function onRetryOperation () {
     })
   } catch (err) {
     appStore.setError({
-      message: err,
+      text: err,
       duration: -1,
     })
     logger.error('failed to retry operation', err)

frontend/src/components/ShootDetails/GShootAdminKubeconfig.vue

@@ -182,7 +182,7 @@ export default {
         this.logger.error(errorMessage, errorDetails.errorCode, errorDetails.detailedMessage, err)
 
         this.setError({
-          message: err,
+          text: err,
           duration: -1,
         })
 

frontend/src/components/dialogs/GInfoDialog.vue

@@ -143,9 +143,7 @@ export default {
           this.dashboardVersion = `${version}`
         }
       } catch (err) {
-        this.setError({
-          message: `Failed to fetch version information. ${err.message}`,
-        })
+        this.setError(`Failed to fetch version information. ${err.message}`)
       }
     },
     onDialogClosed () {

frontend/src/layouts/GDefault.vue

@@ -21,12 +21,6 @@ SPDX-License-Identifier: Apache-2.0
       <g-main-toolbar />
       <g-main-content ref="mainContent" />
       <g-notify />
-      <g-notify
-        group="headerWarning"
-        :duration="-1"
-        width="500px"
-        position="top right"
-      />
     </template>
   </v-app>
 </template>

frontend/src/layouts/GLogin.vue

@@ -317,7 +317,7 @@ export default {
       } catch (err) {
         this.setError({
           title: `${this.getLoginTypeTitle('oidc')} Login Error`,
-          message: err.message,
+          text: err.message,
         })
       }
     },
@@ -334,7 +334,7 @@ export default {
       } catch (err) {
         this.setError({
           title: `${this.getLoginTypeTitle('token')} Login Error`,
-          message: err.message,
+          text: err.message,
         })
       }
     },

frontend/src/plugins/notify.js

@@ -4,11 +4,10 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-import notification from '@kyvg/vue3-notification'
+import Notifications from '@kyvg/vue3-notification'
 
 export default {
   install (app) {
-    app.use(notification)
-    app.provide('notify', app.config.globalProperties.$notify)
+    app.use(Notifications)
   },
 }

frontend/src/store/app.js

@@ -9,6 +9,7 @@ import {
   acceptHMRUpdate,
 } from 'pinia'
 import { ref } from 'vue'
+import { useNotification } from '@kyvg/vue3-notification'
 
 import { parseWarningHeader } from '@/utils/headerWarnings'
 import { errorDetailsFromError } from '@/utils/error'
@@ -19,44 +20,32 @@ export const useAppStore = defineStore('app', () => {
   const sidebar = ref(true)
   const redirectPath = ref(null)
   const loading = ref(false)
-  const defaultAlert = ref(null)
-  const headerWarningAlert = ref(null)
   const location = ref(moment.tz.guess())
   const timezone = ref(moment().format('Z'))
   const focusedElementId = ref(null)
   const splitpaneResize = ref(0)
   const fromRoute = ref(null)
   const routerError = ref(null)
+  const { notify } = useNotification()
 
   function updateSplitpaneResize () {
     splitpaneResize.value = Date.now()
   }
 
-  function setAlert (value) {
-    defaultAlert.value = value
-  }
-
   function setAlertWithType (type, value) {
-    const alert = {
-      type,
-    }
+    const alert = { type, duration: 5000 }
+
     if (typeof value === 'string') {
-      alert.message = value
-    } else if (value) {
-      const { message = '', title, duration } = value
-      alert.message = value.response
+      alert.text = value
+    } else if (value && typeof value === 'object') {
+      const { response, text = '', ...props } = value
+      Object.assign(alert, props)
+      alert.text = response
         ? errorDetailsFromError(value).detailedMessage
-        : message
-      if (title) {
-        alert.title = title
-      }
-      if (duration) {
-        alert.duration = duration
-      }
-    } else {
-      alert.message = ''
+        : text
     }
-    setAlert(alert)
+
+    notify(alert)
   }
 
   function setError (value) {
@@ -65,20 +54,13 @@ export const useAppStore = defineStore('app', () => {
 
   function setHeaderWarning (headerWarning) {
     const parsedWarnings = parseWarningHeader(headerWarning)
-    parsedWarnings.forEach((warning, index) => {
+    parsedWarnings.forEach(warning => {
       const { text, code } = warning
-
-      const alert = {
-        group: 'headerWarning',
-        type: 'warning',
+      setAlertWithType('warning', {
         title: code === '299' ? 'Kubernetes Warning' : undefined,
-        message: text,
-      }
-
-      // Defer setting the warning to ensure that watch has time to pick up the change
-      setTimeout(() => {
-        headerWarningAlert.value = alert
-      }, 100 * index + 1)
+        text,
+        duration: -1,
+      })
     })
   }
 
@@ -95,16 +77,13 @@ export const useAppStore = defineStore('app', () => {
     sidebar,
     redirectPath,
     loading,
-    defaultAlert,
-    headerWarningAlert,
     location,
     timezone,
     focusedElementId,
     splitpaneResize,
     fromRoute,
     routerError,
     updateSplitpaneResize,
-    setAlert,
     setError,
     setHeaderWarning,
     setSuccess,

frontend/src/store/member.js

@@ -73,7 +73,7 @@ export const useMemberStore = defineStore('member', () => {
       list.value = response.data
     } catch (err) {
       appStore.setError({
-        message: `Failed to reset Service Account: ${err.message}`,
+        text: `Failed to reset Service Account: ${err.message}`,
         duration: -1,
       })
     }