From d4b0c905acb1df616a3590bf80af938ec7248ede Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 9 Oct 2021 09:53:21 +0530 Subject: [PATCH 1/4] Fix redirection check --- cypress/integration/loadSite.spec.ts | 3 +-- cypress/snapshots.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/cypress/integration/loadSite.spec.ts b/cypress/integration/loadSite.spec.ts index b082859f..f4320ad9 100644 --- a/cypress/integration/loadSite.spec.ts +++ b/cypress/integration/loadSite.spec.ts @@ -17,9 +17,8 @@ describe('Site Loads', () => { ); cy.url().should( 'include', - '/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ' + '/edit#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ' ); - cy.contains('History').click(); cy.getLocalStorage('codeStore').snapshot(); }); diff --git a/cypress/snapshots.js b/cypress/snapshots.js index ef681857..6f6a02aa 100644 --- a/cypress/snapshots.js +++ b/cypress/snapshots.js @@ -16,7 +16,7 @@ module.exports = { "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}" } }, - "__version": "8.4.1", + "__version": "8.5.0", "Auto sync tests": { "should dim diagram when code is edited": { "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Test\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}" From b3cc9f70ff85fade613af92c02ce90d6500ec8ec Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 9 Oct 2021 10:33:50 +0530 Subject: [PATCH 2/4] feat: Add troubleshooting if link is broken --- src/lib/util/state.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index 5688493f..c9b10186 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -25,6 +25,17 @@ export const defaultState: State = { updateDiagram: true }; +const urlParseFailedState = `graph TD + A[Loading URL failed. We can try to figure out why.] -->|Decode JSON| B(Please check the console to see the JSON and error details.) + B --> C{Is the JSON correct?} + C -->|Yes| D(Please Click here to Raise an issue in github.
Including the broken link in the issue
will speed up the fix.) + C -->|No| E{Did someone
send you this link?} + E -->|Yes| F[Ask them to send
you the complete link] + E -->|No| G{Did you copy
the complete URL?} + G --> |Yes| D + G --> |"No :("| H(Try using the Timeline tab in History
from same browser you used to create the diagram.) + click D href "https://github.com/mermaid-js/mermaid-live-editor/issues/new?assignees=&labels=bug&template=bug_report.md&title=Broken%20link" "Raise issue"`; + export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore'); export const base64State: Readable = derived([codeStore], ([code], set) => { set(toBase64(JSON.stringify(code), true)); @@ -32,8 +43,9 @@ export const base64State: Readable = derived([codeStore], ([code], set) export const loadState = (data: string): void => { let state: State; + let stateStr: string; try { - const stateStr = fromBase64(data); + stateStr = fromBase64(data); console.log(`Trying to load state: ${stateStr}`); state = JSON.parse(stateStr); const mermaidConfig = @@ -50,11 +62,11 @@ export const loadState = (data: string): void => { state.mermaid = JSON.stringify(mermaidConfig, null, 2); } catch (e) { + state = get(codeStore); if (data) { console.error('Init error', e); + state.code = urlParseFailedState; } - state = get(codeStore); - console.log(state); } updateCodeStore({ ...state, updateEditor: true }); }; From 8a79c81e2bc1121cf5a56457702e72c8af110521 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 9 Oct 2021 10:43:44 +0530 Subject: [PATCH 3/4] test: Add troubleshoot test --- cypress/integration/loadSite.spec.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/cypress/integration/loadSite.spec.ts b/cypress/integration/loadSite.spec.ts index f4320ad9..550e30c8 100644 --- a/cypress/integration/loadSite.spec.ts +++ b/cypress/integration/loadSite.spec.ts @@ -87,4 +87,9 @@ describe('Site Loads', () => { cy.contains('securityLevel'); cy.get('#view').find('img').should('be.visible'); }); + + it('should show troubleshooting steps if loading fails', () => { + cy.visit('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg'); + cy.contains('Please Click here to Raise an issue in github.'); + }); }); From 9aba3693f1d09a3cab7580928e350233c8534d5b Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 9 Oct 2021 11:24:41 +0530 Subject: [PATCH 4/4] fix: revert stateStr change --- src/lib/util/state.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index c9b10186..7d359908 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -43,9 +43,8 @@ export const base64State: Readable = derived([codeStore], ([code], set) export const loadState = (data: string): void => { let state: State; - let stateStr: string; try { - stateStr = fromBase64(data); + const stateStr = fromBase64(data); console.log(`Trying to load state: ${stateStr}`); state = JSON.parse(stateStr); const mermaidConfig =