Merge pull request #51473 from nextcloud/backport/51469/stable30

[stable30] fix(files_sharing): ensure share status action works also in grid view

apps/files/src/components/FileEntry/FileEntryActions.vue

@@ -25,12 +25,14 @@
 			:open.sync="openedMenu"
 			@close="openedSubmenu = null">
 			<!-- Default actions list-->
-			<NcActionButton v-for="action in enabledMenuActions"
+			<NcActionButton v-for="action, index in enabledMenuActions"
 				:key="action.id"
 				:ref="`action-${action.id}`"
+				class="files-list__row-action"
 				:class="{
 					[`files-list__row-action-${action.id}`]: true,
-					[`files-list__row-action--menu`]: isMenu(action.id)
+					'files-list__row-action--inline': index < enabledInlineActions.length,
+					'files-list__row-action--menu': isMenu(action.id)
 				}"
 				:close-after-click="!isMenu(action.id)"
 				:data-cy-files-list-row-action="action.id"
@@ -40,9 +42,11 @@
 				@click="onActionClick(action)">
 				<template #icon>
 					<NcLoadingIcon v-if="loading === action.id" :size="18" />
-					<NcIconSvgWrapper v-else :svg="action.iconSvgInline([source], currentView)" />
+					<NcIconSvgWrapper v-else
+						class="files-list__row-action-icon"
+						:svg="action.iconSvgInline([source], currentView)" />
 				</template>
-				{{ mountType === 'shared' && action.id === 'sharing-status' ? '' : actionDisplayName(action) }}
+				{{ actionDisplayName(action) }}
 			</NcActionButton>
 
 			<!-- Submenu actions list-->
