Merge remote-tracking branch 'origin/develop' into admin-users

src/components/confirm_modal/confirm_modal.js

@@ -1,4 +1,4 @@
-import DialogModal from '../dialog_modal/dialog_modal.vue'
+import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
 
 /**
  * This component emits the following events:
@@ -9,30 +9,32 @@ import DialogModal from '../dialog_modal/dialog_modal.vue'
  */
 const ConfirmModal = {
   components: {
-    DialogModal
+    DialogModal,
   },
   props: {
     title: {
-      type: String
+      type: String,
     },
     cancelText: {
-      type: String
+      type: String,
     },
     confirmText: {
-      type: String
-    }
+      type: String,
+    },
+    confirmDanger: {
+      type: Boolean,
+    },
   },
   emits: ['cancelled', 'accepted'],
-  computed: {
-  },
+  computed: {},
   methods: {
-    onCancel () {
+    onCancel() {
       this.$emit('cancelled')
     },
-    onAccept () {
+    onAccept() {
       this.$emit('accepted')
-    }
-  }
+    },
+  },
 }
 
 export default ConfirmModal

src/components/confirm_modal/confirm_modal.vue

@@ -14,6 +14,7 @@
       <slot name="footerLeft" />
       <button
         class="btn button-default"
+        :class="{ '-danger': confirmDanger }"
         @click.prevent="onAccept"
         v-text="confirmText"
       />

src/components/confirm_modal/generic_confirm.js

@@ -4,37 +4,37 @@ import ConfirmModal from './confirm_modal.vue'
 export default {
   props: {
     title: {
-      type: String
+      type: String,
     },
     message: {
-      type: String
+      type: String,
     },
     cancelText: {
-      type: String
+      type: String,
     },
     confirmText: {
-      type: String
-    }
+      type: String,
+    },
   },
   emits: ['hide', 'show', 'action'],
   data: () => ({
-    showing: false
+    showing: false,
   }),
   components: {
-    ConfirmModal
+    ConfirmModal,
   },
   methods: {
-    show () {
+    show() {
       this.showing = true
       this.$emit('show')
     },
-    hide () {
+    hide() {
       this.showing = false
       this.$emit('hide')
     },
-    doGeneric () {
+    doGeneric() {
       this.$emit('action')
       this.hide()
-    }
-  }
+    },
+  },
 }

src/components/confirm_modal/mute_confirm.js

@@ -1,70 +1,78 @@
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
-import ConfirmModal from './confirm_modal.vue'
 import Select from 'src/components/select/select.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 export default {
   props: ['type', 'user', 'status'],
   emits: ['hide', 'show', 'muted'],
   data: () => ({
-    showing: false
+    showing: false,
   }),
   components: {
-    ConfirmModal,
-    Select
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
+    Select,
   },
   computed: {
-    domain () {
+    domain() {
       return this.user.fqn.split('@')[1]
     },
-    keypath () {
+    keypath() {
       if (this.type === 'domain') {
-        return 'status.mute_domain_confirm'
+        return 'user_card.mute_domain_confirm'
       } else if (this.type === 'conversation') {
-        return 'status.mute_conversation_confirm'
+        return 'user_card.mute_conversation_confirm'
       }
     },
-    conversationIsMuted () {
+    conversationIsMuted() {
       return this.status.conversation_muted
     },
-    domainIsMuted () {
-      return new Set(this.$store.state.users.currentUser.domainMutes).has(this.domain)
+    domainIsMuted() {
+      return new Set(this.$store.state.users.currentUser.domainMutes).has(
+        this.domain,
+      )
     },
-    shouldConfirm () {
+    shouldConfirm() {
       switch (this.type) {
         case 'domain': {
           return this.mergedConfig.modalOnMuteDomain
         }
-        default: { // conversation
+        default: {
+          // conversation
           return this.mergedConfig.modalOnMuteConversation
         }
       }
     },
-    ...mapGetters(['mergedConfig'])
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
   },
   methods: {
-    optionallyPrompt () {
+    optionallyPrompt() {
       if (this.shouldConfirm) {
         this.show()
       } else {
         this.doMute()
       }
     },
-    show () {
+    show() {
       this.showing = true
       this.$emit('show')
     },
-    hide () {
+    hide() {
       this.showing = false
       this.$emit('hide')
     },
-    doMute () {
+    doMute() {
       switch (this.type) {
         case 'domain': {
           if (!this.domainIsMuted) {
-            this.$store.dispatch('muteDomain', { id: this.domain })
+            this.$store.dispatch('muteDomain', this.domain)
           } else {
-            this.$store.dispatch('unmuteDomain', { id: this.domain })
+            this.$store.dispatch('unmuteDomain', this.domain)
           }
           break
         }
@@ -79,6 +87,6 @@ export default {
       }
       this.$emit('muted')
       this.hide()
-    }
-  }
+    },
+  },
 }

src/components/confirm_modal/mute_confirm.vue

@@ -1,5 +1,5 @@
 <template>
-  <confirm-modal
+  <ConfirmModal
     v-if="showing"
     :title="$t('user_card.mute_confirm_title')"
     :confirm-text="$t('user_card.mute_confirm_accept_button')"
@@ -18,7 +18,7 @@
         <span v-text="user.screen_name_ui" />
       </template>
     </i18n-t>
-  </confirm-modal>
+  </ConfirmModal>
 </template>
 
 <script src="./mute_confirm.js" />

src/components/confirm_modal/text_confirm.js

@@ -4,38 +4,38 @@ import ConfirmModal from './confirm_modal.vue'
 export default {
   props: {
     title: {
-      type: String
+      type: String,
     },
     message: {
-      type: String
+      type: String,
     },
     cancelText: {
-      type: String
+      type: String,
     },
     confirmText: {
-      type: String
-    }
+      type: String,
+    },
   },
   emits: ['hide', 'show', 'action'],
   data: () => ({
     showing: false,
-    text: ""
+    text: '',
   }),
   components: {
-    ConfirmModal
+    ConfirmModal,
   },
   methods: {
-    show () {
+    show() {
       this.showing = true
       this.$emit('show')
     },
-    hide () {
+    hide() {
       this.showing = false
       this.$emit('hide')
     },
-    doWithText () {
+    doWithText() {
       this.$emit('action', this.text)
       this.hide()
-    }
-  }
+    },
+  },
 }