Update dependencies

- upgrade pretty_bytes to 6.1.1 - upgrade electron-remote to 2.1.0 - upgrade semver to 7.5.4 + @types/semver to 7.5.6 - upgrade chai to 4.3.11 + @types/chai to 4.3.10 - upgrade mocha to 10.2.0 + @types/mocha to 10.0.6 - upgrade sinon to 17.0.1 + @types/sinon to 17.0.2 - remove useless @types - upgrade @svgr/webpack to 8.1.0 - upgrade @sentry/electron to 4.15.1 - upgrade tslib to 2.6.2 - upgrade immutable to 4.3.4 - upgrade redux to 4.2.1 - upgrade ts-node to 10.9.2 & ts-loader to 9.5.1 - remove mini-css-extract-plugin - upgrade husky to 8.0.3 - upgrade uuid to 9.0.1 - upgrade lint-staged to 15.2.1 - upgrade @types/node to 18.11.9 - upgrade @fortawesome/fontawesome-free to 6.5.1 - upgrade i18next to 23.7.8 & react-i18next to 11.18.6 - bump react, react-dom + related @types to 17.0.2 and rendition to 35.1.0 - fix getuid for ts - fix @types/react being in wrong deps - upgrade @types/tmp to 0.2.6 - upgrade typescript to 5.3.3 - upgrade @types/mime-types to 2.1.4 - remove d3 from deps - upgrade electron-updater to 6.1.7 - upgrade rendition to 35.1.2 - upgrade node-ipc to 9.2.3 - upgrade @types/node-ipc to 9.2.3 - upgrade electron to 27.1.3 - upgrade @electron-forge/* to 7.2.0 - upgrade @reforged/marker-appimage to 3.3.2 - upgrade style-loader to 3.3.3 - upgrade balena-lint to 7.2.4 - run CI with node 18.19 - add xxhash-addon to sidecar assets Change-type: patch
2025-04-19 12:57:16 +00:00 · 2023-12-08 14:29:12 +01:00 · 2023-12-08 14:29:12 +01:00 · 0f2b4dbc10
commit 0f2b4dbc10
parent 70304b492d
32 changed files with 10836 additions and 7179 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,10 @@
+module.exports = {
+  extends: ["./node_modules/@balena/lint/config/.eslintrc.js"],
+  root: true,
+  ignorePatterns: ["node_modules/"],
+  rules: {
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+  },
+};
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@ -1,454 +0,0 @@
-env:
-  browser: true
-  commonjs: true
-  es6: true
-  node: true
-  mocha: true
-plugins:
-  - lodash
-  - jsdoc
-  - node
-  - react
-extends: 'standard'
-parserOptions:
-  sourceType: 'script'
-  ecmaFeatures:
-    jsx: true
-settings:
-  jsdoc:
-    additionalTagNames:
-      customTags:
-        - fulfil
-rules:
-
-  # Possible Errors
-
-  no-console:
-    - off
-  no-empty:
-    - error
-  no-extra-semi:
-    - error
-  no-negated-in-lhs:
-    - error
-  no-prototype-builtins:
-    - error
-  valid-jsdoc:
-    - error
-    - requireReturn: false
-      requireReturnDescription: false
-      requireReturnType: true
-      requireParamDescription: true
-      preferType:
-        boolean: "Boolean"
-        number: "Number"
-        object: "Object"
-        string: "String"
-        array: "Array"
-      prefer:
-        arg: "param"
-        return: "returns"
-
-  # Best Practices
-
-  array-callback-return:
-    - error
-  block-scoped-var:
-    - error
-  class-methods-use-this:
-    - error
-  complexity:
-    - off
-  consistent-return:
-    - error
-  curly:
-    - error
-  default-case:
-    - error
-  dot-notation:
-    - error
-  guard-for-in:
-    - error
-  no-alert:
-    - error
-  no-case-declarations:
-    - error
-  no-div-regex:
-    - error
-  no-else-return:
-    - error
-  no-empty-function:
-    - error
-  no-eq-null:
-    - error
-  no-extra-label:
-    - error
-  no-implicit-coercion:
-    - error
-  no-implicit-globals:
-    - error
-  no-loop-func:
-    - error
-  no-magic-numbers:
-    - error
-  no-native-reassign:
-    - error
-  no-param-reassign:
-    - error
-  no-restricted-properties:
-    - error
-    - property: __proto__
-  no-return-await:
-    - error
-  no-script-url:
-    - error
-  no-unused-expressions:
-    - error
-  no-unused-labels:
-    - error
-  no-useless-concat:
-    - error
-  no-void:
-    - error
-  no-warning-comments:
-    - off
-  radix:
-    - error
-  vars-on-top:
-    - off
-
-  # Strict mode
-
-  strict:
-    - error
-    - global
-
-  # Variables
-
-  init-declarations:
-    - error
-    - always
-  no-catch-shadow:
-    - error
-  no-restricted-globals:
-    - error
-    - event
-  no-shadow:
-    - error
-  no-undefined:
-    - error
-  no-unused-vars:
-    - error
-  no-use-before-define:
-    - error
-
-  # NodeJS and CommonJS
-
-  callback-return:
-    - error
-  global-require:
-    - off
-  no-mixed-requires:
-    - error
-  no-process-env:
-    - off
-  no-process-exit:
-    - off
-  no-sync:
-    - off
-
-  # Stylistic Issues
-
-  array-bracket-spacing:
-    - error
-    - always
-  capitalized-comments:
-    - error
-    - always
-    - ignoreConsecutiveComments: true
-  comma-spacing:
-    - error
-    - before: false
-      after: true
-  computed-property-spacing:
-    - error
-    - never
-  consistent-this:
-    - error
-    - self
-  func-name-matching:
-    - error
-    - always
-  func-names:
-    - error
-    - never
-  func-style:
-    - error
-    - expression
-  id-blacklist:
-    - error
-  id-length:
-    - error
-    - min: 2
-      exceptions:
-        - "_"
-  id-match:
-    - error
-    - "^[_0-9A-Za-z\\$]+$"
-  line-comment-position:
-    - error
-    - position: above
-  linebreak-style:
-    - error
-    - unix
-  lines-around-comment:
-    - error
-    - beforeBlockComment: true
-      afterBlockComment: false
-      beforeLineComment: true
-      afterLineComment: false
-      allowBlockStart: true
-      allowBlockEnd: false
-      allowObjectStart: true
-      allowObjectEnd: false
-      allowArrayStart: true
-      allowArrayEnd: false
-  lines-around-directive:
-    - error
-    - always
-  max-len:
-    - error
-    - code: 130
-      comments: 150
-      ignoreComments: false
-      ignoreTrailingComments: false
-      ignoreUrls: true
-  max-params:
-    - off
-  max-statements-per-line:
-    - error
-    - max: 1
-  multiline-ternary:
-    - off
-  newline-per-chained-call:
-    - off
-  no-bitwise:
-    - error
-  no-continue:
-    - error
-  no-inline-comments:
-    - error
-  no-lonely-if:
-    - error
-  no-mixed-operators:
-    - error
-  no-multi-assign:
-    - error
-  no-negated-condition:
-    - error
-  no-nested-ternary:
-    - error
-  no-plusplus:
-    - error
-  no-restricted-syntax:
-    - error
-    - WithStatement
-    - ForInStatement
-  no-spaced-func:
-    - error
-  no-underscore-dangle:
-    - error
-    - allowAfterThis: false
-  object-curly-newline:
-    - error
-    - minProperties: 3
-      consistent: true
-  object-curly-spacing:
-    - error
-    - always
-  one-var-declaration-per-line:
-    - error
-    - always
-  operator-assignment:
-    - error
-    - always
-  quotes:
-    - error
-    - single
-  quote-props:
-    - error
-    - as-needed
-  require-jsdoc:
-    - error
-    - require:
-        FunctionDeclaration: true
-        ClassDeclaration: true
-        MethodDefinition: true
-        ArrowFunctionExpression: true
-  space-before-function-paren:
-    - error
-    - anonymous: always
-      named: always
-      asyncArrow: always
-  template-tag-spacing:
-    - error
-    - always
-  unicode-bom:
-    - error
-
-  # ECMAScript 6
-
-  arrow-parens:
-    - error
-    - always
-  arrow-spacing:
-    - error
-    - before: true
-      after: true
-  generator-star-spacing:
-    - error
-    - before: true
-      after: false
-  no-confusing-arrow:
-    - error
-  no-var:
-    - error
-  object-shorthand:
-    - error
-    - always
-  prefer-const:
-    - error
-  prefer-spread:
-    - error
-  prefer-numeric-literals:
-    - error
-  prefer-rest-params:
-    - error
-  prefer-template:
-    - error
-  prefer-arrow-callback:
-    - error
-    - allowNamedFunctions: false
-  require-yield:
-    - error
-  symbol-description:
-    - error
-
-  # Lodash
-
-  lodash/chain-style:
-    - error
-    - explicit
-  lodash/identity-shorthand:
-    - error
-    - always
-  lodash/import-scope:
-    - error
-    - full
-  lodash/matches-prop-shorthand:
-    - error
-    - always
-  lodash/matches-shorthand:
-    - error
-    - always
-  lodash/no-commit:
-    - error
-  lodash/path-style:
-    - error
-    - array
-  lodash/prefer-compact:
-    - error
-  lodash/prefer-filter:
-    - error
-    - 5
-  lodash/prefer-flat-map:
-    - error
-  lodash/prefer-invoke-map:
-    - error
-  lodash/prefer-map:
-    - error
-  lodash/prefer-reject:
-    - error
-  lodash/prefer-thru:
-    - error
-  lodash/prefer-wrapper-method:
-    - error
-  lodash/prop-shorthand:
-    - error
-    - always
-  lodash/prefer-constant:
-    - error
-    - true
-    - true
-  lodash/prefer-get:
-    - error
-    - 2
-  lodash/prefer-includes:
-    - error
-    - includeNative: true
-  lodash/prefer-is-nil:
-    - error
-  lodash/prefer-lodash-chain:
-    - error
-  lodash/prefer-lodash-method:
-    - error
-  lodash/prefer-lodash-typecheck:
-    - error
-  lodash/prefer-matches:
-    - error
-    - 3
-  lodash/prefer-noop:
-    - error
-  lodash/prefer-over-quantifier:
-    - error
-  lodash/prefer-startswith:
-    - error
-  lodash/prefer-times:
-    - error
-
-  # JSDoc
-
-  jsdoc/check-param-names:
-    - error
-  jsdoc/check-tag-names:
-    - error
-  jsdoc/newline-after-description:
-    - error
-  jsdoc/require-example:
-    - error
-  jsdoc/require-hyphen-before-param-description:
-    - error
-  jsdoc/require-param:
-    - error
-  jsdoc/require-param-description:
-    - error
-  jsdoc/require-param-type:
-    - error
-  jsdoc/require-returns-type:
-    - error
-
-  # Node
-
-  node/no-deprecated-api:
-    - error
-  node/no-missing-import:
-    - error
-  node/no-missing-require:
-    - error
-  node/process-exit-as-throw:
-    - error
-  node/no-extraneous-require:
-    - error
-  node/no-extraneous-import:
-    - error
-
-  # React
-
-  react/jsx-uses-vars:
-    - error
-
-overrides:
-  files: ['*.jsx']
-  rules:
-    require-jsdoc:
-    - off
--- a/.github/actions/publish/action.yml
+++ b/.github/actions/publish/action.yml
@ -15,7 +15,7 @@ inputs:
    # Beware that native modules will be built for this version,
    # which might not be compatible with the one used by pkg (see forge.sidecar.ts)
    # https://github.com/vercel/pkg-fetch/releases
-    default: "18.18"
+    default: "18.x"
  VERBOSE:
    type: string
    default: "true"
@ -117,9 +117,10 @@ runs:
      shell: bash
      # IMPORTANT: before making changes to this step please consult @engineering in balena's chat.
      run: |
-        if [[ '${{ inputs.VERBOSE }}' =~ on|On|Yes|yes|true|True ]]; then
-          export DEBUG='electron-forge:*,sidecar'
-        fi
+        ## FIXME: causes issues with `xxhash` which tries to load a debug build which doens't exist and cannot be compiled
+        # if [[ '${{ inputs.VERBOSE }}' =~ on|On|Yes|yes|true|True ]]; then
+        #  export DEBUG='electron-forge:*,sidecar'
+        # fi

        APPLICATION_VERSION="$(jq -r '.version' package.json)"
        HOST_ARCH="$(echo "${RUNNER_ARCH}" | tr '[:upper:]' '[:lower:]')"
--- a/.github/actions/test/action.yml
+++ b/.github/actions/test/action.yml
@ -49,9 +49,10 @@ runs:
    - name: Test release
      shell: bash
      run: |
-        if [[ '${{ inputs.VERBOSE }}' =~ on|On|Yes|yes|true|True ]]; then
-          export DEBUG='electron-forge:*,sidecar'
-        fi
+        ## FIXME: causes issues with `xxhash` which tries to load a debug build which doens't exist and cannot be compiled
+        # if [[ '${{ inputs.VERBOSE }}' =~ on|On|Yes|yes|true|True ]]; then
+        #   export DEBUG='electron-forge:*,sidecar'
+        # fi

        runner_os="$(echo "${RUNNER_OS}" | tr '[:upper:]' '[:lower:]')"

--- a/forge.sidecar.ts
+++ b/forge.sidecar.ts
@ -36,9 +36,9 @@ function addWebpackDefine(

 		const value = isStartScrpt()
 			? // on `npm start`, point directly to the binary
-			  path.resolve(binDir, binName)
+				path.resolve(binDir, binName)
 			: // otherwise point relative to the resources folder of the bundled app
-			  binName;
+				binName;

 		debug(`define '${defineName}'='${value}'`);

@ -66,10 +66,10 @@ function build(
 	buildForArchs.split(',').forEach((arch) => {
 		const binPath = isStartScrpt()
 			? // on `npm start`, we don't know the arch we're building for at the time we're
-			  // adding the webpack define, so we just build under binDir
-			  path.resolve(binDir, binName)
+				// adding the webpack define, so we just build under binDir
+				path.resolve(binDir, binName)
 			: // otherwise build in arch-specific directory within binDir
-			  path.resolve(binDir, arch, binName);
+				path.resolve(binDir, arch, binName);

 		// FIXME: rebuilding mountutils shouldn't be necessary, but it is.
 		// It's coming from etcher-sdk, a fix has been upstreamed but to use
@ -111,10 +111,10 @@ function copyArtifact(
 ) {
 	const binPath = isStartScrpt()
 		? // on `npm start`, we don't know the arch we're building for at the time we're
-		  // adding the webpack define, so look for the binary directly under binDir
-		  path.resolve(binDir, binName)
+			// adding the webpack define, so look for the binary directly under binDir
+			path.resolve(binDir, binName)
 		: // otherwise look into arch-specific directory within binDir
-		  path.resolve(binDir, arch, binName);
+			path.resolve(binDir, arch, binName);

 	// buildPath points to appPath, which is inside resources dir which is the one we actually want
 	const resourcesPath = path.dirname(buildPath);
--- a/lib/gui/app/app.ts
+++ b/lib/gui/app/app.ts
@ -38,7 +38,6 @@ import * as windowProgress from './os/window-progress';
 import MainPage from './pages/main/MainPage';
 import './css/main.css';
 import * as i18next from 'i18next';
-import { promises } from 'dns';
 import { SourceMetadata } from '../../shared/typings/source-selector';

 window.addEventListener(
--- a/lib/gui/app/components/drive-selector/drive-selector.tsx
+++ b/lib/gui/app/components/drive-selector/drive-selector.tsx
@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/triangle-exclamation.svg';
 import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
 import * as sourceDestination from 'etcher-sdk/build/source-destination/';
 import * as React from 'react';
@ -42,7 +42,7 @@ import {
 	Table,
 } from '../../styled-components';

-import { SourceMetadata } from '../source-selector/source-selector';
+import { SourceMetadata } from '../../../../shared/typings/source-selector';
 import { middleEllipsis } from '../../utils/middle-ellipsis';
 import * as i18next from 'i18next';

@ -310,9 +310,17 @@ export class DriveSelector extends React.Component<
 			case compatibility.system():
 				return warning.systemDrive();
 			case compatibility.tooSmall():
-				const size =
-					this.state.image?.recommendedDriveSize || this.state.image?.size || 0;
-				return warning.tooSmall({ size }, drive);
+				return warning.tooSmall(
+					{
+						size:
+							this.state.image?.recommendedDriveSize ||
+							this.state.image?.size ||
+							0,
+					},
+					drive,
+				);
+			default:
+				return '';
 		}
 	}

@ -428,11 +436,10 @@ export class DriveSelector extends React.Component<
 				) : (
 					<>
 						<DrivesTable
-							refFn={(t) => {
-								if (t !== null) {
-									t.setRowSelection(selectedList);
-								}
+							refFn={() => {
+								// noop
 							}}
+							checkedItems={selectedList}
 							checkedRowsNumber={selectedList.length}
 							multipleSelection={this.props.multipleSelection}
 							columns={this.tableColumns}
@ -442,7 +449,10 @@ export class DriveSelector extends React.Component<
 								isDrivelistDrive(row) && row.isSystem ? ['system'] : []
 							}
 							rowKey="displayName"
-							onCheck={(rows: Drive[]) => {
+							onCheck={(rows) => {
+								if (rows == null) {
+									rows = [];
+								}
 								let newSelection = rows.filter(isDrivelistDrive);
 								if (this.props.multipleSelection) {
 									if (rows.length === 0) {
--- a/lib/gui/app/components/drive-status-warning-modal/drive-status-warning-modal.tsx
+++ b/lib/gui/app/components/drive-status-warning-modal/drive-status-warning-modal.tsx
@ -1,11 +1,10 @@
-import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
-import * as _ from 'lodash';
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/triangle-exclamation.svg';
 import * as React from 'react';
 import { Badge, Flex, Txt, ModalProps } from 'rendition';
 import { Modal, ScrollableFlex } from '../../styled-components';
 import { middleEllipsis } from '../../utils/middle-ellipsis';

-import * as prettyBytes from 'pretty-bytes';
+import prettyBytes from 'pretty-bytes';
 import { DriveWithWarnings } from '../../pages/main/Flash';
 import * as i18next from 'i18next';

--- a/lib/gui/app/components/flash-results/flash-results.tsx
+++ b/lib/gui/app/components/flash-results/flash-results.tsx
@ -15,9 +15,8 @@
 */

 import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
