fix(Sidebar): Only close sidebar on v-click-outside for specific targets

cypress/e2e/boardFeatures.js

@@ -1,10 +1,12 @@
 import { randUser } from '../utils/index.js'
 const user = randUser()
+const recipient = randUser()
 
 describe('Board', function() {
 
 	before(function() {
 		cy.createUser(user)
+		cy.createUser(recipient)
 	})
 
 	beforeEach(function() {
@@ -21,7 +23,6 @@ describe('Board', function() {
 		}).as('createBoardRequest')
 
 		// Click "Add board"
-		cy.openLeftSidebar()
 		cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry')
 			.eq(3).find('a').first().click({ force: true })
 
@@ -38,4 +39,18 @@ describe('Board', function() {
 		cy.get('.app-navigation__list .app-navigation-entry__children .app-navigation-entry')
 			.contains(board).should('be.visible')
 	})
+
+	it('Shows and hides the navigation', () => {
+		cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry')
+			.contains('Upcoming cards')
+			.should('be.visible')
+		cy.openLeftSidebar()
+		cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry')
+			.contains('Upcoming cards')
+			.should('not.be.visible')
+		cy.openLeftSidebar()
+		cy.get('#app-navigation-vue .app-navigation__list .app-navigation-entry')
+			.contains('Upcoming cards')
+			.should('be.visible')
+	})
 })

cypress/e2e/cardFeatures.js

@@ -1,40 +1,29 @@
 import { randUser } from '../utils/index.js'
-const user = randUser()
+import { sampleBoard } from '../utils/sampleBoard'
 
-const testBoardData = {
-	title: 'MyBoardTest',
-	color: '00ff00',
-	stacks: [
-		{
-			title: 'TestList',
-			cards: [
-				{
-					title: 'Hello world',
-				},
-			],
-		},
-	],
-}
+const user = randUser()
+const boardData = sampleBoard()
 
 describe('Card', function() {
+	let boardId
 	before(function() {
 		cy.createUser(user)
 		cy.login(user)
 		cy.createExampleBoard({
-			user: user.userId,
-			password: user.password,
-			board: testBoardData,
+			user,
+			board: boardData,
+		}).then((board) => {
+			boardId = board.id
 		})
 	})
 
 	beforeEach(function() {
 		cy.login(user)
-		cy.visit('/apps/deck')
+		cy.visit(`/apps/deck/#/board/${boardId}`)
 	})
 
 	it('Can show card details modal', function() {
-		cy.openLeftSidebar()
-		cy.getNavigationEntry(testBoardData.title)
+		cy.getNavigationEntry(boardData.title)
 			.first().click({ force: true })
 
 		cy.get('.board .stack').eq(0).within(() => {
@@ -48,8 +37,7 @@ describe('Card', function() {
 	it('Can add a card', function() {
 		const newCardTitle = 'Write some cypress tests'
 
-		cy.openLeftSidebar()
-		cy.getNavigationEntry(testBoardData.title)
+		cy.getNavigationEntry(boardData.title)
 			.first().click({ force: true })
 
 		cy.get('.board .stack').eq(0).within(() => {

cypress/e2e/deckDashboard.js

@@ -20,7 +20,6 @@ describe('Deck dashboard', function() {
 	it('Can see the default "Personal Board" created for user by default', function() {
 		const defaultBoard = 'Personal'
 
-		cy.openLeftSidebar()
 		cy.get('.app-navigation-entry-wrapper[icon=icon-deck]')
 			.find('ul.app-navigation-entry__children .app-navigation-entry:contains(' + defaultBoard + ')')
 			.first()

cypress/e2e/sharingFeatures.js

@@ -0,0 +1,50 @@
+import { randUser } from '../utils/index.js'
+import { sampleBoard } from '../utils/sampleBoard'
+const user = randUser()
+const recipient = randUser()
+
+describe('Board', function() {
+	before(function() {
+		cy.createUser(user)
+		cy.createUser(recipient)
+	})
+
+	beforeEach(function() {
+		cy.login(user)
+	})
+
+	it('Share a board to a user', function() {
+		const board = sampleBoard('Read only board')
+		cy.createExampleBoard({ user, board }).then((board) => {
+			const boardId = board.id
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+			cy.get('.board-title').contains(board.title)
+
+			cy.shareBoardWithUi(recipient.userId)
+
+			cy.login(recipient)
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+			cy.get('.board-title').contains(board.title)
+			cy.get('.button-vue[aria-label*="Add card"]')
+				.should('not.exist')
+		})
+	})
+
+	it('Share a board to a user as writable', function() {
+		const board = sampleBoard('Editable board')
+		cy.createExampleBoard({ user, board }).then((board) => {
+			const boardId = board.id
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+			cy.get('.board-title').contains(board.title)
+
+			cy.shareBoardWithUi(recipient.userId)
+			cy.get(`[data-cy="acl-participant:${recipient.userId}"]`).find('[data-cy="action:permission-edit"]').click()
+
+			cy.login(recipient)
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+			cy.get('.board-title').contains(board.title)
+			cy.get('.button-vue[aria-label*="Add card"]')
+				.first().click()
+		})
+	})
+})

cypress/e2e/stackFeatures.js

@@ -16,8 +16,7 @@ describe('Stack', function() {
 		cy.createUser(user)
 		cy.login(user)
 		cy.createExampleBoard({
-			user: user.userId,
-			password: user.password,
+			user,
 			board: testBoardData,
 		})
 	})

cypress/support/commands.js

@@ -63,14 +63,15 @@ Cypress.Commands.add('deckCreateList', ({ user, password }, title) => {
 	cy.get('#stack-add form input[type=submit]').first().click()
 })
 
-Cypress.Commands.add('createExampleBoard', ({ user, password, board }) => {
+Cypress.Commands.add('createExampleBoard', ({ user, board }) => {
+	const auth = {
+		user: user.userId,
+		password: user.password,
+	}
 	cy.request({
 		method: 'POST',
 		url: `${Cypress.env('baseUrl')}/index.php/apps/deck/api/v1.0/boards`,
-		auth: {
-			user,
-			password,
-		},
+		auth,
 		body: { title: board.title, color: board.color ?? 'ff0000' },
 	}).then((boardResponse) => {
 		expect(boardResponse.status).to.eq(200)
@@ -80,10 +81,7 @@ Cypress.Commands.add('createExampleBoard', ({ user, password, board }) => {
 			cy.request({
 				method: 'POST',
 				url: `${Cypress.env('baseUrl')}/index.php/apps/deck/api/v1.0/boards/${boardData.id}/stacks`,
-				auth: {
-					user,
-					password,
-				},
+				auth,
 				body: { title: stack.title, order: 0 },
 			}).then((stackResponse) => {
 				const stackData = stackResponse.body
@@ -92,15 +90,13 @@ Cypress.Commands.add('createExampleBoard', ({ user, password, board }) => {
 					cy.request({
 						method: 'POST',
 						url: `${Cypress.env('baseUrl')}/index.php/apps/deck/api/v1.0/boards/${boardData.id}/stacks/${stackData.id}/cards`,
-						auth: {
-							user,
-							password,
-						},
+						auth,
 						body: { title: card.title },
 					})
 				}
 			})
 		}
+		cy.wrap(boardData)
 	})
 })
 
@@ -109,3 +105,13 @@ Cypress.Commands.add('getNavigationEntry', (boardTitle) => {
 		.find('ul.app-navigation-entry__children .app-navigation-entry:contains(' + boardTitle + ')')
 		.find('a.app-navigation-entry-link')
 })
+
+Cypress.Commands.add('shareBoardWithUi', (userId) => {
+	cy.get('[aria-label="Open details"]').click()
+	cy.get('.app-sidebar').should('be.visible')
+	cy.get('.multiselect__input').type(`${userId}`)
+	cy.get('.multiselect__content .multiselect__element').first().contains(userId)
+	cy.get('.multiselect__input').type('{enter}')
+
+	cy.get('.shareWithList').contains(userId)
+})

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue2'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

cypress/utils/sampleBoard.js

@@ -0,0 +1,37 @@
+/*
+ * @copyright Copyright (c) 2022 Julius Härtl <[email protected]>
+ *
+ * @author Julius Härtl <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export const sampleBoard = (title = 'MyTestBoard') => {
+	return {
+		title: title,
+		color: '00ff00',
+		stacks: [
+			{
+				title: 'TestList',
+				cards: [
+					{
+						title: 'Hello world',
+					},
+				],
+			},
+		],
+	}
+}

src/components/Sidebar.vue

@@ -38,10 +38,9 @@ export default {
 			this.$router.push({ name: 'board' })
 		},
 		onClickOutside(e) {
-			if (Array.from(document.querySelectorAll('.card')).some(node => node.contains(e.target))) {
-				return
+			if (e.target?.dataset?.clickClosesSidebar) {
+				this.closeSidebar()
 			}
-			this.closeSidebar()
 		},
 	},
 }

src/components/board/Board.vue

@@ -53,11 +53,12 @@
 				<Container lock-axix="y"
 					orientation="horizontal"
 					:drag-handle-selector="dragHandleSelector"
+					data-click-closes-sidebar="true"
 					@drag-start="draggingStack = true"
 					@drag-end="draggingStack = false"
 					@drop="onDropStack">
-					<Draggable v-for="stack in stacksByBoard" :key="stack.id">
-						<Stack :stack="stack" :dragging="draggingStack" />
+					<Draggable v-for="stack in stacksByBoard" :key="stack.id" data-click-closes-sidebar="true">
+						<Stack :stack="stack" :dragging="draggingStack" data-click-closes-sidebar="true" />
 					</Draggable>
 				</Container>
 			</div>

src/components/board/SharingTabSidebar.vue

@@ -31,7 +31,7 @@
 					</span>
 				</span>
 			</li>
-			<li v-for="acl in board.acl" :key="acl.id">
+			<li v-for="acl in board.acl" :key="acl.id" :data-cy="'acl-participant:' + acl.participant.uid">
 				<NcAvatar v-if="acl.type===0" :user="acl.participant.uid" />
 				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
 				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
@@ -41,20 +41,35 @@
 					<span v-if="acl.type===7">{{ t('deck', '(Circle)') }}</span>
 				</span>
 
-				<NcActionCheckbox v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0) && (canManage || (canEdit && canShare))" :checked="acl.permissionEdit" @change="clickEditAcl(acl)">
+				<NcActionCheckbox v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0) && (canManage || (canEdit && canShare))"
+					:checked="acl.permissionEdit"
+					data-cy="action:permission-edit"
+					@change="clickEditAcl(acl)">
 					{{ t('deck', 'Can edit') }}
 				</NcActionCheckbox>
 				<NcActions v-if="!(isCurrentUser(acl.participant.uid) && acl.type === 0)" :force-menu="true">
-					<NcActionCheckbox v-if="canManage || canShare" :checked="acl.permissionShare" @change="clickShareAcl(acl)">
+					<NcActionCheckbox v-if="canManage || canShare"
+						:checked="acl.permissionShare"
+						data-cy="action:permission-share"
+						@change="clickShareAcl(acl)">
 						{{ t('deck', 'Can share') }}
 					</NcActionCheckbox>
-					<NcActionCheckbox v-if="canManage" :checked="acl.permissionManage" @change="clickManageAcl(acl)">
+					<NcActionCheckbox v-if="canManage"
+						:checked="acl.permissionManage"
+						data-cy="action:permission-manage"
+						@change="clickManageAcl(acl)">
 						{{ t('deck', 'Can manage') }}
 					</NcActionCheckbox>
-					<NcActionCheckbox v-if="acl.type === 0 && isCurrentUser(board.owner.uid)" :checked="acl.owner" @change="clickTransferOwner(acl.participant.uid)">
+					<NcActionCheckbox v-if="acl.type === 0 && isCurrentUser(board.owner.uid)"
+						:checked="acl.owner"
+						data-cy="action:permission-owner"
+						@change="clickTransferOwner(acl.participant.uid)">
 						{{ t('deck', 'Owner') }}
 					</NcActionCheckbox>
-					<NcActionButton v-if="canManage" icon="icon-delete" @click="clickDeleteAcl(acl)">
+					<NcActionButton v-if="canManage"
+						icon="icon-delete"
+						data-cy="action:acl-delete"
+						@click="clickDeleteAcl(acl)">
 						{{ t('deck', 'Delete') }}
 					</NcActionButton>
 				</NcActions>