Merge pull request #1373 from nextcloud-libraries/feat/allow-disable-…

…menu feat(UploadPicker): Allow to disable the "new"-menu
nextcloud-libraries · Sep 5, 2024 · 114ef0c
2 parents 851007f + ec32fa8
commit 114ef0c
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 21 deletions.
diff --git a/cypress/components/UploadPicker/new-menu.cy.ts b/cypress/components/UploadPicker/new-menu.cy.ts
@@ -85,12 +85,51 @@ describe('UploadPicker: "new"-menu', () => {
 			handler() {},
 		} as Entry
 
-		before(() => {
-			cy.spy(entry, 'handler')
-			addNewFileMenuEntry(entry)
-		})
+		before(() => addNewFileMenuEntry(entry))
+		beforeEach(() => cy.spy(entry, 'handler'))
 		afterEach(() => resetDocument())
 
+		it('With "noMenu" prop no menu is shown', () => {
+			// Mount picker
+			cy.mount(UploadPicker, { propsData: { ...propsData, noMenu: true } })
+
+			// Check and init aliases
+			cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
+			cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
+			cy.get('[data-cy-upload-picker]')
+				.contains('button', 'Upload')
+				.should('be.visible')
+				// Directly trigger upload
+				.and('have.attr', 'data-cy-upload-picker-menu-entry', 'upload-file')
+				.click()
+
+			cy.get('[role="menu"]').should('not.exist')
+		})
+
+		it('With "noMenu" prop and allowed folder-upload only the upload menu is shown', () => {
+			// Mount picker
+			cy.mount(UploadPicker, { propsData: { ...propsData, noMenu: true, allowFolders: true } })
+
+			// Check and init aliases
+			cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
+			cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
+			cy.get('[data-cy-upload-picker]')
+				.contains('button', 'Upload')
+				.should('be.visible')
+				// Directly no trigger
+				.and('not.have.attr', 'data-cy-upload-picker-menu-entry', 'upload-file')
+				// click should open the menu
+				.click()
+
+			cy.get('[role="menu"]')
+				.should('be.visible')
+				.get('[role="menuitem"]')
+				// only two (!) entries: uploader folder + upload files
+				.should('have.length', 2)
+			// Not the custom entry
+			cy.get('[data-cy-upload-picker-menu-entry="empty-file"]').should('not.exist')
+		})
+
 		it('Open the New File Menu', () => {
 			// Mount picker
 			cy.mount(UploadPicker, { propsData })

diff --git a/l10n/messages.pot b/l10n/messages.pot
@@ -102,6 +102,9 @@ msgstr[1] ""
 msgid "Unknown size"
 msgstr ""
 
+msgid "Upload"
+msgstr ""
+
 msgid "Upload files"
 msgstr ""
 

diff --git a/lib/components/UploadPicker.vue b/lib/components/UploadPicker.vue
@@ -9,7 +9,7 @@
 		class="upload-picker"
 		data-cy-upload-picker>
 		<!-- New button -->
-		<NcButton v-if="newFileMenuEntries.length === 0 && !canUploadFolders"
+		<NcButton v-if="(noMenu || newFileMenuEntries.length === 0) && !canUploadFolders"
 			:disabled="disabled"
 			data-cy-upload-picker-add
 			data-cy-upload-picker-menu-entry="upload-file"
@@ -21,8 +21,8 @@
 			{{ buttonName }}
 		</NcButton>
 		<NcActions v-else
+			:aria-label="buttonLabel"
 			:menu-name="buttonName"
-			:menu-title="t('New')"
 			type="secondary">
 			<template #icon>
 				<IconPlus :size="20" />
@@ -51,21 +51,23 @@
 			</NcActionButton>
 
 			<!-- App defined upload actions -->
-			<NcActionButton v-for="entry in menuEntriesUpload"
-				:key="entry.id"
-				:icon="entry.iconClass"
-				:close-after-click="true"
-				:data-cy-upload-picker-menu-entry="entry.id"
-				class="upload-picker__menu-entry"
-				@click="onClick(entry)">
-				<template v-if="entry.iconSvgInline" #icon>
-					<NcIconSvgWrapper :svg="entry.iconSvgInline" />
-				</template>
-				{{ entry.displayName }}
-			</NcActionButton>
+			<template v-if="!noMenu">
+				<NcActionButton v-for="entry in menuEntriesUpload"
+					:key="entry.id"
+					:icon="entry.iconClass"
+					:close-after-click="true"
+					:data-cy-upload-picker-menu-entry="entry.id"
+					class="upload-picker__menu-entry"
+					@click="onClick(entry)">
+					<template v-if="entry.iconSvgInline" #icon>
+						<NcIconSvgWrapper :svg="entry.iconSvgInline" />
+					</template>
+					{{ entry.displayName }}
+				</NcActionButton>