Merge branch 'app-version'

5 files changed, 36 insertions, 6 deletions

diff --git a/app/components/Settings.js b/app/components/Settings.js
index a25cb39f19..4022054acd 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -14,13 +14,14 @@ import type { SettingsReduxState } from '../redux/settings/reducers';
 export type SettingsProps = {
   account: AccountReduxState,
   settings: SettingsReduxState,
+  version: string,
   onQuit: () => void,
   onClose: () => void,
   onViewAccount: () => void,
   onViewSupport: () => void,
   onViewPreferences: () => void,
   onViewAdvancedSettings: () => void,
-  onExternalLink: (type: string) => void
+  onExternalLink: (type: string) => void,
 };
 
 export default class Settings extends Component {
@@ -47,6 +48,9 @@ export default class Settings extends Component {
                 <View style={styles.settings__content}>
                   <View>
                     { this._renderTopButtons() }
+                    <View style={styles.settings__cell_spacer}/>
+                    { this._renderMiddleButtons() }
+                    <View style={styles.settings__cell_spacer}/>
                     { this._renderBottomButtons() }
                   </View>
                   { this._renderQuitButton() }
@@ -83,7 +87,7 @@ export default class Settings extends Component {
             {isOutOfTime ? (
               <Text style={styles.settings__account_paid_until_label__error} testName='settings__account_paid_until_label'>OUT OF TIME</Text>
             ) : (
-              <Text style={styles.settings__account_paid_until_label} testName='settings__account_paid_until_label'>{formattedExpiry}</Text>
+              <Text style={styles.settings__cell_subtext} testName='settings__account_paid_until_label'>{formattedExpiry}</Text>
             )}
             <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
           </View>
@@ -100,10 +104,28 @@ export default class Settings extends Component {
         <Img style={styles.settings__cell_disclosure} source='icon-chevron' tintColor='currentColor'/>
       </ButtonCell>
 
-      <View style={styles.settings__cell_spacer}></View>
     </View>;
   }
 
+  _renderMiddleButtons() {
+    return <View>
+      <ButtonCell onPress={ this.props.onExternalLink.bind(this, 'download') } testName='settings__version'>
+        <Text style={styles.settings__cell_label}>App version</Text>
+        <Text style={styles.settings__cell_subtext}>{this._formattedVersion()}</Text>
+        <Img style={styles.settings__cell_icon} source='icon-extLink' tintColor='currentColor'/>
+      </ButtonCell>
+    </View>;
+  }
+
+  _formattedVersion() {
+    // the version in package.json has to be semver, but we use a YEAR.release-channel
+    // version scheme. in package.json we thus have to write YEAR.release.X-channel and
+    // this function is responsible for removing .X part.
+    return this.props.version
+      .replace('.0-', '-')  // remove the .0 in 2018.1.0-beta9
+      .replace(/\.0$/, ''); // remove the .0 in 2018.1.0
+  }
+
   _renderBottomButtons() {
     return <View>
       <ButtonCell onPress={ this.props.onExternalLink.bind(this, 'faq') } testName='settings__external_link'>
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 15b55d5009..d37703a8fe 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -22,7 +22,6 @@ export default Object.assign(createViewStyles({
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'space-between',
-    height: '100%',
   },
   settings__scrollview: {
     flexGrow: 1,
@@ -71,6 +70,7 @@ export default Object.assign(createViewStyles({
     backgroundColor: 'rgba(41,71,115,0.9)'
   },
   settings__cell_icon:{
+    marginLeft: 8,
     width: 16,
     height: 16,
     flexGrow: 0,
@@ -119,7 +119,7 @@ export default Object.assign(createViewStyles({
     lineHeight: 26,
     color: 'rgba(255,255,255,0.8)'
   },
-  settings__account_paid_until_label:{
+  settings__cell_subtext:{
     fontFamily: 'Open Sans',
     fontSize: 13,
     fontWeight: '800',
diff --git a/app/config.json b/app/config.json
index cb4594cdc7..d022e65ef6 100644
--- a/app/config.json
+++ b/app/config.json
@@ -4,6 +4,7 @@
     "purchase": "https://mullvad.net/account/",
     "faq": "https://mullvad.net/faq/",
     "guides": "https://mullvad.net/guides/",
+    "download": "https://mullvad.net/download/",
     "supportEmail": "mailto:support@mullvad.net"
   }
 }
diff --git a/app/containers/SettingsPage.js b/app/containers/SettingsPage.js
index 3612b099b5..7c844252d3 100644
--- a/app/containers/SettingsPage.js
+++ b/app/containers/SettingsPage.js
@@ -3,6 +3,7 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { push } from 'react-router-redux';
+import { version } from '../../package.json';
 import Settings from '../components/Settings';
 import { links } from '../config';
 import { openLink, exit } from '../lib/platform';
@@ -10,7 +11,12 @@ import { openLink, exit } from '../lib/platform';
 import type { ReduxState, ReduxDispatch } from '../redux/store';
 import type { SharedRouteProps } from '../routes';
 
-const mapStateToProps = (state: ReduxState) => state;
+const mapStateToProps = (state: ReduxState) => {
+  return {
+    ...state,
+    version: version,
+  };
+};
 const mapDispatchToProps = (dispatch: ReduxDispatch, _props: SharedRouteProps) => {
   const { push: pushHistory } = bindActionCreators({ push }, dispatch);
   return {
diff --git a/test/components/Settings.spec.js b/test/components/Settings.spec.js
index 415be57fd2..fc6b73f17c 100644
--- a/test/components/Settings.spec.js
+++ b/test/components/Settings.spec.js
@@ -52,6 +52,7 @@ describe('components/Settings', () => {
     const defaultProps: SettingsProps = {
       account: anAccountState,
       settings: aSettingsState,
+      version: '',
       onQuit: () => {},
       onClose: () => {},
       onViewAccount: () => {},