fix: sidebar UX, sidebar & attach control cypress

* changed "show all" to button
* updated cypress tests for sidebar and attach control
* change "Explore Files" button icon location

cypress/integration/control_attach.js

@@ -29,7 +29,8 @@ context("Attach Control", () => {
 		//Clicking on "Link" button to attach a file using the "Link" button
 		cy.findByRole("button", { name: "Link" }).click();
 		cy.findByPlaceholderText("Attach a web link").type(
-			"https://wallpaperplay.com/walls/full/8/2/b/72402.jpg"
+			"https://wallpaperplay.com/walls/full/8/2/b/72402.jpg",
+			{ force: true }
 		);
 
 		//Clicking on the Upload button to upload the file

cypress/integration/sidebar.js

@@ -81,7 +81,7 @@ context("Sidebar", () => {
 
 			// test "Show All" button
 			cy.get(".attachment-row").should("have.length", 10);
-			cy.get(".show-all-btn").click();
+			cy.get(".show-all-btn").click({ force: true });
 			cy.get(".attachment-row").should("have.length", 12);
 		});
 	});
@@ -120,7 +120,7 @@ context("Sidebar", () => {
 			).click();
 
 			//To check if filter is applied
-			cy.click_filter_button().should("contain", "1 filter");
+			cy.click_filter_button().get(".filter-label").should("contain", "1");
 			cy.get(".fieldname-select-area > .awesomplete > .form-control").should(
 				"have.value",
 				"Assigned To"

frappe/public/js/frappe/form/templates/form_sidebar.html

@@ -56,21 +56,22 @@
 
 		<li class="explore-full-btn hidden">
 			<button class="data-pill btn">
+				<svg class="es-icon mr-2 icon-sm">
+					<use href="#es-line-folder-alt"></use>
+				</svg>
 				<span class="pill-label ellipsis">
 					{%= __("Explore Files") %}
 				</span>
-				<svg class="es-icon icon-sm">
-					<use href="#es-line-folder-alt"></use>
-				</svg>
 			</button>
 		</li>
-
-
-		<li class="show-all-btn hidden">
+		<button class="show-all-btn hidden">
+			<svg class="es-icon icon-sm">
+				<use href="#es-line-preview"></use>
+			</svg>
 			<a href="" class="pill-label ellipsis">
 				{%= __("Show All") %}
 			</a>
-		</li>
+		</button>
 	</li>
 	<li class="attachments-actions">
 		<button class="data-pill btn add-attachment-btn">

frappe/public/scss/desk/sidebar.scss

@@ -397,9 +397,8 @@ body[data-route^="Module"] .main-menu {
 	display: inline-flex;
 }
 
-.attachments-actions {
+.attachments-actions, .explore-full-btn > .data-pill.btn {
 	display: flex;
-	gap: 5px;
 	max-width: 100%;
 }
 
@@ -409,8 +408,19 @@ body[data-route^="Module"] .main-menu {
 }
 
 .show-all-btn {
-	margin-top: var(--margin-md);
-	text-align: center;
+	width: 100%;
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius);
+	background-color: var(--bg-color);
+	text-align: start;
+	padding-left: 8px;
+	margin-bottom: var(--margin-sm);
+
+	a.pill-label.ellipsis {
+		&:hover {
+			text-decoration: none;
+		}
+	}
 }
 .form-assignments, .form-shared {
 	.assignments, .shares {