Merge pull request #347 from YunoHost/enh-warning-modal

add warning modal if last ws message is a warning

app/src/store/info.js

@@ -145,11 +145,15 @@ export default {
     'END_REQUEST' ({ commit }, { request, success, wait }) {
       let status = success ? 'success' : 'error'
       if (success && (request.warnings || request.errors)) {
+        const messages = request.messages
+        if (messages.length && messages[messages.length - 1].color === 'warning') {
+          request.showWarningMessage = true
+        }
         status = 'warning'
       }
 
       commit('UPDATE_REQUEST', { request, key: 'status', value: status })
-      if (wait) {
+      if (wait && !request.showWarningMessage) {
         // Remove the overlay after a short delay to allow an error to display withtout flickering.
         setTimeout(() => {
           commit('SET_WAITING', false)
@@ -214,6 +218,11 @@ export default {
         }
       }
       commit('SET_ERROR', null)
+    },
+
+    'DISMISS_WARNING' ({ commit, state }, request) {
+      commit('SET_WAITING', false)
+      delete request.showWarningMessage
     }
   },
 

app/src/views/_partials/ViewLockOverlay.vue

@@ -12,8 +12,7 @@
           <query-header :request="error || currentRequest" status-size="lg" />
         </b-card-header>
 
-        <component v-if="error" :is="'ErrorDisplay'" :request="error" />
-        <component v-else :is="'WaitingDisplay'" :request="currentRequest" />
+        <component :is="component.name" :request="component.request" />
       </b-card>
     </template>
   </b-overlay>
@@ -21,7 +20,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { ErrorDisplay, WaitingDisplay } from '@/views/_partials'
+import { ErrorDisplay, WarningDisplay, WaitingDisplay } from '@/views/_partials'
 import QueryHeader from '@/components/QueryHeader'
 
 export default {
@@ -29,16 +28,30 @@ export default {
 
   components: {
     ErrorDisplay,
+    WarningDisplay,
     WaitingDisplay,
     QueryHeader
   },
 
-  computed: mapGetters(['waiting', 'error', 'currentRequest'])
+  computed: {
+    ...mapGetters(['waiting', 'error', 'currentRequest']),
+
+    component () {
+      const { error, currentRequest: request } = this
+      if (error) {
+        return { name: 'ErrorDisplay', request: error }
+      } else if (request.showWarningMessage) {
+        return { name: 'WarningDisplay', request }
+      } else {
+        return { name: 'WaitingDisplay', request }
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-// Style for `ErrorDisplay` and `WaitingDisplay`'s cards
+// Style for `*Display`'s cards
 .card-overlay {
   position: sticky;
   top: 10vh;

app/src/views/_partials/WarningDisplay.vue

@@ -0,0 +1,43 @@
+<template>
+  <!-- This card receives style from `ViewLockOverlay` if used inside it -->
+  <div>
+    <b-card-body body-class="alert alert-warning" v-html="warning.text" />
+
+    <b-card-footer footer-bg-variant="warning">
+      <b-button
+        variant="light" size="sm"
+        v-t="'ok'" @click="dismiss"
+      />
+    </b-card-footer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WarningDisplay',
+
+  props: {
+    request: { type: Object, required: true }
+  },
+
+  computed: {
+    warning () {
+      const messages = this.request.messages
+      return messages[messages.length - 1]
+    }
+  },
+
+  methods: {
+    dismiss () {
+      this.$store.dispatch('DISMISS_WARNING', this.request)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .card-body {
+    padding-bottom: 1.5rem !important;
+    margin-bottom: 0;
+  }
+</style>

app/src/views/_partials/index.js

@@ -1,4 +1,5 @@
 export { default as ErrorDisplay } from './ErrorDisplay'
+export { default as WarningDisplay } from './WarningDisplay'
 export { default as WaitingDisplay } from './WaitingDisplay'
 
 export { default as HistoryConsole } from './HistoryConsole'