Merge pull request #3149 from balena-io/update-dev-dependencies

Update dev dependencies

lib/gui/app/components/drive-selector/DriveSelectorModal.tsx

@@ -141,118 +141,113 @@ export function DriveSelectorModal({ close }: { close: () => void }) {
 	return (
 		<Modal
 			className="modal-drive-selector-modal"
-			title="Select a Drive"
+			titleElement="Select a Drive"
 			done={close}
 			action="Continue"
-			style={{
-				padding: '20px 30px 11px 30px',
-			}}
 			primaryButtonProps={{
 				primary: !hasStatus,
 				warning: hasStatus,
 			}}
 		>
-			<div>
+			<ul
-				<ul
+				style={{
-					style={{
+					height: '210px',
-						height: '250px',
+					overflowX: 'hidden',
-						overflowX: 'hidden',
+					overflowY: 'auto',
-						overflowY: 'auto',
+					padding: '0px',
-						padding: '0',
+				}}
-					}}
+			>
-				>
+				{_.map(drives, (drive, index) => {
-					{_.map(drives, (drive, index) => {
+					return (
-						return (
+						<li
-							<li
+							key={`item-${drive.displayName}`}
-								key={`item-${drive.displayName}`}
+							className="list-group-item"
-								className="list-group-item"
+							// @ts-ignore (FIXME: not a valid <li> attribute but used by css rule)
-								// @ts-ignore (FIXME: not a valid <li> attribute but used by css rule)
+							disabled={!isDriveValid(drive, selectionState.getImage())}
-								disabled={!isDriveValid(drive, selectionState.getImage())}
+							onDoubleClick={() => selectDriveAndClose(drive)}
-								onDoubleClick={() => selectDriveAndClose(drive)}
+							onClick={() => toggleDrive(drive)}
-								onClick={() => toggleDrive(drive)}
+						>
+							{drive.icon && (
+								<img
+									className="list-group-item-section"
+									alt="Drive device type logo"
+									src={`../assets/${drive.icon}.svg`}
+									width="25"
+									height="30"
+								/>
+							)}
+							<div
+								className="list-group-item-section list-group-item-section-expanded"
+								tabIndex={15 + index}
+								onKeyPress={(evt) => keyboardToggleDrive(drive, evt)}
 							>
-								{drive.icon && (
+								<h6 className="list-group-item-heading">
-									<img
+									{drive.description}
-										className="list-group-item-section"
+									{drive.size && (
-										alt="Drive device type logo"
+										<span className="word-keep">
-										src={`../assets/${drive.icon}.svg`}
+											{' '}
-										width="25"
+											- {bytesToClosestUnit(drive.size)}
-										height="30"
+										</span>
-									/>
+									)}
+								</h6>
+								{!drive.link && (
+									<p className="list-group-item-text">{drive.displayName}</p>
 								)}
-								<div
+								{drive.link && (
-									className="list-group-item-section list-group-item-section-expanded"
+									<p className="list-group-item-text">
-									tabIndex={15 + index}
+										{drive.displayName} -{' '}
-									onKeyPress={(evt) => keyboardToggleDrive(drive, evt)}
+										<b>
-								>
+											<a onClick={() => installMissingDrivers(drive)}>
-									<h6 className="list-group-item-heading">
+												{drive.linkCTA}
-										{drive.description}
+											</a>
-										{drive.size && (
+										</b>
-											<span className="word-keep">
+									</p>
-												{' '}
+								)}
-												- {bytesToClosestUnit(drive.size)}
+
+								<footer className="list-group-item-footer">
+									{_.map(getDriveStatuses(drive), (status, idx) => {
+										const className = {
+											[COMPATIBILITY_STATUS_TYPES.WARNING]: 'label-warning',
+											[COMPATIBILITY_STATUS_TYPES.ERROR]: 'label-danger',
+										};
+										return (
+											<span
+												key={`${drive.displayName}-status-${idx}`}
+												className={`label ${className[status.type]}`}
+											>
+												{status.message}
 											</span>
-										)}
+										);
-									</h6>
+									})}
-									{!drive.link && (
+								</footer>
-										<p className="list-group-item-text">{drive.displayName}</p>
+								{Boolean(drive.progress) && (
-									)}
+									<progress
-									{drive.link && (
+										className="drive-init-progress"
-										<p className="list-group-item-text">
+										value={drive.progress}
-											{drive.displayName} -{' '}
+										max="100"
-											<b>
+									></progress>
-												<a onClick={() => installMissingDrivers(drive)}>
-													{drive.linkCTA}
-												</a>
-											</b>
-										</p>
-									)}
-
-									<footer className="list-group-item-footer">
-										{_.map(getDriveStatuses(drive), (status, idx) => {
-											const className = {
-												[COMPATIBILITY_STATUS_TYPES.WARNING]: 'label-warning',
-												[COMPATIBILITY_STATUS_TYPES.ERROR]: 'label-danger',
-											};
-											return (
-												<span
-													key={`${drive.displayName}-status-${idx}`}
-													className={`label ${className[status.type]}`}
-												>
-													{status.message}
-												</span>
-											);
-										})}
-									</footer>
-									{Boolean(drive.progress) && (
-										<progress
-											className="drive-init-progress"
-											value={drive.progress}
-											max="100"
-										></progress>
-									)}
-								</div>
-
-								{isDriveValid(drive, selectionState.getImage()) && (
-									<span
-										className="list-group-item-section tick tick--success"
-										// @ts-ignore (FIXME: not a valid <span> attribute but used by css rule)
-										disabled={!selectionState.isDriveSelected(drive.device)}
-									></span>
 								)}
-							</li>
-						);
-					})}
-					{!hasAvailableDrives() && (
-						<li className="list-group-item">
-							<div>
-								<b>Connect a drive!</b>
-								<div>No removable drive detected.</div>
 							</div>
+
+							{isDriveValid(drive, selectionState.getImage()) && (
+								<span
+									className="list-group-item-section tick tick--success"
+									// @ts-ignore (FIXME: not a valid <span> attribute but used by css rule)
+									disabled={!selectionState.isDriveSelected(drive.device)}
+								></span>
+							)}
 						</li>
-					)}
+					);
-				</ul>
+				})}
-			</div>
+				{!hasAvailableDrives() && (
+					<li className="list-group-item">
+						<div>
+							<b>Connect a drive!</b>
+							<div>No removable drive detected.</div>
+						</div>
+					</li>
+				)}
+			</ul>
 
 			{missingDriversModal.drive !== undefined && (
 				<Modal

package.json

@@ -33,8 +33,7 @@
   },
   "lint-staged": {
     "./**/*.{ts,tsx}": [
-      "make lint-ts",
+      "make lint-ts"
-      "git add"
     ]
   },
   "author": "Balena Inc. <hello@etcher.io>",
@@ -86,33 +85,31 @@
     "@types/bluebird": "^3.5.30",
     "@types/chai": "^4.2.7",
     "@types/mime-types": "^2.1.0",
-    "@types/mocha": "^5.2.7",
+    "@types/mocha": "^7.0.2",
-    "@types/node": "^12.12.24",
+    "@types/node": "^12.12.39",
     "@types/node-ipc": "^9.1.2",
     "@types/react-dom": "^16.8.4",
     "@types/request": "^2.48.4",
-    "@types/semver": "^6.2.0",
+    "@types/semver": "^7.1.0",
-    "@types/sinon": "^7.5.1",
+    "@types/sinon": "^9.0.0",
-    "@types/tmp": "^0.1.0",
+    "@types/tmp": "^0.2.0",
     "@types/webpack-node-externals": "^1.7.0",
     "chai": "^4.2.0",
-    "chalk": "^1.1.3",
     "electron": "7.1.14",
     "electron-builder": "^22.1.0",
     "electron-mocha": "^8.2.0",
-    "electron-notarize": "^0.1.1",
+    "electron-notarize": "^0.3.0",
-    "html-loader": "^0.5.1",
+    "husky": "^4.2.5",
-    "husky": "^3.1.0",
+    "lint-staged": "^10.2.2",
-    "lint-staged": "^9.5.0",
     "mocha": "^7.0.1",
-    "node-gyp": "^3.8.0",
+    "node-gyp": "^6.1.0",
     "node-sass": "^4.12.0",
     "omit-deep-lodash": "1.1.4",
     "sass-lint": "^1.12.1",
     "simple-progress-webpack-plugin": "^1.1.2",
-    "sinon": "^8.0.4",
+    "sinon": "^9.0.2",
     "spectron": "^9.0.0",
-    "ts-loader": "^6.0.4",
+    "ts-loader": "^7.0.4",
     "ts-node": "^8.3.0",
     "typescript": "^3.5.3",
     "webpack": "^4.40.2",

webpack.config.ts

@@ -44,10 +44,6 @@ const commonConfig = {
 	},
 	module: {
 		rules: [
-			{
-				test: /\.html$/,
-				use: 'html-loader',
-			},
 			{
 				test: /\.tsx?$/,
 				use: 'ts-loader',