Merge pull request #1348 from dedis/work-fe1-web-nkocher-deploy-action

Adds a deploy action and some build info

.github/workflows/deploy.yaml

@@ -0,0 +1,71 @@
+# Triggers a new deployment when a release starting with "fe1-" is created.
+
+name: Release and deployment of fe1-web
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  deploy:
+    if:  ${{ startsWith(github.event.release.tag_name, 'fe1-') }}
+    runs-on: ubuntu-latest
+
+    env:
+      base_folder: fe1-web
+
+    defaults:
+      run:
+        working-directory: ./${{ env.base_folder }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      # Save some build information to inject into the APP
+      - name: Get the version
+        id: get_version
+        run: |
+          echo ::set-output name=version::$(echo ${GITHUB_REF/refs\/tags\//})
+          echo ::set-output name=version_file::$(echo ${GITHUB_REF/refs\/tags\//} | tr . _)
+          echo "::set-output name=shortsha::$(git rev-parse --short ${GITHUB_SHA})"
+          echo "::set-output name=buildurl::${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/commit/${GITHUB_SHA}"
+          echo "::set-output name=date::$(date +'%d/%m/%y %H:%M')"
+
+      - name: install
+        run: |
+          npm install
+
+      # Will create a 'web-build/' folder containing the App
+      - name: transpile
+        env:
+          APP_VERSION: ${{ steps.get_version.outputs.version }}
+          APP_SHORT_SHA: ${{ steps.get_version.outputs.shortsha }}
+          APP_BUILD_URL: ${{ steps.get_version.outputs.buildurl }}
+          APP_BUILD_DATE: ${{ steps.get_version.outputs.date }}
+        run: |
+          npm run build-web
+
+      - name: Create tar.gz
+        run: |
+          tar -czvf fe1_web_${{ steps.get_version.outputs.version_file }}.tar.gz ./web-build
+
+      - name: Upload release
+        uses: softprops/action-gh-release@v1
+        if: startsWith(github.ref, 'refs/tags/')
+        with:
+          files: ${{ env.base_folder }}/fe1_web_${{ steps.get_version.outputs.version_file }}.tar.gz
+
+      # Use rsync to deploy the new website
+      - name: Sync
+        env:
+            dest: "fe1pop@${{secrets.FE1_DEPLOY_ADDR}}:www"
+        run: |
+            echo "${{secrets.FE1_DEPLOY_KEY}}" > deploy_key
+            chmod 600 ./deploy_key
+            rsync -chav --delete \
+              -e 'ssh -p ${{secrets.FE1_DEPLOY_PORT}} -i ./deploy_key -o StrictHostKeyChecking=no' \
+              ./web-build/ ${{env.dest}}

fe1-web/app.config.js

@@ -28,6 +28,10 @@ module.exports = {
     entryPoint: './src/App.tsx',
     extra: {
       commitHash: `${gitHash}${isDirty}`,
+      appVersion: process.env.APP_VERSION || 'v0.0.0',
+      buildURL: process.env.APP_BUILD_URL || '#',
+      shortSHA: process.env.APP_SHORT_SHA || `${gitHash}${isDirty}`,
+      buildDate: process.env.APP_BUILD_DATE || '1.1.1970',
     },
   },
 };

fe1-web/src/App.tsx

@@ -10,6 +10,7 @@ import Toast, { ToastProvider } from 'react-native-toast-notifications';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 
+import { BuildInfo } from 'core/components';
 import FeatureContext from 'core/contexts/FeatureContext';
 import { configureKeyPair } from 'core/keypair';
 import AppNavigation, { navigationRef } from 'core/navigation/AppNavigation';
@@ -49,6 +50,7 @@ function App() {
                 {Platform.OS === 'ios' && (
                   <StatusBar barStyle="dark-content" backgroundColor="white" />
                 )}
+                <BuildInfo />
                 <ToastProvider
                   normalColor={Color.primary}
                   successColor={Color.success}

fe1-web/src/core/components/BuildInfo.tsx

@@ -0,0 +1,43 @@
+import Constants from 'expo-constants';
+import React from 'react';
+import { StyleSheet, View, Linking, Text, ViewStyle } from 'react-native';
+
+import { Spacing, Typography } from 'core/styles';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: Spacing.x05,
+    left: Spacing.x05,
+    zIndex: 100,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  } as ViewStyle,
+});
+
+const BuildInfo = () => {
+  return (
+    <View style={styles.container}>
+      <Text
+        style={[Typography.minuscule, Typography.inactive, Typography.code, Typography.uppercase]}>
+        <Text
+          onPress={() =>
+            Linking.openURL(
+              `https://github.com/dedis/popstellar/releases/tag/${Constants?.expoConfig?.extra?.appVersion}`,
+            )
+          }>
+          {Constants?.expoConfig?.extra?.appVersion}
+        </Text>
+        <Text> | </Text>
+        <Text onPress={() => Linking.openURL(Constants?.expoConfig?.extra?.buildURL)}>
+          {Constants?.expoConfig?.extra?.shortSHA}
+        </Text>
+        <Text> | </Text>
+        <Text>{Constants?.expoConfig?.extra?.buildDate}</Text>
+      </Text>
+    </View>
+  );
+};
+
+export default BuildInfo;

fe1-web/src/core/components/__tests__/BuildInfo.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react-native';
+import React from 'react';
+
+import BuildInfo from '../BuildInfo';
+
+describe('BuildInfo', () => {
+  it('renders correctly', () => {
+    const { toJSON } = render(<BuildInfo />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

fe1-web/src/core/components/__tests__/__snapshots__/BuildInfo.test.tsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BuildInfo renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "bottom": 8,
+      "display": "flex",
+      "flexDirection": "row",
+      "left": 8,
+      "position": "absolute",
+      "zIndex": 100,
+    }
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "fontSize": 8,
+          "lineHeight": 1,
+        },
+        Object {
+          "color": "#8E8E8E",
+        },
+        Object {
+          "fontFamily": "Courier New",
+        },
+        Object {
+          "textTransform": "uppercase",
+        },
+      ]
+    }
+  >
+    <Text
+      onPress={[Function]}
+    />
+    <Text>
+       | 
+    </Text>
+    <Text
+      onPress={[Function]}
+    />
+    <Text>
+       | 
+    </Text>
+    <Text />
+  </Text>
+</View>
+`;

fe1-web/src/core/components/index.ts

@@ -5,6 +5,7 @@
  * this is the module in which the user interface component should be defined.
  */
 
+export { default as BuildInfo } from './BuildInfo';
 export { default as CameraButton } from './CameraButton';
 export { default as CheckboxList } from './CheckboxList';
 export { default as ConfirmModal } from './ConfirmModal';

fe1-web/src/core/styles/typography.ts

@@ -26,6 +26,11 @@ export const tiny: TextStyle = {
   lineHeight: 14,
 };
 
+export const minuscule: TextStyle = {
+  fontSize: 8,
+  lineHeight: 1,
+};
+
 export const accent: TextStyle = {
   color: accentColor,
 };
@@ -96,3 +101,7 @@ export const importantCentered: TextStyle = {
   ...baseCentered,
   fontWeight: 'bold',
 };
+
+export const uppercase: TextStyle = {
+  textTransform: 'uppercase',
+};

fe1-web/src/features/lao/navigation/LaoNavigation.tsx

@@ -6,7 +6,6 @@ import {
   DrawerItem,
   DrawerItemList,
 } from '@react-navigation/drawer';
-import Constants from 'expo-constants';
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
@@ -39,10 +38,6 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     margin: Spacing.contentSpacing,
   } as ViewStyle,
-  spacer: {} as ViewStyle,
-  drawerFooter: {
-    paddingBottom: Spacing.contentSpacing,
-  } as ViewStyle,
   drawerHeader: {
     marginBottom: Spacing.x05,
   } as ViewStyle,
@@ -106,14 +101,6 @@ const LaoDrawerContent = ({ descriptors, navigation, state }: DrawerContentCompo
           inactiveBackgroundColor={drawerNavigationOptions.drawerInactiveBackgroundColor}
         />
       </DrawerContentScrollView>
-      <View style={styles.spacer} />
-      <View style={styles.drawerFooter}>
-        <Text
-          selectable
-          style={[Typography.base, Typography.centered, Typography.tiny, Typography.inactive]}>
-          {Constants?.expoConfig?.extra?.commitHash}
-        </Text>
-      </View>
     </View>
   );
 };

fe1-web/src/features/lao/navigation/__tests__/__snapshots__/LaoNavigation.test.tsx.snap

@@ -1492,40 +1492,6 @@ exports[`LaoNavigation renders correctly 1`] = `
                                     </View>
                                   </View>
                                 </RCTScrollView>
-                                <View
-                                  style={Object {}}
-                                />
-                                <View
-                                  style={
-                                    Object {
-                                      "paddingBottom": 16,
-                                    }
-                                  }
-                                >
-                                  <Text
-                                    selectable={true}
-                                    style={
-                                      Array [
-                                        Object {
-                                          "color": "#000",
-                                          "fontSize": 20,
-                                          "lineHeight": 26,
-                                          "textAlign": "left",
-                                        },
-                                        Object {
-                                          "textAlign": "center",
-                                        },
-                                        Object {
-                                          "fontSize": 12,
-                                          "lineHeight": 14,
-                                        },
-                                        Object {
-                                          "color": "#8E8E8E",
-                                        },
-                                      ]
-                                    }
-                                  />
-                                </View>
                               </View>
                             </View>
                           </View>