AppInfo: properly display config panel init error without blocking the app info page

app/src/components/globals/YunoAlert.vue

@@ -28,6 +28,7 @@ export default {
 
   computed: {
     _icon () {
+      if (this.icon) return this.icon
       return DEFAULT_STATUS_ICON[this.variant]
     }
   }

app/src/i18n/locales/en.json

@@ -75,7 +75,8 @@
       },
       "info": {
         "forum": "Search or ask the forum!",
-        "problem": "A problem with this app?"
+        "problem": "A problem with this app?",
+        "config_panel_error": "An error prevents the configuration panel from being displayed:"
       },
       "install": {
         "license": "License: {license}",

app/src/views/app/AppInfo.vue

@@ -1,5 +1,8 @@
 <template>
-  <view-base :queries="queries" @queries-response="onQueriesResponse" ref="view">
+  <view-base
+    :queries="queries" @queries-response="onQueriesResponse" :loading="loading"
+    ref="view"
+  >
     <yuno-alert v-if="app && app.doc && app.doc.notifications && app.doc.notifications.postInstall.length" variant="info" class="my-4">
       <div class="d-md-flex align-items-center mb-3">
         <h2 v-t="'app.doc.notifications.post_install'" class="md-m-0" />
@@ -89,6 +92,14 @@
       <vue-showdown :markdown="app.description" flavor="github" />
     </section>
 
+    <yuno-alert
+      v-if="config_panel_err"
+      class="mb-4" variant="danger" icon="bug"
+    >
+      <p>{{ $t('app.info.config_panel_error') }}</p>
+      <p>{{ config_panel_err }}</p>
+    </yuno-alert>
+
     <!-- BASIC INFOS -->
     <config-panels v-bind="config" @submit="onConfigSubmit">
       <!-- OPERATIONS TAB -->
@@ -289,11 +300,12 @@ export default {
       queries: [
         ['GET', `apps/${this.id}?full`],
         ['GET', { uri: 'users/permissions?full', storeKey: 'permissions' }],
-        ['GET', { uri: 'domains' }],
-        ['GET', `apps/${this.id}/config?full`]
+        ['GET', { uri: 'domains' }]
       ],
+      loading: true,
       app: undefined,
       form: undefined,
+      config_panel_err: null,
       config: {
         panels: [
           // Fake integration of operations in config panels
@@ -346,14 +358,8 @@ export default {
         }
         return linksIcons[linkType]
     },
-    onQueriesResponse (app, _, __, config) {
-      if (app.supports_config_panel) {
-        const config_ = formatYunoHostConfigPanels(config)
-        // reinject 'operations' fake config tab
-        config_.panels.unshift(this.config.panels[0])
-        this.config = config_
-      }
 
+    async onQueriesResponse (app) {
       const form = { labels: [] }
 
       const mainPermission = app.permissions[this.id + '.main']
@@ -430,6 +436,18 @@ export default {
       if (!Object.values(this.app.doc.notifications).some((notif) => notif.length)) {
         this.app.doc.notifications = null
       }
+
+      if (app.supports_config_panel) {
+        await api.get(`apps/${this.id}/config?full`).then((config) => {
+          const config_ = formatYunoHostConfigPanels(config)
+          // reinject 'operations' fake config tab
+          config_.panels.unshift(this.config.panels[0])
+          this.config = config_
+        }).catch((err) => {
+          this.config_panel_err = err.message
+        })
+      }
+      this.loading = false
     },
 
     async onConfigSubmit ({ id, form, action, name }) {
@@ -442,7 +460,8 @@ export default {
         isEmptyValue(args) ? {} : { args: objectToParams(args) },
         { key: `apps.${action ? 'action' : 'update'}_config`, id, name: this.id }
       ).then(() => {
-        this.$refs.view.fetchQueries({ triggerLoading: true })
+        this.loading = true
+        this.$refs.view.fetchQueries()
       }).catch(err => {
         if (err.name !== 'APIBadRequestError') throw err
         const panel = this.config.panels.find(panel => panel.id === id)