From b7f8c8368c1e79b15725edf5580ca7385d397dc7 Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Mon, 24 Aug 2020 15:40:25 +0200 Subject: [PATCH 01/11] Fix settings button not being clickable Change-type: patch --- lib/gui/app/css/main.css | 5 --- lib/gui/app/pages/main/MainPage.tsx | 53 ++++++++++++++++------------- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/lib/gui/app/css/main.css b/lib/gui/app/css/main.css index 03ab634d..b5350722 100644 --- a/lib/gui/app/css/main.css +++ b/lib/gui/app/css/main.css @@ -49,11 +49,6 @@ body { -webkit-overflow-scrolling: touch; } -/* Allow window to be dragged from header */ -#app-header { - -webkit-app-region: drag; -} - /* Prevent blue outline */ a:focus, input:focus, diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index efecb712..09d257f5 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/lib/gui/app/pages/main/MainPage.tsx @@ -163,41 +163,42 @@ export class MainPage extends React.Component< return ( <> - - openExternal('https://www.balena.io/etcher?ref=etcher_footer') - } - tabIndex={100} - /> + + + + openExternal('https://www.balena.io/etcher?ref=etcher_footer') + } + tabIndex={100} + /> + - + } plain tabIndex={5} onClick={() => this.setState({ hideSettings: false })} + style={{ + // Make touch events click instead of dragging + '-webkit-app-region': 'no-drag', + }} /> {!settings.getSync('disableExternalLinks') && ( )} From 34489f0d6667bcde4382ce20e5b4b9e4d31912ce Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Mon, 24 Aug 2020 18:01:51 +0200 Subject: [PATCH 02/11] Update etcher-sdk to 4.1.25 Change-type: patch --- npm-shrinkwrap.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 977ff76c..51817821 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -6677,9 +6677,9 @@ "dev": true }, "etcher-sdk": { - "version": "4.1.24", - "resolved": "https://registry.npmjs.org/etcher-sdk/-/etcher-sdk-4.1.24.tgz", - "integrity": "sha512-lRAKhXuXD7y68eA+bHJJn4MJpncbybeoH7FaIlXTcISuzdh9lr8NlguKnxvxkX35v1sWN7Ke6REloQY7oqqlvQ==", + "version": "4.1.25", + "resolved": "https://registry.npmjs.org/etcher-sdk/-/etcher-sdk-4.1.25.tgz", + "integrity": "sha512-s/PG/ettyxKAYErTJ/Y9z4KpAxLLHCvaMVV8l7Srb0XIgL+uGLLA9QheHS6o/S4FWz2LevYavBgMN+sdDksyjw==", "dev": true, "requires": { "@balena/udif": "^1.1.0", @@ -16769,4 +16769,4 @@ "dev": true } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 70ccef65..051fb975 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "electron-notarize": "^1.0.0", "electron-rebuild": "^1.11.0", "electron-updater": "^4.3.2", - "etcher-sdk": "^4.1.24", + "etcher-sdk": "^4.1.25", "file-loader": "^6.0.0", "husky": "^4.2.5", "immutable": "^3.8.1", From 27e560c96130b328c120941dfc5bbb5f3ee73e96 Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Mon, 24 Aug 2020 18:04:43 +0200 Subject: [PATCH 03/11] Update rendition to ^18.4.1 Change-type: patch --- npm-shrinkwrap.json | 36 ++++++++++++++++++------------------ package.json | 2 +- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 51817821..72cf2485 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -2174,9 +2174,9 @@ } }, "@types/react-native": { - "version": "0.63.8", - "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.8.tgz", - "integrity": "sha512-QRwGFRTyGafRVTUS+0GYyJrlpmS3boyBaFI0ULSc+mh/lQNxrzbdQvoL2k5X7+t9hxyqA4dTQAlP6l0ir/fNJQ==", + "version": "0.63.9", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.9.tgz", + "integrity": "sha512-6ec/z9zjAkFH3rD1RYqbrA/Lj+jux6bumWCte4yRy3leyelTdqtmOd2Ph+86IXQQzsIArEMBwmraAbNQ0J3UAA==", "dev": true, "requires": { "@types/react": "*" @@ -7800,9 +7800,9 @@ } }, "grommet": { - "version": "2.14.0", - "resolved": "https://registry.npmjs.org/grommet/-/grommet-2.14.0.tgz", - "integrity": "sha512-G/LTkr+uFri4NUNQGJMx8TtWWe9+KSpIHCXC9WgRaICI73R3+BvhLSNSzWMQ6YIQC+7PJFtruebeWjdUqR3Ykw==", + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/grommet/-/grommet-2.15.0.tgz", + "integrity": "sha512-5TVbiLrMpZOoB9oZAqWVttj6lO4rcKqBW1rWr4iovTuyyfYYOUQbuNfcFtUqp+MdB0fsQ1Vvci4PiTBvhRJqHA==", "dev": true, "requires": { "grommet-icons": "^4.2.0", @@ -12821,9 +12821,9 @@ "optional": true }, "rendition": { - "version": "18.1.0", - "resolved": "https://registry.npmjs.org/rendition/-/rendition-18.1.0.tgz", - "integrity": "sha512-B65e7VJadU+cxtXOn4eGBg8wql57I376NfUYWiu4zs4sf8l6/0h+P6FctoRdrZGX8RRRMToGLHnVC+3411Tmiw==", + "version": "18.4.1", + "resolved": "https://registry.npmjs.org/rendition/-/rendition-18.4.1.tgz", + "integrity": "sha512-mV/0p+M8XR/Xa/ZFzgflZPHelpuONiTSa/CMMuHkmXR7vhF7tB2ORxLRc/DbymmdN6cWQwXAyA81t9TDAOhgVQ==", "dev": true, "requires": { "@fortawesome/fontawesome-svg-core": "^1.2.25", @@ -15030,9 +15030,9 @@ "dev": true }, "uglify-js": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.1.tgz", - "integrity": "sha512-RjxApKkrPJB6kjJxQS3iZlf///REXWYxYJxO/MpmlQzVkDWVI3PSnCBWezMecmTU/TRkNxrl8bmsfFQCp+LO+Q==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.2.tgz", + "integrity": "sha512-GXCYNwqoo0MbLARghYjxVBxDCnU0tLqN7IPLdHHbibCb1NI5zBkU2EPcy/GaVxc0BtTjqyGXJCINe6JMR2Dpow==", "dev": true }, "unbzip2-stream": { @@ -15079,9 +15079,9 @@ "dev": true }, "unified": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/unified/-/unified-9.1.0.tgz", - "integrity": "sha512-VXOv7Ic6twsKGJDeZQ2wwPqXs2hM0KNu5Hkg9WgAZbSD1pxhZ7p8swqg583nw1Je2fhwHy6U8aEjiI79x1gvag==", + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz", + "integrity": "sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==", "dev": true, "requires": { "bail": "^1.0.0", @@ -15543,9 +15543,9 @@ } }, "vfile-location": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.0.1.tgz", - "integrity": "sha512-yYBO06eeN/Ki6Kh1QAkgzYpWT1d3Qln+ZCtSbJqFExPl1S3y2qqotJQXoh6qEvl/jDlgpUJolBn3PItVnnZRqQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.1.0.tgz", + "integrity": "sha512-FCZ4AN9xMcjFIG1oGmZKo61PjwJHRVA+0/tPUP2ul4uIwjGGndIxavEMRpWn5p4xwm/ZsdXp9YNygf1ZyE4x8g==", "dev": true }, "vfile-message": { diff --git a/package.json b/package.json index 051fb975..6bcf30fd 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "react": "^16.8.5", "react-dom": "^16.8.5", "redux": "^4.0.5", - "rendition": "^18.1.0", + "rendition": "^18.4.1", "resin-corvus": "^2.0.5", "semver": "^7.3.2", "simple-progress-webpack-plugin": "^1.1.2", From fff9452509d16956b126f413f1f1ebe9c7c2289e Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Mon, 24 Aug 2020 19:46:46 +0200 Subject: [PATCH 04/11] Spinner for URL selector modal Changelog-entry: Spinner for URL selector modal Change-type: patch --- lib/gui/app/components/source-selector/source-selector.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/gui/app/components/source-selector/source-selector.tsx b/lib/gui/app/components/source-selector/source-selector.tsx index 2e15443e..92ac1c3f 100644 --- a/lib/gui/app/components/source-selector/source-selector.tsx +++ b/lib/gui/app/components/source-selector/source-selector.tsx @@ -30,6 +30,7 @@ import { Txt, Card as BaseCard, Input, + Spinner, } from 'rendition'; import styled from 'styled-components'; @@ -137,8 +138,9 @@ const URLSelector = ({ : 'OK'} done={async () => { setLoading(true); const urlStrings = recentImages.map((url: URL) => url.href); From 92dfdc6edd6f214aa50500d56f0ef6ecc062de44 Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Tue, 25 Aug 2020 11:51:28 +0200 Subject: [PATCH 05/11] URL selector cancel button cancels ongoing url selection Changelog-entry: URL selector cancel button cancels ongoing url selection Change-type: patch --- .../source-selector/source-selector.tsx | 188 ++++++++++-------- 1 file changed, 108 insertions(+), 80 deletions(-) diff --git a/lib/gui/app/components/source-selector/source-selector.tsx b/lib/gui/app/components/source-selector/source-selector.tsx index 92ac1c3f..7d8fa78f 100644 --- a/lib/gui/app/components/source-selector/source-selector.tsx +++ b/lib/gui/app/components/source-selector/source-selector.tsx @@ -290,7 +290,7 @@ export class SourceSelector extends React.Component< await this.selectImageByPath({ imagePath, SourceType: isURL ? sourceDestination.Http : sourceDestination.File, - }); + }).promise; } private reselectImage() { @@ -346,74 +346,97 @@ export class SourceSelector extends React.Component< } } - private async selectImageByPath({ imagePath, SourceType }: SourceOptions) { - try { - imagePath = await replaceWindowsNetworkDriveLetter(imagePath); - } catch (error) { - analytics.logException(error); - } + private selectImageByPath({ + imagePath, + SourceType, + }: SourceOptions): { promise: Promise; cancel: () => void } { + let cancelled = false; + return { + cancel: () => { + cancelled = true; + }, + promise: (async () => { + try { + imagePath = await replaceWindowsNetworkDriveLetter(imagePath); + } catch (error) { + analytics.logException(error); + } + if (cancelled) { + return; + } - let source; - if (SourceType === sourceDestination.File) { - source = new sourceDestination.File({ - path: imagePath, - }); - } else { - if ( - !imagePath.startsWith('https://') && - !imagePath.startsWith('http://') - ) { - const invalidImageError = errors.createUserError({ - title: 'Unsupported protocol', - description: messages.error.unsupportedProtocol(), - }); + let source; + if (SourceType === sourceDestination.File) { + source = new sourceDestination.File({ + path: imagePath, + }); + } else { + if ( + !imagePath.startsWith('https://') && + !imagePath.startsWith('http://') + ) { + const invalidImageError = errors.createUserError({ + title: 'Unsupported protocol', + description: messages.error.unsupportedProtocol(), + }); - osDialog.showError(invalidImageError); - analytics.logEvent('Unsupported protocol', { path: imagePath }); - return; - } - source = new sourceDestination.Http({ url: imagePath }); - } + osDialog.showError(invalidImageError); + analytics.logEvent('Unsupported protocol', { path: imagePath }); + return; + } + source = new sourceDestination.Http({ url: imagePath }); + } - try { - const innerSource = await source.getInnerSource(); - const metadata = (await innerSource.getMetadata()) as sourceDestination.Metadata & { - hasMBR: boolean; - partitions: MBRPartition[] | GPTPartition[]; - path: string; - extension: string; - }; - const partitionTable = await innerSource.getPartitionTable(); - if (partitionTable) { - metadata.hasMBR = true; - metadata.partitions = partitionTable.partitions; - } else { - metadata.hasMBR = false; - } - metadata.path = imagePath; - metadata.extension = path.extname(imagePath).slice(1); - this.selectImage(metadata); - this.afterSelected({ - imagePath, - SourceType, - }); - } catch (error) { - const imageError = errors.createUserError({ - title: 'Error opening image', - description: messages.error.openImage( - path.basename(imagePath), - error.message, - ), - }); - osDialog.showError(imageError); - analytics.logException(error); - } finally { - try { - await source.close(); - } catch (error) { - // Noop - } - } + try { + const innerSource = await source.getInnerSource(); + if (cancelled) { + return; + } + const metadata = (await innerSource.getMetadata()) as sourceDestination.Metadata & { + hasMBR: boolean; + partitions: MBRPartition[] | GPTPartition[]; + path: string; + extension: string; + }; + if (cancelled) { + return; + } + const partitionTable = await innerSource.getPartitionTable(); + if (cancelled) { + return; + } + if (partitionTable) { + metadata.hasMBR = true; + metadata.partitions = partitionTable.partitions; + } else { + metadata.hasMBR = false; + } + metadata.path = imagePath; + metadata.extension = path.extname(imagePath).slice(1); + this.selectImage(metadata); + this.afterSelected({ + imagePath, + SourceType, + }); + } catch (error) { + const imageError = errors.createUserError({ + title: 'Error opening image', + description: messages.error.openImage( + path.basename(imagePath), + error.message, + ), + }); + osDialog.showError(imageError); + analytics.logException(error); + } finally { + try { + await source.close(); + } catch (error) { + // Noop + } + } + })(), + }; } private async openImageSelector() { @@ -427,22 +450,22 @@ export class SourceSelector extends React.Component< analytics.logEvent('Image selector closed'); return; } - this.selectImageByPath({ + await this.selectImageByPath({ imagePath, SourceType: sourceDestination.File, - }); + }).promise; } catch (error) { exceptionReporter.report(error); } } - private onDrop(event: React.DragEvent) { + private async onDrop(event: React.DragEvent) { const [file] = event.dataTransfer.files; if (file) { - this.selectImageByPath({ + await this.selectImageByPath({ imagePath: file.path, SourceType: sourceDestination.File, - }); + }).promise; } } @@ -486,6 +509,9 @@ export class SourceSelector extends React.Component< const imageName = selectionState.getImageName(); const imageSize = selectionState.getImageSize(); const imageLogo = selectionState.getImageLogo(); + let cancelURLSelection = () => { + // noop + }; return ( <> @@ -587,6 +613,7 @@ export class SourceSelector extends React.Component< {showURLSelector && ( { + cancelURLSelection(); this.setState({ showURLSelector: false, }); @@ -596,16 +623,17 @@ export class SourceSelector extends React.Component< // if no file was resolved from the dialog. if (!imageURL) { analytics.logEvent('URL selector closed'); - this.setState({ - showURLSelector: false, - }); - return; + } else { + let promise; + ({ + promise, + cancel: cancelURLSelection, + } = this.selectImageByPath({ + imagePath: imageURL, + SourceType: sourceDestination.Http, + })); + await promise; } - - await this.selectImageByPath({ - imagePath: imageURL, - SourceType: sourceDestination.Http, - }); this.setState({ showURLSelector: false, }); From 55cafb92681f24dc08d91ad5b5ab41528871b062 Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Tue, 25 Aug 2020 13:03:40 +0200 Subject: [PATCH 06/11] Update etcher-sdk to 4.1.26 Changelog-entry: Update etcher-sdk to 4.1.26 Change-type: patch --- npm-shrinkwrap.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 72cf2485..12f74cfb 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -6677,9 +6677,9 @@ "dev": true }, "etcher-sdk": { - "version": "4.1.25", - "resolved": "https://registry.npmjs.org/etcher-sdk/-/etcher-sdk-4.1.25.tgz", - "integrity": "sha512-s/PG/ettyxKAYErTJ/Y9z4KpAxLLHCvaMVV8l7Srb0XIgL+uGLLA9QheHS6o/S4FWz2LevYavBgMN+sdDksyjw==", + "version": "4.1.26", + "resolved": "https://registry.npmjs.org/etcher-sdk/-/etcher-sdk-4.1.26.tgz", + "integrity": "sha512-0Mb2EVoBn5dZdXer2sjINkvsccbfSYwm3Bgv0sYARyLazim+BljmsIFV9bNg8jmM8/h/Qxk+xLSJAyyOiSKyiA==", "dev": true, "requires": { "@balena/udif": "^1.1.0", diff --git a/package.json b/package.json index 6bcf30fd..2498a380 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "electron-notarize": "^1.0.0", "electron-rebuild": "^1.11.0", "electron-updater": "^4.3.2", - "etcher-sdk": "^4.1.25", + "etcher-sdk": "^4.1.26", "file-loader": "^6.0.0", "husky": "^4.2.5", "immutable": "^3.8.1", From a17a919c37603d61fa6fe43229c285967a938722 Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Tue, 25 Aug 2020 19:18:02 +0200 Subject: [PATCH 07/11] Remove unused SafeWebvuew.refreshNow property Change-type: patch --- lib/gui/app/components/safe-webview/safe-webview.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/gui/app/components/safe-webview/safe-webview.tsx b/lib/gui/app/components/safe-webview/safe-webview.tsx index 961acc00..614ae11d 100644 --- a/lib/gui/app/components/safe-webview/safe-webview.tsx +++ b/lib/gui/app/components/safe-webview/safe-webview.tsx @@ -58,8 +58,6 @@ const API_VERSION = '2'; interface SafeWebviewProps { // The website source URL src: string; - // @summary Refresh the webview - refreshNow?: boolean; // Webview lifecycle event onWebviewShow?: (isWebviewShowing: boolean) => void; style?: React.CSSProperties; From 8ed5ff25a5bafd73810f902a7974462538d16b2d Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Tue, 25 Aug 2020 19:19:01 +0200 Subject: [PATCH 08/11] Remove unused FeaturedProject.state.show Change-type: patch --- .../featured-project/featured-project.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/lib/gui/app/components/featured-project/featured-project.tsx b/lib/gui/app/components/featured-project/featured-project.tsx index 9ed36346..11e1a7be 100644 --- a/lib/gui/app/components/featured-project/featured-project.tsx +++ b/lib/gui/app/components/featured-project/featured-project.tsx @@ -28,10 +28,9 @@ interface FeaturedProjectProps { interface FeaturedProjectState { endpoint: string | null; - show: boolean; } -export class FeaturedProject extends React.Component< +export class FeaturedProject extends React.PureComponent< FeaturedProjectProps, FeaturedProjectState > { @@ -39,7 +38,6 @@ export class FeaturedProject extends React.Component< super(props); this.state = { endpoint: null, - show: false, }; } @@ -58,16 +56,8 @@ export class FeaturedProject extends React.Component< } public render() { - const { style = {} } = this.props; return this.state.endpoint ? ( - + ) : null; } } From a485d2b4df990a4e31b39c54be303c3b019e0ec1 Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Tue, 25 Aug 2020 23:21:21 +0200 Subject: [PATCH 09/11] Remove FeaturedProject class, replace with SafeWebview Change-type: patch --- .../featured-project/featured-project.tsx | 63 ------------------- lib/gui/app/pages/main/MainPage.tsx | 43 ++++++++----- 2 files changed, 28 insertions(+), 78 deletions(-) delete mode 100644 lib/gui/app/components/featured-project/featured-project.tsx diff --git a/lib/gui/app/components/featured-project/featured-project.tsx b/lib/gui/app/components/featured-project/featured-project.tsx deleted file mode 100644 index 11e1a7be..00000000 --- a/lib/gui/app/components/featured-project/featured-project.tsx +++ /dev/null @@ -1,63 +0,0 @@ -/* - * Copyright 2016 balena.io - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import * as React from 'react'; - -import * as settings from '../../models/settings'; -import * as analytics from '../../modules/analytics'; -import { SafeWebview } from '../safe-webview/safe-webview'; - -interface FeaturedProjectProps { - shouldShow: boolean; - onWebviewShow: (isWebviewShowing: boolean) => void; - style?: React.CSSProperties; -} - -interface FeaturedProjectState { - endpoint: string | null; -} - -export class FeaturedProject extends React.PureComponent< - FeaturedProjectProps, - FeaturedProjectState -> { - constructor(props: FeaturedProjectProps) { - super(props); - this.state = { - endpoint: null, - }; - } - - public async componentDidMount() { - try { - const url = new URL( - (await settings.get('featuredProjectEndpoint')) || - 'https://assets.balena.io/etcher-featured/index.html', - ); - url.searchParams.append('borderRight', 'false'); - url.searchParams.append('darkBackground', 'true'); - this.setState({ endpoint: url.toString() }); - } catch (error) { - analytics.logException(error); - } - } - - public render() { - return this.state.endpoint ? ( - - ) : null; - } -} diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index 09d257f5..0fe33a78 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/lib/gui/app/pages/main/MainPage.tsx @@ -24,7 +24,6 @@ import * as React from 'react'; import { Flex } from 'rendition'; import styled from 'styled-components'; -import { FeaturedProject } from '../../components/featured-project/featured-project'; import FinishPage from '../../components/finish/finish'; import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos'; import { SafeWebview } from '../../components/safe-webview/safe-webview'; @@ -114,6 +113,7 @@ interface MainPageState { isWebviewShowing: boolean; hideSettings: boolean; source: SourceOptions; + featuredProjectURL?: string; } export class MainPage extends React.Component< @@ -147,10 +147,21 @@ export class MainPage extends React.Component< }; } - public componentDidMount() { + private async getFeaturedProjectURL() { + const url = new URL( + (await settings.get('featuredProjectEndpoint')) || + 'https://assets.balena.io/etcher-featured/index.html', + ); + url.searchParams.append('borderRight', 'false'); + url.searchParams.append('darkBackground', 'true'); + return url.toString(); + } + + public async componentDidMount() { observe(() => { this.setState(this.stateHelper()); }); + this.setState({ featuredProjectURL: await this.getFeaturedProjectURL() }); } private renderMain() { @@ -291,19 +302,21 @@ export class MainPage extends React.Component< }} /> - { - this.setState({ isWebviewShowing }); - }} - style={{ - position: 'absolute', - right: 0, - bottom: 0, - width: '63.8vw', - height: '100vh', - }} - /> + {this.state.featuredProjectURL && ( + { + this.setState({ isWebviewShowing }); + }} + style={{ + position: 'absolute', + right: 0, + bottom: 0, + width: '63.8vw', + height: '100vh', + }} + /> + )} )} From c9bfd350ed039902f54cb306bc10a7a1464d9684 Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Tue, 25 Aug 2020 23:30:31 +0200 Subject: [PATCH 10/11] Remove unused FlashStep.props.isWebviewShowing Change-type: patch --- lib/gui/app/pages/main/Flash.tsx | 1 - lib/gui/app/pages/main/MainPage.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/lib/gui/app/pages/main/Flash.tsx b/lib/gui/app/pages/main/Flash.tsx index 34f89ccb..24c6e9c6 100644 --- a/lib/gui/app/pages/main/Flash.tsx +++ b/lib/gui/app/pages/main/Flash.tsx @@ -146,7 +146,6 @@ interface FlashStepProps { goToSuccess: () => void; source: SourceOptions; isFlashing: boolean; - isWebviewShowing: boolean; style?: React.CSSProperties; // TODO: factorize step: 'decompressing' | 'flashing' | 'verifying'; diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index 0fe33a78..c83006d3 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/lib/gui/app/pages/main/MainPage.tsx @@ -325,7 +325,6 @@ export class MainPage extends React.Component< shouldFlashStepBeDisabled={shouldFlashStepBeDisabled} source={this.state.source} isFlashing={this.state.isFlashing} - isWebviewShowing={this.state.isWebviewShowing} step={state.type} percentage={state.percentage} position={state.position} From 2c07538f8f6c232969f3410931ed82cb3575c67a Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Wed, 26 Aug 2020 00:35:41 +0200 Subject: [PATCH 11/11] Simplify MainPage Change-type: patch --- lib/gui/app/pages/main/MainPage.tsx | 134 +++++++++++++--------------- 1 file changed, 62 insertions(+), 72 deletions(-) diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index c83006d3..d4577175 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/lib/gui/app/pages/main/MainPage.tsx @@ -242,82 +242,72 @@ export class MainPage extends React.Component< justifyContent="space-between" > {notFlashingOrSplitView && ( - - this.setState({ source }) - } - /> - )} - - {notFlashingOrSplitView && ( - - - - )} - - {notFlashingOrSplitView && ( - - )} - - {notFlashingOrSplitView && ( - - - - )} - - {this.state.isFlashing && ( <> - + this.setState({ source }) + } + /> + + + + + + + + + )} + + {this.state.isFlashing && this.state.isWebviewShowing && ( + + - - - {this.state.featuredProjectURL && ( - { - this.setState({ isWebviewShowing }); - }} - style={{ - position: 'absolute', - right: 0, - bottom: 0, - width: '63.8vw', - height: '100vh', - }} - /> - )} - + /> + + )} + {this.state.isFlashing && this.state.featuredProjectURL && ( + { + this.setState({ isWebviewShowing }); + }} + style={{ + position: 'absolute', + right: 0, + bottom: 0, + width: '63.8vw', + height: '100vh', + }} + /> )}