Remove useless moderation stuff (#1253)

Moderation messages are superseded by threads, so there is no need to have the ModalModeration anymore, it would only confuse new moderators

components/ui/ModalModeration.vue

@@ -1,175 +0,0 @@
-<template>
-  <Modal ref="modal" header="Project moderation">
-    <div v-if="project !== null" class="moderation-modal universal-body">
-      <p>
-        A moderation message is optional, but it can be used to communicate problems with a
-        project's team members. The body is also optional and supports markdown formatting!
-      </p>
-      <div v-if="status" class="status">
-        <span>New project status: </span>
-        <Badge :type="status" />
-      </div>
-      <h3>Message title</h3>
-      <input v-model="moderationMessage" type="text" placeholder="Enter the message..." />
-      <h3>Message body</h3>
-      <div class="textarea-wrapper">
-        <Chips v-model="bodyViewMode" class="separator" :items="['source', 'preview']" />
-        <textarea
-          v-if="bodyViewMode === 'source'"
-          id="body"
-          v-model="moderationMessageBody"
-          :disabled="!moderationMessage"
-          :placeholder="
-            moderationMessage
-              ? 'Type a body to your moderation message here...'
-              : 'You must add a title before you add a body.'
-          "
-        />
-        <div v-else class="markdown-body preview" v-html="renderString(moderationMessageBody)" />
-      </div>
-      <div class="push-right input-group">
-        <button
-          v-if="moderationMessage || moderationMessageBody"
-          class="iconified-button"
-          @click="
-            () => {
-              moderationMessage = ''
-              moderationMessageBody = ''
-            }
-          "
-        >
-          <TrashIcon />
-          Clear message
-        </button>
-        <button class="iconified-button" @click="$refs.modal.hide()">
-          <CrossIcon />
-          Cancel
-        </button>
-        <button class="iconified-button brand-button" @click="saveProject">
-          <CheckIcon />
-          Confirm
-        </button>
-      </div>
-    </div>
-  </Modal>
-</template>
-
-<script>
-import TrashIcon from '~/assets/images/utils/trash.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import Modal from '~/components/ui/Modal.vue'
-import Chips from '~/components/ui/Chips.vue'
-import Badge from '~/components/ui/Badge.vue'
-import CheckIcon from '~/assets/images/utils/check.svg'
-import { renderString } from '~/helpers/parse.js'
-
-export default {
-  components: {
-    TrashIcon,
-    CrossIcon,
-    CheckIcon,
-    Modal,
-    Chips,
-    Badge,
-  },
-  props: {
-    project: {
-      type: Object,
-      default: null,
-    },
-    status: {
-      type: String,
-      default: null,
-    },
-    onClose: {
-      type: Function,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      bodyViewMode: 'source',
-      moderationMessage:
-        this.project && this.project.moderation_message ? this.project.moderation_message : '',
-      moderationMessageBody:
-        this.project && this.project.moderation_message_body
-          ? this.project.moderation_message_body
-          : '',
-    }
-  },
-  methods: {
-    renderString,
-    async saveProject() {
-      startLoading()
-
-      try {
-        const data = {
-          moderation_message: this.moderationMessage ? this.moderationMessage : null,
-          moderation_message_body: this.moderationMessageBody ? this.moderationMessageBody : null,
-        }
-        if (this.status) {
-          data.status = this.status
-        }
-        await useBaseFetch(`project/${this.project.id}`, {
-          method: 'PATCH',
-          body: data,
-        })
-
-        this.$refs.modal.hide()
-        if (this.onClose !== null) {
-          this.onClose()
-        }
-      } catch (err) {
-        this.$notify({
-          group: 'main',
-          title: 'An error occurred',
-          text: err.data ? err.data.description : err,
-          type: 'error',
-        })
-      }
-
-      stopLoading()
-    },
-    show() {
-      this.$refs.modal.show()
-      this.moderationMessage =
-        this.project && this.project.moderator_message && this.project.moderator_message.message
-          ? this.project.moderator_message.message
-          : ''
-      this.moderationMessageBody =
-        this.project && this.project.moderator_message && this.project.moderator_message.body
-          ? this.project.moderator_message.body
-          : ''
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.moderation-modal {
-  padding: var(--spacing-card-lg);
-
-  .status {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.5rem;
-
-    span {
-      margin-right: 0.5rem;
-    }
-  }
-
-  .textarea-wrapper {
-    margin-top: 0.5rem;
-    height: 15rem;
-
-    .preview {
-      overflow-y: auto;
-    }
-  }
-
-  .separator {
-    margin: var(--spacing-card-sm) 0;
-  }
-}
-</style>

pages/[type]/[id].vue

@@ -150,13 +150,6 @@
         "
       />
     </Head>
-    <ModalModeration
-      v-if="auth.user"
-      ref="modalModeration"
-      :project="project"
-      :status="moderationStatus"
-      :on-close="resetProject"
-    />
     <Modal ref="modalLicense" :header="project.license.name ? project.license.name : 'License'">
       <div class="modal-license">
         <div class="markdown-body" v-html="renderString(licenseText)" />
@@ -355,61 +348,6 @@
             </button>
           </div>
         </div>
-        <div
-          v-if="auth.user && tags.staffRoles.includes(auth.user.role)"
-          class="universal-card moderation-card"
-        >
-          <h2>Moderation actions</h2>
-          <div class="input-stack">
-            <button
-              v-if="
-                !tags.approvedStatuses.includes(project.status) || project.status === 'processing'
-              "
-              class="iconified-button brand-button"
-              @click="openModerationModal(requestedStatus)"
-            >
-              <CheckIcon />
-              Approve
-              {{ requestedStatus !== 'approved' ? `(${requestedStatus})` : '' }}
-            </button>
-            <button
-              v-if="
-                tags.approvedStatuses.includes(project.status) ||
-                project.status === 'processing' ||
-                (tags.rejectedStatuses.includes(project.status) && project.status !== 'withheld')
-              "
-              class="iconified-button danger-button"
-              @click="openModerationModal('withheld')"
-            >
-              <EyeOffIcon />
-              Withhold
-            </button>
-            <button
-              v-if="
-                tags.approvedStatuses.includes(project.status) ||
-                project.status === 'processing' ||
-                (tags.rejectedStatuses.includes(project.status) && project.status !== 'rejected')
-              "
-              class="iconified-button danger-button"
-              @click="openModerationModal('rejected')"
-            >
-              <CrossIcon />
-              Reject
-            </button>
-            <button class="iconified-button" @click="openModerationModal(null)">
-              <EditIcon />
-              Edit message
-            </button>
-            <nuxt-link class="iconified-button" to="/moderation/review">
-              <ModerationIcon />
-              Visit review queue
-            </nuxt-link>
-            <nuxt-link class="iconified-button" to="/moderation/reports">
-              <ReportIcon />
-              Visit reports
-            </nuxt-link>
-          </div>
-        </div>
       </div>
       <section class="normal-page__content">
         <ProjectMemberHeader
@@ -760,7 +698,6 @@
 </template>
 <script setup>
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
-import CheckIcon from '~/assets/images/utils/check.svg'
 import ClearIcon from '~/assets/images/utils/clear.svg'
 import DownloadIcon from '~/assets/images/utils/download.svg'
 import UpdateIcon from '~/assets/images/utils/updated.svg'
@@ -779,7 +716,6 @@ import PayPalIcon from '~/assets/images/external/paypal.svg'
 import OpenCollectiveIcon from '~/assets/images/external/opencollective.svg'
 import UnknownIcon from '~/assets/images/utils/unknown-donation.svg'
 import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
-import EyeOffIcon from '~/assets/images/utils/eye-off.svg'
 import BoxIcon from '~/assets/images/utils/box.svg'
 import Promotion from '~/components/ads/Promotion.vue'
 import Badge from '~/components/ui/Badge.vue'
@@ -787,7 +723,6 @@ import Categories from '~/components/ui/search/Categories.vue'
 import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator.vue'
 import Modal from '~/components/ui/Modal.vue'
 import ModalReport from '~/components/ui/ModalReport.vue'
-import ModalModeration from '~/components/ui/ModalModeration.vue'
 import NavRow from '~/components/ui/NavRow.vue'
 import CopyCode from '~/components/ui/CopyCode.vue'
 import Avatar from '~/components/ui/Avatar.vue'
@@ -802,9 +737,6 @@ import LinksIcon from '~/assets/images/utils/link.svg'
 import LicenseIcon from '~/assets/images/utils/copyright.svg'
 import GalleryIcon from '~/assets/images/utils/image.svg'
 import VersionIcon from '~/assets/images/utils/version.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import EditIcon from '~/assets/images/utils/edit.svg'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg'
 import { renderString } from '~/helpers/parse.js'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 
@@ -970,7 +902,6 @@ const licenseIdDisplay = computed(() => {
   }
 })
 const featuredGalleryImage = computed(() => project.value.gallery.find((img) => img.featured))
-const requestedStatus = computed(() => project.value.requested_status ?? 'approved')
 
 async function resetProject() {
   const newProject = await useBaseFetch(`project/${project.value.id}`)
@@ -1127,14 +1058,6 @@ async function patchIcon(icon) {
   return result
 }
 
-const modalModeration = ref(null)
-const moderationStatus = ref(null)
-function openModerationModal(status) {
-  moderationStatus.value = status
-
-  modalModeration.value.show()
-}
-
 async function updateMembers() {
   allMembers.value = await useAsyncData(
     `project/${route.params.id}/members`,