Mobile app CI build and deploy (#2890)

* Deploy electricityMap static assets to GCS

* update dockerfile paths

* Revert

* Fix dockerfile

* Add config

* update container path

* Mobile app CI build and deploy

* Show app version on mobile info tab

* lint

* restore build.sh

* update

* Add staging

* Add promote stage

* Final

* Req changes

mobileapp/BUILD.yaml

@@ -0,0 +1,55 @@
+steps:
+  prepare:
+    image: node:10.19.0-alpine
+    inputs:
+      - package.json
+      - package-lock.json
+    commands:
+      - apk add --no-cache git imagemagick
+      # Install gsutil
+      - apk add --no-cache curl bash python3
+      - curl https://sdk.cloud.google.com | bash > /dev/null
+      - npm ci
+      - npm install -g [email protected] [email protected]
+
+  build:
+    inputs:
+      - ../web/public
+      - ../web/{locales,src,views/pages/index.ejs}
+      - ../web/locales-config.json
+      - www/index.html
+      - ./icon*.png
+      - generate-index.js
+      - config.xml
+      - res/screen/ios
+      - sentry.properties
+    commands:
+      - cp -r ../web/public/ www/electricitymap
+      - cp -r ../web/locales/ .
+      - cp ../web/locales-config.json ./locales-config.json
+      - cp -r ../web/src .
+      # Generate bundle
+      - node generate-index.js
+      # Generate icons
+      - node_modules/.bin/app-icon generate -i icon_ios.png --platforms=ios
+      - node_modules/.bin/app-icon generate -i icon_android_legacy.png --platforms=android --adaptive-icons
+      # Set Sentry auth-token
+      - echo "auth-token=${BRICK_SENTRY_AUTH_TOKEN:-unknown}" >> sentry.properties
+
+  deploy:
+    commands:
+      # Prepare
+      - /root/google-cloud-sdk/bin/gsutil cp gs://electricitymap-secrets/mobileapp/google-services.json .
+      - /root/google-cloud-sdk/bin/gsutil cp gs://electricitymap-secrets/mobileapp/GoogleService-Info.plist .
+      - cordova prepare
+      # Release to staging
+      - code-push login --accessKey ${BRICK_CODE_PUSH_ACCESS_KEY:-unknown}
+      - code-push release-cordova electricitymap-android android --noDuplicateReleaseError --description ${BRICK_DRONE_COMMIT_SHA:-latest}
+      - code-push release-cordova electricitymap-ios ios --noDuplicateReleaseError --description ${BRICK_DRONE_COMMIT_SHA:-latest}
+      # Promote
+      - code-push promote electricitymap-android Staging Production
+      - code-push promote electricitymap-ios Staging Production
+    secrets:
+      gcloud:
+        src: ~/.config/gcloud
+        target: /root/.config/gcloud

mobileapp/build.sh

@@ -5,12 +5,12 @@ set -eu -o pipefail
 CONTAINER_ID=$(docker create eu.gcr.io/tmrow-152415/electricitymap_web:latest)
 
 rm -rf www/electricitymap locales src || true
-docker cp $CONTAINER_ID:/home/web/public/ www/electricitymap
+docker cp $CONTAINER_ID:/home/src/electricitymap/contrib/web/public/ www/electricitymap
 
 rm -rf locales || true
-docker cp $CONTAINER_ID:/home/web/locales/ .
-docker cp $CONTAINER_ID:/home/web/locales-config.json ./locales-config.json
-docker cp $CONTAINER_ID:/home/web/src .
+docker cp $CONTAINER_ID:/home/src/electricitymap/contrib/web/locales/ .
+docker cp $CONTAINER_ID:/home/src/electricitymap/contrib/web/locales-config.json ./locales-config.json
+docker cp $CONTAINER_ID:/home/src/electricitymap/contrib/web/src .
 
 docker rm $CONTAINER_ID
 

mobileapp/config.xml

@@ -20,6 +20,8 @@
     <platform name="android">
         <resource-file src="google-services.json" target="app/google-services.json" />
         <preference name="CodePushDeploymentKey" value="pq5LiNRfRy4cBGU-a5Njke45jUclEJ-bjzkpG" />
+        <!-- uncomment for staging build instead  -->
+        <!-- <preference name="CodePushDeploymentKey" value="qKUKXX9JQbat9M56RY54obDyV02BEJ-bjzkpG" /> -->
         <preference name="AndroidLaunchMode" value="singleInstance" />
         <preference name="SplashMaintainAspectRatio" value="true" />
         <preference name="SplashScreenDelay" value="0" />
@@ -32,6 +34,8 @@
     <platform name="ios">
         <resource-file src="GoogleService-Info.plist" />
         <preference name="CodePushDeploymentKey" value="4uQpHGlWRd7qOyIq-JNAhvjsYXcsEJ-bjzkpG" />
+        <!-- uncomment for staging build instead  -->
+        <!-- <preference name="CodePushDeploymentKey" value="EgyH71oYOglC8w-se8f-EDACw0KtEJ-bjzkpG" /> -->
         <preference name="StatusBarStyle" value="default" />
         <preference name="DisallowOverscroll" value="true" />
         <allow-intent href="itms:*" />
@@ -51,7 +55,6 @@
     <plugin name="cordova-plugin-file" spec="^6.0.2" />
     <plugin name="cordova-plugin-file-transfer" spec="^1.7.1" />
     <plugin name="cordova-plugin-zip" spec="^3.1.0" />
-    <plugin name="cordova-universal-links-plugin" spec="^1.2.1" />
     <plugin name="cordova-plugin-code-push" spec="^1.12.5" />
     <plugin name="sentry-cordova" spec="^0.16.2" />
     <engine name="android" spec="^8.1.0" />

mobileapp/package.json

@@ -19,7 +19,6 @@
     "cordova-plugin-zip": "^3.1.0",
     "cordova-support-android-plugin": "^1.0.2",
     "cordova-support-google-services": "^1.3.2",
-    "cordova-universal-links-plugin": "^1.2.1",
     "ejs": "^2.7.4",
     "i18n": "^0.8.3",
     "sentry-cordova": "^0.16.2"
@@ -40,18 +39,19 @@
       "cordova-plugin-file": {},
       "cordova-plugin-file-transfer": {},
       "cordova-plugin-zip": {},
-      "cordova-universal-links-plugin": {},
       "cordova-plugin-code-push": {},
       "sentry-cordova": {},
       "cordova-support-google-services": {},
-      "cordova-plugin-firebase-analytics": {}
+      "cordova-plugin-firebase-analytics": {},
+      "cordova-universal-links-plugin": {}
     },
     "platforms": [
       "android",
       "ios"
     ]
   },
   "devDependencies": {
-    "app-icon": "^0.13.1"
+    "app-icon": "^0.13.1",
+    "cordova-universal-links-plugin": "git+https://github.com/walteram/cordova-universal-links-plugin.git"
   }
 }

