Merge branch 'main' into luhan/fix4651

Composer/cypress/integration/Breadcrumb.spec.ts

@@ -35,12 +35,12 @@ context('breadcrumb', () => {
     hasBreadcrumbItems(cy, ['__TestTodoSample']);
   });
 
-  it('can show event name in breadcrumb', () => {
+  it('can show dialog and trigger name in breadcrumb', () => {
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByTestId('addtodo_Dialog started').click();
     });
 
-    hasBreadcrumbItems(cy, ['__TestTodoSample', 'Dialog started']);
+    hasBreadcrumbItems(cy, ['addtodo', 'Dialog started']);
   });
 
   it('can show action name in breadcrumb', () => {

Composer/cypress/integration/ToDoBot.spec.ts

@@ -5,6 +5,8 @@ context('ToDo Bot', () => {
   before(() => {
     cy.visit('/home');
     cy.createBot('TodoSample');
+    cy.findByTestId('WelcomeModalCloseIcon').click();
+    cy.findByText('Yes').click();
   });
 
   it('can open the main dialog', () => {

Composer/packages/adaptive-flow/src/adaptive-flow-editor/hooks/useEditorEventApi.ts

@@ -46,7 +46,7 @@ export const useEditorEventApi = (
     onFocusSteps,
     onFocusEvent,
     onCopy: onClipboardChange,
-    navTo: onOpen,
+    navTo,
     saveData: onChange,
     undo,
     redo,
@@ -153,7 +153,7 @@ export const useEditorEventApi = (
         break;
       case NodeEventTypes.OpenDialog:
         handler = ({ callee }) => {
-          onOpen(callee);
+          navTo(callee, '"beginDialog"');
           announce(ScreenReaderMessage.DialogOpened);
         };
         break;

Composer/packages/adaptive-form/src/components/fields/OneOfField/__tests__/utils.test.ts

@@ -22,9 +22,9 @@ describe('getOptions', () => {
     it('returns all of the types, sorted', () => {
       const { options } = getOptions(schema, {});
       expect(options).toEqual([
-        makeOption(schema, 'boolean'),
-        makeOption(schema, 'number'),
         makeOption(schema, 'string'),
+        makeOption(schema, 'number'),
+        makeOption(schema, 'boolean'),
       ]);
     });
   });
@@ -71,13 +71,13 @@ describe('getOptions', () => {
       const { options } = getOptions(schema, definitions);
       const optionKeys = options.map((o) => o.key);
       expect(optionKeys).toEqual([
-        'my awesome string',
-        'boolean',
+        'string',
         'number',
+        'boolean',
+        'my awesome string',
         'an enum',
         'dropdown',
         'another type',
-        'string',
         'unknown',
       ]);
     });

Composer/packages/adaptive-form/src/components/fields/OneOfField/utils.ts

@@ -25,6 +25,18 @@ function getOptionLabel(schema: JSONSchema7): string {
   return type || 'unknown';
 }
 
+const typePriorityWeights = {
+  string: 5,
+  number: 4,
+  boolean: 3,
+  array: 2,
+  object: 1,
+};
+
+const sortOptionsByTypeWeights = ({ key: type1 }, { key: type2 }): number => {
+  return (typePriorityWeights[type1] || 0) > (typePriorityWeights[type2] || 0) ? -1 : 1;
+};
+
 export function getOptions(
   schema: JSONSchema7,
   definitions?: SchemaDefinitions
@@ -40,7 +52,7 @@ export function getOptions(
       data: { schema: { ...schema, type: t }, icon: getFieldIconText(t) },
     }));
 
-    options.sort(({ text: t1 }, { text: t2 }) => (t1 > t2 ? 1 : -1));
+    options.sort(sortOptionsByTypeWeights);
 
     return { options, isNested };
   }
@@ -64,6 +76,8 @@ export function getOptions(
       })
       .filter(Boolean) as IDropdownOption[];
 
+    options.sort(sortOptionsByTypeWeights);
+
     const expression = (resolvedOneOf as JSONSchema7[]).find(({ $role }) => $role === 'expression');
     const merged = merge({}, omit(schema, 'oneOf'), expression);
 

Composer/packages/adaptive-form/src/components/fields/RegexIntentField.tsx

@@ -7,12 +7,10 @@ import React, { useState, useEffect } from 'react';
 import { FieldProps, useShellApi, MicrosoftIDialog } from '@bfc/extension-client';
 import { RegexRecognizer } from '@bfc/shared';
 
-import { useFormData } from '../../hooks';
-
 import { StringField } from './StringField';
 
-function getRegexIntentPattern(formData: MicrosoftIDialog, intent: string): string {
-  const recognizer = formData.recognizer as RegexRecognizer;
+function getRegexIntentPattern(dialogContent: MicrosoftIDialog, intent: string): string {
+  const recognizer = dialogContent.recognizer as RegexRecognizer;
   let pattern = '';
 
   if (!recognizer) {
@@ -28,15 +26,14 @@ function getRegexIntentPattern(formData: MicrosoftIDialog, intent: string): stri
 
 const RegexIntentField: React.FC<FieldProps> = ({ value: intentName, ...rest }) => {
   const { currentDialog, shellApi } = useShellApi();
-  const formData = useFormData();
-  const [localValue, setLocalValue] = useState(getRegexIntentPattern(formData, intentName));
+  const [localValue, setLocalValue] = useState(getRegexIntentPattern(currentDialog?.content, intentName));
 
   // if the intent name changes or intent names in the regex patterns
   // we need to reset the local value
   useEffect(() => {
-    const pattern = getRegexIntentPattern(formData, intentName);
+    const pattern = getRegexIntentPattern(currentDialog?.content, intentName);
     setLocalValue(pattern);
-  }, [intentName, (formData.recognizer as RegexRecognizer)?.intents.map((i) => i.intent)]);
+  }, [intentName, currentDialog?.content]);
 
   const handleIntentChange = (pattern?: string) => {
     setLocalValue(pattern ?? '');

Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx

@@ -5,9 +5,15 @@ import * as React from 'react';
 import { render, fireEvent, act } from '@botframework-composer/test-utils';
 import { createHistory, createMemorySource, LocationProvider } from '@reach/router';
 import { RecoilRoot } from 'recoil';
+import { getDefaultFeatureFlags } from '@bfc/shared';
 
 import CreationFlow from '../../../src/components/CreationFlow/CreationFlow';
-import { focusedStorageFolderState, creationFlowStatusState, dispatcherState } from '../../../src/recoilModel';
+import {
+  focusedStorageFolderState,
+  creationFlowStatusState,
+  dispatcherState,
+  featureFlagsState,
+} from '../../../src/recoilModel';
 import { CreationFlowStatus } from '../../../src/constants';
 
 describe('<CreationFlow/>', () => {
@@ -26,7 +32,7 @@ describe('<CreationFlow/>', () => {
       saveTemplateId: jest.fn(),
     });
     set(creationFlowStatusState, CreationFlowStatus.NEW_FROM_TEMPLATE);
-
+    set(featureFlagsState, getDefaultFeatureFlags());
     set(focusedStorageFolderState, {
       name: 'Desktop',
       parent: '/test-folder',

Composer/packages/client/__tests__/components/home.test.tsx

@@ -3,7 +3,7 @@
 
 import * as React from 'react';
 import { fireEvent, render } from '@botframework-composer/test-utils';
-import { ProjectTemplate } from '@bfc/shared';
+import { BotTemplate } from '@bfc/shared';
 
 import { RecentBotList } from '../../src/pages/home/RecentBotList';
 import { ExampleList } from '../../src/pages/home/ExampleList';
@@ -32,7 +32,7 @@ describe('<Home/>', () => {
     const templates = [
       { description: 'echo bot', id: 'EchoBot', name: 'Echo Bot' },
       { description: 'empty bot', id: 'EmptyBot', name: 'Empty Bot' },
-    ] as ProjectTemplate[];
+    ] as BotTemplate[];
     const onClickTemplate = jest.fn((item) => item);
     const { container, getByText } = render(<ExampleList examples={templates} onClick={onClickTemplate} />);
     expect(container).toHaveTextContent('Echo Bot');

Composer/packages/client/__tests__/pages/design/Design.test.tsx

@@ -0,0 +1,65 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+
+import { renderWithRecoil } from '../../testUtils';
+import {
+  botProjectIdsState,
+  currentProjectIdState,
+  dialogsSelectorFamily,
+  schemasState,
+  projectMetaDataState,
+  botProjectFileState,
+} from '../../../src/recoilModel';
+import { undoFunctionState } from '../../../src/recoilModel/undo/history';
+import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
+import DesignPage from '../../../src/pages/design/DesignPage';
+import { SAMPLE_DIALOG, SAMPLE_DIALOG_2 } from '../../mocks/sampleDialog';
+
+const projectId = '12345.6789';
+const skillId = '56789.1234';
+const dialogId = SAMPLE_DIALOG.id;
+
+const initRecoilState = ({ set }) => {
+  set(currentProjectIdState, projectId);
+  set(botProjectIdsState, [projectId]);
+  set(dialogsSelectorFamily(projectId), [SAMPLE_DIALOG]);
+  set(schemasState(projectId), mockProjectResponse.schemas);
+  set(projectMetaDataState(projectId), { isRootBot: true });
+  set(botProjectFileState(projectId), { foo: 'bar' });
+  set(undoFunctionState(projectId), { canUndo: () => false, canRedo: () => false });
+};
+
+const initRecoilStateMulti = ({ set }) => {
+  set(currentProjectIdState, projectId);
+  set(botProjectIdsState, [projectId, skillId]);
+  set(dialogsSelectorFamily(projectId), [SAMPLE_DIALOG]);
+  set(dialogsSelectorFamily(skillId), [SAMPLE_DIALOG, SAMPLE_DIALOG_2]);
+  set(schemasState(projectId), mockProjectResponse.schemas);
+  set(schemasState(skillId), mockProjectResponse.schemas);
+  set(projectMetaDataState(projectId), { isRootBot: true });
+  set(botProjectFileState(projectId), { foo: 'bar' });
+  set(undoFunctionState(projectId), { canUndo: () => false, canRedo: () => false });
+  set(undoFunctionState(skillId), { canUndo: () => false, canRedo: () => false });
+};
+
+describe('publish page', () => {
+  it('should render the design page (no skill)', () => {
+    const { getAllByText, getByText } = renderWithRecoil(
+      <DesignPage dialogId={dialogId} projectId={projectId} />,
+      initRecoilState
+    );
+    getAllByText(SAMPLE_DIALOG.displayName);
+    getByText('Start Bot');
+  });
+
+  it('should render the design page (with skill)', () => {
+    const { getAllByText, getByText } = renderWithRecoil(
+      <DesignPage dialogId={dialogId} projectId={projectId} skillId={skillId} />,
+      initRecoilStateMulti
+    );
+    getAllByText(SAMPLE_DIALOG.displayName);
+    getAllByText(SAMPLE_DIALOG_2.displayName);
+    getByText('Start Bot');
+  });
+});

Composer/packages/client/__tests__/utils/navigation.test.ts

@@ -3,15 +3,7 @@
 
 import { PromptTab } from '@bfc/shared';
 
-import {
-  BreadcrumbUpdateType,
-  getUrlSearch,
-  checkUrl,
-  getFocusPath,
-  clearBreadcrumb,
-  updateBreadcrumb,
-  convertPathToUrl,
-} from './../../src/utils/navigation';
+import { getUrlSearch, checkUrl, getFocusPath, convertPathToUrl } from './../../src/utils/navigation';
 
 const projectId = '123a-sdf123';
 const skillId = '98765.4321';
@@ -27,46 +19,6 @@ describe('getFocusPath', () => {
   });
 });
 
-describe('Breadcrumb Util', () => {
-  it('return focus path', () => {
-    const breadcrumb = [
-      { dialogId: `1`, selected: `1`, focused: `1` },
-      { dialogId: `2`, selected: `2`, focused: `2` },
-      { dialogId: `3`, selected: `3`, focused: `3` },
-    ];
-    const result1 = clearBreadcrumb(breadcrumb);
-    expect(result1).toEqual([]);
-    const result2 = clearBreadcrumb(breadcrumb, 0);
-    expect(result2).toEqual([]);
-    const result3 = clearBreadcrumb(breadcrumb, 1);
-    expect(result3.length).toEqual(1);
-    expect(result3[0].dialogId).toEqual('1');
-    const result4 = clearBreadcrumb(breadcrumb, 4);
-    expect(result4.length).toEqual(3);
-  });
-
-  it('update breadcrumb', () => {
-    const result1 = updateBreadcrumb([], BreadcrumbUpdateType.Selected);
-    expect(result1).toEqual([]);
-    let breadcrumb = [
-      { dialogId: `1`, selected: `1`, focused: `1` },
-      { dialogId: `2`, selected: `2`, focused: `2` },
-      { dialogId: `3`, selected: `3`, focused: `3` },
-    ];
-    const result2 = updateBreadcrumb(breadcrumb, BreadcrumbUpdateType.Selected);
-    expect(result2.length).toEqual(1);
-    expect(result2[0].dialogId).toEqual('1');
-    breadcrumb = [
-      { dialogId: `1`, selected: `1`, focused: `` },
-      { dialogId: `2`, selected: `2`, focused: `` },
-      { dialogId: `3`, selected: `3`, focused: `3` },
-    ];
-    const result3 = updateBreadcrumb(breadcrumb, BreadcrumbUpdateType.Focused);
-    expect(result3.length).toEqual(2);
-    expect(result3[1].dialogId).toEqual('2');
-  });
-});
-
 describe('composer url util', () => {
   it('create url', () => {
     const result1 = getUrlSearch('triggers[0]', 'triggers[0].actions[0]');

Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx

@@ -20,7 +20,7 @@ import {
   DetailsRow,
 } from 'office-ui-fabric-react/lib/DetailsList';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
-import { ProjectTemplate } from '@bfc/shared';
+import { BotTemplate } from '@bfc/shared';
 import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 import { NeutralColors } from '@uifabric/fluent-theme';
 import { RouteComponentProps } from '@reach/router';
@@ -105,7 +105,7 @@ const optionKeys = {
 
 // -------------------- CreateOptions -------------------- //
 type CreateOptionsProps = {
-  templates: ProjectTemplate[];
+  templates: BotTemplate[];
   onDismiss: () => void;
   onNext: (data: string) => void;
 } & RouteComponentProps<{}>;
@@ -119,7 +119,7 @@ export function CreateOptions(props: CreateOptionsProps) {
   const selection = useMemo(() => {
     return new Selection({
       onSelectionChanged: () => {
-        const t = selection.getSelection()[0] as ProjectTemplate;
+        const t = selection.getSelection()[0] as BotTemplate;
         if (t) {
           setCurrentTemplate(t.id);
         }