jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-23 11:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert save-webview.jsx to typescript

Browse Source 
Change-type: patch
This commit is contained in:
Alexis Svinartchouk 2020-01-15 03:20:00 +01:00
parent c96654d50f
commit 15ba30bf8f
4 changed files with 215 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/gui/app/components/featured-project/featured-project.tsx
View File

@ -18,7 +18,7 @@ import * as React from 'react';
import * as settings from '../../models/settings';
import * as analytics from '../../modules/analytics';
import * as SafeWebview from '../safe-webview/safe-webview.jsx';
import { SafeWebview } from '../safe-webview/safe-webview';
interface FeaturedProjectProps {
onWebviewShow: (isWebviewShowing: boolean) => void;

245
lib/gui/app/components/safe-webview/safe-webview.jsx
View File

@ -1,245 +0,0 @@
/*
* Copyright 2017 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.
*/
'use strict'
/* eslint-disable jsdoc/require-example */
const _ = require('lodash')
const electron = require('electron')
const react = require('react')
const propTypes = require('prop-types')
const analytics = require('../../modules/analytics')
const { store } = require('../../models/store')
const settings = require('../../models/settings')
const packageJSON = require('../../../../../package.json')
/**
* @summary Electron session identifier
* @constant
* @private
* @type {String}
*/
const ELECTRON_SESSION = 'persist:success-banner'
/**
* @summary Etcher version search-parameter key
* @constant
* @private
* @type {String}
*/
const ETCHER_VERSION_PARAM = 'etcher-version'
/**
* @summary API version search-parameter key
* @constant
* @private
* @type {String}
*/
const API_VERSION_PARAM = 'api-version'
/**
* @summary Opt-out analytics search-parameter key
* @constant
* @private
* @type {String}
*/
const OPT_OUT_ANALYTICS_PARAM = 'optOutAnalytics'
/**
* @summary Webview API version
* @constant
* @private
* @type {String}
*
* @description
* Changing this number represents a departure from an older API and as such
* should only be changed when truly necessary as it introduces breaking changes.
* This version number is exposed to the banner such that it can determine what
* features are safe to utilize.
*
* See `git blame -L n` where n is the line below for the history of version changes.
*/
const API_VERSION = 2
/**
* @summary Webviews that hide/show depending on the HTTP status returned
* @type {Object}
* @public
*
* @example
* <safe-webview src="https://etcher.io/"></safe-webview>
*/
class SafeWebview extends react.PureComponent {
/**
* @param {Object} props - React element properties
*/
constructor (props) {
super(props)
this.state = {
shouldShow: true
}
const url = new window.URL(props.src)
// We set the version GET parameters here.
url.searchParams.set(ETCHER_VERSION_PARAM, packageJSON.version)
url.searchParams.set(API_VERSION_PARAM, API_VERSION)
url.searchParams.set(OPT_OUT_ANALYTICS_PARAM, !settings.get('errorReporting'))
this.entryHref = url.href
// Events steal 'this'
this.didFailLoad = _.bind(this.didFailLoad, this)
this.didGetResponseDetails = _.bind(this.didGetResponseDetails, this)
const logWebViewMessage = (event) => {
console.log('Message from SafeWebview:', event.message)
}
this.eventTuples = [
[ 'did-fail-load', this.didFailLoad ],
[ 'new-window', this.constructor.newWindow ],
[ 'console-message', logWebViewMessage ]
]
// Make a persistent electron session for the webview
this.session = electron.remote.session.fromPartition(ELECTRON_SESSION, {
// Disable the cache for the session such that new content shows up when refreshing
cache: false
})
}
/**
* @returns {react.Element}
*/
render () {
return react.createElement('webview', {
ref: 'webview',
partition: ELECTRON_SESSION,
style: {
flex: this.state.shouldShow ? null : '0 1',
width: this.state.shouldShow ? null : '0',
height: this.state.shouldShow ? null : '0'
}
}, [])
}
/**
* @summary Add the Webview events
*/
componentDidMount () {
// Events React is unaware of have to be handled manually
_.map(this.eventTuples, (tuple) => {
this.refs.webview.addEventListener(...tuple)
})
this.session.webRequest.onCompleted(this.didGetResponseDetails)
// It's important that this comes after the partition setting, otherwise it will
// use another session and we can't change it without destroying the element again
this.refs.webview.src = this.entryHref
}
/**
* @summary Remove the Webview events
*/
componentWillUnmount () {
// Events that React is unaware of have to be handled manually
_.map(this.eventTuples, (tuple) => {
this.refs.webview.removeEventListener(...tuple)
})
this.session.webRequest.onCompleted(null)
}
/**
* @summary Set the element state to hidden
*/
didFailLoad () {
this.setState({
shouldShow: false
})
if (this.props.onWebviewShow) {
this.props.onWebviewShow(false)
}
}
/**
* @summary Set the element state depending on the HTTP response code
* @param {Event} event - Event object
*/
didGetResponseDetails (event) {
// This seems to pick up all requests related to the webview,
// only care about this event if it's a request for the main frame
if (event.resourceType === 'mainFrame') {
const HTTP_OK = 200
analytics.logEvent('SafeWebview loaded', {
event,
applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
})
this.setState({
shouldShow: event.statusCode === HTTP_OK
})
if (this.props.onWebviewShow) {
this.props.onWebviewShow(event.statusCode === HTTP_OK)
}
}
}
/**
* @summary Open link in browser if it's opened as a 'foreground-tab'
* @param {Event} event - event object
*/
static newWindow (event) {
const url = new window.URL(event.url)
if (_.every([
url.protocol === 'http:' || url.protocol === 'https:',
event.disposition === 'foreground-tab',
// Don't open links if they're disabled by the env var
!settings.get('disableExternalLinks')
])) {
electron.shell.openExternal(url.href)
}
}
}
SafeWebview.propTypes = {
/**
* @summary The website source URL
*/
src: propTypes.string.isRequired,
/**
* @summary Refresh the webview
*/
refreshNow: propTypes.bool,
/**
* @summary Webview lifecycle event
*/
onWebviewShow: propTypes.func
}
module.exports = SafeWebview

213
lib/gui/app/components/safe-webview/safe-webview.tsx Normal file
View File

@ -0,0 +1,213 @@
/*
* Copyright 2017 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 electron from 'electron';
import * as _ from 'lodash';
import * as React from 'react';
import * as packageJSON from '../../../../../package.json';
import * as settings from '../../models/settings';
import { store } from '../../models/store';
import * as analytics from '../../modules/analytics';
/**
* @summary Electron session identifier
*/
const ELECTRON_SESSION = 'persist:success-banner';
/**
* @summary Etcher version search-parameter key
*/
const ETCHER_VERSION_PARAM = 'etcher-version';
/**
* @summary API version search-parameter key
*/
const API_VERSION_PARAM = 'api-version';
/**
* @summary Opt-out analytics search-parameter key
*/
const OPT_OUT_ANALYTICS_PARAM = 'optOutAnalytics';
/**
* @summary Webview API version
*
* @description
* Changing this number represents a departure from an older API and as such
* should only be changed when truly necessary as it introduces breaking changes.
* This version number is exposed to the banner such that it can determine what
* features are safe to utilize.
*
* See `git blame -L n` where n is the line below for the history of version changes.
*/
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;
}
interface SafeWebviewState {
shouldShow: boolean;
}
/**
* @summary Webviews that hide/show depending on the HTTP status returned
*/
export class SafeWebview extends React.PureComponent<
SafeWebviewProps,
SafeWebviewState
> {
private entryHref: string;
private session: electron.Session;
private webviewRef: React.RefObject<electron.WebviewTag>;
constructor(props: SafeWebviewProps) {
super(props);
this.webviewRef = React.createRef();
this.state = {
shouldShow: true,
};
const url = new window.URL(this.props.src);
// We set the version GET parameters here.
url.searchParams.set(ETCHER_VERSION_PARAM, packageJSON.version);
url.searchParams.set(API_VERSION_PARAM, API_VERSION);
url.searchParams.set(
OPT_OUT_ANALYTICS_PARAM,
(!settings.get('errorReporting')).toString(),
);
this.entryHref = url.href;
// Events steal 'this'
this.didFailLoad = _.bind(this.didFailLoad, this);
this.didGetResponseDetails = _.bind(this.didGetResponseDetails, this);
// Make a persistent electron session for the webview
this.session = electron.remote.session.fromPartition(ELECTRON_SESSION, {
// Disable the cache for the session such that new content shows up when refreshing
cache: false,
});
}
private static logWebViewMessage(event: electron.ConsoleMessageEvent) {
console.log('Message from SafeWebview:', event.message);
}
public render() {
return (
<webview
ref={this.webviewRef}
partition={ELECTRON_SESSION}
style={{
flex: this.state.shouldShow ? undefined : '0 1',
width: this.state.shouldShow ? undefined : '0',
height: this.state.shouldShow ? undefined : '0',
}}
/>
);
}
// Add the Webview events
public componentDidMount() {
// Events React is unaware of have to be handled manually
if (this.webviewRef.current !== null) {
this.webviewRef.current.addEventListener(
'did-fail-load',
this.didFailLoad,
);
this.webviewRef.current.addEventListener(
'new-window',
SafeWebview.newWindow,
);
this.webviewRef.current.addEventListener(
'console-message',
SafeWebview.logWebViewMessage,
);
this.session.webRequest.onCompleted(this.didGetResponseDetails);
// It's important that this comes after the partition setting, otherwise it will
// use another session and we can't change it without destroying the element again
this.webviewRef.current.src = this.entryHref;
}
}
// Remove the Webview events
public componentWillUnmount() {
// Events that React is unaware of have to be handled manually
if (this.webviewRef.current !== null) {
this.webviewRef.current.removeEventListener(
'did-fail-load',
this.didFailLoad,
);
this.webviewRef.current.removeEventListener(
'new-window',
SafeWebview.newWindow,
);
this.webviewRef.current.removeEventListener(
'console-message',
SafeWebview.logWebViewMessage,
);
}
this.session.webRequest.onCompleted(null);
}
// Set the element state to hidden
public didFailLoad() {
this.setState({
shouldShow: false,
});
if (this.props.onWebviewShow) {
this.props.onWebviewShow(false);
}
}
// Set the element state depending on the HTTP response code
public didGetResponseDetails(event: electron.OnCompletedDetails) {
// This seems to pick up all requests related to the webview,
// only care about this event if it's a request for the main frame
if (event.resourceType === 'mainFrame') {
const HTTP_OK = 200;
analytics.logEvent('SafeWebview loaded', {
event,
applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
});
this.setState({
shouldShow: event.statusCode === HTTP_OK,
});
if (this.props.onWebviewShow) {
this.props.onWebviewShow(event.statusCode === HTTP_OK);
}
}
}
// Open link in browser if it's opened as a 'foreground-tab'
public static newWindow(event: electron.NewWindowEvent) {
const url = new window.URL(event.url);
if (
_.every([
url.protocol === 'http:' || url.protocol === 'https:',
event.disposition === 'foreground-tab',
// Don't open links if they're disabled by the env var
!settings.get('disableExternalLinks'),
])
) {
electron.shell.openExternal(url.href);
}
}
}

2
lib/gui/app/pages/main/MainPage.tsx
View File

@ -25,7 +25,7 @@ import { FeaturedProject } from '../../components/featured-project/featured-proj
import FinishPage from '../../components/finish/finish';
import * as ImageSelector from '../../components/image-selector/image-selector';
import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos';
import * as SafeWebview from '../../components/safe-webview/safe-webview';
import { SafeWebview } from '../../components/safe-webview/safe-webview';
import { SettingsModal } from '../../components/settings/settings';
import { SVGIcon } from '../../components/svg-icon/svg-icon';
import * as flashState from '../../models/flash-state';