Display a banner for unsupported Zulip Server versions.

Signed-off-by: Anders Kaseorg <[email protected]>

Author: andersk

app/common/types.ts

@@ -15,6 +15,8 @@ export type ServerConf = {
   url: string;
   alias: string;
   icon: string;
+  zulipVersion: string;
+  zulipFeatureLevel: number;
 };
 
 export type TabRole = "server" | "function";

app/main/request.ts

@@ -71,11 +71,19 @@ export const _getServerSettings = async (
 
   const data: unknown = JSON.parse(await getStream(response));
   /* eslint-disable @typescript-eslint/naming-convention */
-  const {realm_name, realm_uri, realm_icon} = z
+  const {
+    realm_name,
+    realm_uri,
+    realm_icon,
+    zulip_version,
+    zulip_feature_level,
+  } = z
     .object({
       realm_name: z.string(),
-      realm_uri: z.string(),
+      realm_uri: z.string().url(),
       realm_icon: z.string(),
+      zulip_version: z.string().default("unknown"),
+      zulip_feature_level: z.number().default(0),
     })
     .parse(data);
   /* eslint-enable @typescript-eslint/naming-convention */
@@ -86,6 +94,8 @@ export const _getServerSettings = async (
     icon: realm_icon.startsWith("/") ? realm_uri + realm_icon : realm_icon,
     url: realm_uri,
     alias: realm_name,
+    zulipVersion: zulip_version,
+    zulipFeatureLevel: zulip_feature_level,
   };
 };
 

app/renderer/css/main.css

@@ -331,6 +331,30 @@ webview.focus {
   outline: 0 solid transparent;
 }
 
+.webview-unsupported {
+  background: rgb(254 243 199);
+  border: 1px solid rgb(253 230 138);
+  color: rgb(69 26 3);
+  font-family: system-ui;
+  font-size: 14px;
+  display: flex;
+}
+
+.webview-unsupported[hidden] {
+  display: none;
+}
+
+.webview-unsupported-message {
+  padding: 0.3em;
+  flex: 1;
+  text-align: center;
+}
+
+.webview-unsupported-dismiss {
+  padding: 0.3em;
+  cursor: pointer;
+}
+
 /* Tooltip styling */
 
 #loading-tooltip,

app/renderer/js/components/webview.ts

@@ -32,12 +32,22 @@ type WebViewProps = {
   preload?: string;
   onTitleChange: () => void;
   hasPermission?: (origin: string, permission: string) => boolean;
+  unsupportedMessage?: string;
 };
 
 export default class WebView {
   static templateHtml(props: WebViewProps): Html {
     return html`
       <div class="webview-pane">
+        <div
+          class="webview-unsupported"
+          ${props.unsupportedMessage === undefined ? html`hidden` : html``}
+        >
+          <span class="webview-unsupported-message"
+            >${props.unsupportedMessage ?? ""}</span
+          >
+          <span class="webview-unsupported-dismiss">×</span>
+        </div>
         <webview
           data-tab-id="${props.tabIndex}"
           src="${props.url}"
@@ -98,6 +108,10 @@ export default class WebView {
   private zoomFactor = 1;
   private customCss: string | false | null;
   private readonly $webviewsContainer: DOMTokenList;
+  private readonly $unsupported: HTMLElement;
+  private readonly $unsupportedMessage: HTMLElement;
+  private readonly $unsupportedDismiss: HTMLElement;
+  private unsupportedDismissed = false;
 
   private constructor(
     readonly props: WebViewProps,
@@ -109,6 +123,13 @@ export default class WebView {
     this.$webviewsContainer = document.querySelector(
       "#webviews-container",
     )!.classList;
+    this.$unsupported = $pane.querySelector(".webview-unsupported")!;
+    this.$unsupportedMessage = $pane.querySelector(
+      ".webview-unsupported-message",
+    )!;
+    this.$unsupportedDismiss = $pane.querySelector(
+      ".webview-unsupported-dismiss",
+    )!;
 
     this.registerListeners();
   }
@@ -195,6 +216,12 @@ export default class WebView {
     this.getWebContents().reload();
   }
 
+  setUnsupportedMessage(unsupportedMessage: string | undefined) {
+    this.$unsupported.hidden =
+      unsupportedMessage === undefined || this.unsupportedDismissed;
+    this.$unsupportedMessage.textContent = unsupportedMessage ?? "";
+  }
+
   send<Channel extends keyof RendererMessage>(
     channel: Channel,
     ...args: Parameters<RendererMessage[Channel]>
@@ -266,6 +293,11 @@ export default class WebView {
     this.$webview.addEventListener("did-stop-loading", () => {
       this.props.switchLoading(false, this.props.url);
     });
+
+    this.$unsupportedDismiss.addEventListener("click", () => {
+      this.unsupportedDismissed = true;
+      this.$unsupported.hidden = true;
+    });
   }
 
   private getBadgeCount(title: string): number {

app/renderer/js/main.ts

@@ -342,6 +342,9 @@ export class ServerManagerView {
           const serverConf = await DomainUtil.updateSavedServer(server.url, i);
           tab.setName(serverConf.alias);
           tab.setIcon(iconAsUrl(serverConf.icon));
+          (await tab.webview).setUnsupportedMessage(
+            DomainUtil.getUnsupportedMessage(serverConf),
+          );
         })();
       }
 
@@ -417,6 +420,7 @@ export class ServerManagerView {
         },
         onTitleChange: this.updateBadge.bind(this),
         preload: url.pathToFileURL(path.join(bundlePath, "preload.js")).href,
+        unsupportedMessage: DomainUtil.getUnsupportedMessage(server),
       }),
     });
     this.tabs.push(tab);

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

@@ -10,6 +10,7 @@ import {z} from "zod";
 import * as EnterpriseUtil from "../../../common/enterprise-util.js";
 import Logger from "../../../common/logger-util.js";
 import * as Messages from "../../../common/messages.js";
+import * as t from "../../../common/translation-util.js";
 import type {ServerConf} from "../../../common/types.js";
 import {ipcRenderer} from "../typed-ipc-renderer.js";
 
@@ -22,9 +23,11 @@ const logger = new Logger({
 export const defaultIconSentinel = "../renderer/img/icon.png";
 
 const serverConfSchema = z.object({
-  url: z.string(),
+  url: z.string().url(),
   alias: z.string(),
   icon: z.string(),
+  zulipVersion: z.string().default("unknown"),
+  zulipFeatureLevel: z.number().default(0),
 });
 
 let db!: JsonDB;
@@ -198,3 +201,15 @@ export function formatUrl(domain: string): string {
 
   return `https://${domain}`;
 }
+
+export function getUnsupportedMessage(server: ServerConf): string | undefined {
+  if (server.zulipFeatureLevel < 65 /* Zulip Server 4.0 */) {
+    const realm = new URL(server.url).hostname;
+    return t.__(
+      "{{{server}}} runs an outdated Zulip Server version {{{version}}}. It may not fully work in this app.",
+      {server: realm, version: server.zulipVersion},
+    );
+  }
+
+  return undefined;
+}

public/translations/en.json

@@ -117,5 +117,6 @@
 	"Zoom In": "Zoom In",
 	"Zoom Out": "Zoom Out",
 	"keyboard shortcuts": "keyboard shortcuts",
-	"script": "script"
+	"script": "script",
+	"{{{server}}} runs an outdated Zulip Server version {{{version}}}. It may not fully work in this app.": "{{{server}}} runs an outdated Zulip Server version {{{version}}}. It may not fully work in this app."
 }