Repository: electron/fiddle (ts)

Issue:
Gist description dialog box should have a cancel button
0.17.1

![image](https://user-images.githubusercontent.com/172800/97211663-95b54300-177c-11eb-835b-a6eb5509a697.png)

I'd like to be able to go back to my editors and update something before filling this in!

Pull request description:
feat: adds the ability to cancel publishing a gist
Fixes #518 

This PR adds a cancel to the gist publish flow

Patch:
diff --git a/src/renderer/components/commands-action-button.tsx b/src/renderer/components/commands-action-button.tsx
index 0eecff80..7c4ad5ba 100644
--- a/src/renderer/components/commands-action-button.tsx
+++ b/src/renderer/components/commands-action-button.tsx
@@ -106,7 +106,7 @@ export class GistActionButton extends React.Component<
     }
   }
 
-  public async getFiddleDescriptionFromUser(): Promise<string> {
+  public async getFiddleDescriptionFromUser(): Promise<string | null> {
     const { appState } = this.props;
 
     // Reset potentially non-null last description.
@@ -117,20 +117,19 @@ export class GistActionButton extends React.Component<
       label: 'Please provide a brief description for your Fiddle Gist',
       wantsInput: true,
       ok: 'Publish',
-      cancel: undefined,
+      cancel: 'Cancel',
       placeholder: 'Electron Fiddle Gist',
     });
-
     appState.isGenericDialogShowing = true;
     await when(() => !appState.isGenericDialogShowing);
 
-    return appState.genericDialogLastInput ?? 'Electron Fiddle Gist';
+    const cancelled = !appState.genericDialogLastResult;
+    return cancelled
+      ? null
+      : appState.genericDialogLastInput ?? 'Electron Fiddle Gist';
   }
 
-  /**
-   * Publish a new GitHub gist.
-   */
-  public async handlePublish() {
+  private async publishGist(description: string) {
     const { appState } = this.props;
 
     const octo = await getOctokit(this.props.appState);
@@ -138,11 +137,7 @@ export class GistActionButton extends React.Component<
     const options = { includeDependencies: true, includeElectron: true };
     const values = await window.ElectronFiddle.app.getEditorValues(options);
 
-    appState.activeGistAction = GistActionState.publishing;
-
     try {
-      const description = await this.getFiddleDescriptionFromUser();
-
       const gist = await octo.gists.create({
         public: !!gitHubPublishAsPublic,
         description,
@@ -168,8 +163,21 @@ export class GistActionButton extends React.Component<
 
       ipcRendererManager.send(IpcEvents.SHOW_WARNING_DIALOG, messageBoxOptions);
     }
+  }
+
+  /**
+   * Publish a new GitHub gist.
+   */
+  public async handlePublish() {
+    const { appState } = this.props;
+    appState.activeGistAction = GistActionState.publishing;
+
+    const description = await this.getFiddleDescriptionFromUser();
+
+    if (description) {
+      await this.publishGist(description);
+    }
 
-    // Ensure any previous input is reset.
     appState.genericDialogLastInput = null;
     appState.activeGistAction = GistActionState.none;
   }


Test patch:
diff --git a/tests/renderer/components/commands-publish-button-spec.tsx b/tests/renderer/components/commands-publish-button-spec.tsx
index 42148d85..64d8cb9e 100644
--- a/tests/renderer/components/commands-publish-button-spec.tsx
+++ b/tests/renderer/components/commands-publish-button-spec.tsx
@@ -85,6 +85,25 @@ describe('Publish button component', () => {
     });
   });
 
+  it('can cancel publishing to Gist', async () => {
+    const mockOctokit = {
+      authenticate: jest.fn(),
+      gists: {
+        create: jest.fn(async () => ({ data: { id: '123' } })),
+      },
+    };
+
+    (getOctokit as any).mockReturnValue(mockOctokit);
+
+    const wrapper = shallow(<GistActionButton appState={store} />);
+    const instance: GistActionButton = wrapper.instance() as any;
+
+    instance.getFiddleDescriptionFromUser = jest.fn().mockReturnValue(null);
+    await instance.performGistAction();
+
+    expect(mockOctokit.gists.create).not.toHaveBeenCalled();
+  });
+
   it('attempts to update an existing Gist', async () => {
     const mockOctokit = {
       authenticate: jest.fn(),