From d952d5129e8468d003514aba98a29481ba26b26a Mon Sep 17 00:00:00 2001 From: Edwin Joassart Date: Thu, 19 Oct 2023 14:32:23 +0200 Subject: [PATCH] patch: fix styles --- .../drive-selector/drive-selector.tsx | 104 ++++----- .../drive-status-warning-modal.tsx | 38 ++-- .../flash-results/flash-results.tsx | 84 ++++---- .../source-selector/source-selector.tsx | 200 +++++++++--------- .../target-selector-button.tsx | 44 ++-- lib/gui/app/modules/progress-status.ts | 38 ++-- lib/shared/messages.ts | 88 ++++---- 7 files changed, 298 insertions(+), 298 deletions(-) diff --git a/lib/gui/app/components/drive-selector/drive-selector.tsx b/lib/gui/app/components/drive-selector/drive-selector.tsx index 1126e00c..9e9785cb 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/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"; -import { Flex, ModalProps, Txt, Badge, Link, TableColumn } from "rendition"; -import styled from "styled-components"; +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'; +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 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,7 +70,7 @@ 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) => ( @@ -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, @@ -441,7 +441,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[]) => { @@ -453,14 +453,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) { @@ -490,7 +490,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] @@ -516,7 +516,7 @@ export class DriveSelector extends React.Component< - {i18next.t("drives.showHidden", { + {i18next.t('drives.showHidden', { num: numberOfHiddenSystemDrives, })} @@ -526,8 +526,8 @@ export class DriveSelector extends React.Component< )} {this.props.showWarnings && hasSystemDrives ? ( - - {i18next.t("drives.systemDriveDanger")} + + {i18next.t('drives.systemDriveDanger')} ) : null} @@ -547,13 +547,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 281a4b28..fe98878f 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/triangle-exclamation.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/triangle-exclamation.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 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/flash-results/flash-results.tsx b/lib/gui/app/components/flash-results/flash-results.tsx index b0aebde2..4a9af50a 100644 --- a/lib/gui/app/components/flash-results/flash-results.tsx +++ b/lib/gui/app/components/flash-results/flash-results.tsx @@ -14,29 +14,29 @@ * limitations under the License. */ -import CircleSvg from "@fortawesome/fontawesome-free/svgs/solid/circle.svg"; -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"; +import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg'; +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'; -import { progress } from "../../../../shared/messages"; -import { bytesToMegabytes } from "../../../../shared/units"; +import { progress } from '../../../../shared/messages'; +import { bytesToMegabytes } from '../../../../shared/units'; -import FlashSvg from "../../../assets/flash.svg"; -import { getDrives } from "../../models/available-drives"; -import { resetState } from "../../models/flash-state"; -import * as selection from "../../models/selection-state"; -import { middleEllipsis } from "../../utils/middle-ellipsis"; -import { Modal, Table } from "../../styled-components"; -import * as i18next from "i18next"; +import FlashSvg from '../../../assets/flash.svg'; +import { getDrives } from '../../models/available-drives'; +import { resetState } from '../../models/flash-state'; +import * as selection from '../../models/selection-state'; +import { middleEllipsis } from '../../utils/middle-ellipsis'; +import { Modal, Table } from '../../styled-components'; +import * as i18next from 'i18next'; const ErrorsTable = styled((props) => {...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'] { &:first-child { width: 30%; } @@ -58,11 +58,11 @@ const DoneIcon = (props: { allFailed: boolean; }) => { const svgProps = { - width: "28px", + width: '28px', fill: props.color, style: { - marginTop: "-25px", - marginLeft: "13px", + marginTop: '-25px', + marginLeft: '13px', zIndex: 1, }, }; @@ -82,21 +82,21 @@ export interface FlashError extends Error { function formattedErrors(errors: FlashError[]) { return errors .map((error) => `${error.device}: ${error.message || error.code}`) - .join("\n"); + .join('\n'); } const columns: Array> = [ { - field: "description", - label: i18next.t("flash.target"), + field: 'description', + label: i18next.t('flash.target'), }, { - field: "device", - label: i18next.t("flash.location"), + field: 'device', + label: i18next.t('flash.location'), }, { - field: "message", - label: i18next.t("flash.error"), + field: 'message', + label: i18next.t('flash.error'), render: (message: string, { code }: FlashError) => { return message ?? code; }, @@ -118,7 +118,7 @@ function getEffectiveSpeed(results: { export function FlashResults({ goToMain, - image = "", + image = '', errors, results, skip, @@ -142,7 +142,7 @@ export function FlashResults({ const allFailed = !skip && results?.devices?.successful === 0; const someFailed = results?.devices?.failed !== 0 || errors?.length !== 0; const effectiveSpeed = bytesToMegabytes(getEffectiveSpeed(results)).toFixed( - 1 + 1, ); return ( @@ -158,16 +158,16 @@ export function FlashResults({ {middleEllipsis(image, 24)} {allFailed - ? i18next.t("flash.flashFailed") - : i18next.t("flash.flashCompleted")} + ? i18next.t('flash.flashFailed') + : i18next.t('flash.flashCompleted')} - {skip ? {i18next.t("flash.skip")} : null} + {skip ? {i18next.t('flash.skip')} : null} {results.devices.successful !== 0 ? ( @@ -191,7 +191,7 @@ export function FlashResults({ {progress.failed(errors.length)} setShowErrorsInfo(true)}> - {i18next.t("flash.moreInfo")} + {i18next.t('flash.moreInfo')} ) : null} @@ -200,11 +200,11 @@ export function FlashResults({ fontSize="10px" style={{ fontWeight: 500, - textAlign: "center", + textAlign: 'center', }} - tooltip={i18next.t("flash.speedTip")} + tooltip={i18next.t('flash.speedTip')} > - {i18next.t("flash.speed", { speed: effectiveSpeed })} + {i18next.t('flash.speed', { speed: effectiveSpeed })} )} @@ -214,11 +214,11 @@ export function FlashResults({ titleElement={ - {i18next.t("failedTarget")} + {i18next.t('failedTarget')} } - action={i18next.t("failedRetry")} + action={i18next.t('failedRetry')} cancel={() => setShowErrorsInfo(false)} done={() => { setShowErrorsInfo(false); @@ -229,7 +229,7 @@ export function FlashResults({ return drive.device; }) .filter((driveDevice) => - errors.some((error) => error.device === driveDevice) + errors.some((error) => error.device === driveDevice), ) .forEach((driveDevice) => selection.selectDrive(driveDevice)); goToMain(); diff --git a/lib/gui/app/components/source-selector/source-selector.tsx b/lib/gui/app/components/source-selector/source-selector.tsx index de25d84c..8aefeea4 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/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"; -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 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/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'; +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 6c6822a0..5e11c410 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/triangle-exclamation.svg"; -import * as React from "react"; -import { Flex, FlexProps, Txt } from "rendition"; +import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/triangle-exclamation.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 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 d6b3ddf1..b0495634 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 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/shared/messages.ts b/lib/shared/messages.ts index 1a53d2ec..b92fb04d 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 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'); }, };