SystemUpdate: rework to display pre/post upgrade notifications as modals

app/src/i18n/locales/en.json

@@ -105,7 +105,25 @@
         "userdoc": "Official User documentation",
         "website": "Website"
       },
-      "potential_alternative_to": "Potential alternative to:"
+      "potential_alternative_to": "Potential alternative to:",
+      "upgrade": {
+        "confirm": {
+          "apps": "Apps that will be upgraded",
+          "title": "Confirm app upgrades"
+        },
+        "continue": "Continue to next app",
+        "notifs": {
+          "pre": {
+            "title": "Be warned!",
+            "alert": "You should check those notifications before upgrading, there might be important stuff to know."
+          },
+          "post": {
+            "title": "Post upgrade information for '{name}'",
+            "alert": "It seems that the upgrade went well!\n Here is some notifications that the packager considers important to know about this upgrade.\nYou can read it again in the app info page."
+          }
+        },
+        "stop": "Cancel next app upgrades"
+      }
     },
     "app_choose_category": "Choose a category",
     "app_config_panel": "Config panel",
@@ -167,9 +185,7 @@
     "confirm_service_start": "Are you sure you want to start {name}?",
     "confirm_service_stop": "Are you sure you want to stop {name}?",
     "confirm_uninstall": "Are you sure you want to uninstall {name}?",
-    "confirm_update_apps": "Are you sure you want to update all applications?",
     "confirm_update_system": "Are you sure you want to update all system packages?",
-    "confirm_update_specific_app": "Are you sure you want to update {app}?",
     "confirm_upnp_enable": "Are you sure you want to enable UPnP?",
     "confirm_upnp_disable": "Are you sure you want to disable UPnP?",
     "confirm_reboot_action_reboot": "Are you sure you want to reboot your server?",

app/src/views/update/SystemUpdate.vue

@@ -4,14 +4,14 @@
     skeleton="card-list-skeleton"
   >
     <!-- MIGRATIONS WARN -->
-    <b-alert variant="warning" :show="pendingMigrations">
+    <yuno-alert v-if="pendingMigrations" variant="warning" alert>
-      <icon iname="exclamation-triangle" /> <span v-html="$t('pending_migrations')" />
+      <span v-html="$t('pending_migrations')" />
-    </b-alert>
+    </yuno-alert>
 
     <!-- MAJOR YUNOHOST UPGRADE WARN -->
-    <b-alert variant="warning" :show="importantYunohostUpgrade">
+    <yuno-alert v-if="importantYunohostUpgrade" variant="warning" alert>
-      <icon iname="exclamation-triangle" /> <span v-html="$t('important_yunohost_upgrade')" />
+      <span v-html="$t('important_yunohost_upgrade')" />
-    </b-alert>
+    </yuno-alert>
 
     <!-- SYSTEM UPGRADE -->
     <card :title="$t('system')" icon="server" no-body>
@@ -31,7 +31,7 @@
       <template #buttons v-if="system">
         <b-button
           variant="success" v-t="'system_upgrade_all_packages_btn'"
-          @click="performUpgrade({ type: 'system' })"
+          @click="performSystemUpgrade()"
         />
       </template>
     </card>
@@ -50,7 +50,7 @@
 
           <b-button
             variant="success" size="sm" v-t="'system_upgrade_btn'"
-            @click="performUpgrade({ type: 'specific_app', id })"
+            @click="confirmAppsUpgrade(id)"
           />
         </b-list-group-item>
       </b-list-group>
@@ -62,19 +62,67 @@
       <template #buttons v-if="apps">
         <b-button
           variant="success" v-t="'system_upgrade_all_applications_btn'"
-          @click="performUpgrade({ type: 'apps' })"
+          @click="confirmAppsUpgrade()"
         />
       </template>
     </card>
+
+    <b-modal
+      id="apps-pre-upgrade"
+      :title="$t('app.upgrade.confirm.title')"
+      header-bg-variant="warning"
+      :header-class="theme ? 'text-white' : 'text-black'"
+      :ok-title="$t('system_upgrade_btn')" ok-variant="success"
+      :cancel-title="$t('cancel')"
+      @ok="performAppsUpgrade(preUpgrade.apps.map((app) => app.id))"
+    >
+      <h3>
+        {{ $t('app.upgrade.confirm.apps') }}
+      </h3>
+      <ul>
+        <li v-for="{ name, id } in preUpgrade.apps" :key="id">
+          {{ name }} ({{ id }})
+        </li>
+      </ul>
+
+      <div v-if="preUpgrade.hasNotifs" class="mt-4">
+        <h3>
+          {{ $t('app.upgrade.notifs.pre.title') }}
+        </h3>
+
+        <yuno-alert variant="warning">
+          {{ $t('app.upgrade.notifs.pre.alert' ) }}
+        </yuno-alert>
+
+        <div class="card-collapse-wrapper">
+          <card-collapse
+            v-for="{ id, name, notif } in preUpgrade.apps" :key="`${id}-notifs`"
+            :title="name" :id="`${id}-notifs`"
+            visible flush
+          >
+            <b-card-body>
+              <vue-showdown :markdown="notif" flavor="github" :options="{ headerLevelStart: 6 }" />
+            </b-card-body>
+          </card-collapse>
+        </div>
+      </div>
+    </b-modal>
   </view-base>
 </template>
 
 <script>
 import api from '@/api'
