[#164416800] Move overlay info to instabug and profile screen (#867)

* Move overlay info to instabug and profile screen

* Fixes post review

README.md

@@ -149,6 +149,7 @@ Here is a still NOT complete table of the environment variables you can set:
 
 | NAME                           | DEFAULT |                                                                                                 |
 |--------------------------------|---------|-------------------------------------------------------------------------------------------------|
+| `DISPLAY_VERSION_INFO_OVERLAY` | NO | If set to "YES" the app version, backend version and current screen name are rendered in an overlay view. |
 | `DEBUG_BIOMETRIC_IDENTIFICATION` | NO      | If set to "YES" an Alert is rendered with the exact result code of the biometric identification. |
 | `TOT_MESSAGE_FETCH_WORKERS` | 5 | Number of workers to create for message detail fetching. This means that we will have at most a number of concurrent fetches (of the message detail) equal to the number of the workers.
 

locales/en/index.yml

@@ -10,8 +10,6 @@ global:
   markdown:
     reference: !include markdown_reference.md
     decodeError: Message can't be decoded
-  app:
-    version: Version
   buttons:
     delete: Delete
     cancel: Cancel
@@ -90,6 +88,8 @@ profile:
         description: send to your email all your account’s data in an open format
     developersSectionHeader: Developers
     accountSectionHeader: Account
+    appVersion: App Version
+    backendVersion: Backend Version
 navigation:
   messages: Messages
   profile: Profile

locales/it/index.yml

@@ -11,8 +11,6 @@ global:
   markdown:
     reference: !include markdown_reference.md
     decodeError: Il messaggio non può essere decodificato
-  app:
-    version: Versione
   buttons:
     delete: Elimina
     cancel: Annulla
@@ -94,6 +92,8 @@ profile:
           un formato aperto
     developersSectionHeader: Sviluppatori
     accountSectionHeader: Account
+    appVersion:  Versione App
+    backendVersion: Versione Backend
 navigation:
   messages: Messaggi
   profile: Profilo

ts/RootContainer.tsx

@@ -13,6 +13,7 @@ import { initialiseInstabug } from "./boot/configureInstabug";
 import configurePushNotifications from "./boot/configurePushNotification";
 import { LightModalRoot } from "./components/ui/LightModal";
 import VersionInfoOverlay from "./components/VersionInfoOverlay";
+import { shouldDisplayVersionInfoOverlay } from "./config";
 import IdentificationModal from "./IdentificationModal";
 import Navigation from "./navigation";
 import {
@@ -116,7 +117,7 @@ class RootContainer extends React.PureComponent<Props> {
     return (
       <Root>
         <StatusBar barStyle="dark-content" />
-        {this.props.isDebugModeEnabled && <VersionInfoOverlay />}
+        {shouldDisplayVersionInfoOverlay && <VersionInfoOverlay />}
         <Navigation />
         <IdentificationModal />
         <LightModalRoot />

ts/boot/configureInstabug.ts

@@ -11,6 +11,12 @@ import variables from "../theme/variables";
 
 type InstabugLocales = { [k in Locales]: LocaleKey };
 
+type InstabugUserAttributeKeys =
+  | "backendVersion"
+  | "activeScreen"
+  | "fiscalcode"
+  | "identityProvider";
+
 const instabugLocales: InstabugLocales = {
   en: Instabug.locale.english,
   it: Instabug.locale.italian
@@ -29,6 +35,13 @@ export const initialiseInstabug = () => {
   );
 };
 
+export const setInstabugUserAttribute = (
+  attributeKey: InstabugUserAttributeKeys,
+  attributeValue: string
+) => {
+  Instabug.setUserAttribute(attributeKey, attributeValue);
+};
+
 export const setInstabugProfileAttributes = (
   profile: UserProfile,
   maybeIdp: Option<IdentityProvider>
@@ -38,9 +51,9 @@ export const setInstabugProfileAttributes = (
     `${profile.name} ${profile.family_name}`
   );
 
-  Instabug.setUserAttribute("fiscalcode", profile.fiscal_code);
+  setInstabugUserAttribute("fiscalcode", profile.fiscal_code);
 
   maybeIdp.fold(undefined, (idp: IdentityProvider) =>
-    Instabug.setUserAttribute("identityProvider", idp.entityID)
+    setInstabugUserAttribute("identityProvider", idp.entityID)
   );
 };

ts/config.ts

@@ -72,6 +72,9 @@ export const totMessageFetchWorkers = t.Integer.decode(
   Config.TOT_MESSAGE_FETCH_WORKERS
 ).getOrElse(DEFAULT_TOT_MESSAGE_FETCH_WORKERS);
 
+export const shouldDisplayVersionInfoOverlay =
+  Config.DISPLAY_VERSION_INFO_OVERLAY === "YES";
+
 export function isDevEnvironment() {
   return environment === "DEV";
 }

ts/sagas/backendInfo.ts

@@ -4,6 +4,7 @@ import { BasicResponseType } from "italia-ts-commons/lib/requests";
 
 import { ServerInfo } from "../../definitions/backend/ServerInfo";
 import { BackendPublicClient } from "../api/backendPublic";
+import { setInstabugUserAttribute } from "../boot/configureInstabug";
 import { apiUrlPrefix } from "../config";
 import {
   backendInfoLoadFailure,
@@ -36,6 +37,10 @@ function* backendInfoWatcher(): IterableIterator<Effect> {
 
     if (backendInfoResponse && backendInfoResponse.status === 200) {
       yield put(backendInfoLoadSuccess(backendInfoResponse.value));
+      setInstabugUserAttribute(
+        "backendVersion",
+        backendInfoResponse.value.version
+      );
       // tslint:disable-next-line:saga-yield-return-type
       yield call(startTimer, BACKEND_INFO_LOAD_INTERVAL);
     } else {

ts/screens/profile/ProfileMainScreen.tsx

@@ -12,6 +12,7 @@ import {
 } from "native-base";
 import * as React from "react";
 import { Clipboard, StyleSheet, View } from "react-native";
+import DeviceInfo from "react-native-device-info";
 import { NavigationScreenProp, NavigationState } from "react-navigation";
 import { connect } from "react-redux";
 
@@ -74,6 +75,7 @@ class ProfileMainScreen extends React.PureComponent<Props> {
       navigation,
       resetPin,
       logout,
+      backendInfo,
       sessionToken,
       walletToken,
       notificationToken,
@@ -163,6 +165,38 @@ class ProfileMainScreen extends React.PureComponent<Props> {
               </View>
             </ListItem>
 
+            <ListItem>
+              <Button
+                info={true}
+                small={true}
+                onPress={() =>
+                  copyToClipboardWithFeedback(DeviceInfo.getVersion())
+                }
+              >
+                <Text>
+                  {`${I18n.t(
+                    "profile.main.appVersion"
+                  )} ${DeviceInfo.getVersion()}`}
+                </Text>
+              </Button>
+            </ListItem>
+            {backendInfo && (
+              <ListItem>
+                <Button
+                  info={true}
+                  small={true}
+                  onPress={() =>
+                    copyToClipboardWithFeedback(backendInfo.version)
+                  }
+                >
+                  <Text>
+                    {`${I18n.t("profile.main.backendVersion")} ${
+                      backendInfo.version
+                    }`}
+                  </Text>
+                </Button>
+              </ListItem>
+            )}
             {sessionToken && (
               <ListItem>
                 <Button
@@ -240,6 +274,7 @@ class ProfileMainScreen extends React.PureComponent<Props> {
 }
 
 const mapStateToProps = (state: GlobalState) => ({
+  backendInfo: state.backendInfo.serverInfo,
   sessionToken: isLoggedIn(state.authentication)
     ? state.authentication.sessionToken
     : undefined,

ts/store/middlewares/analytics.ts

@@ -5,6 +5,7 @@ import { getType } from "typesafe-actions";
 
 import { mixpanel } from "../../mixpanel";
 
+import { setInstabugUserAttribute } from "../../boot/configureInstabug";
 import {
   analyticsAuthenticationCompleted,
   analyticsAuthenticationStarted,
@@ -347,6 +348,9 @@ export function screenTracking(
       const nextScreen = getCurrentRouteName(store.getState().nav);
 
       if (nextScreen !== currentScreen && mixpanel) {
+        if (nextScreen) {
+          setInstabugUserAttribute("activeScreen", nextScreen);
+        }
         mixpanel
           .track("SCREEN_CHANGE", {
             SCREEN_NAME: nextScreen

ts/store/reducers/debug.ts

@@ -8,7 +8,7 @@ export type DebugState = Readonly<{
 }>;
 
 const initialDebugState: DebugState = {
-  isDebugModeEnabled: true
+  isDebugModeEnabled: false
 };
 
 export function debugReducer(