chore: merge latest master into multibot branch

.vscode/launch.json

@@ -82,5 +82,18 @@
       "port": 9228,
       "sourceMaps": true
     }
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Electron Main Process",
+      "runtimeExecutable": "${workspaceRoot}/Composer/node_modules/.bin/electron",
+      "args": [
+        "${workspaceRoot}/Composer/packages/electron-server",
+      ],
+      "env": {
+        "NODE_ENV": "development",
+      },
+      "outputCapture": "std"
+    }
   ]
 }

.vscode/settings.json

@@ -1,9 +1,16 @@
 {
+  "files.trimTrailingWhitespace": true,
   "files.associations": {
     "*.dialog": "json",
     "*.botproj": "json",
     "*.schema": "json"
   },
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "**/node_modules": true,
+    "**/build": true
+  },
   "eslint.enable": true,
   "eslint.packageManager": "yarn",
   "eslint.validate": [
@@ -14,6 +21,7 @@
   ],
   "eslint.workingDirectories": ["./Composer"],
   "typescript.tsdk": "./Composer/node_modules/typescript/lib",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }

Composer/.eslintrc.js

@@ -42,6 +42,16 @@ module.exports = {
     yoda: 'error',
     'no-bitwise': 'error',
     // eqeqeq: 'error',
+    'no-underscore-dangle': [
+      'error',
+      {
+        // add special window.__foo__ names as exceptions here
+        allow: ['__nonce__', '__IS_ELECTRON__'],
+        // allow this._name so custom getters and setters can be written gracefully
+        allowAfterThis: true,
+        enforceInMethodNames: true,
+      },
+    ],
 
     // plugin: import
     'import/first': 'error',

Composer/cypress/integration/LGPage.spec.ts

@@ -24,6 +24,9 @@ context('LG Page', () => {
     // back to table view
     cy.get('@switchButton').click();
 
+    // click the logo to clear any stray navigation
+    cy.findByAltText('Composer Logo').click();
+
     // nav to Main dialog
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('__TestTodoSample').click();

Composer/cypress/integration/NotificationPage.spec.ts

@@ -44,6 +44,9 @@ context('Notification Page', () => {
   it('can show dialog expression error ', () => {
     cy.visitPage('Design');
 
+    // click the logo to clear any stray tooltips from page navigation
+    cy.findByAltText('Composer Logo').click();
+
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('WelcomeUser').click();
     });

Composer/cypress/integration/Onboarding.spec.ts

@@ -8,7 +8,7 @@ context('Onboarding', () => {
 
     //enable onboarding setting
     cy.visitPage('Settings');
-    cy.findByText('App Settings').click();
+    cy.findByText('Application Settings').click();
     cy.findByLabelText('Onboarding').click();
     cy.visitPage('Design');
   });

Composer/package.json

@@ -8,7 +8,8 @@
     "serialize-javascript": "^3.1.0",
     "lodash": "^4.17.12",
     "set-value": "^3.0.2",
-    "kind-of": "^6.0.3"
+    "kind-of": "^6.0.3",
+    "elliptic": "^6.5.3"
   },
   "engines": {
     "node": ">=12"
@@ -26,9 +27,7 @@
     "packages/tools",
     "packages/tools/language-servers",
     "packages/tools/language-servers/*",
-    "packages/ui-plugins/*",
-    "packages/plugins",
-    "packages/plugins/*"
+    "packages/ui-plugins/*"
   ],
   "scripts": {
     "build": "node scripts/begin.js && yarn build:prod && yarn build:plugins",
@@ -41,7 +40,11 @@
     "build:server": "yarn workspace @bfc/server build",
     "build:client": "yarn workspace @bfc/client build",
     "build:tools": "yarn workspace @bfc/tools build:all",
-    "build:plugins": "wsrun -lt -p @bfc/plugin-samples @bfc/plugin-azure-publish @bfc/plugin-azure-functions-publish @bfc/plugin-localpublish -c build",
+    "build:plugins": "yarn build:plugins:localpublish && yarn build:plugins:samples && yarn build:plugins:azurePublish && yarn build:plugins:azureFunctionsPublish",
+    "build:plugins:localpublish": "cd plugins/localPublish && yarn install && yarn build",
+    "build:plugins:samples": "cd plugins/samples && yarn install && yarn build",
+    "build:plugins:azurePublish": "cd plugins/azurePublish && yarn install && yarn build",
+    "build:plugins:azureFunctionsPublish": "cd plugins/azureFunctionsPublish && yarn install && yarn build",
     "start": "cross-env NODE_ENV=production PORT=3000 yarn start:server",
     "startall": "yarn start",
     "start:dev": "concurrently  \"npm:start:client\" \"npm:start:server:dev\"",

Composer/packages/client/__tests__/utils/dialogUtil.test.js

@@ -218,7 +218,7 @@ describe('getActivityTypes', () => {
       { key: 'Microsoft.OnHandoffActivity', text: 'Handover to human (Handoff activity)' },
       { key: 'Microsoft.OnInvokeActivity', text: 'Conversation invoked (Invoke activity)' },
       { key: 'Microsoft.OnTypingActivity', text: 'User is typing (Typing activity)' },
-      { key: 'Microsoft.OnMessageActivity', text: 'Message received (Message recieved activity)' },
+      { key: 'Microsoft.OnMessageActivity', text: 'Message received (Message received activity)' },
       { key: 'Microsoft.OnMessageDeleteActivity', text: 'Message deleted (Message deleted activity)' },
       { key: 'Microsoft.OnMessageReactionActivity', text: 'Message reaction (Message reaction activity)' },
       { key: 'Microsoft.OnMessageUpdateActivity', text: 'Message updated (Message updated activity)' },

Composer/packages/client/config/env.js

@@ -90,7 +90,7 @@ function getClientEnvironment(publicUrl) {
         SDK_PACKAGE_VERSION: '4.9.3', // TODO: change this when Composer supports custom schema/custom runtime
         COMPOSER_VERSION: '1.0.1',
         LOCAL_PUBLISH_PATH:
-          process.env.LOCAL_PUBLISH_PATH || path.resolve(process.cwd(), '../plugins/localPublish/hostedBots'),
+          process.env.LOCAL_PUBLISH_PATH || path.resolve(process.cwd(), '../../plugins/localPublish/hostedBots'),
       }
     );
   // Stringify all values so we can feed into Webpack DefinePlugin

Composer/packages/client/package.json

@@ -18,6 +18,7 @@
   },
   "proxy": "http://localhost:5000",
   "dependencies": {
+    "@bfc/adaptive-flow": "*",
     "@bfc/adaptive-form": "*",
     "@bfc/code-editor": "*",
     "@bfc/extension": "*",
@@ -29,9 +30,8 @@
     "@bfc/ui-plugin-prompts": "*",
     "@bfc/ui-plugin-select-dialog": "*",
     "@bfc/ui-plugin-select-skill-dialog": "*",
-    "@bfc/adaptive-flow": "*",
     "@emotion/core": "^10.0.7",
-    "@microsoft/bf-lu": "4.9.1",
+    "@microsoft/bf-lu": "^4.10.0-preview.141651",
     "@reach/router": "^1.2.1",
     "@uifabric/fluent-theme": "^7.1.13",
     "@uifabric/icons": "^7.3.4",
@@ -73,6 +73,7 @@
     "@types/reach__router": "^1.2.4",
     "@types/react": "16.9.23",
     "@types/react-dom": "16.9.5",
+    "@types/webpack-env": "^1.15.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.0.5",

Composer/packages/client/src/components/CreationFlow/LocationBrowser/FileSelector.tsx

@@ -46,7 +46,7 @@ type SortState = {
   descending: boolean;
 };
 
-const _renderIcon = (file: File) => {
+const renderIcon = (file: File) => {
   const iconName = getFileIconName(file);
   if (iconName === FileTypes.FOLDER) {
     return <Icon iconName="OpenFolderHorizontal" style={{ fontSize: '16px' }} />;
@@ -60,7 +60,7 @@ const _renderIcon = (file: File) => {
   return <img alt={`${iconName} file icon`} className={detailListClass.fileIconImg} src={url} />;
 };
 
-const _renderNameColumn = (onFileChosen: (file: File) => void) => (file: File) => {
+const renderNameColumn = (onFileChosen: (file: File) => void) => (file: File) => {
   const iconName = getFileIconName(file);
   return (
     <div data-is-focusable css={tableCell}>
@@ -105,7 +105,7 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
       fieldName: 'name',
       minWidth: 16,
       maxWidth: 16,
-      onRender: _renderIcon,
+      onRender: renderIcon,
     },
     {
       key: 'name',
@@ -118,7 +118,7 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
       sortAscendingAriaLabel: formatMessage('Sorted A to Z'),
       sortDescendingAriaLabel: formatMessage('Sorted Z to A'),
       data: 'string',
-      onRender: _renderNameColumn(onFileChosen),
+      onRender: renderNameColumn(onFileChosen),
       isPadded: true,
     },
     {

Composer/packages/client/src/components/ErrorPopup/index.tsx

@@ -18,7 +18,7 @@ type ErrorPopupProps = {
 export const ErrorPopup = (props: ErrorPopupProps) => {
   const [hidden, setHidden] = useState(props.error ? false : true);
 
-  const _closeDialog = () => {
+  const closeDialog = () => {
     setHidden(true);
     props.onDismiss();
   };
@@ -35,11 +35,11 @@ export const ErrorPopup = (props: ErrorPopupProps) => {
         isBlocking: false,
         styles: { main: { maxWidth: 450 } },
       }}
-      onDismiss={_closeDialog}
+      onDismiss={closeDialog}
     >
       <div css={consoleStyle}>{props.error}</div>
       <DialogFooter>
-        <PrimaryButton text="Ok" onClick={_closeDialog} />
+        <PrimaryButton text="Ok" onClick={closeDialog} />
       </DialogFooter>
     </Dialog>
   );

Composer/packages/client/src/components/NavTree/index.tsx

@@ -17,6 +17,7 @@ export interface INavTreeItem {
   name: string;
   ariaLabel?: string;
   url: string;
+  disabled?: boolean;
 }
 
 interface INavTreeProps {
@@ -54,6 +55,7 @@ const NavTree: React.FC<INavTreeProps> = (props) => {
           return (
             <DefaultButton
               key={item.id}
+              disabled={item.disabled}
               href={item.url}
               styles={isSelected ? itemSelected : itemNotSelected}
               text={item.name}

Composer/packages/client/src/constants/index.ts

@@ -109,7 +109,7 @@ export const Tips = {
     (projectname-environment-LUfilename)`),
   ENVIRONMENT: formatMessage(`When multiple people are working with models you want to be able to work with
     models independently from each other tied to the source control.`),
-  AUTHORING_KEY: formatMessage('A primary key is created automatically when you create a LUIS account.'),
+  AUTHORING_KEY: formatMessage('An authoring key is created automatically when you create a LUIS account.'),
   AUTHORING_REGION: formatMessage('Authoring region to use [westus,westeurope,australiaeast]'),
   DEFAULT_LANGUAGE: formatMessage(
     `Configures default language model to use if there is no culture code in the file name (Default:en-us)`
@@ -251,7 +251,7 @@ export enum AppUpdaterStatus {
 
 export const DefaultPublishConfig = {
   name: 'default',
-  type: '@bfc/plugin-localpublish',
+  type: 'localpublish',
 };
 
 export const EmptyBotTemplateId = 'EmptyBot';

Composer/packages/client/src/index.tsx

@@ -11,6 +11,8 @@ import './index.css';
 import { App } from './App';
 import { StoreProvider } from './store';
 
+const appHostElm = document.getElementById('root');
+
 formatMessage.setup({
   missingTranslation: 'ignore',
 });
@@ -20,11 +22,29 @@ const emotionCache = createCache({
   nonce: window.__nonce__,
 });
 
-ReactDOM.render(
-  <CacheProvider value={emotionCache}>
-    <StoreProvider>
-      <App />
-    </StoreProvider>
-  </CacheProvider>,
-  document.getElementById('root')
-);
+/**
+ * Renders the React App module.
+ */
+const renderApp = (AppComponent: typeof App) => {
+  ReactDOM.render(
+    <CacheProvider value={emotionCache}>
+      <StoreProvider>
+        <AppComponent />
+      </StoreProvider>
+    </CacheProvider>,
+    appHostElm
+  );
+};
+
+// Rendering the App for the first time.
+renderApp(App);
+
+/**
+ * Re-render updated App Module when hot module notifies a change.
+ */
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    const NextApp = require<{ App: typeof App }>('./App').App;
+    renderApp(NextApp);
+  });
+}

Composer/packages/client/src/pages/design/index.tsx

@@ -148,8 +148,10 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
         onBreadcrumbItemClick: handleBreadcrumbItemClick,
         promptTab: getTabFromFragment(),
       });
+      /* eslint-disable no-underscore-dangle */
       // @ts-ignore
       globalHistory._onTransitionComplete();
+      /* eslint-enable */
     } else {
       //leave design page should clear the history
       clearUndoHistory();

Composer/packages/client/src/pages/home/ExampleList.tsx

@@ -35,7 +35,7 @@ const resolveIcon = (exampleId: string): string => {
 export const ExampleList: React.FC<ExampleListProps> = (props) => {
   const { onClick, examples } = props;
 
-  function _onRenderCell(item?: ProjectTemplate): React.ReactNode {
+  function onRenderCell(item?: ProjectTemplate): React.ReactNode {
     if (!item) {
       return;
     }
@@ -46,6 +46,7 @@ export const ExampleList: React.FC<ExampleListProps> = (props) => {
         data-is-focusable
         aria-label={item.name + '; ' + item.description}
         css={exampleListCell}
+        role="button"
         tabIndex={0}
         onClick={() => onClick(item.id)}
         onKeyDown={(ev) => {
@@ -66,7 +67,7 @@ export const ExampleList: React.FC<ExampleListProps> = (props) => {
   return (
     <div css={exampleListContainer} data-is-scrollable="true">
       <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
-        <List items={examples} onRenderCell={_onRenderCell} />
+        <List items={examples} onRenderCell={onRenderCell} />
       </ScrollablePane>
     </div>
   );

Composer/packages/client/src/pages/home/index.tsx

@@ -146,7 +146,7 @@ const Home: React.FC<RouteComponentProps> = () => {
           <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
           <div aria-label={formatMessage('Composer introduction')} css={home.introduction} role="region">
             {formatMessage(
-              'Bot Framework Composer is an integrated development environment (IDE) for building bots and other types of conversational software with the Microsoft Bot Framework technology stack'
+              'Bot Framework Composer is an integrated development environment (IDE) for building bots and other types of conversational software with the Microsoft Bot Framework technology stack.'
             )}
           </div>
           <div css={home.newBotContainer}>
@@ -216,7 +216,7 @@ const Home: React.FC<RouteComponentProps> = () => {
               <div css={home.linkContainer}>
                 <div>
                   {formatMessage(
-                    'Bot Framework provides the most comprehensive experience for building conversation applications.'
+                    'Bot Framework provides the most comprehensive experience for building conversational applications.'
                   )}
                 </div>
                 {linksButtom.map((link) => {

Composer/packages/client/src/pages/language-generation/code-editor.tsx

@@ -103,7 +103,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     [file, projectId]
   );
 
-  const _onChange = useCallback(
+  const onChange = useCallback(
     (value) => {
       if (!file) return;
       if (inlineMode) {
@@ -142,7 +142,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
       }}
       lgOption={lgOption}
       value={content}
-      onChange={_onChange}
+      onChange={onChange}
       onChangeSettings={handleSettingsChange}
     />
   );

Composer/packages/client/src/pages/language-understanding/code-editor.tsx

@@ -101,7 +101,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     [file, projectId]
   );
 
-  const _onChange = useCallback(
+  const onChange = useCallback(
     (value) => {
       setContent(value);
       if (!file) return;
@@ -134,7 +134,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
       }}
       luOption={luOption}
       value={content}
-      onChange={_onChange}
+      onChange={onChange}
       onChangeSettings={handleSettingsChange}
     />
   );