fix(ui5-upload-collection): correct visualization of "mode" property

packages/fiori/src/UploadCollectionItem.hbs

@@ -1,7 +1,5 @@
 {{>include "../../main/src/ListItem.hbs"}}
 
-{{#*inline "selectionElement"}}{{/inline}}
-
 {{#*inline "listItemContent"}}
 	<div class="ui5-uci-thumbnail">
 		<slot name="thumbnail"></slot>
@@ -93,9 +91,9 @@
 					</ui5-button>
 				{{/if}}
 
-				{{#if renderDeleteButton}}
+				{{#if renderUploadCollectionDeleteButton}}
 					<ui5-button
-							class="ui5-li-deletebtn"
+							class="ui5-upload-collection-deletebtn"
 							tabindex="-1"
 							data-sap-no-tab-ref
 							id="{{_id}}-deleteSelectionElement"

packages/fiori/src/UploadCollectionItem.ts

@@ -270,11 +270,6 @@ class UploadCollectionItem extends ListItem {
 		]);
 	}
 
-	onBeforeRendering() {
-		// In the base class the item can become "actionable",
-		// that's why we are overriding this method.
-	}
-
 	/**
 	 * @override
 	 */
@@ -408,24 +403,10 @@ class UploadCollectionItem extends ListItem {
 	/**
 	 * @override
 	 */
-	get renderDeleteButton() {
+	get renderUploadCollectionDeleteButton() {
 		return !this.hideDeleteButton;
 	}
 
-	/**
-	 * @override
-	 */
-	get placeSelectionElementAfter() {
-		return true;
-	}
-
-	/**
-	 * @override
-	 */
-	get placeSelectionElementBefore() {
-		return false;
-	}
-
 	get _fileNameWithoutExtension() {
 		return this.fileName.substring(0, this.fileName.length - this._fileExtension.length);
 	}

packages/fiori/src/themes/UploadCollectionItem.css

@@ -119,6 +119,10 @@
 	display: none;
 }
 
+.ui5-li-deletebtn {
+	display: none;
+}
+
 .ui5-uci-edit-buttons {
 	pointer-events: all;
 	margin-inline-start: 1rem;
@@ -179,3 +183,9 @@
 [ui5-button]:last-of-type {
 	margin-inline-end: var(--ui5_upload_collection_last_button_inline_end);
 }
+
+:host([active][actionable]) ::slotted([ui5-icon][slot="thumbnail"]),
+:host([active][actionable]) .ui5-uci-file-name,
+:host([active][actionable]) .ui5-uci-description {
+	color: var(--sapList_Active_TextColor);
+}

packages/fiori/test/pages/UploadCollection.html

@@ -62,7 +62,6 @@
 		<ui5-upload-collection-item
 			id="secondItem"
 			file-name=".gitignore"
-			type="Detail"
 			disable-delete-button
 			upload-state="Complete"
 		>
@@ -72,7 +71,6 @@
 		<ui5-upload-collection-item
 			id="latestReportsPdf"
 			file-name="latest.reports.pdf"
-			type="Detail"
 			upload-state="Complete"
 		>
 			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
@@ -81,15 +79,13 @@
 		<ui5-upload-collection-item
 			id="noFileExtension"
 			file-name="noextension"
-			type="Detail"
 			upload-state="Complete"
 		>
 			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
 		</ui5-upload-collection-item>
 		<ui5-upload-collection-item
 			id="keyboardNavigation"
 			file-name="Graph.docx"
-			type="Detail"
 			hide-delete-button
 			upload-state="Complete"
 		>
@@ -134,6 +130,17 @@
 			<img src="./img/HT-1000.jpg" slot="thumbnail">
 			uploadState="Uploading"
 		</ui5-upload-collection-item>
+		<ui5-upload-collection-item
+			id="hiddenFileName"
+			file-name=".gitignore"
+			type="Detail"
+			hide-terminate-button
+			upload-state="Error"
+			progress="89"
+		>
+			<img src="./img/HT-1000.jpg" slot="thumbnail">
+			uploadState="Uploading" with hidden terminate button
+		</ui5-upload-collection-item>
 		<ui5-upload-collection-item
 			file-name="Laptop (2).jpg"
 			type="Detail"

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

@@ -17,7 +17,7 @@ describe("UploadCollection", () => {
 		});
 
 		it("should show input and buttons when editing", async () => {
-			const secondItem = await browser.$("#secondItem");
+			const secondItem = await browser.$("#errorState");
 			const editButton = await secondItem.shadow$(".ui5-li-detailbtn");
 			await editButton.click();
 
@@ -26,15 +26,16 @@ describe("UploadCollection", () => {
 			assert.notOk(await secondItem.shadow$(".ui5-li-detailbtn").isDisplayed(), "detail button should be hidden");
 
 			// reset the item
-			await browser.$("#secondItem").removeAttribute("_editing");
+			await browser.$("#errorState").removeAttribute("_editing");
 		});
 
 		it("should show NOT show any buttons besides 'Terminate', when uploadState is 'Uploading'", async () => {
 			const uploadingStateItem = await browser.$("#uploadingState");
 
 			assert.ok(await uploadingStateItem.shadow$("ui5-button[icon=stop]").isDisplayed(), "'Terminate' button is displayed'");
 			assert.notOk(await uploadingStateItem.shadow$(".ui5-li-detailbtn").isDisplayed(), "detail button should be hidden");
-			assert.notOk(await uploadingStateItem.shadow$(".ui5-li-deletebtn").isDisplayed(), "delete button should be hidden");
+			assert.ok(await uploadingStateItem.shadow$(".ui5-upload-collection-deletebtn").isDisplayed(), "delete button should be displayed");
+			assert.ok(await uploadingStateItem.shadow$(".ui5-upload-collection-deletebtn").hasAttribute("disabled"), "delete button should be disabled");
 		});
 
 		it("should show 'Retry' button when uploadState is 'Error'", async () => {
@@ -54,26 +55,26 @@ describe("UploadCollection", () => {
 
 		it("visibility of buttons", async () => {
 			const defaultItem = await browser.$("#uc3-default");
-			assert.ok(await defaultItem.shadow$(".ui5-li-deletebtn").isDisplayed(), "delete button is visible");
+			assert.ok(await defaultItem.shadow$(".ui5-upload-collection-deletebtn").isDisplayed(), "delete button is visible");
 
 			const defaultItemHiddenDelete = await browser.$("#uc3-default-hidden-delete");
-			assert.notOk(await defaultItemHiddenDelete.shadow$(".ui5-li-deletebtn").isDisplayed(), "delete button is not visible");
+			assert.notOk(await defaultItemHiddenDelete.shadow$(".ui5-upload-collection-deletebtn").isDisplayed(), "delete button is not visible");
 
 			const errorItem = await browser.$("#uc3-error");
-			assert.ok(await errorItem.shadow$(".ui5-li-deletebtn").isDisplayed(), "delete button is visible");
+			assert.ok(await errorItem.shadow$(".ui5-upload-collection-deletebtn").isDisplayed(), "delete button is visible");
 			assert.ok(await errorItem.shadow$("ui5-button[icon=refresh]").isDisplayed(), "retry button is visible");
 
 			const errorItemHiddenRetry = await browser.$("#uc3-error-hidden-retry");
-			assert.ok(await errorItemHiddenRetry.shadow$(".ui5-li-deletebtn").isDisplayed(), "delete button is visible");
+			assert.ok(await errorItemHiddenRetry.shadow$(".ui5-upload-collection-deletebtn").isDisplayed(), "delete button is visible");
 			assert.notOk(await errorItemHiddenRetry.shadow$("ui5-button[icon=refresh]").isDisplayed(), "retry button is not visible");
 
 			const uploadingItem = await browser.$("#uc3-uploading");
-			assert.notOk(await uploadingItem.shadow$(".ui5-li-deletebtn").isDisplayed(), "delete button is not visible");
+			assert.ok(await uploadingItem.shadow$(".ui5-upload-collection-deletebtn").isDisplayed(), "delete button is visible");
 			assert.ok(await uploadingItem.shadow$("ui5-button[icon=stop]").isDisplayed(), "terminate button is visible");
 
 			const uploadingItemHiddenTerminate = await browser.$("#uc3-uploading-hidden-terminate");
-			assert.notOk(await uploadingItemHiddenTerminate.shadow$(".ui5-li-deletebtn").isDisplayed(), "delete button is not visible");
-			assert.notOk(await uploadingItemHiddenTerminate.shadow$("ui5-button[icon=stop]").isDisplayed(), "terminate button is visible");
+			assert.ok(await uploadingItemHiddenTerminate.shadow$(".ui5-upload-collection-deletebtn").isDisplayed(), "delete button is visible");
+			assert.notOk(await uploadingItemHiddenTerminate.shadow$("ui5-button[icon=stop]").isDisplayed(), "terminate button is not visible");
 		});
 
 		it("should forward 'header' and 'accessible-name' to the inner list", async () => {
@@ -87,6 +88,45 @@ describe("UploadCollection", () => {
 			assert.strictEqual(await uploadCollection.getAttribute("accessible-name"), await innerList.getAttribute("accessible-name"), "accessible-name is forwarded");
 			assert.ok(headerInnerListSlotContent, "header is forwarded");
 		});
+
+
+		it("in 'MultiSelect' mode there should be a checkbox", async () => {
+			// change the UCI type to "Detail"
+			const select = await browser.$("#changeMode");
+			await select.click(); // open select
+			await select.keys("m"); // for "MultiSelect"
+			await browser.keys("Enter");
+
+			const firstItem = await browser.$("#firstItem");
+
+			assert.ok(await firstItem.shadow$(".ui5-li-multisel-cb").isDisplayed(), "checkbox is visible");
+			assert.notOk(await firstItem.shadow$(".ui5-li-singlesel-radiobtn").isDisplayed(), "radio button is not visible");
+
+			// revert the UCI mode "None"
+			await select.click(); // open select
+			await select.keys("n");
+			await browser.keys("Enter")
+		});
+
+		it("in 'SingleSelectBegin' mode there should be a radio button", async () => {
+			// change the UCI type to "Detail"
+			const select = await browser.$("#changeMode");
+			await select.click(); // open select
+			await select.keys("ArrowDown"); // for "SingleSelect"
+			await select.keys("ArrowDown"); // for "SingleSelectBegin"
+			await browser.keys("Enter");
+
+			const firstItem = await browser.$("#firstItem");
+
+			assert.ok(await firstItem.shadow$(".ui5-li-singlesel-radiobtn").isDisplayed(), "radio button is visible");
+			assert.notOk(await firstItem.shadow$(".ui5-li-multisel-cb").isDisplayed(), "checkbox is not visible");
+
+			// revert the UCI  mode "None"
+			await select.click(); // open select
+			await select.keys("n");
+			await browser.keys("Enter")
+		});
+
 	});
 
 	describe("Events", () => {
@@ -95,6 +135,12 @@ describe("UploadCollection", () => {
 		});
 
 		it("item should fire 'rename'", async () => {
+			// change the UCI type to "Detail"
+			const select = await browser.$("#changeType");
+			await select.click(); // open select
+			await select.keys("d");
+			await browser.keys("Enter");
+
 			const secondItem = await browser.$("#secondItem");
 			const secondItemIndex = 1;
 			const editButton = await secondItem.shadow$(".ui5-li-detailbtn");
@@ -107,6 +153,11 @@ describe("UploadCollection", () => {
 
 			// reset the item
 			await browser.$("#secondItem").removeAttribute("_editing");
+
+			// revert the UCI "Active" type
+			await select.click(); // open select
+			await select.keys("a");
+			await browser.keys("Enter")
 		});
 
 		it("upload collection should fire 'item-delete' in Delete mode", async () => {
@@ -115,7 +166,7 @@ describe("UploadCollection", () => {
 
 			await uploadCollection.setAttribute("mode", "Delete");
 
-			const deleteBtn = await firstItem.shadow$(".ui5-li-deletebtn");
+			const deleteBtn = await firstItem.shadow$(".ui5-upload-collection-deletebtn");
 			await deleteBtn.click();
 
 			assert.strictEqual((await uploadCollection.getProperty("items")).length, 4, "item should be deleted when 'item-delete' event is fired");
@@ -127,7 +178,7 @@ describe("UploadCollection", () => {
 
 			await uploadCollection.setAttribute("mode", "None");
 
-			const deleteBtn = await item.shadow$(".ui5-li-deletebtn");
+			const deleteBtn = await item.shadow$(".ui5-upload-collection-deletebtn");
 			await deleteBtn.click();
 
 			assert.strictEqual((await uploadCollection.getProperty("items")).length, 3, "item should be deleted when 'item-delete' event is fired");
@@ -158,7 +209,7 @@ describe("UploadCollection", () => {
 		});
 
 		it("should preserve dots in the file name", async () => {
-			const latestReportsPdf = await browser.$("#latestReportsPdf");
+			const latestReportsPdf = await browser.$("#errorState");
 			const editButton = await latestReportsPdf.shadow$(".ui5-li-detailbtn");
 
 			await editButton.click();
@@ -168,11 +219,11 @@ describe("UploadCollection", () => {
 			// assert.strictEqual(await latestReportsPdf.getProperty("fileName"), "last.reports-edited.pdf", "file extension '.pdf' should be preserved");
 
 			// reset the item
-			await browser.$("#latestReportsPdf").removeAttribute("_editing");
+			await browser.$("#errorState").removeAttribute("_editing");
 		});
 
 		it("should be able to add extension, if there isn't such", async () => {
-			const noFileExtensionItem = await browser.$("#noFileExtension");
+			const noFileExtensionItem = await browser.$("#readyState");
 			const editButton = await noFileExtensionItem.shadow$(".ui5-li-detailbtn");
 			const newFileName = "newFileName.newExtension";
 
@@ -191,23 +242,23 @@ describe("UploadCollection", () => {
 			assert.strictEqual(await noFileExtensionItem.getProperty("fileName"), newFileName2 + ".newExtension", "the string after the last dot is considered as extension");
 
 			// reset the item
-			await browser.$("#noFileExtension").removeAttribute("_editing");
+			await browser.$("#readyState").removeAttribute("_editing");
 		});
 
 		it("should NOT consider hidden file name as extension", async () => {
-			const secondItem = await browser.$("#secondItem");
+			const secondItem = await browser.$("#hiddenFileName");
 			const editButton = await secondItem.shadow$(".ui5-li-detailbtn");
 
 			await editButton.click();
 
 			assert.notOk(await secondItem.shadow$(".ui5-uci-file-extension").getText(), "no extension is calculated for .gitignore.");
 
 			// reset the item
-			await browser.$("#secondItem").removeAttribute("_editing");
+			await browser.$("#hiddenFileName").removeAttribute("_editing");
 		});
 
 		it("tests cancelling of name change via keyboard", async () => {
-			const secondItem = await browser.$("#keyboardNavigation");
+			const secondItem = await browser.$("#hiddenFileName");
 			const editButton = await secondItem.shadow$(".ui5-li-detailbtn");
 
 			await editButton.click();
@@ -219,10 +270,10 @@ describe("UploadCollection", () => {
 
 			await browser.keys("Enter"); // Press cancel button
 
-			assert.strictEqual(await secondItem.shadow$(".ui5-uci-file-name").getText(), "Graph.docx", "The name of the file is not changed");
+			assert.strictEqual(await secondItem.shadow$(".ui5-uci-file-name").getText(), ".gitignore", "The name of the file is not changed");
 
 			// reset the item
-			await browser.$("#keyboardNavigation").removeAttribute("_editing");
+			await browser.$("#hiddenFileName").removeAttribute("_editing");
 		});
 	});