[MM-19856] Add back button when navigating outside of MM server (#1179)

.gitignore

@@ -18,3 +18,4 @@ testUserData
 src/browser/*.png
 src/browser/*.svg
 src/browser/*.woff2
+src/browser/assets/fonts/

electron-builder.json

@@ -14,7 +14,9 @@
     "main_bundle.js",
     "browser/**/*{.html,.css,_bundle.js,.svg,.png}",
     "assets/**/*",
+    "browser/assets/fonts/*",
     "node_modules/bootstrap/dist/**",
+    "node_modules/font-awesome/{css,fonts}/**",
     "node_modules/simple-spellchecker/dict/*.dic"
   ],
   "protocols": [

src/browser/components/ExtraBar.jsx

@@ -0,0 +1,50 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Row, Button} from 'react-bootstrap';
+
+export default class ExtraBar extends React.Component {
+  handleBack = () => {
+    if (this.props.mattermostView) {
+      this.props.mattermostView.goBack();
+    }
+  }
+  render() {
+    let barClass = 'clear-mode';
+    if (!this.props.show) {
+      barClass = 'hidden';
+    } else if (this.props.darkMode) {
+      barClass = 'dark-mode';
+    }
+
+    return (
+      <Row
+        id={'extra-bar'}
+        className={barClass}
+      >
+        <div
+          className={'container-fluid'}
+          onClick={this.handleBack}
+        >
+          <Button
+            bsStyle={'link'}
+            bsSize={'xsmall'}
+          >
+            <span className={'backIcon fa fa-1x fa-angle-left'}/>
+            <span className={'backLabel'}>
+              {'Back'}
+            </span>
+          </Button>
+        </div>
+      </Row>
+    );
+  }
+}
+
+ExtraBar.propTypes = {
+  darkMode: PropTypes.bool,
+  mattermostView: PropTypes.object,
+  show: PropTypes.bool,
+};

src/browser/components/MainPage.jsx

@@ -7,7 +7,7 @@
 
 import url from 'url';
 
-import React from 'react';
+import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 import {CSSTransition, TransitionGroup} from 'react-transition-group';
 import {Grid, Row} from 'react-bootstrap';
@@ -29,6 +29,7 @@ import HoveringURL from './HoveringURL.jsx';
 import Finder from './Finder.jsx';
 import NewTeamModal from './NewTeamModal.jsx';
 import SelectCertificateModal from './SelectCertificateModal.jsx';
+import ExtraBar from './ExtraBar.jsx';
 
 export default class MainPage extends React.Component {
   constructor(props) {
@@ -604,6 +605,14 @@ export default class MainPage extends React.Component {
     });
   }
 
+  showExtraBar = () => {
+    const ref = this.refs[`mattermostView${this.state.key}`];
+    if (typeof ref !== 'undefined') {
+      return !Utils.isTeamUrl(this.props.teams[this.state.key].url, ref.getSrc());
+    }
+    return false;
+  }
+
   render() {
     const self = this;
     const tabsRow = (
@@ -742,12 +751,21 @@ export default class MainPage extends React.Component {
           handleInterTeamLink={self.handleInterTeamLink}
           ref={id}
           active={isActive}
+          allowExtraBar={this.showExtraBar()}
         />);
     });
+
     const viewsRow = (
+      <Fragment>
+        <ExtraBar
+          darkMode={this.state.isDarkMode}
+          show={this.showExtraBar()}
+          mattermostView={this.refs[`mattermostView${this.state.key}`]}
+        />
         <Row>
           {views}
-      </Row>);
+        </Row>
+      </Fragment>);
 
     let request = null;
     let authServerURL = null;

src/browser/components/MattermostView.jsx

@@ -338,6 +338,9 @@ export default class MattermostView extends React.Component {
     if (!this.props.active) {
       classNames.push('mattermostView-hidden');
     }
+    if (this.props.allowExtraBar) {
+      classNames.push('allow-extra-bar');
+    }
 
     const loadingImage = !this.state.errorInfo && this.props.active && !this.state.isLoaded ? (
       <div className='mattermostView-loadingScreen'>
@@ -377,6 +380,7 @@ MattermostView.propTypes = {
   useSpellChecker: PropTypes.bool,
   onSelectSpellCheckerLocale: PropTypes.func,
   handleInterTeamLink: PropTypes.func,
+  allowExtraBar: PropTypes.bool,
 };
 
 /* eslint-enable react/no-set-state */

src/browser/css/components/ExtraBar.css

@@ -0,0 +1,33 @@
+#extra-bar {
+    max-height: 76px;
+    transition: max-height 0.25s ease;
+    background-color: #f5f5f5;
+    -webkit-font-smoothing: antialiased;
+}
+
+#extra-bar div {
+    padding: 0 0.93em 0.2em;
+}
+
+#extra-bar.hidden {
+    max-height: 0px;
+}
+
+span.backLabel {
+    font-family: "Open Sans", sans-serif;
+    font-weight: normal;
+    line-height: 30px;
+    font-size: 14px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    color: #166de0;
+}
+
+span.backIcon {
+    margin-right: 4px;
+    font-size: 1.6rem;
+}
+
+.container-fluid button:first-child {
+    padding-left: 0px;
+}

src/browser/css/components/MattermostView.css

@@ -32,3 +32,7 @@
   left: 0;
   margin: auto;
 }
+
+.allow-extra-bar webview {
+  top: 76px;
+}

src/browser/css/components/index.css

@@ -9,3 +9,4 @@
 @import url("Finder.css");
 @import url("UpdaterPage.css");
 @import url("CertificateModal.css");
+@import url("ExtraBar.css");

src/browser/css/index.css

@@ -1,4 +1,33 @@
 @import url("components/index.css");
+@import '~font-awesome/css/font-awesome.css';
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-italic.woff2') format('woff2');
+}
 
 @font-face {
   font-family: 'Open Sans';
@@ -7,6 +36,13 @@
   src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600italic.woff2') format('woff2');
+}
+
 html {
   height: 100%;
 }

src/package-lock.json

@@ -393,6 +393,11 @@
         "sort-keys-length": "^1.0.0"
       }
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "fs-extra": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",

src/package.json

@@ -17,6 +17,7 @@
     "electron-is-dev": "^1.0.1",
     "electron-log": "^2.2.17",
     "electron-updater": "4.0.6",
+    "font-awesome": "^4.7.0",
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-bootstrap": "~0.32.4",

webpack.config.renderer.js

@@ -42,7 +42,7 @@ module.exports = merge(base, {
         loader: 'url-loader',
       },
     }, {
-      test: /\.(svg|woff2)$/,
+      test: /\.(svg)$/,
       use: [
         {
           loader: 'file-loader',
@@ -53,6 +53,14 @@ module.exports = merge(base, {
         },
         {loader: 'image-webpack-loader'},
       ],
+    }, {
+      test: /\.(eot|ttf|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+      loader: 'file-loader',
+      options: {
+        name: '[name].[ext]',
+        outputPath: '/../assets/fonts',
+        publicPath: './assets/fonts',
+      },
     }],
   },
   node: {