Support custom URLS for Diagrams.net

domain/setting/endpoint.go

@@ -217,7 +217,11 @@ func (h *Handler) GetInstanceSetting(w http.ResponseWriter, r *http.Request) {
 	key := request.Query(r, "key")
 	setting, _ := h.Store.Setting.GetUser(orgID, "", key, "")
 	if len(setting) == 0 {
-		setting = "{}"
+		if key == "flowchart" {
+			setting = fmt.Sprintf(`{ "url": "%s" }`, "https://embed.diagrams.net/?embed=1&ui=Kennedy&spin=0&proto=json&splash=0")
+		} else {
+			setting = "{}"
+		}
 	}
 
 	response.WriteJSON(w, setting)

gui/app/components/customize/integration-settings.js

@@ -45,6 +45,14 @@ export default Component.extend(Notifier, {
 
 			this.set('trelloCreds', trello);
 		}
+
+		let flowchart = this.get('flowchart');
+		if (_.isEmpty(flowchart) || !_.isObject(flowchart)) {
+			flowchart = {
+				url: '',
+			};
+		}
+		this.set('flowchart', flowchart);
 	},
 
 	actions: {
@@ -61,6 +69,8 @@ export default Component.extend(Notifier, {
 					this.get('orgSvc').saveGlobalSetting('SECTION-TRELLO', this.get('trelloCreds'));
 				}
 
+				this.get('orgSvc').saveOrgSetting(orgId, 'flowchart', this.get('flowchart'));
+
 				this.notifySuccess(this.i18n.localize('saved'));
 			});
 		}

gui/app/components/section/flowchart/type-editor.js

@@ -17,6 +17,7 @@ import Component from '@ember/component';
 export default Component.extend({
 	appMeta: service(),
 	sectionSvc: service('section'),
+	orgService: service('organization'),
 	i18n: service(),
     isDirty: false,
     waiting: false,
@@ -26,6 +27,7 @@ export default Component.extend({
 	readyToSave: false,
 	previewButtonCaption: '',
 	flowCallback: null,
+	serviceUrl: '',
 	editorId: computed('page', function () {
 		let page = this.get('page');
 		return `flowchart-editor-${page.id}`;
@@ -41,10 +43,16 @@ export default Component.extend({
 
     didInsertElement() {
 		this._super(...arguments);
-		this.previewButtonCaption = this.i18n.localize('preview');
 
-		schedule('afterRender', () => {
+		let orgId = this.get("appMeta.orgId");
-			this.setupEditor();
+		this.get('orgService').getOrgSetting(orgId, 'flowchart').then((s) => {
+			this.set('serviceUrl', s.url);
+
+			this.previewButtonCaption = this.i18n.localize('preview');
+
+			schedule('afterRender', () => {
+				this.setupEditor();
+			});
 		});
 	},
 

gui/app/pods/customize/integrations/route.js

@@ -32,11 +32,13 @@ export default Route.extend(AuthenticatedRouteMixin, {
 		if (this.get("session.isGlobalAdmin")) {
 			return RSVP.hash({
 				jira: this.get('orgService').getOrgSetting(orgId, 'jira'),
+				flowchart: this.get('orgService').getOrgSetting(orgId, 'flowchart'),
 				trello: this.get('orgService').getGlobalSetting('SECTION-TRELLO')
 			});
 		} else {
 			return RSVP.hash({
 				jira: this.get('orgService').getOrgSetting(orgId, 'jira'),
+				flowchart: this.get('orgService').getOrgSetting(orgId, 'flowchart'),
 				trello: { appKey: '' }
 			});
 		}

gui/app/pods/customize/integrations/template.hbs

@@ -3,4 +3,4 @@
 	desc=(localize 'admin_integrations_explain')
 	icon=constants.Icon.Integrations}}
 
-{{customize/integration-settings jira=model.jira trello=model.trello}}
+{{customize/integration-settings jira=model.jira trello=model.trello flowchart=model.flowchart}}

gui/app/templates/components/customize/integration-settings.hbs

@@ -17,11 +17,18 @@
 			<small class="form-text text-muted">{{localize 'integration_jira_password_explain'}}</small>
 		</div>
 
+		<h2>Diagrams.net</h2>
+		<div class="form-group">
+			<label for="flowchart-url">{{localize 'integration_jira_url'}}</label>
+			{{focus-input id="flowchart-url" type="text" value=flowchart.url class="form-control"}}
+			<small class="form-text text-muted">https://embed.diagrams.net/?embed=1&ui=Kennedy&spin=0&proto=json&splash=0</small>
+		</div>
+
 		{{#if session.isGlobalAdmin}}
 			<h2>Trello</h2>
 			<div class="form-group">
 				<label for="trello-key">{{localize 'integration_trello_appkey'}}</label>
-					{{input id="trello-key" type="text" value=trelloCreds.appKey class="form-control"}}
+				{{input id="trello-key" type="text" value=trelloCreds.appKey class="form-control"}}
 				<small class="form-text text-muted"><a href="https://trello.com/app-key">https://trello.com/app-key</a></small>
 			</div>
 		{{/if}}

gui/app/templates/components/section/flowchart/type-editor.hbs

@@ -6,7 +6,7 @@
 {{#section/base-editor document=document folder=folder page=page busy=waiting isDirty=(action "isDirty") onCancel=(action "onCancel") onAction=(action "onAction")}}
 	<div class="section-flowchart-diagram">
 		<iframe id={{editorId}}
-			src="https://embed.diagrams.net/?embed=1&ui=Kennedy&spin=0&proto=json&splash=0"
+			src={{serviceUrl}}
 			style="frameborder:0; border: 0; width: 100%; height: 1000px;">
 		</iframe>
 	</div>

gui/public/i18n/en-US.json

@@ -401,8 +401,8 @@
     "section_airtable_explain": "Part spreadsheet, part database, and entirely flexible (https://airtable.com)",
     "section_airtable_code": "Airtable embed code",
     "section_code_tip": "Concise name that describes code snippet",
-    "section_drawio": "Draw.io",
+    "section_drawio": "Diagrams.net",
-    "section_drawio_explain": "For making flowcharts, process diagrams, org charts, UML, ER diagrams, network diagrams and much more (https://about.draw.io)",
+    "section_drawio_explain": "For making flowcharts, process diagrams, org charts, UML, ER diagrams, network diagrams and much more (https://www.diagrams.net)",
     "section_iframe": "iFrame",
     "section_iframe_explain": "Embed an iFrame",
     "section_iframe_code": "iFrame embed code",