Upgrade dependencies (Node, Typescript, React, Electron, Fluent Controls) and address some long standing issues with Copilot Assistance

.eslintrc.json

@@ -0,0 +1 @@
+// This file has been replaced by eslint.config.mjs (flat config).

.github/workflows/nodejs.yml

@@ -13,18 +13,18 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [18.x]
+                node-version: [24.x]
                 os: [ubuntu-latest, windows-latest, macOS-latest]
 
         steps:
-        - uses: actions/checkout@v2
+        - uses: actions/checkout@v4
         - name: Use Node ${{ matrix.node-version }}
-          uses: actions/setup-node@v1
+          uses: actions/setup-node@v4
           with:
               node-version: ${{ matrix.node-version }}
         - name: npm install, build, and test
           timeout-minutes: 15
           run: |
-              npm ci
+              npm ci --legacy-peer-deps
               npm run build --if-present
               npm test

eslint.config.mjs

@@ -0,0 +1,104 @@
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+
+export default tseslint.config(
+    // Global ignores (replaces ignorePatterns)
+    {
+        ignores: [
+            'node_modules/',
+            'dist/',
+            'host/',
+            'coverage/',
+            '**/*.js',
+            'webpack.*.ts',
+        ],
+    },
+
+    // Base ESLint recommended rules
+    ...tseslint.configs.recommended,
+
+    // TypeScript + React files
+    {
+        files: ['**/*.{ts,tsx}'],
+        plugins: {
+            react: reactPlugin,
+            'react-hooks': reactHooksPlugin,
+        },
+        languageOptions: {
+            ecmaVersion: 2020,
+            sourceType: 'module',
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.es2020,
+                ...globals.jest,
+            },
+            parserOptions: {
+                ecmaFeatures: { jsx: true },
+            },
+        },
+        settings: {
+            react: { version: 'detect' },
+        },
+        rules: {
+            // Core ESLint rules
+            'curly': 'error',
+            'eqeqeq': ['error', 'always'],
+            'no-bitwise': 'error',
+            'no-console': 'error',
+            'no-debugger': 'error',
+            'no-eval': 'error',
+            'no-duplicate-imports': 'error',
+            'no-sparse-arrays': 'error',
+            'no-var': 'error',
+            'prefer-const': 'error',
+            'prefer-object-spread': 'error',
+            'radix': 'error',
+            'use-isnan': 'error',
+            'no-new-wrappers': 'error',
+            'no-throw-literal': 'off',
+            'no-empty': 'error',
+            'no-fallthrough': 'error',
+            'no-unsafe-finally': 'error',
+
+            // TypeScript rules
+            '@typescript-eslint/only-throw-error': 'off',
+            '@typescript-eslint/adjacent-overload-signatures': 'error',
+            '@typescript-eslint/no-restricted-types': 'error',
+            '@typescript-eslint/no-empty-object-type': ['error', { allowInterfaces: 'always', allowObjectTypes: 'always' }],
+            '@typescript-eslint/no-misused-new': 'error',
+            '@typescript-eslint/no-namespace': 'error',
+            '@typescript-eslint/no-require-imports': 'off',
+            '@typescript-eslint/prefer-for-of': 'warn',
+            '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/no-inferrable-types': 'off',
+            '@typescript-eslint/explicit-member-accessibility': ['warn', {
+                accessibility: 'explicit',
+                overrides: { constructors: 'no-public' },
+            }],
+
+            // React rules
+            'react/jsx-key': 'error',
+            'react/jsx-no-bind': 'off',
+            'react/no-string-refs': 'error',
+            'react/self-closing-comp': 'error',
+            'react/prop-types': 'off',
+            'react/display-name': 'off',
+            'react/no-unescaped-entities': 'off',
+
+            // React Hooks rules
+            'react-hooks/rules-of-hooks': 'error',
+            'react-hooks/exhaustive-deps': 'warn',
+
+            // Shadow and return-await
+            'no-shadow': 'off',
+            '@typescript-eslint/no-shadow': 'warn',
+            // return-await requires type-aware linting; disabled for now
+            'no-return-await': 'off',
+            '@typescript-eslint/return-await': 'off',
+        },
+    },
+);

images.d.ts

@@ -9,4 +9,12 @@ declare module "*.svg" {
   declare module "*.png" {
     const value: any;
     export default value;
+  }
+  declare module "*.scss" {
+    const content: any;
+    export default content;
+  }
+  declare module "*.css" {
+    const content: any;
+    export default content;
   }

jestSetup.ts

@@ -2,20 +2,23 @@
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License
  **********************************************************/
-import { setIconOptions } from '@fluentui/react';
-import * as Enzyme from 'enzyme';
-import * as Adapter from 'enzyme-adapter-react-16';
+
+// react-router-dom v7 requires TextEncoder/TextDecoder in jsdom
+const { TextEncoder, TextDecoder } = require('util');
+global.TextEncoder = global.TextEncoder || TextEncoder;
+global.TextDecoder = global.TextDecoder || TextDecoder;
+
+// FluentUI v9 components use ResizeObserver, which jsdom doesn't provide
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+} as any;
 
 // tslint:disable-next-line: no-string-literal
 global.Headers = jest.fn();
 window.fetch = jest.fn();
 
-// suppress icon warnings.
-setIconOptions({
-  disableWarnings: true,
-});
-
-Enzyme.configure({ adapter: new Adapter() });
 document.execCommand = jest.fn(); // maskedCopyableTextField
 
 // fix for smooth-dnd invocation error in test
@@ -24,7 +27,8 @@ Object.defineProperty(global, 'Node', {
 });
 
 jest.mock('react-i18next', () => ({
-  useTranslation: () => ({t: key => key})
+  useTranslation: () => ({t: key => key}),
+  Trans: ({ children }) => children
 }));
 
 jest.mock('./src/appConfig/appConfig', () => ({