[Dev] Main Menu: Show branch name for dev and staging builds (#1719)

package-lock.json

@@ -64,6 +64,7 @@
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "eslint-plugin-teactn": "git+https://github.com/korenskoy/eslint-plugin-teactn#c2c39dd005d58c07c24c4361de804dce1c6261b5",
+        "git-revision-webpack-plugin": "^5.0.0",
         "html-webpack-plugin": "^5.5.0",
         "husky": "^7.0.4",
         "jest": "^27.5.0",
@@ -7811,6 +7812,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/git-revision-webpack-plugin": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/git-revision-webpack-plugin/-/git-revision-webpack-plugin-5.0.0.tgz",
+      "integrity": "sha512-RptQN/4UKcEPkCBmRy8kLPo5i8MnF8+XfAgFYN9gbwmKLTLx4YHsQw726H+C5+sIGDixDkmGL3IxPA2gKo+u4w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -23393,6 +23406,13 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "git-revision-webpack-plugin": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/git-revision-webpack-plugin/-/git-revision-webpack-plugin-5.0.0.tgz",
+      "integrity": "sha512-RptQN/4UKcEPkCBmRy8kLPo5i8MnF8+XfAgFYN9gbwmKLTLx4YHsQw726H+C5+sIGDixDkmGL3IxPA2gKo+u4w==",
+      "dev": true,
+      "requires": {}
+    },
     "glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",

package.json

@@ -4,11 +4,12 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "cross-env APP_ENV=development webpack serve --env mode=dev --env isDevServer --mode development --config ./webpack.config.js",
+    "dev": "cross-env APP_ENV=development APP_VERSION=$(npm run print_version --silent) webpack serve --env mode=dev --env isDevServer --mode development --config ./webpack.config.js",
     "build": "webpack --mode production",
-    "build:staging": "rm -rf dist/ && APP_ENV=staging npm run build && ./deploy/copy_to_dist.sh",
+    "build:staging": "rm -rf dist/ && APP_ENV=staging APP_VERSION=$(npm run print_version --silent) npm run build && ./deploy/copy_to_dist.sh",
     "build:production": "npm i && rm -rf dist/ && APP_VERSION=$(npm run inc_version --silent) APP_ENV=production npm run build && ./deploy/copy_to_dist.sh",
     "deploy:production": "npm run build:production && git add -A && git commit -a -m '[Build]' --no-verify && git push",
+    "print_version": "node -p -e \"require('./package.json').version\"",
     "inc_version": "echo $((`cat .patch-version` + 1)) > .patch-version && echo \"$(node -p -e \"require('./package.json').version.match(/^\\d+\\.\\d+/)[0]\").$(cat .patch-version)\"",
     "lint": "tsc && stylelint \"**/*.{css,scss}\" && eslint . --ext .ts,.tsx --ignore-pattern src/lib/gramjs",
     "lint:fix": "stylelint . && npm run lint -- --fix",
@@ -73,6 +74,7 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-teactn": "git+https://github.com/korenskoy/eslint-plugin-teactn#c2c39dd005d58c07c24c4361de804dce1c6261b5",
+    "git-revision-webpack-plugin": "^5.0.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "jest": "^27.5.0",

src/components/left/main/LeftMainHeader.tsx

@@ -8,7 +8,7 @@ import { ApiChat } from '../../../api/types';
 import { GlobalState } from '../../../global/types';
 
 import {
-  ANIMATION_LEVEL_MAX, APP_NAME, APP_VERSION, FEEDBACK_URL,
+  ANIMATION_LEVEL_MAX, APP_NAME, APP_REVISION, APP_VERSION, DEBUG, FEEDBACK_URL,
 } from '../../../config';
 import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
 import buildClassName from '../../../util/buildClassName';
@@ -206,7 +206,7 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
       <div id="LeftMainHeader" className="left-header">
         <DropdownMenu
           trigger={MainButton}
-          footer={`${APP_NAME} ${APP_VERSION}`}
+          footer={`${APP_NAME} ${DEBUG ? APP_REVISION : APP_VERSION}`}
         >
           <MenuItem
             icon="saved-messages"

src/config.ts

@@ -1,8 +1,6 @@
-export const PAGE_TITLE = 'Telegram';
-export const INACTIVE_MARKER = ' [Inactive]';
-
-export const APP_NAME = process.env.APP_NAME || 'Telegram WebZ';
-export const APP_VERSION = process.env.APP_VERSION || 'dev';
+export const APP_NAME = 'Telegram WebZ';
+export const APP_VERSION = process.env.APP_VERSION!;
+export const APP_REVISION = process.env.APP_REVISION;
 
 export const DEBUG = (
   process.env.APP_ENV !== 'production' && process.env.APP_ENV !== 'perf' && process.env.APP_ENV !== 'test'
@@ -15,6 +13,9 @@ export const IS_PERF = process.env.APP_ENV === 'perf';
 export const DEBUG_ALERT_MSG = 'Shoot!\nSomething went wrong, please see the error details in Dev Tools Console.';
 export const DEBUG_GRAMJS = false;
 
+export const PAGE_TITLE = 'Telegram';
+export const INACTIVE_MARKER = ' [Inactive]';
+
 export const SESSION_USER_KEY = 'user_auth';
 export const LEGACY_SESSION_KEY = 'GramJs:sessionId';
 

webpack.config.js

@@ -9,6 +9,11 @@ const HtmlPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
+
+const gitRevisionPlugin = new GitRevisionPlugin();
+const branch = process.env.HEAD || gitRevisionPlugin.branch();
+const appRevision = (!branch || branch === 'HEAD') ? gitRevisionPlugin.commithash().substring(0, 7) : branch;
 
 dotenv.config();
 
@@ -114,12 +119,12 @@ module.exports = (env = {}, argv = {}) => {
         ignoreOrder: true,
       }),
       new EnvironmentPlugin({
-        APP_NAME: 'Telegram WebZ',
-        APP_VERSION: 'dev',
         APP_ENV: 'production',
-        TELEGRAM_T_API_ID: '',
-        TELEGRAM_T_API_HASH: '',
-        TEST_SESSION: '',
+        APP_VERSION: undefined,
+        APP_REVISION: appRevision,
+        TELEGRAM_T_API_ID: undefined,
+        TELEGRAM_T_API_HASH: undefined,
+        TEST_SESSION: null,
       }),
       new ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],