Merge branch 'update-typescript-react-and-related-dependencies-868'

gui/.eslintrc.js

@@ -14,6 +14,10 @@ const namingConvention = [
     format: ['camelCase'],
     leadingUnderscore: 'allow',
   },
+  {
+    selector: 'import',
+    format: ['camelCase', 'PascalCase', 'snake_case'],
+  },
   {
     selector: 'parameter',
     format: ['camelCase', 'PascalCase'],

gui/package.json

@@ -18,8 +18,8 @@
     "gl-matrix": "^3.4.3",
     "google-protobuf": "^3.21.0",
     "node-gettext": "^3.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.2.9",
     "react-router": "^5.3.4",
     "redux": "^4.2.0",
@@ -42,14 +42,14 @@
     "@types/mocha": "^10.0.0",
     "@types/node": "^20.12.11",
     "@types/node-gettext": "^3.0.3",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.19",
     "@types/sinon": "^10.0.13",
     "@types/sprintf-js": "^1.1.2",
     "@types/topojson-specification": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
     "browserify": "^17.0.0",
     "chai": "^4.3.6",
     "chai-as-promised": "^7.1.1",
@@ -58,10 +58,10 @@
     "electron": "^30.0.4",
     "electron-builder": "^24.13.3",
     "electron-devtools-installer": "^3.2.0",
-    "eslint": "^8.36.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "gettext-extractor": "^3.5.4",
     "grpc_tools_node_protoc_ts": "^5.3.2",
     "gulp": "^4.0.2",
@@ -71,11 +71,11 @@
     "mocha": "^10.2.0",
     "playwright": "^1.41.1",
     "postject": "^1.0.0-alpha.6",
-    "prettier": "^2.2.1",
+    "prettier": "^3.3.2",
     "sinon": "^14.0.1",
     "ts-node": "^10.9.2",
     "tsc-watch": "^5.0.3",
-    "typescript": "^5.0.2",
+    "typescript": "^5.4.5",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "xvfb-maybe": "^0.2.1"

gui/src/main/command-line-options.ts

@@ -1,7 +1,10 @@
 class CommandLineOption {
   private flags: string[];
 
-  public constructor(private description: string, ...flags: string[]) {
+  public constructor(
+    private description: string,
+    ...flags: string[]
+  ) {
     this.flags = flags;
   }
 

gui/src/main/expectation.ts

@@ -2,7 +2,10 @@ export default class Expectation {
   private fulfilled = false;
   private timeout: NodeJS.Timeout;
 
-  constructor(private handler: () => void, timeout = 2000) {
+  constructor(
+    private handler: () => void,
+    timeout = 2000,
+  ) {
     this.timeout = global.setTimeout(() => {
       this.fulfill();
     }, timeout);

gui/src/main/index.ts

@@ -90,7 +90,8 @@ class ApplicationMain
     UserInterfaceDelegate,
     TunnelStateHandlerDelegate,
     SettingsDelegate,
-    AccountDelegate {
+    AccountDelegate
+{
   private daemonRpc: DaemonRpc;
 
   private notificationController = new NotificationController(this);

gui/src/main/logging.ts

@@ -10,7 +10,10 @@ export const OLD_LOG_FILES = ['main.log', 'renderer.log', 'frontend.log'];
 export class FileOutput implements ILogOutput {
   private fileDescriptor: number;
 
-  constructor(public level: LogLevel, filePath: string) {
+  constructor(
+    public level: LogLevel,
+    filePath: string,
+  ) {
     this.fileDescriptor = fs.openSync(filePath, fs.constants.O_CREAT | fs.constants.O_WRONLY);
   }
 

gui/src/main/macos-split-tunneling.ts

@@ -25,9 +25,7 @@ export class MacOsSplitTunnelingAppListRetriever implements ISplitTunnelingAppLi
    */
   private additionalApplications = new AdditionalApplications();
 
-  public async getApplications(
-    updateCaches = false,
-  ): Promise<{
+  public async getApplications(updateCaches = false): Promise<{
     fromCache: boolean;
     applications: ISplitTunnelingApplication[];
   }> {

gui/src/main/user-interface.ts

@@ -414,9 +414,11 @@ export default class UserInterface implements WindowControllerDelegate {
   }
 
   private async installDevTools() {
-    const { default: installer, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = await import(
-      'electron-devtools-installer'
-    );
+    const {
+      default: installer,
+      REACT_DEVELOPER_TOOLS,
+      REDUX_DEVTOOLS,
+    } = await import('electron-devtools-installer');
     const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
     const options = { forceDownload, loadExtensionOptions: { allowFileAccess: true } };
     try {

gui/src/main/window-controller.ts

@@ -159,7 +159,10 @@ export default class WindowController {
     return this.webContentsValue.isDestroyed() ? undefined : this.webContentsValue;
   }
 
-  constructor(private delegate: WindowControllerDelegate, windowValue: BrowserWindow) {
+  constructor(
+    private delegate: WindowControllerDelegate,
+    windowValue: BrowserWindow,
+  ) {
     this.windowValue = windowValue;
     this.webContentsValue = windowValue.webContents;
     this.windowPositioning = delegate.isUnpinnedWindow()

gui/src/main/windows-pe-parser.ts

@@ -16,10 +16,10 @@ export type Datatype = PrimitiveWrapper | StructWrapper | ArrayWrapper;
 type ValueType<T extends Datatype> = T extends PrimitiveWrapper
   ? PrimitiveValue<T>
   : T extends ArrayWrapper
-  ? ArrayValue<T>
-  : T extends StructWrapper
-  ? StructValue<T>
-  : never;
+    ? ArrayValue<T>
+    : T extends StructWrapper
+      ? StructValue<T>
+      : never;
 
 // Represents any kind of parseable value within the PE headers. Value is extended by
 // PrimitiveValue, ArrayValue and StructValue.
@@ -160,7 +160,7 @@ export class StructValue<T extends StructWrapper = StructWrapper> extends Value<
   // Parses and returns the value for the specified key.
   public get<
     U extends ValueType<T['struct'][number]['datatype']>,
-    V extends StructItem = T['struct'][number]
+    V extends StructItem = T['struct'][number],
   >(name: V['name']): U {
     const index = this.datatype.struct.findIndex((entry) => entry.name === name);
     if (index === -1) {

gui/src/main/windows-split-tunneling.ts

@@ -170,9 +170,8 @@ export class WindowsSplitTunnelingAppListRetriever implements ISplitTunnelingApp
       shortcuts.map(async (shortcut) => {
         const lowercaseTarget = shortcut.target.toLowerCase();
         if (this.applicationCache[lowercaseTarget] === undefined) {
-          this.applicationCache[lowercaseTarget] = await this.convertToSplitTunnelingApplication(
-            shortcut,
-          );
+          this.applicationCache[lowercaseTarget] =
+            await this.convertToSplitTunnelingApplication(shortcut);
         }
 
         return this.applicationCache[lowercaseTarget];
@@ -246,21 +245,24 @@ export class WindowsSplitTunnelingAppListRetriever implements ISplitTunnelingApp
 
   // Removes all duplicate shortcuts.
   private removeDuplicates(shortcuts: ShortcutDetails[]): ShortcutDetails[] {
-    const unique = shortcuts.reduce((shortcuts, shortcut) => {
-      const lowercaseTarget = shortcut.target.toLowerCase();
-      if (shortcuts[lowercaseTarget]) {
-        if (
-          shortcuts[lowercaseTarget].args &&
-          shortcuts[lowercaseTarget].args !== '' &&
-          (!shortcut.args || shortcut.args === '')
-        ) {
+    const unique = shortcuts.reduce(
+      (shortcuts, shortcut) => {
+        const lowercaseTarget = shortcut.target.toLowerCase();
+        if (shortcuts[lowercaseTarget]) {
+          if (
+            shortcuts[lowercaseTarget].args &&
+            shortcuts[lowercaseTarget].args !== '' &&
+            (!shortcut.args || shortcut.args === '')
+          ) {
+            shortcuts[lowercaseTarget] = shortcut;
+          }
+        } else {
           shortcuts[lowercaseTarget] = shortcut;
         }
-      } else {
-        shortcuts[lowercaseTarget] = shortcut;
-      }
-      return shortcuts;
-    }, {} as Record<string, ShortcutDetails>);
+        return shortcuts;
+      },
+      {} as Record<string, ShortcutDetails>,
+    );
 
     return Object.values(unique);
   }
@@ -431,15 +433,18 @@ export class WindowsSplitTunnelingAppListRetriever implements ISplitTunnelingApp
           [[16], [1], [0, 1033]],
         );
 
-        const productName = await leafOffsets.reduce(async (alreadyFoundValue, leafOffset) => {
-          const value = await alreadyFoundValue;
-          if (value) {
-            return value;
-          } else {
-            const strings = await this.getVsVersionInfoStrings(fileHandle, leafOffset);
-            return strings.get('FileDescription') ?? strings.get('ProductName');
-          }
-        }, Promise.resolve() as Promise<string | undefined>);
+        const productName = await leafOffsets.reduce(
+          async (alreadyFoundValue, leafOffset) => {
+            const value = await alreadyFoundValue;
+            if (value) {
+              return value;
+            } else {
+              const strings = await this.getVsVersionInfoStrings(fileHandle, leafOffset);
+              return strings.get('FileDescription') ?? strings.get('ProductName');
+            }
+          },
+          Promise.resolve() as Promise<string | undefined>,
+        );
 
         return productName;
       } else {

gui/src/renderer/app.tsx

@@ -554,9 +554,8 @@ export default class AppRenderer {
   }
 
   public setPreferredLocale = async (preferredLocale: string): Promise<void> => {
-    const translations = await IpcRendererEventChannel.guiSettings.setPreferredLocale(
-      preferredLocale,
-    );
+    const translations =
+      await IpcRendererEventChannel.guiSettings.setPreferredLocale(preferredLocale);
 
     // set current locale
     this.setLocale(translations.locale);

gui/src/renderer/components/CustomDnsSettings.tsx

@@ -325,10 +325,10 @@ function CellListItem(props: ICellListItemProps) {
 
   const inputContainerRef = useStyledRef<HTMLDivElement>();
 
-  const onRemove = useCallback(() => props.onRemove(props.children), [
-    props.onRemove,
-    props.children,
-  ]);
+  const onRemove = useCallback(
+    () => props.onRemove(props.children),
+    [props.onRemove, props.children],
+  );
 
   const onSubmit = useCallback(
     async (value: string) => {

gui/src/renderer/components/EditApiAccessMethod.tsx

@@ -146,8 +146,8 @@ function TestingDialog(props: TestingDialogProps) {
   const type = props.testing
     ? ModalAlertType.loading
     : props.testResult
-    ? ModalAlertType.success
-    : ModalAlertType.failure;
+      ? ModalAlertType.success
+      : ModalAlertType.failure;
   const prevType = useRef<ModalAlertType>(type);
 
   const isOpen = props.testing || props.testResult !== undefined;

gui/src/renderer/components/ExpiredAccountErrorView.tsx

@@ -215,10 +215,8 @@ function ExternalPaymentButton() {
 }
 
 function BlockWhenDisconnectedAlert() {
-  const {
-    showBlockWhenDisconnectedAlert,
-    setShowBlockWhenDisconnectedAlert,
-  } = useExpiredAccountContext();
+  const { showBlockWhenDisconnectedAlert, setShowBlockWhenDisconnectedAlert } =
+    useExpiredAccountContext();
   const { setBlockWhenDisconnected } = useAppContext();
   const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected);
 

gui/src/renderer/components/HeaderBar.tsx

@@ -121,8 +121,8 @@ function HeaderBarDeviceInfo() {
   const formattedExpiry = isOutOfTime
     ? sprintf(messages.ngettext('1 day', '%d days', 0), 0)
     : accountExpiry
-    ? formatRemainingTime(accountExpiry)
-    : '';
+      ? formatRemainingTime(accountExpiry)
+      : '';
 
   return (
     <StyledAccountInfo>

gui/src/renderer/components/NotificationArea.tsx

@@ -208,9 +208,7 @@ function NotificationActionWrapper(props: INotificationActionWrapperProps) {
         <ModalMessage>{troubleshootInfo?.details}</ModalMessage>
         <ModalMessage>
           <ModalMessageList>
-            {troubleshootInfo?.steps.map((step) => (
-              <li key={step}>{step}</li>
-            ))}
+            {troubleshootInfo?.steps.map((step) => <li key={step}>{step}</li>)}
           </ModalMessageList>
         </ModalMessage>
         <ModalMessage>

gui/src/renderer/components/Settings.tsx

@@ -166,10 +166,10 @@ function AppVersionButton() {
   const isOffline = useSelector((state) => state.connection.isBlocked);
 
   const { openUrl } = useAppContext();
-  const openDownloadLink = useCallback(() => openUrl(getDownloadUrl(suggestedIsBeta)), [
-    openUrl,
-    suggestedIsBeta,
-  ]);
+  const openDownloadLink = useCallback(
+    () => openUrl(getDownloadUrl(suggestedIsBeta)),
+    [openUrl, suggestedIsBeta],
+  );
 
   let icon;
   let footer;

gui/src/renderer/components/SettingsImport.tsx

@@ -55,9 +55,8 @@ export default function SettingsImport() {
     showOpenDialog,
     getPathBaseName,
   } = useAppContext();
-  const { clearSettingsImportForm, unsetSubmitSettingsImportForm } = useActions(
-    settingsImportActions,
-  );
+  const { clearSettingsImportForm, unsetSubmitSettingsImportForm } =
+    useActions(settingsImportActions);
 
   // Status of the text form which is used to for example submit it.
   const textForm = useSelector((state) => state.settingsImport);

gui/src/renderer/components/TransitionContainer.tsx

@@ -98,8 +98,10 @@ export default class TransitionContainer extends React.Component<IProps, IState>
   private isCycling = false;
   private isTransitioning = false;
 
-  private currentContentRef: React.MutableRefObject<HTMLDivElement | null> = React.createRef<HTMLDivElement>();
-  private nextContentRef: React.MutableRefObject<HTMLDivElement | null> = React.createRef<HTMLDivElement>();
+  private currentContentRef: React.MutableRefObject<HTMLDivElement | null> =
+    React.createRef<HTMLDivElement>();
+  private nextContentRef: React.MutableRefObject<HTMLDivElement | null> =
+    React.createRef<HTMLDivElement>();
   // The item that should trigger the cycle to finish in onTransitionEnd
   private transitioningItemRef?: React.RefObject<HTMLDivElement>;
 

gui/src/renderer/components/VpnSettings.tsx

@@ -588,9 +588,8 @@ function LockdownMode() {
   const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected);
   const { setBlockWhenDisconnected: setBlockWhenDisconnectedImpl } = useAppContext();
 
-  const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean(
-    false,
-  );
+  const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] =
+    useBoolean(false);
 
   const setBlockWhenDisconnected = useCallback(
     async (blockWhenDisconnected: boolean) => {

gui/src/renderer/components/cell/CellButton.tsx

@@ -16,8 +16,8 @@ const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => {
   const backgroundColor = props.$selected
     ? colors.green
     : props.$containedInSection
-    ? colors.blue40
-    : colors.blue;
+      ? colors.blue40
+      : colors.blue;
   const backgroundColorHover = props.$selected ? colors.green : colors.blue80;
 
   return {