Merge pull request #7011 from LibreSign/backport/7010/stable33

[stable33] feat: files list header restructure

Author: vitormattos

src/components/Request/RequestPicker.vue

@@ -8,6 +8,7 @@
 			:inline="inline ? 3 : 0"
 			:force-name="inline"
 			:class="{column: inline}"
+			:variant="variant"
 			v-model:open="openedMenu">
 			<template #icon>
 				<NcIconSvgWrapper :path="mdiPlus" :size="20" />
@@ -147,6 +148,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		variant: {
+			type: String,
+			default: 'tertiary',
+		},
 	},
 	setup() {
 		const actionsMenuStore = useActionsMenuStore()

src/tests/components/Request/RequestPicker.spec.ts

@@ -173,6 +173,39 @@ describe('RequestPicker component rules', () => {
 		})
 	})
 
+	describe('variant prop', () => {
+		const mountWithVariantStub = (props = {}) => mount(RequestPicker, {
+			props,
+			global: {
+				stubs: {
+					NcActions: {
+						name: 'NcActions',
+						props: ['variant'],
+						template: '<div class="nc-actions-stub" :data-variant="variant"><slot /></div>',
+					},
+					NcActionButton: true,
+					NcButton: true,
+					NcDialog: true,
+					NcTextField: true,
+					NcLoadingIcon: true,
+					NcNoteCard: true,
+					UploadProgress: true,
+				},
+				mocks: { t: tSimple },
+			},
+		})
+
+		it('defaults variant to tertiary', () => {
+			const w = mountWithVariantStub()
+			expect(w.find('.nc-actions-stub').attributes('data-variant')).toBe('tertiary')
+		})
+
+		it('passes custom variant to NcActions', () => {
+			const w = mountWithVariantStub({ variant: 'primary' })
+			expect(w.find('.nc-actions-stub').attributes('data-variant')).toBe('primary')
+		})
+	})
+
 	describe('envelope support', () => {
 		it('enables envelope mode when capabilities indicate is-available true', () => {
 			getCapabilitiesMock.mockReturnValue({

src/tests/views/FilesList/FilesList.spec.ts

@@ -74,7 +74,17 @@ vi.mock('@nextcloud/vue/components/NcAppContent', () => ({
 	default: { name: 'NcAppContent', template: '<div><slot /></div>' },
 }))
 vi.mock('@nextcloud/vue/components/NcBreadcrumb', () => ({
-	default: { name: 'NcBreadcrumb', template: '<div><slot name="icon" /></div>' },
+	default: {
+		name: 'NcBreadcrumb',
+		template: '<div><slot name="icon" /><slot name="menu-icon" /><slot /></div>',
+	},
+}))
+vi.mock('@nextcloud/vue/components/NcActionButton', () => ({
+	default: {
+		name: 'NcActionButton',
+		emits: ['click'],
+		template: '<button class="nc-action-button-stub" @click="$emit(\'click\')"><slot /></button>',
+	},
 }))
 vi.mock('@nextcloud/vue/components/NcBreadcrumbs', () => ({
 	default: { name: 'NcBreadcrumbs', template: '<div><slot /><slot name="actions" /></div>' },
@@ -141,6 +151,45 @@ describe('FilesList.vue rendering rules', () => {
 		expect(wrapper.vm.mdiFolder).toBeTruthy()
 		expect(wrapper.vm.mdiViewGrid).toBeTruthy()
 		expect(wrapper.vm.mdiViewList).toBeTruthy()
+		expect(wrapper.vm.mdiChevronDown).toBeTruthy()
+		expect(wrapper.vm.mdiChevronUp).toBeTruthy()
+		expect(wrapper.vm.mdiReload).toBeTruthy()
+	})
+
+	it('initialises isMenuOpen as false', async () => {
+		const filesStore = useFilesStore()
+		vi.spyOn(filesStore, 'getAllFiles').mockResolvedValue({})
+
+		const wrapper = mountComponent()
+		await flushPromises()
+
+		expect(wrapper.vm.isMenuOpen).toBe(false)
+	})
+
+	it('renders RequestPicker before the breadcrumbs in the header', async () => {
+		const filesStore = useFilesStore()
+		vi.spyOn(filesStore, 'getAllFiles').mockResolvedValue({})
+
+		const wrapper = mountComponent()
+		await flushPromises()
+
+		const header = wrapper.find('.files-list__header')
+		const firstChild = header.element.children[0]
+		expect(firstChild.classList.contains('request-picker-stub')).toBe(true)
+	})
+
+	it('calls filesStore.updateAllFiles once more when reload button is clicked', async () => {
+		const filesStore = useFilesStore()
+		vi.spyOn(filesStore, 'getAllFiles').mockResolvedValue({})
+		const updateSpy = vi.spyOn(filesStore, 'updateAllFiles').mockResolvedValue({})
+
+		const wrapper = mountComponent()
+		await flushPromises()
+
+		const callsBefore = updateSpy.mock.calls.length
+		await wrapper.find('.nc-action-button-stub').trigger('click')
+
+		expect(updateSpy.mock.calls.length).toBe(callsBefore + 1)
 	})
 
 	it('shows empty-state request action when user can request sign', async () => {
@@ -186,7 +235,8 @@ describe('FilesList.vue rendering rules', () => {
 		const wrapper = mountComponent()
 		await flushPromises()
 
-		const iconWithPath = wrapper.findAll('.nc-icon').find((node) => !!node.attributes('data-path'))
+		const gridButton = wrapper.find('.files-list__header-grid-button')
+		const iconWithPath = gridButton.findAll('.nc-icon').find((node) => !!node.attributes('data-path'))
 		expect(iconWithPath?.attributes('data-path')).toBe(wrapper.vm.mdiViewGrid)
 	})
 
@@ -199,7 +249,8 @@ describe('FilesList.vue rendering rules', () => {
 		const wrapper = mountComponent()
 		await flushPromises()
 
-		const iconWithPath = wrapper.findAll('.nc-icon').find((node) => !!node.attributes('data-path'))
+		const gridButton = wrapper.find('.files-list__header-grid-button')
+		const iconWithPath = gridButton.findAll('.nc-icon').find((node) => !!node.attributes('data-path'))
 		expect(iconWithPath?.attributes('data-path')).toBe(wrapper.vm.mdiViewList)
 	})
 })

src/views/FilesList/FilesList.vue

@@ -5,25 +5,40 @@
 <template>
 	<NcAppContent :page-heading="t('libresign', 'Files')">
 		<div class="files-list__header">
+			<!-- Request picker -->
+			<RequestPicker variant="primary" />
+
+			<!-- Current folder breadcrumbs -->
 			<NcBreadcrumbs class="files-list__breadcrumbs">
 				<NcBreadcrumb :name="t('libresign', 'Files')"
 					:title="t('libresign', 'Files')"
 					:force-icon-text="true"
 					:to="{ name: 'fileslist' }"
 					:aria-description="t('libresign', 'Files')"
 					:disable-drop="true"
-					@click="refresh()">
+					force-menu
+					v-model:open="isMenuOpen">
 					<template #icon>
 						<NcIconSvgWrapper :size="20"
 							:svg="viewIcon" />
 					</template>
+					<template #menu-icon>
+						<NcIconSvgWrapper :path="isMenuOpen ? mdiChevronUp : mdiChevronDown" />
+					</template>
+					<!-- Reload button -->
+					<NcActionButton close-after-click @click="refresh()">
+						<template #icon>
+							<NcIconSvgWrapper :path="mdiReload" />
+						</template>
+						<!-- TRANSLATORS Button inside the breadcrumb dropdown menu that reloads the file list -->
+						{{ t('libresign', 'Reload content') }}
+					</NcActionButton>
 				</NcBreadcrumb>
-				<template #actions>
-					<RequestPicker />
-				</template>
 			</NcBreadcrumbs>
 
-			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
+			<NcLoadingIcon v-if="isRefreshing"
+				class="files-list__refresh-icon"
+				:name="t('libresign', 'File list is reloading')" />
 
 			<NcButton :aria-label="gridViewButtonLabel"
 				:title="gridViewButtonLabel"
@@ -75,11 +90,15 @@ import { t } from '@nextcloud/l10n'
 
 import HomeSvg from '@mdi/svg/svg/home.svg?raw'
 import {
+	mdiChevronDown,
+	mdiChevronUp,
 	mdiFolder,
+	mdiReload,
 	mdiViewGrid,
 	mdiViewList,
 } from '@mdi/js'
 
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcBreadcrumb from '@nextcloud/vue/components/NcBreadcrumb'
 import NcBreadcrumbs from '@nextcloud/vue/components/NcBreadcrumbs'
@@ -99,6 +118,7 @@ import { useSidebarStore } from '../../store/sidebar.js'
 export default {
 	name: 'FilesList',
 	components: {
+		NcActionButton,
 		NcAppContent,
 		NcButton,
 		NcBreadcrumb,
@@ -119,13 +139,17 @@ export default {
 			filtersStore,
 			userConfigStore,
 			sidebarStore,
+			mdiChevronDown,
+			mdiChevronUp,
 			mdiFolder,
+			mdiReload,
 			mdiViewGrid,
 			mdiViewList,
 		}
 	},
 	data() {
 		return {
+			isMenuOpen: false,
 			loading: true,
 			dirContentsFiltered: [],
 		}