Merge pull request mermaid-js#438 from mermaid-js/develop

feat: Add troubleshooting if link is broken
mgenereu · Oct 9, 2021 · 0efcbfb · 0efcbfb
2 parents cf195b0 + 9aba369
commit 0efcbfb
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git 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();
 	});
@@ -88,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.');
+	});
 });
diff --git 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}"

diff --git 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.<br/>Including the broken link in the issue <br/> will speed up the fix.)
+    C -->|No| E{Did someone <br/>send you this link?}
+    E -->|Yes| F[Ask them to send <br/>you the complete link]
+    E -->|No| G{Did you copy <br/> the complete URL?}
+    G --> |Yes| D
+    G --> |"No :("| H(Try using the Timeline tab in History <br/>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<string> = derived([codeStore], ([code], set) => {
 	set(toBase64(JSON.stringify(code), true));
@@ -50,11 +61,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 });
 };