refactor(ui5-upload-collection): rename properties (#3404)

Part of #3107

Added property hideDeleteButton which hides the always-visible delete button.

BREAKING_CHANGE: property noDelete has been renamed to disableDeleteButton
BREAKING_CHANGE: property noRetry has been renamed to hideRetryButton
BREAKING_CHANGE: property noTerminate has been renamed to hideTerminateButton

packages/fiori/src/UploadCollectionItem.js

@@ -39,7 +39,7 @@ const metadata = {
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.UploadCollectionItem.prototype */ {
 		/**
-		 * Holds <code>File</code>, associated with this item.
+		 * Holds an instance of <code>File</code> associated with this item.
 		 *
 		 * @type {File}
 		 * @defaultvalue null
@@ -73,13 +73,24 @@ const metadata = {
 		},
 
 		/**
-		 * Removes delete option from <code>ui5-upload-collection</code> with <code>mode</code> <code>Delete</code> for this item.
+		 * Disables the delete button.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
-		noDelete: {
+		disableDeleteButton: {
+			type: Boolean,
+		},
+
+		/**
+		 * By default, the Delete button will always be shown, regardless of the <code>ui5-upload-collection</code>'s property <code>mode</code>.
+		 * Setting this property to <code>true</code> will hide the delete button.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 */
+		hideDeleteButton: {
 			type: Boolean,
 		},
 
@@ -90,7 +101,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		noRetry: {
+		hideRetryButton: {
 			type: Boolean,
 		},
 
@@ -101,7 +112,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		noTerminate: {
+		hideTerminateButton: {
 			type: Boolean,
 		},
 
@@ -405,8 +416,22 @@ class UploadCollectionItem extends ListItem {
 	/**
 	 * @override
 	 */
-	get disableDeleteButton() {
-		return this.noDelete;
+	get renderDeleteButton() {
+		return !this.hideDeleteButton;
+	}
+
+	/**
+	 * @override
+	 */
+	get placeSelectionElementAfter() {
+		return true;
+	}
+
+	/**
+	 * @override
+	 */
+	get placeSelectionElementBefore() {
+		return false;
 	}
 
 	get _fileNameWithoutExtension() {
@@ -442,11 +467,11 @@ class UploadCollectionItem extends ListItem {
 	}
 
 	get _showRetry() {
-		return !this.noRetry && this.uploadState === UploadState.Error;
+		return !this.hideRetryButton && this.uploadState === UploadState.Error;
 	}
 
 	get _showTerminate() {
-		return !this.noTerminate && this.uploadState === UploadState.Uploading;
+		return !this.hideTerminateButton && this.uploadState === UploadState.Uploading;
 	}
 
 	get _retryButtonTooltip() {

packages/fiori/test/pages/UploadCollection.html

@@ -82,7 +82,7 @@
 			id="secondItem"
 			file-name=".gitignore"
 			type="Detail"
-			no-delete
+			disable-delete-button
 			upload-state="Complete"
 		>
 			<ui5-icon name="customize" slot="thumbnail"></ui5-icon>
@@ -109,6 +109,7 @@
 			id="keyboardNavigation"
 			file-name="Graph.docx"
 			type="Detail"
+			hide-delete-button
 			upload-state="Complete"
 		>
 			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
@@ -145,13 +146,23 @@
 			id="uploadingState"
 			file-name="Laptop.jpg"
 			type="Detail"
-			no-delete
+			disable-delete-button
 			upload-state="Uploading"
 			progress="37"
 		>
 			<img src="./img/HT-1000.jpg" slot="thumbnail">
 			uploadState="Uploading"
 		</ui5-upload-collection-item>
+		<ui5-upload-collection-item
+			file-name="Laptop (2).jpg"
+			type="Detail"
+			hide-terminate-button
+			upload-state="Uploading"
+			progress="89"
+		>
+			<img src="./img/HT-1000.jpg" slot="thumbnail">
+			uploadState="Uploading" with hidden terminate button
+		</ui5-upload-collection-item>
 		<ui5-upload-collection-item
 			id="errorState"
 			file-name="latest.reports.pdf"
@@ -171,5 +182,43 @@
 			uploadState="Ready" (default)
 		</ui5-upload-collection-item>
 	</ui5-upload-collection>
+
+
+	<ui5-upload-collection id="uploadCollection3">
+		<div class="header" slot="header">
+			<ui5-title>Hidden buttons</ui5-title>
+		</div>
+
+		<ui5-upload-collection-item id="uc3-default" file-name="File name">
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+			Default, delete button always visible
+		</ui5-upload-collection-item>
+
+		<ui5-upload-collection-item id="uc3-default-hidden-delete" file-name="File name" hide-delete-button>
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+			Default, delete button hidden
+		</ui5-upload-collection-item>
+
+		<ui5-upload-collection-item id="uc3-error" file-name="File name" upload-state="Error">
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+			uploadState="Error" with retry button visible by default
+		</ui5-upload-collection-item>
+
+		<ui5-upload-collection-item id="uc3-error-hidden-retry" file-name="File name" upload-state="Error" hide-retry-button>
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+			uploadState="Error" with hidden retry button
+		</ui5-upload-collection-item>
+
+		<ui5-upload-collection-item id="uc3-uploading" file-name="File name" upload-state="Uploading">
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+			uploadState="Uploading" with terminate button visible by default
+		</ui5-upload-collection-item>
+
+		<ui5-upload-collection-item id="uc3-uploading-hidden-terminate" file-name="File name" upload-state="Uploading" hide-terminate-button>
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+			uploadState="Uploading" with hidden terminate button
+		</ui5-upload-collection-item>
+
+	</ui5-upload-collection>
 </body>
 </html>

packages/fiori/test/specs/UploadCollection.spec.js

@@ -37,7 +37,7 @@ describe("UploadCollection", () => {
 
 			assert.ok(uploadingStateItem.shadow$("ui5-button[icon=stop]").isDisplayed(), "'Terminate' button is displayed'");
 			assert.notOk(uploadingStateItem.shadow$(".ui5-li-detailbtn").isDisplayed(), "detail button should be hidden");
-			assert.notOk(uploadingStateItem.shadow$(".ui5-li-deletebtn").isDisplayed(), "detail button should be hidden");
+			assert.notOk(uploadingStateItem.shadow$(".ui5-li-deletebtn").isDisplayed(), "delete button should be hidden");
 		});
 
 		it("should show 'Retry' button when uploadState is 'Error'", () => {
@@ -56,6 +56,30 @@ describe("UploadCollection", () => {
 				document.getElementById("errorState").removeAttribute("_editing");
 			});
 		});
+
+		it("visibility of buttons", () => {
+			const defaultItem = browser.$("#uc3-default");
+			assert.strictEqual(defaultItem.shadow$(".ui5-li-deletebtn").isDisplayed(), true, "delete button is visible");
+
+			const defaultItemHiddenDelete = browser.$("#uc3-default-hidden-delete");
+			assert.strictEqual(defaultItemHiddenDelete.shadow$(".ui5-li-deletebtn").isDisplayed(), false, "delete button is not visible");
+
+			const errorItem = browser.$("#uc3-error");
+			assert.strictEqual(errorItem.shadow$(".ui5-li-deletebtn").isDisplayed(), true, "delete button is visible");
+			assert.strictEqual(errorItem.shadow$("ui5-button[icon=refresh]").isDisplayed(), true, "retry button is visible");
+
+			const errorItemHiddenRetry = browser.$("#uc3-error-hidden-retry");
+			assert.strictEqual(errorItemHiddenRetry.shadow$(".ui5-li-deletebtn").isDisplayed(), true, "delete button is visible");
+			assert.strictEqual(errorItemHiddenRetry.shadow$("ui5-button[icon=refresh]").isDisplayed(), false, "retry button is not visible");
+
+			const uploadingItem = browser.$("#uc3-uploading");
+			assert.strictEqual(uploadingItem.shadow$(".ui5-li-deletebtn").isDisplayed(), false, "delete button is not visible");
+			assert.strictEqual(uploadingItem.shadow$("ui5-button[icon=stop]").isDisplayed(), true, "terminate button is visible");
+
+			const uploadingItemHiddenTerminate = browser.$("#uc3-uploading-hidden-terminate");
+			assert.strictEqual(uploadingItemHiddenTerminate.shadow$(".ui5-li-deletebtn").isDisplayed(), false, "delete button is not visible");
+			assert.strictEqual(uploadingItemHiddenTerminate.shadow$("ui5-button[icon=stop]").isDisplayed(), false, "terminate button is visible");
+		});
 	});
 
 	describe("Events", () => {

packages/main/src/ListItem.hbs

@@ -81,7 +81,7 @@
 		</ui5-checkbox>
 	{{/if}}
 
-	{{#if modeDelete}}
+	{{#if renderDeleteButton}}
 		<div class="ui5-li-deletebtn">
 			<ui5-button
 				tabindex="-1"
@@ -95,4 +95,5 @@
 			></ui5-button>
 		</div>
 	{{/if}}
+
 {{/inline}}

packages/main/src/ListItem.js

@@ -292,9 +292,16 @@ class ListItem extends ListItemBase {
 	/**
 	 * Used in UploadCollectionItem
 	 */
+	get renderDeleteButton() {
+		return this.modeDelete;
+	}
+
 	get disableDeleteButton() {
 		return false;
 	}
+	/**
+	 * End
+	 */
 
 	get typeDetail() {
 		return this.type === ListItemType.Detail;