From 456af8bc27ce92e3af3f2031409811b4b4660b86 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 24 Sep 2024 13:08:53 +0200
Subject: [PATCH] feat: handle leave conversation via dialog

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../ConversationSettings/DangerZone.vue       |  61 +++++-
 .../ConversationsList/Conversation.spec.js    | 191 +++++++++---------
 .../ConversationsList/Conversation.vue        |  56 +++--
 3 files changed, 197 insertions(+), 111 deletions(-)

diff --git a/src/components/ConversationSettings/DangerZone.vue b/src/components/ConversationSettings/DangerZone.vue
index e86d40163ec..3f54f4cdf34 100644
--- a/src/components/ConversationSettings/DangerZone.vue
+++ b/src/components/ConversationSettings/DangerZone.vue
@@ -14,9 +14,26 @@
 				<p class="danger-zone__hint">
 					{{ t('spreed', 'Once a conversation is left, to rejoin a closed conversation, an invite is needed. An open conversation can be rejoined at any time.') }}
 				</p>
-				<NcButton type="warning" @click="leaveConversation">
+				<NcButton type="warning" @click="toggleShowLeaveConversationDialog">
 					{{ t('spreed', 'Leave conversation') }}
 				</NcButton>
+				<NcDialog class="danger-zone__dialog"
+					:open.sync="isLeaveConversationDialogOpen"
+					:name="t('spreed','Leave conversation')"
+					:message="leaveConversationDialogMessage"
+					container=".danger-zone">
+					<template #actions>
+						<NcButton v-if="supportsArchive && !conversation.isArchived" type="secondary" @click="toggleArchiveConversation">
+							{{ t('spreed', 'Archive instead') }}
+						</NcButton>
+						<NcButton type="tertiary" @click="toggleShowLeaveConversationDialog">
+							{{ t('spreed', 'No') }}
+						</NcButton>
+						<NcButton type="warning" @click="leaveConversation">
+							{{ t('spreed', 'Yes') }}
+						</NcButton>
+					</template>
+				</NcDialog>
 			</div>
 			<div v-if="canDeleteConversation" class="app-settings-subsection">
 				<h4 class="app-settings-section__subtitle">
