Make report ID in moderation log a link to the respective report

src/router/index.js

@@ -199,5 +199,17 @@ export const asyncRouterMap = [
     ],
     hidden: true
   },
+  {
+    path: '/reports/:id',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: 'ReportsShow',
+        component: () => import('@/views/reports/show')
+      }
+    ],
+    hidden: true
+  },
   { path: '*', redirect: '/404', hidden: true }
 ]

src/views/moderation_log/LogEntryMessage.vue

@@ -8,7 +8,16 @@
         @{{ actor.nickname }}
       </span>
     </router-link>
-    <span>{{ logEntryMessage }}</span>
+    <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>
 
@@ -24,11 +33,21 @@ export default {
     message: {
       type: String,
       required: true
+    },
+    subject: {
+      type: [Object, Array],
+      required: false,
+      default: function() {
+        return {}
+      }
     }
   },
   computed: {
     logEntryMessage() {
-      return this.message.split(this.actor.nickname)[1]
+      return this.actor.nickname ? this.message.split(this.actor.nickname)[1] : this.message
+    },
+    logEntryMessageWithoutId() {
+      return this.logEntryMessage.split(`#${this.subject.id}`)
     }
   },
   methods: {

src/views/moderation_log/index.vue

@@ -43,7 +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"/>
+        <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>
       </el-timeline-item>
     </el-timeline>