Merge branch 'admin-dashboard-fixes' into 'develop'

Fixes and minor improvements for admin dashboard

See merge request pleroma/pleroma-fe!1863

(cherry picked from commit d21e3d5de28afc1725e256370326f5c119d7a736)

f354cef0 fix no feedback and no dropdown close for actions in frontends tab,
c99390e8 make notices appear above admin dash modal
b6a4b620 add better indication that stuff is happening
ce109c38 add favicon setting and add compact layout for AttachmentSetting
bf49aeb7 changelog
d9ea160a account for if there's no primary frontend setup
75eea5f2 Merge remote-tracking branch 'origin/develop' into admin-dashboard-fixes
a190ef2c fix crash added in this MR
1037a3bb remove the WIP tip since pleroma!3862 is in stable
b707a14b make sure generated meta goes below FE-provided favicon so that BE's one

7 files changed, 126 insertions, 18 deletions

diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 0e58476f..9e9ec7aa 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -32,7 +32,7 @@
   top: calc(var(--navbar-height) + 0.5em);
   width: 100%;
   pointer-events: none;
-  z-index: var(--ZI_navbar_popovers);
+  z-index: var(--ZI_modals_popovers);
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index a2c27c2a..8163af59 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -4,6 +4,7 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import StringSetting from '../helpers/string_setting.vue'
 import GroupSetting from '../helpers/group_setting.vue'
 import Popover from 'src/components/popover/popover.vue'
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -22,12 +23,18 @@ const FrontendsTab = {
       defaultSource: 'admin'
     }
   },
+  data () {
+    return {
+      working: false
+    }
+  },
   components: {
     BooleanSetting,
     ChoiceSetting,
     IntegerSetting,
     StringSetting,
     GroupSetting,
+    PanelLoading,
     Popover
   },
   created () {
@@ -42,18 +49,56 @@ 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.working = true
       this.$store.state.api.backendInteractor.installFrontend({ payload })
-        .then((externalUser) => {
+        .finally(() => {
+          this.working = false
+        })
+        .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.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
index e3e04bc6..420d20b3 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -3,6 +3,22 @@
     padding: 0;
   }
 
+  .relative {
+    position: relative;
+  }
+
+  .overlay {
+    position: absolute;
+    background: var(--bg);
+    // fix buttons showing through
+    z-index: 2;
+    opacity: 0.9;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
   dd {
     text-overflow: ellipsis;
     word-wrap: nowrap;
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 25b08eb7..dd4c9790 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -10,7 +10,6 @@
         <li>
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
-          <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
           <ul class="setting-list">
             <li>
               <StringSetting path=":pleroma.:frontends.:primary.name" />
@@ -24,7 +23,8 @@
           </ul>
         </li>
       </ul>
-      <div class="setting-list">
+      <div class="setting-list relative">
+        <PanelLoading class="overlay" v-if="working"/>
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
         <ul class="cards-list">
           <li
@@ -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>
@@ -128,14 +134,19 @@
                   class="button button-default btn"
                   type="button"
                   :disabled="
-                    adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
-                      adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
+                    adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name &&
+                      adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]
                   "
                   @click="setDefault(frontend)"
                 >
                   {{
                     $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/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index a6be776b..a0e3351e 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -6,6 +6,10 @@
         <li>
           <StringSetting path=":pleroma.:instance.:name" />
         </li>
+        <!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
+        <li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
+          <AttachmentSetting compact path=":pleroma.:instance.:favicon" />
+        </li>
         <li>
           <StringSetting path=":pleroma.:instance.:email" />
         </li>
@@ -16,7 +20,7 @@
           <StringSetting path=":pleroma.:instance.:short_description" />
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail" />
+          <AttachmentSetting compact path=":pleroma.:instance.:instance_thumbnail" />
         </li>
         <li>
           <AttachmentSetting path=":pleroma.:instance.:background_image" />
diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
index ac5c6f86..c4c04b2b 100644
--- a/src/components/settings_modal/helpers/attachment_setting.js
+++ b/src/components/settings_modal/helpers/attachment_setting.js
@@ -7,6 +7,7 @@ export default {
   ...Setting,
   props: {
     ...Setting.props,
+    compact: Boolean,
     acceptTypes: {
       type: String,
       required: false,
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index bbc5172c..b50231f2 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -2,6 +2,7 @@
   <span
     v-if="matchesExpertLevel"
     class="AttachmentSetting"
+    :class="{ '-compact': compact }"
   >
     <label
       :for="path"
@@ -24,8 +25,8 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <div class="attachment-input">
-      <div>{{ $t('settings.url') }}</div>
-      <div class="controls">
+      <div class="controls control-field">
+        <label for="path">{{ $t('settings.url') }}</label>
         <input
           :id="path"
           class="string-input"
@@ -40,7 +41,7 @@
         />
         <ProfileSettingIndicator :is-profile="isProfileSetting" />
       </div>
-      <div>{{ $t('settings.preview') }}</div>
+      <div v-if="!compact">{{ $t('settings.preview') }}</div>
       <Attachment
         class="attachment"
         :compact="compact"
@@ -50,7 +51,7 @@
         @setMedia="onMedia"
         @naturalSizeLoad="onNaturalSizeLoad"
       />
-      <div class="controls">
+      <div class="controls control-upload">
         <MediaUpload
           ref="mediaUpload"
           class="media-upload-icon"
@@ -84,6 +85,35 @@
     width: 20em;
   }
 
+  &.-compact {
+    .attachment-input {
+      flex-direction: row;
+      align-items: flex-end;
+    }
+
+    .attachment {
+      flex: 0;
+      order: 0;
+      display: block;
+      min-width: 4em;
+      height: 4em;
+      align-self: center;
+      margin-bottom: 0;
+    }
+
+    .control-field {
+      order: 1;
+      min-width: 12em;
+      margin-left: 0.5em;
+    }
+
+    .control-upload {
+      order: 2;
+      min-width: 12em;
+      padding: 0 0.5em;
+    }
+  }
+
   .controls {
     margin-bottom: 0.5em;