mobileapp/sentry.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=tomorrow
+defaults.project=electricitymap-app
+cli.executable=node_modules/@sentry/cli/bin/sentry-cli

web/BUILD.yaml

@@ -11,7 +11,7 @@ steps:
 
   build:
     environment:
-      ELECTRICITYMAP_PUBLIC_TOKEN: ${BRICK_ELECTRICITYMAP_PUBLIC_TOKEN}
+      ELECTRICITYMAP_PUBLIC_TOKEN: ${BRICK_ELECTRICITYMAP_PUBLIC_TOKEN:-unknown}
     inputs:
       # geometries
       - generate-geometries.js

web/src/layout/leftpanel/mobileinfotab.js

@@ -3,7 +3,7 @@
 /* eslint-disable react/jsx-no-target-blank */
 // TODO: re-enable rules
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Redirect, useLocation } from 'react-router-dom';
 
 import { __ } from '../../helpers/translation';
@@ -20,6 +20,29 @@ const MobileInfoTab = () => {
     return <Redirect to={{ pathname: '/map', search: location.search }} />;
   }
 
+  const [mobileAppVersion, setMobileAppVersion] = useState(null);
+  // Check app version once
+  useEffect(() => {
+    if (!mobileAppVersion && window.isCordova) {
+      codePush.getCurrentPackage((localPackage) => {
+        if (!localPackage) {
+          console.log('CodePush: No updates have been installed yet');
+          setMobileAppVersion(null);
+          return;
+        }
+
+        const {
+          appVersion, // The native version of the application this package update is intended for.
+          description, // same as given during deployment
+          // isFirstRun, // flag indicating if the current application run is the first one after the package was applied.
+          label, // The internal label automatically given to the update by the CodePush server, such as v5. This value uniquely identifies the update within it's deployment
+        } = localPackage;
+
+        setMobileAppVersion(`${appVersion} ${label} (${description})`);
+      }, err => console.error(err));
+    }
+  }, []);
+
   return (
     <div className="mobile-info-tab">
       <div className="mobile-watermark brightmode">
@@ -47,6 +70,9 @@ const MobileInfoTab = () => {
 
       <div className="info-text">
         <ColorBlindCheckbox />
+        { mobileAppVersion ? (
+          <p>{`App version: ${mobileAppVersion}`}</p>
+        ) : null}
         <p>
           {__('panel-initial-text.thisproject')}
           {' '}