Skip to content

feat: improve error dialog when gist publish is failing #1727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: improve error dialog when gist publish is failing #1727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 28 additions & 10 deletions rtl-spec/components/commands-publish-button.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,21 @@ type GistCreateOpts = {
public: boolean;
};

class RequestError extends Error {
public message: string;
public status: number;

public constructor(message: string, status: number) {
super(message);

this.message = message;
this.status = status;
}
}

describe('Action button component', () => {
const description = 'Electron Fiddle Gist';
const errorMessage = '💀';
const error = new RequestError("Don't be blue 💙", 401);
let app: App;
let mocktokit: OctokitMock;
let state: AppState;
Expand Down Expand Up @@ -228,8 +240,9 @@ describe('Action button component', () => {
});

it('handles an error in Gist publishing', async () => {
state.showGenericDialog = vi.fn().mockReturnValue({ confirm: true });
mocktokit.gists.create.mockImplementation(() => {
throw new Error(errorMessage);
throw new RequestError(error.message, error.status);
});

state.editorMosaic.isEdited = true;
Expand All @@ -240,6 +253,11 @@ describe('Action button component', () => {

// On failure the editor should still be considered edited
expect(state.editorMosaic.isEdited).toBe(true);
expect(state.showGenericDialog).toHaveBeenCalledWith(
expect.objectContaining({
label: expect.stringContaining('Publishing Fiddle to GitHub failed.'),
}),
);
});

it('can publish private gists', async () => {
Expand Down Expand Up @@ -292,16 +310,16 @@ describe('Action button component', () => {
});

it('notifies the user if updating fails', async () => {
state.showGenericDialog = vi.fn().mockReturnValue({ confirm: true });
mocktokit.gists.update.mockImplementation(() => {
throw new Error(errorMessage);
throw new RequestError(error.message, error.status);
});

await instance.performGistAction();

expect(window.ElectronFiddle.showWarningDialog).toHaveBeenCalledWith(
expect(state.showGenericDialog).toHaveBeenCalledWith(
expect.objectContaining({
detail: expect.stringContaining(errorMessage),
message: expect.stringContaining('Updating Fiddle Gist failed.'),
label: expect.stringContaining('Updating Fiddle Gist failed.'),
}),
);
});
Expand All @@ -325,16 +343,16 @@ describe('Action button component', () => {
});

it('notifies the user if deleting fails', async () => {
state.showGenericDialog = vi.fn().mockReturnValue({ confirm: true });
mocktokit.gists.delete.mockImplementation(() => {
throw new Error(errorMessage);
throw new RequestError(error.message, error.status);
});

await instance.performGistAction();

expect(window.ElectronFiddle.showWarningDialog).toHaveBeenCalledWith(
expect(state.showGenericDialog).toHaveBeenCalledWith(
expect.objectContaining({
detail: expect.stringContaining(errorMessage),
message: expect.stringContaining('Deleting Fiddle Gist failed.'),
label: expect.stringContaining('Deleting Fiddle Gist failed.'),
}),
);
});
Expand Down
76 changes: 59 additions & 17 deletions src/renderer/components/commands-action-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ import { observer } from 'mobx-react';
import {
EditorId,
EditorValues,
GenericDialogType,
GistActionState,
GistActionType,
PACKAGE_NAME,
} from '../../interfaces';
import { FIDDLE_GIST_DESCRIPTION_PLACEHOLDER } from '../constants';
import { AppState } from '../state';
import { ensureRequiredFiles } from '../utils/editor-utils';
import { getOctokit } from '../utils/octokit';
Expand Down Expand Up @@ -98,7 +100,7 @@ export const GistActionButton = observer(
}

private getFiddleDescriptionFromUser(): Promise<string | undefined> {
const placeholder = 'Electron Fiddle Gist' as const;
const placeholder = FIDDLE_GIST_DESCRIPTION_PLACEHOLDER;
return this.props.appState.showInputDialog({
defaultInput: placeholder,
label: 'Please provide a brief description for your Fiddle Gist',
Expand Down Expand Up @@ -156,11 +158,23 @@ export const GistActionButton = observer(
} catch (error: any) {
console.warn(`Could not publish gist`, { error });

window.ElectronFiddle.showWarningDialog({
message:
'Publishing Fiddle to GitHub failed. Are you connected to the Internet?',
detail: `GitHub encountered the following error: ${error.message}`,
});
if (error.status === 401 || error.status === 403) {
const { confirm } = await this.props.appState.showGenericDialog({
label: `Publishing Fiddle to GitHub failed. GitHub encountered the following error: ${error.message}`,
ok: 'Update token',
cancel: 'Close',
type: GenericDialogType.warning,
wantsInput: false,
});

if (confirm) {
this.showGitHubTokenSettings();
}
} else {
await this.props.appState.showErrorDialog(
`Publishing Fiddle to GitHub failed. Are you connected to the Internet? GitHub encountered the following error: ${error.message}`,
);
}

return false;
}
Expand Down Expand Up @@ -230,12 +244,23 @@ export const GistActionButton = observer(
} catch (error: any) {
console.warn(`Could not update gist`, { error });

window.ElectronFiddle.showWarningDialog({
message:
'Updating Fiddle Gist failed. Are you connected to the Internet and is this your Gist?',
detail: `GitHub encountered the following error: ${error.message}`,
buttons: ['Ok'],
});
if (error.status === 401 || error.status === 403) {
const { confirm } = await this.props.appState.showGenericDialog({
label: `Updating Fiddle Gist failed. GitHub encountered the following error: ${error.message}`,
ok: 'Update token',
cancel: 'Close',
type: GenericDialogType.warning,
wantsInput: false,
});

if (confirm) {
this.showGitHubTokenSettings();
}
} else {
await this.props.appState.showErrorDialog(
`Updating Fiddle Gist failed. Are you connected to the Internet? GitHub encountered the following error: ${error.message}`,
);
}
}

appState.activeGistAction = GistActionState.none;
Expand All @@ -262,11 +287,23 @@ export const GistActionButton = observer(
} catch (error: any) {
console.warn(`Could not delete gist`, { error });

window.ElectronFiddle.showWarningDialog({
message:
'Deleting Fiddle Gist failed. Are you connected to the Internet, is this your Gist, and have you loaded it?',
detail: `GitHub encountered the following error: ${error.message}`,
});
if (error.status === 401 || error.status === 403) {
const { confirm } = await this.props.appState.showGenericDialog({
label: `Deleting Fiddle Gist failed. GitHub encountered the following error: ${error.message}`,
ok: 'Update token',
cancel: 'Close',
type: GenericDialogType.warning,
wantsInput: false,
});

if (confirm) {
this.showGitHubTokenSettings();
}
} else {
await this.props.appState.showErrorDialog(
`Deleting Fiddle Gist failed. Are you connected to the Internet? GitHub encountered the following error: ${error.message}`,
);
}
}

appState.gistId = undefined;
Expand Down Expand Up @@ -455,5 +492,10 @@ export const GistActionButton = observer(
.map(([id, content]) => [id, { filename: id, content }]),
);
};

private showGitHubTokenSettings() {
this.props.appState.toggleSettings();
this.props.appState.toggleAuthDialog();
}
},
);