Merge branch 'master' into julong/keyboardShortCut

BotProject/Templates/CSharp/README.md

@@ -1,22 +1,44 @@
-## Bot Project
+## Bot Runtime
 Bot project is the launcher project for the bots written in declarative form (JSON), using the Composer, for the Bot Framework SDK.
+This same code is used by Composer to start the bot locally for testing.
 
-## Instructions for setting up the Bot Project runtime
-The Bot Project is a regular Bot Framework SDK V4 project. Before you can launch it from the emulator, you need to make sure you can run the bot. 
+## Instructions for using and customizing the bot runtime
+
+Composer can be configured to use a customized copy of this runtime.
+A copy of it can be added to your project automatically by using the "runtime settings" page in Composer.
+
+The Bot Project is a regular Bot Framework SDK V4 project. You can modify the code of this project
+and continue to use it with Composer.
+
+* Add additional middleware
+* Customize the state storage system
+* Add custom dialog classes
 
 ### Prerequisite:
 * Install .Netcore 3.1
 
-### Commands:
+### Build:
 
-* from root folder 
-* cd BotProject
-* cd Templates/CSharp
+* cd [my bot folder]/runtime
 * dotnet user-secrets init // init the user secret id
 * dotnet build // build
+
+
+### Run from Command line:
+* cd [my bot folder]/runtime
 * dotnet run // start the bot
 * It will start a web server and listening at http://localhost:3979.
 
+### Run with Composer
+
+Open your bot project in Composer. Navigate to the runtime settings tab. 
+
+Set the path to runtime to the full path to your runtime code. Customize the start command as necessary.
+
+The "Start Bot" button will now use your customized runtime.
+
+Note: the application code must be built and ready to run before Composer can manage it.
+
 ### Test bot
 * You can set you emulator to connect to http://localhost:3979/api/messages.
 

BotProject/Templates/CSharp/appsettings.json

