From 329ecb5ef9ebdf9c5c4ecfb2317bf9c93bd60be1 Mon Sep 17 00:00:00 2001
From: Sae <73706334+sae220@users.noreply.github.com>
Date: Fri, 14 Jun 2024 02:15:27 +0900
Subject: [PATCH] Add rename button in all projects page (#10026)

---
 webapp/src/scriptmanager.tsx | 58 ++++++++++++++++++++++++------------
 webapp/src/workspace.ts      | 15 ++++++++++
 2 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/webapp/src/scriptmanager.tsx b/webapp/src/scriptmanager.tsx
index 69e81376dc0..25782ba4c88 100644
--- a/webapp/src/scriptmanager.tsx
+++ b/webapp/src/scriptmanager.tsx
@@ -70,6 +70,7 @@ export class ScriptManagerDialog extends data.Component<ScriptManagerDialogProps
         this.handleOpen = this.handleOpen.bind(this);
         this.handleOpenNewTab = this.handleOpenNewTab.bind(this);
         this.handleOpenNewLinkedTab = this.handleOpenNewLinkedTab.bind(this);
+        this.handleRename = this.handleRename.bind(this);
         this.handleDuplicate = this.handleDuplicate.bind(this);
         this.handleSwitchView = this.handleSwitchView.bind(this);
         this.handleSearch = this.handleSearch.bind(this);
@@ -188,7 +189,29 @@ export class ScriptManagerDialog extends data.Component<ScriptManagerDialogProps
         this.props.parent.openNewTab(header, true);
     }
 
-    handleDuplicate() {
+    async handleRename() {
+        pxt.tickEvent("scriptmanager.rename", undefined, { interactiveConsent: true });
+        const header = this.getSelectedHeader();
+        // Prompt for the new project name
+        const opts: core.PromptOptions = {
+            header: lf("Choose a new name for your project"),
+            agreeLbl: lf("Rename"),
+            agreeClass: "green approve positive",
+            initialValue: header.name,
+            placeholder: lf("Enter your project name here"),
+            size: "tiny"
+        };
+        const newName = await core.promptAsync(opts);
+        if (newName === null)
+            return false; // null means cancelled
+
+        const clonedHeader = await workspace.renameAsync(header, newName);
+        await workspace.saveAsync(clonedHeader);
+        this.setState({ selected: {} });
+        return true;
+    }
+
+    async handleDuplicate() {
         pxt.tickEvent("scriptmanager.dup", undefined, { interactiveConsent: true });
         const header = this.getSelectedHeader();
         // Prompt for the new project name
@@ -201,24 +224,19 @@ export class ScriptManagerDialog extends data.Component<ScriptManagerDialogProps
             placeholder: lf("Enter your project name here"),
             size: "tiny"
         };
-        return core.promptAsync(opts).then(res => {
-            if (res === null)
-                return false; // null means cancelled
-            let id: string;
-            return workspace.duplicateAsync(header, res)
-                .then(clonedHeader => {
-                    id = this.getId(clonedHeader);
-                    return workspace.saveAsync(clonedHeader);
-                })
-                .then(() => {
-                    data.invalidate(`headers:${this.state.searchFor}`);
-                    this.setState({ selected: {}, markedNew: { [id]: 1 }, sortedBy: 'time', sortedAsc: false });
-                    setTimeout(() => {
-                        this.setState({ markedNew: {} });
-                    }, 5 * 1000);
-                    return true;
-                });
-        });
+        const newName = await core.promptAsync(opts);
+        if (newName === null)
+            return false; // null means cancelled
+        let id: string;
+        const clonedHeader = await workspace.duplicateAsync(header, newName);
+        id = this.getId(clonedHeader);
+        await workspace.saveAsync(clonedHeader);
+        data.invalidate(`headers:${this.state.searchFor}`);
+        this.setState({ selected: {}, markedNew: { [id]: 1 }, sortedBy: 'time', sortedAsc: false });
+        setTimeout(() => {
+            this.setState({ markedNew: {} });
+        }, 5 * 1000);
+        return true;
     }
 
     handleSwitchView() {
@@ -504,6 +522,8 @@ export class ScriptManagerDialog extends data.Component<ScriptManagerDialogProps
                                 text={lf("New Connected Tab")} title={lf("Open Project in a new tab with a connected simulator")} onClick={this.handleOpenNewLinkedTab} />}
                         </sui.DropdownMenu>
                     </div>);
+                    headerActions.push(<sui.Button key="rename" icon="edit outline" className="icon"
+                        text={lf("Rename")} textClass="landscape only" title={lf("Rename Project")} onClick={this.handleRename} />);
                     headerActions.push(<sui.Button key="clone" icon="clone outline" className="icon"
                         text={lf("Duplicate")} textClass="landscape only" title={lf("Duplicate Project")} onClick={this.handleDuplicate} />);
                 }
diff --git a/webapp/src/workspace.ts b/webapp/src/workspace.ts
index c84764138e8..aa6342be2f0 100644
--- a/webapp/src/workspace.ts
+++ b/webapp/src/workspace.ts
@@ -761,6 +761,21 @@ export function installAsync(h0: InstallHeader, text: ScriptText, dontOverwriteI
         .then(() => h);
 }
 
+export async function renameAsync(h: Header, newName: string): Promise<Header> {
+    const text = await getTextAsync(h.id);
+
+    let newHdr = U.flatClone(h)
+
+    const dupText = U.flatClone(text);
+    newHdr.name = newName;
+    const cfg = JSON.parse(text[pxt.CONFIG_NAME]) as pxt.PackageConfig;
+    cfg.name = newHdr.name;
+    dupText[pxt.CONFIG_NAME] = pxt.Package.stringifyConfig(cfg);
+
+    await importAsync(newHdr, dupText);
+    return newHdr;
+}
+
 export async function duplicateAsync(h: Header, newName?: string, newText?: ScriptText): Promise<Header> {
     const text = newText || (await getTextAsync(h.id));