Merge branch 'master' of https://github.com/microsoft/BotFramework-Co…

…mposer into wenyluo/azure

.github/CODEOWNERS

@@ -4,7 +4,7 @@
 
 /runtime/ @boydc2014 @luhan2017 @carlosscastro @a-b-r-o-w-n
 
-/Composer/ @cwhitten @boydc2014 @a-b-r-o-w-n @corinagum @beyackle @srinaath
+/Composer/ @cwhitten @boydc2014 @a-b-r-o-w-n @corinagum @beyackle @srinaath @tonyanziano
 
 /Composer/packages/extensions/visual-designer @yeze322 @cwhitten @boydc2014 @a-b-r-o-w-n
 

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

@@ -7,6 +7,7 @@ import path from 'path';
 import { jsx } from '@emotion/core';
 import { useMemo, useState } from 'react';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
@@ -58,13 +59,23 @@ const _renderIcon = (file: File) => {
   return <img src={url} className={detailListClass.fileIconImg} alt={`${iconName} file icon`} />;
 };
 
-const _renderNameColumn = (file: File) => {
+const _renderNameColumn = (onFileChosen: (file: File) => void) => (file: File) => {
   const iconName = getFileIconName(file);
   return (
     <div data-is-focusable={true} css={tableCell}>
-      <div tabIndex={-1} css={content} aria-label={`${iconName} Name is ${file.name}`}>
+      <Link
+        aria-label={
+          file.name === '..'
+            ? formatMessage('previous folder')
+            : formatMessage('{icon} name is {file}', {
+                icon: iconName,
+                file: file.name,
+              })
+        }
+        onClick={() => onFileChosen(file)}
+      >
         {file.name}
-      </div>
+      </Link>
     </div>
   );
 };
@@ -99,7 +110,7 @@ export const FileSelector: React.FC<FileSelectorProps> = props => {
       sortAscendingAriaLabel: formatMessage('Sorted A to Z'),
       sortDescendingAriaLabel: formatMessage('Sorted Z to A'),
       data: 'string',
-      onRender: _renderNameColumn,
+      onRender: _renderNameColumn(onFileChosen),
       isPadded: true,
     },
     {

Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx

@@ -16,7 +16,7 @@ import { luIndexer, combineMessage } from '@bfc/indexers';
 import { PlaceHolderSectionName } from '@bfc/indexers/lib/utils/luUtil';
 import get from 'lodash/get';
 import { DialogInfo } from '@bfc/shared';
-import { LuEditor } from '@bfc/code-editor';
+import { LuEditor, inlineModePlaceholder } from '@bfc/code-editor';
 
 import {
   generateNewDialog,
@@ -262,20 +262,22 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
               data-testid={'RegExDropDown'}
             />
           )}
-          {showTriggerPhrase && <Label>{formatMessage('Trigger phrases')}</Label>}
           {showTriggerPhrase && (
-            <LuEditor
-              onChange={onTriggerPhrasesChange}
-              value={formData.triggerPhrases}
-              errorMessage={formData.errors.triggerPhrases}
-              hidePlaceholder={true}
-              luOption={{
-                projectId,
-                fileId: dialogId,
-                sectionId: formData.intent || PlaceHolderSectionName,
-              }}
-              height={150}
-            />
+            <React.Fragment>
+              <Label>{formatMessage('Trigger phrases')}</Label>
+              <LuEditor
+                onChange={onTriggerPhrasesChange}
+                value={formData.triggerPhrases}
+                errorMessage={formData.errors.triggerPhrases}
+                luOption={{
+                  projectId,
+                  fileId: dialogId,
+                  sectionId: formData.intent || PlaceHolderSectionName,
+                }}
+                height={225}
+                placeholder={inlineModePlaceholder}
+              />
+            </React.Fragment>
           )}
         </Stack>
       </div>

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

@@ -4,7 +4,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import AdaptiveForm, { resolveBaseSchema, getUISchema, mergePluginConfigs } from '@bfc/adaptive-form';
+import AdaptiveForm, { resolveBaseSchema, getUIOptions, mergePluginConfigs } from '@bfc/adaptive-form';
 import Extension, { FormErrors } from '@bfc/extension';
 import formatMessage from 'format-message';
 import isEqual from 'lodash/isEqual';
@@ -57,7 +57,7 @@ const PropertyEditor: React.FC = () => {
   }, []);
 
   const $uiSchema = useMemo(() => {
-    return getUISchema($schema, pluginConfig.formSchema);
+    return getUIOptions($schema, pluginConfig.formSchema, pluginConfig.roleSchema);
   }, [$schema, pluginConfig]);
 
   const errors = useMemo(() => {

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

@@ -13,6 +13,7 @@ import { PromptTab } from '@bfc/shared';
 import { DialogFactory, SDKKinds, DialogInfo } from '@bfc/shared';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { JsonEditor } from '@bfc/code-editor';
+import { useTriggerApi } from '@bfc/extension';
 
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { TestController } from '../../components/TestController';
@@ -28,6 +29,7 @@ import { ToolBar } from '../../components/ToolBar/index';
 import { clearBreadcrumb } from '../../utils/navigation';
 import undoHistory from '../../store/middlewares/undo/history';
 import { navigateTo } from '../../utils';
+import { useShell } from '../../shell';
 
 import { VisualEditorAPI } from './FrameAPI';
 import {
@@ -106,6 +108,8 @@ function DesignPage(props) {
   const [dialogJsonVisible, setDialogJsonVisibility] = useState(false);
   const [currentDialog, setCurrentDialog] = useState<DialogInfo>(dialogs[0]);
   const [exportSkillModalVisible, setExportSkillModalVisible] = useState(false);
+  const shell = useShell('ProjectTree');
+  const triggerApi = useTriggerApi(shell.api);
 
   useEffect(() => {
     const currentDialog = dialogs.find(({ id }) => id === dialogId);
@@ -357,7 +361,8 @@ function DesignPage(props) {
   }
 
   async function handleDeleteTrigger(id, index) {
-    const content = deleteTrigger(dialogs, id, index);
+    const content = deleteTrigger(dialogs, id, index, trigger => triggerApi.deleteTrigger(id, trigger));
+
     if (content) {
       await updateDialog({ id, projectId, content });
       const match = /\[(\d+)\]/g.exec(selected);

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

@@ -5,6 +5,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
 import { IObjectWithKey } from 'office-ui-fabric-react/lib/MarqueeSelection';
@@ -44,13 +45,12 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element {
       onRender: item => {
         return (
           <div css={tableCell} data-is-focusable={true}>
-            <div
-              tabIndex={-1}
-              css={content}
+            <Link
               aria-label={formatMessage(`Bot name is {botName}`, { botName: item.name })}
+              onClick={() => onItemChosen(item)}
             >
               {item.name}
-            </div>
+            </Link>
           </div>
         );
       },

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

@@ -158,7 +158,6 @@ const CodeEditor: React.FC<CodeEditorProps> = props => {
 
   return (
     <LuEditor
-      hidePlaceholder={inlineMode}
       editorDidMount={editorDidMount}
       value={content}
       errorMessage={httpErrorMsg}

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

@@ -4,7 +4,6 @@
 import { useContext, useEffect, useState } from 'react';
 import { LgFile } from '@bfc/shared';
 import throttle from 'lodash/throttle';
-import mapValues from 'lodash/mapValues';
 
 import * as lgUtil from '../utils/lgUtil';
 import { State, BoundActionHandlers } from '../store/types';
@@ -13,76 +12,81 @@ import { StoreContext } from '../store';
 const createThrottledFunc = fn => throttle(fn, 1000, { leading: true, trailing: true });
 
 function createLgApi(state: State, actions: BoundActionHandlers, lgFileResolver: (id: string) => LgFile | undefined) {
-  const api = {
-    getLgTemplates: id => {
-      if (id === undefined) throw new Error('must have a file id');
-      const focusedDialogId = state.focusPath.split('#').shift() || id;
-      const file = lgFileResolver(focusedDialogId);
-      if (!file) throw new Error(`lg file ${id} not found`);
-      return file.templates;
-    },
-
-    updateLgTemplate: async (id: string, templateName: string, templateBody: string) => {
-      const file = lgFileResolver(id);
-      if (!file) throw new Error(`lg file ${id} not found`);
-      if (!templateName) throw new Error(`templateName is missing or empty`);
-      const template = { name: templateName, body: templateBody, parameters: [] };
-
-      const projectId = state.projectId;
-
-      lgUtil.checkSingleLgTemplate(template);
-
-      await actions.updateLgTemplate({
-        file,
-        projectId,
-        templateName,
-        template,
-      });
-    },
+  const getLgTemplates = id => {
+    if (id === undefined) throw new Error('must have a file id');
+    const focusedDialogId = state.focusPath.split('#').shift() || id;
+    const file = lgFileResolver(focusedDialogId);
+    if (!file) throw new Error(`lg file ${id} not found`);
+    return file.templates;
+  };
 
-    copyLgTemplate: async (id, fromTemplateName, toTemplateName) => {
-      const file = lgFileResolver(id);
-      if (!file) throw new Error(`lg file ${id} not found`);
-      if (!fromTemplateName || !toTemplateName) throw new Error(`templateName is missing or empty`);
+  const updateLgTemplate = async (id: string, templateName: string, templateBody: string) => {
+    const file = lgFileResolver(id);
+    if (!file) throw new Error(`lg file ${id} not found`);
+    if (!templateName) throw new Error(`templateName is missing or empty`);
+    const template = { name: templateName, body: templateBody, parameters: [] };
 
-      const projectId = state.projectId;
+    const projectId = state.projectId;
 
-      return actions.copyLgTemplate({
-        file,
-        projectId,
-        fromTemplateName,
-        toTemplateName,
-      });
-    },
-
-    removeLgTemplate: async (id, templateName) => {
-      const file = lgFileResolver(id);
-      if (!file) throw new Error(`lg file ${id} not found`);
-      if (!templateName) throw new Error(`templateName is missing or empty`);
-      const projectId = state.projectId;
-
-      return actions.removeLgTemplate({
-        file,
-        projectId,
-        templateName,
-      });
-    },
-
-    removeLgTemplates: async (id, templateNames) => {
-      const file = lgFileResolver(id);
-      if (!file) throw new Error(`lg file ${id} not found`);
-      if (!templateNames) throw new Error(`templateName is missing or empty`);
-      const projectId = state.projectId;
-
-      return actions.removeLgTemplates({
-        file,
-        projectId,
-        templateNames,
-      });
-    },
+    lgUtil.checkSingleLgTemplate(template);
+
+    await actions.updateLgTemplate({
+      file,
+      projectId,
+      templateName,
+      template,
+    });
   };
 
-  return mapValues(api, fn => createThrottledFunc(fn));
+  const copyLgTemplate = async (id, fromTemplateName, toTemplateName) => {
+    const file = lgFileResolver(id);
+    if (!file) throw new Error(`lg file ${id} not found`);
+    if (!fromTemplateName || !toTemplateName) throw new Error(`templateName is missing or empty`);
+
+    const projectId = state.projectId;
+
+    return actions.copyLgTemplate({
+      file,
+      projectId,
+      fromTemplateName,
+      toTemplateName,
+    });
+  };
+
+  const removeLgTemplate = async (id, templateName) => {
+    const file = lgFileResolver(id);
+    if (!file) throw new Error(`lg file ${id} not found`);
+    if (!templateName) throw new Error(`templateName is missing or empty`);
+    const projectId = state.projectId;
+
+    return actions.removeLgTemplate({
+      file,
+      projectId,
+      templateName,
+    });
+  };
+
+  const removeLgTemplates = async (id, templateNames) => {
+    const file = lgFileResolver(id);
+    if (!file) throw new Error(`lg file ${id} not found`);
+    if (!templateNames) throw new Error(`templateName is missing or empty`);
+    const projectId = state.projectId;
+
+    return actions.removeLgTemplates({
+      file,
+      projectId,
+      templateNames,
+    });
+  };
+
+  return {
+    addLgTemplate: updateLgTemplate,
+    getLgTemplates,
+    updateLgTemplate: createThrottledFunc(updateLgTemplate),
+    removeLgTemplate,
+    removeLgTemplates,
+    copyLgTemplate,
+  };
 }
 
 export function useLgApi() {
@@ -97,7 +101,9 @@ export function useLgApi() {
 
     return () => {
       Object.keys(newApi).forEach(apiName => {
-        newApi[apiName].flush();
+        if (typeof newApi[apiName].flush === 'function') {
+          newApi[apiName].flush();
+        }
       });
     };
   }, [projectId, focusPath]);