Merge pull request #1218 from MetRonnie/alert-snack

Replace alert bar with snackbar

Author: wxtim

src/components/core/Alert.vue

@@ -16,65 +16,61 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div v-if="alert">
-    <v-alert
-      :value="true"
-      :type="alert.color"
-      :icon="alert.icon"
-      :class="getColor(alert.color)"
-      dismissible
-      tile
-      light
-      colored-border
-    >
-      <template v-slot:close="props">
-        <v-icon @click="closeAlert(props.toggle)">{{ svgPaths.close }}</v-icon>
-      </template>
-      {{ alert.text }}
-    </v-alert>
-  </div>
+  <v-snackbar
+    v-if="alert"
+    v-model="alert"
+    :color="getColor(alert.color)"
+    top
+    timeout="-1"
+    data-cy="alert-snack"
+  >
+    <template v-slot:action="{ attrs }">
+      <v-btn
+        icon
+        v-bind="attrs"
+        @click="closeAlert"
+        data-cy="snack-close"
+      >
+        <v-icon>{{ $options.icons.mdiClose }}</v-icon>
+      </v-btn>
+    </template>
+    {{ alert.text }}
+  </v-snackbar>
 </template>
 
 <script>
 import { mdiClose } from '@mdi/js'
 import { mapActions, mapState } from 'vuex'
 
