Always show the menu to switch filters

webapp/components/_new/features/ReportList/ReportList.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-card space="small" v-if="reports && reports.length">
+  <ds-card space="small">
     <ds-flex class="notifications-page-flex">
       <ds-flex-item :width="{ lg: '85%' }">
         <ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading>
@@ -13,19 +13,16 @@
     <ds-space />
     <reports-table :reports="reports" @confirm="confirm" />
   </ds-card>
-  <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
 </template>
 <script>
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
 import ReportsTable from '~/components/_new/generic/ReportsTable/ReportsTable'
-import HcEmpty from '~/components/Empty/Empty'
 import { reportsListQuery, reviewMutation } from '~/graphql/Moderation.js'
 
 export default {
   components: {
     DropdownFilter,
     ReportsTable,
-    HcEmpty,
   },
   data() {
     return {

webapp/components/_new/generic/ReportsTable/ReportsTable.spec.js

@@ -0,0 +1,36 @@
+import { config, mount } from '@vue/test-utils'
+import ReportsTable from './ReportsTable.vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = global.localVue
+localVue.use(Styleguide)
+
+config.stubs['client-only'] = '<span><slot /></span>'
+
+describe('ReportsTable', () => {
+  let propsData
+  let mocks
+  beforeEach(() => {
+    propsData = {}
+    mocks = {
+      $t: jest.fn(t => t),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(ReportsTable, { propsData, mocks, localVue })
+    }
+
+    describe('no reports', () => {
+      beforeEach(() => {
+        propsData = { ...propsData, reports: [] }
+      })
+
+      it('shows a placeholder', () => {
+        const wrapper = Wrapper()
+        expect(wrapper.text()).toContain('moderation.reports.empty')
+      })
+    })
+  })
+})

webapp/components/_new/generic/ReportsTable/ReportsTable.vue

@@ -1,6 +1,10 @@
 <template>
-  <table class="ds-table ds-table-condensed ds-table-bordered" cellspacing="0" cellpadding="0">
-    <colgroup><col width="" /></colgroup>
+  <table
+    v-if="reports && reports.length"
+    class="ds-table ds-table-condensed ds-table-bordered"
+    cellspacing="0"
+    cellpadding="0"
+  >
     <template v-for="report in reports">
       <thead
         :class="[
@@ -140,17 +144,21 @@
       </tbody>
     </template>
   </table>
+  <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
 </template>
+
 <script>
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import HcUser from '~/components/User/User'
 import FiledTable from '~/components/_new/generic/FiledTable/FiledTable'
+import HcEmpty from '~/components/Empty/Empty'
 
 export default {
   components: {
     CounterIcon,
     HcUser,
     FiledTable,
+    HcEmpty,
   },
   data() {
     return {