+import { mapGetters } from 'vuex'
+
+import CardCollapse from '@/components/CardCollapse'
 
 export default {
   name: 'SystemUpdate',
 
+  components: {
+    CardCollapse
+  },
+
   data () {
     return {
       queries: [
@@ -84,8 +132,16 @@ export default {
       system: undefined,
       apps: undefined,
       importantYunohostUpgrade: undefined,
-      pendingMigrations: undefined
+      pendingMigrations: undefined,
+      preUpgrade: {
+        apps: [],
+        notifs: []
       }
+    }
+  },
+
+  computed: {
+    ...mapGetters(['theme'])
   },
 
   methods: {
@@ -98,25 +154,83 @@ export default {
       this.pendingMigrations = pending_migrations.length !== 0
     },
 
-    async performUpgrade ({ type, id = null }) {
+    formatAppNotifs (notifs) {
-      const confirmMsg = this.$i18n.t('confirm_update_' + type, id ? { app: id } : {})
+      return Object.keys(notifs).reduce((acc, key) => {
-      const confirmed = await this.$askConfirmation(confirmMsg)
+        return acc + '\n\n' + notifs[key]
+      }, '')
+    },
+
+    async confirmAppsUpgrade (id = null) {
+      const appList = id ? [this.apps.find((app) => app.id === id)] : this.apps
+      const apps = appList.map((app) => ({
+        id: app.id,
+        name: app.name,
+        notif: this.formatAppNotifs(app.notifications.pre_upgrade)
+      }))
+      this.preUpgrade = { apps, hasNotifs: apps.some((app) => app.notif) }
+      this.$bvModal.show('apps-pre-upgrade')
+    },
+
+    async performAppsUpgrade (ids) {
+      const apps = ids.map((id) => this.apps.find((app) => app.id === id))
+      const lastAppId = apps[apps.length - 1].id
+
+      for (const app of apps) {
+        const postMessage = this.formatAppNotifs(app.notifications.post_upgrade)
+        const continue_ = await api.put(
+          `apps/${app.id}/upgrade`, {}, { key: 'upgrade.app', app: app.name }
+        ).then(() => {
+          const isLast = app.id === lastAppId
+          this.apps = this.apps.filter((a) => app.id !== a.id)
+
+          if (postMessage) {
+            const message = this.$i18n.t('app.upgrade.notifs.post.success') + '\n\n' + postMessage
+            return this.$askMdConfirmation(message, {
+              title: this.$i18n.t('app.upgrade.notifs.post.title', { name: app.name }),
+              okTitle: this.$i18n.t(isLast ? 'ok' : 'app.upgrade.continue'),
+              cancelTitle: this.$i18n.t('app.upgrade.stop')
+            }, isLast)
+          } else {
+            return Promise.resolve(true)
+          }
+        })
+        if (!continue_) break
+      }
+
+      if (!this.apps.length) {
+        this.apps = null
+      }
+    },
+
+    async performSystemUpgrade () {
+      const confirmed = await this.$askConfirmation(this.$i18n.t('confirm_update_system'))
       if (!confirmed) return
 
-      const uri = id !== null ? `apps/${id}/upgrade` : 'upgrade/' + type
+      api.put('upgrade/system', {}, { key: 'upgrade.system' }).then(() => {
-      api.put(uri, {}, { key: 'upgrade.' + (id ? 'app' : type), app: id }).then(() => {
-        if (id !== null) {
-          this.apps = this.apps.filter(app => id !== app.id)
-        } else if (type === 'apps') {
-          this.apps = null
-        } else {
         if (this.system.some(({ name }) => name.includes('yunohost'))) {
           this.$store.dispatch('TRY_TO_RECONNECT', { attemps: 1, origin: 'upgrade_system', initialDelay: 2000 })
         }
         this.system = null
-        }
       })
     }
   }
 }
 </script>
+
+<style scoped lang="scss">
+.card-collapse-wrapper {
+  border: $card-border-width solid $card-border-color;
+  border-radius: $card-border-radius;
+
+  .card {
+    &:first-child {
+      border-top: 0;
+      border-top-right-radius: $card-border-radius;
+      border-top-left-radius: $card-border-radius;
+    }
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
+</style>