@@ -1,6 +1,6 @@
 {
   "microsoftAppId": "",
-  "bot": "ComposerDialogs",
+  "bot": "../",
   "cosmosDb": {
     "authKey": "",
     "collectionId": "botstate-collection",

Composer/packages/client/src/App.tsx

@@ -152,7 +152,7 @@ export const App: React.FC = () => {
       >
         {announcement}
       </div>
-      <Header botName={`${botName}(${locale})`} />
+      <Header botName={botName} locale={locale} />
       <div css={main}>
         <nav css={sideBar(sideBarExpand)}>
           <div>

Composer/packages/client/src/components/Header/index.jsx

@@ -5,13 +5,13 @@
 import { jsx } from '@emotion/core';
 import formatMessage from 'format-message';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { useContext, useCallback } from 'react';
+import { useContext, useCallback, Fragment } from 'react';
 
 import composerIcon from '../../images/composerIcon.svg';
 import { AppUpdaterStatus } from '../../constants';
 import { StoreContext } from '../../store';
 
-import { updateAvailableIcon, headerContainer, title, botName } from './styles';
+import { updateAvailableIcon, headerContainer, title, botName, divider } from './styles';
 
 export const Header = props => {
   const {
@@ -34,8 +34,13 @@ export const Header = props => {
         aria-label={formatMessage('Composer Logo')}
         src={composerIcon}
       />
-      <span css={title}>{formatMessage('Bot Framework Composer')}</span>
-      <span css={botName}>{props.botName}</span>
+      <div css={title}>{formatMessage('Bot Framework Composer')}</div>
+      {props.botName && (
+        <Fragment>
+          <div css={divider} />
+          <span css={botName}>{`${props.botName} (${props.locale})`}</span>
+        </Fragment>
+      )}
       {showUpdateAvailableIcon && (
         <IconButton
           iconProps={{ iconName: 'History' }}

Composer/packages/client/src/components/Header/styles.js

@@ -9,38 +9,32 @@ export const headerContainer = css`
   position: relative;
   background: ${NeutralColors.black};
   height: 50px;
-  line-height: 50px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 `;
 
 export const title = css`
-  position: relative;
   margin-left: 25px;
   font-weight: ${FontWeights.semibold};
   font-size: 16px;
   color: #fff;
-  bottom: 11px;
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0px;
-    right: -15px;
-    bottom: 11px;
-    width: 0px;
-    height: 24px;
-    border: none;
-    border-right: 1px solid #979797;
-    border-image: initial;
-    outline: none;
-  }
+  min-width: 200px;
 `;
 
 export const botName = css`
-  position: absolute;
-  margin-left: 30px;
+  margin-left: 15px;
   font-size: 16px;
+  word-break: break-all;
   color: #fff;
 `;
 
+export const divider = css`
+  height: 24px;
+  border-right: 1px solid #979797;
+  margin: 0px 0px 0px 4px;
+`;
+
 export const updateAvailableIcon = {
   icon: {
     color: '#FFF',

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

@@ -85,9 +85,11 @@ export enum ActionTypes {
   GET_PUBLISH_STATUS_FAILED = 'GET_PUBLISH_STATUS_FAILED',
   GET_PUBLISH_HISTORY = 'GET_PUBLISH_HISTORY',
   UPDATE_BOTSTATUS = 'UPDATE_BOTSTATUS',
+  SET_RUNTIME_TEMPLATES = 'SET_RUNTIME_TEMPLATES',
   SET_USER_SETTINGS = 'SET_USER_SETTINGS',
   ADD_SKILL_DIALOG_BEGIN = 'ADD_SKILL_DIALOG_BEGIN',
   ADD_SKILL_DIALOG_END = 'ADD_SKILL_DIALOG_END',
+  EJECT_SUCCESS = 'EJECT_SUCCESS',
   SET_MESSAGE = 'SET_MESSAGE',
   SET_APP_UPDATE_ERROR = 'SET_APP_UPDATE_ERROR',
   SET_APP_UPDATE_PROGRESS = 'SET_APP_UPDATE_PROGRESS',

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

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
 import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import formatMessage from 'format-message';
@@ -85,6 +85,7 @@ const getTabFromFragment = () => {
 
 function DesignPage(props) {
   const { state, actions } = useContext(StoreContext);
+  const visualPanelRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
   const { dialogs, designPageLocation, breadcrumb, visualEditorSelection, projectId, schemas } = state;
   const {
     removeDialog,
@@ -100,7 +101,6 @@ function DesignPage(props) {
   const { dialogId, selected } = designPageLocation;
   const [triggerModalVisible, setTriggerModalVisibility] = useState(false);
   const [dialogJsonVisible, setDialogJsonVisibility] = useState(false);
-
   const [currentDialog, setCurrentDialog] = useState<DialogInfo>(dialogs[0]);
 
   useEffect(() => {
@@ -171,6 +171,9 @@ function DesignPage(props) {
     } else {
       navTo(id);
     }
+    if (visualPanelRef.current) {
+      visualPanelRef.current.focus();
+    }
   }
 
   const onCreateDialogComplete = newDialog => {
@@ -401,7 +404,7 @@ function DesignPage(props) {
           )}
           <Conversation css={editorContainer}>
             <div css={editorWrapper}>
-              <div css={visualPanel}>
+              <div css={visualPanel} ref={visualPanelRef} tabIndex={0}>
                 {breadcrumbItems}
                 {dialogJsonVisible ? (
                   <JsonEditor

Composer/packages/client/src/pages/home/styles.ts

@@ -16,6 +16,7 @@ export const page = css`
   display: flex;
   overflow-x: hidden;
   overflow-y: auto;
+  flex-wrap: wrap;
 `;
 
 export const leftPage = css`
@@ -58,7 +59,6 @@ export const newBotContainer = css`
 `;
 
 export const leftContainer = css`
-  min-width: 535px;
   margin-top: 10px;
   margin-bottom: 10px;
   flex: auto;

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

@@ -34,6 +34,7 @@ const SettingPage: React.FC<RouteComponentProps<{ '*': string }>> = props => {
     publish: formatMessage('Publish'),
     settings: formatMessage('Settings'),
     preferences: formatMessage('User Preferences'),
+    runtime: formatMessage('Runtime Config'),
   };
 
   const links: INavLink[] = [
@@ -44,6 +45,8 @@ const SettingPage: React.FC<RouteComponentProps<{ '*': string }>> = props => {
       url: '',
     },
     { key: 'preferences', name: settingLabels.preferences, url: '' },
+    { key: 'runtime', name: settingLabels.runtime, url: '' },
+
     // { key: '/settings/publish', name: settingLabels.publish, url: '' },
 
     // { key: 'services', name: formatMessage('Services') },

Composer/packages/client/src/pages/setting/router.tsx

@@ -10,6 +10,7 @@ import { DialogSettings } from './dialog-settings';
 import { RemotePublish } from './remote-publish';
 import { Deployment } from './deployment';
 import { UserSettings } from './user-settings';
+import { RuntimeSettings } from './runtime-settings';
 
 const Routes = () => {
   return (
@@ -19,6 +20,7 @@ const Routes = () => {
         <Deployment path="deployment" />
         <RemotePublish path="remote-publish" />
         <UserSettings path="preferences" />
+        <RuntimeSettings path="runtime" />
       </Router>
     </ErrorBoundary>
   );

Composer/packages/client/src/pages/setting/runtime-settings/ejectModal.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useEffect, useMemo, useState, useContext } from 'react';
+import { Dialog, DialogType } from 'office-ui-fabric-react/lib/Dialog';
+import formatMessage from 'format-message';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
+
+import { StoreContext } from '../../../store';
+
+import { modalControlGroup } from './style';
+
+export interface EjectModalProps {
+  ejectRuntime: (templateKey: string) => void;
+  hidden: boolean;
+  closeModal: () => void;
+}
+
+export const EjectModal: React.FC<EjectModalProps> = props => {
+  const [selectedTemplate, setSelectedTemplate] = useState<string | undefined>();
+  const { state, actions } = useContext(StoreContext);
+  const { runtimeTemplates } = state;
+
+  useEffect(() => {
+    actions.getRuntimeTemplates();
+  }, []);
+
+  const availableRuntimeTemplates = useMemo(() => {
+    return runtimeTemplates.map(t => {
+      return {
+        text: t.name,
+        key: t.key,
+      };
+    });
+  }, [runtimeTemplates]);
+
+  const selectTemplate = (ev, item?: IChoiceGroupOption) => {
+    if (item) {
+      setSelectedTemplate(item.key);
+    }
+  };
+
+  const doEject = () => {
+    if (selectedTemplate) {
+      props.ejectRuntime(selectedTemplate);
+    }
+  };
+
+  return (
+    <Dialog
+      hidden={props.hidden}
+      onDismiss={props.closeModal}
+      dialogContentProps={{
+        type: DialogType.normal,
+        title: formatMessage('Add custom runtime'),
+        subText: formatMessage('Select runtime version to add'),
+      }}
+      modalProps={{
+        isBlocking: false,
+      }}
+    >
+      <div css={modalControlGroup}>
+        <ChoiceGroup options={availableRuntimeTemplates} onChange={selectTemplate} required={true} />
+      </div>
+      <DialogFooter>
+        <DefaultButton onClick={props.closeModal}>Cancel</DefaultButton>
+        <PrimaryButton onClick={doEject} disabled={!selectedTemplate}>
+          {formatMessage('Okay')}
+        </PrimaryButton>
+      </DialogFooter>
+    </Dialog>
+  );
+};