From 304c766cae9bd60854e8f10f8d3465a9fdee7438 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 8 Jan 2024 17:25:06 +0100
Subject: [PATCH] fix saving workspace UX

---
 apps/remix-ide/src/app/panels/file-panel.js     |  4 ++--
 .../src/app/tabs/locales/en/filePanel.json      |  3 ++-
 .../workspace/src/lib/remix-ui-workspace.tsx    | 17 ++++++++++++++---
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/remix-ide/src/app/panels/file-panel.js b/apps/remix-ide/src/app/panels/file-panel.js
index 38950b939a..b47235d545 100644
--- a/apps/remix-ide/src/app/panels/file-panel.js
+++ b/apps/remix-ide/src/app/panels/file-panel.js
@@ -119,10 +119,10 @@ module.exports = class Filepanel extends ViewPlugin {
     return this.workspaces
   }
 
-  getAvailableWorkspaceName(name) {
+  getAvailableWorkspaceName(name) {    
     if (!this.workspaces) return name
     let index = 1
-    let workspace = this.workspaces.find((workspace) => workspace.name === name + ' - ' + index)
+    let workspace = this.workspaces.find((workspace) => workspace.name === name + ' - ' + index)    
     while (workspace) {
       index++
       workspace = this.workspaces.find((workspace) => workspace.name === name + ' - ' + index)
diff --git a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
index 556f968536..697f22dafd 100644
--- a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json
@@ -8,6 +8,7 @@
   "filePanel.restore": "Restore",
   "filePanel.workspace.create": "Create Workspace",
   "filePanel.workspace.rename": "Rename Workspace",
+  "filePanel.workspace.save_workspace": "Save Workspace",
   "filePanel.workspace.delete": "Delete Workspace",
   "filePanel.workspace.deleteConfirm": "Are you sure to delete the current workspace?",
   "filePanel.workspace.download": "Download Workspace",
@@ -129,5 +130,5 @@
   "filePanel.movingFolderFailed": "Moving Folder Failed",
   "filePanel.movingFolderFailedMsg": "Unexpected error while moving folder: {src}",
   "filePanel.workspaceActions": "Workspace actions",
-  "filePanel.saveCodeSample": "This code sample will not be persisted. Please click here to save this code as a persisted workspace."
+  "filePanel.saveCodeSample": "This code-sample workspace will not be persisted. Click here to save it."
 }
diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
index 6370b94ac8..1f0ec553f8 100644
--- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
+++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
@@ -153,6 +153,17 @@ export function Workspace() {
     )
   }
 
+  const saveSampleCodeWorkspace = () => {
+    const workspaceName = global.plugin.getAvailableWorkspaceName('code-sample')
+    global.modal(
+      intl.formatMessage({id: 'filePanel.workspace.save_workspace'}),
+      renameModalMessage(workspaceName),
+      intl.formatMessage({id: 'filePanel.ok'}),
+      onFinishRenameWorkspace,
+      intl.formatMessage({id: 'filePanel.cancel'})
+    )
+  }
+
   const downloadCurrentWorkspace = () => {
     global.modal(
       intl.formatMessage({id: 'filePanel.workspace.download'}),
@@ -861,10 +872,10 @@ export function Workspace() {
     )
   }
 
-  const renameModalMessage = () => {
+  const renameModalMessage = (workspaceName?: string) => {
     return (
       <>
-        <input type="text" data-id="modalDialogCustomPromptTextRename" defaultValue={currentWorkspace} ref={workspaceRenameInput} className="form-control" />
+        <input type="text" data-id="modalDialogCustomPromptTextRename" defaultValue={workspaceName || currentWorkspace} ref={workspaceRenameInput} className="form-control" />
       </>
     )
   }
@@ -949,7 +960,7 @@ export function Workspace() {
                       tooltipClasses="text-nowrap"
                       tooltipText={<FormattedMessage id="filePanel.saveCodeSample" />}
                     >
-                      <i onClick={() => renameCurrentWorkspace()} className="far fa-exclamation-triangle text-warning ml-2 align-self-center" aria-hidden="true"></i>
+                      <i onClick={() => saveSampleCodeWorkspace()} className="far fa-exclamation-triangle text-warning ml-2 align-self-center" aria-hidden="true"></i>
                     </CustomTooltip>}
                   </span>                  
                 </div>