fix: [#9506] Update About page to show correct SDK runtime version

Composer/packages/client/config/env.js

@@ -95,7 +95,6 @@ function getClientEnvironment(publicUrl) {
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
         GIT_SHA: getGitSha().toString().replace('\n', ''),
-        SDK_PACKAGE_VERSION: '4.12.0', // TODO: change this when Composer supports custom schema/custom runtime
         COMPOSER_VERSION: getComposerVersion(),
         LOCAL_PUBLISH_PATH:
           process.env.LOCAL_PUBLISH_PATH || path.resolve(process.cwd(), '../../../extensions/localPublish/hostedBots'),

Composer/packages/client/src/App.tsx

@@ -31,8 +31,14 @@ export const App: React.FC = () => {
   const [isClosing, setIsClosing] = useState(false);
   const [listener, setListener] = useState<{ destroy(): boolean }>({} as any);
 
-  const { fetchExtensions, fetchFeatureFlags, checkNodeVersion, performAppCleanupOnQuit, setMachineInfo } =
-    useRecoilValue(dispatcherState);
+  const {
+    fetchExtensions,
+    fetchFeatureFlags,
+    checkNodeVersion,
+    setBotBuilderVersion,
+    performAppCleanupOnQuit,
+    setMachineInfo,
+  } = useRecoilValue(dispatcherState);
   const updateFile = useRecoilCallback((callbackHelpers: CallbackInterface) => async ({ projectId, value }) => {
     callbackHelpers.set(lgFileState({ projectId, lgFileId: value.id }), value);
   });
@@ -53,6 +59,7 @@ export const App: React.FC = () => {
 
   useEffect(() => {
     checkNodeVersion();
+    setBotBuilderVersion();
     fetchExtensions();
     fetchFeatureFlags();
 

Composer/packages/client/src/pages/about/About.tsx

@@ -11,7 +11,7 @@ import { generateUniqueId } from '@bfc/shared';
 import { useRecoilValue } from 'recoil';
 
 import { isElectron } from '../../utils/electronUtil';
-import { userSettingsState } from '../../recoilModel';
+import { userSettingsState, botBuilderVersionState } from '../../recoilModel';
 
 import * as about from './styles';
 
@@ -27,6 +27,8 @@ const getLocaleA11yStatementLink = (locale: string) => {
 export const About: React.FC<RouteComponentProps> = () => {
   const { appLocale } = useRecoilValue(userSettingsState);
   const a11yStatementLink = getLocaleA11yStatementLink(appLocale);
+  const botBuilderVersion = useRecoilValue(botBuilderVersionState);
+
   return (
     <div css={about.content} role="main">
       <div css={about.body}>
@@ -63,14 +65,50 @@ export const About: React.FC<RouteComponentProps> = () => {
         <div css={about.diagnosticsInfo}>
           <div css={about.diagnosticsInfoText}>
             <div css={about.diagnosticsInfoTextAlignLeft}>{formatMessage(`SDK runtime packages`)}</div>
-            <div css={about.diagnosticsInfoTextAlignLeft}>
-              <Link
-                href={`https://github.com/microsoft/botframework-sdk/releases/tag/${process.env.SDK_PACKAGE_VERSION}`}
-                style={{ marginLeft: '5px', textDecoration: 'underline' }}
-                target={'_blank'}
-              >
-                {process.env.SDK_PACKAGE_VERSION || 'Unknown'}
-              </Link>
+            <div css={about.diagnosticsInfoTextAlignLeft} style={{ display: 'flex', flexDirection: 'column' }}>
+              <p style={{ margin: '0', marginLeft: '10px' }}>
+                <span style={{ opacity: '75%', marginRight: '5px' }}>DotNet:</span>
+                {botBuilderVersion.dotnet || '...'} (
+                <Link
+                  href={`https://www.nuget.org/packages/Microsoft.Bot.Builder.Dialogs.Adaptive.Runtime/${botBuilderVersion.dotnet}`}
+                  style={{ textDecoration: 'underline' }}
+                  target={'_blank'}
+                >
+                  nuget
+                </Link>
+                ,
+                <Link
+                  href={`https://github.com/microsoft/botbuilder-dotnet/releases/tag/${botBuilderVersion.dotnet}`}
+                  style={{ marginLeft: '3px', textDecoration: 'underline' }}
+                  target={'_blank'}
+                >
+                  release
+                </Link>
+                )
+              </p>
+              <p style={{ margin: '0', marginLeft: '10px' }}>
+                <span style={{ opacity: '75%', marginRight: '5px' }}>JavaScript:</span>
+                {botBuilderVersion.js || '...'} (
+                <Link
+                  href={`https://www.npmjs.com/package/botbuilder-dialogs-adaptive-runtime/v/${botBuilderVersion.js}`}
+                  style={{ textDecoration: 'underline' }}
+                  target={'_blank'}
+                >
+                  npm
+                </Link>
+                ,
+                <Link
+                  href={`https://github.com/microsoft/botbuilder-js/releases/tag/${botBuilderVersion.js.replace(
+                    '-preview',
+                    '',
+                  )}`}
+                  style={{ marginLeft: '3px', textDecoration: 'underline' }}
+                  target={'_blank'}
+                >
+                  release
+                </Link>
+                )
+              </p>
             </div>
           </div>
         </div>

Composer/packages/client/src/pages/about/styles.js

@@ -39,7 +39,7 @@ export const smallerText = css`
 export const diagnosticsInfoText = css`
   display: flex;
   justify-content: space-between;
-  width: 550px;
+  max-width: 700px;
   font-size: 24px;
 `;
 

Composer/packages/client/src/recoilModel/atoms/appState.ts

@@ -332,6 +332,11 @@ export const userHasNodeInstalledState = atom<boolean>({
   default: true,
 });
 
+export const botBuilderVersionState = atom<{ dotnet: string; js: string }>({
+  key: getFullyQualifiedKey('botBuilderVersion'),
+  default: { dotnet: '', js: '' },
+});
+
 export const warnAboutDotNetState = atom<boolean>({
   key: getFullyQualifiedKey('warnAboutDotNetState'),
   default: false,

Composer/packages/client/src/recoilModel/dispatchers/application.ts

@@ -5,6 +5,7 @@
 import { CallbackInterface, useRecoilCallback } from 'recoil';
 import debounce from 'lodash/debounce';
 import formatMessage from 'format-message';
+import { getBotBuilderVersion } from '@bfc/shared';
 
 import {
   appUpdateState,
@@ -24,6 +25,7 @@ import {
   showWarningDiagnosticsState,
   projectsForDiagnosticsFilterState,
   templateFeedUrlState,
+  botBuilderVersionState,
 } from '../atoms/appState';
 import { AppUpdaterStatus, CreationFlowStatus, CreationFlowType } from '../../constants';
 import OnboardingState from '../../utils/onboardingStorage';
@@ -161,6 +163,18 @@ export const applicationDispatcher = () => {
     }
   });
 
+  const setBotBuilderVersion = useRecoilCallback(({ set }: CallbackInterface) => async () => {
+    try {
+      const versions = await getBotBuilderVersion();
+      set(botBuilderVersionState, versions);
+    } catch (err) {
+      set(applicationErrorState, {
+        message: formatMessage('Error getting BotBuilder version from BotFramework-Components repository'),
+        summary: err.message,
+      });
+    }
+  });
+
   const fetchTemplateFeedUrl = useRecoilCallback(({ set }: CallbackInterface) => async () => {
     try {
       const response = await httpClient.get(`/assets/templateFeedUrl`);
@@ -234,5 +248,6 @@ export const applicationDispatcher = () => {
     setProjectsForDiagnosticsFilter,
     fetchTemplateFeedUrl,
     setTemplateFeedUrl,
+    setBotBuilderVersion,
   };
 };

Composer/packages/client/src/telemetry/TelemetryClient.ts

@@ -56,7 +56,6 @@ export default class TelemetryClient {
       ...this._additionalProperties?.(),
       timestamp: Date.now(),
       composerVersion: process.env.COMPOSER_VERSION || 'unknown',
-      sdkPackageVersion: process.env.SDK_PACKAGE_VERSION || 'unknown',
     };
   }
 }

Composer/packages/client/src/telemetry/useInitializeLogger.ts

@@ -6,7 +6,13 @@ import { useRecoilValue } from 'recoil';
 import { PageNames } from '@bfc/shared';
 import camelCase from 'lodash/camelCase';
 
-import { currentProjectIdState, dispatcherState, featureFlagsState, userSettingsState } from '../recoilModel';
+import {
+  currentProjectIdState,
+  dispatcherState,
+  featureFlagsState,
+  userSettingsState,
+  botBuilderVersionState,
+} from '../recoilModel';
 import { getPageName } from '../utils/getPageName';
 import { useLocation } from '../utils/hooks';
 
@@ -19,6 +25,7 @@ export const useInitializeLogger = () => {
   const rootProjectId = useRecoilValue(currentProjectIdState);
   const { telemetry } = useRecoilValue(userSettingsState);
   const featureFlags = useRecoilValue(featureFlagsState);
+  const botBuilderVersion = useRecoilValue(botBuilderVersionState);
   const reducedFeatureFlags = Object.entries(featureFlags).reduce(
     (acc, [key, { enabled }]) => ({
       ...acc,
@@ -33,7 +40,12 @@ export const useInitializeLogger = () => {
 
   const page = useMemo<PageNames>(() => getPageName(pathname), [pathname]);
 
-  TelemetryClient.setup(telemetry, { rootProjectId, page, ...reducedFeatureFlags });
+  TelemetryClient.setup(telemetry, {
+    rootProjectId,
+    page,
+    sdkPackageVersion: botBuilderVersion,
+    ...reducedFeatureFlags,
+  });
 
   useEffect(() => {
     // Update user settings when the user opens the app to ensure

Composer/packages/lib/shared/src/getBotBuilderVersion.ts

@@ -0,0 +1,63 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import axios from 'axios';
+
+/**
+ * Function created to retrieve BotBuilder versions from BotFramework-Components repository containing the following example content as reference:
+ *
+ * ```js
+ * // Copyright (c) Microsoft Corporation.
+ * // Licensed under the MIT License.
+ *
+ * const dotnet = {
+ *   name: 'dotnet',
+ *   defaultSdkVersion: '4.18.1',
+ * };
+ *
+ * const js = {
+ *   name: 'js',
+ *   defaultSdkVersion: '4.18.0-preview',
+ * };
+ *
+ * module.exports = { dotnet, js };
+ * ```
+ */
+const getField = (content: string, path: string) => {
+  const [key, ...fields] = path.split('.');
+  const objectPath = fields.reduce((acc, val, i, arr) => {
+    const objKey = i < arr.length - 1 ? '{' : '';
+    return acc + `.+?(?<=${val}:${objKey})`;
+  }, '');
+  const withQuotes = `('|")(.+?)('|")(}|,)`;
+  const withoutQuotes = `\\w+|\\d+`;
+  const pattern = `${key}={${objectPath}(${withQuotes}|${withoutQuotes})`;
+  const oneLine = content.replace(/\r?\n|\r|\s+/g, '');
+  // eslint-disable-next-line security/detect-non-literal-regexp
+  const regex = oneLine.match(new RegExp(pattern));
+  if (!regex) {
+    return;
+  }
+  const value = regex[1].match(withQuotes) ? regex[3] : regex[1];
+  return value;
+};
+
+/**
+ * Gets BotBuilder version for DotNet and JavaScript from BotFramework-Components repository.
+ */
+export const getBotBuilderVersion = async () => {
+  const defaultValues = { dotnet: 'unknown', js: 'unknown' };
+  try {
+    const url =
+      'https://raw.githubusercontent.com/microsoft/botframework-components/main/generators/generator-bot-adaptive/platforms.js';
+    const { data } = await axios.get(url);
+    const version = {
+      dotnet: getField(data, 'dotnet.defaultSdkVersion') || defaultValues.dotnet,
+      js: getField(data, 'js.defaultSdkVersion') || defaultValues.js,
+    };
+    return version;
+  } catch (e) {
+    console?.error(e);
+    return defaultValues;
+  }
+};

Composer/packages/lib/shared/src/index.ts

@@ -17,6 +17,7 @@ export * from './EditorAPI';
 export * from './featureFlagUtils';
 export * from './functionUtils';
 export * from './generateUniqueId';
+export * from './getBotBuilderVersion';
 export * from './icons';
 export * from './labelMap';
 export * from './lgUtils';

extensions/azurePublish/yarn-berry.lock

@@ -2009,7 +2009,7 @@ __metadata:
 
 "@bfc/shared@file:../../Composer/packages/lib/shared::locator=azurePublish%40workspace%3A.":
   version: 0.0.0
-  resolution: "@bfc/shared@file:../../Composer/packages/lib/shared#../../Composer/packages/lib/shared::hash=a5867b&locator=azurePublish%40workspace%3A."
+  resolution: "@bfc/shared@file:../../Composer/packages/lib/shared#../../Composer/packages/lib/shared::hash=6d4444&locator=azurePublish%40workspace%3A."
   dependencies:
     "@botframework-composer/types": "*"
     format-message: 6.2.4
@@ -2023,7 +2023,7 @@ __metadata:
     react: 16.13.1
     react-dom: 16.13.1
     tslib: 2.4.0
-  checksum: ebeeecad54bdc747bf37541b84ab31423f3450057a46dcf078683c02b6204b4d26c33ad62e0f9e9b7726c53ae4d36a3406af1b42b7f6a758692229c8ba07c459
+  checksum: f87ccf0570136fd48e8baacdfe7c27d33801bbb9745b83614cf0ba3ad6b3a928f39aefb02457bf6c30a4972fd6332a9dbf1ef3a298d0fc062dc103c04cc104a9
   languageName: node
   linkType: hard
 

extensions/azurePublishNew/yarn-berry.lock

@@ -2046,7 +2046,7 @@ __metadata:
 
 "@bfc/shared@file:../../Composer/packages/lib/shared::locator=azure-publish-new%40workspace%3A.":
   version: 0.0.0
-  resolution: "@bfc/shared@file:../../Composer/packages/lib/shared#../../Composer/packages/lib/shared::hash=a5867b&locator=azure-publish-new%40workspace%3A."
+  resolution: "@bfc/shared@file:../../Composer/packages/lib/shared#../../Composer/packages/lib/shared::hash=6d4444&locator=azure-publish-new%40workspace%3A."
   dependencies:
     "@botframework-composer/types": "*"
     format-message: 6.2.4
@@ -2060,7 +2060,7 @@ __metadata:
     react: 16.13.1
     react-dom: 16.13.1
     tslib: 2.4.0
-  checksum: ebeeecad54bdc747bf37541b84ab31423f3450057a46dcf078683c02b6204b4d26c33ad62e0f9e9b7726c53ae4d36a3406af1b42b7f6a758692229c8ba07c459
+  checksum: f87ccf0570136fd48e8baacdfe7c27d33801bbb9745b83614cf0ba3ad6b3a928f39aefb02457bf6c30a4972fd6332a9dbf1ef3a298d0fc062dc103c04cc104a9
   languageName: node
   linkType: hard