fix saving workspace UX

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)

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."
 }

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>