fix(fe/env): enable WebEnv interface and fix alert bugs

src/client/web/src/common/env.ts

@@ -1,16 +1,31 @@
-export function alertMsg(msg: string) {
+export class WebEnv {
-  if (alert != null) {
+  constructor() {}
-    alert(msg);
+
-  } else {
+  alertMsg = (msg: string) => {
-    console.log(msg);
+    if (alert != null) {
-  }
+      alert(msg);
+    } else {
+      console.log(msg);
+    }
+  };
+
+  confirmMsg = (msg: string): boolean => {
+    if (confirm != null) {
+      return confirm(msg);
+    } else {
+      console.warn(`${msg}: return yes (confirm is not implemented)`);
+      return true;
+    }
+  };
 }
 
-export function confirmMsg(msg: string): boolean {
+export interface IEnv {
-  if (confirm != null) {
+  alertMsg: (msg: string) => void;
-    return confirm(msg);
+  confirmMsg: (msg: string) => boolean;
-  } else {
-    console.warn(`${msg}: return yes (confirm is not implemented)`);
-    return true;
-  }
 }
+
+let env = new WebEnv();
+export const Env = (): IEnv => env;
+export const SetEnv = (expectedEnv: IEnv) => {
+  env = expectedEnv;
+};

src/client/web/src/components/control/tabs.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
-import { List, Map } from "immutable";
+import { Map } from "immutable";
 
 import { updater } from "../state_updater";
-import { Flexbox } from "../layout/flexbox";
 import { ICoreState, MsgProps, UIProps } from "../core_state";
-import { alertMsg } from "../../common/env";
+import { Env } from "../../common/env";
 import { IconProps, getIcon } from "../visual/icons";
 import { colorClass } from "../visual/colors";
 
@@ -31,7 +30,7 @@ export class Tabs extends React.Component<Props, State, {}> {
 
   setTab = (targetControl: string, targetOption: string) => {
     if (!updater().setControlOption(targetControl, targetOption)) {
-      alertMsg(this.props.msg.pkg.get("op.fail"));
+      Env().alertMsg(this.props.msg.pkg.get("op.fail"));
     }
     this.props.update(updater().updateUI);
   };

src/client/web/src/components/layers.tsx

@@ -8,7 +8,6 @@ import { SettingsDialog } from "./dialog_settings";
 
 import { AuthPane, LoginProps } from "./pane_login";
 import { FilesProps } from "./panel_files";
-import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
 import {
   settingsDialogCtrl,

src/client/web/src/components/pane_admin.tsx

@@ -4,7 +4,7 @@ import FileSize from "filesize";
 
 import { RiMenuUnfoldFill } from "@react-icons/all-files/ri/RiMenuUnfoldFill";
 
-import { alertMsg, confirmMsg } from "../common/env";
+import { Env } from "../common/env";
 import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { User, Quota } from "../client";
 import { updater } from "./state_updater";
@@ -115,19 +115,19 @@ export class UserForm extends React.Component<
   };
 
   resetUsedSpace = async (userID: string) => {
-    if (!confirmMsg(this.props.msg.pkg.get("confirm.resetUsedSpace"))) {
+    if (!Env().confirmMsg(this.props.msg.pkg.get("confirm.resetUsedSpace"))) {
       return;
     }
 
     const status = await updater().resetUsedSpace(userID);
     if (status !== "") {
-      alertMsg(this.props.msg.pkg.get("resetUsedSpace"));
+      Env().alertMsg(this.props.msg.pkg.get("resetUsedSpace"));
     }
   };
 
   setPwd = async () => {
     if (this.state.newPwd1 !== this.state.newPwd2) {
-      alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
+      Env().alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
       return;
     }
 
@@ -138,10 +138,10 @@ export class UserForm extends React.Component<
         this.state.newPwd1
       );
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("update.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("update.fail"));
         return;
       }
-      alertMsg(this.props.msg.pkg.get("update.ok"));
+      Env().alertMsg(this.props.msg.pkg.get("update.ok"));
     } finally {
       this.setLoading(false);
     }
@@ -156,17 +156,17 @@ export class UserForm extends React.Component<
         this.state.quota
       );
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("update.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("update.fail"));
         return;
       }
 
       const listStatus = await updater().listUsers();
       if (listStatus !== "") {
-        alertMsg(this.props.msg.pkg.get("update.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("update.fail"));
         return;
       }
 
-      alertMsg(this.props.msg.pkg.get("update.ok"));
+      Env().alertMsg(this.props.msg.pkg.get("update.ok"));
     } finally {
       this.props.update(updater().updateAdmin);
       this.setLoading(false);
@@ -174,7 +174,7 @@ export class UserForm extends React.Component<
   };
 
   delUser = async () => {
-    if (!confirmMsg(this.props.msg.pkg.get("op.confirm"))) {
+    if (!Env().confirmMsg(this.props.msg.pkg.get("op.confirm"))) {
       return;
     }
 
@@ -182,17 +182,17 @@ export class UserForm extends React.Component<
     try {
       const status = await updater().delUser(this.state.id);
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("delete.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("delete.fail"));
         return;
       }
 
       const listStatus = await updater().listUsers();
       if (listStatus !== "") {
-        alertMsg(this.props.msg.pkg.get("op.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("op.fail"));
         return;
       }
 
-      alertMsg(this.props.msg.pkg.get("delete.ok"));
+      Env().alertMsg(this.props.msg.pkg.get("delete.ok"));
     } finally {
       this.props.update(updater().updateAdmin);
       this.setLoading(false);
@@ -446,17 +446,17 @@ export class AdminPane extends React.Component<Props, State, {}> {
     try {
       const status = await updater().addRole(this.state.newRole);
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("add.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("add.fail"));
         return;
       }
 
       const listStatus = await updater().listRoles();
       if (listStatus !== "") {
-        alertMsg(this.props.msg.pkg.get("add.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("add.fail"));
         return;
       }
 
-      alertMsg(this.props.msg.pkg.get("add.ok"));
+      Env().alertMsg(this.props.msg.pkg.get("add.ok"));
     } finally {
       this.props.update(updater().updateAdmin);
       this.setLoading(false);
@@ -464,7 +464,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
   };
 
   delRole = async (role: string) => {
-    if (!confirmMsg(this.props.msg.pkg.get("role.delete.warning"))) {
+    if (!Env().confirmMsg(this.props.msg.pkg.get("role.delete.warning"))) {
       return;
     }
 
@@ -479,7 +479,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
 
       const listStatus = await updater().listRoles();
       if (listStatus !== "") {
-        alertMsg(this.props.msg.pkg.get("add.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("add.fail"));
         return;
       }
 
@@ -492,7 +492,7 @@ export class AdminPane extends React.Component<Props, State, {}> {
 
   addUser = async () => {
     if (this.state.newUserPwd1 !== this.state.newUserPwd2) {
-      alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
+      Env().alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
       return;
     }
 
@@ -509,17 +509,17 @@ export class AdminPane extends React.Component<Props, State, {}> {
         preferences: undefined,
       });
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("add.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("add.fail"));
         return;
       }
 
       const listStatus = await updater().listUsers();
       if (listStatus !== "") {
-        alertMsg(this.props.msg.pkg.get("op.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("op.fail"));
         return;
       }
 
-      alertMsg(this.props.msg.pkg.get("add.ok"));
+      Env().alertMsg(this.props.msg.pkg.get("add.ok"));
     } finally {
       this.setState({
         newUserName: "",
@@ -773,7 +773,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
   setClientCfg = async () => {
     const bgURL = this.props.ui.bg.url;
     if (bgURL.length >= 4096) {
-      alertMsg(this.props.msg.pkg.get("bg.url.alert"));
+      Env().alertMsg(this.props.msg.pkg.get("bg.url.alert"));
       return;
     }
 
@@ -786,7 +786,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
       bgRepeat !== "round" &&
       bgRepeat !== "no-repeat"
     ) {
-      alertMsg(this.props.msg.pkg.get("bg.repeat.alert"));
+      Env().alertMsg(this.props.msg.pkg.get("bg.repeat.alert"));
       return;
     }
 
@@ -798,13 +798,13 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
       bgPos !== "right" &&
       bgPos !== "center"
     ) {
-      alertMsg(this.props.msg.pkg.get("bg.pos.alert"));
+      Env().alertMsg(this.props.msg.pkg.get("bg.pos.alert"));
       return;
     }
 
     const bgAlign = this.props.ui.bg.align;
     if (bgAlign !== "scroll" && bgAlign !== "fixed" && bgAlign !== "local") {
-      alertMsg(this.props.msg.pkg.get("bg.align.alert"));
+      Env().alertMsg(this.props.msg.pkg.get("bg.align.alert"));
       return;
     }
 
@@ -817,11 +817,11 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
         bg: this.props.ui.bg,
       });
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("update.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("update.fail"));
         return;
       }
 
-      alertMsg(this.props.msg.pkg.get("update.ok"));
+      Env().alertMsg(this.props.msg.pkg.get("update.ok"));
     } finally {
       this.setLoading(false);
     }

src/client/web/src/components/pane_login.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { List, Map } from "immutable";
+import { List } from "immutable";
 
 import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { Flexbox } from "./layout/flexbox";
 import { updater } from "./state_updater";
-import { alertMsg } from "../common/env";
+import { Env } from "../common/env";
 import { Quota, Preferences } from "../client";
 import { getErrMsg } from "../common/utils";
 import { ctrlOn, ctrlOff, loadingCtrl } from "../common/controls";
@@ -95,7 +95,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
         this.state.captchaInput
       );
       if (loginStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", loginStatus.toString())
         );
         return;
@@ -104,7 +104,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
       const params = new URLSearchParams(document.location.search.substring(1));
       const initStatus = await updater().initAll(params);
       if (initStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", initStatus.toString())
         );
       }
@@ -121,7 +121,7 @@ export class AuthPane extends React.Component<Props, State, {}> {
   refreshCaptcha = async () => {
     const status = await updater().getCaptchaID();
     if (status !== "") {
-      alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+      Env().alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
     } else {
       this.props.update(updater().updateLogin);
     }

src/client/web/src/components/pane_settings.tsx

@@ -6,7 +6,7 @@ import { ICoreState, UIProps, MsgProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
 import { updater } from "./state_updater";
-import { alertMsg, confirmMsg } from "../common/env";
+import { Env } from "../common/env";
 import { Container } from "./layout/container";
 import { Card } from "./layout/card";
 import { Rows } from "./layout/rows";
@@ -103,10 +103,10 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     try {
       const status = await updater().syncPreferences();
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("update.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("update.fail"));
         return;
       }
-      alertMsg(this.props.msg.pkg.get("update.ok"));
+      Env().alertMsg(this.props.msg.pkg.get("update.ok"));
     } finally {
       this.setLoading(false);
     }
@@ -114,17 +114,17 @@ export class PaneSettings extends React.Component<Props, State, {}> {
 
   setPwd = async (): Promise<any> => {
     if (this.state.newPwd1 !== this.state.newPwd2) {
-      alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
+      Env().alertMsg(this.props.msg.pkg.get("settings.pwd.notSame"));
       return;
     } else if (
       this.state.oldPwd == "" ||
       this.state.newPwd1 == "" ||
       this.state.newPwd2 == ""
     ) {
-      alertMsg(this.props.msg.pkg.get("settings.pwd.empty"));
+      Env().alertMsg(this.props.msg.pkg.get("settings.pwd.empty"));
       return;
     } else if (this.state.oldPwd == this.state.newPwd1) {
-      alertMsg(this.props.msg.pkg.get("settings.pwd.notChanged"));
+      Env().alertMsg(this.props.msg.pkg.get("settings.pwd.notChanged"));
       return;
     }
 
@@ -135,11 +135,11 @@ export class PaneSettings extends React.Component<Props, State, {}> {
         this.state.newPwd1
       );
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("update.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("update.fail"));
         return;
       }
 
-      alertMsg(this.props.msg.pkg.get("update.ok"));
+      Env().alertMsg(this.props.msg.pkg.get("update.ok"));
     } finally {
       this.setState({
         oldPwd: "",
@@ -155,10 +155,11 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     try {
       const status = await updater().syncPreferences();
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("update.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("update.fail"));
+        return;
       }
+      Env().alertMsg(this.props.msg.pkg.get("update.ok"));
     } finally {
-      alertMsg(this.props.msg.pkg.get("update.ok"));
       this.props.update(updater().updateMsg);
     }
   };
@@ -168,22 +169,23 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     try {
       const status = await updater().syncPreferences();
       if (status !== "") {
-        alertMsg(this.props.msg.pkg.get("update.fail"));
+        Env().alertMsg(this.props.msg.pkg.get("update.fail"));
+        return;
       }
+      Env().alertMsg(this.props.msg.pkg.get("update.ok"));
     } finally {
-      alertMsg(this.props.msg.pkg.get("update.ok"));
       this.props.update(updater().updateUI);
     }
   };
 
   truncateErrors = () => {
-    if (confirmMsg(this.props.msg.pkg.get("op.confirm"))) {
+    if (Env().confirmMsg(this.props.msg.pkg.get("op.confirm"))) {
       ErrorLogger().truncate();
     }
   };
 
   reportErrors = () => {
-    if (confirmMsg(this.props.msg.pkg.get("op.confirm"))) {
+    if (Env().confirmMsg(this.props.msg.pkg.get("op.confirm"))) {
       ErrorLogger().report();
     }
   };

src/client/web/src/components/panel_files.tsx

@@ -11,7 +11,7 @@ import { RiRestartFill } from "@react-icons/all-files/ri/RiRestartFill";
 import { RiCheckboxBlankLine } from "@react-icons/all-files/ri/RiCheckboxBlankLine";
 
 import { ErrorLogger } from "../common/log_error";
-import { alertMsg, confirmMsg } from "../common/env";
+import { Env } from "../common/env";
 import { getErrMsg } from "../common/utils";
 import { updater } from "./state_updater";
 import { ICoreState, MsgProps, UIProps } from "./core_state";
@@ -147,7 +147,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       // refresh used space
       const status = await updater().self();
       if (status !== "") {
-        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+        Env().alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
         return;
       }
       this.props.update(updater().updateLogin);
@@ -157,7 +157,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
   addUploads = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files.length > 200) {
-      alertMsg(this.props.msg.pkg.get("err.tooManyUploads"));
+      Env().alertMsg(this.props.msg.pkg.get("err.tooManyUploads"));
       return;
     }
 
@@ -168,14 +168,14 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
     const status = updater().addUploads(fileList);
     if (status !== "") {
-      alertMsg(getErrMsg(this.props.msg.pkg, "upload.add.fail", status));
+      Env().alertMsg(getErrMsg(this.props.msg.pkg, "upload.add.fail", status));
     }
     this.props.update(updater().updateUploadingsInfo);
   };
 
   mkDir = async () => {
     if (this.state.newFolderName === "") {
-      alertMsg(this.props.msg.pkg.get("browser.folder.add.fail"));
+      Env().alertMsg(this.props.msg.pkg.get("browser.folder.add.fail"));
       return;
     }
 
@@ -189,7 +189,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     try {
       const mkDirStatus = await updater().mkDir(dirPath);
       if (mkDirStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", mkDirStatus.toString())
         );
         return;
@@ -199,7 +199,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         this.props.filesInfo.dirPath
       );
       if (setItemsStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", setItemsStatus.toString())
         );
         return;
@@ -220,7 +220,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
     // TODO: selected should be cleaned after change the cwd
     if (this.props.filesInfo.dirPath.join("/") !== this.state.selectedSrc) {
-      alertMsg(this.props.msg.pkg.get("browser.del.fail"));
+      Env().alertMsg(this.props.msg.pkg.get("browser.del.fail"));
       this.setState({
         selectedSrc: this.props.filesInfo.dirPath.join("/"),
         selectedItems: Map<string, boolean>(),
@@ -229,7 +229,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     } else {
       const filesToDel = this.state.selectedItems.keySeq().join(", ");
       if (
-        !confirmMsg(
+        !Env().confirmMsg(
           `${this.props.msg.pkg.get("op.confirm")} [${
             this.state.selectedItems.size
           }]: ${filesToDel}`
@@ -248,7 +248,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         this.state.selectedItems
       );
       if (deleteStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", deleteStatus.toString())
         );
         return deleteStatus;
@@ -256,7 +256,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
 
       const selfStatus = await updater().self();
       if (selfStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", selfStatus.toString())
         );
         return selfStatus;
@@ -282,7 +282,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     const oldDir = this.state.selectedSrc;
     const newDir = this.props.filesInfo.dirPath.join("/");
     if (oldDir === newDir) {
-      alertMsg(this.props.msg.pkg.get("browser.move.fail"));
+      Env().alertMsg(this.props.msg.pkg.get("browser.move.fail"));
       return;
     }
 
@@ -295,7 +295,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
         this.state.selectedItems
       );
       if (moveStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", moveStatus.toString())
         );
         return;
@@ -322,7 +322,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     try {
       const status = await updater().setHomeItems();
       if (status !== "") {
-        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+        Env().alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
         return;
       }
       this.props.update(updater().updateFilesInfo);
@@ -335,7 +335,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     if (dirPath === this.props.filesInfo.dirPath) {
       return;
     } else if (this.props.login.userRole !== roleAdmin && dirPath.size <= 1) {
-      alertMsg(this.props.msg.pkg.get("unauthed"));
+      Env().alertMsg(this.props.msg.pkg.get("unauthed"));
       return;
     }
 
@@ -343,13 +343,13 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     try {
       const status = await updater().setItems(dirPath);
       if (status !== "") {
-        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+        Env().alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
         return;
       }
 
       const isSharingStatus = await updater().syncIsSharing(dirPath.join("/"));
       if (isSharingStatus !== "") {
-        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", isSharingStatus));
+        Env().alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", isSharingStatus));
         return;
       }
 
@@ -402,7 +402,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
   };
 
   generateHash = async (filePath: string) => {
-    alertMsg(this.props.msg.pkg.get("refresh-hint"));
+    Env().alertMsg(this.props.msg.pkg.get("refresh-hint"));
     updater().generateHash(filePath);
   };
 
@@ -412,7 +412,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     try {
       const addStatus = await updater().addSharing();
       if (addStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", addStatus.toString())
         );
         return;
@@ -421,7 +421,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       updater().setSharing(true);
       const listStatus = await updater().listSharings();
       if (listStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", listStatus.toString())
         );
         return;
@@ -440,7 +440,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
     try {
       const delStatus = await updater().deleteSharing(dirPath);
       if (delStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", delStatus.toString())
         );
         return;
@@ -449,7 +449,7 @@ export class FilesPanel extends React.Component<Props, State, {}> {
       updater().setSharing(false);
       const listStatus = await updater().listSharings();
       if (listStatus !== "") {
-        alertMsg(
+        Env().alertMsg(
           getErrMsg(this.props.msg.pkg, "op.fail", listStatus.toString())
         );
         return;

src/client/web/src/components/panel_sharings.tsx

@@ -4,7 +4,7 @@ import { List, Map } from "immutable";
 import { BtnList } from "./control/btn_list";
 import { QRCodeIcon } from "./visual/qrcode";
 import { getErrMsg } from "../common/utils";
-import { alertMsg } from "../common/env";
+import { Env } from "../common/env";
 import { updater } from "./state_updater";
 import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
@@ -68,7 +68,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
 
       await this.listSharings();
     } catch (e: any) {
-      alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+      Env().alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
     } finally {
       this.setLoading(false);
     }
@@ -79,7 +79,7 @@ export class SharingsPanel extends React.Component<Props, State, {}> {
     try {
       const status = await updater().listSharings();
       if (status !== "") {
-        alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
+        Env().alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status));
       }
       this.props.update(updater().updateFilesInfo);
       this.props.update(updater().updateSharingsInfo);

src/client/web/src/components/panel_uploadings.tsx

@@ -3,7 +3,7 @@ import { List } from "immutable";
 import FileSize from "filesize";
 
 import { BtnList } from "./control/btn_list";
-import { alertMsg } from "../common/env";
+import { Env } from "../common/env";
 import { getErrMsg } from "../common/utils";
 import { updater } from "./state_updater";
 import { ICoreState, MsgProps, UIProps } from "./core_state";
@@ -72,7 +72,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
       this.props.update(updater().updateLogin);
       this.props.update(updater().updateUploadingsInfo);
     } catch (status: any) {
-      alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
+      Env().alertMsg(getErrMsg(this.props.msg.pkg, "op.fail", status.toString()));
     } finally {
       this.setLoading(false);
     }

src/client/web/src/components/state_mgr.tsx

@@ -4,7 +4,7 @@ import { initUploadMgr } from "../worker/upload_mgr";
 import BgWorker from "../worker/upload.bg.worker";
 import { FgWorker } from "../worker/upload.fg.worker";
 
-import { alertMsg } from "../common/env";
+import { Env } from "../common/env";
 import { getErrMsg } from "../common/utils";
 import { updater } from "./state_updater";
 import { ICoreState, newState } from "./core_state";
@@ -82,7 +82,7 @@ export class StateMgr extends React.Component<Props, State, {}> {
 
     const status = await updater().initAll(query);
     if (status !== "") {
-      alertMsg(getErrMsg(state.msg.pkg, "op.fail", status));
+      Env().alertMsg(getErrMsg(state.msg.pkg, "op.fail", status));
     }
     updater().setControlOption(loadingCtrl, ctrlOff);
     this.update(updater().updateAll);

src/client/web/src/components/state_updater.ts

@@ -25,7 +25,7 @@ import { UsersClient } from "../client/users";
 import { SettingsClient } from "../client/settings";
 import { UploadEntry, UploadState } from "../worker/interface";
 import { Up } from "../worker/upload_mgr";
-import { alertMsg } from "../common/env";
+import { Env } from "../common/env";
 import { controlName as panelTabs } from "./root_frame";
 import { errServer } from "../common/errors";
 import { ErrorLogger } from "../common/log_error";
@@ -201,7 +201,7 @@ export class Updater {
   mkDir = async (dirPath: string): Promise<string> => {
     const resp = await this.filesClient.mkdir(dirPath);
     if (resp.status !== 200) {
-      alertMsg(`failed to make dir ${dirPath}`);
+      Env().alertMsg(`failed to make dir ${dirPath}`);
       return errServer;
     }
     return "";
@@ -244,7 +244,7 @@ export class Updater {
     }
 
     if (fails.size > 0) {
-      alertMsg(
+      Env().alertMsg(
         `${this.props.msg.pkg.get("delete.fail")}: ${fails.join(",\n")}`
       );
       return errServer;
@@ -340,7 +340,7 @@ export class Updater {
     }
 
     if (fails.size > 0) {
-      alertMsg(`${this.props.msg.pkg.get("move.fail")}: ${fails.join(",\n")}`);
+      Env().alertMsg(`${this.props.msg.pkg.get("move.fail")}: ${fails.join(",\n")}`);
       return errServer;
     }
 
@@ -781,7 +781,7 @@ export class Updater {
         this.props.login.preferences.lan = "zh_CN";
         break;
       default:
-        alertMsg("language package not found");
+        Env().alertMsg("language package not found");
     }
   };
 

src/client/web/src/components/topbar.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { List } from "immutable";
 
-import { alertMsg, confirmMsg } from "../common/env";
+import { Env } from "../common/env";
 import { ICoreState, MsgProps, UIProps } from "./core_state";
 import { LoginProps } from "./pane_login";
 import { updater } from "./state_updater";
@@ -28,20 +28,20 @@ export class TopBar extends React.Component<Props, State, {}> {
   };
 
   logout = async (): Promise<void> => {
-    if (!confirmMsg(this.props.msg.pkg.get("logout.confirm"))) {
+    if (!Env().confirmMsg(this.props.msg.pkg.get("logout.confirm"))) {
       return;
     }
 
     const status = await updater().logout();
     if (status !== "") {
-      alertMsg(this.props.msg.pkg.get("login.logout.fail"));
+      Env().alertMsg(this.props.msg.pkg.get("login.logout.fail"));
       return;
     }
 
     const params = new URLSearchParams(document.location.search.substring(1));
     const initStatus = await updater().initAll(params);
     if (initStatus !== "") {
-      alertMsg(this.props.msg.pkg.get("op.fail"));
+      Env().alertMsg(this.props.msg.pkg.get("op.fail"));
       return;
     }
     this.props.update(updater().updateAll);

src/client/web/src/test/helpers.ts

@@ -37,9 +37,9 @@ export function mockRandFile(filePath: string): File {
 }
 
 export function mockFileList(filePaths: Array<string>): List<File> {
-  const files = filePaths.map(filePath => {
+  const files = filePaths.map((filePath) => {
     return mockRandFile(filePath);
-  })
+  });
   return List<File>(files);
 }
 
@@ -47,4 +47,11 @@ export function initMockWorker() {
   const mockWorkerClass = mock(MockWorker);
   const mockWorker = instance(mockWorkerClass);
   initUploadMgr(mockWorker);
-}
+}
+
+export class MockWebEnv {
+  constructor() {}
+
+  alertMsg = jest.fn();
+  confirmMsg = jest.fn();
+}