Merge branch 'feature/include-usernames-in-reports-modlogs' into 'develop'

Include usernames in all relevant reports actions in Moderation Log

Closes #145

See merge request pleroma/admin-fe!185

CHANGELOG.md

@@ -14,12 +14,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Add Unconfimed filter for Users table
 - Filter users by actor type: Person, Bot or Application
 - Add ability to configure Media Preview Proxy, User Backup and Websocket based federation settings
-
+- Mobile and Tablet UI for Single Report show page
 ### Changed
 
 - Hide Tag actions on Users tab if MRF TagPolicy is disabled. Add ability to enable TagPolicy from Moderation menu
 - Move `:restrict_unauthenticated` settings from Authentication tab to Instance tab
 - Replace regular inputs with textareas for setting welcome messages in the Settings section
+- Update rendering Moderation Log Messages so that all usernames are links to the pages of the corresponding users in Admin-FE
 
 ### Fixed
 

src/store/modules/reports.js

@@ -12,6 +12,7 @@ const reports = {
     currentPage: 1,
     fetchedReports: [],
     loading: true,
+    loadingSingleReport: true,
     openReportsCount: 0,
     pageSize: 50,
     singleReport: {},
@@ -42,6 +43,9 @@ const reports = {
     },
     SET_SINGLE_REPORT: (state, report) => {
       state.singleReport = report
+    },
+    SET_SINGLE_REPORT_LOADING: (state, status) => {
+      state.loadingSingleReport = status
     }
   },
   actions: {
@@ -162,11 +166,11 @@ const reports = {
       commit('SET_LOADING', false)
     },
     async FetchSingleReport({ commit, getters }, id) {
-      commit('SET_LOADING', true)
+      commit('SET_SINGLE_REPORT_LOADING', true)
       const { data } = await fetchSingleReport(id, getters.authHost, getters.token)
 
       commit('SET_SINGLE_REPORT', data)
-      commit('SET_LOADING', false)
+      commit('SET_SINGLE_REPORT_LOADING', false)
     },
     async FetchOpenReportsCount({ commit, getters, state }) {
       commit('SET_LOADING', true)

src/views/moderation_log/LogEntryMessage.vue

@@ -1,65 +0,0 @@
-<template>
-  <span>
-    <router-link
-      v-if="propertyExists(actor, 'id')"
-      :to="{ name: 'UsersShow', params: { id: actor.id }}"
-      class="router-link">
-      <span v-if="propertyExists(actor, 'nickname')" style="font-weight: 600">
-        @{{ actor.nickname }}
-      </span>
-    </router-link>
-    <span v-if="subject.type === 'report' && propertyExists(subject, 'id')">
-      {{ logEntryMessageWithoutId[0] }}
-      <router-link
-        :to="{ name: 'ReportsShow', params: { id: subject.id }}"
-        class="router-link">
-        <span style="font-weight: 600">#{{ subject.id }}</span>
-      </router-link>
-      {{ logEntryMessageWithoutId[1] }}
-    </span>
-    <span v-else>{{ logEntryMessage }}</span>
-  </span>
-</template>
-
-<script>
-
-export default {
-  name: 'LogEntryMessage',
-  props: {
-    actor: {
-      type: Object,
-      required: true
-    },
-    message: {
-      type: String,
-      required: true
-    },
-    subject: {
-      type: [Object, Array],
-      required: false,
-      default: function() {
-        return {}
-      }
-    }
-  },
-  computed: {
-    logEntryMessage() {
-      return this.actor.nickname ? this.message.split(this.actor.nickname)[1] : this.message
-    },
-    logEntryMessageWithoutId() {
-      return this.logEntryMessage.split(`#${this.subject.id}`)
-    }
-  },
-  methods: {
-    propertyExists(account, property) {
-      return account[property]
-    }
-  }
-}
-</script>
-
-<style rel='stylesheet/scss' lang='scss'>
- .router-link {
-    text-decoration: none;
-  }
-</style>

src/views/moderation_log/ReportLink.vue

@@ -0,0 +1,20 @@
+<template>
+  <router-link
+    :to="{ name: 'ReportsShow', params: { id }}"
+    class="router-link">
+    <span style="font-weight: 600">#{{ id }}</span>
+  </router-link>
+</template>
+
+<script>
+
+export default {
+  name: 'UserLink',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

src/views/moderation_log/UserLink.vue

@@ -0,0 +1,20 @@
+<template>
+  <router-link
+    :to="{ name: 'UsersShow', params: { id: actor }}"
+    class="router-link">
+    <span style="font-weight: 600">@{{ actor }}</span>
+  </router-link>
+</template>
+
+<script>
+
+export default {
+  name: 'UserLink',
+  props: {
+    actor: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

src/views/moderation_log/index.vue

@@ -43,8 +43,7 @@
         v-for="(logEntry, index) in log"
         :key="index"
         :timestamp="normalizeTimestamp(logEntry.time)">
-        <log-entry-message v-if="propertyExists(logEntry.data.actor, 'nickname')" :actor="logEntry.data.actor" :message="logEntry.message" :subject="logEntry.data.subject"/>
-        <span v-else>{{ logEntry.message }}</span>
+        <component :is="processedMessage(logEntry)"/>
       </el-timeline-item>
     </el-timeline>
     <div class="pagination">
@@ -65,10 +64,14 @@ import moment from 'moment'
 import _ from 'lodash'
 import debounce from 'lodash.debounce'
 import RebootButton from '@/components/RebootButton'
-import LogEntryMessage from './LogEntryMessage'
+import ReportLink from './ReportLink'
+import UserLink from './UserLink'
+import Vue from 'vue'
+Vue.component('user-link', UserLink)
+Vue.component('report-link', ReportLink)
 
 export default {
-  components: { RebootButton, LogEntryMessage },
+  components: { RebootButton },
   data() {
     return {
       dateRange: '',
@@ -130,6 +133,24 @@ export default {
     normalizeTimestamp(timestamp) {
       return moment(timestamp * 1000).format('YYYY-MM-DD HH:mm')
     },
+    processedMessage(logEntry) {
+      const html = [...logEntry.message.matchAll(/\@(?<nickname>([\w-]+))/g)].map(res => res.groups.nickname)
+        .reduce((acc, nickname) => {
+          return acc.replace(`@${nickname}`, `<user-link actor="${nickname}"/>`)
+        }, logEntry.message)
+      if (this.propertyExists(logEntry.data, 'subject') && logEntry.data.subject.type === 'report') {
+        const updatedHtml = [...html.matchAll(/\#(?<reportId>([\w]+))/g)].map(res => res.groups.reportId)
+          .reduce((acc, id) => {
+            return acc.replace(`#${id}`, `<report-link id="${id}"/>`)
+          }, html)
+        return {
+          template: '<div>' + updatedHtml + '</div>'
+        }
+      }
+      return {
+        template: '<div>' + html + '</div>'
+      }
+    },
     propertyExists(account, property) {
       return account[property]
     }
@@ -173,6 +194,9 @@ h1 {
   margin: 0;
   width: 145px;
 }
+.router-link {
+  text-decoration: none;
+}
 .search-container {
   text-align: right;
 }

src/views/reports/components/ModerateUserDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dropdown :hide-on-click="false" trigger="click">
-    <el-button :disabled="!account.id" :size="renderedFrom === 'showPage' ? 'medium' : 'small'" plain icon="el-icon-files">
+    <el-button :disabled="!account.id" :size="renderedFrom === 'showPage' && !isMobile ? 'medium' : 'small'" plain icon="el-icon-files">
       {{ $t('reports.moderateUser') }}
       <i class="el-icon-arrow-down el-icon--right"/>
     </el-button>
@@ -87,6 +87,9 @@ export default {
     }
   },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     tagPolicyEnabled() {
       return this.$store.state.users.mrfPolicies.includes('Pleroma.Web.ActivityPub.MRF.TagPolicy')
     },

src/views/reports/components/ReportContent.vue

@@ -179,4 +179,15 @@ export default {
   .router-link {
     text-decoration: none;
   }
+  @media only screen and (max-width:480px) {
+    .divider {
+      margin: 10px 0;
+    }
+    .el-card__body {
+      padding: 13px;
+    }
+    .report-account {
+      flex-direction: column;
+    }
+  }
 </style>

src/views/reports/show.vue

@@ -4,7 +4,11 @@
       <div class="report-page-header">
         <div v-if="propertyExists(report.account, 'nickname')" class="avatar-name-container">
           <h1 >{{ $t('reports.reportOn') }}</h1>
-          <el-avatar v-if="propertyExists(report.account, 'avatar')" :src="report.account.avatar" size="large" class="report-page-avatar"/>
+          <el-avatar
+            v-if="propertyExists(report.account, 'avatar')"
+            :src="report.account.avatar"
+            :size="isMobile ? 'small' : 'large'"
+            class="report-page-avatar"/>
           <h1>{{ report.account.nickname }}</h1>
           <a v-if="propertyExists(report.account, 'url')" :href="report.account.url" target="_blank">
             <i :title="$t('userProfile.openAccountInInstance')" class="el-icon-top-right"/>
@@ -12,10 +16,16 @@
         </div>
         <h1 v-else>{{ $t('reports.report') }}</h1>
       </div>
-      <div>
+      <div class="report-actions-container">
         <el-tag :type="getStateType(report.state)" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
         <el-dropdown trigger="click">
-          <el-button plain icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+          <el-button
+            :size="isMobile ? 'small' : 'medium'"
+            plain
+            icon="el-icon-edit"
+            class="report-actions-button">
+            {{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/>
+          </el-button>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
             <el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
@@ -31,9 +41,11 @@
       </div>
     </header>
     <h4 v-if="propertyExists(report.account, 'id')" class="id">{{ $t('reports.id') }}: {{ report.id }}</h4>
-    <el-card class="report">
-      <report-content :report="report"/>
-    </el-card>
+    <div class="report-card-container">
+      <el-card class="report">
+        <report-content :report="report"/>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -46,8 +58,11 @@ export default {
   name: 'ReportsShow',
   components: { ModerateUserDropdown, RebootButton, ReportContent },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     loading() {
-      return this.$store.state.reports.loading
+      return this.$store.state.reports.loadingSingleReport
     },
     report() {
       return this.$store.state.reports.singleReport
@@ -94,11 +109,19 @@ export default {
     margin: 0 15px 22px 15px;
   }
   .report {
-    width: 1000px;
+    max-width: 1000px;
     margin: auto;
   }
   .report-actions-button {
-    margin: 3px 0 6px;
+    margin: 0 5px;
+  }
+  .report-actions-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .report-card-container {
+    margin: auto;
+    padding: 0 15px;
   }
   .report-page-header {
     display: flex;
@@ -139,4 +162,38 @@ export default {
     font-size: 14px;
   }
 }
+@media only screen and (max-width:801px) {
+  .report-show-page-container {
+    .id {
+      margin: 7px 15px 15px 15px;
+    }
+    .report-actions-button {
+      margin: 0 3px 6px;
+    }
+    .report-page-header-container {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    .report-page-header {
+      h1 {
+        font-size: 24px;
+      }
+      .avatar-name-container {
+        .el-icon-top-right {
+          font-size: 24px;
+        }
+      }
+      .report-page-avatar {
+        margin: 0 5px 0 9px;
+      }
+    }
+  }
+}
+@media only screen and (max-width:480px) {
+  .report-tag {
+    height: 32px;
+    line-height: 32px;
+    font-size: 14px;
+  }
+}
 </style>