-import CheckCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/check-circle.svg';
-import TimesCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/times-circle.svg';
-import outdent from 'outdent';
+import CheckCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle-check.svg';
+import TimesCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle-xmark.svg';
 import * as React from 'react';
 import { Flex, FlexProps, Link, TableColumn, Txt } from 'rendition';
 import styled from 'styled-components';
--- a/lib/gui/app/components/settings/settings.tsx
+++ b/lib/gui/app/components/settings/settings.tsx
@ -17,7 +17,7 @@
 import GithubSvg from '@fortawesome/fontawesome-free/svgs/brands/github.svg';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Box, Checkbox, Flex, TextWithCopy, Txt } from 'rendition';
+import { Box, Checkbox, Flex, Txt } from 'rendition';

 import { version, packageType } from '../../../../../package.json';
 import * as settings from '../../models/settings';
@ -61,7 +61,9 @@ const EPInfo = etcherProInfo();
 const InfoBox = (props: any) => (
 	<Box fontSize={14}>
 		<Txt>{props.label}</Txt>
-		<TextWithCopy code text={props.value} copy={props.value} />
+		<Txt code copy={props.value}>
+			{props.value}{' '}
+		</Txt>
 	</Box>
 );

--- a/lib/gui/app/components/source-selector/source-selector.tsx
+++ b/lib/gui/app/components/source-selector/source-selector.tsx
@ -17,7 +17,7 @@
 import CopySvg from '@fortawesome/fontawesome-free/svgs/solid/copy.svg';
 import FileSvg from '@fortawesome/fontawesome-free/svgs/solid/file.svg';
 import LinkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg';
