From e19dce1fe0c8016a7a3b0cf796cdc4187928ef7a Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Mon, 29 Jul 2024 18:56:13 +0530
Subject: [PATCH] fix(ui): cleanup workspace edit buttons

---
 .../js/frappe/views/workspace/workspace.js    | 86 ++++++++++---------
 frappe/public/scss/desk/desktop.scss          |  4 +
 2 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/frappe/public/js/frappe/views/workspace/workspace.js b/frappe/public/js/frappe/views/workspace/workspace.js
index c09b2d65f2..ec1f179cbc 100644
--- a/frappe/public/js/frappe/views/workspace/workspace.js
+++ b/frappe/public/js/frappe/views/workspace/workspace.js
@@ -59,6 +59,7 @@ frappe.views.Workspace = class Workspace {
 		`).appendTo(this.wrapper.find(".layout-side-section"));
 		this.sidebar = list_sidebar.find(".desk-sidebar");
 		this.body = this.wrapper.find(".layout-main-section");
+		this.prepare_new_and_edit();
 	}
 
 	async setup_pages(reload) {
@@ -90,6 +91,46 @@ frappe.views.Workspace = class Workspace {
 		}
 	}
 
+	prepare_new_and_edit() {
+		this.$page = $(`
+		<div class="editor-js-container"></div>
+		<div class="workspace-footer">
+			<button data-label="New" class="btn btn-default ellipsis btn-new-workspace">
+				<svg class="es-icon es-line icon-xs" style="" aria-hidden="true">
+					<use class="" href="#es-line-add"></use>
+				</svg>
+				<span class="hidden-xs" data-label="Edit">New</span>
+			</button>
+			<button class="btn btn-default btn-sm mr-2 btn-edit-workspace" data-label="Edit">
+				<svg class="es-icon es-line  icon-xs" style="" aria-hidden="true">
+					<use class="" href="#es-line-edit"></use>
+				</svg>
+				<span class="hidden-xs" data-label="Edit">
+					<span><span class="alt-underline">E</span>dit</span>
+				</span>
+			</button>
+		</div>
+	`).appendTo(this.body);
+
+		this.body.find(".btn-new-workspace").on("click", () => {
+			this.initialize_new_page(true);
+		});
+
+		this.body.find(".btn-edit-workspace").on("click", async () => {
+			if (!this.editor || !this.editor.readOnly) return;
+			this.is_read_only = false;
+			this.toggle_hidden_workspaces(true);
+			await this.editor.readOnly.toggle();
+			this.editor.isReady.then(() => {
+				this.body.addClass("edit-mode");
+				this.initialize_editorjs_undo();
+				this.setup_customization_buttons(this._page);
+				this.show_sidebar_actions();
+				this.make_blocks_sortable();
+			});
+		});
+	}
+
 	get_pages() {
 		return frappe.xcall("frappe.desk.desktop.get_workspace_sidebar_items");
 	}
@@ -379,25 +420,9 @@ frappe.views.Workspace = class Workspace {
 
 	async show_page(page) {
 		if (!this.body.find("#editorjs")[0]) {
-			this.$page = $(`
+			$(`
 				<div id="editorjs" class="desk-page page-main-content"></div>
-				<div class="workspace-footer">
-					<button data-label="New" class="btn btn-default ellipsis btn-new-workspace">
-						<svg class="es-icon es-line  icon-xs" style="" aria-hidden="true">
-							<use class="" href="#es-line-add"></use>
-						</svg>
-						<span class="hidden-xs" data-label="Edit">New</span>
-					</button>
-					<button class="btn btn-default btn-sm mr-2 btn-edit-workspace" data-label="Edit">
-						<svg class="es-icon es-line  icon-xs" style="" aria-hidden="true">
-							<use class="" href="#es-line-edit"></use>
-						</svg>
-						<span class="hidden-xs" data-label="Edit">
-							<span><span class="alt-underline">E</span>dit</span>
-						</span>
-					</button>
-				</div>
-			`).appendTo(this.body);
+			`).appendTo(this.body.find(".editor-js-container"));
 		}
 
 		if (this.all_pages.length) {
@@ -406,6 +431,7 @@ frappe.views.Workspace = class Workspace {
 			let pages =
 				page.public && this.public_pages.length ? this.public_pages : this.private_pages;
 			let current_page = pages.filter((p) => p.title == page.name)[0];
+			this._page = current_page;
 			this.content = current_page && JSON.parse(current_page.content);
 
 			this.content && this.add_custom_cards_in_content();
@@ -472,33 +498,13 @@ frappe.views.Workspace = class Workspace {
 
 		this.clear_page_actions();
 		if (current_page.is_editable) {
-			this.body
-				.find(".btn-edit-workspace")
-				.removeClass("hide")
-				.on("click", async () => {
-					if (!this.editor || !this.editor.readOnly) return;
-					this.is_read_only = false;
-					this.toggle_hidden_workspaces(true);
-					await this.editor.readOnly.toggle();
-					this.editor.isReady.then(() => {
-						this.body.addClass("edit-mode");
-						this.initialize_editorjs_undo();
-						this.setup_customization_buttons(current_page);
-						this.show_sidebar_actions();
-						this.make_blocks_sortable();
-					});
-				});
+			this.body.find(".btn-edit-workspace").removeClass("hide");
 		} else {
 			this.body.find(".btn-edit-workspace").addClass("hide");
 		}
 		// need to add option for icons in inner buttons as well
 		if (this.has_create_access) {
-			this.body
-				.find(".btn-new-workspace")
-				.removeClass("hide")
-				.on("click", () => {
-					this.initialize_new_page(true);
-				});
+			this.body.find(".btn-new-workspace").removeClass("hide");
 		} else {
 			this.body.find(".btn-new-workspace").addClass("hide");
 		}
diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss
index f7e44536a3..b0c0173088 100644
--- a/frappe/public/scss/desk/desktop.scss
+++ b/frappe/public/scss/desk/desktop.scss
@@ -994,6 +994,10 @@ body {
 					.links-widget-box {
 						background-color: var(--bg-color) !important;
 					}
+
+					.workspace-footer {
+						display: none;
+					}
 				}
 			}