[stable31] 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`]: isValidMenu(action)
+					'files-list__row-action--inline': index < enabledInlineActions.length,
+					'files-list__row-action--menu': isValidMenu(action)
 				}"
 				:close-after-click="!isValidMenu(action)"
 				:data-cy-files-list-row-action="action.id"
@@ -39,10 +41,12 @@
 				:title="action.title?.([source], currentView)"
 				@click="onActionClick(action)">
 				<template #icon>
-					<NcLoadingIcon v-if="isLoadingAction(action)" :size="18" />
-					<NcIconSvgWrapper v-else :svg="action.iconSvgInline([source], currentView)" />
+					<NcLoadingIcon v-if="isLoadingAction(action)" />
+					<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-->
@@ -223,10 +227,6 @@ export default defineComponent({
 		getBoundariesElement() {
 			return document.querySelector('.app-content > .files-list')
 		},
-
-		mountType() {
-			return this.source.attributes['mount-type']
-		},
 	},
 
 	watch: {
@@ -324,13 +324,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/files_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/files-inline-action.cy.ts → 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,76 +29,99 @@ 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(() => {
+		before(() => {
 			cy.createRandomUser().then(($user) => {
-				user = $user
+				sharee = $user
 			})
 			cy.createRandomUser().then(($user) => {
-				sharee = $user
+				user = $user
+				cy.mkdir(user, '/folder')
+				cy.login(user)
+
+				cy.visit('/apps/files')
+				getRowForFile('folder').should('be.visible')
+
+				createShare('folder', sharee.userId)
+				closeSidebar()
 			})
+			cy.logout()
 		})
 
-		it('Render quick option for sharing', () => {
-			cy.mkdir(user, '/folder')
+		it('Render inline status action for sharer', () => {
 			cy.login(user)
-
 			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]')
+				.findByRole('button', { name: /^Shared with/i })
 				.should('be.visible')
-				// and ensure the sharing tab is selected
-				.findByRole('tab', { name: 'Sharing', selected: true })
-				.should('exist')
 		})
 
-		it('Render inline status action for sharer', () => {
-			cy.mkdir(user, '/folder')
+		it('Render status action in gridview for sharer', () => {
 			cy.login(user)
-
 			cy.visit('/apps/files')
-			getRowForFile('folder')
-				.should('be.visible')
-			createShare('folder', sharee.userId)
-			closeSidebar()
+			enableGridMode()
 
 			getRowForFile('folder')
 				.should('be.visible')
-				.find('[data-cy-files-list-row-actions]')
-				.findByRole('button', { name: /^Shared with/i })
+			getActionButtonForFile('folder')
+				.click()
+			cy.findByRole('menu')
+				.findByRole('menuitem', { name: /shared with/i })
 				.should('be.visible')
 		})
 
 		it('Render inline status action for sharee', () => {
-			cy.mkdir(user, '/folder')
-			cy.login(user)
-
+			cy.login(sharee)
 			cy.visit('/apps/files')
+
 			getRowForFile('folder')
 				.should('be.visible')
-			createShare('folder', sharee.userId)
-			closeSidebar()
+				.find('[data-cy-files-list-row-actions]')
+				.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')
-				.find('[data-cy-files-list-row-actions]')
-				.findByRole('button', { name: `Shared by ${user.userId}` })
+			getActionButtonForFile('folder')
+				.click()
+			cy.findByRole('menu')
+				.findByRole('menuitem', { name: `Shared by ${user.userId}` })
 				.should('be.visible')
 		})
 	})