fix no feedback and no dropdown close for actions in frontends tab,

better default suggest

4 files changed, 58 insertions, 9 deletions

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index a2c27c2a..57825a46 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -42,18 +42,52 @@ const FrontendsTab = {
     ...SharedComputedObject()
   },
   methods: {
+    canInstall (frontend) {
+      const fe = this.frontends.find(f => f.name === frontend.name)
+      if (!fe) return false
+      return fe.refs.includes(frontend.ref)
+    },
+    getSuggestedRef (frontend) {
+      const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
+      if (defaultFe.name === frontend.name && this.canInstall(defaultFe)) {
+        return defaultFe.ref
+      } else {
+        return frontend.refs[0]
+      }
+    },
     update (frontend, suggestRef) {
-      const ref = suggestRef || frontend.refs[0]
+      const ref = suggestRef || this.getSuggestedRef(frontend)
       const { name } = frontend
       const payload = { name, ref }
 
       this.$store.state.api.backendInteractor.installFrontend({ payload })
-        .then((externalUser) => {
+        .then(async (response) => {
           this.$store.dispatch('loadFrontendsStuff')
+          if (response.error) {
+            const reason = await response.error.json()
+            this.$store.dispatch('pushGlobalNotice', {
+              level: 'error',
+              messageKey: 'admin_dash.frontend.failure_installing_frontend',
+              messageArgs: {
+                version: name + '/' + ref,
+                reason: reason.error
+              },
+              timeout: 5000
+            })
+          } else {
+            this.$store.dispatch('pushGlobalNotice', {
+              level: 'success',
+              messageKey: 'admin_dash.frontend.success_installing_frontend',
+              messageArgs: {
+                version: name + '/' + ref
+              },
+              timeout: 2000
+            })
+          }
         })
     },
     setDefault (frontend, suggestRef) {
-      const ref = suggestRef || frontend.refs[0]
+      const ref = suggestRef || this.getSuggestedRef(frontend)
       const { name } = frontend
 
       this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 13b8fa6b..3b8d0eab 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -86,6 +86,11 @@
                       ? $t('admin_dash.frontend.reinstall')
                       : $t('admin_dash.frontend.install')
                   }}
+                  <code>
+                    {{
+                      getSuggestedRef(frontend)
+                    }}
+                  </code>
                 </button>
                 <Popover
                   v-if="frontend.refs.length > 1"
@@ -93,13 +98,14 @@
                   class="button-dropdown"
                   placement="bottom"
                 >
-                  <template #content>
+                  <template #content="{close}">
                     <div class="dropdown-menu">
                       <button
                         v-for="ref in frontend.refs"
                         :key="ref"
                         class="button-default dropdown-item"
-                        @click="update(frontend, ref)"
+                        @click.prevent="update(frontend, ref)"
+                        @click="close"
                       >
                         <i18n-t keypath="admin_dash.frontend.install_version">
                           <template #version>
@@ -136,6 +142,11 @@
                   {{
                     $t('admin_dash.frontend.set_default')
                   }}
+                  <code>
+                    {{
+                      getSuggestedRef(frontend)
+                    }}
+                  </code>
                 </button>
                 {{ ' ' }}
                 <Popover
@@ -144,13 +155,14 @@
                   class="button-dropdown"
                   placement="bottom"
                 >
-                  <template #content>
+                  <template #content="{close}">
                     <div class="dropdown-menu">
                       <button
-                        v-for="ref in frontend.refs.slice(1)"
+                        v-for="ref in frontend.installedRefs || frontend.refs"
                         :key="ref"
                         class="button-default dropdown-item"
-                        @click="setDefault(frontend, ref)"
+                        @click.prevent="setDefault(frontend, ref)"
+                        @click="close"
                       >
                         <i18n-t keypath="admin_dash.frontend.set_default_version">
                           <template #version>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1658a25d..7955e275 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -914,7 +914,9 @@
       "default_frontend": "Default front-end",
       "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
       "default_frontend_tip2": "WIP: Since Pleroma backend doesn't properly list all installed frontends you'll have to enter name and reference manually. List below provides shortcuts to fill the values.",
-      "available_frontends": "Available for install"
+      "available_frontends": "Available for install",
+      "failure_installing_frontend": "Failed to install frontend {version}: {reason}",
+      "success_installing_frontend": "Frontend {version} successfully installed"
     },
     "temp_overrides": {
       ":pleroma": {
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index cad9c0ca..3df3647f 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -26,6 +26,7 @@ const adminSettingsStorage = {
     },
     setAvailableFrontends (state, { frontends }) {
       state.frontends = frontends.map(f => {
+        f.installedRefs = f.installed_refs
         if (f.name === 'pleroma-fe') {
           f.refs = ['master', 'develop']
         } else {