From 79e072e1a04802a6b6abcc6d6cfe89dc72831dbb Mon Sep 17 00:00:00 2001 From: Edwin Joassart Date: Wed, 18 Oct 2023 17:25:59 +0200 Subject: [PATCH] patch: bump pretty_bytes to 6.1.1 --- .../drive-selector/drive-selector.tsx | 110 +++++----- .../drive-status-warning-modal.tsx | 38 ++-- .../source-selector/source-selector.tsx | 200 +++++++++--------- .../target-selector-button.tsx | 44 ++-- lib/gui/app/modules/progress-status.ts | 38 ++-- lib/gui/app/pages/main/MainPage.tsx | 2 +- lib/shared/messages.ts | 88 ++++---- npm-shrinkwrap.json | 13 +- package.json | 2 +- 9 files changed, 269 insertions(+), 266 deletions(-) diff --git a/lib/gui/app/components/drive-selector/drive-selector.tsx b/lib/gui/app/components/drive-selector/drive-selector.tsx index c10413dc..338e5c5c 100644 --- a/lib/gui/app/components/drive-selector/drive-selector.tsx +++ b/lib/gui/app/components/drive-selector/drive-selector.tsx @@ -14,12 +14,12 @@ * limitations under the License. */ -import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.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'; -import { Flex, ModalProps, Txt, Badge, Link, TableColumn } from 'rendition'; -import styled from 'styled-components'; +import ExclamationTriangleSvg from "@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.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"; +import { Flex, ModalProps, Txt, Badge, Link, TableColumn } from "rendition"; +import styled from "styled-components"; import { getDriveImageCompatibilityStatuses, @@ -27,24 +27,24 @@ import { DriveStatus, DrivelistDrive, isDriveSizeLarge, -} from '../../../../shared/drive-constraints'; -import { compatibility, warning } from '../../../../shared/messages'; -import * as prettyBytes from 'pretty-bytes'; -import { getDrives, hasAvailableDrives } from '../../models/available-drives'; -import { getImage, isDriveSelected } from '../../models/selection-state'; -import { store } from '../../models/store'; -import { logEvent, logException } from '../../modules/analytics'; -import { open as openExternal } from '../../os/open-external/services/open-external'; +} from "../../../../shared/drive-constraints"; +import { compatibility, warning } from "../../../../shared/messages"; +import prettyBytes from "pretty-bytes"; +import { getDrives, hasAvailableDrives } from "../../models/available-drives"; +import { getImage, isDriveSelected } from "../../models/selection-state"; +import { store } from "../../models/store"; +import { logEvent, logException } from "../../modules/analytics"; +import { open as openExternal } from "../../os/open-external/services/open-external"; import { Alert, GenericTableProps, Modal, Table, -} from '../../styled-components'; +} from "../../styled-components"; -import { SourceMetadata } from '../source-selector/source-selector'; -import { middleEllipsis } from '../../utils/middle-ellipsis'; -import * as i18next from 'i18next'; +import { SourceMetadata } from "../source-selector/source-selector"; +import { middleEllipsis } from "../../utils/middle-ellipsis"; +import * as i18next from "i18next"; interface UsbbootDrive extends sourceDestination.UsbbootDrive { progress: number; @@ -70,15 +70,15 @@ function isDriverlessDrive(drive: Drive): drive is DriverlessDrive { } function isDrivelistDrive(drive: Drive): drive is DrivelistDrive { - return typeof (drive as DrivelistDrive).size === 'number'; + return typeof (drive as DrivelistDrive).size === "number"; } const DrivesTable = styled((props: GenericTableProps) => ( {...props} /> ))` - [data-display='table-head'], - [data-display='table-body'] { - > [data-display='table-row'] > [data-display='table-cell'] { + [data-display="table-head"], + [data-display="table-body"] { + > [data-display="table-row"] > [data-display="table-cell"] { &:nth-child(2) { width: 32%; } @@ -119,7 +119,7 @@ const InitProgress = styled( props?: React.ProgressHTMLAttributes; }) => { return ; - }, + } )` /* Reset the default appearance */ appearance: none; @@ -138,7 +138,7 @@ const InitProgress = styled( `; export interface DriveSelectorProps - extends Omit { + extends Omit { write: boolean; multipleSelection: boolean; showWarnings?: boolean; @@ -189,8 +189,8 @@ export class DriveSelector extends React.Component< this.tableColumns = [ { - field: 'description', - label: i18next.t('drives.name'), + field: "description", + label: i18next.t("drives.name"), render: (description: string, drive: Drive) => { if (isDrivelistDrive(drive)) { const isLargeDrive = isDriveSizeLarge(drive); @@ -201,7 +201,7 @@ export class DriveSelector extends React.Component< {hasWarnings && ( )} @@ -214,9 +214,9 @@ export class DriveSelector extends React.Component< }, }, { - field: 'description', - key: 'size', - label: i18next.t('drives.size'), + field: "description", + key: "size", + label: i18next.t("drives.size"), render: (_description: string, drive: Drive) => { if (isDrivelistDrive(drive) && drive.size !== null) { return prettyBytes(drive.size); @@ -224,17 +224,17 @@ export class DriveSelector extends React.Component< }, }, { - field: 'description', - key: 'link', - label: i18next.t('drives.location'), + field: "description", + key: "link", + label: i18next.t("drives.location"), render: (_description: string, drive: Drive) => { return ( {drive.displayName} {isDriverlessDrive(drive) && ( <> - {' '} - -{' '} + {" "} + -{" "} this.installMissingDrivers(drive)}> {drive.linkCTA} @@ -247,8 +247,8 @@ export class DriveSelector extends React.Component< }, }, { - field: 'description', - key: 'extra', + field: "description", + key: "extra", // We use an empty React fragment otherwise it uses the field name as label label: <>, render: (_description: string, drive: Drive) => { @@ -300,7 +300,7 @@ export class DriveSelector extends React.Component< private warningFromStatus( status: string, - drive: { device: string; size: number }, + drive: { device: string; size: number } ) { switch (status) { case compatibility.containsImage(): @@ -320,7 +320,7 @@ export class DriveSelector extends React.Component< const statuses: DriveStatus[] = getDriveImageCompatibilityStatuses( drive, this.state.image, - this.props.write, + this.props.write ).slice(0, 2); return ( // the column render fn expects a single Element @@ -336,7 +336,7 @@ export class DriveSelector extends React.Component< key={status.message} shade={badgeShade} mr="8px" - tooltip={this.props.showWarnings ? warningMessage : ''} + tooltip={this.props.showWarnings ? warningMessage : ""} > {status.message} @@ -348,7 +348,7 @@ export class DriveSelector extends React.Component< private installMissingDrivers(drive: DriverlessDrive) { if (drive.link) { - logEvent('Open driver link modal', { + logEvent("Open driver link modal", { url: drive.link, }); this.setState({ missingDriversModal: { drive } }); @@ -400,14 +400,14 @@ export class DriveSelector extends React.Component< color="#5b82a7" style={{ fontWeight: 600 }} > - {i18next.t('drives.find', { length: drives.length })} + {i18next.t("drives.find", { length: drives.length })} } titleDetails={{getDrives().length} found} cancel={() => cancel(this.originalList)} done={() => done(selectedList)} - action={i18next.t('drives.select', { select: selectedList.length })} + action={i18next.t("drives.select", { select: selectedList.length })} primaryButtonProps={{ primary: !showWarnings, warning: showWarnings, @@ -439,7 +439,7 @@ export class DriveSelector extends React.Component< data={displayedDrives} disabledRows={disabledDrives} getRowClass={(row: Drive) => - isDrivelistDrive(row) && row.isSystem ? ['system'] : [] + isDrivelistDrive(row) && row.isSystem ? ["system"] : [] } rowKey="displayName" onCheck={(rows: Drive[]) => { @@ -451,14 +451,14 @@ export class DriveSelector extends React.Component< const deselecting = selectedList.filter( (selected) => newSelection.filter( - (row) => row.device === selected.device, - ).length === 0, + (row) => row.device === selected.device + ).length === 0 ); const selecting = newSelection.filter( (row) => selectedList.filter( - (selected) => row.device === selected.device, - ).length === 0, + (selected) => row.device === selected.device + ).length === 0 ); deselecting.concat(selecting).forEach((row) => { if (this.props.onSelect) { @@ -488,7 +488,7 @@ export class DriveSelector extends React.Component< this.props.onSelect(row); } const index = selectedList.findIndex( - (d) => d.device === row.device, + (d) => d.device === row.device ); const newList = this.props.multipleSelection ? [...selectedList] @@ -514,7 +514,7 @@ export class DriveSelector extends React.Component< - {i18next.t('drives.showHidden', { + {i18next.t("drives.showHidden", { num: numberOfHiddenSystemDrives, })} @@ -524,8 +524,8 @@ export class DriveSelector extends React.Component< )} {this.props.showWarnings && hasSystemDrives ? ( - - {i18next.t('drives.systemDriveDanger')} + + {i18next.t("drives.systemDriveDanger")} ) : null} @@ -545,13 +545,13 @@ export class DriveSelector extends React.Component< this.setState({ missingDriversModal: {} }); } }} - action={i18next.t('yesContinue')} + action={i18next.t("yesContinue")} cancelButtonProps={{ - children: i18next.t('cancel'), + children: i18next.t("cancel"), }} children={ missingDriversModal.drive.linkMessage || - i18next.t('drives.openInBrowser', { + i18next.t("drives.openInBrowser", { link: missingDriversModal.drive.link, }) } diff --git 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 index d5096b40..c1e5fad8 100644 --- 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,13 +1,13 @@ -import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg'; -import * as _ from 'lodash'; -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 ExclamationTriangleSvg from "@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg"; +import * as _ from "lodash"; +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 { DriveWithWarnings } from '../../pages/main/Flash'; -import * as i18next from 'i18next'; +import prettyBytes from "pretty-bytes"; +import { DriveWithWarnings } from "../../pages/main/Flash"; +import * as i18next from "i18next"; const DriveStatusWarningModal = ({ done, @@ -18,12 +18,12 @@ const DriveStatusWarningModal = ({ isSystem: boolean; drivesWithWarnings: DriveWithWarnings[]; }) => { - let warningSubtitle = i18next.t('drives.largeDriveWarning'); - let warningCta = i18next.t('drives.largeDriveWarningMsg'); + let warningSubtitle = i18next.t("drives.largeDriveWarning"); + let warningCta = i18next.t("drives.largeDriveWarningMsg"); if (isSystem) { - warningSubtitle = i18next.t('drives.systemDriveWarning'); - warningCta = i18next.t('drives.systemDriveWarningMsg'); + warningSubtitle = i18next.t("drives.systemDriveWarning"); + warningCta = i18next.t("drives.systemDriveWarningMsg"); } return ( - {i18next.t('warning')} + {i18next.t("warning")} {warningSubtitle} @@ -66,11 +66,11 @@ const DriveStatusWarningModal = ({ {drivesWithWarnings.map((drive, i, array) => ( <> - {middleEllipsis(drive.description, 28)}{' '} - {drive.size && prettyBytes(drive.size) + ' '} + {middleEllipsis(drive.description, 28)}{" "} + {drive.size && prettyBytes(drive.size) + " "} {drive.statuses[0].message} - {i !== array.length - 1 ?
: null} + {i !== array.length - 1 ?
: null} ))} diff --git a/lib/gui/app/components/source-selector/source-selector.tsx b/lib/gui/app/components/source-selector/source-selector.tsx index 5d2270c7..50050213 100644 --- a/lib/gui/app/components/source-selector/source-selector.tsx +++ b/lib/gui/app/components/source-selector/source-selector.tsx @@ -14,18 +14,18 @@ * limitations under the License. */ -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 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'; -import { uniqBy, isNil } from 'lodash'; -import * as path from 'path'; -import * as prettyBytes from 'pretty-bytes'; -import * as React from 'react'; -import { requestMetadata } from '../../app'; +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 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"; +import { uniqBy, isNil } from "lodash"; +import * as path from "path"; +import prettyBytes from "pretty-bytes"; +import * as React from "react"; +import { requestMetadata } from "../../app"; import { Flex, @@ -36,17 +36,17 @@ import { Input, Spinner, Link, -} from 'rendition'; -import styled from 'styled-components'; +} from "rendition"; +import styled from "styled-components"; -import * as errors from '../../../../shared/errors'; -import * as messages from '../../../../shared/messages'; -import * as supportedFormats from '../../../../shared/supported-formats'; -import * as selectionState from '../../models/selection-state'; -import { observe } from '../../models/store'; -import * as analytics from '../../modules/analytics'; -import * as exceptionReporter from '../../modules/exception-reporter'; -import * as osDialog from '../../os/dialog'; +import * as errors from "../../../../shared/errors"; +import * as messages from "../../../../shared/messages"; +import * as supportedFormats from "../../../../shared/supported-formats"; +import * as selectionState from "../../models/selection-state"; +import { observe } from "../../models/store"; +import * as analytics from "../../modules/analytics"; +import * as exceptionReporter from "../../modules/exception-reporter"; +import * as osDialog from "../../os/dialog"; import { ChangeButton, @@ -55,24 +55,24 @@ import { StepButton, StepNameButton, ScrollableFlex, -} from '../../styled-components'; -import { colors } from '../../theme'; -import { middleEllipsis } from '../../utils/middle-ellipsis'; -import { SVGIcon } from '../svg-icon/svg-icon'; +} from "../../styled-components"; +import { colors } from "../../theme"; +import { middleEllipsis } from "../../utils/middle-ellipsis"; +import { SVGIcon } from "../svg-icon/svg-icon"; -import ImageSvg from '../../../assets/image.svg'; -import SrcSvg from '../../../assets/src.svg'; -import { DriveSelector } from '../drive-selector/drive-selector'; -import { DrivelistDrive } from '../../../../shared/drive-constraints'; -import { isJson } from '../../../../shared/utils'; +import ImageSvg from "../../../assets/image.svg"; +import SrcSvg from "../../../assets/src.svg"; +import { DriveSelector } from "../drive-selector/drive-selector"; +import { DrivelistDrive } from "../../../../shared/drive-constraints"; +import { isJson } from "../../../../shared/utils"; import { SourceMetadata, Authentication, Source, -} from '../../../../shared/typings/source-selector'; -import * as i18next from 'i18next'; +} from "../../../../shared/typings/source-selector"; +import * as i18next from "i18next"; -const recentUrlImagesKey = 'recentUrlImages'; +const recentUrlImagesKey = "recentUrlImages"; function normalizeRecentUrlImages(urls: any[]): URL[] { if (!Array.isArray(urls)) { @@ -94,7 +94,7 @@ function normalizeRecentUrlImages(urls: any[]): URL[] { function getRecentUrlImages(): URL[] { let urls = []; try { - urls = JSON.parse(localStorage.getItem(recentUrlImagesKey) || '[]'); + urls = JSON.parse(localStorage.getItem(recentUrlImagesKey) || "[]"); } catch { // noop } @@ -107,7 +107,7 @@ function setRecentUrlImages(urls: URL[]) { } const isURL = (imagePath: string) => - imagePath.startsWith('https://') || imagePath.startsWith('http://'); + imagePath.startsWith("https://") || imagePath.startsWith("http://"); const Card = styled(BaseCard)` hr { @@ -136,7 +136,7 @@ function getState() { } function isString(value: any): value is string { - return typeof value === 'string'; + return typeof value === "string"; } const URLSelector = ({ @@ -146,12 +146,12 @@ const URLSelector = ({ done: (imageURL: string, auth?: Authentication) => void; cancel: () => void; }) => { - const [imageURL, setImageURL] = React.useState(''); + const [imageURL, setImageURL] = React.useState(""); const [recentImages, setRecentImages] = React.useState([]); const [loading, setLoading] = React.useState(false); const [showBasicAuth, setShowBasicAuth] = React.useState(false); - const [username, setUsername] = React.useState(''); - const [password, setPassword] = React.useState(''); + const [username, setUsername] = React.useState(""); + const [password, setPassword] = React.useState(""); React.useEffect(() => { const fetchRecentUrlImages = async () => { const recentUrlImages: URL[] = await getRecentUrlImages(); @@ -165,7 +165,7 @@ const URLSelector = ({ primaryButtonProps={{ disabled: loading || !imageURL, }} - action={loading ? : i18next.t('ok')} + action={loading ? : i18next.t("ok")} done={async () => { setLoading(true); const urlStrings = recentImages.map((url: URL) => url.href); @@ -179,13 +179,13 @@ const URLSelector = ({ }} > - + - {i18next.t('source.useSourceURL')} + {i18next.t("source.useSourceURL")} ) => setImageURL(evt.target.value) @@ -197,8 +197,8 @@ const URLSelector = ({ fontSize="14px" onClick={() => { if (showBasicAuth) { - setUsername(''); - setPassword(''); + setUsername(""); + setPassword(""); } setShowBasicAuth(!showBasicAuth); }} @@ -210,7 +210,7 @@ const URLSelector = ({ {!showBasicAuth && ( )} - {i18next.t('source.auth')} + {i18next.t("source.auth")} {showBasicAuth && ( @@ -218,7 +218,7 @@ const URLSelector = ({ ) => setUsername(evt.target.value) @@ -226,7 +226,7 @@ const URLSelector = ({ /> ) => setPassword(evt.target.value) @@ -249,10 +249,10 @@ const URLSelector = ({ setImageURL(recent.href); }} style={{ - overflowWrap: 'break-word', + overflowWrap: "break-word", }} > - {recent.pathname.split('/').pop()} - {recent.href} + {recent.pathname.split("/").pop()} - {recent.href} )) .reverse()} @@ -284,7 +284,7 @@ const FlowSelector = styled( > {flow.label} - ), + ) )` border-radius: 24px; color: rgba(255, 255, 255, 0.7); @@ -349,20 +349,20 @@ export class SourceSelector extends React.Component< this.unsubscribe = observe(() => { this.setState(getState()); }); - ipcRenderer.on('select-image', this.onSelectImage); - ipcRenderer.send('source-selector-ready'); + ipcRenderer.on("select-image", this.onSelectImage); + ipcRenderer.send("source-selector-ready"); } public componentWillUnmount() { this.unsubscribe?.(); - ipcRenderer.removeListener('select-image', this.onSelectImage); + ipcRenderer.removeListener("select-image", this.onSelectImage); } private async onSelectImage(_event: IpcRendererEvent, imagePath: string) { this.setState({ imageLoading: true }); await this.selectSource( imagePath, - isURL(this.normalizeImagePath(imagePath)) ? 'Http' : 'File', + isURL(this.normalizeImagePath(imagePath)) ? "Http" : "File" ).promise; this.setState({ imageLoading: false }); } @@ -376,7 +376,7 @@ export class SourceSelector extends React.Component< } private reselectSource() { - analytics.logEvent('Reselect image', { + analytics.logEvent("Reselect image", { previousImage: selectionState.getImage(), }); @@ -386,7 +386,7 @@ export class SourceSelector extends React.Component< private selectSource( selected: string | DrivelistDrive, SourceType: Source, - auth?: Authentication, + auth?: Authentication ): { promise: Promise; cancel: () => void } { let cancelled = false; return { @@ -398,23 +398,23 @@ export class SourceSelector extends React.Component< let metadata: SourceMetadata | undefined; if (isString(selected)) { if ( - SourceType === 'Http' && + SourceType === "Http" && !isURL(this.normalizeImagePath(selected)) ) { this.handleError( - i18next.t('source.unsupportedProtocol'), + i18next.t("source.unsupportedProtocol"), selected, - messages.error.unsupportedProtocol(), + messages.error.unsupportedProtocol() ); return; } if (supportedFormats.looksLikeWindowsImage(selected)) { - analytics.logEvent('Possibly Windows image', { image: selected }); + analytics.logEvent("Possibly Windows image", { image: selected }); this.setState({ warning: { message: messages.warning.looksLikeWindowsImage(), - title: i18next.t('source.windowsImage'), + title: i18next.t("source.windowsImage"), }, }); } @@ -426,29 +426,29 @@ export class SourceSelector extends React.Component< metadata = await requestMetadata({ selected, SourceType, auth }); if (!metadata?.hasMBR && this.state.warning === null) { - analytics.logEvent('Missing partition table', { metadata }); + analytics.logEvent("Missing partition table", { metadata }); this.setState({ warning: { message: messages.warning.missingPartitionTable(), - title: i18next.t('source.partitionTable'), + title: i18next.t("source.partitionTable"), }, }); } } catch (error: any) { this.handleError( - i18next.t('source.errorOpen'), + i18next.t("source.errorOpen"), sourcePath, messages.error.openSource(sourcePath, error.message), - error, + error ); } } else { if (selected.partitionTableType === null) { - analytics.logEvent('Missing partition table', { selected }); + analytics.logEvent("Missing partition table", { selected }); this.setState({ warning: { message: messages.warning.driveMissingPartitionTable(), - title: i18next.t('source.partitionTable'), + title: i18next.t("source.partitionTable"), }, }); } @@ -456,8 +456,8 @@ export class SourceSelector extends React.Component< path: selected.device, displayName: selected.displayName, description: selected.displayName, - size: selected.size as SourceMetadata['size'], - SourceType: 'BlockDevice', + size: selected.size as SourceMetadata["size"], + SourceType: "BlockDevice", drive: selected, }; } @@ -466,7 +466,7 @@ export class SourceSelector extends React.Component< metadata.auth = auth; metadata.SourceType = SourceType; selectionState.selectSource(metadata); - analytics.logEvent('Select image', { + analytics.logEvent("Select image", { // An easy way so we can quickly identify if we're making use of // certain features without printing pages of text to DevTools. image: { @@ -484,7 +484,7 @@ export class SourceSelector extends React.Component< title: string, sourcePath: string, description: string, - error?: Error, + error?: Error ) { const imageError = errors.createUserError({ title, @@ -499,7 +499,7 @@ export class SourceSelector extends React.Component< } private async openImageSelector() { - analytics.logEvent('Open image selector'); + analytics.logEvent("Open image selector"); this.setState({ imageSelectorOpen: true }); try { @@ -507,10 +507,10 @@ export class SourceSelector extends React.Component< // Avoid analytics and selection state changes // if no file was resolved from the dialog. if (!imagePath) { - analytics.logEvent('Image selector closed'); + analytics.logEvent("Image selector closed"); return; } - await this.selectSource(imagePath, 'File').promise; + await this.selectSource(imagePath, "File").promise; } catch (error: any) { exceptionReporter.report(error); } finally { @@ -521,12 +521,12 @@ export class SourceSelector extends React.Component< private async onDrop(event: React.DragEvent) { const [file] = event.dataTransfer.files; if (file) { - await this.selectSource(file.path, 'File').promise; + await this.selectSource(file.path, "File").promise; } } private openURLSelector() { - analytics.logEvent('Open image URL selector'); + analytics.logEvent("Open image URL selector"); this.setState({ showURLSelector: true, @@ -534,7 +534,7 @@ export class SourceSelector extends React.Component< } private openDriveSelector() { - analytics.logEvent('Open drive selector'); + analytics.logEvent("Open drive selector"); this.setState({ showDriveSelector: true, @@ -552,7 +552,7 @@ export class SourceSelector extends React.Component< } private showSelectedImageDetails() { - analytics.logEvent('Show selected image tooltip', { + analytics.logEvent("Show selected image tooltip", { imagePath: selectionState.getImage()?.path, }); @@ -590,11 +590,11 @@ export class SourceSelector extends React.Component< // noop }; image.name = image.description || image.name; - const imagePath = image.path || image.displayName || ''; + const imagePath = image.path || image.displayName || ""; const imageBasename = path.basename(imagePath); - const imageName = image.name || ''; + const imageName = image.name || ""; const imageSize = image.size; - const imageLogo = image.logo || ''; + const imageLogo = image.logo || ""; return ( <> @@ -634,7 +634,7 @@ export class SourceSelector extends React.Component< mb={14} onClick={() => this.reselectSource()} > - {i18next.t('cancel')} + {i18next.t("cancel")} )} {!isNil(imageSize) && !imageLoading && ( @@ -649,7 +649,7 @@ export class SourceSelector extends React.Component< key="Flash from file" flow={{ onClick: () => this.openImageSelector(), - label: i18next.t('source.fromFile'), + label: i18next.t("source.fromFile"), icon: , }} onMouseEnter={() => this.setDefaultFlowActive(false)} @@ -659,7 +659,7 @@ export class SourceSelector extends React.Component< key="Flash from URL" flow={{ onClick: () => this.openURLSelector(), - label: i18next.t('source.fromURL'), + label: i18next.t("source.fromURL"), icon: , }} onMouseEnter={() => this.setDefaultFlowActive(false)} @@ -669,7 +669,7 @@ export class SourceSelector extends React.Component< key="Clone drive" flow={{ onClick: () => this.openDriveSelector(), - label: i18next.t('source.clone'), + label: i18next.t("source.clone"), icon: , }} onMouseEnter={() => this.setDefaultFlowActive(false)} @@ -682,15 +682,15 @@ export class SourceSelector extends React.Component< {this.state.warning != null && ( - {' '} + {" "} {this.state.warning.title} } - action={i18next.t('continue')} + action={i18next.t("continue")} cancel={() => { this.setState({ warning: null }); this.reselectSource(); @@ -708,17 +708,17 @@ export class SourceSelector extends React.Component< {showImageDetails && ( { this.setState({ showImageDetails: false }); }} > - {i18next.t('source.name')} + {i18next.t("source.name")} {imageName || imageBasename} - {i18next.t('source.path')} + {i18next.t("source.path")} {imagePath} @@ -736,13 +736,13 @@ export class SourceSelector extends React.Component< // Avoid analytics and selection state changes // if no file was resolved from the dialog. if (!imageURL) { - analytics.logEvent('URL selector closed'); + analytics.logEvent("URL selector closed"); } else { let promise; ({ promise, cancel: cancelURLSelection } = this.selectSource( imageURL, - 'Http', - auth, + "Http", + auth )); await promise; } @@ -757,14 +757,14 @@ export class SourceSelector extends React.Component< } cancel={(originalList) => { if (originalList.length) { const originalSource = originalList[0]; if (selectionImage?.drive?.device !== originalSource.device) { - this.selectSource(originalSource, 'BlockDevice'); + this.selectSource(originalSource, "BlockDevice"); } } else { selectionState.deselectImage(); @@ -779,7 +779,7 @@ export class SourceSelector extends React.Component< ) { return selectionState.deselectImage(); } - this.selectSource(drive, 'BlockDevice'); + this.selectSource(drive, "BlockDevice"); } }} /> diff --git a/lib/gui/app/components/target-selector/target-selector-button.tsx b/lib/gui/app/components/target-selector/target-selector-button.tsx index 28f14099..2272df4f 100644 --- a/lib/gui/app/components/target-selector/target-selector-button.tsx +++ b/lib/gui/app/components/target-selector/target-selector-button.tsx @@ -14,25 +14,25 @@ * limitations under the License. */ -import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg'; -import * as React from 'react'; -import { Flex, FlexProps, Txt } from 'rendition'; +import ExclamationTriangleSvg from "@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg"; +import * as React from "react"; +import { Flex, FlexProps, Txt } from "rendition"; import { getDriveImageCompatibilityStatuses, DriveStatus, -} from '../../../../shared/drive-constraints'; -import { compatibility, warning } from '../../../../shared/messages'; -import * as prettyBytes from 'pretty-bytes'; -import { getImage, getSelectedDrives } from '../../models/selection-state'; +} from "../../../../shared/drive-constraints"; +import { compatibility, warning } from "../../../../shared/messages"; +import prettyBytes from "pretty-bytes"; +import { getImage, getSelectedDrives } from "../../models/selection-state"; import { ChangeButton, DetailsText, StepButton, StepNameButton, -} from '../../styled-components'; -import { middleEllipsis } from '../../utils/middle-ellipsis'; -import * as i18next from 'i18next'; +} from "../../styled-components"; +import { middleEllipsis } from "../../utils/middle-ellipsis"; +import * as i18next from "i18next"; interface TargetSelectorProps { targets: any[]; @@ -53,7 +53,7 @@ function getDriveWarning(status: DriveStatus) { case compatibility.system(): return warning.systemDrive(); default: - return ''; + return ""; } } @@ -64,12 +64,12 @@ const DriveCompatibilityWarning = ({ warnings: string[]; } & FlexProps) => { const systemDrive = warnings.find( - (message) => message === warning.systemDrive(), + (message) => message === warning.systemDrive() ); return ( - + @@ -84,7 +84,7 @@ export function TargetSelectorButton(props: TargetSelectorProps) { const warnings = getDriveImageCompatibilityStatuses( target, getImage(), - true, + true ).map(getDriveWarning); return ( <> @@ -96,7 +96,7 @@ export function TargetSelectorButton(props: TargetSelectorProps) { {!props.flashing && ( - {i18next.t('target.change')} + {i18next.t("target.change")} )} {target.size != null && ( @@ -112,13 +112,13 @@ export function TargetSelectorButton(props: TargetSelectorProps) { const warnings = getDriveImageCompatibilityStatuses( target, getImage(), - true, + true ).map(getDriveWarning); targetsTemplate.push( @@ -127,17 +127,17 @@ export function TargetSelectorButton(props: TargetSelectorProps) { ) : null} {middleEllipsis(target.description, 14)} {target.size != null && {prettyBytes(target.size)}} - , + ); } return ( <> - {targets.length} {i18next.t('target.targets')} + {targets.length} {i18next.t("target.targets")} {!props.flashing && ( - {i18next.t('target.change')} + {i18next.t("target.change")} )} {targetsTemplate} @@ -152,7 +152,7 @@ export function TargetSelectorButton(props: TargetSelectorProps) { disabled={props.disabled} onClick={props.openDriveSelector} > - {i18next.t('target.selectTarget')} + {i18next.t("target.selectTarget")} ); } diff --git a/lib/gui/app/modules/progress-status.ts b/lib/gui/app/modules/progress-status.ts index 32d492d9..d6b3ddf1 100644 --- a/lib/gui/app/modules/progress-status.ts +++ b/lib/gui/app/modules/progress-status.ts @@ -14,8 +14,8 @@ * limitations under the License. */ -import * as prettyBytes from 'pretty-bytes'; -import * as i18next from 'i18next'; +import prettyBytes from "pretty-bytes"; +import * as i18next from "i18next"; export interface FlashState { active: number; @@ -23,61 +23,61 @@ export interface FlashState { percentage?: number; speed: number; position: number; - type?: 'decompressing' | 'flashing' | 'verifying'; + type?: "decompressing" | "flashing" | "verifying"; } export function fromFlashState({ type, percentage, position, -}: Pick): { +}: Pick): { status: string; position?: string; } { if (type === undefined) { - return { status: i18next.t('progress.starting') }; - } else if (type === 'decompressing') { + return { status: i18next.t("progress.starting") }; + } else if (type === "decompressing") { if (percentage == null) { - return { status: i18next.t('progress.decompressing') }; + return { status: i18next.t("progress.decompressing") }; } else { return { position: `${percentage}%`, - status: i18next.t('progress.decompressing'), + status: i18next.t("progress.decompressing"), }; } - } else if (type === 'flashing') { + } else if (type === "flashing") { if (percentage != null) { if (percentage < 100) { return { position: `${percentage}%`, - status: i18next.t('progress.flashing'), + status: i18next.t("progress.flashing"), }; } else { - return { status: i18next.t('progress.finishing') }; + return { status: i18next.t("progress.finishing") }; } } else { return { - status: i18next.t('progress.flashing'), - position: `${position ? prettyBytes(position) : ''}`, + status: i18next.t("progress.flashing"), + position: `${position ? prettyBytes(position) : ""}`, }; } - } else if (type === 'verifying') { + } else if (type === "verifying") { if (percentage == null) { - return { status: i18next.t('progress.verifying') }; + return { status: i18next.t("progress.verifying") }; } else if (percentage < 100) { return { position: `${percentage}%`, - status: i18next.t('progress.verifying'), + status: i18next.t("progress.verifying"), }; } else { - return { status: i18next.t('progress.finishing') }; + return { status: i18next.t("progress.finishing") }; } } - return { status: i18next.t('progress.failing') }; + return { status: i18next.t("progress.failing") }; } export function titleFromFlashState( - state: Pick, + state: Pick ): string { const { status, position } = fromFlashState(state); if (position !== undefined) { diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index 47401463..81101258 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/lib/gui/app/pages/main/MainPage.tsx @@ -18,7 +18,7 @@ import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/cog.svg'; import QuestionCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg'; import * as path from 'path'; -import * as prettyBytes from 'pretty-bytes'; +import prettyBytes from 'pretty-bytes'; import * as React from 'react'; import { Flex } from 'rendition'; import styled from 'styled-components'; diff --git a/lib/shared/messages.ts b/lib/shared/messages.ts index e9bf9609..1a53d2ec 100644 --- a/lib/shared/messages.ts +++ b/lib/shared/messages.ts @@ -14,19 +14,19 @@ * limitations under the License. */ -import { Dictionary } from 'lodash'; -import { outdent } from 'outdent'; -import * as prettyBytes from 'pretty-bytes'; -import '../gui/app/i18n'; -import * as i18next from 'i18next'; +import { Dictionary } from "lodash"; +import { outdent } from "outdent"; +import prettyBytes from "pretty-bytes"; +import "../gui/app/i18n"; +import * as i18next from "i18next"; export const progress: Dictionary<(quantity: number) => string> = { successful: (quantity: number) => { - return i18next.t('message.flashSucceed', { count: quantity }); + return i18next.t("message.flashSucceed", { count: quantity }); }, failed: (quantity: number) => { - return i18next.t('message.flashFail', { count: quantity }); + return i18next.t("message.flashFail", { count: quantity }); }, }; @@ -34,122 +34,122 @@ export const info = { flashComplete: ( imageBasename: string, [drive]: [{ description: string; displayName: string }], - { failed, successful }: { failed: number; successful: number }, + { failed, successful }: { failed: number; successful: number } ) => { const targets = []; if (failed + successful === 1) { targets.push( - i18next.t('message.toDrive', { + i18next.t("message.toDrive", { description: drive.description, name: drive.displayName, - }), + }) ); } else { if (successful) { targets.push( - i18next.t('message.toTarget', { + i18next.t("message.toTarget", { count: successful, num: successful, - }), + }) ); } if (failed) { targets.push( - i18next.t('message.andFailTarget', { count: failed, num: failed }), + i18next.t("message.andFailTarget", { count: failed, num: failed }) ); } } - return i18next.t('message.succeedTo', { + return i18next.t("message.succeedTo", { name: imageBasename, - target: targets.join(' '), + target: targets.join(" "), }); }, }; export const compatibility = { sizeNotRecommended: () => { - return i18next.t('message.sizeNotRecommended'); + return i18next.t("message.sizeNotRecommended"); }, tooSmall: () => { - return i18next.t('message.tooSmall'); + return i18next.t("message.tooSmall"); }, locked: () => { - return i18next.t('message.locked'); + return i18next.t("message.locked"); }, system: () => { - return i18next.t('message.system'); + return i18next.t("message.system"); }, containsImage: () => { - return i18next.t('message.containsImage'); + return i18next.t("message.containsImage"); }, // The drive is large and therefore likely not a medium you want to write to. largeDrive: () => { - return i18next.t('message.largeDrive'); + return i18next.t("message.largeDrive"); }, } as const; export const warning = { tooSmall: (source: { size: number }, target: { size: number }) => { - return outdent({ newline: ' ' })` - ${i18next.t('message.sourceLarger', { + return outdent({ newline: " " })` + ${i18next.t("message.sourceLarger", { byte: prettyBytes(source.size - target.size), })} `; }, exitWhileFlashing: () => { - return i18next.t('message.exitWhileFlashing'); + return i18next.t("message.exitWhileFlashing"); }, looksLikeWindowsImage: () => { - return i18next.t('message.looksLikeWindowsImage'); + return i18next.t("message.looksLikeWindowsImage"); }, missingPartitionTable: () => { - return i18next.t('message.missingPartitionTable', { - type: i18next.t('message.image'), + return i18next.t("message.missingPartitionTable", { + type: i18next.t("message.image"), }); }, driveMissingPartitionTable: () => { - return i18next.t('message.missingPartitionTable', { - type: i18next.t('message.drive'), + return i18next.t("message.missingPartitionTable", { + type: i18next.t("message.drive"), }); }, largeDriveSize: () => { - return i18next.t('message.largeDriveSize'); + return i18next.t("message.largeDriveSize"); }, systemDrive: () => { - return i18next.t('message.systemDrive'); + return i18next.t("message.systemDrive"); }, sourceDrive: () => { - return i18next.t('message.sourceDrive'); + return i18next.t("message.sourceDrive"); }, }; export const error = { notEnoughSpaceInDrive: () => { - return i18next.t('message.noSpace'); + return i18next.t("message.noSpace"); }, genericFlashError: (err: Error) => { - return i18next.t('message.genericFlashError', { error: err.message }); + return i18next.t("message.genericFlashError", { error: err.message }); }, validation: () => { - return i18next.t('message.validation'); + return i18next.t("message.validation"); }, openSource: (sourceName: string, errorMessage: string) => { - return i18next.t('message.openError', { + return i18next.t("message.openError", { source: sourceName, error: errorMessage, }); @@ -157,37 +157,37 @@ export const error = { flashFailure: ( imageBasename: string, - drives: Array<{ description: string; displayName: string }>, + drives: Array<{ description: string; displayName: string }> ) => { const target = drives.length === 1 - ? i18next.t('message.toDrive', { + ? i18next.t("message.toDrive", { description: drives[0].description, name: drives[0].displayName, }) - : i18next.t('message.toTarget', { + : i18next.t("message.toTarget", { count: drives.length, num: drives.length, }); - return i18next.t('message.flashError', { + return i18next.t("message.flashError", { image: imageBasename, targets: target, }); }, driveUnplugged: () => { - return i18next.t('message.unplug'); + return i18next.t("message.unplug"); }, inputOutput: () => { - return i18next.t('message.cannotWrite'); + return i18next.t("message.cannotWrite"); }, childWriterDied: () => { - return i18next.t('message.childWriterDied'); + return i18next.t("message.childWriterDied"); }, unsupportedProtocol: () => { - return i18next.t('message.badProtocol'); + return i18next.t("message.badProtocol"); }, }; diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 4fe71c82..92bdb1e1 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -57,7 +57,7 @@ "path-is-inside": "1.0.2", "pkg": "^5.8.1", "pnp-webpack-plugin": "1.7.0", - "pretty-bytes": "5.6.0", + "pretty-bytes": "6.1.1", "react": "16.8.5", "react-dom": "16.8.5", "react-i18next": "11.18.6", @@ -14733,11 +14733,12 @@ } }, "node_modules/pretty-bytes": { - "version": "5.6.0", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz", + "integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==", "dev": true, - "license": "MIT", "engines": { - "node": ">=6" + "node": "^14.13.1 || >=16.0.0" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" @@ -28543,7 +28544,9 @@ "dev": true }, "pretty-bytes": { - "version": "5.6.0", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz", + "integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==", "dev": true }, "prismjs": { diff --git a/package.json b/package.json index 0835f9e7..1774eb9f 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "path-is-inside": "1.0.2", "pkg": "^5.8.1", "pnp-webpack-plugin": "1.7.0", - "pretty-bytes": "5.6.0", + "pretty-bytes": "6.1.1", "react": "16.8.5", "react-dom": "16.8.5", "react-i18next": "11.18.6",