Add CommitID to logged information at start for sample apps (#4067)

* Add BuildVersionOverlay component to display build version

* Add commit SHA as environment variable

* Inject env in webpack

* Fix environment variable reference in webpack config

* Update build version and remove unused code

* Add commit ID to build version overlay

* Update __COMMITID__ variable to use REACT_APP_COMMIT_SHA environment variable

* Update ACS sample apps with commit ID

* Fix commit ID variable assignment

* Change files

* Duplicate change files for beta release

* Make messages consistent

Author: palatter

.github/workflows/alpha-release.yml

@@ -13,7 +13,7 @@ jobs:
   build_and_test:
     name: Build and Test
     runs-on: ubuntu-latest
-    permissions: 
+    permissions:
       contents: write
     steps:
       # Check-out repo

.github/workflows/deploy-azure-webapps.yml

@@ -42,6 +42,9 @@ jobs:
       - name: Install Rush
         run: npm install -g @microsoft/rush@5.112.2
 
+      - name: Set commit SHA as environment variable
+        run: echo "REACT_APP_COMMIT_SHA=${GITHUB_SHA::7}" >> $GITHUB_ENV
+
       - name: Install Dependencies
         run: rush install --max-install-attempts 3
 

change-beta/@azure-communication-react-b3ee6c75-c8e2-4660-bc9c-1f034d47d6d7.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "",
+  "comment": "Add commitID to console logged message for azure deployed sample apps.",
+  "packageName": "@azure/communication-react",
+  "email": "73612854+palatter@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-b3ee6c75-c8e2-4660-bc9c-1f034d47d6d7.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "",
+  "comment": "Add commitID to console logged message for azure deployed sample apps.",
+  "packageName": "@azure/communication-react",
+  "email": "73612854+palatter@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

common/config/webpack/sampleapp.webpack.config.js

@@ -68,7 +68,8 @@ const webpackConfig = (sampleAppDir, env, babelConfig) => {
         __CALLINGVERSION__: JSON.stringify(require(path.resolve(sampleAppDir, 'package.json')).dependencies['@azure/communication-calling']),
         __CHATVERSION__: JSON.stringify(require(path.resolve(sampleAppDir, 'package.json')).dependencies['@azure/communication-chat']),
         __COMMUNICATIONREACTVERSION__: JSON.stringify(require(path.resolve(sampleAppDir, 'package.json')).dependencies['@azure/communication-react']),
-        __BUILDTIME__: JSON.stringify(new Date().toLocaleString())
+        __BUILDTIME__: JSON.stringify(new Date().toLocaleString()),
+        __COMMITID__: `"${process.env.REACT_APP_COMMIT_SHA || ''}"`,
       }),
       new BundleAnalyzerPlugin({
         analyzerMode: 'json'

samples/CallWithChat/src/app/App.tsx

@@ -11,6 +11,7 @@ import {
   buildTime,
   callingSDKVersion,
   chatSDKVersion,
+  commitID,
   communicationReactSDKVersion,
   createGroupId,
   ensureJoinableCallLocatorPushedToUrl,
@@ -51,7 +52,7 @@ interface CallWithChatArgs {
 type AppPages = 'home' | 'call' | 'error';
 
 console.log(
-  `ACS sample Call with Chat app. Last Updated ${buildTime} Using @azure/communication-calling:${callingSDKVersion}, @azure/communication-chat:${chatSDKVersion}, and @azure/communication-react:${communicationReactSDKVersion}`
+  `ACS sample Call with Chat app. Last Updated ${buildTime} with CommitID:${commitID} using @azure/communication-calling:${callingSDKVersion}, @azure/communication-chat:${chatSDKVersion}, and @azure/communication-react:${communicationReactSDKVersion}`
 );
 
 const App = (): JSX.Element => {

samples/CallWithChat/src/app/utils/AppUtils.ts

@@ -88,3 +88,6 @@ export const chatSDKVersion = __CHATVERSION__;
 
 declare let __COMMUNICATIONREACTVERSION__: string; //Injected by webpack
 export const communicationReactSDKVersion = __COMMUNICATIONREACTVERSION__;
+
+declare let __COMMITID__: string; //Injected by webpack
+export const commitID = __COMMITID__;

samples/CallWithChat/src/app/utils/utils.ts

@@ -1,50 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-declare let __BUILDTIME__: string; // Injected by webpack
-declare let __CHATVERSION__: string; // Injected by webpack
-export const getChatSDKVersion = (): string => __CHATVERSION__;
-export const getBuildTime = (): string => __BUILDTIME__;
-export const CAT = '🐱';
-export const MOUSE = '🐭';
-export const KOALA = '🐨';
-export const OCTOPUS = '🐙';
-export const MONKEY = '🐵';
-export const FOX = '🦊';
-
-export const getBackgroundColor = (avatar: string): { backgroundColor: string } => {
-  switch (avatar) {
-    case CAT:
-      return {
-        backgroundColor: 'rgb(255, 250, 228)'
-      };
-    case MOUSE:
-      return {
-        backgroundColor: 'rgb(232, 242, 249)'
-      };
-    case KOALA:
-      return {
-        backgroundColor: 'rgb(237, 232, 230)'
-      };
-    case OCTOPUS:
-      return {
-        backgroundColor: 'rgb(255, 240, 245)'
-      };
-    case MONKEY:
-      return {
-        backgroundColor: 'rgb(255, 245, 222)'
-      };
-    case FOX:
-      return {
-        backgroundColor: 'rgb(255, 231, 205)'
-      };
-    default:
-      return {
-        backgroundColor: 'rgb(255, 250, 228)'
-      };
-  }
-};
-
 /**
  * Function to detect iOS devices like IPhones, IPads, and IPods
  */

samples/Calling/src/app/App.tsx

@@ -15,6 +15,7 @@ import React, { useEffect, useState } from 'react';
 import {
   buildTime,
   callingSDKVersion,
+  commitID,
   communicationReactSDKVersion,
   createGroupId,
   fetchTokenResponse,
@@ -39,7 +40,7 @@ import { UnsupportedBrowserPage } from './views/UnsupportedBrowserPage';
 setLogLevel('error');
 
 console.log(
-  `ACS sample calling app. Last Updated ${buildTime} Using @azure/communication-calling:${callingSDKVersion} and @azure/communication-react:${communicationReactSDKVersion}`
+  `ACS sample calling app. Last Updated ${buildTime} with CommitID:${commitID} using @azure/communication-calling:${callingSDKVersion} and @azure/communication-react:${communicationReactSDKVersion}`
 );
 
 initializeIcons();

samples/Calling/src/app/utils/AppUtils.ts

@@ -142,3 +142,6 @@ export const callingSDKVersion = __CALLINGVERSION__;
 
 declare let __COMMUNICATIONREACTVERSION__: string; //Injected by webpack
 export const communicationReactSDKVersion = __COMMUNICATIONREACTVERSION__;
+
+declare let __COMMITID__: string; //Injected by webpack
+export const commitID = __COMMITID__;