feat: add publishGistAsRevision() (#1177)

* feat: add publishGistAsRevision()

* chore: add tests to make sure state changes

* chore: rename for clarity

* chore: update snapshots

* chore: add additional test

* chore: add param to test

* chore: refactor const to private static

* chore: update snap

* chore: update snap

* chore: modify snapshot

* chore: fix package.json uploaded as revision

* fix

* chore: remove log

Co-authored-by: Erick Zhao <[email protected]>

Author: georgexu99

src/renderer/components/commands-action-button.tsx

@@ -22,6 +22,7 @@ import {
 import { IpcEvents } from '../../ipc-events';
 import { ensureRequiredFiles } from '../../utils/editor-utils';
 import { getOctokit } from '../../utils/octokit';
+import { getTemplate } from '../content';
 import { ipcRendererManager } from '../ipc';
 import { AppState } from '../state';
 
@@ -120,18 +121,32 @@ export const GistActionButton = observer(
       const octo = await getOctokit(appState);
       const { gitHubPublishAsPublic } = appState;
       const options = { includeDependencies: true, includeElectron: true };
-      const values = await window.ElectronFiddle.app.getEditorValues(options);
+      const defaultGistValues = await getTemplate(appState.version);
+      const currentEditorValues = await window.ElectronFiddle.app.getEditorValues(
+        options,
+      );
+
+      defaultGistValues['package.json'] = currentEditorValues['package.json'];
 
       try {
+        const gistFilesList = appState.isPublishingGistAsRevision
+          ? this.gistFilesList(defaultGistValues)
+          : this.gistFilesList(currentEditorValues);
+
+        // TODO: remove as any when octo is fixed
         const gist = await octo.gists.create({
           public: !!gitHubPublishAsPublic,
           description,
-          files: this.gistFilesList(values) as any, // Note: GitHub messed up, GistsCreateParamsFiles is an incorrect interface
+          files: gistFilesList as any, // Note: GitHub messed up, GistsCreateParamsFiles is an incorrect interface
         });
 
         appState.gistId = gist.data.id;
         appState.localPath = undefined;
 
+        if (appState.isPublishingGistAsRevision) {
+          await this.handleUpdate(appState.isPublishingGistAsRevision);
+        }
+
         console.log(`Publish Button: Publishing complete`, { gist });
         this.renderToast({
           message: 'Successfully published gist!',
@@ -179,8 +194,9 @@ export const GistActionButton = observer(
 
     /**
      * Update an existing GitHub gist.
+     * silently updates the gist when publishing as a revision
      */
-    public async handleUpdate() {
+    public async handleUpdate(silent = false) {
       const { appState } = this.props;
       const octo = await getOctokit(this.props.appState);
       const options = { includeDependencies: true, includeElectron: true };
@@ -206,14 +222,17 @@ export const GistActionButton = observer(
 
         appState.editorMosaic.isEdited = false;
         console.log('Updating: Updating done', { gist });
-        this.renderToast({
-          message: 'Successfully updated gist!',
-          action: {
-            text: 'Copy link',
-            icon: 'clipboard',
-            onClick: () => clipboard.writeText(gist.data.html_url),
-          },
-        });
+
+        if (!silent) {
+          this.renderToast({
+            message: 'Successfully updated gist!',
+            action: {
+              text: 'Copy link',
+              icon: 'clipboard',
+              onClick: () => clipboard.writeText(gist.data.html_url),
+            },
+          });
+        }
       } catch (error) {
         console.warn(`Could not update gist`, { error });
 

src/renderer/components/settings-general-github.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Button, Callout } from '@blueprintjs/core';
+import { Button, Callout, Checkbox, FormGroup } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 
 import { AppState } from '../state';
@@ -21,8 +21,15 @@ export const GitHubSettings = observer(
       super(props);
 
       this.signIn = this.signIn.bind(this);
+      this.handlePublishGistAsRevisionChange = this.handlePublishGistAsRevisionChange.bind(
+        this,
+      );
     }
 
+    private static publishGistAsRevisionInstructions = `
+    Enable this option to always publish your fiddle as a revision of the
+    default fiddle gist values.`.trim();
+
     /**
      * Render the "logged out" settings experience.
      *
@@ -61,8 +68,22 @@ export const GitHubSettings = observer(
       );
     }
 
+    /**
+     * Handles a change on whether or not the gist should be published
+     * as a revision on top of the default fiddle gist.
+     *
+     * @param {React.FormEvent<HTMLInputElement>} event
+     */
+    public handlePublishGistAsRevisionChange(
+      event: React.FormEvent<HTMLInputElement>,
+    ) {
+      const { checked } = event.currentTarget;
+      this.props.appState.isPublishingGistAsRevision = checked;
+    }
+
     public render() {
       const { gitHubToken } = this.props.appState;
+      const { isPublishingGistAsRevision } = this.props.appState;
 
       const maybeSignedIn = !!gitHubToken
         ? this.renderSignedIn()
@@ -72,6 +93,16 @@ export const GitHubSettings = observer(
         <div>
           <h4>GitHub</h4>
           {maybeSignedIn}
+          <Callout>
+            <FormGroup>
+              <p>{GitHubSettings.publishGistAsRevisionInstructions}</p>
+              <Checkbox
+                checked={isPublishingGistAsRevision}
+                label="Publish as revision."
+                onChange={this.handlePublishGistAsRevisionChange}
+              />
+            </FormGroup>
+          </Callout>
         </div>
       );
     }

src/renderer/constants.ts

@@ -13,3 +13,5 @@ export const CONFIG_PATH = path.join(
 
 export const ELECTRON_ORG = 'electron';
 export const ELECTRON_REPO = 'electron';
+
+export const FIDDLE_GIST_DESCRIPTION_PLACEHOLDER = 'Electron Fiddle Gist';

src/renderer/state.ts

@@ -91,6 +91,9 @@ export class AppState {
   );
   public isClearingConsoleOnRun = !!this.retrieve('isClearingConsoleOnRun');
   public isUsingSystemTheme = !!(this.retrieve('isUsingSystemTheme') ?? true);
+  public isPublishingGistAsRevision = !!(
+    this.retrieve('isPublishingGistAsRevision') ?? true
+  );
   public executionFlags: Array<string> =
     (this.retrieve('executionFlags') as Array<string>) === null
       ? []
@@ -219,6 +222,7 @@ export class AppState {
       isInstallingModules: observable,
       isKeepingUserDataDirs: observable,
       isOnline: observable,
+      isPublishingGistAsRevision: observable,
       isQuitting: observable,
       isRunning: observable,
       isSettingsShowing: observable,
@@ -330,6 +334,9 @@ export class AppState {
       this.save('isClearingConsoleOnRun', this.isClearingConsoleOnRun),
     );
     autorun(() => this.save('isUsingSystemTheme', this.isUsingSystemTheme));
+    autorun(() =>
+      this.save('isPublishingGistAsRevision', this.isPublishingGistAsRevision),
+    );
     autorun(() => this.save('gitHubAvatarUrl', this.gitHubAvatarUrl));
     autorun(() => this.save('gitHubLogin', this.gitHubLogin));
     autorun(() => this.save('gitHubName', this.gitHubName));

tests/mocks/state.ts

@@ -38,6 +38,7 @@ export class StateMock {
   public isEnablingElectronLogging = false;
   public isGenericDialogShowing = false;
   public isInstallingModules = false;
+  public isPublishingGistAsRevision = true;
   public isOnline = true;
   public isQuitting = false;
   public isRunning = false;
@@ -130,6 +131,7 @@ export class StateMock {
       isGenericDialogShowing: observable,
       isInstallingModules: observable,
       isOnline: observable,
+      isPublishingGistAsRevision: observable,
       isQuitting: observable,
       isRunning: observable,
       isSettingsShowing: observable,

tests/renderer/components/__snapshots__/settings-general-github-spec.tsx.snap

@@ -15,6 +15,19 @@ exports[`GitHubSettings component renders when not signed in 1`] = `
       text="Sign in"
     />
   </Blueprint3.Callout>
+  <Blueprint3.Callout>
+    <Blueprint3.FormGroup>
+      <p>
+        Enable this option to always publish your fiddle as a revision of the
+    default fiddle gist values.
+      </p>
+      <Blueprint3.Checkbox
+        checked={true}
+        label="Publish as revision."
+        onChange={[Function]}
+      />
+    </Blueprint3.FormGroup>
+  </Blueprint3.Callout>
 </div>
 `;
 
@@ -38,5 +51,18 @@ exports[`GitHubSettings component renders when signed in 1`] = `
       text="Sign out"
     />
   </Blueprint3.Callout>
+  <Blueprint3.Callout>
+    <Blueprint3.FormGroup>
+      <p>
+        Enable this option to always publish your fiddle as a revision of the
+    default fiddle gist values.
+      </p>
+      <Blueprint3.Checkbox
+        checked={true}
+        label="Publish as revision."
+        onChange={[Function]}
+      />
+    </Blueprint3.FormGroup>
+  </Blueprint3.Callout>
 </div>
 `;

tests/renderer/components/commands-publish-button-spec.tsx

@@ -124,6 +124,7 @@ describe('Action button component', () => {
     beforeEach(() => {
       // create a button that's primed to publish a new gist
       ({ instance } = createActionButton());
+      state.isPublishingGistAsRevision = false;
     });
 
     it('publishes a gist', async () => {
@@ -175,6 +176,17 @@ describe('Action button component', () => {
         const expected = { ...expectedGistOpts, files };
         expect(mocktokit.gists.create).toHaveBeenCalledWith(expected);
       });
+
+      it('calls update() if isPublishingGistAsRevision is true', async () => {
+        state.isPublishingGistAsRevision = true;
+        state.showInputDialog = jest.fn().mockResolvedValueOnce(description);
+
+        const { instance } = createActionButton();
+        const spy = jest.spyOn(instance, 'handleUpdate');
+
+        await instance.performGistAction();
+        expect(spy).toHaveBeenCalledWith(true);
+      });
     });
 
     it('handles an error in Gist publishing', async () => {

tests/renderer/components/settings-general-github-spec.tsx

@@ -31,4 +31,23 @@ describe('GitHubSettings component', () => {
     wrapper.childAt(1).childAt(1).simulate('click');
     expect(store.isTokenDialogShowing).toBe(true);
   });
+
+  describe('Gist publish as revision component', () => {
+    it('state changes', async () => {
+      const wrapper = shallow(<GitHubSettings appState={store as any} />);
+      const instance = wrapper.instance() as any;
+
+      await instance.handlePublishGistAsRevisionChange({
+        currentTarget: { checked: false },
+      });
+
+      expect(store.isPublishingGistAsRevision).toBe(false);
+
+      await instance.handlePublishGistAsRevisionChange({
+        currentTarget: { checked: true },
+      });
+
+      expect(store.isPublishingGistAsRevision).toBe(true);
+    });
+  });
 });