@@ -76,6 +93,8 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
@@ -84,6 +103,10 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 
+import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
+
+const supportsArchive = hasTalkFeature('local', 'archived-conversations')
+
 export default {
 	name: 'DangerZone',
 	components: {
@@ -109,10 +132,16 @@ export default {
 		},
 	},
 
-	data() {
+	setup() {
+		const isLeaveConversationDialogOpen = ref(false)
+		const isDeleteConversationDialogOpen = ref(false)
+		const isDeleteChatDialogOpen = ref(false)
+
 		return {
-			isDeleteConversationDialogOpen: false,
-			isDeleteChatDialogOpen: false,
+			supportsArchive,
+			isLeaveConversationDialogOpen,
+			isDeleteConversationDialogOpen,
+			isDeleteChatDialogOpen,
 		}
 	},
 
@@ -125,6 +154,13 @@ export default {
 			return this.conversation.token
 		},
 
+		leaveConversationDialogMessage() {
+			return t('spreed', 'Do you really want to leave "{displayName}"?', this.conversation, undefined, {
+				escape: false,
+				sanitize: false,
+			})
+		},
+
 		deleteConversationDialogMessage() {
 			return t('spreed', 'Do you really want to delete "{displayName}"?', this.conversation, undefined, {
 				escape: false,
@@ -146,10 +182,23 @@ export default {
 		hideConversationSettings() {
 			emit('hide-conversation-settings')
 		},
+
+		/**
+		 * Deletes the current user from the conversation.
+		 */
+		async toggleArchiveConversation() {
+			this.isLeaveConversationDialogOpen = false
+
+			await this.$store.dispatch('toggleArchive', this.conversation)
+			this.hideConversationSettings()
+		},
+
 		/**
 		 * Deletes the current user from the conversation.
 		 */
 		async leaveConversation() {
+			this.isLeaveConversationDialogOpen = false
+
 			try {
 				await this.$store.dispatch('removeCurrentUserFromConversation', { token: this.token })
 				this.hideConversationSettings()
@@ -198,6 +247,10 @@ export default {
 			}
 		},
 
+		toggleShowLeaveConversationDialog() {
+			this.isLeaveConversationDialogOpen = !this.isLeaveConversationDialogOpen
+		},
+
 		toggleShowDeleteConversationDialog() {
 			this.isDeleteConversationDialogOpen = !this.isDeleteConversationDialogOpen
 		},
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
index 293ccff4d5c..3871c1b6783 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
@@ -12,7 +12,6 @@ import { showSuccess, showError } from '@nextcloud/dialogs'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 
 import Conversation from './Conversation.vue'
@@ -66,6 +65,7 @@ describe('Conversation.vue', () => {
 			type: CONVERSATION.TYPE.GROUP,
 			displayName: 'conversation one',
 			isFavorite: false,
+			isArchived: false,
 			lastMessage: {
 				actorId: 'user-id-alice',
 				actorDisplayName: 'Alice Wonderland',
@@ -357,17 +357,63 @@ describe('Conversation.vue', () => {
 			return findNcActionButton(el, actionName)
 		}
 
+		/**
+		 * @param {string} actionName The name of the action to shallow
+		 * @param {number} buttonsAmount The amount of buttons to be shown in dialog
+		 */
+		async function shallowMountAndOpenDialog(actionName, buttonsAmount) {
+			const wrapper = shallowMount(Conversation, {
+				localVue,
+				store,
+				mocks: {
+					$router,
+				},
+				stubs: {
+					NcActionButton,
+					NcButton,
+				},
+				propsData: {
+					isSearchResult: false,
+					item,
+				},
+			})
+			const el = wrapper.findComponent({ name: 'NcListItem' })
+
+			const action = findNcActionButton(el, actionName)
+			expect(action.exists()).toBeTruthy()
+
+			// Act 1 : click on the button from the menu
+			await action.find('button').trigger('click')
+
+			// Assert 1
+			const dialog = wrapper.findComponent({ name: 'NcDialog' })
+			expect(dialog.exists).toBeTruthy()
+			const buttons = dialog.findAllComponents({ name: 'NcButton' })
+			expect(buttons.exists()).toBeTruthy()
+			expect(buttons).toHaveLength(buttonsAmount)
+
+			return buttons
+		}
+
 		describe('leaving conversation', () => {
-			test('leaves conversation', async () => {
-				const actionHandler = jest.fn()
-				testStoreConfig.modules.participantsStore.actions.removeCurrentUserFromConversation = actionHandler
+			let actionHandler
+
+			beforeEach(() => {
 				leaveConversation.mockResolvedValue()
-				const action = shallowMountAndGetAction('Leave conversation')
-				expect(action.exists()).toBe(true)
+				actionHandler = jest.fn().mockResolvedValueOnce()
+				testStoreConfig.modules.participantsStore.actions.removeCurrentUserFromConversation = actionHandler
+				testStoreConfig.modules.conversationsStore.actions.toggleArchive = actionHandler
+				store = new Vuex.Store(testStoreConfig)
+			})
 
-				await action.find('button').trigger('click')
-				await flushPromises()
+			test('leaves conversation when confirmed', async () => {
+				// Arrange
+				const buttons = await shallowMountAndOpenDialog('Leave conversation', 3)
+
+				// Act: click on the 'confirm' button
+				await buttons.at(2).find('button').trigger('click')
 
+				// Assert
 				expect(actionHandler).toHaveBeenCalledWith(expect.anything(), { token: TOKEN })
 			})
 
@@ -379,68 +425,66 @@ describe('Conversation.vue', () => {
 			})
 
 			test('errors with notification when a new moderator is required before leaving', async () => {
-				const actionHandler = jest.fn().mockRejectedValueOnce({
-					response: {
-						status: 400,
-					},
-				})
+				// Arrange
+				actionHandler = jest.fn().mockRejectedValueOnce({ response: { status: 400 } })
 				testStoreConfig.modules.participantsStore.actions.removeCurrentUserFromConversation = actionHandler
+				store = new Vuex.Store(testStoreConfig)
 
-				const action = shallowMountAndGetAction('Leave conversation')
-				expect(action.exists()).toBe(true)
+				const buttons = await shallowMountAndOpenDialog('Leave conversation', 3)
 
-				action.find('button').trigger('click')
+				// Act: click on the 'confirm' button
+				await buttons.at(2).find('button').trigger('click')
 				await flushPromises()
 
+				// Assert
 				expect(actionHandler).toHaveBeenCalledWith(expect.anything(), { token: TOKEN })
 				expect(showError).toHaveBeenCalledWith(expect.stringContaining('promote'))
 			})
+
+			test('does not leave conversation when not confirmed', async () => {
+				// Arrange
+				const buttons = await shallowMountAndOpenDialog('Leave conversation', 3)
+
+				// Act: click on the 'decline' button
+				await buttons.at(1).find('button').trigger('click')
+
+				// Assert
+				expect(actionHandler).not.toHaveBeenCalled()
+			})
+
+			test('archives conversation when selected', async () => {
+				// Arrange
+				const buttons = await shallowMountAndOpenDialog('Leave conversation', 3)
+
+				// Act: click on the 'archive' button
+				await buttons.at(0).find('button').trigger('click')
+
+				// Assert
+				expect(actionHandler).toHaveBeenCalledWith(expect.anything(), item)
+			})
 		})
 
 		describe('deleting conversation', () => {
-			test('deletes conversation when confirmed', async () => {
-				// Arrange
-				const actionHandler = jest.fn().mockResolvedValueOnce()
-				const updateTokenAction = jest.fn()
+			let actionHandler
+			let updateTokenAction
+
+			beforeEach(() => {
+				actionHandler = jest.fn().mockResolvedValueOnce()
+				updateTokenAction = jest.fn()
 				testStoreConfig.modules.conversationsStore.actions.deleteConversationFromServer = actionHandler
 				testStoreConfig.modules.tokenStore.getters.getToken = jest.fn().mockReturnValue(() => 'another-token')
 				testStoreConfig.modules.tokenStore.actions.updateToken = updateTokenAction
+				store = new Vuex.Store(testStoreConfig)
+			})
+
+			test('deletes conversation when confirmed', async () => {
+				// Arrange
+				const buttons = await shallowMountAndOpenDialog('Delete conversation', 2)
 
-				const wrapper = shallowMount(Conversation, {
-					localVue,
-					store: new Vuex.Store(testStoreConfig),
-					mocks: {
-						$router,
-					},
-					stubs: {
-						NcActionButton,
-						NcDialog,
-						NcButton,
-					},
-					propsData: {
-						isSearchResult: false,
-						item,
-					},
-				})
-				const el = wrapper.findComponent({ name: 'NcListItem' })
-
-				const action = findNcActionButton(el, 'Delete conversation')
-				expect(action.exists()).toBe(true)
-
-				// Act 1 : click on the button from the menu
-				await action.find('button').trigger('click')
-
-				// Assert 1
-				const dialog = wrapper.findComponent({ name: 'NcDialog' })
-				expect(dialog.exists).toBeTruthy()
-				const buttons = dialog.findAllComponents({ name: 'NcButton' })
-				expect(buttons.exists()).toBeTruthy()
-				expect(buttons).toHaveLength(2)
-
-				// Act 2 : click on the confirm button
+				// Act: click on the 'confirm' button
 				await buttons.at(1).find('button').trigger('click')
 
-				// Assert 2
+				// Assert
 				expect(actionHandler).toHaveBeenCalledWith(expect.anything(), { token: TOKEN })
 				expect($router.push).not.toHaveBeenCalled()
 				expect(updateTokenAction).not.toHaveBeenCalled()
@@ -448,47 +492,12 @@ describe('Conversation.vue', () => {
 
 			test('does not delete conversation when not confirmed', async () => {
 				// Arrange
-				const actionHandler = jest.fn().mockResolvedValueOnce()
-				const updateTokenAction = jest.fn()
-				testStoreConfig.modules.conversationsStore.actions.deleteConversationFromServer = actionHandler
-				testStoreConfig.modules.tokenStore.getters.getToken = jest.fn().mockReturnValue(() => 'another-token')
-				testStoreConfig.modules.tokenStore.actions.updateToken = updateTokenAction
+				const buttons = await shallowMountAndOpenDialog('Delete conversation', 2)
 
-				const wrapper = shallowMount(Conversation, {
-					localVue,
-					store: new Vuex.Store(testStoreConfig),
-					mocks: {
-						$router,
-					},
-					stubs: {
-						NcActionButton,
-						NcDialog,
-						NcButton,
-					},
-					propsData: {
-						isSearchResult: false,
-						item,
-					},
-				})
-				const el = wrapper.findComponent({ name: 'NcListItem' })
-
-				const action = findNcActionButton(el, 'Delete conversation')
-				expect(action.exists()).toBe(true)
-
-				// Act 1 : click on the button from the menu
-				await action.find('button').trigger('click')
-
-				// Assert 1
-				const dialog = wrapper.findComponent({ name: 'NcDialog' })
-				expect(dialog.exists).toBeTruthy()
-				const buttons = dialog.findAllComponents({ name: 'NcButton' })
-				expect(buttons.exists()).toBeTruthy()
-				expect(buttons).toHaveLength(2)
-
-				// Act 2 : click on the confirm button
+				// Act: click on the 'decline' button
 				await buttons.at(0).find('button').trigger('click')
 
-				// Assert 2
+				// Assert
 				expect(actionHandler).not.toHaveBeenCalled()
 				expect($router.push).not.toHaveBeenCalled()
 				expect(updateTokenAction).not.toHaveBeenCalled()
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index cf6648684bb..6c5738e1ef2 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -71,7 +71,7 @@
 			<NcActionButton v-if="item.canLeaveConversation"
 				key="leave-conversation"
 				close-after-click
-				@click="leaveConversation">
+				@click="isLeaveDialogOpen = true">
 				<template #icon>
 					<IconExitToApp :size="16" />
 				</template>
@@ -82,7 +82,7 @@
 				key="delete-conversation"
 				close-after-click
 				class="critical"
-				@click="isDialogOpen = true">
+				@click="isDeleteDialogOpen = true">
 				<template #icon>
 					<IconDelete :size="16" />
 				</template>
@@ -106,13 +106,30 @@
 			</NcActionButton>
 		</template>
 
-		<!-- confirmation required to delete conversation -->
-		<template v-if="isDialogOpen" #extra>
-			<NcDialog :open.sync="isDialogOpen"
+		<!-- confirmation required to leave / delete conversation -->
+		<template v-if="isLeaveDialogOpen || isDeleteDialogOpen" #extra>
+			<NcDialog v-if="isLeaveDialogOpen"
+				:open.sync="isLeaveDialogOpen"
+				:name="t('spreed', 'Leave conversation')"
+				:message="dialogLeaveMessage">
+				<template #actions>
+					<NcButton v-if="supportsArchive && !item.isArchived" type="secondary" @click="toggleArchiveConversation">
+						{{ t('spreed', 'Archive instead') }}
+					</NcButton>
+					<NcButton type="tertiary" @click="isLeaveDialogOpen = false">
+						{{ t('spreed', 'No') }}
+					</NcButton>
+					<NcButton type="warning" @click="leaveConversation">
+						{{ t('spreed', 'Yes') }}
+					</NcButton>
+				</template>
+			</NcDialog>
+			<NcDialog v-if="isDeleteDialogOpen"
+				:open.sync="isDeleteDialogOpen"
 				:name="t('spreed','Delete conversation')"
-				:message="dialogMessage">
+				:message="dialogDeleteMessage">
 				<template #actions>
-					<NcButton type="tertiary" @click="isDialogOpen = false">
+					<NcButton type="tertiary" @click="isDeleteDialogOpen = false">
 						{{ t('spreed', 'No') }}
 					</NcButton>
 					<NcButton type="error" @click="deleteConversation">
@@ -126,7 +143,7 @@
 
 <script>
 
-import { toRefs } from 'vue'
+import { toRefs, ref } from 'vue'
 import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 
 import IconArchive from 'vue-material-design-icons/Archive.vue'
@@ -209,22 +226,20 @@ export default {
 	emits: ['click'],
 
 	setup(props) {
+		const isLeaveDialogOpen = ref(false)
+		const isDeleteDialogOpen = ref(false)
 		const { item, isSearchResult } = toRefs(props)
 		const { counterType, conversationInformation } = useConversationInfo({ item, isSearchResult })
 
 		return {
 			supportsArchive,
+			isLeaveDialogOpen,
+			isDeleteDialogOpen,
 			counterType,
 			conversationInformation,
 		}
 	},
 
-	data() {
-		return {
-			isDialogOpen: false,
-		}
-	},
-
 	computed: {
 		canFavorite() {
 			return this.item.participantType !== PARTICIPANT.TYPE.USER_SELF_JOINED
@@ -244,7 +259,14 @@ export default {
 				: t('spreed', 'Archive conversation')
 		},
 
-		dialogMessage() {
+		dialogLeaveMessage() {
+			return t('spreed', 'Do you really want to leave "{displayName}"?', this.item, undefined, {
+				escape: false,
+				sanitize: false,
+			})
+		},
+
+		dialogDeleteMessage() {
 			return t('spreed', 'Do you really want to delete "{displayName}"?', this.item, undefined, {
 				escape: false,
 				sanitize: false,
@@ -285,7 +307,7 @@ export default {
 		 */
 		async deleteConversation() {
 			try {
-				this.isDialogOpen = false
+				this.isDeleteDialogOpen = false
 				if (this.isActive) {
 					await this.$store.dispatch('leaveConversation', { token: this.item.token })
 					await this.$router.push({ name: 'root' })
@@ -303,6 +325,7 @@ export default {
 		 */
 		async leaveConversation() {
 			try {
+				this.isLeaveDialogOpen = false
 				if (this.isActive) {
 					await this.$store.dispatch('leaveConversation', { token: this.item.token })
 					await this.$router.push({ name: 'root' })
@@ -323,6 +346,7 @@ export default {
 		},
 
 		async toggleArchiveConversation() {
+			this.isLeaveDialogOpen = false
 			this.$store.dispatch('toggleArchive', this.item)
 		},