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

Remove some hacks from files app about the *files_sharing* status
action, in general not sure why this hack was there instead of being in
the correct app - but it broke the grid view.

So now the sharing information is also available in grid view.

Moreover the icon is fixed in size to not overflow the actions menu.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

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);
+	}
+}

…/files_sharing/files-inline-action.cy.ts …/files_sharing/share-status-action.cy.tscypress/e2e/files_sharing/files-inline-action.cy.ts renamed to cypress/e2e/files_sharing/share-status-action.cy.ts cypress/e2e/files_sharing/files-inline-action.cy.ts renamed to 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')
 		})
 	})