Add rename button in all projects page (#10026)

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} />);
  }

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));