replace alert box with a snackbar

changed test for non-existance for on of non-visibility

remove toggleFunction, plumber setAlert(null) if alert closed

Author: wxtim

src/components/core/Alert.vue

@@ -16,23 +16,27 @@ 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="snackbar"
+    :color="getColor(alert.color)"
+    :top="true"
+    timeout="-1"
+    :icon="alert.icon"
+  >
+
+    <template v-slot:action="{ attrs }">
+      <v-btn
+        color="black"
+        text
+        v-bind="attrs"
+        @click="closeAlert"
+      >
+      <v-icon>{{ svgPaths.close }}</v-icon>
+      </v-btn>
+    </template>
+    {{ alert.text }}
+  </v-snackbar>
 </template>
 
 <script>
@@ -52,7 +56,8 @@ export default {
       ]),
       svgPaths: {
         close: mdiClose
-      }
+      },
+      snackbar: alert
     }
   },
 
@@ -71,9 +76,9 @@ export default {
      * @param {Function} toggleFunction - the original Vuetify toggle function
      * @see https://vuetifyjs.com/en/api/v-alert/
      */
-    closeAlert (toggleFunction) {
+    closeAlert () {
+      this.snackbar = false
       this.setAlert(null)
-      toggleFunction()
     }
   }
 }

tests/e2e/specs/alert.cy.js

@@ -31,15 +31,15 @@ describe('Alert component', () => {
       store.dispatch('setAlert', new Alert(errorMessage, null, 'error'))
     })
     cy
-      .get('.v-alert')
+      .get('.v-snack')
       .should('contain', errorMessage)
   })
   it('Uses the right color for success', () => {
     cy.visit('/#/')
     cy.get('.c-header').should('exist')
     getStore().then(store => {
       cy.wrap(store).invoke('commit', 'SET_ALERT', new Alert('An alert', null, 'success'))
-      cy.get('.v-alert').then($alertElements => {
+      cy.get('.v-snack').then($alertElements => {
         const backgroundColor = window.getComputedStyle($alertElements[0])['background-color']
         expect(backgroundColor).to.not.equal(COLOR_BLACK)
         expect(backgroundColor).to.not.equal(COLOR_WHITE)
@@ -52,7 +52,7 @@ describe('Alert component', () => {
     cy.get('.c-header').should('exist')
     getStore().then(store => {
       cy.wrap(store).invoke('commit', 'SET_ALERT', new Alert('An alert', null, 'warning'))
-      cy.get('.v-alert').then($alertElements => {
+      cy.get('.v-snack').then($alertElements => {
         const backgroundColor = window.getComputedStyle($alertElements[0])['background-color']
         expect(backgroundColor).to.not.equal(COLOR_BLACK)
         expect(backgroundColor).to.not.equal(COLOR_WHITE)
@@ -65,7 +65,7 @@ describe('Alert component', () => {
     cy.get('.c-header').should('exist')
     getStore().then(store => {
       cy.wrap(store).invoke('commit', 'SET_ALERT', new Alert('An alert', null, 'error'))
-      cy.get('.v-alert').then($alertElements => {
+      cy.get('.v-snack').then($alertElements => {
         const backgroundColor = window.getComputedStyle($alertElements[0])['background-color']
         expect(backgroundColor).to.not.equal(COLOR_BLACK)
         expect(backgroundColor).to.not.equal(COLOR_WHITE)
@@ -81,14 +81,14 @@ describe('Alert component', () => {
       store.dispatch('setAlert', new Alert(errorMessage, null, 'error'))
     })
     cy
-      .get('.v-alert')
+      .get('.v-snack')
       .should('contain', errorMessage)
     cy
-      .get('.v-alert')
+      .get('.v-snack')
       .get('button')
       .click({ force: true, multiple: true })
     cy
-      .get('.v-alert')
+      .get('.v-snack--active')
       .should('not.exist')
     getStore().then(store => {
       expect(store.state.alert).to.equal(null)

tests/e2e/specs/layout.cy.js

@@ -20,8 +20,8 @@ describe('Default layout', () => {
     // visit any page first, so that we create the window.app reference
     cy.visit('/#/workspace/one')
     cy
-      .get('.v-alert')
-      .should('not.exist')
+      .get('.v-snack__wrapper')
+      .should('not.visible')
     cy.window().its('app.$workflowService').then(service => {
       // mock service so that it returns an error
       cy.stub(service, 'subscribe', () => {
@@ -33,7 +33,7 @@ describe('Default layout', () => {
         .contains('Dashboard')
         .click({ force: true })
       cy
-        .get('.v-alert')
+        .get('.v-snack__wrapper')
         .should('be.visible')
     })
   })