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

Fixes and minor improvements for admin dashboard See merge request pleroma/pleroma-fe!1863
2023-11-27 13:26:01 +00:00 · 2023-11-27 13:26:01 +00:00 · d21e3d5de2
--- a/changelog.d/admin-dash-fixes.fix
+++ b/changelog.d/admin-dash-fixes.fix
@ -0,0 +1 @@
+fix admin dashboard not having any feedback on frontend installation
--- a/index.html
+++ b/index.html
@ -3,8 +3,8 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-    <!--server-generated-meta-->
    <link rel="icon" type="image/png" href="/favicon.png">
+    <!--server-generated-meta-->
  </head>
  <body class="hidden">
    <noscript>To use Pleroma, please enable JavaScript.</noscript>
--- 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;
--- 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 } })
--- 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;
--- 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>
--- 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" />
--- 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,
--- 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;

--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -914,8 +914,9 @@
      "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
      "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": {
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@ -1266,7 +1266,6 @@
      "wip_notice": "请注意，此部分是一个WIP，缺乏某些功能，因为前端管理的后台实现并不完整。",
      "default_frontend": "默认前端",
      "default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择个人的前端。如果你不使用 PleromaFE，你很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。",
-      "default_frontend_tip2": "WIP: 由于 Pleroma 后端没有正确列出所有已安装的前端，你必须手动输入名称和引用。下面的列表提供了填写这些值的快捷方式。",
      "available_frontends": "可供安装"
    },
    "temp_overrides": {
--- 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 {
				`@ -0,0 +1 @@`
				`fix admin dashboard not having any feedback on frontend installation`