Make org tabs draggable in sidebar

app/package.json

@@ -43,9 +43,10 @@
     "node-json-db": "0.9.2",
     "request": "2.85.0",
     "semver": "5.4.1",
+    "sortablejs": "1.10.0-rc3",
     "wurl": "2.5.0"
   },
   "optionalDependencies": {
     "node-mac-notifier": "1.1.0"
   }
-}
+}

app/renderer/js/main.ts

@@ -1,6 +1,7 @@
 'use strict';
 
 import { ipcRenderer, remote, clipboard, shell } from 'electron';
+import Sortable from 'sortablejs';
 import { feedbackHolder } from './feedback';
 
 import path = require('path');
@@ -79,6 +80,7 @@ class ServerManagerView {
 	$settingsButton: HTMLButtonElement;
 	$webviewsContainer: Element;
 	$backButton: HTMLButtonElement;
+	$orgsList: HTMLElement;
 	$dndButton: HTMLButtonElement;
 	$addServerTooltip: HTMLElement;
 	$reloadTooltip: HTMLElement;
@@ -90,8 +92,10 @@ class ServerManagerView {
 	$sidebar: Element;
 	$fullscreenPopup: Element;
 	$fullscreenEscapeKey: string;
+	$sortableList: any;
 	loading: AnyObject;
 	activeTabIndex: number;
+	servers: Domain[];
 	tabs: ServerOrFunctionalTab[];
 	functionalTabs: AnyObject;
 	tabIndex: number;
@@ -123,6 +127,7 @@ class ServerManagerView {
 		this.$dndTooltip = $actionsContainer.querySelector('#dnd-tooltip');
 
 		this.$sidebar = document.querySelector('#sidebar');
+		this.$orgsList = document.querySelector('#tabs-container');
 
 		this.$fullscreenPopup = document.querySelector('#fullscreen-popup');
 		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
@@ -131,6 +136,7 @@ class ServerManagerView {
 		this.loading = {};
 		this.activeTabIndex = -1;
 		this.tabs = [];
+		this.servers = DomainUtil.getDomains();
 		this.presetOrgs = [];
 		this.functionalTabs = {};
 		this.tabIndex = 0;
@@ -237,9 +243,27 @@ class ServerManagerView {
 		}
 	}
 
+	onEnd(): void {
+		const newServers: Domain[] = [];
+		const tabElements = document.querySelectorAll('#tabs-container .tab');
+		tabElements.forEach((el, index) => {
+			const oldIndex = Number(el.getAttribute('data-tab-id')) % this.servers.length;
+			newServers.push(this.servers[oldIndex]);
+			// TODO: Change this to read data from in-memory store or DomainUtil.
+			el.setAttribute('data-tab-id', index.toString());
+		});
+		this.servers = newServers;
+		DomainUtil.batchUpdateDomain(this.servers);
+		this.reloadView(false);
+	}
+
 	initSidebar(): void {
 		const showSidebar = ConfigUtil.getConfigItem('showSidebar', true);
 		this.toggleSidebar(showSidebar);
+		this.$sortableList = Sortable.create(this.$orgsList, {
+			dataIdattr: 'data-sortable-id',
+			onEnd: this.onEnd.bind(this)
+		});
 	}
 
 	async queueDomain(domain: any): Promise<boolean> {
@@ -307,12 +331,14 @@ class ServerManagerView {
 		}
 	}
 
-	initTabs(): void {
-		const servers = DomainUtil.getDomains();
-		if (servers.length > 0) {
-			for (let i = 0; i < servers.length; i++) {
-				this.initServer(servers[i], i);
-				DomainUtil.updateSavedServer(servers[i].url, i);
+	initTabs(refresh: boolean = true): void {
+		if (refresh) {
+			this.servers = DomainUtil.getDomains();
+		}
+		if (this.servers.length > 0) {
+			for (let i = 0; i < this.servers.length; i++) {
+				this.initServer(this.servers[i], i);
+				DomainUtil.updateSavedServer(this.servers[i].url, i);
 				this.activateTab(i);
 			}
 			// Open last active tab
@@ -666,14 +692,14 @@ class ServerManagerView {
 		this.$webviewsContainer.innerHTML = '';
 	}
 
-	reloadView(): void {
+	reloadView(refresh: boolean = true): void {
 		// Save and remember the index of last active tab so that we can use it later
 		const lastActiveTab = this.tabs[this.activeTabIndex].props.index;
 		ConfigUtil.setConfigItem('lastActiveTab', lastActiveTab);
 
 		// Destroy the current view and re-initiate it
 		this.destroyView();
-		this.initTabs();
+		this.initTabs(refresh);
 		this.initServerActions();
 	}
 

app/renderer/js/utils/domain-util.ts

@@ -64,6 +64,13 @@ class DomainUtil {
 		this.db.push(`/domains[${index}]`, server, true);
 	}
 
+	batchUpdateDomain(servers: Domain[]): void {
+		this.db.delete('/domains');
+		for (const server of servers) {
+			this.db.push('/domains[]', server, true);
+		}
+	}
+
 	addDomain(server: any): Promise<void> {
 		const { ignoreCerts } = server;
 		return new Promise(resolve => {

typings.d.ts

@@ -12,6 +12,7 @@ declare module 'escape-html';
 declare module 'fs-extra';
 declare module 'wurl';
 declare module 'i18n';
+declare module 'sortablejs';
 
 interface PageParamsObject {
     realm_uri: string;
@@ -53,3 +54,10 @@ interface ZulipWebWindow extends Window {
     $: any;
     lightbox: any;
 }
+
+interface Domain {
+  icon: string;
+  url: string;
+  alias: string;
+  ignoreCerts: boolean;
+}