Revert including links in moderation log messages

CHANGELOG.md

@@ -26,7 +26,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - 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
 - Remove Websocket based federation settings
 - Move Settings tab navigation from the tabbed menu to the main sidebar menu. A separate route is created for each tab.
 - Move Emoji packs configuration to the Emoji tab in the Settings section

build/webpack.dev.conf.js

@@ -48,7 +48,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       poll: config.dev.poll
     },
     headers: {
-      'content-security-policy': "script-src 'self' 'unsafe-eval'; base-uri 'self'; frame-ancestors 'none'; img-src 'self' data: https: http:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; font-src 'self'; manifest-src 'self'"
+      'content-security-policy': "base-uri 'self'; frame-ancestors 'none'; img-src 'self' data: https: http:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; font-src 'self'; manifest-src 'self'; script-src 'self';"
     }
   },
   plugins: [
@@ -67,12 +67,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
         BASE_URL: devEnv.ASSETS_PUBLIC_PATH + config.dev.assetsSubDirectory,
       },
     }),
-  ],
-  resolve: {
-    alias: {
-      vue: 'vue/dist/vue.js'
-    }
-  }
+  ]
 })
 
 module.exports = new Promise((resolve, reject) => {

src/views/moderationLog/LogEntryMessage.vue

@@ -0,0 +1,65 @@
+<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/moderationLog/ReportLink.vue

@@ -1,20 +0,0 @@
-<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/moderationLog/UserLink.vue

@@ -1,20 +0,0 @@
-<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/moderationLog/index.vue

@@ -43,7 +43,8 @@
         v-for="(logEntry, index) in log"
         :key="index"
         :timestamp="normalizeTimestamp(logEntry.time)">
-        <component :is="processedMessage(logEntry)"/>
+        <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>
     <div class="pagination">
@@ -64,14 +65,10 @@ import moment from 'moment'
 import _ from 'lodash'
 import debounce from 'lodash.debounce'
 import RebootButton from '@/components/RebootButton'
-import ReportLink from './ReportLink'
-import UserLink from './UserLink'
-import Vue from 'vue'
-Vue.component('user-link', UserLink)
-Vue.component('report-link', ReportLink)
+import LogEntryMessage from './LogEntryMessage'
 
 export default {
-  components: { RebootButton },
+  components: { RebootButton, LogEntryMessage },
   data() {
     return {
       dateRange: '',
@@ -133,24 +130,6 @@ 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]
     }
@@ -194,9 +173,6 @@ h1 {
   margin: 0;
   width: 145px;
 }
-.router-link {
-  text-decoration: none;
-}
 .pagination {
   text-align: center;
 }