ipc: Use id for switch-server-tab and set tabId to server id.

We want to start using server id to communicate the identity of server
in events. This commit does that for `switch-server-tab`. It also
requires us to set tabId to server id instead of an incremental number.
We try to make changes in this commit minimal and pass index to the
functions that switch-server-tab calls. We will replace that index with
tabId in further commits incrementally.

Author: shubham-padia

app/common/typed-ipc.ts

@@ -14,7 +14,7 @@ export type MainMessage = {
   "realm-name-changed": (serverURL: string, realmName: string) => void;
   "reload-full-app": () => void;
   "save-last-tab": (index: number) => void;
-  "switch-server-tab": (index: number) => void;
+  "switch-server-tab": (serverId: string) => void;
   "toggle-app": () => void;
   "toggle-badge-option": (newValue: boolean) => void;
   "toggle-menubar": (showMenubar: boolean) => void;
@@ -63,7 +63,7 @@ export type RendererMessage = {
   "set-idle": () => void;
   "show-keyboard-shortcuts": () => void;
   "show-notification-settings": () => void;
-  "switch-server-tab": (index: number) => void;
+  "switch-server-tab": (serverId: string) => void;
   "tab-devtools": () => void;
   "toggle-autohide-menubar": (
     autoHideMenubar: boolean,

app/common/types.ts

@@ -30,4 +30,6 @@ export type TabData = {
   page?: TabPage;
   label: string;
   index: number;
+  id: string;
+  serverId?: string;
 };

app/main/menu.ts

@@ -329,7 +329,7 @@ function getWindowSubmenu(
         checked: tab.index === activeTabIndex,
         click(_item, focusedWindow) {
           if (focusedWindow) {
-            sendAction("switch-server-tab", tab.index);
+            sendAction("switch-server-tab", tab.serverId!);
           }
         },
         type: "checkbox",
@@ -348,7 +348,7 @@ function getWindowSubmenu(
           if (focusedWindow) {
             sendAction(
               "switch-server-tab",
-              getNextServer(tabs, activeTabIndex!),
+              getNextServer(tabs, tabs[activeTabIndex!]),
             );
           }
         },
@@ -361,7 +361,7 @@ function getWindowSubmenu(
           if (focusedWindow) {
             sendAction(
               "switch-server-tab",
-              getPreviousServer(tabs, activeTabIndex!),
+              getPreviousServer(tabs, tabs[activeTabIndex!]),
             );
           }
         },
@@ -704,20 +704,22 @@ async function checkForUpdate(): Promise<void> {
   await appUpdater(true);
 }
 
-function getNextServer(tabs: TabData[], activeTabIndex: number): number {
+function getNextServer(tabs: TabData[], activeTab: TabData): string {
+  let {index} = activeTab;
   do {
-    activeTabIndex = (activeTabIndex + 1) % tabs.length;
-  } while (tabs[activeTabIndex]?.role !== "server");
+    index = (index + 1) % tabs.length;
+  } while (tabs[index]?.role !== "server");
 
-  return activeTabIndex;
+  return tabs[index].serverId!;
 }
 
-function getPreviousServer(tabs: TabData[], activeTabIndex: number): number {
+function getPreviousServer(tabs: TabData[], activeTab: TabData): string {
+  let {index} = activeTab;
   do {
-    activeTabIndex = (activeTabIndex - 1 + tabs.length) % tabs.length;
-  } while (tabs[activeTabIndex]?.role !== "server");
+    index = (index - 1 + tabs.length) % tabs.length;
+  } while (tabs[index]?.role !== "server");
 
-  return activeTabIndex;
+  return tabs[index].serverId!;
 }
 
 export function setMenu(properties: MenuProperties): void {

app/renderer/js/components/server-tab.ts

@@ -9,19 +9,22 @@ import type WebView from "./webview.ts";
 
 export type ServerTabProperties = {
   webview: Promise<WebView>;
+  serverId: string;
 } & TabProperties;
 
 export default class ServerTab extends Tab {
   webview: Promise<WebView>;
+  serverId: string;
   $el: Element;
   $name: Element;
   $icon: HTMLImageElement;
   $badge: Element;
 
-  constructor({webview, ...properties}: ServerTabProperties) {
+  constructor({webview, serverId, ...properties}: ServerTabProperties) {
     super(properties);
 
     this.webview = webview;
+    this.serverId = serverId;
     this.$el = generateNodeFromHtml(this.templateHtml());
     this.properties.$root.append(this.$el);
     this.registerListeners();
@@ -84,7 +87,7 @@ export default class ServerTab extends Tab {
     const shownIndex = this.properties.index + 1;
 
     // Array index == Shown index - 1
-    ipcRenderer.send("switch-server-tab", shownIndex - 1);
+    ipcRenderer.send("switch-server-tab", this.serverId);
 
     return process.platform === "darwin"
       ? `⌘${shownIndex}`

app/renderer/js/components/tab.ts

@@ -8,7 +8,7 @@ export type TabProperties = {
   $root: Element;
   onClick: () => void;
   index: number;
-  tabId: number;
+  tabId: string;
   onHover?: () => void;
   onHoverOut?: () => void;
   materialIcon?: string;

app/renderer/js/components/webview.ts

@@ -22,7 +22,7 @@ type WebViewProperties = {
   $root: Element;
   rootWebContents: WebContents;
   index: number;
-  tabId: number;
+  tabId: string;
   url: string;
   role: TabRole;
   isActive: () => boolean;

app/renderer/js/main.ts

@@ -86,7 +86,6 @@ export class ServerManagerView {
   activeTabIndex: number;
   tabs: ServerOrFunctionalTab[];
   functionalTabs: Map<TabPage, number>;
-  tabId: number;
   presetOrgs: string[];
   preferenceView?: PreferenceView;
   constructor() {
@@ -132,7 +131,6 @@ export class ServerManagerView {
     this.tabs = [];
     this.presetOrgs = [];
     this.functionalTabs = new Map();
-    this.tabId = 0;
   }
 
   async init(): Promise<void> {
@@ -375,7 +373,7 @@ export class ServerManagerView {
   }
 
   initServer(server: ServerConfig, index: number): ServerTab {
-    const tabId = this.gettabId();
+    const tabId = this.generateTabId();
     const tab: ServerTab = new ServerTab({
       role: "server",
       icon: DomainUtil.iconAsUrl(server.icon),
@@ -384,6 +382,7 @@ export class ServerManagerView {
       onClick: this.activateLastTab.bind(this, index),
       index,
       tabId,
+      serverId: server.id,
       onHover: this.onHover.bind(this, index),
       onHoverOut: this.onHoverOut.bind(this, index),
       webview: WebView.create({
@@ -483,10 +482,8 @@ export class ServerManagerView {
     this.toggleDndButton(dnd);
   }
 
-  gettabId(): number {
-    const currentIndex = this.tabId;
-    this.tabId++;
-    return currentIndex;
+  generateTabId(): string {
+    return DomainUtil.generateDomainId();
   }
 
   async getCurrentActiveServer(): Promise<string> {
@@ -574,7 +571,7 @@ export class ServerManagerView {
     const index = this.tabs.length;
     this.functionalTabs.set(tabProperties.page, index);
 
-    const tabId = this.gettabId();
+    const tabId = this.generateTabId();
     const $view = await tabProperties.makeView();
     this.$webviewsContainer.append($view);
 
@@ -669,6 +666,7 @@ export class ServerManagerView {
       page: tab.properties.page,
       label: tab.properties.label,
       index: tab.properties.index,
+      id: tab.properties.tabId,
     }));
   }
 
@@ -811,14 +809,21 @@ export class ServerManagerView {
     }
   }
 
-  async isLoggedIn(tabId: number): Promise<boolean> {
-    const tab = this.tabs[tabId];
+  async isLoggedIn(index: number): Promise<boolean> {
+    const tab = this.tabs[index];
     if (!(tab instanceof ServerTab)) return false;
     const webview = await tab.webview;
     const url = webview.getWebContents().getURL();
     return !(url.endsWith("/login/") || webview.loading);
   }
 
+  getTabByServerId(serverId: string): ServerTab | undefined {
+    return this.tabs.find(
+      (tab): tab is ServerTab =>
+        tab instanceof ServerTab && tab.serverId === serverId,
+    );
+  }
+
   addContextMenu($serverImg: HTMLElement, index: number): void {
     $serverImg.addEventListener("contextmenu", async (event) => {
       event.preventDefault();
@@ -1005,8 +1010,9 @@ export class ServerManagerView {
       ipcRenderer.send("reload-full-app");
     });
 
-    ipcRenderer.on("switch-server-tab", async (event, index: number) => {
-      await this.activateLastTab(index);
+    ipcRenderer.on("switch-server-tab", async (event, serverId: string) => {
+      const tab = this.getTabByServerId(serverId)!;
+      await this.activateLastTab(tab.properties.index);
     });
 
     ipcRenderer.on("open-org-tab", async () => {

app/renderer/js/pages/preference/connected-org-section.ts

@@ -53,6 +53,7 @@ export function initConnectedOrgSection({
       $root: $serverInfoContainer,
       server,
       index: i,
+      serverId: server.id,
       onChange: reloadApp,
     });
   }

app/renderer/js/pages/preference/server-info-form.ts

@@ -12,6 +12,7 @@ type ServerInfoFormProperties = {
   $root: Element;
   server: ServerConfig;
   index: number;
+  serverId: string;
   onChange: () => void;
 };
 
@@ -70,14 +71,26 @@ export function initServerInfoForm(properties: ServerInfoFormProperties): void {
   });
 
   $openServerButton.addEventListener("click", () => {
-    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+    ipcRenderer.send(
+      "forward-message",
+      "switch-server-tab",
+      properties.serverId,
+    );
   });
 
   $serverInfoAlias.addEventListener("click", () => {
-    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+    ipcRenderer.send(
+      "forward-message",
+      "switch-server-tab",
+      properties.serverId,
+    );
   });
 
   $serverIcon.addEventListener("click", () => {
-    ipcRenderer.send("forward-message", "switch-server-tab", properties.index);
+    ipcRenderer.send(
+      "forward-message",
+      "switch-server-tab",
+      properties.serverId,
+    );
   });
 }