+// TODO: remove later when https://github.com/vuetifyjs/vuetify/issues/11021 is fixed
+const colors = new Map([
+  ['error', 'red'],
+  ['success', 'green'],
+  ['warning', 'amber']
+])
+
 export default {
   name: 'Alert',
 
-  data () {
-    return {
-      // TODO: remove later when https://github.com/vuetifyjs/vuetify/issues/11021 is fixed
-      colors: new Map([
-        ['error', 'red'],
-        ['success', 'green'],
-        ['warning', 'amber']
-      ]),
-      svgPaths: {
-        close: mdiClose
-      }
-    }
-  },
-
   computed: {
     ...mapState(['alert'])
   },
 
   methods: {
     ...mapActions(['setAlert']),
     getColor (type) {
-      return this.colors.get(type) || ''
+      return colors.get(type) || ''
     },
     /**
      * Dismisses the alert from the UI, also removing it from the Vuex store.
-     *
-     * @param {Function} toggleFunction - the original Vuetify toggle function
-     * @see https://vuetifyjs.com/en/api/v-alert/
      */
-    closeAlert (toggleFunction) {
+    closeAlert () {
       this.setAlert(null)
-      toggleFunction()
     }
+  },
+
+  icons: {
+    mdiClose
   }
 }
 </script>

src/components/cylc/Mutation.vue

@@ -116,17 +116,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </v-tooltip>
       </v-card-actions>
       <v-snackbar
-        v-model="showSnackbar"
-        v-bind="snackbarProps"
-        data-cy="response-snackbar"
+        v-model="showWarning"
+        timeout="4e3"
+        color="amber accent-2"
+        light
+        data-cy="warning-snack"
       >
-        {{ response.msg }}
+        {{ warningMsg }}
         <template v-slot:action="{ attrs }">
           <v-btn
-            @click="showSnackbar = false"
+            @click="showWarning = false"
             icon
             v-bind="attrs"
-            data-cy="snackbar-close"
+            data-cy="snack-close"
           >
             <v-icon>
               {{ $options.icons.close }}
@@ -143,7 +145,8 @@ import EditRuntimeForm from '@/components/graphqlFormGenerator/EditRuntimeForm.v
 import Markdown from '@/components/Markdown'
 import {
   getMutationShortDesc,
-  getMutationExtendedDesc
+  getMutationExtendedDesc,
+  mutationStatus
 } from '@/utils/aotf'
 import { mdiClose } from '@mdi/js'
 
@@ -186,10 +189,7 @@ export default {
   data: () => ({
     isValid: false,
     submitting: false,
-    response: {
-      msg: null,
-      level: 'warn'
-    }
+    warningMsg: null
   }),
 
   computed: {
@@ -201,26 +201,13 @@ export default {
     extendedDescription () {
       return getMutationExtendedDesc(this.mutation.description)
     },
-    showSnackbar: {
+    showWarning: {
       get () {
-        return Boolean(this.response.msg)
+        return Boolean(this.warningMsg)
       },
       set (val) {
-        if (!val) this.response.msg = null
+        if (!val) this.warningMsg = null
       }
-    },
-    snackbarProps () {
-      return this.response.level === 'error'
-        ? {
-          timeout: -1,
-          color: 'red accent-2',
-          dark: true
-        }
-        : {
-          timeout: 4e3,
-          color: 'amber accent-2',
-          light: true
-        }
     }
   },
 
@@ -230,16 +217,13 @@ export default {
       this.submitting = true
       this.$refs.form.submit().then(response => {
         this.submitting = false
-        if (response.status.name.includes('failed')) {
-          this.response.msg = response.message
-          this.response.level = 'error'
-        } else if (response.status.name === 'warn') {
-          this.response.msg = response.message
-          this.response.level = 'warn'
-        } else {
+        if (response.status === mutationStatus.SUCCEEDED) {
           // Close the form on success
           this.cancel()
+        } else if (response.status === mutationStatus.WARN) {
+          this.warningMsg = response.message
         }
+        // else if error, an alert is generated by AOTF
       })
     }
   },

src/components/graphqlFormGenerator/EditRuntimeForm.vue

@@ -62,7 +62,7 @@ import { mdiHelpCircleOutline } from '@mdi/js'
 import { cloneDeep, isArray, isEqual, snakeCase, startCase } from 'lodash'
 import { VTextarea } from 'vuetify/lib/components'
 import VuetifyConfig, { getComponentProps, RUNTIME_SETTING } from '@/components/graphqlFormGenerator/components/vuetify'
-import { findByName, mutate } from '@/utils/aotf'
+import { findByName, mutate, mutationStatus } from '@/utils/aotf'
 
 export default {
   name: 'EditRuntimeForm',
@@ -161,9 +161,7 @@ export default {
       if (!settings.length) {
         return {
           message: 'No changes were made',
-          status: {
-            name: 'warn'
-          }
+          status: mutationStatus.WARN
         }
       }
       const args = {

src/graphql/index.js

@@ -97,7 +97,7 @@ export function createSubscriptionClient (wsUrl, options = {}, wsImpl = null) {
   //       would be nice to find a better error message using the error object
   // subscriptionClient.onError((error) => {
   //   console.error(error)
-  //   store.commit('SET_ALERT', new Alert(error, null, 'error'))
+  //   store.commit('SET_ALERT', new Alert(error, 'error'))
   // })
   return subscriptionClient
 }

src/layouts/Default.vue

@@ -87,7 +87,7 @@ export default {
 
   errorCaptured (error, vm, info) {
     if (process.env.NODE_ENV !== 'production') {
-      store.dispatch('setAlert', new AlertModel(error, null, 'error'))
+      store.dispatch('setAlert', new AlertModel(error, 'error'))
     }
   }
 }

src/model/Alert.model.js

@@ -16,9 +16,8 @@
  */
 
 export default class Alert {
-  constructor (text, icon, color) {
+  constructor (text, color) {
     this.text = text
-    this.icon = icon
     this.color = color
   }
 }

src/model/Subscription.model.js

@@ -74,7 +74,7 @@ class Subscription {
     } else {
       Object.values(this.subscribers).forEach(function (subscriber) {
         subscriber.viewState = viewState
-        subscriber.setAlert(new Alert(context.message, null, 'error'))
+        subscriber.setAlert(new Alert(context.message, 'error'))
         if (_this.debug) {
           // eslint-disable-next-line no-console
           console.debug(`Subscription error: ${context.message}`, viewState, context)

src/router/index.js

@@ -96,7 +96,7 @@ router.beforeEach((to, from, next) => {
         next()
       })
       .catch(error => {
-        const alert = new Alert(error, null, 'error')
+        const alert = new Alert(error, 'error')
         return store.dispatch('setAlert', alert)
       })
   } else {

src/services/workflow.service.js

@@ -227,7 +227,7 @@ class WorkflowService {
         if (callback.init) {
           callback.init(store, errors)
           for (const error of errors) {
-            store.commit('SET_ALERT', new Alert(error[0], null, 'error'), { root: true })
+            store.commit('SET_ALERT', new Alert(error[0], 'error'), { root: true })
             // eslint-disable-next-line no-console
             console.warn(...error)
             subscription.handleViewState(ViewState.ERROR, error('Error presetting view state'))
@@ -340,7 +340,7 @@ class WorkflowService {
               for (const error of errors) {
                 store.commit(
                   'SET_ALERT',
-                  new Alert(error[0], null, 'error'),
+                  new Alert(error[0], 'error'),
                   { root: true }
                 )
                 // eslint-disable-next-line no-console

src/utils/aotf.js

@@ -47,8 +47,7 @@ import {
   mdiStop
 } from '@mdi/js'
 
-import AlertModel from '@/model/Alert.model'
-import TaskState from '@/model/TaskState.model'
+import Alert from '@/model/Alert.model'
 import store from '@/store/index'
 import { Tokens } from '@/utils/uid'
 
@@ -108,7 +107,7 @@ import { IntrospectionInputType } from 'graphql'
 
 /**
  * @typedef {Object} MutationResponse
- * @property {TaskState} status
+ * @property {string} status
  * @property {string} message
  */
 
@@ -280,11 +279,9 @@ export const alternateFields = {
  * Maps onto task status.
  */
 export const mutationStatus = Object.freeze({
-  [TaskState.WAITING]: TaskState.WAITING,
-  [TaskState.SUBMITTED]: TaskState.SUBMITTED,
-  [TaskState.SUCCEEDED]: TaskState.SUCCEEDED,
-  [TaskState.FAILED]: TaskState.FAILED,
-  [TaskState.SUBMIT_FAILED]: TaskState.SUBMIT_FAILED
+  FAILED: 'FAILED',
+  SUCCEEDED: 'SUCCEEDED',
+  WARN: 'WARN'
 })
 
 /**
@@ -831,6 +828,17 @@ export function getMutationArgsFromTokens (mutation, tokens) {
   return argspec
 }
 
+/**
+ * @param {string} message
+ * @returns {MutationResponse}
+ */
+function _mutateSuccess (message) {
+  return {
+    status: mutationStatus.SUCCEEDED,
+    message
+  }
+}
+
 /**
  * Handle an error in a called mutation.
  *
@@ -848,15 +856,14 @@ async function _mutateError (mutationName, message, response) {
   }
 
   // open a user alert
-  await store.dispatch('setAlert', new AlertModel(
-    `command failed: ${mutationName} - ${message}`,
-    null,
-    'error')
+  await store.dispatch(
+    'setAlert',
+    new Alert(`Command failed: ${mutationName} - ${message}`, 'error')
   )
 
   // format a response
   return {
-    status: TaskState.SUBMIT_FAILED,
+    status: mutationStatus.FAILED,
     message
   }
 }
@@ -869,7 +876,7 @@ async function _mutateError (mutationName, message, response) {
  * @param {ApolloClient} apolloClient
  * @param {string=} cylcID
  *
- * @returns {Promise<MutationResponse>} {status, msg}
+ * @returns {(MutationResponse | Promise<MutationResponse>)} {status, msg}
  */
 export async function mutate (mutation, variables, apolloClient, cylcID) {
   const mutationStr = constructMutation(mutation)
@@ -898,24 +905,18 @@ export async function mutate (mutation, variables, apolloClient, cylcID) {
   }
 
   try {
-    const result = response.data[mutation.name].result
+    const { result } = response.data[mutation.name]
     if (Array.isArray(result) && result.length === 2) {
       // regular [commandSucceeded, message] format
       if (result[0] === true) {
         // success
-        return {
-          status: TaskState.SUBMITTED,
-          message: result[1]
-        }
+        return _mutateSuccess(result[1])
       }
       // failure (Cylc error, e.g. could not find workflow <x>)
       return _mutateError(mutation.name, result[1], response)
     }
     // command in a different format (e.g. info command)
-    return {
-      status: TaskState.SUBMITTED,
-      message: result
-    }
+    return _mutateSuccess(result)
   } catch (error) {
     return _mutateError(mutation.name, 'invalid response', response)
   }