Merge branch 'fix/reports-shows-up-blank' into 'develop'

Fix blank reports page

Closes #99

See merge request pleroma/admin-fe!121

src/api/__mocks__/reports.js

@@ -1,14 +1,14 @@
 const reports = [
-  { created_at: '2019-05-21T21:35:33.000Z', account: { acct: 'benj', display_name: 'Benjamin Fame', tags: [] }, actor: { acct: 'admin' }, state: 'open', id: '2', content: 'This is a report', statuses: [] },
+  { created_at: '2019-05-21T21:35:33.000Z', account: { display_name: 'Benjamin Fame', tags: [] }, actor: {}, state: 'open', id: '2', content: 'This is a report', statuses: [] },
-  { created_at: '2019-05-20T22:45:33.000Z', account: { acct: 'alice', display_name: 'Alice Pool', tags: [] }, actor: { acct: 'admin2' }, state: 'resolved', id: '1', content: 'Please block this user', statuses: [] },
+  { created_at: '2019-05-20T22:45:33.000Z', account: { display_name: 'Alice Pool', tags: [] }, actor: {}, state: 'resolved', id: '1', content: 'Please block this user', statuses: [] },
-  { created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '3', content: '', statuses: [] },
+  { created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '3', content: '', statuses: [] },
-  { created_at: '2019-05-21T21:35:33.000Z', account: { acct: 'benj', display_name: 'Benjamin Fame', tags: [] }, actor: { acct: 'admin' }, state: 'open', id: '5', content: 'This is a report', statuses: [] },
+  { created_at: '2019-05-21T21:35:33.000Z', account: { display_name: 'Benjamin Fame', tags: [] }, actor: {}, state: 'open', id: '5', content: 'This is a report', statuses: [] },
-  { created_at: '2019-05-20T22:45:33.000Z', account: { acct: 'alice', display_name: 'Alice Pool', tags: [] }, actor: { acct: 'admin2' }, state: 'resolved', id: '7', content: 'Please block this user', statuses: [
+  { created_at: '2019-05-20T22:45:33.000Z', account: { display_name: 'Alice Pool', tags: [] }, actor: {}, state: 'resolved', id: '7', content: 'Please block this user', statuses: [
     { account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'public', sensitive: false, id: '11', content: 'Hey!', url: '', created_at: '2019-05-10T21:35:33.000Z' },
     { account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'unlisted', sensitive: true, id: '10', content: 'Bye!', url: '', created_at: '2019-05-10T21:00:33.000Z' }
   ] },
-  { created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '6', content: '', statuses: [] },
+  { created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '6', content: '', statuses: [] },
-  { created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '4', content: '', statuses: [] }
+  { created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '4', content: '', statuses: [] }
 ]
 
 export async function fetchReports(filter, page, pageSize, authHost, token) {

src/components/Status/index.vue

@@ -5,13 +5,17 @@
         <div class="status-header">
           <div class="status-account-container">
             <div class="status-account">
-              <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(status.account)"/>
+              <el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
-              <img :src="status.account.avatar" class="status-avatar-img">
+              <img :src="account.avatar" class="status-avatar-img">
-              <h3 class="status-account-name">{{ status.account.display_name }}</h3>
+              <a v-if="!account.deactivated" :href="account.url" target="_blank" class="account">
+                <h3 class="status-account-name">{{ account.display_name }}</h3>
+              </a>
+              <span v-else>
+                <h3 class="status-account-name">{{ account.display_name }}</h3>
+                <h3 class="status-account-name deactivated"> (deactivated)</h3>
+              </span>
             </div>
-            <a :href="status.account.url" target="_blank" class="account">
+
-              @{{ status.account.acct }}
-            </a>
           </div>
           <div class="status-actions">
             <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
@@ -121,6 +125,11 @@ import moment from 'moment'
 export default {
   name: 'Status',
   props: {
+    account: {
+      type: Object,
+      required: false,
+      default: () => { return {} }
+    },
     fetchStatusesByInstance: {
       type: Boolean,
       required: false,

src/lang/en.js

@@ -293,6 +293,7 @@ export default {
   },
   reports: {
     reports: 'Reports',
+    report: 'Report',
     reply: 'Reply',
     from: 'From',
     showNotes: 'Show notes',
@@ -332,7 +333,8 @@ export default {
     statusDeleted: 'This status has been deleted',
     leaveNote: 'Leave a note',
     postNote: 'Send',
-    deleteNote: 'Delete'
+    deleteNote: 'Delete',
+    notFound: 'account not found'
   },
   reportsFilter: {
     inputPlaceholder: 'Select filter',

src/views/reports/components/ModerateUserDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dropdown trigger="click">
-    <el-button plain size="small" icon="el-icon-files">{{ $t('reports.moderateUser') }}
+    <el-button :disabled="!account.id" plain size="small" icon="el-icon-files">{{ $t('reports.moderateUser') }}
       <i class="el-icon-arrow-down el-icon--right"/>
     </el-button>
     <el-dropdown-menu slot="dropdown">
@@ -16,42 +16,42 @@
       </el-dropdown-item>
       <el-dropdown-item
         :divided="true"
-        :class="{ 'active-tag': account.tags.includes('force_nsfw') }"
+        :class="{ 'active-tag': tags.includes('force_nsfw') }"
         @click.native="toggleTag(account, 'force_nsfw')">
         {{ $t('users.forceNsfw') }}
-        <i v-if="account.tags.includes('force_nsfw')" class="el-icon-check"/>
+        <i v-if="tags.includes('force_nsfw')" class="el-icon-check"/>
       </el-dropdown-item>
       <el-dropdown-item
-        :class="{ 'active-tag': account.tags.includes('strip_media') }"
+        :class="{ 'active-tag': tags.includes('strip_media') }"
         @click.native="toggleTag(account, 'strip_media')">
         {{ $t('users.stripMedia') }}
-        <i v-if="account.tags.includes('strip_media')" class="el-icon-check"/>
+        <i v-if="tags.includes('strip_media')" class="el-icon-check"/>
       </el-dropdown-item>
       <el-dropdown-item
-        :class="{ 'active-tag': account.tags.includes('force_unlisted') }"
+        :class="{ 'active-tag': tags.includes('force_unlisted') }"
         @click.native="toggleTag(account, 'force_unlisted')">
         {{ $t('users.forceUnlisted') }}
-        <i v-if="account.tags.includes('force_unlisted')" class="el-icon-check"/>
+        <i v-if="tags.includes('force_unlisted')" class="el-icon-check"/>
       </el-dropdown-item>
       <el-dropdown-item
-        :class="{ 'active-tag': account.tags.includes('sandbox') }"
+        :class="{ 'active-tag': tags.includes('sandbox') }"
         @click.native="toggleTag(account, 'sandbox')">
         {{ $t('users.sandbox') }}
-        <i v-if="account.tags.includes('sandbox')" class="el-icon-check"/>
+        <i v-if="tags.includes('sandbox')" class="el-icon-check"/>
       </el-dropdown-item>
       <el-dropdown-item
         v-if="account.local"
-        :class="{ 'active-tag': account.tags.includes('disable_remote_subscription') }"
+        :class="{ 'active-tag': tags.includes('disable_remote_subscription') }"
         @click.native="toggleTag(account, 'disable_remote_subscription')">
         {{ $t('users.disableRemoteSubscription') }}
-        <i v-if="account.tags.includes('disable_remote_subscription')" class="el-icon-check"/>
+        <i v-if="tags.includes('disable_remote_subscription')" class="el-icon-check"/>
       </el-dropdown-item>
       <el-dropdown-item
         v-if="account.local"
-        :class="{ 'active-tag': account.tags.includes('disable_any_subscription') }"
+        :class="{ 'active-tag': tags.includes('disable_any_subscription') }"
         @click.native="toggleTag(account, 'disable_any_subscription')">
         {{ $t('users.disableAnySubscription') }}
-        <i v-if="account.tags.includes('disable_any_subscription')" class="el-icon-check"/>
+        <i v-if="tags.includes('disable_any_subscription')" class="el-icon-check"/>
       </el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
@@ -66,6 +66,11 @@ export default {
       required: true
     }
   },
+  computed: {
+    tags() {
+      return this.account.tags || []
+    }
+  },
   methods: {
     handleDeactivation({ nickname }) {
       this.$store.dispatch('ToggleUserActivation', nickname)

src/views/reports/components/NoteCard.vue

@@ -8,7 +8,7 @@
             <h3 class="note-actor-name">{{ note.user.display_name }}</h3>
           </div>
           <a :href="note.user.url" target="_blank">
-            @{{ note.user.acct }}
+            @{{ note.user.display_name }}
           </a>
         </div>
         <div>

src/views/reports/components/Report.vue

@@ -10,7 +10,8 @@
         <el-card class="report">
           <div class="report-header-container">
             <div class="title-container">
-              <h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
+              <h3 v-if="accountExists(report.account, 'display_name')" class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
+              <h3 v-else class="report-title">{{ $t('reports.report') }}</h3>
               <h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
             </div>
             <div>
@@ -29,15 +30,22 @@
           <div>
             <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.account') }}:</span>
-            <img
+            <span v-if="accountExists(report.account, 'avatar') && accountExists(report.account, 'display_name')">
-              :src="report.account.avatar"
+              <img
-              alt="avatar"
+                :src="report.account.avatar"
-              class="avatar-img">
+                alt="avatar"
-            <a :href="report.account.url" target="_blank" class="account">
+                class="avatar-img">
-              <span>{{ report.account.acct }}</span>
+              <a v-if="!report.account.deactivated" :href="report.account.url" target="_blank" class="account">
-            </a>
+                <span>{{ report.account.display_name }}</span>
+              </a>
+              <span v-else>
+                {{ report.account.display_name }}
+                <span class="deactivated"> (deactivated)</span>
+              </span>
+            </span>
+            <span v-else class="deactivated">({{ $t('reports.notFound') }})</span>
           </div>
-          <div v-if="report.content.length > 0">
+          <div v-if="report.content && report.content.length > 0">
             <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.content') }}:
               <span>{{ report.content }}</span>
@@ -46,19 +54,22 @@
           <div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'">
             <el-divider class="divider"/>
             <span class="report-row-key">{{ $t('reports.actor') }}:</span>
-            <img
+            <span v-if="accountExists(report.actor, 'avatar') && accountExists(report.actor, 'display_name')">
-              :src="report.actor.avatar"
+              <img
-              alt="avatar"
+                :src="report.actor.avatar"
-              class="avatar-img">
+                alt="avatar"
-            <a :href="report.actor.url" target="_blank" class="account">
+                class="avatar-img">
-              <span>{{ report.actor.acct }}</span>
+              <a :href="report.actor.url" target="_blank" class="account">
-            </a>
+                <span>{{ report.actor.display_name }}</span>
+              </a>
+            </span>
+            <span v-else class="deactivated">({{ $t('reports.notFound') }})</span>
           </div>
           <div v-if="showStatuses(report.statuses)" class="statuses">
             <el-collapse>
               <el-collapse-item :title="getStatusesTitle(report.statuses)">
                 <div v-for="status in report.statuses" :key="status.id">
-                  <status :status="status" :show-checkbox="false" :page="currentPage"/>
+                  <status :status="status" :account="status.account.display_name ? status.account : report.account" :show-checkbox="false" :page="currentPage"/>
                 </div>
               </el-collapse-item>
             </el-collapse>
@@ -131,6 +142,9 @@ export default {
     }
   },
   methods: {
+    accountExists(account, key) {
+      return account[key]
+    },
     changeReportState(state, id) {
       this.$store.dispatch('ChangeReportState', [{ state, id }])
     },
@@ -147,7 +161,7 @@ export default {
           return 'primary'
       }
     },
-    getStatusesTitle(statuses) {
+    getStatusesTitle(statuses = []) {
       return `Reported statuses: ${statuses.length} item(s)`
     },
     getNotesTitle(notes = []) {
@@ -163,7 +177,7 @@ export default {
     parseTimestamp(timestamp) {
       return moment(timestamp).format('L HH:mm')
     },
-    showStatuses(statuses) {
+    showStatuses(statuses = []) {
       return statuses.length > 0
     }
   }
@@ -183,6 +197,9 @@ export default {
   .divider {
     margin: 15px 0;
   }
+  .deactivated {
+    color: gray;
+  }
   .el-card__body {
     padding: 17px;
   }

src/views/reports/components/ReportCard.vue

@@ -1,127 +0,0 @@
-<template>
-  <div>
-    <el-card v-for="report in reports" :key="report.id" class="report-card">
-      <div slot="header">
-        <div class="report-header">
-          <div class="report-actor-container">
-            <div class="report-actor">
-              <img :src="report.actor.avatar" class="report-avatar-img">
-              <h3 class="report-actor-name">{{ report.actor.display_name }}</h3>
-            </div>
-            <a :href="report.actor.url" target="_blank">
-              @{{ report.actor.acct }}
-            </a>
-          </div>
-          <div>
-            <el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
-            <el-dropdown trigger="click">
-              <el-button plain size="small" icon="el-icon-edit">{{ $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>
-                <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-        </div>
-      </div>
-      <div class="report-body">
-        <span class="report-content" v-html="report.content"/>
-        {{ parseTimestamp(report.created_at) }}
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-
-export default {
-  name: 'Statuses',
-  props: {
-    reports: {
-      type: Array,
-      required: true
-    }
-  },
-  methods: {
-    capitalizeFirstLetter(str) {
-      return str.charAt(0).toUpperCase() + str.slice(1)
-    },
-    changeReportState(state, id) {
-      this.$store.dispatch('ChangeReportState', [{ state, id }])
-    },
-    getStateType(state) {
-      switch (state) {
-        case 'closed':
-          return 'info'
-        case 'resolved':
-          return 'success'
-        default:
-          return 'primary'
-      }
-    },
-    parseTimestamp(timestamp) {
-      return moment(timestamp).format('YYYY-MM-DD HH:mm')
-    }
-  }
-}
-</script>
-
-<style rel='stylesheet/scss' lang='scss'>
-  a {
-    text-decoration: underline;
-  }
-  .el-icon-arrow-right {
-    margin-right: 6px;
-  }
-  .report-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    height: 40px;
-  }
-  .report-actor {
-    display: flex;
-    align-items: center;
-  }
-  .report-actor-name {
-    margin: 0;
-    height: 22px;
-  }
-  .report-avatar-img {
-    width: 15px;
-    height: 15px;
-    margin-right: 5px;
-  }
-  .report-body {
-    display: flex;
-    flex-direction: column;
-  }
-  .report-card {
-    margin-bottom: 15px;
-  }
-  .report-content {
-    font-size: 15px;
-  }
-  .report-header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  @media only screen and (max-width:480px) {
-    .el-card__header {
-      padding: 10px 17px;
-    }
-    .report-header {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-      height: auto;
-    }
-    .report-tag {
-      margin: 3px 0 6px;
-    }
-  }
-</style>

src/views/statuses/index.vue

@@ -45,6 +45,7 @@
     <div v-for="status in statuses" :key="status.id" class="status-container">
       <status
         :status="status"
+        :account="status.account"
         :show-checkbox="isDesktop"
         :fetch-statuses-by-instance="true"
         @status-selection="handleStatusSelection" />

src/views/users/show.vue

@@ -107,7 +107,7 @@
         </el-checkbox>
         <el-timeline v-if="!statusesLoading" class="statuses">
           <el-timeline-item v-for="status in statuses" :key="status.id">
-            <status :status="status" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
+            <status :status="status" :account="status.account" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
           </el-timeline-item>
           <p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
         </el-timeline>