From 03d786504767f38a63c0639dc1fb5ab76a9ac208 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 22 Feb 2019 08:11:08 +0100 Subject: [PATCH] Expand https -> ws connection info (#749) * Expand https -> ws connection info * Update NodeInfo.tsx * Update Connecting.tsx * Remove apps--App (& Content/SideBar flex embedded) --- packages/apps/src/Connecting.tsx | 68 ++++++++++++++++++++ packages/apps/src/Connecting/Connecting.css | 18 ------ packages/apps/src/Connecting/index.tsx | 52 --------------- packages/apps/src/Content/Content.css | 17 ----- packages/apps/src/{ => Content}/Status.tsx | 2 +- packages/apps/src/Content/index.tsx | 25 +++++-- packages/apps/src/{ => SideBar}/NodeInfo.tsx | 36 +++++++++-- packages/apps/src/SideBar/SideBar.css | 3 + packages/apps/src/SideBar/index.tsx | 8 +-- packages/apps/src/TopBar.tsx | 57 ++++++++++++++++ packages/apps/src/index.css | 49 -------------- packages/apps/src/index.tsx | 19 +++--- packages/ui-reactive/src/NodeVersion.tsx | 2 +- 13 files changed, 192 insertions(+), 164 deletions(-) create mode 100644 packages/apps/src/Connecting.tsx delete mode 100644 packages/apps/src/Connecting/Connecting.css delete mode 100644 packages/apps/src/Connecting/index.tsx delete mode 100644 packages/apps/src/Content/Content.css rename packages/apps/src/{ => Content}/Status.tsx (98%) rename packages/apps/src/{ => SideBar}/NodeInfo.tsx (70%) create mode 100644 packages/apps/src/TopBar.tsx delete mode 100644 packages/apps/src/index.css diff --git a/packages/apps/src/Connecting.tsx b/packages/apps/src/Connecting.tsx new file mode 100644 index 0000000000..6df34ce599 --- /dev/null +++ b/packages/apps/src/Connecting.tsx @@ -0,0 +1,68 @@ +// Copyright 2017-2019 @polkadot/apps authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import { I18nProps } from '@polkadot/ui-app/types'; +import { ApiProps } from '@polkadot/ui-api/types'; + +import React from 'react'; +import styled from 'styled-components'; +import { withApi, withMulti } from '@polkadot/ui-api/index'; +import settings from '@polkadot/ui-settings'; + +import translate from './translate'; + +type Props = I18nProps & ApiProps; + +const Wrapper = styled.div` + background: red; + color: white; + bottom: 0; + left: 0; + line-height: 1.5em; + opacity: 0.9; + padding: 1em 5em; + position: fixed; + right: 0; + text-align: center; +`; + +// @ts-ignore +const isFirefox = typeof InstallTrigger !== 'undefined'; + +class Connecting extends React.PureComponent { + render () { + const { isApiConnected, t } = this.props; + + if (isApiConnected) { + return null; + } + + const wsUrl = settings.apiUrl; + const isWs = wsUrl.indexOf('ws://') === 0; + const isWsRemote = wsUrl.indexOf('127.0.0.1') === -1; + const isHttps = window.location.protocol.indexOf('https:') === 0; + + return ( + +
{t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}
+ { + isFirefox && isWs + ?
{t('With the Firefox browser connecting to insecure WebSockets ({{wsUrl}}) will fail due to the browser not allowing localhost access from a secure site.', { replace: { wsUrl } })}
+ : undefined + } + { + isWs && isWsRemote && isHttps + ?
{t(`You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure 'wss' endpoint.`, { replace: { wsUrl } })}
+ : undefined + } + + ); + } +} + +export default withMulti( + Connecting, + translate, + withApi +); diff --git a/packages/apps/src/Connecting/Connecting.css b/packages/apps/src/Connecting/Connecting.css deleted file mode 100644 index 06407d07d2..0000000000 --- a/packages/apps/src/Connecting/Connecting.css +++ /dev/null @@ -1,18 +0,0 @@ -/* Copyright 2017-2019 @polkadot/apps authors & contributors -/* This software may be modified and distributed under the terms -/* of the Apache-2.0 license. See the LICENSE file for details. */ - -.apps--Connecting { - bottom: 0; - left: 0; - position: fixed; - right: 0; - text-align: center; -} - -.apps--Connecting-text { - background: red; - color: white; - line-height: 1.5em; - padding: 1em 2em; -} diff --git a/packages/apps/src/Connecting/index.tsx b/packages/apps/src/Connecting/index.tsx deleted file mode 100644 index 93f9d1bab0..0000000000 --- a/packages/apps/src/Connecting/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -// Copyright 2017-2019 @polkadot/apps authors & contributors -// This software may be modified and distributed under the terms -// of the Apache-2.0 license. See the LICENSE file for details. - -import { I18nProps } from '@polkadot/ui-app/types'; -import { ApiProps } from '@polkadot/ui-api/types'; - -import './Connecting.css'; - -import React from 'react'; -import { withApi, withMulti } from '@polkadot/ui-api/index'; -import settings from '@polkadot/ui-settings'; - -import translate from '../translate'; - -type Props = I18nProps & ApiProps; - -// @ts-ignore -const isFirefox = typeof InstallTrigger !== 'undefined'; - -class Connecting extends React.PureComponent { - render () { - const { isApiConnected, t } = this.props; - - if (isApiConnected) { - return null; - } - - return ( -
-
- {t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}  - { - isFirefox && settings.apiUrl.indexOf('ws://') === 0 - ? t('With the Firefox browser connecting to insecure WebSockets (in this case {{url}}) will fail due to the browser not allowing localhost access from a secure site.', { - replace: { - url: settings.apiUrl - } - }) - : '' - } -
-
- ); - } -} - -export default withMulti( - Connecting, - translate, - withApi -); diff --git a/packages/apps/src/Content/Content.css b/packages/apps/src/Content/Content.css deleted file mode 100644 index e3b7cee2c4..0000000000 --- a/packages/apps/src/Content/Content.css +++ /dev/null @@ -1,17 +0,0 @@ -/* Copyright 2017-2019 @polkadot/apps authors & contributors -/* This software may be modified and distributed under the terms -/* of the Apache-2.0 license. See the LICENSE file for details. */ - -.apps--Content { - background: white; - height: 100%; - width: 100%; -} - -.apps--Content-Frame { - border: none; - box-sizing: border-box; - height: 100%; - overflow-y: scroll; - width: 100%; -} diff --git a/packages/apps/src/Status.tsx b/packages/apps/src/Content/Status.tsx similarity index 98% rename from packages/apps/src/Status.tsx rename to packages/apps/src/Content/Status.tsx index 2867a52595..3df3ac5087 100644 --- a/packages/apps/src/Status.tsx +++ b/packages/apps/src/Content/Status.tsx @@ -14,7 +14,7 @@ import { withCall, withMulti, withObservable } from '@polkadot/ui-api/index'; import { stringToU8a } from '@polkadot/util'; import { xxhashAsHex } from '@polkadot/util-crypto'; -import translate from './translate'; +import translate from '../translate'; type Props = I18nProps & { optionsAll?: KeyringOptions, diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx index 18b77fd417..3de4bd228f 100644 --- a/packages/apps/src/Content/index.tsx +++ b/packages/apps/src/Content/index.tsx @@ -6,14 +6,13 @@ import { I18nProps } from '@polkadot/ui-app/types'; import { ApiProps } from '@polkadot/ui-api/types'; import { QueueProps } from '@polkadot/ui-app/Status/types'; -import './Content.css'; - import React from 'react'; import { withRouter } from 'react-router'; +import styled from 'styled-components'; import { withCalls, withMulti } from '@polkadot/ui-api/index'; import { QueueConsumer } from '@polkadot/ui-app/Status/Context'; -import Status from '../Status'; +import Status from './Status'; import routing from '../routing'; import translate from '../translate'; import NotFound from './NotFound'; @@ -22,6 +21,18 @@ type Props = I18nProps & ApiProps & { location: Location }; +const Wrapper = styled.div` + background: #fafafa; + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; + min-height: 100vh; + overflow-x: hidden; + overflow-y: auto; + width: 100%; +`; + const unknown = { display: { needsApi: undefined @@ -40,14 +51,14 @@ class Content extends React.Component { if (needsApi && (!isApiReady || !isApiConnected)) { return ( -
+
{t('Waiting for API to be connected and ready.')}
-
+ ); } return ( -
+ {({ queueAction, stqueue, txqueue }: QueueProps) => ( <> @@ -64,7 +75,7 @@ class Content extends React.Component { )} -
+ ); } } diff --git a/packages/apps/src/NodeInfo.tsx b/packages/apps/src/SideBar/NodeInfo.tsx similarity index 70% rename from packages/apps/src/NodeInfo.tsx rename to packages/apps/src/SideBar/NodeInfo.tsx index ed6150a259..637ebcc314 100644 --- a/packages/apps/src/NodeInfo.tsx +++ b/packages/apps/src/SideBar/NodeInfo.tsx @@ -6,14 +6,38 @@ import { ApiProps } from '@polkadot/ui-api/types'; import { BareProps } from '@polkadot/ui-app/types'; import React from 'react'; - +import styled from 'styled-components'; import { withApi } from '@polkadot/ui-api/with'; import { BestNumber, Chain, NodeName, NodeVersion } from '@polkadot/ui-reactive/index'; type Props = ApiProps & BareProps & {}; +const Wrapper = styled.div` + background: transparent; + color: white; + font-size: 0.75rem; + opacity: 0.5; + padding: 0 1.5rem 0 0; + text-align: right; + + > div { + margin-bottom: -0.125em; + > div { + display: inline-block; + } + + &.spacer { + margin-bottom: 0.5rem; + } + } + + .rx--updated { + background: inherit !important; + } +`; + const HEALTH_POLL = 22500; -const pkgJson = require('../package.json'); +const pkgJson = require('../../package.json'); class NodeInfo extends React.PureComponent { componentDidMount () { @@ -33,19 +57,19 @@ class NodeInfo extends React.PureComponent { const uiInfo = `@polkadot/apps v${pkgJson.version}`; return ( -
-
+ +
 
-
+
 
{api.libraryInfo}
{uiInfo}
-
+ ); } } diff --git a/packages/apps/src/SideBar/SideBar.css b/packages/apps/src/SideBar/SideBar.css index 641c3930cb..c64e958029 100644 --- a/packages/apps/src/SideBar/SideBar.css +++ b/packages/apps/src/SideBar/SideBar.css @@ -7,7 +7,10 @@ .apps--SideBar { background: #4e4e4e; + display: flex; + flex-direction: column; flex-shrink: 0; + min-height: 100vh; padding: 0.75em 0 0 0.75em; position: relative; text-align: left; diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx index c28708de54..9bac56d90a 100644 --- a/packages/apps/src/SideBar/index.tsx +++ b/packages/apps/src/SideBar/index.tsx @@ -13,11 +13,10 @@ import { Button, Icon, Menu } from '@polkadot/ui-app/index'; import routing from '../routing'; import translate from '../translate'; import Item from './Item'; +import NodeInfo from './NodeInfo'; import getLogo from './logos'; -type Props = I18nProps & { - children?: React.ReactNode -}; +type Props = I18nProps; type State = { isCollapsed: boolean @@ -37,7 +36,6 @@ class SideBar extends React.PureComponent { } render () { - const { children } = this.props; const { isCollapsed } = this.state; return ( @@ -55,7 +53,7 @@ class SideBar extends React.PureComponent { { isCollapsed ? null - : children + : } {this.renderCollapse()} diff --git a/packages/apps/src/TopBar.tsx b/packages/apps/src/TopBar.tsx new file mode 100644 index 0000000000..661ba21106 --- /dev/null +++ b/packages/apps/src/TopBar.tsx @@ -0,0 +1,57 @@ +// Copyright 2017-2019 @polkadot/apps authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +// Unused atm, experiment as a replacement for NodeInfo on the SideBar + +import React from 'react'; +import styled from 'styled-components'; + +import { BestNumber, Chain, NodeName, NodeVersion } from '@polkadot/ui-reactive/index'; + +type Props = {}; + +const Wrapper = styled.div` + background: #f2f2f2; + font-size: 0.85rem; + line-height: 1rem; + overflow: hidden; + padding: 0.5rem 1rem; + position: fixed; + right: 0; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + top: 0; + + div { + display: inline-block; + vertical-align: middle; + } + + > div { + border-left: 1px solid #ccc; + padding: 0 0.5rem; + + &:first-child { + border-width: 0; + } + } +`; + +export default class TopBar extends React.PureComponent { + render () { + return ( + +
+   + +
+
+   + +
+ + ); + } +} diff --git a/packages/apps/src/index.css b/packages/apps/src/index.css deleted file mode 100644 index 9c0ed23047..0000000000 --- a/packages/apps/src/index.css +++ /dev/null @@ -1,49 +0,0 @@ -/* Copyright 2017-2019 @polkadot/apps authors & contributors -/* This software may be modified and distributed under the terms -/* of the Apache-2.0 license. See the LICENSE file for details. */ - -.apps--App { - align-items: stretch; - box-sizing: border-box; - display: flex; - min-height: 100vh; - - .apps--Content, - .apps--SideBar { - display: flex; - flex-direction: column; - min-height: 100vh; - } - - .apps--Content { - background: #fafafa /* #fff */; - flex-grow: 1; - overflow-x: hidden; - overflow-y: auto; - } -} - -.apps--NodeInfo { - background: transparent; - color: white; - font-size: 0.75rem; - opacity: 0.5; - padding: 0 1.5rem 0 0; - text-align: right; - - > div { - margin-bottom: -0.125em; - - &.spacer { - margin-bottom: 0.5rem; - } - } - - div.rx--updated { - background: inherit !important; - } -} - -.apps--NodeInfo-inline > div { - display: inline-block; -} diff --git a/packages/apps/src/index.tsx b/packages/apps/src/index.tsx index 7bd36bf606..df7b506cb4 100644 --- a/packages/apps/src/index.tsx +++ b/packages/apps/src/index.tsx @@ -4,10 +4,9 @@ import { BareProps } from '@polkadot/ui-app/types'; -import './index.css'; - import React from 'react'; import store from 'store'; +import styled from 'styled-components'; import { typeRegistry } from '@polkadot/types'; import createApp from '@polkadot/ui-app/index'; import { classes } from '@polkadot/ui-app/util'; @@ -16,22 +15,26 @@ import settings from '@polkadot/ui-settings'; import Connecting from './Connecting'; import Content from './Content'; -import NodeInfo from './NodeInfo'; import SideBar from './SideBar'; type Props = BareProps & {}; +const Wrapper = styled.div` + align-items: stretch; + box-sizing: border-box; + display: flex; + min-height: 100vh; +`; + function App (props: Props) { return ( -
- - - + + -
+ ); } diff --git a/packages/ui-reactive/src/NodeVersion.tsx b/packages/ui-reactive/src/NodeVersion.tsx index f2bbe731d8..a7d89240f6 100644 --- a/packages/ui-reactive/src/NodeVersion.tsx +++ b/packages/ui-reactive/src/NodeVersion.tsx @@ -16,7 +16,7 @@ type Props = BareProps & CallProps & { class NodeVersion extends React.PureComponent { render () { - const { children, className, label = '', style, system_version = 'unknown' } = this.props; + const { children, className, label = '', style, system_version = '-' } = this.props; return (