@@ -235,10 +239,6 @@ export default defineComponent({
 		getBoundariesElement() {
 			return document.querySelector('.app-content > .files-list')
 		},
-
-		mountType() {
-			return this.source.attributes['mount-type']
-		},
 	},
 
 	watch: {
@@ -358,13 +358,19 @@ main.app-content[style*="mouse-pos-x"] .v-popper__popper {
 }
 </style>
 
-<style lang="scss" scoped>
-:deep(.button-vue--icon-and-text, .files-list__row-action-sharing-status) {
-	.button-vue__text {
-		color: var(--color-primary-element);
+<style scoped lang="scss">
+.files-list__row-action {
+	--max-icon-size: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
+
+	// inline icons can have clickable area size so they still fit into the row
+	&.files-list__row-action--inline {
+		--max-icon-size: var(--default-clickable-area);
 	}
-	.button-vue__icon {
-		color: var(--color-primary-element);
+
+	// Some icons exceed the default size so we need to enforce a max width and height
+	.files-list__row-action-icon :deep(svg) {
+		max-height: var(--max-icon-size) !important;
+		max-width: var(--max-icon-size) !important;
 	}
 }
 </style>

apps/files_sharing/src/actions/sharingStatusAction.scss

@@ -18,3 +18,12 @@ svg.sharing-status__avatar {
 	border-radius: 32px;
 	overflow: hidden;
 }
+
+.files-list__row-action-sharing-status {
+	.button-vue__text {
+		color: var(--color-primary-element);
+	}
+	.button-vue__icon {
+		color: var(--color-primary-element);
+	}
+}

cypress/e2e/files_sharing/share-status-action.cy.ts

@@ -4,13 +4,13 @@
  */
 import type { User } from '@nextcloud/cypress'
 import { createShare } from './FilesSharingUtils.ts'
-import { closeSidebar, getRowForFile } from '../files/FilesUtils.ts'
+import { closeSidebar, enableGridMode, getActionButtonForFile, getRowForFile } from '../files/FilesUtils.ts'
 
-describe('files_sharing: Files inline status action', { testIsolation: true }, () => {
+describe('files_sharing: Sharing status action', { testIsolation: true }, () => {
 	/**
 	 * Regression test of https://github.com/nextcloud/server/issues/45723
 	 */
-	it('No "shared" tag when user ID is purely numerical', () => {
+	it('No "shared" tag when user ID is purely numerical but there are no shares', () => {
 		const user = {
 			language: 'en',
 			password: 'test1234',
@@ -29,51 +29,54 @@ describe('files_sharing: Files inline status action', { testIsolation: true }, (
 			.should('not.exist')
 	})
 
+	it('Render quick option for sharing', () => {
+		cy.createRandomUser().then((user) => {
+			cy.mkdir(user, '/folder')
+			cy.login(user)
+
+			cy.visit('/apps/files')
+		})
+
+		getRowForFile('folder')
+			.should('be.visible')
+			.find('[data-cy-files-list-row-actions]')
+			.findByRole('button', { name: /Show sharing options/ })
+			.should('be.visible')
+			.click()
+
+		// check the click opened the sidebar
+		cy.get('[data-cy-sidebar]')
+			.should('be.visible')
+			// and ensure the sharing tab is selected
+			.findByRole('tab', { name: 'Sharing', selected: true })
+			.should('exist')
+	})
+
 	describe('Sharing inline status action handling', () => {
 		let user: User
 		let sharee: User
 
-		beforeEach(() => {
-			cy.createRandomUser().then(($user) => {
-				user = $user
-			})
+		before(() => {
 			cy.createRandomUser().then(($user) => {
 				sharee = $user
 			})
-		})
+			cy.createRandomUser().then(($user) => {
+				user = $user
+				cy.mkdir(user, '/folder')
+				cy.login(user)
 
-		it('Render quick option for sharing', () => {
-			cy.mkdir(user, '/folder')
-			cy.login(user)
+				cy.visit('/apps/files')
+				getRowForFile('folder').should('be.visible')
 
-			cy.visit('/apps/files')
-			getRowForFile('folder')
-				.should('be.visible')
-
-			getRowForFile('folder')
-				.should('be.visible')
-				.find('[data-cy-files-list-row-actions]')
-				.findByRole('button', { name: /Show sharing options/ })
-				.should('be.visible')
-				.click()
-
-			// check the click opened the sidebar
-			cy.get('[data-cy-sidebar]')
-				.should('be.visible')
-				// and ensure the sharing tab is selected
-				.findByRole('tab', { name: 'Sharing', selected: true })
-				.should('exist')
+				createShare('folder', sharee.userId)
+				closeSidebar()
+			})
+			cy.logout()
 		})
 
 		it('Render inline status action for sharer', () => {
-			cy.mkdir(user, '/folder')
 			cy.login(user)
-
 			cy.visit('/apps/files')
-			getRowForFile('folder')
-				.should('be.visible')
-			createShare('folder', sharee.userId)
-			closeSidebar()
 
 			getRowForFile('folder')
 				.should('be.visible')
@@ -82,16 +85,21 @@ describe('files_sharing: Files inline status action', { testIsolation: true }, (
 				.should('be.visible')
 		})
 
-		it('Render inline status action for sharee', () => {
-			cy.mkdir(user, '/folder')
+		it('Render status action in gridview for sharer', () => {
 			cy.login(user)
-
 			cy.visit('/apps/files')
+			enableGridMode()
+
 			getRowForFile('folder')
 				.should('be.visible')
-			createShare('folder', sharee.userId)
-			closeSidebar()
+			getActionButtonForFile('folder')
+				.click()
+			cy.findByRole('menu')
+				.findByRole('menuitem', { name: /shared with/i })
+				.should('be.visible')
+		})
 
+		it('Render inline status action for sharee', () => {
 			cy.login(sharee)
 			cy.visit('/apps/files')
 
@@ -101,5 +109,20 @@ describe('files_sharing: Files inline status action', { testIsolation: true }, (
 				.findByRole('button', { name: `Shared by ${user.userId}` })
 				.should('be.visible')
 		})
+
+		it('Render status action in grid view for sharee', () => {
+			cy.login(sharee)
+			cy.visit('/apps/files')
+
+			enableGridMode()
+
+			getRowForFile('folder')
+				.should('be.visible')
+			getActionButtonForFile('folder')
+				.click()
+			cy.findByRole('menu')
+				.findByRole('menuitem', { name: `Shared by ${user.userId}` })
+				.should('be.visible')
+		})
 	})
 })