From f1b85d525623e21fe34e619cf4594eaa78cbd31d Mon Sep 17 00:00:00 2001
From: senderfm <dev@sender.fm>
Date: Tue, 4 Jun 2019 16:25:59 +0200
Subject: [PATCH] Fixed clean ReleaseModal and DeleteModal

---
 webapp/components/ContentMenu.vue             |  24 ++-
 webapp/components/Modal.vue                   |   9 +
 webapp/components/Modal/DisableModal.spec.js  |   3 +
 webapp/components/Modal/DisableModal.vue      |   7 +-
 .../ReleaseModal/ReleaseModal.spec.js         | 175 ++++++++++++++++++
 .../components/ReleaseModal/ReleaseModal.vue  |  77 ++++++++
 webapp/locales/de.json                        |  28 ++-
 webapp/locales/en.json                        |  22 ++-
 8 files changed, 333 insertions(+), 12 deletions(-)
 create mode 100644 webapp/components/ReleaseModal/ReleaseModal.spec.js
 create mode 100644 webapp/components/ReleaseModal/ReleaseModal.vue

diff --git a/webapp/components/ContentMenu.vue b/webapp/components/ContentMenu.vue
index 69289cb6d..5cd49fe17 100644
--- a/webapp/components/ContentMenu.vue
+++ b/webapp/components/ContentMenu.vue
@@ -98,13 +98,23 @@ export default {
       }
 
       if (!this.isOwner && this.isModerator) {
-        routes.push({
-          name: this.$t(`disable.${this.resourceType}.title`),
-          callback: () => {
-            this.openModal('disable')
-          },
-          icon: 'eye-slash',
-        })
+        if (!this.resource.disabled) {
+          routes.push({
+            name: this.$t(`disable.${this.resourceType}.title`),
+            callback: () => {
+              this.openModal('disable')
+            },
+            icon: 'eye-slash',
+          })
+        } else {
+          routes.push({
+            name: this.$t(`release.${this.resourceType}.title`),
+            callback: () => {
+              this.openModal('release', this.resource.id)
+            },
+            icon: 'eye-slash',
+          })
+        }
       }
 
       if (this.isOwner && this.resourceType === 'user') {
diff --git a/webapp/components/Modal.vue b/webapp/components/Modal.vue
index efe1b8ab6..317b5007a 100644
--- a/webapp/components/Modal.vue
+++ b/webapp/components/Modal.vue
@@ -9,6 +9,13 @@
       :callbacks="data.callbacks"
       @close="close"
     />
+    <release-modal
+      v-if="open === 'release'"
+      :id="data.resource.id"
+      :type="data.type"
+      :name="name"
+      @close="close"
+    />
     <report-modal
       v-if="open === 'report'"
       :id="data.resource.id"
@@ -31,6 +38,7 @@
 <script>
 import DeleteModal from '~/components/Modal/DeleteModal'
 import DisableModal from '~/components/Modal/DisableModal'
+import ReleaseModal from '~/components/ReleaseModal/ReleaseModal.vue'
 import ReportModal from '~/components/Modal/ReportModal'
 import { mapGetters } from 'vuex'
 
@@ -38,6 +46,7 @@ export default {
   name: 'Modal',
   components: {
     DisableModal,
+    ReleaseModal,
     ReportModal,
     DeleteModal,
   },
diff --git a/webapp/components/Modal/DisableModal.spec.js b/webapp/components/Modal/DisableModal.spec.js
index 02ae3fa5d..87484f6bf 100644
--- a/webapp/components/Modal/DisableModal.spec.js
+++ b/webapp/components/Modal/DisableModal.spec.js
@@ -33,6 +33,9 @@ describe('DisableModal.vue', () => {
       $apollo: {
         mutate: jest.fn().mockResolvedValue(),
       },
+      location: {
+        reload: jest.fn(),
+      },
     }
   })
 
diff --git a/webapp/components/Modal/DisableModal.vue b/webapp/components/Modal/DisableModal.vue
index 690dcbf70..988ecc8af 100644
--- a/webapp/components/Modal/DisableModal.vue
+++ b/webapp/components/Modal/DisableModal.vue
@@ -4,9 +4,7 @@
     <p v-html="message" />
 
     <template slot="footer">
-      <ds-button class="cancel" @click="cancel">
-        {{ $t('disable.cancel') }}
-      </ds-button>
+      <ds-button class="cancel" @click="cancel">{{ $t('disable.cancel') }}</ds-button>
 
       <ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
         {{ $t('disable.submit') }}
@@ -70,6 +68,9 @@ export default {
         setTimeout(() => {
           this.$emit('close')
         }, 1000)
+        setTimeout(() => {
+          location.reload()
+        }, 250)
       } catch (err) {
         this.$toast.error(err.message)
       }
diff --git a/webapp/components/ReleaseModal/ReleaseModal.spec.js b/webapp/components/ReleaseModal/ReleaseModal.spec.js
new file mode 100644
index 000000000..766d981f8
--- /dev/null
+++ b/webapp/components/ReleaseModal/ReleaseModal.spec.js
@@ -0,0 +1,175 @@
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import ReleaseModal from './ReleaseModal.vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('ReleaseModal.vue', () => {
+  let mocks
+  let propsData
+  let wrapper
+  let Wrapper
+
+  beforeEach(() => {
+    propsData = {
+      type: 'contribution',
+      name: 'blah',
+      id: 'c42',
+    }
+    mocks = {
+      $filters: {
+        truncate: a => a,
+      },
+      $toast: {
+        success: () => {},
+        error: () => {},
+      },
+      $t: jest.fn(),
+      $apollo: {
+        mutate: jest.fn().mockResolvedValue(),
+      },
+      location: {
+        reload: jest.fn(),
+      },
+    }
+  })
+
+  describe('shallowMount', () => {
+    Wrapper = () => {
+      return shallowMount(ReleaseModal, {
+        propsData,
+        mocks,
+        localVue,
+      })
+    }
+
+    describe('given a user', () => {
+      beforeEach(() => {
+        propsData = {
+          type: 'user',
+          id: 'u2',
+          name: 'Bob Ross',
+        }
+      })
+
+      it('mentions user name', () => {
+        Wrapper()
+        const calls = mocks.$t.mock.calls
+        const expected = [
+          [
+            'release.user.message',
+            {
+              name: 'Bob Ross',
+            },
+          ],
+        ]
+        expect(calls).toEqual(expect.arrayContaining(expected))
+      })
+    })
+
+    describe('given a contribution', () => {
+      beforeEach(() => {
+        propsData = {
+          type: 'contribution',
+          id: 'c3',
+          name: 'This is some post title.',
+        }
+      })
+
+      it('mentions contribution title', () => {
+        Wrapper()
+        const calls = mocks.$t.mock.calls
+        const expected = [
+          [
+            'release.contribution.message',
+            {
+              name: 'This is some post title.',
+            },
+          ],
+        ]
+        expect(calls).toEqual(expect.arrayContaining(expected))
+      })
+    })
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(ReleaseModal, {
+        propsData,
+        mocks,
+        localVue,
+      })
+    }
+
+    beforeEach(jest.useFakeTimers)
+
+    describe('given id', () => {
+      beforeEach(() => {
+        propsData = {
+          type: 'user',
+          id: 'u4711',
+        }
+      })
+
+      describe('click cancel button', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+          wrapper.find('button.cancel').trigger('click')
+        })
+
+        it('does not emit "close" yet', () => {
+          expect(wrapper.emitted().close).toBeFalsy()
+        })
+
+        it('fades away', () => {
+          expect(wrapper.vm.isOpen).toBe(false)
+        })
+
+        describe('after timeout', () => {
+          beforeEach(jest.runAllTimers)
+
+          it('does not call mutation', () => {
+            expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+          })
+
+          it('emits close', () => {
+            expect(wrapper.emitted().close).toBeTruthy()
+          })
+        })
+      })
+
+      describe('click confirm button', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+          wrapper.find('button.confirm').trigger('click')
+        })
+
+        it('calls mutation', () => {
+          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        })
+
+        it('passes id to mutation', () => {
+          const calls = mocks.$apollo.mutate.mock.calls
+          const [[{ variables }]] = calls
+          expect(variables).toEqual({
+            id: 'u4711',
+          })
+        })
+
+        it('fades away', () => {
+          expect(wrapper.vm.isOpen).toBe(false)
+        })
+
+        describe('after timeout', () => {
+          beforeEach(jest.runAllTimers)
+
+          it('emits close', () => {
+            expect(wrapper.emitted().close).toBeTruthy()
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/webapp/components/ReleaseModal/ReleaseModal.vue b/webapp/components/ReleaseModal/ReleaseModal.vue
new file mode 100644
index 000000000..f414d4328
--- /dev/null
+++ b/webapp/components/ReleaseModal/ReleaseModal.vue
@@ -0,0 +1,77 @@
+<template>
+  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p v-html="message" />
+
+    <template slot="footer">
+      <ds-button class="cancel" @click="cancel">{{ $t('release.cancel') }}</ds-button>
+
+      <ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
+        {{ $t('release.submit') }}
+      </ds-button>
+    </template>
+  </ds-modal>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  props: {
+    name: { type: String, default: '' },
+    type: { type: String, required: true },
+    id: { type: String, required: true },
+  },
+  data() {
+    return {
+      isOpen: true,
+      success: false,
+      loading: false,
+    }
+  },
+  computed: {
+    title() {
+      return this.$t(`release.${this.type}.title`)
+    },
+    message() {
+      const name = this.$filters.truncate(this.name, 30)
+      return this.$t(`release.${this.type}.message`, { name })
+    },
+  },
+  methods: {
+    cancel() {
+      this.isOpen = false
+      setTimeout(() => {
+        this.$emit('close')
+      }, 1000)
+    },
+    async confirm() {
+      try {
+        await this.$apollo.mutate({
+          mutation: gql`
+            mutation($id: ID!) {
+              enable(id: $id)
+            }
+          `,
+          variables: { id: this.id },
+        })
+        this.$toast.success(this.$t('release.success'))
+        this.isOpen = false
+        /*
+        setTimeout(() => {
+          location.reload()
+        }, 1500)
+        */
+        setTimeout(() => {
+          this.$emit('close')
+        }, 1000)
+        setTimeout(() => {
+          location.reload()
+        }, 250)
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    },
+  },
+}
+</script>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 8b20f763f..fb33e2fd8 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -257,5 +257,31 @@
   },
   "shoutButton": {
     "shouted": "empfohlen"
+  },
+
+  "release": {
+    "submit": "freigeben",
+    "cancel": "Abbrechen",
+    "success": "Erfolgreich freigegeben!",
+    "user": {
+      "title": "Nutzer freigeben",
+      "type": "Nutzer",
+      "message": "Bist du sicher, dass du den Nutzer \"<b>{name}</b>\" freigeben möchtest?"
+    },
+    "contribution": {
+      "title": "Beitrag freigeben",
+      "type": "Beitrag",
+      "message": "Bist du sicher, dass du den Beitrag \"<b>{name}</b>\" freigeben möchtest?"
+    },
+    "comment": {
+      "title": "Kommentar freigeben",
+      "type": "Kommentar",
+      "message": "Bist du sicher, dass du den Kommentar \"<b>{name}</b>\" freigeben möchtest?"
+    }
+  },
+  "user": {
+    "avatar": {
+      "submitted": "Upload erfolgreich"
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index b4c7d91c2..8330f97b2 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -258,9 +258,29 @@
   "shoutButton": {
     "shouted": "shouted"
   },
+  "release": {
+    "submit": "Release",
+    "cancel": "Cancel",
+    "success": "Released successfully!",
+    "user": {
+      "title": "Release User",
+      "type": "User",
+      "message": "Do you really want to release the user \"<b>{name}</b>\"?"
+    },
+    "contribution": {
+      "title": "Release Contribution",
+      "type": "Contribution",
+      "message": "Do you really want to release the contribution \"<b>{name}</b>\"?"
+    },
+    "comment": {
+      "title": "Release Comment",
+      "type": "Comment",
+      "message": "Do you really want to release the comment from \"<b>{name}</b>\"?"
+    }
+  },
   "user": {
     "avatar": {
       "submitted": "Upload successful"
     }
   }
-}
\ No newline at end of file
+}