block/mute cards update to show expiry and ask for it

src/components/mute_card/mute_card.js

@@ -1,12 +1,8 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 
 const MuteCard = {
   props: ['userId'],
-  data () {
-    return {
-      progress: false
-    }
-  },
   computed: {
     user () {
       return this.$store.getters.findUser(this.userId)
@@ -16,10 +12,16 @@ const MuteCard = {
     },
     muted () {
       return this.relationship.muting
+    },
+    muteExpiry () {
+      return this.user.mute_expires_at == null
+        ? this.$t('user_card.mute_expires_forever')
+        : this.$t('user_card.mute_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
     }
   },
   components: {
-    BasicUserCard
+    BasicUserCard,
+    UserTimedFilterModal
   },
   methods: {
     unmuteUser () {
@@ -29,10 +31,7 @@ const MuteCard = {
       })
     },
     muteUser () {
-      this.progress = true
-      this.$store.dispatch('muteUser', this.userId).then(() => {
-        this.progress = false
-      })
+      this.$refs.timedMuteDialog.optionallyPrompt()
     }
   }
 }

src/components/mute_card/mute_card.vue

@@ -1,33 +1,32 @@
 <template>
   <basic-user-card :user="user">
     <div class="mute-card-content-container">
+      <span v-if="muted" class="alert neutral">
+        {{ muteExpiry }}
+      </span>
+      {{ ' ' }}
       <button
         v-if="muted"
         class="btn button-default"
-        :disabled="progress"
         @click="unmuteUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.unmute_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.unmute') }}
-        </template>
+        {{ $t('user_card.unmute') }}
       </button>
       <button
         v-else
         class="btn button-default"
-        :disabled="progress"
         @click="muteUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.mute_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.mute') }}
-        </template>
+        {{ $t('user_card.mute') }}
       </button>
     </div>
+    <teleport to="#modal">
+      <UserTimedFilterModal
+        :user="user"
+        :is-mute="true"
+        ref="timedMuteDialog"
+      />
+    </teleport>
   </basic-user-card>
 </template>