Merge branch 'main' into luhan/fixDummySkill

Composer/packages/client/__tests__/pages/botProjectsSettings/AdapterSettings.test.tsx

@@ -87,7 +87,7 @@ describe('ExternalAdapterSettings', () => {
 
     const link = getByText(/from package manager/);
 
-    expect(link.attributes.getNamedItem('href')?.value).toEqual('plugin/package-manager/package-manager');
+    expect(link.attributes.getNamedItem('href')?.value).toContain('plugin/package-manager/package-manager');
   });
 
   it('brings up the modal', () => {

Composer/packages/client/config/env.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
 const { execSync } = require('child_process');
 
@@ -49,6 +49,14 @@ function getGitSha() {
   }
 }
 
+function getComposerVersion() {
+  try {
+    return fs.readJSONSync(path.join(__dirname, '../../electron-server/package.json')).version;
+  } catch {
+    return 'unknown';
+  }
+}
+
 // We support resolving modules according to `NODE_PATH`.
 // This lets you use absolute paths in imports inside large monorepos:
 // https://github.com/facebook/create-react-app/issues/253.
@@ -87,8 +95,8 @@ 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.2', // TODO: change this when Composer supports custom schema/custom runtime
-        COMPOSER_VERSION: '1.4.0',
+        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'),
         WEBLOGIN_CLIENTID: process.env.WEBLOGIN_CLIENTID,

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

@@ -33,15 +33,15 @@ export const About: React.FC<RouteComponentProps> = () => {
         <div css={about.version}>
           {formatMessage(`Release: `) +
             (isElectron()
-              ? (window as any).appVersion
+              ? process.env.COMPOSER_VERSION
               : `${process.env.COMPOSER_VERSION}-${process.env.GIT_SHA}` || 'Unknown')}
         </div>
         <div css={about.diagnosticsInfo}>
           <div css={about.diagnosticsInfoText}>
             <div css={about.diagnosticsInfoTextAlignLeft}>{formatMessage(`SDK runtime packages`)}</div>
             <div css={about.diagnosticsInfoTextAlignLeft}>
               <Link
-                href={`https://www.nuget.org/packages/Microsoft.Bot.Builder/${process.env.SDK_PACKAGE_VERSION}`}
+                href={`https://github.com/microsoft/botframework-sdk/releases/tag/${process.env.SDK_PACKAGE_VERSION}`}
                 style={{ marginLeft: '5px', textDecoration: 'underline' }}
                 target={'_blank'}
               >
@@ -51,13 +51,18 @@ export const About: React.FC<RouteComponentProps> = () => {
           </div>
         </div>
       </div>
+      <div css={about.linkRow}>
+        <Link href={'https://docs.microsoft.com/en-us/composer/introduction'} styles={about.helpLink} target={'_blank'}>
+          {formatMessage(`Documentation`)}
+        </Link>
+      </div>
       <div css={about.linkRow}>
         <Link
           href={'https://github.com/microsoft/BotFramework-Composer/issues/new/choose'}
           styles={about.helpLink}
           target={'_blank'}
         >
-          {formatMessage(`Getting Help`)}
+          {formatMessage(`Report a bug or request a feature`)}
         </Link>
       </div>
       <div css={about.linkContainer}>

Composer/packages/client/src/pages/botProject/adapters/AdapterSection.tsx

@@ -6,9 +6,9 @@ import { useEffect, useRef } from 'react';
 import formatMessage from 'format-message';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Link as RouterLink } from '@reach/router';
 
 import { title, subtitle, subtext } from '../styles';
-import { navigateTo } from '../../../utils/navigation';
 
 import ExternalAdapterSettings from './ExternalAdapterSettings';
 import ABSChannels from './ABSChannels';
@@ -54,14 +54,12 @@ const AdapterSection = ({ projectId, scrollToSectionId }: Props) => {
             'Find and install more external services to your bot project in <a>package manager</a>. For further guidance, see documentation for <a2>adding external connections.</a2>',
             {
               a: ({ children }) => (
-                <Link
+                <RouterLink
                   key="package-adapter-settings-page"
-                  onClick={() => {
-                    navigateTo(`/bot/${projectId}/plugin/package-manager/package-manager`);
-                  }}
+                  to={`/bot/${projectId}/plugin/package-manager/package-manager`}
                 >
                   {children}
-                </Link>
+                </RouterLink>
               ),
               a2: ({ children }) => (
                 <Link

Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx

@@ -8,11 +8,11 @@ import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
 import { BotSchemas, DialogSetting } from '@bfc/shared';
 import { Link } from 'office-ui-fabric-react/lib/Link';
+import { Link as RouterLink } from '@reach/router';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { JSONSchema7 } from '@botframework-composer/types';
 import { AdapterRecord } from '@botframework-composer/types/src';
 
-import { useRouterCache } from '../../../utils/hooks';
 import { schemasState, settingsState, dispatcherState } from '../../../recoilModel';
 import { subtitle, tableHeaderRow, tableRow, tableRowItem, tableColumnHeader, columnSizes } from '../styles';
 
@@ -35,7 +35,6 @@ const ExternalAdapterSettings = (props: Props) => {
   const schemas = useRecoilValue<BotSchemas>(schemasState(projectId));
   const currentSettings = useRecoilValue<DialogSetting>(settingsState(projectId));
   const { setSettings } = useRecoilValue(dispatcherState);
-  const packageManagerLink = useRouterCache('plugin/package-manager/package-manager');
 
   const adapters: AdapterRecord[] = currentSettings.runtimeSettings?.adapters ?? [];
 
@@ -130,11 +129,11 @@ const ExternalAdapterSettings = (props: Props) => {
     <Fragment>
       <div data-testid="adapterSettings">{externalServices(adapterSchemas)}</div>
       <div key={'subtitle'} css={subtitle}>
-        {formatMessage.rich('<a>Add from package manager</a>.', {
+        {formatMessage.rich('<a>Add from package manager</a>', {
           a: ({ children }) => (
-            <Link key="link" href={packageManagerLink}>
+            <RouterLink key="link" to={`/bot/${projectId}/plugin/package-manager/package-manager`}>
               {children}
-            </Link>
+            </RouterLink>
           ),
         })}
       </div>

Composer/packages/client/src/pages/botProject/create-publish-profile/ProfileFormDialog.tsx

@@ -51,11 +51,6 @@ export const ProfileFormDialog: React.FC<ProfileFormDialogProps> = (props) => {
   const { name, setName, targetType, setTargetType, onDismiss, targets, types, onNext, setType, current } = props;
   const [errorMessage, setErrorMsg] = useState('');
 
-  const updateName = (e, newName) => {
-    setName(newName);
-    isValidateProfileName(newName);
-  };
-
   const isValidateProfileName = (newName) => {
     if (!newName || newName.trim() === '') {
       setErrorMsg(formatMessage('Must have a name'));
@@ -70,6 +65,11 @@ export const ProfileFormDialog: React.FC<ProfileFormDialogProps> = (props) => {
     }
   };
 
+  const updateName = (e, newName) => {
+    setName(newName);
+    isValidateProfileName(newName);
+  };
+
   const targetTypes = useMemo(() => {
     return types.map((t) => ({ key: t.name, text: t.description }));
   }, [types]);
@@ -120,14 +120,15 @@ export const ProfileFormDialog: React.FC<ProfileFormDialogProps> = (props) => {
         </div>
         <Separator css={separator} />
         <DialogFooter>
-          <DefaultButton text={formatMessage('Cancel')} onClick={onDismiss} />
           <PrimaryButton
             disabled={saveDisabled}
+            style={{ margin: '0 4px' }}
             text={formatMessage('Next')}
             onClick={() => {
               onNext();
             }}
           />
+          <DefaultButton style={{ margin: '0 4px' }} text={formatMessage('Cancel')} onClick={onDismiss} />
         </DialogFooter>
       </Fragment>
     </Fragment>

Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatActivityLogItem.tsx

@@ -25,22 +25,21 @@ const renderActivityArrow = (activity) => {
 };
 
 type WebChatActivityLogItemProps = {
-  index: number;
   item: ConversationActivityTrafficItem;
   isSelected?: boolean;
   onClickTraffic: (data: WebChatInspectionData) => void;
 };
 
 export const WebChatActivityLogItem: React.FC<WebChatActivityLogItemProps> = (props) => {
-  const { index, item, isSelected = false, onClickTraffic } = props;
+  const { item, isSelected = false, onClickTraffic } = props;
   const { appLocale } = useRecoilValue(userSettingsState);
 
   const onClick = useCallback(() => {
     onClickTraffic({ item });
   }, [item, onClickTraffic]);
 
   return (
-    <span key={`webchat-activity-item-${index}`} css={[clickable, hoverItem(isSelected), logItem]} onClick={onClick}>
+    <span css={[clickable, hoverItem(isSelected), logItem]} onClick={onClick}>
       {renderTimeStamp(item.timestamp, appLocale)}
       {renderActivityArrow(item.activity)}
       <span css={clickableSegment}>{item.activity.type || 'unknown'}</span>

Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx

@@ -134,7 +134,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
         case 'activity':
           return (
             <WebChatActivityLogItem
-              index={index}
+              key={`webchat-activity-item-${index}`}
               isSelected={itemIsSelected(item, inspectionData)}
               item={item}
               onClickTraffic={onClickTraffic}
@@ -144,7 +144,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
         case 'network':
           return (
             <WebChatNetworkLogItem
-              index={index}
+              key={`webchat-network-item-${index}`}
               isSelected={itemIsSelected(item, inspectionData)}
               item={item}
               onClickTraffic={onClickTraffic}
@@ -154,7 +154,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
         case 'networkError':
           return (
             <WebChatNetworkLogItem
-              index={index}
+              key={`webchat-network-item-${index}`}
               isSelected={itemIsSelected(item, inspectionData)}
               item={item}
               onClickTraffic={onClickTraffic}

Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatNetworkLogItem.tsx

@@ -24,14 +24,13 @@ const redErrorText = css`
 `;
 
 type WebChatNetworkLogItemProps = {
-  index: number;
   item: ConversationNetworkTrafficItem | ConversationNetworkErrorItem;
   isSelected?: boolean;
   onClickTraffic: (data: WebChatInspectionData) => void;
 };
 
 export const WebChatNetworkLogItem: React.FC<WebChatNetworkLogItemProps> = (props) => {
-  const { index, item, isSelected = false, onClickTraffic } = props;
+  const { item, isSelected = false, onClickTraffic } = props;
   const { appLocale } = useRecoilValue(userSettingsState);
   const onClickRequest = useCallback(() => {
     onClickTraffic({ item, mode: 'request' });
@@ -49,7 +48,7 @@ export const WebChatNetworkLogItem: React.FC<WebChatNetworkLogItemProps> = (prop
     ) : null;
 
   return (
-    <div key={`webchat-network-item-${index}`} css={[logItem, hoverItem(isSelected), networkItem]}>
+    <div css={[logItem, hoverItem(isSelected), networkItem]}>
       <span>
         {renderTimeStamp(item.timestamp, appLocale)}
         <span css={[clickableSegment]} onClick={onClickRequest}>

Composer/packages/client/src/shell/lgApi.ts

@@ -10,7 +10,7 @@ import formatMessage from 'format-message';
 import { useResolvers } from '../hooks/useResolver';
 import { Dispatcher } from '../recoilModel/dispatchers';
 
-import { dispatcherState, focusPathState } from './../recoilModel';
+import { designPageLocationState, dispatcherState } from './../recoilModel';
 
 const fileNotFound = (id: string) => formatMessage('LG file {id} not found', { id });
 const TEMPLATE_ERROR = formatMessage('templateName is missing or empty');
@@ -31,13 +31,13 @@ const memoizedDebounce = (func, wait, options = {}) => {
 };
 
 function createLgApi(
-  state: { focusPath: string; projectId: string },
+  state: { dialogId: string; projectId: string },
   actions: Dispatcher,
   lgFileResolver: (id: string) => LgFile | undefined
 ): LgContextApi {
   const getLgTemplates = (id) => {
     if (id === undefined) throw new Error('must have a file id');
-    const focusedDialogId = state.focusPath.split('#').shift() || id;
+    const focusedDialogId = state.dialogId || id;
     const file = lgFileResolver(focusedDialogId);
     if (!file) throw new Error(fileNotFound(id));
     return file.templates;
@@ -148,23 +148,22 @@ function createLgApi(
 }
 
 export function useLgApi(projectId: string) {
-  const focusPath = useRecoilValue(focusPathState(projectId));
+  const { dialogId } = useRecoilValue(designPageLocationState(projectId));
   const actions: Dispatcher = useRecoilValue(dispatcherState);
   const { lgFileResolver } = useResolvers(projectId);
-  const [api, setApi] = useState(createLgApi({ focusPath, projectId }, actions, lgFileResolver));
+  const [api, setApi] = useState(createLgApi({ dialogId, projectId }, actions, lgFileResolver));
 
   useEffect(() => {
-    const newApi = createLgApi({ focusPath, projectId }, actions, lgFileResolver);
+    const newApi = createLgApi({ dialogId, projectId }, actions, lgFileResolver);
     setApi(newApi);
-
     return () => {
       Object.keys(newApi).forEach((apiName) => {
         if (typeof newApi[apiName].flush === 'function') {
           newApi[apiName].flush();
         }
       });
     };
-  }, [projectId, focusPath]);
+  }, [projectId, dialogId]);
 
   return api;
 }

Composer/packages/client/src/shell/luApi.ts

@@ -8,14 +8,14 @@ import formatMessage from 'format-message';
 import debounce from 'lodash/debounce';
 
 import { useResolvers } from '../hooks/useResolver';
-import { dispatcherState, focusPathState } from '../recoilModel';
+import { designPageLocationState, dispatcherState } from '../recoilModel';
 import { Dispatcher } from '../recoilModel/dispatchers';
 
 const fileNotFound = (id: string) => formatMessage(`LU file {id} not found`, { id });
 const INTENT_ERROR = formatMessage('intentName is missing or empty');
 
 function createLuApi(
-  state: { focusPath: string; projectId: string },
+  state: { dialogId: string; projectId: string },
   dispatchers: Dispatcher,
   luFileResolver: (id: string) => LuFile | undefined
 ): LuContextApi {
@@ -65,7 +65,7 @@ function createLuApi(
 
   const getLuIntents = (id: string): LuIntentSection[] => {
     if (id === undefined) throw new Error('must have a file id');
-    const focusedDialogId = state.focusPath.split('#').shift() || id;
+    const focusedDialogId = state.dialogId || id;
     const file = luFileResolver(focusedDialogId);
     if (!file) throw new Error(fileNotFound(id));
     return file.intents;
@@ -90,13 +90,13 @@ function createLuApi(
 }
 
 export function useLuApi(projectId: string) {
-  const focusPath = useRecoilValue(focusPathState(projectId));
+  const { dialogId } = useRecoilValue(designPageLocationState(projectId));
   const dispatchers = useRecoilValue(dispatcherState);
   const { luFileResolver } = useResolvers(projectId);
-  const [api, setApi] = useState(createLuApi({ focusPath, projectId }, dispatchers, luFileResolver));
+  const [api, setApi] = useState(createLuApi({ dialogId, projectId }, dispatchers, luFileResolver));
 
   useEffect(() => {
-    const newApi = createLuApi({ focusPath, projectId }, dispatchers, luFileResolver);
+    const newApi = createLuApi({ dialogId, projectId }, dispatchers, luFileResolver);
     setApi(newApi);
 
     return () => {
@@ -106,7 +106,7 @@ export function useLuApi(projectId: string) {
         }
       });
     };
-  }, [projectId, focusPath]);
+  }, [projectId, dialogId]);
 
   return api;
 }

Composer/packages/electron-server/package.json

@@ -2,7 +2,7 @@
   "name": "@bfc/electron-server",
   "license": "MIT",
   "author": "Microsoft Corporation",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Electron wrapper around Composer that launches Composer as a desktop application.",
   "main": "./build/main.js",
   "engines": {

Composer/packages/electron-server/src/main.ts

@@ -141,6 +141,7 @@ function initializeAppUpdater(settings: AppUpdaterSettings) {
 }
 
 async function loadServer() {
+  process.env.COMPOSER_VERSION = app.getVersion();
   if (!isDevelopment) {
     // only change paths if packaged electron app
     const unpackedDir = getUnpackedAsarPath();

Composer/packages/electron-server/src/preload.js

@@ -1,11 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-const { app, ipcRenderer } = require('electron'); // eslint-disable-line
+const { ipcRenderer } = require('electron'); // eslint-disable-line
 
 // expose ipcRenderer to the browser
 window.ipcRenderer = ipcRenderer;
-// get the app version to hand into the client
-window.appVersion = app.getVersion();
 // flag to distinguish electron client from web app client
 window.__IS_ELECTRON__ = true;