-import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/triangle-exclamation.svg';
 import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
 import ChevronRightSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-right.svg';
 import { ipcRenderer, IpcRendererEvent } from 'electron';
@ -388,10 +388,9 @@ export class SourceSelector extends React.Component<
 		SourceType: Source,
 		auth?: Authentication,
 	): { promise: Promise<void>; cancel: () => void } {
-		let cancelled = false;
 		return {
 			cancel: () => {
-				cancelled = true;
+				// noop
 			},
 			promise: (async () => {
 				const sourcePath = isString(selected) ? selected : selected.device;
@ -519,8 +518,8 @@ export class SourceSelector extends React.Component<
 	}

 	private async onDrop(event: React.DragEvent<HTMLDivElement>) {
-		const [file] = event.dataTransfer.files;
-		if (file) {
+		const file = event.dataTransfer.files.item(0);
+		if (file != null) {
 			await this.selectSource(file.path, 'File').promise;
 		}
 	}
@ -581,7 +580,7 @@ export class SourceSelector extends React.Component<
 			imageLoading,
 		} = this.state;
 		const selectionImage = selectionState.getImage();
-		let image: SourceMetadata | DrivelistDrive =
+		let image =
 			selectionImage !== undefined ? selectionImage : ({} as SourceMetadata);

 		image = image.drive ?? image;
@ -684,7 +683,7 @@ export class SourceSelector extends React.Component<
 						style={{
 							boxShadow: '0 3px 7px rgba(0, 0, 0, 0.3)',
 						}}
-						titleElement={
+						title={
 							<span>
 								<ExclamationTriangleSvg fill="#fca321" height="1em" />{' '}
 								<span>{this.state.warning.title}</span>
--- a/lib/gui/app/components/target-selector/target-selector-button.tsx
+++ b/lib/gui/app/components/target-selector/target-selector-button.tsx
@ -14,7 +14,7 @@
 * limitations under the License.
 */

-import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/triangle-exclamation.svg';
 import * as React from 'react';
 import { Flex, FlexProps, Txt } from 'rendition';

--- a/lib/gui/app/models/leds.ts
+++ b/lib/gui/app/models/leds.ts
@ -43,7 +43,7 @@ function blink(t: number) {
 	return Math.floor(t) % 2;
 }

-function one(_t: number) {
+function one() {
 	return 1;
 }

--- a/lib/gui/app/modules/analytics.ts
+++ b/lib/gui/app/modules/analytics.ts
@ -52,7 +52,7 @@ export const anonymizeSentryData = (
 	return event;
 };

-const extractPathRegex = /(.*)(^|\s)(file\:\/\/)?(\w\:)?([\\\/].+)/;
+const extractPathRegex = /(.*)(^|\s)(file:\/\/)?(\w:)?([\\/].+)/;
 const etcherSegmentMarkers = ['app.asar', 'Resources'];

 export const anonymizePath = (input: string) => {
@ -156,7 +156,7 @@ function flattenObject(obj: any) {
 	const toReturn: AnalyticsPayload = {};

 	for (const i in obj) {
-		if (!obj.hasOwnProperty(i)) {
+		if (!Object.prototype.hasOwnProperty.call(obj, i)) {
 			continue;
 		}

@ -168,7 +168,7 @@ function flattenObject(obj: any) {
 		if (typeof obj[i] === 'object' && obj[i] !== null) {
 			const flatObject = flattenObject(obj[i]);
 			for (const x in flatObject) {
-				if (!flatObject.hasOwnProperty(x)) {
+				if (!Object.prototype.hasOwnProperty.call(flatObject, x)) {
 					continue;
 				}

--- a/lib/gui/app/modules/image-writer.ts
+++ b/lib/gui/app/modules/image-writer.ts
@ -25,7 +25,6 @@ import * as settings from '../models/settings';
 import * as analytics from '../modules/analytics';
 import * as windowProgress from '../os/window-progress';
 import { startApiAndSpawnChild } from './api';
-import { terminateScanningServer } from '../app';

 /**
 * @summary Handle a flash error and log it to analytics
@ -81,7 +80,13 @@ async function performWrite(

 	console.log({ image, drives });

-	return await new Promise(async (resolve, reject) => {
+	// Spawn the child process with privileges and wait for the connection to be made
+	const { emit, registerHandler, terminateServer } =
+		await startApiAndSpawnChild({
+			withPrivileges: true,
+		});
+
+	return await new Promise((resolve, reject) => {
 		const flashResults: FlashResults = {};

 		const analyticsData = {
@ -92,7 +97,7 @@ async function performWrite(
 			flashInstanceUuid: flashState.getFlashUuid(),
 		};

-		const onFail = ({ device, error }) => {
+		const onFail = ({ device, error }: { device: any; error: any }) => {
 			console.log('fail event');
 			console.log(device);
 			console.log(error);
@ -103,7 +108,7 @@ async function performWrite(
 			finish();
 		};

-		const onDone = (event) => {
+		const onDone = (event: any) => {
 			console.log('done event');
 			event.results.errors = event.results.errors.map(
 				(data: Dictionary<any> & { message: string }) => {
@ -151,12 +156,6 @@ async function performWrite(
 			resolve(flashResults);
 		};

-		// Spawn the child process with privileges and wait for the connection to be made
-		const { emit, registerHandler, terminateServer } =
-			await startApiAndSpawnChild({
-				withPrivileges: true,
-			});
-
 		registerHandler('state', onProgress);
 		registerHandler('fail', onFail);
 		registerHandler('done', onDone);
--- a/lib/gui/app/pages/main/MainPage.tsx
+++ b/lib/gui/app/pages/main/MainPage.tsx
@ -14,8 +14,8 @@
 * limitations under the License.
 */

-import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/cog.svg';
-import QuestionCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg';
+import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/gear.svg';
+import QuestionCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle-question.svg';

 import * as path from 'path';
 import * as prettyBytes from 'pretty-bytes';
@ -116,10 +116,10 @@ interface MainPageState {
 }

 export class MainPage extends React.Component<
-	{},
+	object,
 	MainPageState & MainPageStateFromStore
 > {
-	constructor(props: {}) {
+	constructor(props: object) {
 		super(props);
 		this.state = {
 			current: 'main',
--- a/lib/gui/app/styled-components.tsx
+++ b/lib/gui/app/styled-components.tsx
@ -14,7 +14,6 @@
 * limitations under the License.
 */

-import * as _ from 'lodash';
 import * as React from 'react';
 import {
 	Alert as AlertBase,
@ -113,14 +112,25 @@ export const DetailsText = (props: FlexProps) => (

 const modalFooterShadowCss = css`
 	overflow: auto;
-	background: 0, linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, 0,
+	background:
+		0,
+		linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
+		0,
 		linear-gradient(rgba(255, 255, 255, 0), rgba(221, 225, 240, 0.5) 70%) 0 100%;
 	background-repeat: no-repeat;
-	background-size: 100% 40px, 100% 40px, 100% 8px, 100% 8px;
+	background-size:
+		100% 40px,
+		100% 40px,
+		100% 8px,
+		100% 8px;

 	background-repeat: no-repeat;
 	background-color: white;
-	background-size: 100% 40px, 100% 40px, 100% 8px, 100% 8px;
+	background-size:
+		100% 40px,
+		100% 40px,
+		100% 8px,
+		100% 8px;
 	background-attachment: local, local, scroll, scroll;
 `;

@ -236,16 +246,15 @@ export interface GenericTableProps<T> extends BaseTableProps<T> {
 	showWarnings?: boolean;
 }

-const GenericTable: <T>(
+function GenericTable<T>(
 	props: GenericTableProps<T>,
-) => React.ReactElement<GenericTableProps<T>> = <T extends {}>({
-	refFn,
-	...props
-}: GenericTableProps<T>) => (
-	<div>
-		<BaseTable<T> ref={refFn} {...props} />
-	</div>
-);
+): React.ReactElement<GenericTableProps<T>> {
+	return (
+		<div>
+			<BaseTable<T> ref={props.refFn} {...props} />
+		</div>
+	);
+}

 function StyledTable<T>() {
 	return styled((props: GenericTableProps<T>) => (
@ -284,7 +293,6 @@ function StyledTable<T>() {
 		[data-display='table-body'] > [data-display='table-row'] {
 			> [data-display='table-cell']:first-child {
 				padding-left: 15px;
-				width: 6%;
 			}

 			> [data-display='table-cell']:last-child {
@ -319,7 +327,7 @@ function StyledTable<T>() {
 	`;
 }

-export const Table = <T extends {}>(props: GenericTableProps<T>) => {
+export const Table = <T extends object>(props: GenericTableProps<T>) => {
 	const TypedStyledFunctional = StyledTable<T>();
 	return <TypedStyledFunctional {...props} />;
 };
--- a/lib/gui/etcher.ts
+++ b/lib/gui/etcher.ts
@ -40,6 +40,8 @@ import * as SentryMain from '@sentry/electron/main';
 import * as packageJSON from '../../package.json';
 import { anonymizeSentryData } from './app/modules/analytics';

+import { delay } from '../shared/utils';
+
 const customProtocol = 'etcher';
 const scheme = `${customProtocol}://`;
 const updatablePackageTypes = ['appimage', 'nsis', 'dmg'];
@ -144,14 +146,6 @@ electron.app.on('open-url', async (event, data) => {
 	await selectImageURL(data);
 });

-interface AutoUpdaterConfig {
-	autoDownload?: boolean;
-	autoInstallOnAppQuit?: boolean;
-	allowPrerelease?: boolean;
-	fullChangelog?: boolean;
-	allowDowngrade?: boolean;
-}
-
 async function createMainWindow() {
 	const fullscreen = Boolean(await settings.get('fullscreen'));
 	const defaultWidth = settings.DEFAULT_WIDTH;
@ -202,7 +196,7 @@ async function createMainWindow() {
 	// Prevent external resources from being loaded (like images)
 	// when dropping them on the WebView.
 	// See https://github.com/electron/electron/issues/5919
-	mainWindow.webContents.on('will-navigate', (event) => {
+	mainWindow.webContents.on('will-navigate', (event: any) => {
 		event.preventDefault();
 	});

@ -287,7 +281,7 @@ async function main(): Promise<void> {
 			const webview = electron.webContents.fromId(id);

 			// Open link in browser if it's opened as a 'foreground-tab'
-			webview.setWindowOpenHandler((event) => {
+			webview!.setWindowOpenHandler((event) => {
 				const url = new URL(event.url);
 				if (
 					(url.protocol === 'http:' || url.protocol === 'https:') &&
--- a/lib/shared/messages.ts
+++ b/lib/shared/messages.ts
@ -16,7 +16,7 @@

 import { Dictionary } from 'lodash';
 import { outdent } from 'outdent';
-import * as prettyBytes from 'pretty-bytes';
+import prettyBytes from 'pretty-bytes';
 import '../gui/app/i18n';
 import * as i18next from 'i18next';

@ -164,11 +164,11 @@ export const error = {
 				? i18next.t('message.toDrive', {
 						description: drives[0].description,
 						name: drives[0].displayName,
-				  })
+					})
 				: i18next.t('message.toTarget', {
 						count: drives.length,
 						num: drives.length,
-				  });
+					});
 		return i18next.t('message.flashError', {
 			image: imageBasename,
 			targets: target,
--- a/lib/shared/permissions.ts
+++ b/lib/shared/permissions.ts
@ -70,14 +70,14 @@ export async function isElevated(): Promise<boolean> {
 		}
 		return true;
 	}
-	return process.geteuid() === UNIX_SUPERUSER_USER_ID;
+	return process.geteuid!() === UNIX_SUPERUSER_USER_ID;
 }

 /**
 * @summary Check if the current process is running with elevated permissions
 */
 export function isElevatedUnixSync(): boolean {
-	return process.geteuid() === UNIX_SUPERUSER_USER_ID;
+	return process.geteuid!() === UNIX_SUPERUSER_USER_ID;
 }

 function escapeSh(value: any): string {
--- a/lib/util/api.ts
+++ b/lib/util/api.ts
@ -15,17 +15,18 @@
 */

 import * as ipc from 'node-ipc';
+import { Dictionary, values } from 'lodash';
+
+import type { MultiDestinationProgress } from 'etcher-sdk/build/multi-write';

 import { toJSON } from '../shared/errors';
 import { GENERAL_ERROR, SUCCESS } from '../shared/exit-codes';
 import { delay } from '../shared/utils';
 import { WriteOptions } from './types/types';
-import { MultiDestinationProgress } from 'etcher-sdk/build/multi-write';
 import { write, cleanup } from './child-writer';
 import { startScanning } from './scanner';
 import { getSourceMetadata } from './source-metadata';
 import { DrivelistDrive } from '../shared/drive-constraints';
-import { Dictionary, values } from 'lodash';

 ipc.config.id = process.env.IPC_CLIENT_ID as string;
 ipc.config.socketRoot = process.env.IPC_SOCKET_ROOT as string;
@ -40,6 +41,7 @@ ipc.config.silent = true;
 // The purpose behind this change is for this process
 // to emit a "disconnect" event as soon as the GUI
 // process is closed, so we can kill this process as well.
+
 // @ts-ignore (0 is a valid value for stopRetrying and is not the same as false)
 ipc.config.stopRetrying = 0;

--- a/lib/util/child-writer.ts
+++ b/lib/util/child-writer.ts
@ -52,6 +52,7 @@ async function write(options: WriteOptions) {
 	const onFail = (destination: SourceDestination, error: Error) => {
 		emitFail({
 			// TODO: device should be destination
+
 			// @ts-ignore (destination.drive is private)
 			device: destination.drive,
 			error: toJSON(error),
--- a/lib/util/drive-scanner.ts
+++ b/lib/util/drive-scanner.ts
@ -30,14 +30,13 @@ const adapters: Adapter[] = [

 // Can't use permissions.isElevated() here as it returns a promise and we need to set
 // module.exports = scanner right now.
-if (platform !== 'linux' || geteuid() === 0) {
+if (platform !== 'linux' || (geteuid && geteuid() === 0)) {
 	adapters.push(new UsbbootDeviceAdapter());
 }

 if (platform === 'win32') {
 	const {
 		DriverlessDeviceAdapter: driverless,
-		// tslint:disable-next-line:no-var-requires
 	} = require('etcher-sdk/build/scanner/adapters/driverless');
 	adapters.push(new driverless());
 }
--- a/lib/util/scanner.ts
+++ b/lib/util/scanner.ts
@ -73,9 +73,11 @@ function prepareDrive(drive: Drive) {
 		return drive.drive;
 	} else if (drive instanceof sdk.sourceDestination.UsbbootDrive) {
 		// This is a workaround etcher expecting a device string and a size
+
 		// @ts-ignore
 		drive.device = drive.usbDevice.portId;
 		drive.size = null;
+
 		// @ts-ignore
 		drive.progress = 0;
 		drive.disabled = true;
@ -140,6 +142,7 @@ function updateDriveProgress(
 	progress: number,
 ) {
 	const drives = getDrives();
+
 	// @ts-ignore
 	const driveInMap = drives[drive.device];
 	if (driveInMap) {
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
--- a/package.json
+++ b/package.json
@ -14,9 +14,8 @@
    "url": "git@github.com:balena-io/etcher.git"
  },
  "scripts": {
-    "lint-css": "prettier --write lib/**/*.css",
-    "lint-ts": "balena-lint --fix --typescript typings lib tests forge.config.ts forge.sidecar.ts webpack.config.ts",
-    "lint": "npm run lint-ts && npm run lint-css",
+    "prettify": "prettier --write lib/**/*.css && balena-lint --fix --typescript typings lib tests forge.config.ts forge.sidecar.ts webpack.config.ts",
+    "lint": "npm run prettify && catch-uncommitted",
    "test-gui": "electron-mocha --recursive --reporter spec --window-config tests/gui/window-config.json --require ts-node/register/transpile-only --require-main tests/gui/allow-renderer-process-reuse.ts --full-trace --no-sandbox --renderer tests/gui/**/*.ts",
    "test-shared": "electron-mocha --recursive --reporter spec --require ts-node/register/transpile-only --require-main tests/gui/allow-renderer-process-reuse.ts --full-trace --no-sandbox tests/shared/**/*.ts",
    "test-windows": "npm run lint && npm run test-gui && npm run test-shared",
@ -29,94 +28,82 @@
  },
  "husky": {
    "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "npm run prettify"
    }
  },
-  "lint-staged": {
-    "./**/*.{ts,tsx}": [
-      "npm run lint-ts"
-    ],
-    "./**/*.css": [
-      "npm run lint-css"
-    ]
-  },
  "author": "Balena Ltd. <hello@balena.io>",
  "license": "Apache-2.0",
  "dependencies": {
    "@balena/sudo-prompt": "9.2.1-workaround-windows-amperstand-in-username-0849e215b947987a643fe5763902aea201255534",
-    "@electron/remote": "^2.0.9",
-    "@fortawesome/fontawesome-free": "5.15.4",
-    "@sentry/electron": "^4.1.2",
+    "@electron/remote": "^2.1.0",
+    "@fortawesome/fontawesome-free": "6.5.1",
+    "@sentry/electron": "^4.15.1",
    "analytics-client": "^2.0.1",
-    "axios": "^0.27.2",
-    "d3": "4.13.0",
+    "axios": "^1.6.0",
    "debug": "4.3.4",
    "electron-squirrel-startup": "^1.0.0",
-    "electron-updater": "5.3.0",
-    "etcher-sdk": "8.3.1",
-    "i18next": "21.10.0",
+    "electron-updater": "6.1.7",
+    "etcher-sdk": "9.0.0",
+    "i18next": "23.7.8",
    "immutable": "3.8.2",
    "lodash": "4.17.21",
    "node-ipc": "9.2.1",
    "outdent": "0.8.0",
    "path-is-inside": "1.0.2",
    "pretty-bytes": "5.6.0",
-    "react": "16.8.5",
-    "react-dom": "16.8.5",
-    "react-i18next": "11.18.6",
-    "redux": "4.2.0",
-    "rendition": "19.3.2",
-    "semver": "7.3.8",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-i18next": "13.5.0",
+    "redux": "4.2.1",
+    "rendition": "35.1.2",
+    "semver": "7.5.4",
    "styled-components": "5.3.6",
    "sys-class-rgb-led": "3.0.1",
-    "uuid": "8.3.2"
+    "uuid": "9.0.1"
  },
  "devDependencies": {
-    "@balena/lint": "5.4.2",
-    "@electron-forge/cli": "6.4.2",
-    "@electron-forge/maker-deb": "6.4.2",
-    "@electron-forge/maker-dmg": "6.4.2",
-    "@electron-forge/maker-rpm": "6.4.2",
-    "@electron-forge/maker-squirrel": "6.4.2",
-    "@electron-forge/maker-zip": "6.4.2",
-    "@electron-forge/plugin-auto-unpack-natives": "6.4.2",
-    "@electron-forge/plugin-webpack": "6.4.2",
-    "@reforged/maker-appimage": "3.3.1",
-    "@svgr/webpack": "5.5.0",
-    "@types/chai": "4.3.4",
-    "@types/copy-webpack-plugin": "6.4.3",
+    "@balena/lint": "7.2.4",
+    "@electron-forge/cli": "7.2.0",
+    "@electron-forge/maker-deb": "7.2.0",
+    "@electron-forge/maker-dmg": "7.2.0",
+    "@electron-forge/maker-rpm": "7.2.0",
+    "@electron-forge/maker-squirrel": "7.2.0",
+    "@electron-forge/maker-zip": "7.2.0",
+    "@electron-forge/plugin-auto-unpack-natives": "7.2.0",
+    "@electron-forge/plugin-webpack": "7.2.0",
+    "@reforged/maker-appimage": "3.3.2",
+    "@svgr/webpack": "8.1.0",
+    "@types/chai": "4.3.11",
    "@types/debug": "^4.1.12",
-    "@types/mime-types": "2.1.1",
-    "@types/mini-css-extract-plugin": "1.4.3",
-    "@types/mocha": "^9.1.1",
-    "@types/node": "^16.18.12",
-    "@types/node-ipc": "9.2.0",
-    "@types/react": "16.14.34",
-    "@types/react-dom": "16.9.17",
-    "@types/semver": "7.3.13",
-    "@types/sinon": "9.0.11",
-    "@types/tmp": "0.2.3",
+    "@types/mime-types": "2.1.4",
+    "@types/mocha": "^10.0.6",
+    "@types/node": "^18.11.9",
+    "@types/node-ipc": "9.2.3",
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2",
+    "@types/semver": "7.5.6",
+    "@types/sinon": "17.0.2",
+    "@types/tmp": "0.2.6",
    "@vercel/webpack-asset-relocator-loader": "1.7.3",
-    "chai": "4.3.7",
+    "catch-uncommitted": "^2.0.0",
+    "chai": "4.3.10",
    "css-loader": "5.2.7",
-    "electron": "25.8.2",
-    "electron-mocha": "^11.0.2",
+    "electron": "27.1.3",
+    "electron-mocha": "^12.2.0",
    "file-loader": "6.2.0",
-    "husky": "4.3.8",
-    "lint-staged": "10.5.4",
-    "mini-css-extract-plugin": "1.6.2",
-    "mocha": "^9.1.1",
+    "husky": "8.0.3",
+    "mocha": "^10.2.0",
    "native-addon-loader": "2.0.1",
    "node-loader": "^2.0.0",
    "omit-deep-lodash": "1.1.7",
    "pkg": "^5.8.1",
-    "sinon": "9.2.4",
+    "sinon": "17.0.1",
    "string-replace-loader": "3.1.0",
-    "style-loader": "2.0.0",
-    "ts-loader": "^9.5.0",
-    "ts-node": "^10.9.1",
-    "tslib": "2.4.1",
-    "typescript": "4.4.4",
+    "style-loader": "3.3.3",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "tslib": "2.6.2",
+    "typescript": "^5.3.3",
    "url-loader": "4.1.1"
  },
  "hostDependencies": {
--- a/pkg-sidecar.json
+++ b/pkg-sidecar.json
@ -5,6 +5,8 @@
    "node_modules/drivelist/**",
    "node_modules/mountutils/**",
    "node_modules/winusb-driver-generator/**",
-    "node_modules/node-raspberrypi-usbboot/**"
+    "node_modules/node-raspberrypi-usbboot/**",
+    "node_modules/xxhash-addon/**",
+    "node_modules/axios/**"
  ]
 }
--- a/tests/gui/allow-renderer-process-reuse.ts
+++ b/tests/gui/allow-renderer-process-reuse.ts
@ -1,8 +1,6 @@
-// tslint:disable-next-line:no-var-requires
 const { app } = require('electron');

 if (app !== undefined) {
-	// tslint:disable-next-line:no-var-requires
 	const remoteMain = require('@electron/remote/main');

 	remoteMain.initialize();
--- a/tests/gui/models/settings.spec.ts
+++ b/tests/gui/models/settings.spec.ts
@ -15,7 +15,6 @@
 */

 import { expect } from 'chai';
-import * as _ from 'lodash';
 import { stub } from 'sinon';

 import * as settings from '../../../lib/gui/app/models/settings';
@ -47,8 +46,8 @@ describe('Browser: settings', () => {
 			const writeConfigFileStub = stub();
 			writeConfigFileStub.returns(Promise.reject(new Error('settings error')));

-			const p = settings.set('foo', 'baz', writeConfigFileStub);
-			await checkError(p, async (error) => {
+			const promise = settings.set('foo', 'baz', writeConfigFileStub);
+			await checkError(promise, async (error) => {
 				expect(error).to.be.an.instanceof(Error);
 				expect(error.message).to.equal('settings error');
 				expect(await settings.get('foo')).to.equal('bar');
--- a/tests/shared/drive-constraints.spec.ts
+++ b/tests/shared/drive-constraints.spec.ts
@ -1156,7 +1156,7 @@ describe('Shared: DriveConstraints', function () {
 						'/dev/disk4',
 						'/dev/disk5',
 						'/dev/disk6',
-				  ];
+					];
 		const drives = [
 			{
 				device: drivePaths[0],
--- a/tsconfig.sidecar.json
+++ b/tsconfig.sidecar.json
@ -1,14 +1,14 @@
 {
  "compilerOptions": {
-    "target": "ES2019",
+    "target": "ES2020",
    "allowJs": false,
    "skipLibCheck": true,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "typeRoots": ["./node_modules/@types", "./typings"],
-    "module": "CommonJS",
+    "module": "commonjs",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true
--- a/webpack.config.ts
+++ b/webpack.config.ts
@ -16,7 +16,6 @@

 import type { Configuration, ModuleOptions } from 'webpack';

-import * as _ from 'lodash';
 import {
 	BannerPlugin,
 	IgnorePlugin,