feature: show multi-skill project with correct link behavior

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://raw.githubusercontent.com/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}