From 75950218369f0ddea1708142dac766a1032b7f58 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Mon, 5 Oct 2020 11:40:04 -0700
Subject: [PATCH 01/44] Update en-US.json

---
 .../packages/server/src/locales/en-US.json    | 55 +++++++++++++++++--
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json
index 5c8444ead3..2dc509090a 100644
--- a/Composer/packages/server/src/locales/en-US.json
+++ b/Composer/packages/server/src/locales/en-US.json
@@ -221,6 +221,9 @@
   "are_you_sure_you_want_to_stop_current_runtime_and__a5f883b2": {
     "message": "Are you sure you want to stop current runtime and replace them?"
   },
+  "are_you_sure_you_want_to_uninstall_these_extension_cf6265e8": {
+    "message": "Are you sure you want to uninstall these extensions?"
+  },
   "array_643947ee": {
     "message": "Array"
   },
@@ -758,6 +761,12 @@
   "duplicated_intents_recognized_d3908424": {
     "message": "Duplicated intents recognized"
   },
+  "each_page_of_pagesizestring_in_propstring_a7e23b00": {
+    "message": "Each page of { pageSizeString } in { propString }"
+  },
+  "each_value_in_ae285cd9": {
+    "message": "Each value in"
+  },
   "early_adopters_e8db7999": {
     "message": "Early adopters"
   },
@@ -872,6 +881,9 @@
   "error_processing_schema_2c707cf3": {
     "message": "Error Processing Schema"
   },
+  "event_48c2be6e": {
+    "message": " (Event)"
+  },
   "event_activity_2067a94b": {
     "message": "Event activity"
   },
@@ -923,9 +935,6 @@
   "expression_to_evaluate_ce4095b1": {
     "message": "Expression to evaluate."
   },
-  "extension_name_e21a5e25": {
-    "message": "Extension name"
-  },
   "extensions_7250a0bb": {
     "message": "Extensions"
   },
@@ -1034,6 +1043,9 @@
   "home_351838cd": {
     "message": "Home"
   },
+  "host_ef9acfae": {
+    "message": "Host "
+  },
   "http_request_79847109": {
     "message": "HTTP Request"
   },
@@ -1445,12 +1457,18 @@
   "no_editor_for_type_8b5593c5": {
     "message": "No Editor for { type }"
   },
+  "no_extensions_installed_4b925277": {
+    "message": "No extensions installed"
+  },
   "no_lu_file_with_name_id_fb21315d": {
     "message": "NO LU FILE WITH NAME { id }"
   },
   "no_lu_or_qna_file_with_name_id_21cfe9dc": {
     "message": "NO LU OR QNA FILE WITH NAME { id }"
   },
+  "no_search_results_1ba50423": {
+    "message": "No search results"
+  },
   "no_updates_available_cecd904d": {
     "message": "No updates available"
   },
@@ -1778,6 +1796,15 @@
   "restart_bot_34e36428": {
     "message": "Restart Bot"
   },
+  "result_b1f14e91": {
+    "message": " = Result"
+  },
+  "result_property_100ef34f": {
+    "message": " = Result property"
+  },
+  "return_value_b386d1b": {
+    "message": "= Return value"
+  },
   "review_and_generate_63dec712": {
     "message": "Review and generate"
   },
@@ -1820,8 +1847,8 @@
   "search_280d00bd": {
     "message": "Search"
   },
-  "search_for_extensions_a27c4772": {
-    "message": "Search for extensions"
+  "search_for_extensions_on_npm_c5ca65d9": {
+    "message": "Search for extensions on npm"
   },
   "see_log_4b833bf7": {
     "message": "See Log"
@@ -2024,6 +2051,9 @@
   "text_7f4593da": {
     "message": "Text"
   },
+  "the_api_messages_endpoint_for_the_skill_f318dc63": {
+    "message": "The /api/messages endpoint for the skill."
+  },
   "the_callback_url_for_the_skill_host_e20e1012": {
     "message": "The callback url for the skill host."
   },
@@ -2051,6 +2081,9 @@
   "the_return_type_does_not_match_2ae72548": {
     "message": "the return type does not match"
   },
+  "the_root_bot_is_not_a_bot_project_d1495cf6": {
+    "message": "The root bot is not a bot project"
+  },
   "the_welcome_message_is_triggered_by_the_i_conversa_a3ff58f8": {
     "message": "The welcome message is triggered by the <i>ConversationUpdate</i> event. To add a new <i>ConversationUpdate</i> trigger:"
   },
@@ -2147,6 +2180,12 @@
   "to_which_language_will_you_be_translating_your_bot_77219d69": {
     "message": "To which language will you be translating your bot?"
   },
+  "toggle_extension_e41de2d2": {
+    "message": "Toggle extension"
+  },
+  "token_property_e53a19d9": {
+    "message": " = Token Property"
+  },
   "toolbar_bafd4228": {
     "message": "toolbar"
   },
@@ -2195,6 +2234,9 @@
   "undo_is_not_supported_ecd6f9fc": {
     "message": "Undo is not supported"
   },
+  "uninstall_8730233": {
+    "message": "Uninstall"
+  },
   "unknown_intent_44b962ba": {
     "message": "Unknown intent"
   },
@@ -2288,6 +2330,9 @@
   "view_kb_c382e495": {
     "message": "View KB"
   },
+  "view_on_npm_2051324d": {
+    "message": "View on npm"
+  },
   "vishwac_sena_45910bf0": {
     "message": "Vishwac Sena"
   },

From e6c088d075bf655cf77f043589e886906e24c65a Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Mon, 12 Oct 2020 18:12:01 -0700
Subject: [PATCH 02/44] bring in stuff from the draft branch

---
 .../components/AppComponents/RightPanel.tsx   |  27 +-
 .../components/ProjectTree/ExpandableNode.tsx |  51 +++
 .../components/ProjectTree/ProjectTree.tsx    | 371 ++++++++++++------
 .../src/components/ProjectTree/treeItem.tsx   | 154 +++++---
 .../src/components/Split/LeftRightSplit.tsx   |   2 +
 .../client/src/pages/design/DesignPage.tsx    |   4 +-
 .../src/pages/knowledge-base/QnAPage.tsx      |   4 +
 .../client/src/pages/publish/Publish.tsx      |   5 +
 .../client/src/pages/setting/SettingsPage.tsx |   2 +
 .../client/src/recoilModel/atoms/appState.ts  |  17 +
 .../recoilModel/dispatchers/application.ts    |  14 +-
 Composer/plugins/azurePublish/yarn.lock       |  53 ++-
 12 files changed, 523 insertions(+), 181 deletions(-)
 create mode 100644 Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx

diff --git a/Composer/packages/client/src/components/AppComponents/RightPanel.tsx b/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
index 0d13f00346..8882cbb00f 100644
--- a/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
+++ b/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
@@ -5,12 +5,16 @@
 import { jsx, css } from '@emotion/core';
 import { useRecoilValue } from 'recoil';
 import { forwardRef } from 'react';
+import formatMessage from 'format-message';
 
 import { RequireAuth } from '../RequireAuth';
 import { ErrorBoundary } from '../ErrorBoundary';
+import { Conversation } from '../Conversation';
+import { ProjectTree } from '../ProjectTree/ProjectTree';
+import { LeftRightSplit } from '../Split/LeftRightSplit';
 
 import Routes from './../../router';
-import { applicationErrorState, dispatcherState, currentProjectIdState } from './../../recoilModel';
+import { applicationErrorState, dispatcherState, currentProjectIdState, currentModeState } from './../../recoilModel';
 
 // -------------------- Styles -------------------- //
 
@@ -33,10 +37,20 @@ const content = css`
 
 const Content = forwardRef<HTMLDivElement>((props, ref) => <div css={content} {...props} ref={ref} />);
 
+const SHOW_TREE = ['design'];
+
 export const RightPanel = () => {
   const applicationError = useRecoilValue(applicationErrorState);
   const { setApplicationLevelError, fetchProjectById } = useRecoilValue(dispatcherState);
   const projectId = useRecoilValue(currentProjectIdState);
+  const currentMode = useRecoilValue(currentModeState);
+
+  const conversation = (
+    <Conversation>
+      <Routes component={Content} />
+    </Conversation>
+  );
+
   return (
     <div css={rightPanel}>
       <ErrorBoundary
@@ -45,7 +59,16 @@ export const RightPanel = () => {
         setApplicationLevelError={setApplicationLevelError}
       >
         <RequireAuth>
-          <Routes component={Content} />
+          <div css={{ display: 'flex', flexDirection: 'row', label: 'MainPage' }}>
+            {SHOW_TREE.includes(currentMode) ? (
+              <LeftRightSplit initialLeftGridWidth="200px" minLeftPixels={200} minRightPixels={800}>
+                <ProjectTree regionName={formatMessage('Project tree')} showTriggers={currentMode === 'design'} />
+                {conversation}
+              </LeftRightSplit>
+            ) : (
+              conversation
+            )}
+          </div>
         </RequireAuth>
       </ErrorBoundary>
     </div>
diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
new file mode 100644
index 0000000000..bcb10d3d83
--- /dev/null
+++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import { useState, MouseEvent, KeyboardEvent } from 'react';
+
+type Props = {
+  children: JSX.Element;
+  summary: JSX.Element;
+  depth?: number;
+  detailsRef?: (el: HTMLElement | null) => void;
+};
+
+const summaryStyle = css`
+  label: summary;
+  display: flex;
+  padding-left: 12px;
+  padding-top: 6px;
+`;
+
+const nodeStyle = (depth: number) => css`
+  margin-left: ${depth * 16}px;
+`;
+
+export const ExpandableNode = ({ children, summary, detailsRef, depth = 0 }: Props) => {
+  const [isOpen, setOpen] = useState(true);
+
+  function handleClick(ev: MouseEvent) {
+    if ((ev.target as Element)?.tagName.toLowerCase() === 'summary') {
+      setOpen(!isOpen);
+    }
+    ev.preventDefault();
+  }
+
+  function handleKey(ev: KeyboardEvent) {
+    if (ev.key === 'Enter' || ev.key === 'Space') setOpen(!isOpen);
+  }
+
+  return (
+    <div css={nodeStyle(depth)}>
+      <details ref={detailsRef} open={isOpen}>
+        {/* 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}
+        </summary>
+        {children}
+      </details>
+    </div>
+  );
+};
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 45d4910a26..4b2d1f48b4 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -2,15 +2,8 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { jsx, css } from '@emotion/core';
-import {
-  GroupedList,
-  IGroup,
-  IGroupHeaderProps,
-  IGroupRenderProps,
-  IGroupedList,
-} from 'office-ui-fabric-react/lib/GroupedList';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import cloneDeep from 'lodash/cloneDeep';
@@ -18,24 +11,17 @@ import formatMessage from 'format-message';
 import { DialogInfo, ITrigger } from '@bfc/shared';
 import debounce from 'lodash/debounce';
 import { useRecoilValue } from 'recoil';
-import { IGroupedListStyles } from 'office-ui-fabric-react/lib/GroupedList';
 import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
 
-import { dispatcherState } from '../../recoilModel';
-import { createSelectedPath, getFriendlyName } from '../../utils/dialogUtil';
+import { dispatcherState, currentProjectIdState, botProjectSpaceSelector } from '../../recoilModel';
+import { getFriendlyName } from '../../utils/dialogUtil';
 import { containUnsupportedTriggers, triggerNotSupported } from '../../utils/dialogValidator';
 
 import { TreeItem } from './treeItem';
+import { ExpandableNode } from './ExpandableNode';
 
 // -------------------- Styles -------------------- //
 
-const groupListStyle: Partial<IGroupedListStyles> = {
-  root: {
-    width: '100%',
-    boxSizing: 'border-box',
-  },
-};
-
 const searchBox: ISearchBoxStyles = {
   root: {
     borderBottom: '1px solid #edebe9',
@@ -55,28 +41,57 @@ const root = css`
   }
 `;
 
+const icons = {
+  TRIGGER: 'LightningBolt',
+  DIALOG: 'Org',
+  BOT: 'CubeShape',
+  EXTERNAL_SKILL: 'Globe',
+  FORM_DIALOG: '',
+  FORM_FIELD: 'Variable2', // x in parentheses
+  FORM_TRIGGER: 'TriggerAuto', // lightning bolt with gear
+  FILTER: 'Filter',
+};
+
+const tree = css`
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+  label: tree;
+`;
+
 // -------------------- ProjectTree -------------------- //
 
-function createGroupItem(dialog: DialogInfo, currentId: string, position: number, warningContent: string): IGroup {
-  return {
-    key: dialog.id,
-    name: dialog.displayName,
-    level: 1,
-    startIndex: position,
-    count: dialog.triggers.length,
-    hasMoreData: true,
-    isCollapsed: dialog.id !== currentId,
-    data: { ...dialog, warningContent },
-  };
+export type TreeLink = {
+  displayName: string;
+  isRoot: boolean;
+  warningContent?: string;
+  errorContent?: string;
+  projectId: string;
+  skillId?: string;
+  dialogName?: string;
+  trigger?: number;
+};
+
+function isLinkEqual(link1: TreeLink | undefined, link2: TreeLink | undefined) {
+  if (link1 === link2) return true;
+  if (link1 == null) return false;
+  if (link2 == null) return false;
+  if (link1.projectId !== link2.projectId) return false;
+  if (link1.skillId !== link2.skillId) return false;
+  if (link1.dialogName !== link2.dialogName) return false;
+  if (link1.trigger !== link2.trigger) return false;
+  return true;
 }
 
-function createItem(trigger: ITrigger, index: number, warningContent: string) {
-  return {
-    ...trigger,
-    index,
-    warningContent,
-    displayName: trigger.displayName || getFriendlyName({ $kind: trigger.type }),
-  };
+export type TreeMenuItem = {
+  icon?: string;
+  label: string; // leave this blank to place a separator
+  action?: (link: TreeLink) => void;
+};
+
+function getTriggerName(trigger: ITrigger) {
+  return trigger.displayName || getFriendlyName({ $kind: trigger.type });
 }
 
 function sortDialog(dialogs: DialogInfo[]) {
@@ -92,97 +107,233 @@ function sortDialog(dialogs: DialogInfo[]) {
   });
 }
 
-function createItemsAndGroups(
-  dialogs: DialogInfo[],
-  dialogId: string,
-  filter: string
-): { items: any[]; groups: IGroup[] } {
-  let position = 0;
-  const result = dialogs
-    .filter((dialog) => {
-      return dialog.displayName.toLowerCase().includes(filter.toLowerCase());
-    })
-    .reduce(
-      (result: { items: any[]; groups: IGroup[] }, dialog) => {
-        const warningContent = containUnsupportedTriggers(dialog);
-        result.groups.push(createGroupItem(dialog, dialogId, position, warningContent));
-        position += dialog.triggers.length;
-        dialog.triggers.forEach((item, index) => {
-          const warningContent = triggerNotSupported(dialog, item);
-          result.items.push(createItem(item, index, warningContent));
-        });
-        return result;
-      },
-      { items: [], groups: [] }
-    );
-  return result;
-}
-
-interface IProjectTreeProps {
+type BotInProject = {
   dialogs: DialogInfo[];
-  dialogId: string;
-  selected: string;
-  onSelect: (id: string, selected?: string) => void;
+  projectId: string;
+  name: string;
+  isRemote: boolean;
+};
+
+type IProjectTreeProps = {
+  onSelect?: (link: TreeLink) => void;
+  showTriggers?: boolean;
+  showDialogs?: boolean;
+  regionName: string;
+  navLinks?: TreeLink[];
   onDeleteTrigger: (id: string, index: number) => void;
   onDeleteDialog: (id: string) => void;
-}
+};
 
-export const ProjectTree: React.FC<IProjectTreeProps> = (props) => {
-  const { onboardingAddCoachMarkRef } = useRecoilValue(dispatcherState);
+export const ProjectTree: React.FC<IProjectTreeProps> = ({
+  showTriggers = true,
+  showDialogs = true,
+  onDeleteDialog,
+  onDeleteTrigger,
+}) => {
+  const { onboardingAddCoachMarkRef, selectTo, navTo } = useRecoilValue(dispatcherState);
 
-  const groupRef: React.RefObject<IGroupedList> = useRef(null);
-  const { dialogs, dialogId, selected, onSelect, onDeleteTrigger, onDeleteDialog } = props;
   const [filter, setFilter] = useState('');
+  const [selectedLink, setSelectedLink] = useState<TreeLink | undefined>();
   const delayedSetFilter = debounce((newValue) => setFilter(newValue), 1000);
   const addMainDialogRef = useCallback((mainDialog) => onboardingAddCoachMarkRef({ mainDialog }), []);
+  const projectCollection = useRecoilValue<BotInProject[]>(botProjectSpaceSelector).map((bot) => ({
+    ...bot,
+    hasWarnings: false,
+  }));
+  const currentProjectId = useRecoilValue(currentProjectIdState);
 
-  const sortedDialogs = useMemo(() => {
-    return sortDialog(dialogs);
-  }, [dialogs]);
+  const botHasWarnings = (bot: BotInProject) => {
+    return bot.dialogs.some((dialog) => dialog.triggers.some((tr) => triggerNotSupported(dialog, tr)));
+  };
 
-  const onRenderHeader = (props: IGroupHeaderProps) => {
-    const toggleCollapse = (): void => {
-      groupRef.current?.toggleCollapseAll(true);
-      props.onToggleCollapse?.(props.group!);
-      onSelect(props.group!.key);
+  const botHasErrors = (bot: BotInProject) => {
+    // TODO: this is just a stub for now
+    return false;
+  };
+
+  const handleOnSelect = (link: TreeLink) => {
+    setSelectedLink(link);
+    if (link.dialogName != null) {
+      if (link.trigger != null) {
+        selectTo(link.projectId, link.skillId, link.dialogName, `triggers[${link.trigger}]`);
+      } else {
+        navTo(link.projectId, link.skillId, link.dialogName);
+      }
+    }
+  };
+
+  const renderBotHeader = (bot: BotInProject) => {
+    const link: TreeLink = {
+      displayName: bot.name,
+      projectId: currentProjectId,
+      skillId: bot.projectId,
+      isRoot: true,
+      warningContent: botHasWarnings(bot) ? formatMessage('This bot has warnings') : undefined,
+      errorContent: botHasErrors(bot) ? formatMessage('This bot has errors') : undefined,
     };
+
     return (
-      <span ref={props.group?.data.isRoot && addMainDialogRef} role="grid">
+      <span
+        key={bot.name}
+        css={css`
+          margin-top: -6px;
+          width: 100%;
+          label: bot-header;
+        `}
+        role="grid"
+      >
         <TreeItem
-          depth={0}
-          isActive={!props.group!.isCollapsed}
-          isSubItemActive={!!selected}
-          link={props.group!.data}
-          onDelete={onDeleteDialog}
-          onSelect={toggleCollapse}
+          showProps
+          icon={bot.isRemote ? icons.EXTERNAL_SKILL : icons.BOT}
+          isSubItemActive={isLinkEqual(link, selectedLink)}
+          link={link}
+          menu={[{ label: formatMessage('Create/edit skill manifest'), action: () => {} }]}
+          shiftOut={bot.isRemote ? 28 : 0}
         />
       </span>
     );
   };
 
-  function onRenderCell(nestingDepth?: number, item?: any): React.ReactNode {
+  const renderDialogHeader = (skillId: string, dialog: DialogInfo, warningContent: string) => {
+    const link: TreeLink = {
+      dialogName: dialog.id,
+      displayName: dialog.displayName,
+      isRoot: dialog.isRoot,
+      projectId: currentProjectId,
+      skillId,
+      warningContent,
+    };
+    return (
+      <span
+        key={dialog.id}
+        ref={dialog.isRoot ? addMainDialogRef : null}
+        css={css`
+          margin-top: -6px;
+          width: 100%;
+          label: dialog-header;
+        `}
+        role="grid"
+      >
+        <TreeItem
+          showProps
+          icon={icons.DIALOG}
+          isSubItemActive={isLinkEqual(link, selectedLink)}
+          link={link}
+          menu={[
+            {
+              label: formatMessage('Remove this dialog'),
+              icon: 'Delete',
+              action: (link) => {
+                onDeleteDialog(link.dialogName ?? '');
+              },
+            },
+          ]}
+          shiftOut={showTriggers ? 0 : 28}
+          onSelect={handleOnSelect}
+        />
+      </span>
+    );
+  };
+
+  function renderTrigger(projectId: string, item: any, dialog: DialogInfo): React.ReactNode {
+    // NOTE: put the form-dialog detection here when it's ready
+    const link: TreeLink = {
+      displayName: item.displayName,
+      warningContent: item.warningContent,
+      errorContent: item.errorContent,
+      trigger: item.index,
+      dialogName: dialog.id,
+      isRoot: false,
+      projectId: currentProjectId,
+      skillId: projectId,
+    };
+
     return (
       <TreeItem
-        depth={nestingDepth}
-        isActive={createSelectedPath(item.index) === selected}
-        link={item}
-        onDelete={() => onDeleteTrigger(dialogId, item.index)}
-        onSelect={() => onSelect(dialogId, createSelectedPath(item.index))}
+        key={`${item.id}_${item.index}`}
+        dialogName={dialog.displayName}
+        icon={icons.TRIGGER}
+        isActive={isLinkEqual(link, selectedLink)}
+        link={link}
+        menu={[
+          {
+            label: formatMessage('Remove this trigger'),
+            icon: 'Delete',
+            action: (link) => {
+              onDeleteTrigger(link.dialogName ?? '', link.trigger ?? 0);
+            },
+          },
+        ]}
+        shiftOut={48}
+        onSelect={handleOnSelect}
       />
     );
   }
 
-  const onRenderShowAll = () => {
-    return null;
-  };
-
   const onFilter = (_e?: any, newValue?: string): void => {
     if (typeof newValue === 'string') {
       delayedSetFilter(newValue);
     }
   };
 
-  const itemsAndGroups: { items: any[]; groups: IGroup[] } = createItemsAndGroups(sortedDialogs, dialogId, filter);
+  function filterMatch(scope: string) {
+    return scope.toLowerCase().includes(filter.toLowerCase());
+  }
+
+  function createDetailsTree(bot: BotInProject, startDepth: number) {
+    const { projectId } = bot;
+    const dialogs = sortDialog(bot.dialogs);
+
+    const filteredDialogs =
+      filter == null || filter.length === 0
+        ? dialogs
+        : dialogs.filter(
+            (dialog) =>
+              filterMatch(dialog.displayName) || dialog.triggers.some((trigger) => filterMatch(getTriggerName(trigger)))
+          );
+
+    if (showTriggers) {
+      return filteredDialogs.map((dialog: DialogInfo) => {
+        const triggerList = dialog.triggers
+          .filter((tr) => filterMatch(dialog.displayName) || filterMatch(getTriggerName(tr)))
+          .map((tr, index) => {
+            const warningContent = triggerNotSupported(dialog, tr);
+            return renderTrigger(projectId, { ...tr, index, displayName: getTriggerName(tr), warningContent }, dialog);
+          });
+        return (
+          <ExpandableNode
+            key={dialog.id}
+            depth={startDepth}
+            detailsRef={dialog.isRoot ? addMainDialogRef : undefined}
+            summary={renderDialogHeader(projectId, dialog, containUnsupportedTriggers(dialog))}
+          >
+            <div>{triggerList}</div>
+          </ExpandableNode>
+        );
+      });
+    } else {
+      return filteredDialogs.map((dialog: DialogInfo) =>
+        renderDialogHeader(projectId, dialog, containUnsupportedTriggers(dialog))
+      );
+    }
+  }
+
+  function createBotSubtree(bot: BotInProject & { hasWarnings: boolean }) {
+    if (showDialogs && !bot.isRemote) {
+      return (
+        <ExpandableNode key={bot.projectId} summary={renderBotHeader(bot)}>
+          <div>{createDetailsTree(bot, 1)}</div>
+        </ExpandableNode>
+      );
+    } else {
+      return renderBotHeader(bot);
+    }
+  }
+
+  const projectTree =
+    projectCollection.length === 1
+      ? createDetailsTree(projectCollection[0], 0)
+      : projectCollection.map(createBotSubtree);
 
   return (
     <div
@@ -196,7 +347,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = (props) => {
         <SearchBox
           underlined
           ariaLabel={formatMessage('Type dialog name')}
-          iconProps={{ iconName: 'Filter' }}
+          iconProps={{ iconName: icons.FILTER }}
           placeholder={formatMessage('Filter Dialog')}
           styles={searchBox}
           onChange={onFilter}
@@ -205,34 +356,20 @@ export const ProjectTree: React.FC<IProjectTreeProps> = (props) => {
           aria-label={formatMessage(
             `{
             dialogNum, plural,
-                =0 {No dialogs}
-                =1 {One dialog}
-              other {# dialogs}
+                =0 {No bots}
+                =1 {One bot}
+              other {# bots}
             } have been found.
             {
               dialogNum, select,
                   0 {}
                 other {Press down arrow key to navigate the search results}
             }`,
-            { dialogNum: itemsAndGroups.groups.length }
+            { dialogNum: projectCollection.length }
           )}
           aria-live={'polite'}
         />
-        <GroupedList
-          {...itemsAndGroups}
-          componentRef={groupRef}
-          groupProps={
-            {
-              onRenderHeader: onRenderHeader,
-              onRenderShowAll: onRenderShowAll,
-              showEmptyGroups: true,
-              showAllProps: false,
-              isAllGroupsCollapsed: true,
-            } as Partial<IGroupRenderProps>
-          }
-          styles={groupListStyle}
-          onRenderCell={onRenderCell}
-        />
+        <div css={tree}>{projectTree}</div>
       </FocusZone>
     </div>
   );
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index fc32818c8b..d6c7bd332e 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import { FontWeights } from '@uifabric/styling';
 import { OverflowSet, IOverflowSetItemProps } from 'office-ui-fabric-react/lib/OverflowSet';
 import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
+import { ContextualMenuItemType, IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import formatMessage from 'format-message';
@@ -15,15 +16,17 @@ import { IButtonStyles } from 'office-ui-fabric-react/lib/Button';
 import { IContextualMenuStyles } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { ICalloutContentStyles } from 'office-ui-fabric-react/lib/Callout';
 
+import { TreeLink, TreeMenuItem } from './ProjectTree';
+
 // -------------------- Styles -------------------- //
-const indent = 16;
-const itemText = (depth: number) => css`
+const indent = 8;
+const itemText = css`
   outline: none;
   :focus {
     outline: rgb(102, 102, 102) solid 1px;
     z-index: 1;
   }
-  padding-left: ${depth * indent}px;
+  padding-left: ${indent}px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -42,15 +45,9 @@ const content = css`
   label: ProjectTreeItem;
 `;
 
-const leftIndent = css`
-  height: 100%;
-  width: ${indent}px;
-`;
-
 const moreMenu: Partial<ICalloutContentStyles> = {
   root: {
     marginTop: '-7px',
-    width: '100px',
   },
 };
 
@@ -77,13 +74,14 @@ const moreButton = (isActive: boolean): IButtonStyles => {
   };
 };
 
-const navItem = (isActive: boolean, isSubItemActive: boolean) => css`
-  width: 100%;
+const navItem = (isActive: boolean, shift: number) => css`
+  width: calc(100%-${shift}px);
   position: relative;
-  height: 36px;
+  height: 24px;
   font-size: 12px;
-  color: #545454;
-  background: ${isActive && !isSubItemActive ? '#f2f2f2' : 'transparent'};
+  margin-left: ${shift}px;
+  color: ${isActive ? '#ffffff' : '#545454'};
+  background: ${isActive ? '#0078d4' : 'transparent'};
   font-weight: ${isActive ? FontWeights.semibold : FontWeights.regular};
   &:hover {
     color: #545454;
@@ -113,58 +111,81 @@ const navItem = (isActive: boolean, isSubItemActive: boolean) => css`
 export const overflowSet = css`
   width: 100%;
   height: 100%;
-  padding-left: 12px;
   padding-right: 12px;
   box-sizing: border-box;
-  line-height: 36px;
+  line-height: 20px;
   justify-content: space-between;
   display: flex;
-  justify-content: space-between;
 `;
 
+const statusIcon = {
+  width: '24px',
+  fontSize: 16,
+  marginLeft: 6,
+};
+
 const warningIcon = {
-  marginRight: 5,
+  ...statusIcon,
   color: '#BE880A',
-  fontSize: 9,
+};
+
+const errorIcon = {
+  ...statusIcon,
+  color: '#CC3F3F',
 };
 
 // -------------------- TreeItem -------------------- //
 
 interface ITreeItemProps {
-  link: any;
-  isActive: boolean;
+  link: TreeLink;
+  isActive?: boolean;
   isSubItemActive?: boolean;
-  depth: number | undefined;
-  onDelete: (id: string) => void;
-  onSelect: (id: string) => void;
+  menu: TreeMenuItem[];
+  onSelect?: (link: TreeLink) => void;
+  icon?: string;
+  dialogName?: string;
+  showProps?: boolean;
+  shiftOut?: number; // needed to make an outline look right; should be the size of the "details" reveal arrow
 }
 
+const renderTreeMenuItem = (item: TreeMenuItem) => {
+  if (item.label === '') {
+    return {
+      key: 'divider',
+      itemType: ContextualMenuItemType.Divider,
+    };
+  }
+  return {
+    key: item.label,
+    ariaLabel: item.label,
+    text: item.label,
+    iconProps: { iconName: item.icon },
+    onItemClick: item.action,
+  };
+};
+
 const onRenderItem = (item: IOverflowSetItemProps) => {
   const warningContent = formatMessage(
     'This trigger type is not supported by the RegEx recognizer and will not be fired.'
   );
+  const errorContent = 'stub for error content'; // TODO: get actual warning and error messages from link
   return (
     <div
       data-is-focusable
-      css={itemText(item.depth)}
+      aria-label={warningContent}
+      css={itemText}
       role="cell"
       tabIndex={0}
       onBlur={item.onBlur}
       onFocus={item.onFocus}
     >
-      <div css={content} tabIndex={-1}>
-        {item.warningContent ? (
-          <TooltipHost content={warningContent} directionalHint={DirectionalHint.bottomLeftEdge}>
-            <Icon iconName={'Warning'} style={warningIcon} />
-          </TooltipHost>
-        ) : (
-          <div css={leftIndent} />
-        )}
-        {item.depth !== 0 && (
+      <div css={content} role="presentation" tabIndex={-1}>
+        {item.icon != null && (
           <Icon
-            iconName="Flow"
+            iconName={item.icon}
             styles={{
               root: {
+                width: '12px',
                 marginRight: '8px',
                 outline: 'none',
               },
@@ -173,16 +194,26 @@ const onRenderItem = (item: IOverflowSetItemProps) => {
           />
         )}
         {item.displayName}
+        {item.errorContent && (
+          <TooltipHost content={errorContent} directionalHint={DirectionalHint.bottomLeftEdge}>
+            <Icon iconName={'Warning'} style={warningIcon} />
+          </TooltipHost>
+        )}
+        {item.warningContent && (
+          <TooltipHost content={warningContent} directionalHint={DirectionalHint.bottomLeftEdge}>
+            <Icon iconName={'ErrorBadge'} style={errorIcon} />
+          </TooltipHost>
+        )}
       </div>
     </div>
   );
 };
 
-const onRenderOverflowButton = (isRoot: boolean, isActive: boolean) => {
+const onRenderOverflowButton = (isActive: boolean) => {
   const moreLabel = formatMessage('Actions');
-  const showIcon = !isRoot;
-  return (overflowItems) => {
-    return showIcon ? (
+  return (overflowItems: IContextualMenuItem[] | undefined) => {
+    if (overflowItems == null) return null;
+    return (
       <TooltipHost content={moreLabel} directionalHint={DirectionalHint.rightCenter}>
         <IconButton
           ariaLabel={moreLabel}
@@ -200,23 +231,38 @@ const onRenderOverflowButton = (isRoot: boolean, isActive: boolean) => {
           }}
         />
       </TooltipHost>
-    ) : null;
+    );
   };
 };
 
-export const TreeItem: React.FC<ITreeItemProps> = (props) => {
-  const { link, isActive, isSubItemActive, depth, onDelete, onSelect } = props;
+export const TreeItem: React.FC<ITreeItemProps> = ({
+  link,
+  isActive = false,
+  icon,
+  dialogName,
+  shiftOut,
+  onSelect,
+  menu,
+}) => {
+  const a11yLabel = `${dialogName ?? '$Root'}_${link.displayName}`;
+
+  const overflowMenu = menu.map(renderTreeMenuItem);
+
+  const linkString = `${link.projectId}_DialogTreeItem${link.dialogName}_${link.trigger ?? ''}`;
 
   return (
     <div
-      css={navItem(isActive, !!isSubItemActive)}
-      role="presentation"
+      aria-label={a11yLabel}
+      css={navItem(!!isActive, shiftOut ?? 0)}
+      data-testid={a11yLabel}
+      role="gridcell"
+      tabIndex={0}
       onClick={() => {
-        onSelect(link.id);
+        onSelect?.(link);
       }}
       onKeyDown={(e) => {
         if (e.key === 'Enter') {
-          onSelect(link.id);
+          onSelect?.(link);
         }
       }}
     >
@@ -225,25 +271,19 @@ export const TreeItem: React.FC<ITreeItemProps> = (props) => {
         //remove this at that time
         doNotContainWithinFocusZone
         css={overflowSet}
-        data-testid={`DialogTreeItem${link.id}`}
+        data-testid={linkString}
         items={[
           {
-            key: link.id,
-            depth,
+            key: linkString,
+            icon,
             ...link,
           },
         ]}
-        overflowItems={[
-          {
-            key: 'delete',
-            name: formatMessage('Delete'),
-            onClick: () => onDelete(link.id),
-          },
-        ]}
+        overflowItems={overflowMenu}
         role="row"
         styles={{ item: { flex: 1 } }}
         onRenderItem={onRenderItem}
-        onRenderOverflowButton={onRenderOverflowButton(link.isRoot, isActive)}
+        onRenderOverflowButton={onRenderOverflowButton(!!isActive)}
       />
     </div>
   );
diff --git a/Composer/packages/client/src/components/Split/LeftRightSplit.tsx b/Composer/packages/client/src/components/Split/LeftRightSplit.tsx
index 8b88b48e3d..50f5bb550c 100644
--- a/Composer/packages/client/src/components/Split/LeftRightSplit.tsx
+++ b/Composer/packages/client/src/components/Split/LeftRightSplit.tsx
@@ -33,6 +33,7 @@ const Left = styled.div`
   outline: none;
   overflow: hidden;
   grid-area: left;
+  label: LeftSplit;
 `;
 
 const Split = styled.div`
@@ -65,6 +66,7 @@ const Right = styled.div`
   outline: none;
   overflow: hidden;
   grid-area: right;
+  label: SplitRight;
 `;
 
 // ensures a value can be used in gridTemplateColumns
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 3969cc7eb1..28f639f4c0 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -594,9 +594,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       <div css={pageRoot}>
         <LeftRightSplit initialLeftGridWidth="20%" minLeftPixels={200} minRightPixels={800}>
           <ProjectTree
-            dialogId={dialogId}
-            dialogs={dialogs}
-            selected={selected}
+            regionName={formatMessage('project tree')}
             onDeleteDialog={handleDeleteDialog}
             onDeleteTrigger={handleDeleteTrigger}
             onSelect={(...props) => handleSelect(projectId, ...props)}
diff --git a/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx b/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx
index 8381f84378..61ace5f060 100644
--- a/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx
+++ b/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx
@@ -92,6 +92,10 @@ const QnAPage: React.FC<QnAPageProps> = (props) => {
     [dialogId, projectId]
   );
 
+  useEffect(() => {
+    actions.setCurrentMode('qna');
+  }, []);
+
   const toolbarItems = [
     {
       type: 'dropdown',
diff --git a/Composer/packages/client/src/pages/publish/Publish.tsx b/Composer/packages/client/src/pages/publish/Publish.tsx
index ac89b47bbe..71d9e43aa4 100644
--- a/Composer/packages/client/src/pages/publish/Publish.tsx
+++ b/Composer/packages/client/src/pages/publish/Publish.tsx
@@ -48,6 +48,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
     publishToTarget,
     setQnASettings,
     rollbackToVersion: rollbackToVersionDispatcher,
+    setCurrentMode,
   } = useRecoilValue(dispatcherState);
 
   const [addDialogHidden, setAddDialogHidden] = useState(true);
@@ -370,6 +371,10 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
     [settings.publishTargets, projectId, botName]
   );
 
+  useEffect(() => {
+    setCurrentMode('notifications');
+  }, []);
+
   return (
     <Fragment>
       <Dialog
diff --git a/Composer/packages/client/src/pages/setting/SettingsPage.tsx b/Composer/packages/client/src/pages/setting/SettingsPage.tsx
index 37b12d8b4b..22dbd8d2cb 100644
--- a/Composer/packages/client/src/pages/setting/SettingsPage.tsx
+++ b/Composer/packages/client/src/pages/setting/SettingsPage.tsx
@@ -45,6 +45,7 @@ const SettingPage: React.FC<RouteComponentProps> = () => {
     addLanguages,
     deleteLanguages,
     fetchProjectById,
+    setCurrentMode,
   } = useRecoilValue(dispatcherState);
   const locale = useRecoilValue(localeState(projectId));
   const showDelLanguageModal = useRecoilValue(showDelLanguageModalState(projectId));
@@ -58,6 +59,7 @@ const SettingPage: React.FC<RouteComponentProps> = () => {
   // use cached projectId do fetch.
   const cachedProjectId = useProjectIdCache();
   useEffect(() => {
+    setCurrentMode('settings');
     if (!projectId && cachedProjectId) {
       fetchProjectById(cachedProjectId);
     }
diff --git a/Composer/packages/client/src/recoilModel/atoms/appState.ts b/Composer/packages/client/src/recoilModel/atoms/appState.ts
index 1926d46b6a..4dcf96ddf1 100644
--- a/Composer/packages/client/src/recoilModel/atoms/appState.ts
+++ b/Composer/packages/client/src/recoilModel/atoms/appState.ts
@@ -30,6 +30,18 @@ export type CurrentUser = {
   sessionExpired: boolean;
 };
 
+export type PageMode =
+  | 'home'
+  | 'design'
+  | 'lg'
+  | 'lu'
+  | 'qna'
+  | 'notifications'
+  | 'publish'
+  | 'skills'
+  | 'settings'
+  | 'about';
+
 const getFullyQualifiedKey = (value: string) => {
   return `App_${value}_State`;
 };
@@ -180,6 +192,11 @@ export const currentProjectIdState = atom<string>({
   default: '',
 });
 
+export const currentModeState = atom<PageMode>({
+  key: getFullyQualifiedKey('currentMode'),
+  default: 'home',
+});
+
 export const botProjectSpaceLoadedState = atom<boolean>({
   key: getFullyQualifiedKey('botProjectSpaceLoadedState'),
   default: false,
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/application.ts b/Composer/packages/client/src/recoilModel/dispatchers/application.ts
index fe1cd90038..4e5b564df0 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/application.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/application.ts
@@ -5,7 +5,14 @@
 import { CallbackInterface, useRecoilCallback } from 'recoil';
 import debounce from 'lodash/debounce';
 
-import { appUpdateState, announcementState, onboardingState, creationFlowStatusState } from '../atoms/appState';
+import {
+  appUpdateState,
+  announcementState,
+  onboardingState,
+  creationFlowStatusState,
+  currentModeState,
+  PageMode,
+} from '../atoms/appState';
 import { AppUpdaterStatus, CreationFlowStatus } from '../../constants';
 import OnboardingState from '../../utils/onboardingStorage';
 import { StateError, AppUpdateState } from '../../recoilModel/types';
@@ -68,6 +75,10 @@ export const applicationDispatcher = () => {
     set(announcementState, message);
   });
 
+  const setCurrentMode = useRecoilCallback(({ set }: CallbackInterface) => (mode: PageMode) => {
+    set(currentModeState, mode);
+  });
+
   const onboardingAddCoachMarkRef = useRecoilCallback(
     ({ set }: CallbackInterface) => (coachMarkRef: { [key: string]: any }) => {
       set(onboardingState, (onboardingObj) => ({
@@ -108,5 +119,6 @@ export const applicationDispatcher = () => {
     onboardingAddCoachMarkRef,
     setCreationFlowStatus,
     setApplicationLevelError,
+    setCurrentMode,
   };
 };
diff --git a/Composer/plugins/azurePublish/yarn.lock b/Composer/plugins/azurePublish/yarn.lock
index 4045eb47c3..f2b9004d08 100644
--- a/Composer/plugins/azurePublish/yarn.lock
+++ b/Composer/plugins/azurePublish/yarn.lock
@@ -162,8 +162,10 @@
     debug "^4.1.1"
     fs-extra "^9.0.1"
     globby "^11.0.0"
+    node-fetch "^2.6.1"
     passport "^0.4.1"
     path-to-regexp "^6.1.0"
+    tar "^6.0.5"
 
 "@bfc/indexers@../../packages/lib/indexers":
   version "0.0.0"
@@ -911,6 +913,11 @@ charenc@~0.0.1:
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=
 
+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+
 clean-stack@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-1.3.0.tgz#9e821501ae979986c46b1d66d2d432db2fd4ae31"
@@ -1417,6 +1424,13 @@ fs-extra@^9.0.1:
     jsonfile "^6.0.1"
     universalify "^1.0.0"
 
+fs-minipass@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
+  dependencies:
+    minipass "^3.0.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1955,6 +1969,26 @@ minimist@1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+minipass@^3.0.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
+  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
+  dependencies:
+    yallist "^4.0.0"
+
+minizlib@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
+  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
+
+mkdirp@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
 moment-timezone@*, moment-timezone@^0.5.28:
   version "0.5.31"
   resolved "https://botbuilder.myget.org/F/botbuilder-v4-js-daily/npm/moment-timezone/-/moment-timezone-0.5.31.tgz#9c40d8c5026f0c7ab46eda3d63e49c155148de05"
@@ -1997,7 +2031,7 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-fetch@^2.6.0, node-fetch@~2.6.0:
+node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@~2.6.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
@@ -2448,6 +2482,18 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+tar@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f"
+  integrity sha512-0b4HOimQHj9nXNEAA7zWwMM91Zhhba3pspja6sQbgTpynOJf+bkjBnfybNYzbpLbnwXnbyB4LOREvlyXLkCHSg==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^3.0.0"
+    minizlib "^2.1.1"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -2630,6 +2676,11 @@ yallist@^3.0.2:
   resolved "https://botbuilder.myget.org/F/botbuilder-v4-js-daily/npm/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha1-27fa+b/YusmrRev2ArjLrQ1dCP0=
 
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
 zip-stream@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-4.0.2.tgz#3a20f1bd7729c2b59fd4efa04df5eb7a5a217d2e"

From 49d7ce0251fff6645deb13a10458a5fe32980e77 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Tue, 13 Oct 2020 13:37:43 -0700
Subject: [PATCH 03/44] make deletion work

---
 .../components/AppComponents/RightPanel.tsx   |  9 +++--
 .../components/ProjectTree/ProjectTree.tsx    |  4 +-
 .../src/components/ProjectTree/treeItem.tsx   |  8 ++--
 .../client/src/pages/design/DesignPage.tsx    | 37 ++++++++++++-------
 .../src/recoilModel/dispatchers/navigation.ts | 21 +++++++----
 .../packages/client/src/utils/navigation.ts   |  7 +++-
 6 files changed, 53 insertions(+), 33 deletions(-)

diff --git a/Composer/packages/client/src/components/AppComponents/RightPanel.tsx b/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
index 8882cbb00f..b87d8bb6a0 100644
--- a/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
+++ b/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
@@ -43,7 +43,7 @@ export const RightPanel = () => {
   const applicationError = useRecoilValue(applicationErrorState);
   const { setApplicationLevelError, fetchProjectById } = useRecoilValue(dispatcherState);
   const projectId = useRecoilValue(currentProjectIdState);
-  const currentMode = useRecoilValue(currentModeState);
+  //const currentMode = useRecoilValue(currentModeState);
 
   const conversation = (
     <Conversation>
@@ -60,14 +60,15 @@ export const RightPanel = () => {
       >
         <RequireAuth>
           <div css={{ display: 'flex', flexDirection: 'row', label: 'MainPage' }}>
+            {/*
             {SHOW_TREE.includes(currentMode) ? (
               <LeftRightSplit initialLeftGridWidth="200px" minLeftPixels={200} minRightPixels={800}>
                 <ProjectTree regionName={formatMessage('Project tree')} showTriggers={currentMode === 'design'} />
                 {conversation}
               </LeftRightSplit>
-            ) : (
-              conversation
-            )}
+            ) : ( */}
+            {conversation}
+            {/* })} */}
           </div>
         </RequireAuth>
       </ErrorBoundary>
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 4b2d1f48b4..bf6d2aea34 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -200,7 +200,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
       displayName: dialog.displayName,
       isRoot: dialog.isRoot,
       projectId: currentProjectId,
-      skillId,
+      skillId: undefined,
       warningContent,
     };
     return (
@@ -245,7 +245,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
       dialogName: dialog.id,
       isRoot: false,
       projectId: currentProjectId,
-      skillId: projectId,
+      skillId: undefined,
     };
 
     return (
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index d6c7bd332e..969d8be0a7 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -148,7 +148,7 @@ interface ITreeItemProps {
   shiftOut?: number; // needed to make an outline look right; should be the size of the "details" reveal arrow
 }
 
-const renderTreeMenuItem = (item: TreeMenuItem) => {
+const renderTreeMenuItem = (link: TreeLink) => (item: TreeMenuItem) => {
   if (item.label === '') {
     return {
       key: 'divider',
@@ -160,7 +160,9 @@ const renderTreeMenuItem = (item: TreeMenuItem) => {
     ariaLabel: item.label,
     text: item.label,
     iconProps: { iconName: item.icon },
-    onItemClick: item.action,
+    onClick: (ev) => {
+      item.action?.(link);
+    },
   };
 };
 
@@ -246,7 +248,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
 }) => {
   const a11yLabel = `${dialogName ?? '$Root'}_${link.displayName}`;
 
-  const overflowMenu = menu.map(renderTreeMenuItem);
+  const overflowMenu = menu.map(renderTreeMenuItem(link));
 
   const linkString = `${link.projectId}_DialogTreeItem${link.dialogName}_${link.trigger ?? ''}`;
 
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 28f639f4c0..ae27428ee9 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -48,6 +48,7 @@ import {
   showCreateDialogModalState,
   showAddSkillDialogModalState,
   localeState,
+  rootBotProjectIdSelector,
 } from '../../recoilModel';
 import ImportQnAFromUrlModal from '../knowledge-base/ImportQnAFromUrlModal';
 import { triggerNotSupported } from '../../utils/dialogValidator';
@@ -121,6 +122,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const locale = useRecoilValue(localeState(projectId));
   const undoFunction = useRecoilValue(undoFunctionState(projectId));
   const undoVersion = useRecoilValue(undoVersionState(projectId));
+  const rootProjectId = useRecoilValue(rootBotProjectIdSelector) ?? projectId;
 
   const { undo, redo, canRedo, canUndo, commitChanges, clearUndo } = undoFunction;
   const visualEditorSelection = useRecoilValue(visualEditorSelectionState);
@@ -187,6 +189,12 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   useEffect(() => {
     if (location && props.dialogId && props.projectId) {
       const { dialogId, projectId } = props;
+
+      // TODO: swap to the commented-out block once we're working on skills for real
+      // let { skillId } = props;
+      // if (skillId == null) skillId = projectId;
+      const skillId = undefined;
+
       const params = new URLSearchParams(location.search);
       const dialogMap = dialogs.reduce((acc, { content, id }) => ({ ...acc, [id]: content }), {});
       const dialogData = getDialogData(dialogMap, dialogId);
@@ -204,7 +212,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
          *   - If 'dialog' not exists at `dialogId` path, fallback to main dialog.
          */
         if (id) {
-          navTo(projectId, id);
+          navTo(rootProjectId, skillId, id);
         }
         return;
       }
@@ -250,15 +258,15 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
 
   function handleSelect(projectId, id, selected = '') {
     if (selected) {
-      selectTo(projectId, selected);
+      selectTo(projectId, undefined, undefined, selected);
     } else {
-      navTo(projectId, id, []);
+      navTo(projectId, undefined, id, []);
     }
   }
 
   const onCreateDialogComplete = (newDialog) => {
     if (newDialog) {
-      navTo(projectId, newDialog, []);
+      navTo(projectId, undefined, newDialog, []);
     }
   };
 
@@ -441,7 +449,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   function handleBreadcrumbItemClick(_event, item) {
     if (item) {
       const { dialogId, selected, focused, index } = item;
-      selectAndFocus(projectId, dialogId, selected, focused, clearBreadcrumb(breadcrumb, index));
+      selectAndFocus(projectId, undefined, dialogId, selected, focused, clearBreadcrumb(breadcrumb, index));
     }
   }
 
@@ -493,8 +501,8 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     commitChanges();
   }
 
-  async function handleDeleteDialog(id) {
-    const refs = getAllRef(id, dialogs);
+  async function handleDeleteDialog(dialogId) {
+    const refs = getAllRef(dialogId, dialogs);
     let setting: any = {
       confirmBtnText: formatMessage('Yes'),
       cancelBtnText: formatMessage('Cancel'),
@@ -511,19 +519,20 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     } else {
       title = DialogDeleting.NO_LINKED_TITLE;
     }
+    console.log('in delete:', title, 'st=', subTitle, 'set=', setting, 'refs=', refs);
     const result = await OpenConfirmModal(title, subTitle, setting);
 
     if (result) {
-      await removeDialog(id, projectId);
+      await removeDialog(dialogId, projectId);
       commitChanges();
     }
   }
 
-  async function handleDeleteTrigger(id, index) {
-    const content = deleteTrigger(dialogs, id, index, (trigger) => triggerApi.deleteTrigger(id, trigger));
+  async function handleDeleteTrigger(dialogId: string, index: number) {
+    const content = deleteTrigger(dialogs, dialogId, index, (trigger) => triggerApi.deleteTrigger(dialogId, trigger));
 
     if (content) {
-      updateDialog({ id, content, projectId });
+      updateDialog({ id: dialogId, content, projectId });
       const match = /\[(\d+)\]/g.exec(selected);
       const current = match && match[1];
       if (!current) return;
@@ -531,14 +540,14 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       if (index === currentIdx) {
         if (currentIdx - 1 >= 0) {
           //if the deleted node is selected and the selected one is not the first one, navTo the previous trigger;
-          selectTo(projectId, createSelectedPath(currentIdx - 1));
+          selectTo(projectId, undefined, dialogId, createSelectedPath(currentIdx - 1));
         } else {
           //if the deleted node is selected and the selected one is the first one, navTo the first trigger;
-          navTo(projectId, id, []);
+          navTo(projectId, undefined, dialogId, []);
         }
       } else if (index < currentIdx) {
         //if the deleted node is at the front, navTo the current one;
-        selectTo(projectId, createSelectedPath(currentIdx - 1));
+        selectTo(projectId, undefined, dialogId, createSelectedPath(currentIdx - 1));
       }
     }
   }
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index a019472004..7dac7f6211 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -50,6 +50,7 @@ export const navigationDispatcher = () => {
   const navTo = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
       projectId: string,
+      skillId: string | undefined,
       dialogId: string,
       breadcrumb: BreadcrumbItem[] = []
     ) => {
@@ -70,7 +71,7 @@ export const navigationDispatcher = () => {
         }
       }
 
-      const currentUri = convertPathToUrl(projectId, dialogId, path);
+      const currentUri = convertPathToUrl(projectId, skillId, dialogId, path);
 
       if (checkUrl(currentUri, projectId, designPageLocation)) return;
 
@@ -79,21 +80,24 @@ export const navigationDispatcher = () => {
   );
 
   const selectTo = useRecoilCallback(
-    ({ snapshot, set }: CallbackInterface) => async (projectId: string, selectPath: string) => {
+    ({ snapshot, set }: CallbackInterface) => async (
+      projectId: string,
+      skillId: string | void,
+      destinationDialogId: string | undefined,
+      selectPath: string
+    ) => {
       if (!selectPath) return;
       set(currentProjectIdState, projectId);
       const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
       const breadcrumb = await snapshot.getPromise(breadcrumbState(projectId));
 
-      // initial dialogId, projectId maybe empty string  ""
-      let { dialogId } = designPageLocation;
-
-      if (!dialogId) dialogId = 'Main';
+      // target dialogId, projectId maybe empty string  ""
+      const dialogId = destinationDialogId ?? designPageLocation.dialogId ?? 'Main';
 
       const dialogs = await snapshot.getPromise(dialogsState(projectId));
       const currentDialog = dialogs.find(({ id }) => id === dialogId);
       const encodedSelectPath = encodeArrayPathToDesignerPath(currentDialog?.content, selectPath);
-      const currentUri = convertPathToUrl(projectId, dialogId, encodedSelectPath);
+      const currentUri = convertPathToUrl(projectId, skillId, dialogId, encodedSelectPath);
 
       if (checkUrl(currentUri, projectId, designPageLocation)) return;
       navigateTo(currentUri, { state: { breadcrumb: updateBreadcrumb(breadcrumb, BreadcrumbUpdateType.Selected) } });
@@ -138,6 +142,7 @@ export const navigationDispatcher = () => {
   const selectAndFocus = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
       projectId: string,
+      skillId: string | undefined,
       dialogId: string,
       selectPath: string,
       focusPath: string,
@@ -157,7 +162,7 @@ export const navigationDispatcher = () => {
         if (checkUrl(currentUri, projectId, designPageLocation)) return;
         navigateTo(currentUri, { state: { breadcrumb } });
       } else {
-        navTo(projectId, dialogId, breadcrumb);
+        navTo(projectId, skillId, dialogId, breadcrumb);
       }
     }
   );
diff --git a/Composer/packages/client/src/utils/navigation.ts b/Composer/packages/client/src/utils/navigation.ts
index e988b801c9..6b087e32c0 100644
--- a/Composer/packages/client/src/utils/navigation.ts
+++ b/Composer/packages/client/src/utils/navigation.ts
@@ -83,11 +83,14 @@ export interface NavigationState {
   qnaKbUrls?: string[];
 }
 
-export function convertPathToUrl(projectId: string, dialogId: string, path?: string): string {
+export function convertPathToUrl(projectId: string, skillId: string | void, dialogId: string, path?: string): string {
   //path is like main.triggers[0].actions[0]
   //uri = id?selected=triggers[0]&focused=triggers[0].actions[0]
 
-  let uri = `/bot/${projectId}/dialogs/${dialogId}`;
+  let uri =
+    skillId == null
+      ? `/bot/${projectId}/dialogs/${dialogId}`
+      : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}`;
   if (!path) return uri;
 
   const items = path.split('#');

From 9fa39e9934156737f1b0006ed8485630ef253a60 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Tue, 13 Oct 2020 16:14:00 -0700
Subject: [PATCH 04/44] add error/warning icons

---
 .../__tests__/components/design.test.tsx      | 11 +---
 .../__tests__/components/projecttree.test.tsx | 19 +-----
 .../components/ProjectTree/ProjectTree.tsx    | 62 ++++++++++++++++---
 .../src/components/ProjectTree/treeItem.tsx   | 10 +--
 .../client/src/pages/design/DesignPage.tsx    |  1 -
 5 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index 3231e33d7a..52fd479202 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -20,20 +20,11 @@ const projectId = '1234a-324234';
 
 describe('<ProjectTree/>', () => {
   it('should render the ProjectTree', async () => {
-    const dialogId = 'todobot';
-    const selected = 'triggers[0]';
     const handleSelect = jest.fn(() => {});
     const handleDeleteDialog = jest.fn(() => {});
     const handleDeleteTrigger = jest.fn(() => {});
     const { findByText } = renderWithRecoil(
-      <ProjectTree
-        dialogId={dialogId}
-        dialogs={dialogs as DialogInfo[]}
-        selected={selected}
-        onDeleteDialog={handleDeleteDialog}
-        onDeleteTrigger={handleDeleteTrigger}
-        onSelect={handleSelect}
-      />
+      <ProjectTree onDeleteDialog={handleDeleteDialog} onDeleteTrigger={handleDeleteTrigger} onSelect={handleSelect} />
     );
     const node = await findByText('addtodo');
     fireEvent.click(node);
diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index 217e1743b5..b6f3a70b1d 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -4,21 +4,13 @@
 import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
 
-import { dialogs } from '../constants.json';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { renderWithRecoil } from '../testUtils';
 
 describe('<ProjectTree/>', () => {
   it('should render the projecttree', async () => {
     const { findByText } = renderWithRecoil(
-      <ProjectTree
-        dialogId="ToDoBot"
-        dialogs={dialogs as any}
-        selected=""
-        onDeleteDialog={() => {}}
-        onDeleteTrigger={() => {}}
-        onSelect={() => {}}
-      />
+      <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={() => {}} />
     );
 
     await findByText('ToDoBot');
@@ -27,14 +19,7 @@ describe('<ProjectTree/>', () => {
   it('should handle project tree item click', async () => {
     const mockFileSelect = jest.fn(() => null);
     const { findByText } = renderWithRecoil(
-      <ProjectTree
-        dialogId="ToDoBot"
-        dialogs={dialogs as any}
-        selected=""
-        onDeleteDialog={() => {}}
-        onDeleteTrigger={() => {}}
-        onSelect={mockFileSelect}
-      />
+      <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={mockFileSelect} />
     );
 
     const node = await findByText('addtodo');
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index bf6d2aea34..e925cfa396 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -8,12 +8,17 @@ import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import cloneDeep from 'lodash/cloneDeep';
 import formatMessage from 'format-message';
-import { DialogInfo, ITrigger } from '@bfc/shared';
+import { DialogInfo, ITrigger, Diagnostic, DiagnosticSeverity } from '@bfc/shared';
 import debounce from 'lodash/debounce';
 import { useRecoilValue } from 'recoil';
 import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
 
-import { dispatcherState, currentProjectIdState, botProjectSpaceSelector } from '../../recoilModel';
+import {
+  dispatcherState,
+  currentProjectIdState,
+  botProjectSpaceSelector,
+  validateDialogSelectorFamily,
+} from '../../recoilModel';
 import { getFriendlyName } from '../../utils/dialogUtil';
 import { containUnsupportedTriggers, triggerNotSupported } from '../../utils/dialogValidator';
 
@@ -118,7 +123,6 @@ type IProjectTreeProps = {
   onSelect?: (link: TreeLink) => void;
   showTriggers?: boolean;
   showDialogs?: boolean;
-  regionName: string;
   navLinks?: TreeLink[];
   onDeleteTrigger: (id: string, index: number) => void;
   onDeleteDialog: (id: string) => void;
@@ -142,13 +146,33 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
   }));
   const currentProjectId = useRecoilValue(currentProjectIdState);
 
+  const notificationMap: { [projectId: string]: { [dialogId: string]: Diagnostic[] } } = {};
+  for (const bot of projectCollection) {
+    notificationMap[bot.projectId] = {};
+    // this seems to be the only way to get these notifications
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const dialogMessages = useRecoilValue(validateDialogSelectorFamily(bot.projectId));
+    for (const message of dialogMessages) {
+      const dialogId = message.id;
+      notificationMap[bot.projectId][dialogId] = message.diagnostics;
+    }
+  }
+
+  const dialogHasWarnings = (dialog: DialogInfo) => {
+    dialog.triggers.some((tr) => triggerNotSupported(dialog, tr));
+  };
+
   const botHasWarnings = (bot: BotInProject) => {
-    return bot.dialogs.some((dialog) => dialog.triggers.some((tr) => triggerNotSupported(dialog, tr)));
+    return bot.dialogs.some(dialogHasWarnings);
+  };
+
+  const dialogHasErrors = (dialog: DialogInfo) => {
+    console.log(notificationMap[currentProjectId][dialog.id]);
+    notificationMap[currentProjectId][dialog.id].some((diag) => diag.message != null);
   };
 
   const botHasErrors = (bot: BotInProject) => {
-    // TODO: this is just a stub for now
-    return false;
+    return bot.dialogs.some(dialogHasErrors);
   };
 
   const handleOnSelect = (link: TreeLink) => {
@@ -194,13 +218,23 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
     );
   };
 
-  const renderDialogHeader = (skillId: string, dialog: DialogInfo, warningContent: string) => {
+  const renderDialogHeader = (skillId: string, dialog: DialogInfo) => {
+    const warningContent = notificationMap[currentProjectId][dialog.id]
+      .filter((diag) => diag.severity === DiagnosticSeverity.Warning)
+      .map((diag) => diag.message)
+      .join(',');
+    const errorContent = notificationMap[currentProjectId][dialog.id]
+      .filter((diag) => diag.severity === DiagnosticSeverity.Error)
+      .map((diag) => diag.message)
+      .join(',');
+
     const link: TreeLink = {
       dialogName: dialog.id,
       displayName: dialog.displayName,
       isRoot: dialog.isRoot,
       projectId: currentProjectId,
       skillId: undefined,
+      errorContent,
       warningContent,
     };
     return (
@@ -294,18 +328,26 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
 
     if (showTriggers) {
       return filteredDialogs.map((dialog: DialogInfo) => {
+        const errorContent = '';
         const triggerList = dialog.triggers
           .filter((tr) => filterMatch(dialog.displayName) || filterMatch(getTriggerName(tr)))
           .map((tr, index) => {
             const warningContent = triggerNotSupported(dialog, tr);
-            return renderTrigger(projectId, { ...tr, index, displayName: getTriggerName(tr), warningContent }, dialog);
+            const errorContent = notificationMap[projectId][dialog.id].some(
+              (diag) => diag.severity === DiagnosticSeverity.Error && diag.path?.match(RegExp(`triggers\\[${index}\\]`))
+            );
+            return renderTrigger(
+              projectId,
+              { ...tr, index, displayName: getTriggerName(tr), warningContent, errorContent },
+              dialog
+            );
           });
         return (
           <ExpandableNode
             key={dialog.id}
             depth={startDepth}
             detailsRef={dialog.isRoot ? addMainDialogRef : undefined}
-            summary={renderDialogHeader(projectId, dialog, containUnsupportedTriggers(dialog))}
+            summary={renderDialogHeader(projectId, dialog, containUnsupportedTriggers(dialog), errorContent)}
           >
             <div>{triggerList}</div>
           </ExpandableNode>
@@ -313,7 +355,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
       });
     } else {
       return filteredDialogs.map((dialog: DialogInfo) =>
-        renderDialogHeader(projectId, dialog, containUnsupportedTriggers(dialog))
+        renderDialogHeader(projectId, dialog, containUnsupportedTriggers(dialog), '')
       );
     }
   }
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index 969d8be0a7..727b978c6a 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -167,14 +167,10 @@ const renderTreeMenuItem = (link: TreeLink) => (item: TreeMenuItem) => {
 };
 
 const onRenderItem = (item: IOverflowSetItemProps) => {
-  const warningContent = formatMessage(
-    'This trigger type is not supported by the RegEx recognizer and will not be fired.'
-  );
-  const errorContent = 'stub for error content'; // TODO: get actual warning and error messages from link
   return (
     <div
       data-is-focusable
-      aria-label={warningContent}
+      aria-label={`${item.displayName} ${item.warningContent} ${item.errorContent}`}
       css={itemText}
       role="cell"
       tabIndex={0}
@@ -197,12 +193,12 @@ const onRenderItem = (item: IOverflowSetItemProps) => {
         )}
         {item.displayName}
         {item.errorContent && (
-          <TooltipHost content={errorContent} directionalHint={DirectionalHint.bottomLeftEdge}>
+          <TooltipHost content={item.errorContent} directionalHint={DirectionalHint.bottomLeftEdge}>
             <Icon iconName={'Warning'} style={warningIcon} />
           </TooltipHost>
         )}
         {item.warningContent && (
-          <TooltipHost content={warningContent} directionalHint={DirectionalHint.bottomLeftEdge}>
+          <TooltipHost content={item.warningContent} directionalHint={DirectionalHint.bottomLeftEdge}>
             <Icon iconName={'ErrorBadge'} style={errorIcon} />
           </TooltipHost>
         )}
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index ae27428ee9..2d8c370fb1 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -603,7 +603,6 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       <div css={pageRoot}>
         <LeftRightSplit initialLeftGridWidth="20%" minLeftPixels={200} minRightPixels={800}>
           <ProjectTree
-            regionName={formatMessage('project tree')}
             onDeleteDialog={handleDeleteDialog}
             onDeleteTrigger={handleDeleteTrigger}
             onSelect={(...props) => handleSelect(projectId, ...props)}

From 28fcadf4e63748343a3d97515c912664eac10449 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Wed, 14 Oct 2020 09:23:18 -0700
Subject: [PATCH 05/44] read notification map for state

---
 .../src/components/AppComponents/RightPanel.tsx     |  2 +-
 .../src/components/ProjectTree/ProjectTree.tsx      | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/Composer/packages/client/src/components/AppComponents/RightPanel.tsx b/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
index b87d8bb6a0..8976133138 100644
--- a/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
+++ b/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
@@ -37,7 +37,7 @@ const content = css`
 
 const Content = forwardRef<HTMLDivElement>((props, ref) => <div css={content} {...props} ref={ref} />);
 
-const SHOW_TREE = ['design'];
+// const SHOW_TREE = ['design'];
 
 export const RightPanel = () => {
   const applicationError = useRecoilValue(applicationErrorState);
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index e925cfa396..8c6c434e59 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -20,7 +20,7 @@ import {
   validateDialogSelectorFamily,
 } from '../../recoilModel';
 import { getFriendlyName } from '../../utils/dialogUtil';
-import { containUnsupportedTriggers, triggerNotSupported } from '../../utils/dialogValidator';
+import { triggerNotSupported } from '../../utils/dialogValidator';
 
 import { TreeItem } from './treeItem';
 import { ExpandableNode } from './ExpandableNode';
@@ -159,7 +159,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
   }
 
   const dialogHasWarnings = (dialog: DialogInfo) => {
-    dialog.triggers.some((tr) => triggerNotSupported(dialog, tr));
+    notificationMap[currentProjectId][dialog.id].some((diag) => diag.severity === DiagnosticSeverity.Warning);
   };
 
   const botHasWarnings = (bot: BotInProject) => {
@@ -167,8 +167,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
   };
 
   const dialogHasErrors = (dialog: DialogInfo) => {
-    console.log(notificationMap[currentProjectId][dialog.id]);
-    notificationMap[currentProjectId][dialog.id].some((diag) => diag.message != null);
+    notificationMap[currentProjectId][dialog.id].some((diag) => diag.severity === DiagnosticSeverity.Error);
   };
 
   const botHasErrors = (bot: BotInProject) => {
@@ -347,16 +346,14 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
             key={dialog.id}
             depth={startDepth}
             detailsRef={dialog.isRoot ? addMainDialogRef : undefined}
-            summary={renderDialogHeader(projectId, dialog, containUnsupportedTriggers(dialog), errorContent)}
+            summary={renderDialogHeader(projectId, dialog)}
           >
             <div>{triggerList}</div>
           </ExpandableNode>
         );
       });
     } else {
-      return filteredDialogs.map((dialog: DialogInfo) =>
-        renderDialogHeader(projectId, dialog, containUnsupportedTriggers(dialog), '')
-      );
+      return filteredDialogs.map((dialog: DialogInfo) => renderDialogHeader(projectId, dialog));
     }
   }
 

From 34d6415fab3201f444d26253ef7633532cef5d5b Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Wed, 14 Oct 2020 14:27:25 -0700
Subject: [PATCH 06/44] fix type-checking and start on unit tests

---
 .../components/CreationFlow/index.test.tsx    |  2 +-
 .../__tests__/components/design.test.tsx      |  2 --
 .../client/__tests__/utils/navigation.test.ts | 22 ++++++++++++++-----
 .../components/AppComponents/RightPanel.tsx   | 13 +++++++----
 .../components/ProjectTree/ProjectTree.tsx    |  7 +++---
 .../src/components/ProjectTree/treeItem.tsx   |  5 +++--
 .../client/src/pages/design/DesignPage.tsx    | 17 +++++++-------
 .../src/pages/notifications/Notifications.tsx |  2 +-
 .../dispatchers/__tests__/navigation.test.tsx | 16 +++++++-------
 .../src/recoilModel/dispatchers/navigation.ts |  8 +++----
 .../packages/client/src/shell/triggerApi.ts   |  2 +-
 .../packages/client/src/shell/useShell.ts     |  4 ++--
 .../packages/client/src/utils/navigation.ts   |  2 +-
 13 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx b/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx
index 826b96694c..a35762ccdc 100644
--- a/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx
+++ b/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx
@@ -73,7 +73,7 @@ describe('<CreationFlow/>', () => {
     expect(createProjectMock).toHaveBeenCalledWith({
       appLocale: 'en-US',
       description: '',
-      location: '/test-folder/Desktop',
+      location: expect.stringMatching(/(\/|\\)test-folder(\/|\\)Desktop/),
       name: 'EchoBot-1',
       qnaKbUrls: undefined,
       schemaUrl: '',
diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index 52fd479202..a78b3f95ee 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -3,10 +3,8 @@
 
 import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
-import { DialogInfo } from '@bfc/shared';
 
 import { renderWithRecoil } from '../testUtils';
-import { dialogs } from '../constants.json';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
 import { CreateDialogModal } from '../../src/pages/design/createDialogModal';
diff --git a/Composer/packages/client/__tests__/utils/navigation.test.ts b/Composer/packages/client/__tests__/utils/navigation.test.ts
index a13499e194..c28892c8aa 100644
--- a/Composer/packages/client/__tests__/utils/navigation.test.ts
+++ b/Composer/packages/client/__tests__/utils/navigation.test.ts
@@ -14,6 +14,7 @@ import {
 } from './../../src/utils/navigation';
 
 const projectId = '123a-sdf123';
+const skillId = '98765.4321';
 
 describe('getFocusPath', () => {
   it('return focus path', () => {
@@ -94,13 +95,22 @@ describe('composer url util', () => {
   });
 
   it('convert path to url', () => {
-    const result1 = convertPathToUrl(projectId, 'main');
-    expect(result1).toEqual(`/bot/${projectId}/dialogs/main`);
-    const result2 = convertPathToUrl(projectId, 'main', 'main.triggers[0].actions[0]');
-    expect(result2).toEqual(`/bot/${projectId}/dialogs/main?selected=triggers[0]&focused=triggers[0].actions[0]`);
-    const result3 = convertPathToUrl(projectId, 'main', 'main.triggers[0].actions[0]#Microsoft.TextInput#prompt');
+    const result1 = convertPathToUrl(projectId, skillId, 'main');
+    expect(result1).toEqual(`/bot/${projectId}/skill/${skillId}/dialogs/main`);
+    const result2 = convertPathToUrl(projectId, skillId, 'main', 'main.triggers[0].actions[0]');
+    expect(result2).toEqual(
+      `/bot/${projectId}/skill/${skillId}/dialogs/main?selected=triggers[0]&focused=triggers[0].actions[0]`
+    );
+    const result3 = convertPathToUrl(
+      projectId,
+      skillId,
+      'main',
+      'main.triggers[0].actions[0]#Microsoft.TextInput#prompt'
+    );
     expect(result3).toEqual(
-      `/bot/${projectId}/dialogs/main?selected=triggers[0]&focused=triggers[0].actions[0]#botAsks`
+      `/bot/${projectId}/skill/${skillId}/dialogs/main?selected=triggers[0]&focused=triggers[0].actions[0]#botAsks`
     );
+    const result4 = convertPathToUrl(projectId, null, 'main');
+    expect(result4).toEqual(`/bot/${projectId}/dialogs/main`);
   });
 });
diff --git a/Composer/packages/client/src/components/AppComponents/RightPanel.tsx b/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
index 8976133138..bcf2bf3064 100644
--- a/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
+++ b/Composer/packages/client/src/components/AppComponents/RightPanel.tsx
@@ -5,16 +5,21 @@
 import { jsx, css } from '@emotion/core';
 import { useRecoilValue } from 'recoil';
 import { forwardRef } from 'react';
-import formatMessage from 'format-message';
+// import formatMessage from 'format-message';
 
 import { RequireAuth } from '../RequireAuth';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { Conversation } from '../Conversation';
-import { ProjectTree } from '../ProjectTree/ProjectTree';
-import { LeftRightSplit } from '../Split/LeftRightSplit';
+//import { ProjectTree } from '../ProjectTree/ProjectTree';
+//import { LeftRightSplit } from '../Split/LeftRightSplit';
 
 import Routes from './../../router';
-import { applicationErrorState, dispatcherState, currentProjectIdState, currentModeState } from './../../recoilModel';
+import {
+  applicationErrorState,
+  dispatcherState,
+  currentProjectIdState,
+  // currentModeState,
+} from './../../recoilModel';
 
 // -------------------- Styles -------------------- //
 
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 8c6c434e59..6617f678f9 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -73,7 +73,7 @@ export type TreeLink = {
   warningContent?: string;
   errorContent?: string;
   projectId: string;
-  skillId?: string;
+  skillId: string | null;
   dialogName?: string;
   trigger?: number;
 };
@@ -232,7 +232,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
       displayName: dialog.displayName,
       isRoot: dialog.isRoot,
       projectId: currentProjectId,
-      skillId: undefined,
+      skillId: null,
       errorContent,
       warningContent,
     };
@@ -278,7 +278,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
       dialogName: dialog.id,
       isRoot: false,
       projectId: currentProjectId,
-      skillId: undefined,
+      skillId: null,
     };
 
     return (
@@ -327,7 +327,6 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
 
     if (showTriggers) {
       return filteredDialogs.map((dialog: DialogInfo) => {
-        const errorContent = '';
         const triggerList = dialog.triggers
           .filter((tr) => filterMatch(dialog.displayName) || filterMatch(getTriggerName(tr)))
           .map((tr, index) => {
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index 727b978c6a..4fdd1e16b5 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -47,7 +47,7 @@ const content = css`
 
 const moreMenu: Partial<ICalloutContentStyles> = {
   root: {
-    marginTop: '-7px',
+    marginTop: '-1px',
   },
 };
 
@@ -113,13 +113,14 @@ export const overflowSet = css`
   height: 100%;
   padding-right: 12px;
   box-sizing: border-box;
-  line-height: 20px;
+  line-height: 24px;
   justify-content: space-between;
   display: flex;
 `;
 
 const statusIcon = {
   width: '24px',
+  height: '18px',
   fontSize: 16,
   marginLeft: 6,
 };
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index e0c0f97b3c..6a3286c531 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -194,7 +194,6 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       // TODO: swap to the commented-out block once we're working on skills for real
       // let { skillId } = props;
       // if (skillId == null) skillId = projectId;
-      const skillId = undefined;
 
       const params = new URLSearchParams(location.search);
       const dialogMap = dialogs.reduce((acc, { content, id }) => ({ ...acc, [id]: content }), {});
@@ -213,7 +212,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
          *   - If 'dialog' not exists at `dialogId` path, fallback to main dialog.
          */
         if (id) {
-          navTo(rootProjectId, skillId, id);
+          navTo(rootProjectId, null, id);
         }
         return;
       }
@@ -260,15 +259,15 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   function handleSelect(projectId, id, selected = '') {
     updateZoomRate({ currentRate: 1 });
     if (selected) {
-      selectTo(projectId, undefined, undefined, selected);
+      selectTo(projectId, null, null, selected);
     } else {
-      navTo(projectId, undefined, id, []);
+      navTo(projectId, null, id, []);
     }
   }
 
   const onCreateDialogComplete = (newDialog) => {
     if (newDialog) {
-      navTo(projectId, undefined, newDialog, []);
+      navTo(projectId, null, newDialog, []);
     }
   };
 
@@ -451,7 +450,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   function handleBreadcrumbItemClick(_event, item) {
     if (item) {
       const { dialogId, selected, focused, index } = item;
-      selectAndFocus(projectId, undefined, dialogId, selected, focused, clearBreadcrumb(breadcrumb, index));
+      selectAndFocus(projectId, null, dialogId, selected, focused, clearBreadcrumb(breadcrumb, index));
     }
   }
 
@@ -542,14 +541,14 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       if (index === currentIdx) {
         if (currentIdx - 1 >= 0) {
           //if the deleted node is selected and the selected one is not the first one, navTo the previous trigger;
-          selectTo(projectId, undefined, dialogId, createSelectedPath(currentIdx - 1));
+          selectTo(projectId, null, dialogId, createSelectedPath(currentIdx - 1));
         } else {
           //if the deleted node is selected and the selected one is the first one, navTo the first trigger;
-          navTo(projectId, undefined, dialogId, []);
+          navTo(projectId, null, dialogId, []);
         }
       } else if (index < currentIdx) {
         //if the deleted node is at the front, navTo the current one;
-        selectTo(projectId, undefined, dialogId, createSelectedPath(currentIdx - 1));
+        selectTo(projectId, null, dialogId, createSelectedPath(currentIdx - 1));
       }
     }
   }
diff --git a/Composer/packages/client/src/pages/notifications/Notifications.tsx b/Composer/packages/client/src/pages/notifications/Notifications.tsx
index d449358bb5..89d0377eed 100644
--- a/Composer/packages/client/src/pages/notifications/Notifications.tsx
+++ b/Composer/packages/client/src/pages/notifications/Notifications.tsx
@@ -47,7 +47,7 @@ const Notifications: React.FC<RouteComponentProps<{ projectId: string }>> = (pro
       //path is like main.trigers[0].actions[0]
       //uri = id?selected=triggers[0]&focused=triggers[0].actions[0]
       const { projectId, id, dialogPath } = item;
-      const uri = convertPathToUrl(projectId, id, dialogPath);
+      const uri = convertPathToUrl(projectId, id, dialogPath ?? '');
       navigateTo(uri);
     },
     [NotificationType.SKILL]: (item: INotification) => {
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
index 44385b6fc4..5a29b42318 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
@@ -175,7 +175,7 @@ describe('navigation dispatcher', () => {
     it('navigates to a destination', async () => {
       mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/dialogId`);
       await act(async () => {
-        await dispatcher.navTo(projectId, 'dialogId', []);
+        await dispatcher.navTo(projectId, null, 'dialogId', []);
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId`);
       expect(mockConvertPathToUrl).toBeCalledWith(projectId, 'dialogId', undefined);
@@ -185,7 +185,7 @@ describe('navigation dispatcher', () => {
       mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/newDialogId?selection=triggers[0]`);
       mockCreateSelectedPath.mockReturnValue('triggers[0]');
       await act(async () => {
-        await dispatcher.navTo(projectId, 'newDialogId', []);
+        await dispatcher.navTo(projectId, null, 'newDialogId', []);
       });
       expectNavTo(`/bot/${projectId}/dialogs/newDialogId?selection=triggers[0]`);
       expect(mockConvertPathToUrl).toBeCalledWith(projectId, 'newDialogId', 'triggers[0]');
@@ -195,7 +195,7 @@ describe('navigation dispatcher', () => {
     it("doesn't navigate to a destination where we already are", async () => {
       mockCheckUrl.mockReturnValue(true);
       await act(async () => {
-        await dispatcher.navTo(projectId, 'dialogId', []);
+        await dispatcher.navTo(projectId, null, 'dialogId', []);
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
@@ -204,7 +204,7 @@ describe('navigation dispatcher', () => {
   describe('selectTo', () => {
     it("doesn't go anywhere without a selection", async () => {
       await act(async () => {
-        await dispatcher.selectTo(projectId, '');
+        await dispatcher.selectTo(projectId, null, null, '');
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
@@ -212,7 +212,7 @@ describe('navigation dispatcher', () => {
     it('navigates to a default URL with selected path', async () => {
       mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/dialogId?selected=selection`);
       await act(async () => {
-        await dispatcher.selectTo(projectId, 'selection');
+        await dispatcher.selectTo(projectId, null, null, 'selection');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=selection`);
       expect(mockConvertPathToUrl).toBeCalledWith(projectId, 'dialogId', 'selection');
@@ -221,7 +221,7 @@ describe('navigation dispatcher', () => {
     it("doesn't go anywhere if we're already there", async () => {
       mockCheckUrl.mockReturnValue(true);
       await act(async () => {
-        await dispatcher.selectTo(projectId, 'selection');
+        await dispatcher.selectTo(projectId, null, null, 'selection');
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
@@ -271,7 +271,7 @@ describe('navigation dispatcher', () => {
     it('sets selection and focus with a valud search', async () => {
       mockGetUrlSearch.mockReturnValue('?foo=bar&baz=quux');
       await act(async () => {
-        await dispatcher.selectAndFocus(projectId, 'dialogId', 'select', 'focus');
+        await dispatcher.selectAndFocus(projectId, null, 'dialogId', 'select', 'focus');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?foo=bar&baz=quux`);
     });
@@ -279,7 +279,7 @@ describe('navigation dispatcher', () => {
     it("doesn't go anywhere if we're already there", async () => {
       mockCheckUrl.mockReturnValue(true);
       await act(async () => {
-        await dispatcher.selectAndFocus(projectId, 'dialogId', 'select', 'focus');
+        await dispatcher.selectAndFocus(projectId, null, 'dialogId', 'select', 'focus');
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index 7dac7f6211..95ee4d4598 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -50,7 +50,7 @@ export const navigationDispatcher = () => {
   const navTo = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
       projectId: string,
-      skillId: string | undefined,
+      skillId: string | null,
       dialogId: string,
       breadcrumb: BreadcrumbItem[] = []
     ) => {
@@ -82,8 +82,8 @@ export const navigationDispatcher = () => {
   const selectTo = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
       projectId: string,
-      skillId: string | void,
-      destinationDialogId: string | undefined,
+      skillId: string | null,
+      destinationDialogId: string | null,
       selectPath: string
     ) => {
       if (!selectPath) return;
@@ -142,7 +142,7 @@ export const navigationDispatcher = () => {
   const selectAndFocus = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
       projectId: string,
-      skillId: string | undefined,
+      skillId: string | null,
       dialogId: string,
       selectPath: string,
       focusPath: string,
diff --git a/Composer/packages/client/src/shell/triggerApi.ts b/Composer/packages/client/src/shell/triggerApi.ts
index 79cc9e64f2..6be1ef90c6 100644
--- a/Composer/packages/client/src/shell/triggerApi.ts
+++ b/Composer/packages/client/src/shell/triggerApi.ts
@@ -93,7 +93,7 @@ function createTriggerApi(
     if (url) {
       navigateTo(url);
     } else {
-      selectTo(projectId, `triggers[${index}]`);
+      selectTo(projectId, null, null, `triggers[${index}]`);
     }
   };
   return {
diff --git a/Composer/packages/client/src/shell/useShell.ts b/Composer/packages/client/src/shell/useShell.ts
index e536a10baa..b670a8313d 100644
--- a/Composer/packages/client/src/shell/useShell.ts
+++ b/Composer/packages/client/src/shell/useShell.ts
@@ -114,11 +114,11 @@ export function useShell(source: EventSource, projectId: string): Shell {
   }
 
   function navigationTo(path) {
-    navTo(projectId, path, breadcrumb);
+    navTo(projectId, null, path, breadcrumb);
   }
 
   function focusEvent(subPath) {
-    selectTo(projectId, subPath);
+    selectTo(projectId, null, null, subPath);
   }
 
   function focusSteps(subPaths: string[] = [], fragment?: string) {
diff --git a/Composer/packages/client/src/utils/navigation.ts b/Composer/packages/client/src/utils/navigation.ts
index 6b087e32c0..773e5b0c6b 100644
--- a/Composer/packages/client/src/utils/navigation.ts
+++ b/Composer/packages/client/src/utils/navigation.ts
@@ -83,7 +83,7 @@ export interface NavigationState {
   qnaKbUrls?: string[];
 }
 
-export function convertPathToUrl(projectId: string, skillId: string | void, dialogId: string, path?: string): string {
+export function convertPathToUrl(projectId: string, skillId: string | null, dialogId: string, path?: string): string {
   //path is like main.triggers[0].actions[0]
   //uri = id?selected=triggers[0]&focused=triggers[0].actions[0]
 

From 9cee86c65d4ab8bbfef6fef9ead625ce21cce5ef Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Wed, 14 Oct 2020 16:30:30 -0700
Subject: [PATCH 07/44] add sampleDialog and fix more tests

---
 .../__tests__/components/design.test.tsx      | 18 +++-
 .../__tests__/components/projecttree.test.tsx | 27 ++++--
 .../client/__tests__/testUtils/index.ts       |  1 +
 .../__tests__/testUtils/sampleDialog.ts       | 93 +++++++++++++++++++
 .../components/ProjectTree/ProjectTree.tsx    | 11 ++-
 .../src/components/ProjectTree/treeItem.tsx   |  4 +-
 .../dispatchers/__tests__/navigation.test.tsx |  6 +-
 7 files changed, 144 insertions(+), 16 deletions(-)
 create mode 100644 Composer/packages/client/__tests__/testUtils/sampleDialog.ts

diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index a78b3f95ee..51bae7c2fe 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -4,17 +4,26 @@
 import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
 
-import { renderWithRecoil } from '../testUtils';
+import { renderWithRecoil, SAMPLE_DIALOG } from '../testUtils';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
 import { CreateDialogModal } from '../../src/pages/design/createDialogModal';
+import { dialogsState, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
 
 jest.mock('@bfc/code-editor', () => {
   return {
     LuEditor: () => <div></div>,
   };
 });
-const projectId = '1234a-324234';
+const projectId = '12345.6789';
+const dialogs = [SAMPLE_DIALOG];
+
+const initRecoilState = ({ set }) => {
+  set(currentProjectIdState, projectId);
+  set(botProjectIdsState, [projectId]);
+  set(dialogsState(projectId), dialogs);
+  set(schemasState(projectId), { sdk: { content: {} } });
+};
 
 describe('<ProjectTree/>', () => {
   it('should render the ProjectTree', async () => {
@@ -22,9 +31,10 @@ describe('<ProjectTree/>', () => {
     const handleDeleteDialog = jest.fn(() => {});
     const handleDeleteTrigger = jest.fn(() => {});
     const { findByText } = renderWithRecoil(
-      <ProjectTree onDeleteDialog={handleDeleteDialog} onDeleteTrigger={handleDeleteTrigger} onSelect={handleSelect} />
+      <ProjectTree onDeleteDialog={handleDeleteDialog} onDeleteTrigger={handleDeleteTrigger} onSelect={handleSelect} />,
+      initRecoilState
     );
-    const node = await findByText('addtodo');
+    const node = await findByText('Greeting');
     fireEvent.click(node);
     expect(handleSelect).toHaveBeenCalledTimes(1);
   });
diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index b6f3a70b1d..17bec8d937 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -5,24 +5,39 @@ import * as React from 'react';
 import { fireEvent } from '@bfc/test-utils';
 
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
-import { renderWithRecoil } from '../testUtils';
+import { renderWithRecoil, SAMPLE_DIALOG } from '../testUtils';
+import { dialogsState, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
+
+const projectId = '12345.6789';
+const dialogs = [SAMPLE_DIALOG];
+
+const initRecoilState = ({ set }) => {
+  set(currentProjectIdState, projectId);
+  set(botProjectIdsState, [projectId]);
+  set(dialogsState(projectId), dialogs);
+  set(schemasState(projectId), { sdk: { content: {} } });
+};
 
 describe('<ProjectTree/>', () => {
   it('should render the projecttree', async () => {
     const { findByText } = renderWithRecoil(
-      <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={() => {}} />
+      <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={() => {}} />,
+      initRecoilState
     );
 
-    await findByText('ToDoBot');
+    await findByText('EchoBot-1');
   });
 
   it('should handle project tree item click', async () => {
     const mockFileSelect = jest.fn(() => null);
-    const { findByText } = renderWithRecoil(
-      <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={mockFileSelect} />
+    const { findByText, debug } = renderWithRecoil(
+      <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={mockFileSelect} />,
+      initRecoilState
     );
 
-    const node = await findByText('addtodo');
+    debug();
+
+    const node = await findByText('Unknown intent');
     fireEvent.click(node);
     expect(mockFileSelect).toHaveBeenCalledTimes(1);
   });
diff --git a/Composer/packages/client/__tests__/testUtils/index.ts b/Composer/packages/client/__tests__/testUtils/index.ts
index 43ef53f1e9..4d6f51e3f5 100644
--- a/Composer/packages/client/__tests__/testUtils/index.ts
+++ b/Composer/packages/client/__tests__/testUtils/index.ts
@@ -4,3 +4,4 @@
 export * from './renderWithRecoilAndContext';
 export * from './renderWithRecoil';
 export * from './react-recoil-hooks-testing-library';
+export * from './sampleDialog';
diff --git a/Composer/packages/client/__tests__/testUtils/sampleDialog.ts b/Composer/packages/client/__tests__/testUtils/sampleDialog.ts
new file mode 100644
index 0000000000..a63b624a70
--- /dev/null
+++ b/Composer/packages/client/__tests__/testUtils/sampleDialog.ts
@@ -0,0 +1,93 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// This is a copy of the JSON that defines the EchoBot sample plus some
+// additional dialogs and triggers, including a trigger with a syntax
+// error for use with testing error messages.
+
+export const SAMPLE_DIALOG = {
+  isRoot: true,
+  displayName: 'EchoBot-1',
+  id: 'echobot-1',
+  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.OnConversationUpdateActivity',
+        $designer: { id: '376720' },
+        actions: [
+          {
+            $kind: 'Microsoft.Foreach',
+            $designer: { id: '518944', name: 'Loop: for each item' },
+            itemsProperty: 'turn.Activity.membersAdded',
+            actions: [
+              {
+                $kind: 'Microsoft.IfCondition',
+                $designer: { id: '641773', name: 'Branch: if/else' },
+                condition: 'string(dialog.foreach.value.id) != string(turn.Activity.Recipient.id)',
+                actions: [
+                  {
+                    $kind: 'Microsoft.SendActivity',
+                    $designer: { id: '859266', name: 'Send a response' },
+                    activity: '${SendActivity_Welcome()}',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      { $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-1.lg',
+    $schema:
+      'https://raw.githubusercontent.com/microsoft/BotFramework-Composer/stable/Composer/packages/server/schemas/sdk.schema',
+    id: 'EchoBot-1',
+    recognizer: 'echobot-1.lu.qna',
+  },
+  diagnostics: [
+    {
+      message:
+        "must be an expression: syntax error at line 1:1 mismatched input '<EOF>' expecting {STRING_INTERPOLATION_START, '+', '-', '!', '(', '[', ']', '{', NUMBER, IDENTIFIER, STRING}",
+      source: 'echobot-1',
+      severity: 0,
+      path: 'echobot-1.triggers[3].actions[0]#Microsoft.SetProperty#value',
+    },
+  ],
+  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: [],
+};
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 6617f678f9..764f105626 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -121,6 +121,7 @@ type BotInProject = {
 
 type IProjectTreeProps = {
   onSelect?: (link: TreeLink) => void;
+  showAll?: () => void;
   showTriggers?: boolean;
   showDialogs?: boolean;
   navLinks?: TreeLink[];
@@ -129,6 +130,7 @@ type IProjectTreeProps = {
 };
 
 export const ProjectTree: React.FC<IProjectTreeProps> = ({
+  showAll = undefined,
   showTriggers = true,
   showDialogs = true,
   onDeleteDialog,
@@ -407,7 +409,14 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
           )}
           aria-live={'polite'}
         />
-        <div css={tree}>{projectTree}</div>
+        <div css={tree}>
+          {showAll != null ? (
+            <TreeItem
+              link={{ displayName: formatMessage('All'), skillId: null, projectId: currentProjectId, isRoot: true }}
+            />
+          ) : null}
+          {projectTree}
+        </div>
       </FocusZone>
     </div>
   );
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index 4fdd1e16b5..5030a130e9 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -141,7 +141,7 @@ interface ITreeItemProps {
   link: TreeLink;
   isActive?: boolean;
   isSubItemActive?: boolean;
-  menu: TreeMenuItem[];
+  menu?: TreeMenuItem[];
   onSelect?: (link: TreeLink) => void;
   icon?: string;
   dialogName?: string;
@@ -241,7 +241,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
   dialogName,
   shiftOut,
   onSelect,
-  menu,
+  menu = [],
 }) => {
   const a11yLabel = `${dialogName ?? '$Root'}_${link.displayName}`;
 
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
index 5a29b42318..8483dbbb59 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
@@ -178,7 +178,7 @@ describe('navigation dispatcher', () => {
         await dispatcher.navTo(projectId, null, 'dialogId', []);
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId`);
-      expect(mockConvertPathToUrl).toBeCalledWith(projectId, 'dialogId', undefined);
+      expect(mockConvertPathToUrl).toBeCalledWith(projectId, null, 'dialogId', undefined);
     });
 
     it('redirects to the begin dialog trigger', async () => {
@@ -188,7 +188,7 @@ describe('navigation dispatcher', () => {
         await dispatcher.navTo(projectId, null, 'newDialogId', []);
       });
       expectNavTo(`/bot/${projectId}/dialogs/newDialogId?selection=triggers[0]`);
-      expect(mockConvertPathToUrl).toBeCalledWith(projectId, 'newDialogId', 'triggers[0]');
+      expect(mockConvertPathToUrl).toBeCalledWith(projectId, null, 'newDialogId', 'triggers[0]');
       expect(mockCreateSelectedPath).toBeCalledWith(0);
     });
 
@@ -215,7 +215,7 @@ describe('navigation dispatcher', () => {
         await dispatcher.selectTo(projectId, null, null, 'selection');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=selection`);
-      expect(mockConvertPathToUrl).toBeCalledWith(projectId, 'dialogId', 'selection');
+      expect(mockConvertPathToUrl).toBeCalledWith(projectId, null, 'dialogId', 'selection');
     });
 
     it("doesn't go anywhere if we're already there", async () => {

From ea7ced68ea14a016a3e703c0a20f34fad411d297 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 15 Oct 2020 11:57:11 -0700
Subject: [PATCH 08/44] add showAll

---
 .../client/__tests__/components/projecttree.test.tsx        | 6 +++---
 .../client/src/components/ProjectTree/ExpandableNode.tsx    | 2 +-
 .../client/src/components/ProjectTree/ProjectTree.tsx       | 2 ++
 Composer/packages/client/src/pages/design/DesignPage.tsx    | 3 +++
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index 17bec8d937..76cbff5632 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -30,14 +30,14 @@ describe('<ProjectTree/>', () => {
 
   it('should handle project tree item click', async () => {
     const mockFileSelect = jest.fn(() => null);
-    const { findByText, debug } = renderWithRecoil(
+    const component = renderWithRecoil(
       <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={mockFileSelect} />,
       initRecoilState
     );
 
-    debug();
+    console.log(await (await component.findByTestId('dialog')).innerHTML);
 
-    const node = await findByText('Unknown intent');
+    const node = await component.findByText('Unknown intent');
     fireEvent.click(node);
     expect(mockFileSelect).toHaveBeenCalledTimes(1);
   });
diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
index bcb10d3d83..ccae31a022 100644
--- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
@@ -38,7 +38,7 @@ export const ExpandableNode = ({ children, summary, detailsRef, depth = 0 }: Pro
   }
 
   return (
-    <div css={nodeStyle(depth)}>
+    <div css={nodeStyle(depth)} data-testid="dialog">
       <details ref={detailsRef} open={isOpen}>
         {/* 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}>
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 764f105626..a19c9d0298 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -413,6 +413,8 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
           {showAll != null ? (
             <TreeItem
               link={{ displayName: formatMessage('All'), skillId: null, projectId: currentProjectId, isRoot: true }}
+              shiftOut={28}
+              onSelect={showAll}
             />
           ) : null}
           {projectTree}
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 6a3286c531..c8f08b8c81 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -604,6 +604,9 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       <div css={pageRoot}>
         <LeftRightSplit initialLeftGridWidth="20%" minLeftPixels={200} minRightPixels={800}>
           <ProjectTree
+            showAll={() => {
+              console.log('all clicked');
+            }}
             onDeleteDialog={handleDeleteDialog}
             onDeleteTrigger={handleDeleteTrigger}
             onSelect={(...props) => handleSelect(projectId, ...props)}

From 7a4fa20f44358cf21a7a9c551550b9945cb87b11 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 15 Oct 2020 11:58:50 -0700
Subject: [PATCH 09/44] rename to onAllSelected because it's a callback

---
 .../client/src/components/ProjectTree/ProjectTree.tsx     | 8 ++++----
 Composer/packages/client/src/pages/design/DesignPage.tsx  | 3 ---
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index a19c9d0298..9e6d390cf7 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -121,7 +121,7 @@ type BotInProject = {
 
 type IProjectTreeProps = {
   onSelect?: (link: TreeLink) => void;
-  showAll?: () => void;
+  onAllSelected?: () => void;
   showTriggers?: boolean;
   showDialogs?: boolean;
   navLinks?: TreeLink[];
@@ -130,7 +130,7 @@ type IProjectTreeProps = {
 };
 
 export const ProjectTree: React.FC<IProjectTreeProps> = ({
-  showAll = undefined,
+  onAllSelected = undefined,
   showTriggers = true,
   showDialogs = true,
   onDeleteDialog,
@@ -410,11 +410,11 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
           aria-live={'polite'}
         />
         <div css={tree}>
-          {showAll != null ? (
+          {onAllSelected != null ? (
             <TreeItem
               link={{ displayName: formatMessage('All'), skillId: null, projectId: currentProjectId, isRoot: true }}
               shiftOut={28}
-              onSelect={showAll}
+              onSelect={onAllSelected}
             />
           ) : null}
           {projectTree}
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index c8f08b8c81..6a3286c531 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -604,9 +604,6 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       <div css={pageRoot}>
         <LeftRightSplit initialLeftGridWidth="20%" minLeftPixels={200} minRightPixels={800}>
           <ProjectTree
-            showAll={() => {
-              console.log('all clicked');
-            }}
             onDeleteDialog={handleDeleteDialog}
             onDeleteTrigger={handleDeleteTrigger}
             onSelect={(...props) => handleSelect(projectId, ...props)}

From 69ddaa30415ca62825e4dc91813cf718c95f9c35 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 15 Oct 2020 13:37:17 -0700
Subject: [PATCH 10/44] update unit tests

---
 .../packages/client/__tests__/components/design.test.tsx     | 4 ++--
 .../client/__tests__/components/projecttree.test.tsx         | 4 +---
 .../packages/client/src/components/ProjectTree/treeItem.tsx  | 5 +++--
 Composer/packages/client/src/pages/design/DesignPage.tsx     | 1 -
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index 51bae7c2fe..78d0b6286d 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -30,11 +30,11 @@ describe('<ProjectTree/>', () => {
     const handleSelect = jest.fn(() => {});
     const handleDeleteDialog = jest.fn(() => {});
     const handleDeleteTrigger = jest.fn(() => {});
-    const { findByText } = renderWithRecoil(
+    const { findByTestId } = renderWithRecoil(
       <ProjectTree onDeleteDialog={handleDeleteDialog} onDeleteTrigger={handleDeleteTrigger} onSelect={handleSelect} />,
       initRecoilState
     );
-    const node = await findByText('Greeting');
+    const node = await findByTestId('EchoBot-1_Greeting');
     fireEvent.click(node);
     expect(handleSelect).toHaveBeenCalledTimes(1);
   });
diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index 76cbff5632..3761a2ac19 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -35,9 +35,7 @@ describe('<ProjectTree/>', () => {
       initRecoilState
     );
 
-    console.log(await (await component.findByTestId('dialog')).innerHTML);
-
-    const node = await component.findByText('Unknown intent');
+    const node = await component.findByTestId('EchoBot-1_Greeting');
     fireEvent.click(node);
     expect(mockFileSelect).toHaveBeenCalledTimes(1);
   });
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index 5030a130e9..55980b7380 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -161,17 +161,18 @@ const renderTreeMenuItem = (link: TreeLink) => (item: TreeMenuItem) => {
     ariaLabel: item.label,
     text: item.label,
     iconProps: { iconName: item.icon },
-    onClick: (ev) => {
+    onClick: () => {
       item.action?.(link);
     },
   };
 };
 
 const onRenderItem = (item: IOverflowSetItemProps) => {
+  const { warningContent, errorContent } = item;
   return (
     <div
       data-is-focusable
-      aria-label={`${item.displayName} ${item.warningContent} ${item.errorContent}`}
+      aria-label={`${item.displayName} ${warningContent ?? ''} ${errorContent ?? ''}`}
       css={itemText}
       role="cell"
       tabIndex={0}
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 6a3286c531..7cc30ad945 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -520,7 +520,6 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     } else {
       title = DialogDeleting.NO_LINKED_TITLE;
     }
-    console.log('in delete:', title, 'st=', subTitle, 'set=', setting, 'refs=', refs);
     const result = await OpenConfirmModal(title, subTitle, setting);
 
     if (result) {

From ebf8450e88aef2e8671c98daaf95da5639a774f4 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 15 Oct 2020 14:47:24 -0700
Subject: [PATCH 11/44] fix onSelect handling in ProjectTree

---
 .../client/src/components/ProjectTree/ProjectTree.tsx         | 2 ++
 Composer/packages/client/src/shell/triggerApi.ts              | 4 ----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 9e6d390cf7..8e38586207 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -135,6 +135,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
   showDialogs = true,
   onDeleteDialog,
   onDeleteTrigger,
+  onSelect,
 }) => {
   const { onboardingAddCoachMarkRef, selectTo, navTo } = useRecoilValue(dispatcherState);
 
@@ -178,6 +179,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
 
   const handleOnSelect = (link: TreeLink) => {
     setSelectedLink(link);
+    onSelect?.(link); // if we've defined a custom onSelect, use it
     if (link.dialogName != null) {
       if (link.trigger != null) {
         selectTo(link.projectId, link.skillId, link.dialogName, `triggers[${link.trigger}]`);
diff --git a/Composer/packages/client/src/shell/triggerApi.ts b/Composer/packages/client/src/shell/triggerApi.ts
index 0134f71a14..c807b6e868 100644
--- a/Composer/packages/client/src/shell/triggerApi.ts
+++ b/Composer/packages/client/src/shell/triggerApi.ts
@@ -90,10 +90,6 @@ function createTriggerApi(
     };
     await updateDialog(dialogPayload);
     if (autoSelected) {
-      selectTo(projectId, `triggers[${index}]`);
-    } else if (url) {
-      navigateTo(url);
-    } else {
       selectTo(projectId, null, null, `triggers[${index}]`);
     }
   };

From ad66423848955c4895acb5d20dbc9b5c22002efc Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 15 Oct 2020 15:00:20 -0700
Subject: [PATCH 12/44] Update qna.test.tsx

---
 .../client/src/recoilModel/dispatchers/__tests__/qna.test.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/qna.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/qna.test.tsx
index 306d4f235a..3e21198c4b 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/qna.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/qna.test.tsx
@@ -95,7 +95,7 @@ describe('QnA dispatcher', () => {
       });
     });
 
-    expect(renderedComponent.current.qnaFiles[0].content).toContain(content);
+    expect(renderedComponent.current.qnaFiles[0].content.replace(/\s/g, '')).toContain(content.replace(/\s/g, ''));
   });
 
   it('should update a qna file', async () => {

From 76bee688476d667d00ab69e67e1e34baca511516 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 15 Oct 2020 15:30:07 -0700
Subject: [PATCH 13/44] Update design.test.tsx

---
 .../packages/client/__tests__/components/design.test.tsx   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index d45b65c296..579ee02c40 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -32,11 +32,8 @@ describe('<ProjectTree/>', () => {
     const handleDeleteTrigger = jest.fn(() => {});
 
     const { findByTestId } = renderWithRecoil(
-      <ProjectTree
-        onDeleteDialog={handleDeleteDialog}
-        onDeleteTrigger={handleDeleteTrigger}
-        onSelect={handleSelect}
-      />
+      <ProjectTree onDeleteDialog={handleDeleteDialog} onDeleteTrigger={handleDeleteTrigger} onSelect={handleSelect} />,
+      initRecoilState
     );
     const node = await findByTestId('EchoBot-1_Greeting');
     fireEvent.click(node);

From b877aca262dceca3c50f5988bbab563baa5dbf5a Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 15 Oct 2020 16:03:15 -0700
Subject: [PATCH 14/44] add unit test

---
 .../__tests__/components/projecttree.test.tsx |  17 ++
 .../packages/server/src/locales/en-US.json    | 163 ++++++++++++++----
 2 files changed, 148 insertions(+), 32 deletions(-)

diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index 8c7d93c09e..4cce5938f8 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -39,4 +39,21 @@ describe('<ProjectTree/>', () => {
     fireEvent.click(node);
     expect(mockFileSelect).toHaveBeenCalledTimes(1);
   });
+
+  it('fires the onSelectAll event', async () => {
+    const mockOnSelected = jest.fn();
+    const { findByText } = renderWithRecoil(
+      <ProjectTree
+        onAllSelected={mockOnSelected}
+        onDeleteDialog={() => {}}
+        onDeleteTrigger={() => {}}
+        onSelect={() => {}}
+      />,
+      initRecoilState
+    );
+
+    const node = await findByText('All');
+    fireEvent.click(node);
+    expect(mockOnSelected).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json
index cfc7db70c3..722641e1ac 100644
--- a/Composer/packages/server/src/locales/en-US.json
+++ b/Composer/packages/server/src/locales/en-US.json
@@ -125,8 +125,8 @@
   "add_additional_url_bdfac25d": {
     "message": "Add additional URL"
   },
-  "add_alternative_phrasing_47234f77": {
-    "message": "add alternative phrasing"
+  "add_alternative_phrasing_17e0304c": {
+    "message": "+ Add alternative phrasing"
   },
   "add_an_intent_trigger_a9acc149": {
     "message": "Add an intent trigger"
@@ -140,6 +140,9 @@
   "add_multiple_comma_separated_synonyms_2639283f": {
     "message": "Add multiple comma-separated synonyms"
   },
+  "add_new_answer_9de3808e": {
+    "message": "Add new answer"
+  },
   "add_new_dialog_25f12c9": {
     "message": "Add new dialog"
   },
@@ -155,6 +158,9 @@
   "add_new_propertyname_bedf7dc6": {
     "message": "Add new { propertyName }"
   },
+  "add_new_question_85612b7f": {
+    "message": "Add new question"
+  },
   "add_new_trigger_on_displayname_2aaf6e4c": {
     "message": "Add new trigger on { displayName }"
   },
@@ -164,8 +170,8 @@
   "add_property_d381eba3": {
     "message": "Add Property"
   },
-  "add_qna_pair_bcb1624": {
-    "message": "Add QnA Pair"
+  "add_qna_pair_16c228f0": {
+    "message": "+ Add QnA Pair"
   },
   "add_some_example_phrases_to_trigger_this_intent_pl_568eaf51": {
     "message": "> add some example phrases to trigger this intent:\n> - please tell me the weather\n> - what is the weather like in '{'city=Seattle'}'\n\n> entity definitions:\n> @ ml city"
@@ -203,8 +209,11 @@
   "answer_4620913f": {
     "message": "Answer"
   },
-  "answer_is_answer_799483f0": {
-    "message": "Answer is { answer }"
+  "answer_is_content_c6af84ad": {
+    "message": "Answer is { content }"
+  },
+  "answer_is_required_da652c05": {
+    "message": "Answer is required"
   },
   "any_constant_or_expression_to_evaluate_ba2017b1": {
     "message": "Any constant or expression to evaluate."
@@ -269,6 +278,9 @@
   "ask_a_question_92ef7e0c": {
     "message": "Ask a question"
   },
+  "at_least_one_question_is_required_6f287e04": {
+    "message": "At least one question is required"
+  },
   "attachment_input_e0ece49c": {
     "message": "Attachment Input"
   },
@@ -617,6 +629,9 @@
   "create_a_dialog_9f6c8618": {
     "message": "Create a dialog"
   },
+  "create_a_knowledge_base_from_scratch_or_import_kno_2eb38ac0": {
+    "message": "Create a knowledge base from scratch or import knowledge from a URL or PDF files"
+  },
   "create_a_name_for_the_project_which_will_be_used_t_57e9b690": {
     "message": "Create a name for the project which will be used to name the application: (projectname-environment-LUfilename)"
   },
@@ -641,6 +656,9 @@
   "create_copy_to_translate_bot_content_efc872c": {
     "message": "Create copy to translate bot content"
   },
+  "create_edit_skill_manifest_1c1b14fe": {
+    "message": "Create/edit skill manifest"
+  },
   "create_folder_error_38aa86f5": {
     "message": "Create Folder Error"
   },
@@ -659,6 +677,15 @@
   "create_from_template_87e12c94": {
     "message": "Create from template"
   },
+  "create_kb_e78571ba": {
+    "message": "Create KB"
+  },
+  "create_kb_from_scratch_eddd037a": {
+    "message": "Create KB from scratch"
+  },
+  "create_kb_from_url_or_file_49ad6671": {
+    "message": "Create KB from URL or file"
+  },
   "create_knowledge_base_db6d66c4": {
     "message": "Create knowledge base"
   },
@@ -671,9 +698,18 @@
   "create_new_folder_19d3faa4": {
     "message": "Create new folder"
   },
+  "create_new_kb_1c4f86a0": {
+    "message": "Create new KB"
+  },
+  "create_new_knowledge_base_d15d6873": {
+    "message": "Create new knowledge base"
+  },
   "create_new_knowledge_base_e14d07a5": {
     "message": "Create New Knowledge Base"
   },
+  "create_new_knowledge_base_from_scratch_638c4fd2": {
+    "message": "Create new knowledge base from scratch"
+  },
   "create_or_edit_skill_manifest_8ad98da9": {
     "message": "Create or edit skill manifest"
   },
@@ -767,6 +803,9 @@
   "delete_form_dialog_schema_892df4e8": {
     "message": "Delete form dialog schema"
   },
+  "delete_knowledge_base_66e3a7f1": {
+    "message": "Delete knowledge base"
+  },
   "delete_language_1527609d": {
     "message": "Delete language"
   },
@@ -827,8 +866,8 @@
   "dialogfactory_missing_schema_5c3255c4": {
     "message": "DialogFactory missing schema."
   },
-  "dialognum_plural_0_no_dialogs_1_one_dialog_other_d_1b86909b": {
-    "message": "{ dialogNum, plural,\n     =0 {No dialogs}\n     =1 {One dialog}\n  other {# dialogs}\n} have been found.\n            { dialogNum, select,\n      0 {}\n  other {Press down arrow key to navigate the search results}\n}"
+  "dialognum_plural_0_no_bots_1_one_bot_other_bots_ha_1cf10787": {
+    "message": "{ dialogNum, plural,\n     =0 {No bots}\n     =1 {One bot}\n  other {# bots}\n} have been found.\n            { dialogNum, select,\n      0 {}\n  other {Press down arrow key to navigate the search results}\n}"
   },
   "disable_a5c05db3": {
     "message": "Disable"
@@ -875,6 +914,12 @@
   "duplicated_intents_recognized_d3908424": {
     "message": "Duplicated intents recognized"
   },
+  "each_page_of_pagesizestring_in_propstring_a7e23b00": {
+    "message": "Each page of { pageSizeString } in { propString }"
+  },
+  "each_value_in_ae285cd9": {
+    "message": "Each value in"
+  },
   "early_adopters_e8db7999": {
     "message": "Early adopters"
   },
@@ -902,12 +947,15 @@
   "edit_in_json_75d0d754": {
     "message": "Edit in JSON"
   },
-  "edit_mode_7e07cfdf": {
-    "message": "Edit mode"
+  "edit_kb_name_5e2d8c5b": {
+    "message": "Edit KB name"
   },
   "edit_property_dd6a1172": {
     "message": "Edit Property"
   },
+  "edit_source_45af68b4": {
+    "message": "Edit source"
+  },
   "ejecting_runtime_f6c90614": {
     "message": "Ejecting runtime..."
   },
@@ -923,12 +971,18 @@
   "emit_event_32aa6583": {
     "message": "Emit Event"
   },
+  "empty_qna_icon_34c180c6": {
+    "message": "Empty QnA Icon"
+  },
   "enable_6f5d1328": {
     "message": "Enable"
   },
   "enable_line_numbers_to_refer_to_code_lines_by_numb_e5ba66ea": {
     "message": "Enable line numbers to refer to code lines by number."
   },
+  "enable_multi_turn_extraction_8a168892": {
+    "message": "Enable multi-turn extraction"
+  },
   "enabled_ba7cab66": {
     "message": "Enabled"
   },
@@ -959,11 +1013,8 @@
   "enter_a_min_value_c3030813": {
     "message": "Enter a min value"
   },
-  "enter_a_question_74f2e045": {
-    "message": "Enter a question"
-  },
-  "enter_an_answer_84152a83": {
-    "message": "Enter an answer"
+  "enter_a_url_or_browse_to_upload_a_file_88a783fa": {
+    "message": "Enter a URL or browse to upload a file "
   },
   "enterprise_assistant_434df551": {
     "message": "Enterprise Assistant"
@@ -1004,6 +1055,9 @@
   "error_processing_schema_2c707cf3": {
     "message": "Error Processing Schema"
   },
+  "event_48c2be6e": {
+    "message": " (Event)"
+  },
   "event_activity_2067a94b": {
     "message": "Event activity"
   },
@@ -1046,9 +1100,6 @@
   "export_de71cd8e": {
     "message": "Export"
   },
-  "export_json_2e2981f5": {
-    "message": "Export JSON"
-  },
   "expression_7f906a13": {
     "message": "Expression"
   },
@@ -1070,8 +1121,8 @@
   "extract_question_and_answer_pairs_from_an_online_f_c1e12724": {
     "message": "Extract question-and-answer pairs from an online FAQ, product manuals, or other files. Supported formats are .tsv, .pdf, .doc, .docx, .xlsx, containing questions and answers in sequence. "
   },
-  "extracting_qna_pairs_from_urls_eaed1b1c": {
-    "message": "Extracting QNA pairs from { urls }"
+  "extracting_qna_pairs_from_url_b0331bba": {
+    "message": "Extracting QNA pairs from { url }"
   },
   "fallback_text_e5ff1cb7": {
     "message": "Fallback Text"
@@ -1196,6 +1247,9 @@
   "hospitality_assistant_c330e403": {
     "message": "Hospitality Assistant"
   },
+  "host_ef9acfae": {
+    "message": "Host "
+  },
   "hosts_your_bot_application_9dd01ffc": {
     "message": "Hosts your Bot application."
   },
@@ -1220,9 +1274,6 @@
   "id_already_exists_please_enter_a_unique_file_name_174913a3": {
     "message": "{ id } already exists. Please enter a unique file name."
   },
-  "id_is_id_c0fc7a7d": {
-    "message": "id is { id }"
-  },
   "if_condition_56c9be4a": {
     "message": "If Condition"
   },
@@ -1235,9 +1286,6 @@
   "if_you_already_have_a_qna_account_provide_the_info_466d6a4b": {
     "message": "If you already have a QNA account, provide the information below. If you do not have an account yet, create a (free) account first."
   },
-  "import_qna_from_url_26a99161": {
-    "message": "Import QnA From Url"
-  },
   "import_schema_75659c5f": {
     "message": "Import schema"
   },
@@ -1328,6 +1376,9 @@
   "kb_d9c53902": {
     "message": "KB"
   },
+  "kb_name_cannot_contain_speacial_characters_6588abda": {
+    "message": "KB name cannot contain speacial characters."
+  },
   "key_cannot_be_blank_dccc1b46": {
     "message": "Key cannot be blank"
   },
@@ -1337,6 +1388,12 @@
   "keys_must_be_unique_2028cef3": {
     "message": "Keys must be unique"
   },
+  "knowledge_base_name_7d83bbe4": {
+    "message": "Knowledge base name"
+  },
+  "knowledge_source_dd66f38f": {
+    "message": "Knowledge source"
+  },
   "l_startline_startcharacter_l_endline_endcharacter_72bc2e5d": {
     "message": "L{ startLine }:{ startCharacter } - L{ endLine }:{ endCharacter } "
   },
@@ -1451,6 +1508,9 @@
   "lu_editor_d09fb2b0": {
     "message": "LU editor"
   },
+  "lu_file_already_exist_7f118089": {
+    "message": "lu file already exist"
+  },
   "lu_file_id_not_found_8732d33e": {
     "message": "LU file { id } not found"
   },
@@ -1487,6 +1547,9 @@
   "manifest_version_1edc004a": {
     "message": "Manifest Version"
   },
+  "manually_add_question_and_answer_pairs_to_create_a_f1318c4e": {
+    "message": "Manually add question and answer pairs to create a KB"
+  },
   "maximum_f0e8e5e4": {
     "message": "Maximum"
   },
@@ -1496,6 +1559,9 @@
   "mb_8f9f9e84": {
     "message": "MB"
   },
+  "menu_items_2d66492c": {
+    "message": "Menu items"
+  },
   "message_5c38209d": {
     "message": "Message"
   },
@@ -1916,9 +1982,6 @@
   "property_name_help_text_421a5f7f": {
     "message": "Property name help text"
   },
-  "property_required_help_text_57f027ad": {
-    "message": "Property required help text"
-  },
   "property_title_f2b443b7": {
     "message": "Property title"
   },
@@ -1997,6 +2060,12 @@
   "question_9121487": {
     "message": "Question"
   },
+  "question_is_content_3952e657": {
+    "message": "Question is { content }"
+  },
+  "question_is_empty_now_f0b5733e": {
+    "message": "Question is empty now"
+  },
   "randomselector_4a5274f1": {
     "message": "RandomSelector"
   },
@@ -2039,6 +2108,12 @@
   "remove_f47dc62a": {
     "message": "Remove"
   },
+  "remove_this_dialog_6146716c": {
+    "message": "Remove this dialog"
+  },
+  "remove_this_trigger_622d866d": {
+    "message": "Remove this trigger"
+  },
   "repeat_this_dialog_83ca994e": {
     "message": "Repeat this dialog"
   },
@@ -2075,6 +2150,15 @@
   "restart_bot_34e36428": {
     "message": "Restart Bot"
   },
+  "result_b1f14e91": {
+    "message": " = Result"
+  },
+  "result_property_100ef34f": {
+    "message": " = Result property"
+  },
+  "return_value_b386d1b": {
+    "message": "= Return value"
+  },
   "review_and_generate_63dec712": {
     "message": "Review and generate"
   },
@@ -2411,6 +2495,12 @@
   "these_tasks_will_be_used_to_generate_the_manifest__2791be0e": {
     "message": "These tasks will be used to generate the manifest and describe the capabilities of this skill to those who may want to use it."
   },
+  "this_bot_has_errors_72fb40d5": {
+    "message": "This bot has errors"
+  },
+  "this_bot_has_warnings_b6735e2e": {
+    "message": "This bot has warnings"
+  },
   "this_configures_a_data_driven_dialog_via_a_collect_c7fa4389": {
     "message": "This configures a data driven dialog via a collection of events and actions."
   },
@@ -2432,9 +2522,6 @@
   "this_operation_cannot_be_completed_the_skill_is_al_4886d311": {
     "message": "This operation cannot be completed. The skill is already part of the Bot Project"
   },
-  "this_trigger_type_is_not_supported_by_the_regex_re_2c3b7c46": {
-    "message": "This trigger type is not supported by the RegEx recognizer and will not be fired."
-  },
   "this_trigger_type_is_not_supported_by_the_regex_re_dc3eefa2": {
     "message": "This trigger type is not supported by the RegEx recognizer. To ensure this trigger is fired, change the recognizer type."
   },
@@ -2498,6 +2585,12 @@
   "toggle_extension_e41de2d2": {
     "message": "Toggle extension"
   },
+  "toggle_show_all_61f19d77": {
+    "message": "Toggle show all"
+  },
+  "token_property_e53a19d9": {
+    "message": " = Token Property"
+  },
   "toolbar_bafd4228": {
     "message": "toolbar"
   },
@@ -2525,6 +2618,9 @@
   "try_again_ad656c3c": {
     "message": "Try again"
   },
+  "type_a_name_that_describes_this_content_d1a910b6": {
+    "message": "Type a name that describes this content"
+  },
   "type_and_press_enter_33a2905d": {
     "message": "Type and press enter"
   },
@@ -2753,6 +2849,9 @@
   "yes_dde87d5": {
     "message": "Yes"
   },
+  "you_already_have_a_kb_with_that_name_choose_anothe_fc2f7156": {
+    "message": "You already have a KB with that name.Choose another name and try again."
+  },
   "you_are_about_to_publish_your_bot_to_the_profile_b_79a6a226": {
     "message": "You are about to publish your bot to the profile below. Do you want to proceed?"
   },

From a02da9b11cd5305954ceb70eed6c82f9c9eaea4b Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Mon, 19 Oct 2020 15:42:23 -0700
Subject: [PATCH 15/44] fixes from PR comments

---
 .../__tests__/components/design.test.tsx      |  3 +-
 .../__tests__/components/projecttree.test.tsx |  5 +-
 .../{testUtils => mocks}/sampleDialog.ts      |  0
 .../client/__tests__/testUtils/index.ts       |  1 -
 .../components/ProjectTree/ExpandableNode.tsx | 12 +--
 .../components/ProjectTree/ProjectTree.tsx    | 81 ++++++++-----------
 .../src/components/ProjectTree/treeItem.tsx   |  6 +-
 .../client/src/pages/design/DesignPage.tsx    |  2 +-
 .../src/pages/knowledge-base/QnAPage.tsx      |  2 +-
 .../client/src/pages/publish/Publish.tsx      |  4 +-
 .../client/src/pages/setting/SettingsPage.tsx |  4 +-
 .../recoilModel/dispatchers/application.ts    |  4 +-
 12 files changed, 57 insertions(+), 67 deletions(-)
 rename Composer/packages/client/__tests__/{testUtils => mocks}/sampleDialog.ts (100%)

diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index 579ee02c40..c893547ab9 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -4,7 +4,8 @@
 import * as React from 'react';
 import { fireEvent } from '@botframework-composer/test-utils';
 
-import { renderWithRecoil, SAMPLE_DIALOG } from '../testUtils';
+import { renderWithRecoil } from '../testUtils';
+import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
 import { CreateDialogModal } from '../../src/pages/design/createDialogModal';
diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index 4cce5938f8..b23859a3d4 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -5,7 +5,8 @@ import * as React from 'react';
 import { fireEvent } from '@botframework-composer/test-utils';
 
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
-import { renderWithRecoil, SAMPLE_DIALOG } from '../testUtils';
+import { renderWithRecoil } from '../testUtils';
+import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
 import { dialogsState, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
 
 const projectId = '12345.6789';
@@ -44,10 +45,10 @@ describe('<ProjectTree/>', () => {
     const mockOnSelected = jest.fn();
     const { findByText } = renderWithRecoil(
       <ProjectTree
-        onAllSelected={mockOnSelected}
         onDeleteDialog={() => {}}
         onDeleteTrigger={() => {}}
         onSelect={() => {}}
+        onSelectAllLink={mockOnSelected}
       />,
       initRecoilState
     );
diff --git a/Composer/packages/client/__tests__/testUtils/sampleDialog.ts b/Composer/packages/client/__tests__/mocks/sampleDialog.ts
similarity index 100%
rename from Composer/packages/client/__tests__/testUtils/sampleDialog.ts
rename to Composer/packages/client/__tests__/mocks/sampleDialog.ts
diff --git a/Composer/packages/client/__tests__/testUtils/index.ts b/Composer/packages/client/__tests__/testUtils/index.ts
index 4d6f51e3f5..43ef53f1e9 100644
--- a/Composer/packages/client/__tests__/testUtils/index.ts
+++ b/Composer/packages/client/__tests__/testUtils/index.ts
@@ -4,4 +4,3 @@
 export * from './renderWithRecoilAndContext';
 export * from './renderWithRecoil';
 export * from './react-recoil-hooks-testing-library';
-export * from './sampleDialog';
diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
index ccae31a022..cf9d64f5df 100644
--- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
@@ -6,8 +6,8 @@ import { jsx, css } from '@emotion/core';
 import { useState, MouseEvent, KeyboardEvent } from 'react';
 
 type Props = {
-  children: JSX.Element;
-  summary: JSX.Element;
+  children: React.ReactNode;
+  summary: React.ReactNode;
   depth?: number;
   detailsRef?: (el: HTMLElement | null) => void;
 };
@@ -24,22 +24,22 @@ const nodeStyle = (depth: number) => css`
 `;
 
 export const ExpandableNode = ({ children, summary, detailsRef, depth = 0 }: Props) => {
-  const [isOpen, setOpen] = useState(true);
+  const [isExpanded, setExpanded] = useState(true);
 
   function handleClick(ev: MouseEvent) {
     if ((ev.target as Element)?.tagName.toLowerCase() === 'summary') {
-      setOpen(!isOpen);
+      setExpanded(!isExpanded);
     }
     ev.preventDefault();
   }
 
   function handleKey(ev: KeyboardEvent) {
-    if (ev.key === 'Enter' || ev.key === 'Space') setOpen(!isOpen);
+    if (ev.key === 'Enter' || ev.key === 'Space') setExpanded(!isExpanded);
   }
 
   return (
     <div css={nodeStyle(depth)} data-testid="dialog">
-      <details ref={detailsRef} open={isOpen}>
+      <details ref={detailsRef} 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}
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 8e38586207..fe9a06b5dc 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -12,13 +12,9 @@ import { DialogInfo, ITrigger, Diagnostic, DiagnosticSeverity } from '@bfc/share
 import debounce from 'lodash/debounce';
 import { useRecoilValue } from 'recoil';
 import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
+import isEqual from 'lodash/isEqual';
 
-import {
-  dispatcherState,
-  currentProjectIdState,
-  botProjectSpaceSelector,
-  validateDialogSelectorFamily,
-} from '../../recoilModel';
+import { dispatcherState, currentProjectIdState, botProjectSpaceSelector } from '../../recoilModel';
 import { getFriendlyName } from '../../utils/dialogUtil';
 import { triggerNotSupported } from '../../utils/dialogValidator';
 
@@ -65,6 +61,8 @@ const tree = css`
   label: tree;
 `;
 
+const SUMMARY_ARROW_SPACE = 28; // the rough pixel size of the dropdown arrow to the left of a Details/Summary element
+
 // -------------------- ProjectTree -------------------- //
 
 export type TreeLink = {
@@ -78,21 +76,10 @@ export type TreeLink = {
   trigger?: number;
 };
 
-function isLinkEqual(link1: TreeLink | undefined, link2: TreeLink | undefined) {
-  if (link1 === link2) return true;
-  if (link1 == null) return false;
-  if (link2 == null) return false;
-  if (link1.projectId !== link2.projectId) return false;
-  if (link1.skillId !== link2.skillId) return false;
-  if (link1.dialogName !== link2.dialogName) return false;
-  if (link1.trigger !== link2.trigger) return false;
-  return true;
-}
-
 export type TreeMenuItem = {
   icon?: string;
   label: string; // leave this blank to place a separator
-  action?: (link: TreeLink) => void;
+  onClick?: (link: TreeLink) => void;
 };
 
 function getTriggerName(trigger: ITrigger) {
@@ -119,9 +106,9 @@ type BotInProject = {
   isRemote: boolean;
 };
 
-type IProjectTreeProps = {
+type Props = {
   onSelect?: (link: TreeLink) => void;
-  onAllSelected?: () => void;
+  onSelectAllLink?: () => void;
   showTriggers?: boolean;
   showDialogs?: boolean;
   navLinks?: TreeLink[];
@@ -129,8 +116,8 @@ type IProjectTreeProps = {
   onDeleteDialog: (id: string) => void;
 };
 
-export const ProjectTree: React.FC<IProjectTreeProps> = ({
-  onAllSelected = undefined,
+export const ProjectTree: React.FC<Props> = ({
+  onSelectAllLink: onAllSelected = undefined,
   showTriggers = true,
   showDialogs = true,
   onDeleteDialog,
@@ -148,16 +135,18 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
     hasWarnings: false,
   }));
   const currentProjectId = useRecoilValue(currentProjectIdState);
+  const botProjectSpace = useRecoilValue(botProjectSpaceSelector);
 
   const notificationMap: { [projectId: string]: { [dialogId: string]: Diagnostic[] } } = {};
   for (const bot of projectCollection) {
     notificationMap[bot.projectId] = {};
-    // this seems to be the only way to get these notifications
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const dialogMessages = useRecoilValue(validateDialogSelectorFamily(bot.projectId));
-    for (const message of dialogMessages) {
-      const dialogId = message.id;
-      notificationMap[bot.projectId][dialogId] = message.diagnostics;
+
+    const matchingBot = botProjectSpace.filter((project) => project.projectId === bot.projectId)[0];
+    if (matchingBot == null) continue; // should never happen, but just to be safe
+
+    for (const dialog of matchingBot.dialogs) {
+      const dialogId = dialog.id;
+      notificationMap[bot.projectId][dialogId] = dialog.diagnostics;
     }
   }
 
@@ -211,11 +200,11 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
       >
         <TreeItem
           showProps
+          forceIndent={bot.isRemote ? SUMMARY_ARROW_SPACE : 0}
           icon={bot.isRemote ? icons.EXTERNAL_SKILL : icons.BOT}
-          isSubItemActive={isLinkEqual(link, selectedLink)}
+          isSubItemActive={isEqual(link, selectedLink)}
           link={link}
-          menu={[{ label: formatMessage('Create/edit skill manifest'), action: () => {} }]}
-          shiftOut={bot.isRemote ? 28 : 0}
+          menu={[{ label: formatMessage('Create/edit skill manifest'), onClick: () => {} }]}
         />
       </span>
     );
@@ -253,26 +242,26 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
       >
         <TreeItem
           showProps
+          forceIndent={showTriggers ? 0 : SUMMARY_ARROW_SPACE}
           icon={icons.DIALOG}
-          isSubItemActive={isLinkEqual(link, selectedLink)}
+          isSubItemActive={isEqual(link, selectedLink)}
           link={link}
           menu={[
             {
               label: formatMessage('Remove this dialog'),
               icon: 'Delete',
-              action: (link) => {
+              onClick: (link) => {
                 onDeleteDialog(link.dialogName ?? '');
               },
             },
           ]}
-          shiftOut={showTriggers ? 0 : 28}
           onSelect={handleOnSelect}
         />
       </span>
     );
   };
 
-  function renderTrigger(projectId: string, item: any, dialog: DialogInfo): React.ReactNode {
+  const renderTrigger = (projectId: string, item: any, dialog: DialogInfo): React.ReactNode => {
     // NOTE: put the form-dialog detection here when it's ready
     const link: TreeLink = {
       displayName: item.displayName,
@@ -289,23 +278,23 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
       <TreeItem
         key={`${item.id}_${item.index}`}
         dialogName={dialog.displayName}
+        forceIndent={48}
         icon={icons.TRIGGER}
-        isActive={isLinkEqual(link, selectedLink)}
+        isActive={isEqual(link, selectedLink)}
         link={link}
         menu={[
           {
             label: formatMessage('Remove this trigger'),
             icon: 'Delete',
-            action: (link) => {
+            onClick: (link) => {
               onDeleteTrigger(link.dialogName ?? '', link.trigger ?? 0);
             },
           },
         ]}
-        shiftOut={48}
         onSelect={handleOnSelect}
       />
     );
-  }
+  };
 
   const onFilter = (_e?: any, newValue?: string): void => {
     if (typeof newValue === 'string') {
@@ -313,11 +302,11 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
     }
   };
 
-  function filterMatch(scope: string) {
+  const filterMatch = (scope: string): boolean => {
     return scope.toLowerCase().includes(filter.toLowerCase());
-  }
+  };
 
-  function createDetailsTree(bot: BotInProject, startDepth: number) {
+  const createDetailsTree = (bot: BotInProject, startDepth: number) => {
     const { projectId } = bot;
     const dialogs = sortDialog(bot.dialogs);
 
@@ -358,9 +347,9 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
     } else {
       return filteredDialogs.map((dialog: DialogInfo) => renderDialogHeader(projectId, dialog));
     }
-  }
+  };
 
-  function createBotSubtree(bot: BotInProject & { hasWarnings: boolean }) {
+  const createBotSubtree = (bot: BotInProject & { hasWarnings: boolean }) => {
     if (showDialogs && !bot.isRemote) {
       return (
         <ExpandableNode key={bot.projectId} summary={renderBotHeader(bot)}>
@@ -370,7 +359,7 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
     } else {
       return renderBotHeader(bot);
     }
-  }
+  };
 
   const projectTree =
     projectCollection.length === 1
@@ -414,8 +403,8 @@ export const ProjectTree: React.FC<IProjectTreeProps> = ({
         <div css={tree}>
           {onAllSelected != null ? (
             <TreeItem
+              forceIndent={SUMMARY_ARROW_SPACE}
               link={{ displayName: formatMessage('All'), skillId: null, projectId: currentProjectId, isRoot: true }}
-              shiftOut={28}
               onSelect={onAllSelected}
             />
           ) : null}
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index 55980b7380..a4ba777ae9 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -146,7 +146,7 @@ interface ITreeItemProps {
   icon?: string;
   dialogName?: string;
   showProps?: boolean;
-  shiftOut?: number; // needed to make an outline look right; should be the size of the "details" reveal arrow
+  forceIndent?: number; // needed to make an outline look right; should be the size of the "details" reveal arrow
 }
 
 const renderTreeMenuItem = (link: TreeLink) => (item: TreeMenuItem) => {
@@ -162,7 +162,7 @@ const renderTreeMenuItem = (link: TreeLink) => (item: TreeMenuItem) => {
     text: item.label,
     iconProps: { iconName: item.icon },
     onClick: () => {
-      item.action?.(link);
+      item.onClick?.(link);
     },
   };
 };
@@ -240,7 +240,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
   isActive = false,
   icon,
   dialogName,
-  shiftOut,
+  forceIndent: shiftOut,
   onSelect,
   menu = [],
 }) => {
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 5ac44328e8..9947337650 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -204,7 +204,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     if (location && props.dialogId && props.projectId) {
       const { dialogId, projectId } = props;
 
-      // TODO: swap to the commented-out block once we're working on skills for real
+      // TODO: swap to the commented-out block once we're working on skills for real (issue #4429)
       // let { skillId } = props;
       // if (skillId == null) skillId = projectId;
 
diff --git a/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx b/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx
index 3a00ce703a..e3a7bdaa32 100644
--- a/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx
+++ b/Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx
@@ -105,7 +105,7 @@ const QnAPage: React.FC<QnAPageProps> = (props) => {
   );
 
   useEffect(() => {
-    actions.setCurrentMode('qna');
+    actions.setCurrentPageMode('qna');
   }, []);
 
   const toolbarItems = [
diff --git a/Composer/packages/client/src/pages/publish/Publish.tsx b/Composer/packages/client/src/pages/publish/Publish.tsx
index 71d9e43aa4..fd02c2523a 100644
--- a/Composer/packages/client/src/pages/publish/Publish.tsx
+++ b/Composer/packages/client/src/pages/publish/Publish.tsx
@@ -48,7 +48,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
     publishToTarget,
     setQnASettings,
     rollbackToVersion: rollbackToVersionDispatcher,
-    setCurrentMode,
+    setCurrentPageMode,
   } = useRecoilValue(dispatcherState);
 
   const [addDialogHidden, setAddDialogHidden] = useState(true);
@@ -372,7 +372,7 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
   );
 
   useEffect(() => {
-    setCurrentMode('notifications');
+    setCurrentPageMode('notifications');
   }, []);
 
   return (
diff --git a/Composer/packages/client/src/pages/setting/SettingsPage.tsx b/Composer/packages/client/src/pages/setting/SettingsPage.tsx
index 22dbd8d2cb..23cbde35e8 100644
--- a/Composer/packages/client/src/pages/setting/SettingsPage.tsx
+++ b/Composer/packages/client/src/pages/setting/SettingsPage.tsx
@@ -45,7 +45,7 @@ const SettingPage: React.FC<RouteComponentProps> = () => {
     addLanguages,
     deleteLanguages,
     fetchProjectById,
-    setCurrentMode,
+    setCurrentPageMode,
   } = useRecoilValue(dispatcherState);
   const locale = useRecoilValue(localeState(projectId));
   const showDelLanguageModal = useRecoilValue(showDelLanguageModalState(projectId));
@@ -59,7 +59,7 @@ const SettingPage: React.FC<RouteComponentProps> = () => {
   // use cached projectId do fetch.
   const cachedProjectId = useProjectIdCache();
   useEffect(() => {
-    setCurrentMode('settings');
+    setCurrentPageMode('settings');
     if (!projectId && cachedProjectId) {
       fetchProjectById(cachedProjectId);
     }
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/application.ts b/Composer/packages/client/src/recoilModel/dispatchers/application.ts
index 4e5b564df0..9bd22e28f7 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/application.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/application.ts
@@ -75,7 +75,7 @@ export const applicationDispatcher = () => {
     set(announcementState, message);
   });
 
-  const setCurrentMode = useRecoilCallback(({ set }: CallbackInterface) => (mode: PageMode) => {
+  const setCurrentPageMode = useRecoilCallback(({ set }: CallbackInterface) => (mode: PageMode) => {
     set(currentModeState, mode);
   });
 
@@ -119,6 +119,6 @@ export const applicationDispatcher = () => {
     onboardingAddCoachMarkRef,
     setCreationFlowStatus,
     setApplicationLevelError,
-    setCurrentMode,
+    setCurrentPageMode,
   };
 };

From 83c126dadb91329e251973594bccb86275fac6a1 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Tue, 20 Oct 2020 10:14:39 -0700
Subject: [PATCH 16/44] restore multibots to tree

---
 .../components/ProjectTree/ProjectTree.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index fe9a06b5dc..6206c9bf32 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -150,20 +150,20 @@ export const ProjectTree: React.FC<Props> = ({
     }
   }
 
-  const dialogHasWarnings = (dialog: DialogInfo) => {
-    notificationMap[currentProjectId][dialog.id].some((diag) => diag.severity === DiagnosticSeverity.Warning);
+  const dialogHasWarnings = (projectId: string) => (dialog: DialogInfo) => {
+    notificationMap[projectId][dialog.id].some((diag) => diag.severity === DiagnosticSeverity.Warning);
   };
 
   const botHasWarnings = (bot: BotInProject) => {
-    return bot.dialogs.some(dialogHasWarnings);
+    return bot.dialogs.some(dialogHasWarnings(bot.projectId));
   };
 
-  const dialogHasErrors = (dialog: DialogInfo) => {
-    notificationMap[currentProjectId][dialog.id].some((diag) => diag.severity === DiagnosticSeverity.Error);
+  const dialogHasErrors = (projectId: string) => (dialog: DialogInfo) => {
+    notificationMap[projectId][dialog.id].some((diag) => diag.severity === DiagnosticSeverity.Error);
   };
 
   const botHasErrors = (bot: BotInProject) => {
-    return bot.dialogs.some(dialogHasErrors);
+    return bot.dialogs.some(dialogHasErrors(bot.projectId));
   };
 
   const handleOnSelect = (link: TreeLink) => {
@@ -211,11 +211,11 @@ export const ProjectTree: React.FC<Props> = ({
   };
 
   const renderDialogHeader = (skillId: string, dialog: DialogInfo) => {
-    const warningContent = notificationMap[currentProjectId][dialog.id]
+    const warningContent = notificationMap[skillId][dialog.id]
       .filter((diag) => diag.severity === DiagnosticSeverity.Warning)
       .map((diag) => diag.message)
       .join(',');
-    const errorContent = notificationMap[currentProjectId][dialog.id]
+    const errorContent = notificationMap[skillId][dialog.id]
       .filter((diag) => diag.severity === DiagnosticSeverity.Error)
       .map((diag) => diag.message)
       .join(',');
@@ -224,7 +224,7 @@ export const ProjectTree: React.FC<Props> = ({
       dialogName: dialog.id,
       displayName: dialog.displayName,
       isRoot: dialog.isRoot,
-      projectId: currentProjectId,
+      projectId: skillId,
       skillId: null,
       errorContent,
       warningContent,
@@ -270,7 +270,7 @@ export const ProjectTree: React.FC<Props> = ({
       trigger: item.index,
       dialogName: dialog.id,
       isRoot: false,
-      projectId: currentProjectId,
+      projectId: projectId,
       skillId: null,
     };
 

From e498a2f4e92aece43f544c3d7a60119f1bf03397 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Wed, 21 Oct 2020 11:52:20 -0700
Subject: [PATCH 17/44] fix links from project tree

---
 .../components/ProjectTree/ProjectTree.tsx    | 37 +++++------
 .../src/components/ProjectTree/treeItem.tsx   |  6 +-
 .../client/src/pages/design/DesignPage.tsx    | 64 ++++++++++---------
 .../client/src/pages/skills/skill-list.tsx    |  2 +-
 .../src/recoilModel/dispatchers/navigation.ts | 25 ++++++--
 Composer/packages/client/src/router.tsx       |  7 ++
 .../packages/client/src/shell/useShell.ts     |  4 +-
 .../packages/client/src/utils/navigation.ts   |  6 +-
 .../packages/server/src/locales/en-US.json    | 19 +++---
 9 files changed, 93 insertions(+), 77 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 6206c9bf32..7a36603614 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -71,8 +71,8 @@ export type TreeLink = {
   warningContent?: string;
   errorContent?: string;
   projectId: string;
-  skillId: string | null;
-  dialogName?: string;
+  skillId?: string;
+  dialogId?: string;
   trigger?: number;
 };
 
@@ -107,7 +107,7 @@ type BotInProject = {
 };
 
 type Props = {
-  onSelect?: (link: TreeLink) => void;
+  onSelect: (link: TreeLink) => void;
   onSelectAllLink?: () => void;
   showTriggers?: boolean;
   showDialogs?: boolean;
@@ -124,7 +124,7 @@ export const ProjectTree: React.FC<Props> = ({
   onDeleteTrigger,
   onSelect,
 }) => {
-  const { onboardingAddCoachMarkRef, selectTo, navTo } = useRecoilValue(dispatcherState);
+  const { onboardingAddCoachMarkRef } = useRecoilValue(dispatcherState);
 
   const [filter, setFilter] = useState('');
   const [selectedLink, setSelectedLink] = useState<TreeLink | undefined>();
@@ -168,14 +168,7 @@ export const ProjectTree: React.FC<Props> = ({
 
   const handleOnSelect = (link: TreeLink) => {
     setSelectedLink(link);
-    onSelect?.(link); // if we've defined a custom onSelect, use it
-    if (link.dialogName != null) {
-      if (link.trigger != null) {
-        selectTo(link.projectId, link.skillId, link.dialogName, `triggers[${link.trigger}]`);
-      } else {
-        navTo(link.projectId, link.skillId, link.dialogName);
-      }
-    }
+    onSelect(link);
   };
 
   const renderBotHeader = (bot: BotInProject) => {
@@ -221,11 +214,11 @@ export const ProjectTree: React.FC<Props> = ({
       .join(',');
 
     const link: TreeLink = {
-      dialogName: dialog.id,
+      dialogId: dialog.id,
       displayName: dialog.displayName,
       isRoot: dialog.isRoot,
-      projectId: skillId,
-      skillId: null,
+      projectId: currentProjectId,
+      skillId: skillId,
       errorContent,
       warningContent,
     };
@@ -251,7 +244,7 @@ export const ProjectTree: React.FC<Props> = ({
               label: formatMessage('Remove this dialog'),
               icon: 'Delete',
               onClick: (link) => {
-                onDeleteDialog(link.dialogName ?? '');
+                onDeleteDialog(link.dialogId ?? '');
               },
             },
           ]}
@@ -264,14 +257,14 @@ export const ProjectTree: React.FC<Props> = ({
   const renderTrigger = (projectId: string, item: any, dialog: DialogInfo): React.ReactNode => {
     // NOTE: put the form-dialog detection here when it's ready
     const link: TreeLink = {
+      projectId: currentProjectId,
+      skillId: projectId,
+      dialogId: dialog.id,
+      trigger: item.index,
       displayName: item.displayName,
       warningContent: item.warningContent,
       errorContent: item.errorContent,
-      trigger: item.index,
-      dialogName: dialog.id,
       isRoot: false,
-      projectId: projectId,
-      skillId: null,
     };
 
     return (
@@ -287,7 +280,7 @@ export const ProjectTree: React.FC<Props> = ({
             label: formatMessage('Remove this trigger'),
             icon: 'Delete',
             onClick: (link) => {
-              onDeleteTrigger(link.dialogName ?? '', link.trigger ?? 0);
+              onDeleteTrigger(link.dialogId ?? '', link.trigger ?? 0);
             },
           },
         ]}
@@ -404,7 +397,7 @@ export const ProjectTree: React.FC<Props> = ({
           {onAllSelected != null ? (
             <TreeItem
               forceIndent={SUMMARY_ARROW_SPACE}
-              link={{ displayName: formatMessage('All'), skillId: null, projectId: currentProjectId, isRoot: true }}
+              link={{ displayName: formatMessage('All'), projectId: currentProjectId, isRoot: true }}
               onSelect={onAllSelected}
             />
           ) : null}
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index a4ba777ae9..400b22932e 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -240,7 +240,7 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
   isActive = false,
   icon,
   dialogName,
-  forceIndent: shiftOut,
+  forceIndent,
   onSelect,
   menu = [],
 }) => {
@@ -248,12 +248,12 @@ export const TreeItem: React.FC<ITreeItemProps> = ({
 
   const overflowMenu = menu.map(renderTreeMenuItem(link));
 
-  const linkString = `${link.projectId}_DialogTreeItem${link.dialogName}_${link.trigger ?? ''}`;
+  const linkString = `${link.projectId}_DialogTreeItem${link.dialogId}_${link.trigger ?? ''}`;
 
   return (
     <div
       aria-label={a11yLabel}
-      css={navItem(!!isActive, shiftOut ?? 0)}
+      css={navItem(!!isActive, forceIndent ?? 0)}
       data-testid={a11yLabel}
       role="gridcell"
       tabIndex={0}
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 9947337650..7939d0d482 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -29,7 +29,7 @@ import {
 import { Conversation } from '../../components/Conversation';
 import { dialogStyle } from '../../components/Modal/dialogStyle';
 import { OpenConfirmModal } from '../../components/Modal/ConfirmDialog';
-import { ProjectTree } from '../../components/ProjectTree/ProjectTree';
+import { ProjectTree, TreeLink } from '../../components/ProjectTree/ProjectTree';
 import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 import { clearBreadcrumb, getFocusPath } from '../../utils/navigation';
 import { navigateTo } from '../../utils/navigation';
@@ -110,13 +110,15 @@ const getTabFromFragment = () => {
   }
 };
 
-const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string }>> = (props) => {
-  const { location, dialogId, projectId = '' } = props;
+const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string; skillId?: string }>> = (
+  props
+) => {
+  const { location, dialogId, projectId = '', skillId = null } = props;
   const userSettings = useRecoilValue(userSettingsState);
 
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));
   const schemas = useRecoilValue(schemasState(projectId));
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogSelectorFamily(skillId ?? projectId));
   const displaySkillManifest = useRecoilValue(displaySkillManifestState(projectId));
   const breadcrumb = useRecoilValue(breadcrumbState(projectId));
   const focusPath = useRecoilValue(focusPathState(projectId));
@@ -160,10 +162,10 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const [currentDialog, setCurrentDialog] = useState<DialogInfo>(dialogs[0]);
   const [exportSkillModalVisible, setExportSkillModalVisible] = useState(false);
   const [warningIsVisible, setWarningIsVisible] = useState(true);
-  const shell = useShell('DesignPage', projectId);
-  const shellForFlowEditor = useShell('FlowEditor', projectId);
-  const shellForPropertyEditor = useShell('PropertyEditor', projectId);
-  const triggerApi = useTriggerApi(projectId);
+  const shell = useShell('DesignPage', skillId ?? rootProjectId);
+  const shellForFlowEditor = useShell('FlowEditor', skillId ?? rootProjectId);
+  const shellForPropertyEditor = useShell('PropertyEditor', skillId ?? rootProjectId);
+  const triggerApi = useTriggerApi(skillId ?? rootProjectId);
   const { createTrigger } = shell.api;
 
   const defaultQnATriggerData = {
@@ -204,9 +206,8 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     if (location && props.dialogId && props.projectId) {
       const { dialogId, projectId } = props;
 
-      // TODO: swap to the commented-out block once we're working on skills for real (issue #4429)
-      // let { skillId } = props;
-      // if (skillId == null) skillId = projectId;
+      let { skillId } = props;
+      if (skillId == null) skillId = projectId;
 
       const params = new URLSearchParams(location.search);
       const dialogMap = dialogs.reduce((acc, { content, id }) => ({ ...acc, [id]: content }), {});
@@ -217,20 +218,20 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       //make sure focusPath always valid
       const data = getDialogData(dialogMap, dialogId, getFocusPath(selected, focused));
       if (typeof data === 'undefined') {
-        const { id } = dialogs.find(({ id }) => id === dialogId) || dialogs.find(({ isRoot }) => isRoot) || {};
+        const { id: foundId } = dialogs.find(({ id }) => id === dialogId) || dialogs.find(({ isRoot }) => isRoot) || {};
         /**
          * It's improper to fallback to `dialogId` directly:
-         *   - If 'action' not exists at `focused` path, fallback to trigger path;
-         *   - If 'trigger' not exists at `selected` path, fallback to dialog Id;
-         *   - If 'dialog' not exists at `dialogId` path, fallback to main dialog.
+         *   - If 'action' does not exist at `focused` path, fallback to trigger path;
+         *   - If 'trigger' does not exist at `selected` path, fallback to dialog Id;
+         *   - If 'dialog' does not exist at `dialogId` path, fallback to main dialog.
          */
-        if (id) {
-          navTo(rootProjectId, null, id);
+        if (foundId != null) {
+          navTo(projectId, skillId, foundId);
         }
         return;
       }
 
-      setDesignPageLocation(projectId, {
+      setDesignPageLocation(skillId, {
         dialogId,
         selected,
         focused,
@@ -265,18 +266,19 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     createTrigger(dialogId, formData);
   };
 
-  function handleSelect(projectId, id, selected = '') {
+  function handleSelect(link: TreeLink, selectPath = '') {
     updateZoomRate({ currentRate: 1 });
-    if (selected) {
-      selectTo(projectId, null, null, selected);
-    } else {
-      navTo(projectId, null, id, []);
+    if (link.trigger != null || selectPath) {
+      const path = link.trigger == null ? selectPath : `triggers[${link.trigger}]`;
+      selectTo(link.projectId, link.skillId ?? null, link.dialogId ?? null, path);
+    } else if (link.dialogId != null) {
+      navTo(link.projectId, link.skillId ?? null, link.dialogId, []);
     }
   }
 
-  const onCreateDialogComplete = (newDialog) => {
-    if (newDialog) {
-      navTo(projectId, null, newDialog, []);
+  const onCreateDialogComplete = (dialogId) => {
+    if (dialogId) {
+      navTo(projectId, null, dialogId, []);
     }
   };
 
@@ -462,7 +464,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   function handleBreadcrumbItemClick(_event, item) {
     if (item) {
       const { dialogId, selected, focused, index } = item;
-      selectAndFocus(projectId, null, dialogId, selected, focused, clearBreadcrumb(breadcrumb, index));
+      selectAndFocus(projectId, skillId, dialogId, selected, focused, clearBreadcrumb(breadcrumb, index));
     }
   }
 
@@ -552,14 +554,14 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       if (index === currentIdx) {
         if (currentIdx - 1 >= 0) {
           //if the deleted node is selected and the selected one is not the first one, navTo the previous trigger;
-          selectTo(projectId, null, dialogId, createSelectedPath(currentIdx - 1));
+          selectTo(projectId, skillId, dialogId, createSelectedPath(currentIdx - 1));
         } else {
           //if the deleted node is selected and the selected one is the first one, navTo the first trigger;
-          navTo(projectId, null, dialogId, []);
+          navTo(projectId, skillId, dialogId, []);
         }
       } else if (index < currentIdx) {
         //if the deleted node is at the front, navTo the current one;
-        selectTo(projectId, null, dialogId, createSelectedPath(currentIdx - 1));
+        selectTo(projectId, skillId, dialogId, createSelectedPath(currentIdx - 1));
       }
     }
   }
@@ -599,7 +601,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           <ProjectTree
             onDeleteDialog={handleDeleteDialog}
             onDeleteTrigger={handleDeleteTrigger}
-            onSelect={(...props) => handleSelect(projectId, ...props)}
+            onSelect={handleSelect}
           />
           <div css={contentWrapper} role="main">
             <div css={{ position: 'relative' }} data-testid="DesignPage-ToolBar">
diff --git a/Composer/packages/client/src/pages/skills/skill-list.tsx b/Composer/packages/client/src/pages/skills/skill-list.tsx
index 43424dd313..63435f0e8d 100644
--- a/Composer/packages/client/src/pages/skills/skill-list.tsx
+++ b/Composer/packages/client/src/pages/skills/skill-list.tsx
@@ -131,7 +131,7 @@ const SkillList: React.FC<SkillListProps> = ({ projectId }) => {
     }
   };
 
-  const handleEditSkill = (projectId, skillId) => (skillData) => {
+  const handleEditSkill = (projectId: string, skillId: string) => (skillData) => {
     updateSkill(projectId, skillId, skillData);
   };
 
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index 95ee4d4598..ab0d82d6f1 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -73,7 +73,7 @@ export const navigationDispatcher = () => {
 
       const currentUri = convertPathToUrl(projectId, skillId, dialogId, path);
 
-      if (checkUrl(currentUri, projectId, designPageLocation)) return;
+      if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
 
       navigateTo(currentUri, { state: { breadcrumb: updatedBreadcrumb } });
     }
@@ -99,20 +99,28 @@ export const navigationDispatcher = () => {
       const encodedSelectPath = encodeArrayPathToDesignerPath(currentDialog?.content, selectPath);
       const currentUri = convertPathToUrl(projectId, skillId, dialogId, encodedSelectPath);
 
-      if (checkUrl(currentUri, projectId, designPageLocation)) return;
+      if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
       navigateTo(currentUri, { state: { breadcrumb: updateBreadcrumb(breadcrumb, BreadcrumbUpdateType.Selected) } });
     }
   );
 
   const focusTo = useRecoilCallback(
-    ({ snapshot, set }: CallbackInterface) => async (projectId: string, focusPath: string, fragment: string) => {
+    ({ snapshot, set }: CallbackInterface) => async (
+      projectId: string,
+      skillId: string | null,
+      focusPath: string,
+      fragment: string
+    ) => {
       set(currentProjectIdState, projectId);
       const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
       const breadcrumb = await snapshot.getPromise(breadcrumbState(projectId));
       let updatedBreadcrumb = [...breadcrumb];
       const { dialogId, selected } = designPageLocation;
 
-      let currentUri = `/bot/${projectId}/dialogs/${dialogId}`;
+      let currentUri =
+        skillId == null
+          ? `/bot/${projectId}/dialogs/${dialogId}`
+          : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}`;
 
       if (focusPath) {
         const dialogs = await snapshot.getPromise(dialogsState(projectId));
@@ -134,7 +142,7 @@ export const navigationDispatcher = () => {
       if (fragment && typeof fragment === 'string') {
         currentUri += `#${fragment}`;
       }
-      if (checkUrl(currentUri, projectId, designPageLocation)) return;
+      if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
       navigateTo(currentUri, { state: { breadcrumb: updatedBreadcrumb } });
     }
   );
@@ -157,9 +165,12 @@ export const navigationDispatcher = () => {
       const search = getUrlSearch(encodedSelectPath, encodedFocusPath);
       const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
       if (search) {
-        const currentUri = `/bot/${projectId}/dialogs/${dialogId}${search}`;
+        const currentUri =
+          skillId == null
+            ? `/bot/${projectId}/dialogs/${dialogId}${search}`
+            : `/bot/${projectId}/skill/{skillId}/dialogs/${dialogId}${search}`;
 
-        if (checkUrl(currentUri, projectId, designPageLocation)) return;
+        if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
         navigateTo(currentUri, { state: { breadcrumb } });
       } else {
         navTo(projectId, skillId, dialogId, breadcrumb);
diff --git a/Composer/packages/client/src/router.tsx b/Composer/packages/client/src/router.tsx
index 037bc9eff8..9488066c4d 100644
--- a/Composer/packages/client/src/router.tsx
+++ b/Composer/packages/client/src/router.tsx
@@ -70,6 +70,13 @@ const Routes = (props) => {
               />
             ))}
           </ProjectRouter>
+          <ProjectRouter path="/bot/:projectId/skill/:skillId">
+            <DesignPage path="dialogs/:dialogId/*" />
+            <LUPage path="language-understanding/:dialogId/*" />
+            <LGPage path="language-generation/:dialogId/*" />
+            <QnAPage path="knowledge-base/:dialogId/*" />
+            <DesignPage path="*" />
+          </ProjectRouter>
           <SettingPage path="settings/*" />
           <BotCreationFlowRouter path="projects/*" />
           <BotCreationFlowRouter path="home" />
diff --git a/Composer/packages/client/src/shell/useShell.ts b/Composer/packages/client/src/shell/useShell.ts
index 624cfc90e1..e47a8207ae 100644
--- a/Composer/packages/client/src/shell/useShell.ts
+++ b/Composer/packages/client/src/shell/useShell.ts
@@ -27,6 +27,7 @@ import {
   lgFilesState,
   luFilesState,
   rateInfoState,
+  rootBotProjectIdSelector,
 } from '../recoilModel';
 import { undoFunctionState } from '../recoilModel/undo/history';
 
@@ -78,6 +79,7 @@ export function useShell(source: EventSource, projectId: string): Shell {
   const botName = useRecoilValue(botDisplayNameState(projectId));
   const settings = useRecoilValue(settingsState(projectId));
   const flowZoomRate = useRecoilValue(rateInfoState);
+  const rootBotProjectId = useRecoilValue(rootBotProjectIdSelector);
 
   const userSettings = useRecoilValue(userSettingsState);
   const clipboardActions = useRecoilValue(clipboardActionsState);
@@ -154,7 +156,7 @@ export function useShell(source: EventSource, projectId: string): Shell {
       }
     }
 
-    focusTo(projectId, dataPath, fragment ?? '');
+    focusTo(rootBotProjectId ?? projectId, projectId, dataPath, fragment ?? '');
   }
 
   function updateFlowZoomRate(currentRate) {
diff --git a/Composer/packages/client/src/utils/navigation.ts b/Composer/packages/client/src/utils/navigation.ts
index 773e5b0c6b..49e76b7dd1 100644
--- a/Composer/packages/client/src/utils/navigation.ts
+++ b/Composer/packages/client/src/utils/navigation.ts
@@ -69,9 +69,13 @@ export function getUrlSearch(selected: string, focused: string): string {
 export function checkUrl(
   currentUri: string,
   projectId: string,
+  skillId: string | null,
   { dialogId, selected, focused, promptTab }: DesignPageLocation
 ) {
-  let lastUri = `/bot/${projectId}/dialogs/${dialogId}${getUrlSearch(selected, focused)}`;
+  let lastUri =
+    skillId == null
+      ? `/bot/${projectId}/dialogs/${dialogId}${getUrlSearch(selected, focused)}`
+      : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}${getUrlSearch(selected, focused)}`;
   if (promptTab) {
     lastUri += `#${promptTab}`;
   }
diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json
index ec843ebc05..bdbccaef8d 100644
--- a/Composer/packages/server/src/locales/en-US.json
+++ b/Composer/packages/server/src/locales/en-US.json
@@ -758,9 +758,6 @@
   "debugging_options_20e2e9da": {
     "message": "Debugging options"
   },
-  "decrement_by_step_9b6c2fa3": {
-    "message": "decrement by { step }"
-  },
   "default_language_486a558d": {
     "message": "Default language"
   },
@@ -1280,9 +1277,6 @@
   "in_the_b_create_a_trigger_b_wizard_set_the_trigger_f9b23519": {
     "message": "In the <b>Create a trigger</b> wizard, set the trigger type to <i>Activities</i> in the dropdown. Then set the <b>Activity Type</b> to <i>Greeting (ConversationUpdate activity)</i>, and click the <b>Submit</b> button."
   },
-  "increment_by_step_1cf3a88": {
-    "message": "increment by { step }"
-  },
   "input_1d1d9b8e": {
     "message": "Input"
   },
@@ -1754,9 +1748,6 @@
   "number_or_expression_55c7f9f": {
     "message": "Number or expression"
   },
-  "numeric_field_c2564f69": {
-    "message": "numeric field"
-  },
   "oauth_login_b6aa9534": {
     "message": "OAuth login"
   },
@@ -2204,8 +2195,8 @@
   "select_options_9ee7b227": {
     "message": "Select options"
   },
-  "select_property_type_5f3ab685": {
-    "message": "select property type"
+  "select_property_type_45c6e68e": {
+    "message": "Select property type"
   },
   "select_runtime_version_to_add_d63d383b": {
     "message": "Select runtime version to add"
@@ -2339,6 +2330,9 @@
   "start_command_a085f2ec": {
     "message": "Start command"
   },
+  "start_typing_kind_or_b0c305da": {
+    "message": "Start typing { kind } or"
+  },
   "state_is_state_a2b8943": {
     "message": "State is { state }"
   },
@@ -2795,6 +2789,9 @@
   "which_event_6e655d2b": {
     "message": "Which event?"
   },
+  "write_an_expression_8773ea5c": {
+    "message": "Write an expression"
+  },
   "yes_dde87d5": {
     "message": "Yes"
   },

From bf75528302fa7fe7ba0bb937c2a62dfc3e224f13 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Wed, 21 Oct 2020 13:40:58 -0700
Subject: [PATCH 18/44] fix wrong IDs in URL

---
 .../components/ProjectTree/ProjectTree.tsx    | 22 ++++++++++++-------
 .../client/src/pages/design/DesignPage.tsx    |  2 +-
 .../dispatchers/__tests__/navigation.test.tsx |  8 +++----
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 7a36603614..f1fabbd091 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -14,7 +14,12 @@ import { useRecoilValue } from 'recoil';
 import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
 import isEqual from 'lodash/isEqual';
 
-import { dispatcherState, currentProjectIdState, botProjectSpaceSelector } from '../../recoilModel';
+import {
+  dispatcherState,
+  rootBotProjectIdSelector,
+  botProjectSpaceSelector,
+  currentProjectIdState,
+} from '../../recoilModel';
 import { getFriendlyName } from '../../utils/dialogUtil';
 import { triggerNotSupported } from '../../utils/dialogValidator';
 
@@ -134,7 +139,8 @@ export const ProjectTree: React.FC<Props> = ({
     ...bot,
     hasWarnings: false,
   }));
-  const currentProjectId = useRecoilValue(currentProjectIdState);
+  // if we're in a single-bot setting, the root will be undefined, so we fall back to current
+  const rootProjectId = useRecoilValue(rootBotProjectIdSelector) ?? useRecoilValue(currentProjectIdState);
   const botProjectSpace = useRecoilValue(botProjectSpaceSelector);
 
   const notificationMap: { [projectId: string]: { [dialogId: string]: Diagnostic[] } } = {};
@@ -174,7 +180,7 @@ export const ProjectTree: React.FC<Props> = ({
   const renderBotHeader = (bot: BotInProject) => {
     const link: TreeLink = {
       displayName: bot.name,
-      projectId: currentProjectId,
+      projectId: rootProjectId,
       skillId: bot.projectId,
       isRoot: true,
       warningContent: botHasWarnings(bot) ? formatMessage('This bot has warnings') : undefined,
@@ -195,7 +201,7 @@ export const ProjectTree: React.FC<Props> = ({
           showProps
           forceIndent={bot.isRemote ? SUMMARY_ARROW_SPACE : 0}
           icon={bot.isRemote ? icons.EXTERNAL_SKILL : icons.BOT}
-          isSubItemActive={isEqual(link, selectedLink)}
+          isActive={isEqual(link, selectedLink)}
           link={link}
           menu={[{ label: formatMessage('Create/edit skill manifest'), onClick: () => {} }]}
         />
@@ -217,7 +223,7 @@ export const ProjectTree: React.FC<Props> = ({
       dialogId: dialog.id,
       displayName: dialog.displayName,
       isRoot: dialog.isRoot,
-      projectId: currentProjectId,
+      projectId: rootProjectId,
       skillId: skillId,
       errorContent,
       warningContent,
@@ -237,7 +243,7 @@ export const ProjectTree: React.FC<Props> = ({
           showProps
           forceIndent={showTriggers ? 0 : SUMMARY_ARROW_SPACE}
           icon={icons.DIALOG}
-          isSubItemActive={isEqual(link, selectedLink)}
+          isActive={isEqual(link, selectedLink)}
           link={link}
           menu={[
             {
@@ -257,7 +263,7 @@ export const ProjectTree: React.FC<Props> = ({
   const renderTrigger = (projectId: string, item: any, dialog: DialogInfo): React.ReactNode => {
     // NOTE: put the form-dialog detection here when it's ready
     const link: TreeLink = {
-      projectId: currentProjectId,
+      projectId: rootProjectId,
       skillId: projectId,
       dialogId: dialog.id,
       trigger: item.index,
@@ -397,7 +403,7 @@ export const ProjectTree: React.FC<Props> = ({
           {onAllSelected != null ? (
             <TreeItem
               forceIndent={SUMMARY_ARROW_SPACE}
-              link={{ displayName: formatMessage('All'), projectId: currentProjectId, isRoot: true }}
+              link={{ displayName: formatMessage('All'), projectId: rootProjectId, isRoot: true }}
               onSelect={onAllSelected}
             />
           ) : null}
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 7939d0d482..a05842bd7d 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -625,7 +625,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
                         schema={schemas.sdk.content}
                         value={currentDialog.content || undefined}
                         onChange={(data) => {
-                          updateDialog({ id: currentDialog.id, content: data, projectId });
+                          updateDialog({ id: currentDialog.id, content: data, projectId: skillId ?? projectId });
                         }}
                       />
                     ) : withWarning ? (
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
index 0ad85f9161..d3b6a5d51c 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
@@ -230,7 +230,7 @@ describe('navigation dispatcher', () => {
   describe('focusTo', () => {
     it('goes to the same page with no arguments', async () => {
       await act(async () => {
-        await dispatcher.focusTo(projectId, '', '');
+        await dispatcher.focusTo(projectId, null, '', '');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=a`);
     });
@@ -238,7 +238,7 @@ describe('navigation dispatcher', () => {
     it('goes to a focused page', async () => {
       mockGetSelected.mockReturnValueOnce('select');
       await act(async () => {
-        await dispatcher.focusTo(projectId, 'focus', '');
+        await dispatcher.focusTo(projectId, null, 'focus', '');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=select&focused=focus`);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
@@ -248,7 +248,7 @@ describe('navigation dispatcher', () => {
     it('goes to a focused page with fragment', async () => {
       mockGetSelected.mockReturnValueOnce('select');
       await act(async () => {
-        await dispatcher.focusTo(projectId, 'focus', 'fragment');
+        await dispatcher.focusTo(projectId, null, 'focus', 'fragment');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=select&focused=focus#fragment`);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
@@ -259,7 +259,7 @@ describe('navigation dispatcher', () => {
       mockCheckUrl.mockReturnValue(true);
       mockGetSelected.mockReturnValueOnce('select');
       await act(async () => {
-        await dispatcher.focusTo(projectId, 'focus', 'fragment');
+        await dispatcher.focusTo(projectId, null, 'focus', 'fragment');
       });
       expect(mockNavigateTo).not.toBeCalled();
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);

From b32dffffbf7a1b283e64cfa3103d6b598e14c2c4 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 22 Oct 2020 10:56:16 -0700
Subject: [PATCH 19/44] yarn.lock rebuild

---
 .../src/components/ProjectTree/ProjectTree.tsx      |  1 +
 extensions/azurePublish/yarn.lock                   | 13 +++----------
 extensions/localPublish/yarn.lock                   |  3 +++
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index f1fabbd091..eb8e11acf3 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -139,6 +139,7 @@ export const ProjectTree: React.FC<Props> = ({
     ...bot,
     hasWarnings: false,
   }));
+
   // if we're in a single-bot setting, the root will be undefined, so we fall back to current
   const rootProjectId = useRecoilValue(rootBotProjectIdSelector) ?? useRecoilValue(currentProjectIdState);
   const botProjectSpace = useRecoilValue(botProjectSpaceSelector);
diff --git a/extensions/azurePublish/yarn.lock b/extensions/azurePublish/yarn.lock
index 2770d6c502..bc45364ad0 100644
--- a/extensions/azurePublish/yarn.lock
+++ b/extensions/azurePublish/yarn.lock
@@ -898,11 +898,6 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
-base64-js@^1.0.2:
-  version "1.3.1"
-  resolved "https://botbuilder.myget.org/F/botbuilder-v4-js-daily/npm/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
-  integrity sha1-WOzoy3XdB+ce0IxzarxfrE2/jfE=
-
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -969,6 +964,9 @@ buffer@^5.1.0, buffer@^5.5.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
   integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
 
 cardinal@^2.1.1:
   version "2.1.1"
@@ -1652,11 +1650,6 @@ hyperlinker@^1.0.0:
   resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e"
   integrity sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ==
 
-ieee754@^1.1.4:
-  version "1.1.13"
-  resolved "https://botbuilder.myget.org/F/botbuilder-v4-js-daily/npm/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
-  integrity sha1-7BaFWOlaoYH9h9N/VcMrvLZwi4Q=
-
 ignore@^5.1.1, ignore@^5.1.4:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
diff --git a/extensions/localPublish/yarn.lock b/extensions/localPublish/yarn.lock
index e2b9dd013c..00ded2c015 100644
--- a/extensions/localPublish/yarn.lock
+++ b/extensions/localPublish/yarn.lock
@@ -212,6 +212,9 @@ buffer@^5.1.0, buffer@^5.5.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
   integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
 
 chownr@^2.0.0:
   version "2.0.0"

From bb61b65447310b4641d72ebfd92f25ed908085fd Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 22 Oct 2020 13:10:27 -0700
Subject: [PATCH 20/44] update yarn.lock files

---
 extensions/azurePublish/yarn.lock | 10 ++++++++++
 extensions/localPublish/yarn.lock | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/extensions/azurePublish/yarn.lock b/extensions/azurePublish/yarn.lock
index bc45364ad0..0c7da6c2ae 100644
--- a/extensions/azurePublish/yarn.lock
+++ b/extensions/azurePublish/yarn.lock
@@ -898,6 +898,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-js@^1.0.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
+  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
+
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
@@ -1650,6 +1655,11 @@ hyperlinker@^1.0.0:
   resolved "https://registry.yarnpkg.com/hyperlinker/-/hyperlinker-1.0.0.tgz#23dc9e38a206b208ee49bc2d6c8ef47027df0c0e"
   integrity sha512-Ty8UblRWFEcfSuIaajM34LdPXIhbs1ajEX/BBPv24J+enSVaEVY63xQ6lTO9VRYS5LAoghIG0IDJ+p+IPzKUQQ==
 
+ieee754@^1.1.4:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
+  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
+
 ignore@^5.1.1, ignore@^5.1.4:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
diff --git a/extensions/localPublish/yarn.lock b/extensions/localPublish/yarn.lock
index 00ded2c015..6564cb95f9 100644
--- a/extensions/localPublish/yarn.lock
+++ b/extensions/localPublish/yarn.lock
@@ -179,6 +179,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-js@^1.0.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
+  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
+
 bl@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.3.tgz#12d6287adc29080e22a705e5764b2a9522cdc489"
@@ -373,6 +378,11 @@ graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+ieee754@^1.1.4:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
+  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
+
 ignore@^5.1.4:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"

From 72ce95b125cdcdd9efb483f379e509eb0e5d1c2e Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 22 Oct 2020 16:33:00 -0700
Subject: [PATCH 21/44] fix action card links

---
 Composer/packages/client/src/pages/design/DesignPage.tsx    | 1 +
 .../client/src/recoilModel/dispatchers/navigation.ts        | 6 +++---
 Composer/packages/client/src/shell/useShell.ts              | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index dd1f9d28f5..bc563d10cb 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -217,6 +217,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
 
       //make sure focusPath always valid
       const data = getDialogData(dialogMap, dialogId, getFocusPath(selected, focused));
+
       if (typeof data === 'undefined') {
         const { id: foundId } = dialogs.find(({ id }) => id === dialogId) || dialogs.find(({ isRoot }) => isRoot) || {};
         /**
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index ab0d82d6f1..7fc4cf1979 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -112,8 +112,8 @@ export const navigationDispatcher = () => {
       fragment: string
     ) => {
       set(currentProjectIdState, projectId);
-      const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
-      const breadcrumb = await snapshot.getPromise(breadcrumbState(projectId));
+      const designPageLocation = await snapshot.getPromise(designPageLocationState(skillId ?? projectId));
+      const breadcrumb = await snapshot.getPromise(breadcrumbState(skillId ?? projectId));
       let updatedBreadcrumb = [...breadcrumb];
       const { dialogId, selected } = designPageLocation;
 
@@ -123,7 +123,7 @@ export const navigationDispatcher = () => {
           : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}`;
 
       if (focusPath) {
-        const dialogs = await snapshot.getPromise(dialogsState(projectId));
+        const dialogs = await snapshot.getPromise(dialogsState(skillId ?? projectId));
         const currentDialog = dialogs.find(({ id }) => id === dialogId);
         const encodedFocusPath = encodeArrayPathToDesignerPath(currentDialog?.content, focusPath);
 
diff --git a/Composer/packages/client/src/shell/useShell.ts b/Composer/packages/client/src/shell/useShell.ts
index e47a8207ae..d38e4f23ce 100644
--- a/Composer/packages/client/src/shell/useShell.ts
+++ b/Composer/packages/client/src/shell/useShell.ts
@@ -137,11 +137,11 @@ export function useShell(source: EventSource, projectId: string): Shell {
   }
 
   function navigationTo(path) {
-    navTo(projectId, null, path, breadcrumb);
+    navTo(rootBotProjectId ?? projectId, projectId, path, breadcrumb);
   }
 
   function focusEvent(subPath) {
-    selectTo(projectId, null, null, subPath);
+    selectTo(rootBotProjectId ?? projectId, projectId, dialogId, subPath);
   }
 
   function focusSteps(subPaths: string[] = [], fragment?: string) {

From 0d13f7873529b8502787b6328d97c969f6f5988d Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Fri, 23 Oct 2020 12:58:48 -0700
Subject: [PATCH 22/44] Update DesignPage.tsx

---
 .../client/src/pages/design/DesignPage.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index bc563d10cb..12b50ec624 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -116,17 +116,17 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const { location, dialogId, projectId = '', skillId = null } = props;
   const userSettings = useRecoilValue(userSettingsState);
 
-  const qnaFiles = useRecoilValue(qnaFilesState(projectId));
-  const schemas = useRecoilValue(schemasState(projectId));
+  const qnaFiles = useRecoilValue(qnaFilesState(skillId ?? projectId));
+  const schemas = useRecoilValue(schemasState(skillId ?? projectId));
   const dialogs = useRecoilValue(validateDialogSelectorFamily(skillId ?? projectId));
-  const displaySkillManifest = useRecoilValue(displaySkillManifestState(projectId));
-  const breadcrumb = useRecoilValue(breadcrumbState(projectId));
-  const focusPath = useRecoilValue(focusPathState(projectId));
-  const showCreateDialogModal = useRecoilValue(showCreateDialogModalState(projectId));
-  const showAddSkillDialogModal = useRecoilValue(showAddSkillDialogModalState(projectId));
-  const locale = useRecoilValue(localeState(projectId));
-  const undoFunction = useRecoilValue(undoFunctionState(projectId));
-  const undoVersion = useRecoilValue(undoVersionState(projectId));
+  const displaySkillManifest = useRecoilValue(displaySkillManifestState(skillId ?? projectId));
+  const breadcrumb = useRecoilValue(breadcrumbState(skillId ?? projectId));
+  const focusPath = useRecoilValue(focusPathState(skillId ?? projectId));
+  const showCreateDialogModal = useRecoilValue(showCreateDialogModalState(skillId ?? projectId));
+  const showAddSkillDialogModal = useRecoilValue(showAddSkillDialogModalState(skillId ?? projectId));
+  const locale = useRecoilValue(localeState(skillId ?? projectId));
+  const undoFunction = useRecoilValue(undoFunctionState(skillId ?? projectId));
+  const undoVersion = useRecoilValue(undoVersionState(skillId ?? projectId));
   const rootProjectId = useRecoilValue(rootBotProjectIdSelector) ?? projectId;
 
   const { undo, redo, canRedo, canUndo, commitChanges, clearUndo } = undoFunction;

From 03cc02953336d86c2bb871d2dffd4b02397e0834 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Fri, 23 Oct 2020 13:40:56 -0700
Subject: [PATCH 23/44] fix unit test

---
 .../client/__tests__/utils/navigation.test.ts | 27 +++++++++++++++++--
 .../__tests__/botProjectFile.test.tsx         |  4 ++-
 .../bot1/recognizers/cross-train.config.json  |  1 +
 3 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 Composer/packages/server/src/__mocks__/samplebots/bot1/recognizers/cross-train.config.json

diff --git a/Composer/packages/client/__tests__/utils/navigation.test.ts b/Composer/packages/client/__tests__/utils/navigation.test.ts
index c28892c8aa..100e4c12d3 100644
--- a/Composer/packages/client/__tests__/utils/navigation.test.ts
+++ b/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]',
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/botProjectFile.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/botProjectFile.test.tsx
index 8d24ddeb21..f6e49a076a 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/botProjectFile.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/botProjectFile.test.tsx
@@ -127,7 +127,9 @@ describe('Bot Project File dispatcher', () => {
       dispatcher.addLocalSkillToBotProjectFile(testSkillId);
     });
 
-    expect(renderedComponent.current.botProjectFile.content.skills.todoSkill.workspace).toBe('../Todo-Skill');
+    expect(renderedComponent.current.botProjectFile.content.skills.todoSkill.workspace).toMatch(
+      /\.\.(\/|\\)Todo-Skill/
+    );
     expect(renderedComponent.current.botProjectFile.content.skills.todoSkill.remote).toBeFalsy();
   });
 
diff --git a/Composer/packages/server/src/__mocks__/samplebots/bot1/recognizers/cross-train.config.json b/Composer/packages/server/src/__mocks__/samplebots/bot1/recognizers/cross-train.config.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/Composer/packages/server/src/__mocks__/samplebots/bot1/recognizers/cross-train.config.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file

From faaa7caae4ec0c245f9688723815f4c8a77e456a Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Mon, 26 Oct 2020 14:43:40 -0700
Subject: [PATCH 24/44] add unit test to ExpandableNode

---
 .../components/expandableNode.test.tsx        | 33 +++++++++++++++++++
 .../components/ProjectTree/ExpandableNode.tsx |  9 ++++-
 extensions/vacore/yarn.lock                   |  3 ++
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 Composer/packages/client/__tests__/components/expandableNode.test.tsx

diff --git a/Composer/packages/client/__tests__/components/expandableNode.test.tsx b/Composer/packages/client/__tests__/components/expandableNode.test.tsx
new file mode 100644
index 0000000000..4818afff10
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
index cf9d64f5df..56df97ed41 100644
--- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
@@ -41,7 +41,14 @@ export const ExpandableNode = ({ children, summary, detailsRef, depth = 0 }: Pro
     <div css={nodeStyle(depth)} data-testid="dialog">
       <details ref={detailsRef} 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}
diff --git a/extensions/vacore/yarn.lock b/extensions/vacore/yarn.lock
index d1cbceaef8..260f60503c 100644
--- a/extensions/vacore/yarn.lock
+++ b/extensions/vacore/yarn.lock
@@ -112,6 +112,9 @@ buffer@^5.1.0, buffer@^5.5.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
   integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
 
 compress-commons@^2.1.1:
   version "2.1.1"

From 399479c53072ef5cbf5a216b46c9f882caebd34a Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Mon, 26 Oct 2020 16:28:40 -0700
Subject: [PATCH 25/44] update ProjectTree unit tests

---
 .../__tests__/components/projecttree.test.tsx | 22 +++++++-
 .../client/__tests__/mocks/sampleDialog.ts    | 54 +++++++++++++++++++
 .../components/ProjectTree/ProjectTree.tsx    |  3 +-
 .../packages/server/src/locales/en-US.json    |  6 +--
 extensions/vacore/yarn.lock                   | 10 ++++
 5 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index c287e5e39a..9412f1e955 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/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(
diff --git a/Composer/packages/client/__tests__/mocks/sampleDialog.ts b/Composer/packages/client/__tests__/mocks/sampleDialog.ts
index a63b624a70..bd3cb1f1e6 100644
--- a/Composer/packages/client/__tests__/mocks/sampleDialog.ts
+++ b/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: [],
+};
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index ba97fe1cd4..a737d32985 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -8,7 +8,6 @@ import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import cloneDeep from 'lodash/cloneDeep';
 import formatMessage from 'format-message';
-import { extractSchemaProperties, groupTriggersByPropertyReference } from '@bfc/indexers';
 import { DialogInfo, ITrigger, Diagnostic, DiagnosticSeverity } from '@bfc/shared';
 import debounce from 'lodash/debounce';
 import { useRecoilValue } from 'recoil';
@@ -370,7 +369,7 @@ export const ProjectTree: React.FC<Props> = ({
 
   const renderTriggerGroupHeader = (displayName: string, dialog: DialogInfo, projectId: string) => {
     const link: TreeLink = {
-      dialogName: dialog.id,
+      dialogId: dialog.id,
       displayName,
       isRoot: false,
       projectId: projectId,
diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json
index d5235726b6..ffd9da57ad 100644
--- a/Composer/packages/server/src/locales/en-US.json
+++ b/Composer/packages/server/src/locales/en-US.json
@@ -611,9 +611,6 @@
   "could_not_connect_to_storage_50411de0": {
     "message": "Could not connect to storage."
   },
-  "could_not_init_plugin_1f1c29cd": {
-    "message": "Could not init plugin"
-  },
   "couldn_t_complete_the_update_a337a359": {
     "message": "Couldn''t complete the update:"
   },
@@ -1163,6 +1160,9 @@
   "form_title_baf85c7e": {
     "message": "form title"
   },
+  "form_wide_operations_1c1a73eb": {
+    "message": "form-wide operations"
+  },
   "forms_380ab2ae": {
     "message": "Forms"
   },
diff --git a/extensions/vacore/yarn.lock b/extensions/vacore/yarn.lock
index 260f60503c..9bdde5a153 100644
--- a/extensions/vacore/yarn.lock
+++ b/extensions/vacore/yarn.lock
@@ -79,6 +79,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base64-js@^1.0.2:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
+  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
+
 bl@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.2.tgz#52b71e9088515d0606d9dd9cc7aa48dc1f98e73a"
@@ -272,6 +277,11 @@ graceful-fs@^4.2.0:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+ieee754@^1.1.4:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
+  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
+
 ignore@^5.1.4:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"

From 398988fe25a1ee6f45c03b3b763a466b328512d5 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Tue, 27 Oct 2020 09:08:53 -0700
Subject: [PATCH 26/44] Update ExpandableNode.tsx

---
 .../src/components/ProjectTree/ExpandableNode.tsx  | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
index 56df97ed41..fb7bae5a9e 100644
--- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
+++ b/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`
+  details:not([open]) > summary::-webkit-details-marker {
+    transform: scaleX(${TRIANGLE_SCALE});
+  }
+
+  details[open] > summary::-webkit-details-marker {
+    transform: scaleY(${TRIANGLE_SCALE});
+  }
+`;
+
 export const ExpandableNode = ({ children, summary, detailsRef, depth = 0 }: Props) => {
   const [isExpanded, setExpanded] = useState(true);
 
@@ -39,7 +51,7 @@ 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}

From 1afebb708c3f7a0c3fd063178cde698ecf5d1dd2 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Tue, 27 Oct 2020 10:48:56 -0700
Subject: [PATCH 27/44] add rootProjectId to triggerApi

---
 .../packages/client/src/shell/triggerApi.ts   | 19 +++++++++++++------
 extensions/pvaPublish/yarn.lock               |  6 ++++++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/Composer/packages/client/src/shell/triggerApi.ts b/Composer/packages/client/src/shell/triggerApi.ts
index 44c51ce5d2..f7a59a87bc 100644
--- a/Composer/packages/client/src/shell/triggerApi.ts
+++ b/Composer/packages/client/src/shell/triggerApi.ts
@@ -18,7 +18,13 @@ import get from 'lodash/get';
 
 import { useResolvers } from '../hooks/useResolver';
 import { onChooseIntentKey, generateNewDialog, intentTypeKey, qnaMatcherKey } from '../utils/dialogUtil';
-import { schemasState, lgFilesState, dialogsSelectorFamily, localeState } from '../recoilModel';
+import {
+  schemasState,
+  lgFilesState,
+  dialogsSelectorFamily,
+  localeState,
+  rootBotProjectIdSelector,
+} from '../recoilModel';
 import { Dispatcher } from '../recoilModel/dispatchers';
 
 import { dispatcherState } from './../recoilModel/DispatcherWrapper';
@@ -35,7 +41,7 @@ const defaultQnATriggerData = {
 };
 
 function createTriggerApi(
-  state: { projectId; schemas; dialogs; locale; lgFiles },
+  state: { rootProjectId; projectId; schemas; dialogs; locale; lgFiles },
   dispatchers: Dispatcher, //TODO
   luFileResolver: (id: string) => LuFile | undefined,
   lgFileResolver: (id: string) => LgFile | undefined,
@@ -55,7 +61,7 @@ function createTriggerApi(
     const lgFile = lgFileResolver(id);
     const dialog = dialogResolver(id);
     const { createLuIntent, createLgTemplates, updateDialog, selectTo } = dispatchers;
-    const { projectId, schemas, dialogs, locale, lgFiles } = state;
+    const { rootProjectId, projectId, schemas, dialogs, locale, lgFiles } = state;
     if (!luFile) throw new Error(`lu file ${id} not found`);
     if (!lgFile) throw new Error(`lg file ${id} not found`);
     if (!dialog) throw new Error(`dialog ${id} not found`);
@@ -112,7 +118,7 @@ function createTriggerApi(
     };
     await updateDialog(dialogPayload);
     if (autoSelected) {
-      selectTo(projectId, null, null, `triggers[${index}]`);
+      selectTo(rootProjectId, projectId, newDialog.id, `triggers[${index}]`);
     }
   };
 
@@ -155,6 +161,7 @@ export function useTriggerApi(projectId: string) {
   const lgFiles = useRecoilValue(lgFilesState(projectId));
   const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const locale = useRecoilValue(localeState(projectId));
+  const rootProjectId = useRecoilValue(rootBotProjectIdSelector);
   const { deleteActions } = useActionApi(projectId);
   const { removeLuIntent } = useLuApi(projectId);
 
@@ -162,7 +169,7 @@ export function useTriggerApi(projectId: string) {
   const { luFileResolver, lgFileResolver, dialogResolver } = useResolvers(projectId);
   const [api, setApi] = useState(
     createTriggerApi(
-      { projectId, schemas, dialogs, locale, lgFiles },
+      { rootProjectId, projectId, schemas, dialogs, locale, lgFiles },
       dispatchers,
       luFileResolver,
       lgFileResolver,
@@ -174,7 +181,7 @@ export function useTriggerApi(projectId: string) {
 
   useEffect(() => {
     const newApi = createTriggerApi(
-      { projectId, schemas, dialogs, locale, lgFiles },
+      { rootProjectId, projectId, schemas, dialogs, locale, lgFiles },
       dispatchers,
       luFileResolver,
       lgFileResolver,
diff --git a/extensions/pvaPublish/yarn.lock b/extensions/pvaPublish/yarn.lock
index 1c4fcd7cb0..de99390695 100644
--- a/extensions/pvaPublish/yarn.lock
+++ b/extensions/pvaPublish/yarn.lock
@@ -989,6 +989,7 @@
   version "1.0.0"
   dependencies:
     "@botframework-composer/types" "*"
+    "@types/debug" "^4.1.5"
     "@types/passport" "^1.0.3"
     debug "^4.1.1"
     fs-extra "^9.0.1"
@@ -1410,6 +1411,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/debug@^4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
+  integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==
+
 "@types/express-serve-static-core@*":
   version "4.17.13"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.13.tgz#d9af025e925fc8b089be37423b8d1eac781be084"

From f7ee2c6de762c9ba93804b5366f88be3eeeead41 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Tue, 27 Oct 2020 13:23:16 -0700
Subject: [PATCH 28/44] fix creation and deletion bugs

---
 .../components/ProjectTree/ProjectTree.tsx    | 27 ++++++++++++-------
 .../client/src/pages/design/DesignPage.tsx    | 15 ++++++++++-
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index a737d32985..fefe9dcecc 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { jsx, css } from '@emotion/core';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
@@ -12,8 +12,8 @@ import { DialogInfo, ITrigger, Diagnostic, DiagnosticSeverity } from '@bfc/share
 import debounce from 'lodash/debounce';
 import { useRecoilValue } from 'recoil';
 import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
-import isEqual from 'lodash/isEqual';
 import { extractSchemaProperties, groupTriggersByPropertyReference, NoGroupingTriggerGroupName } from '@bfc/indexers';
+import isMatch from 'lodash/isMatch';
 
 import {
   dispatcherState,
@@ -43,7 +43,6 @@ const root = css`
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  overflow-y: auto;
   overflow-x: hidden;
   .ms-List-cell {
     min-height: 36px;
@@ -62,9 +61,6 @@ const icons = {
 };
 
 const tree = css`
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
   height: 100%;
   label: tree;
 `;
@@ -135,6 +131,7 @@ type Props = {
   navLinks?: TreeLink[];
   onDeleteTrigger: (id: string, index: number) => void;
   onDeleteDialog: (id: string) => void;
+  defaultSelected?: Partial<TreeLink>;
 };
 
 export const ProjectTree: React.FC<Props> = ({
@@ -144,12 +141,13 @@ export const ProjectTree: React.FC<Props> = ({
   onDeleteDialog,
   onDeleteTrigger,
   onSelect,
+  defaultSelected,
 }) => {
   const { onboardingAddCoachMarkRef, navigateToFormDialogSchema } = useRecoilValue(dispatcherState);
 
   const [filter, setFilter] = useState('');
   const formDialogComposerFeatureEnabled = useFeatureFlag('FORM_DIALOG');
-  const [selectedLink, setSelectedLink] = useState<TreeLink | undefined>();
+  const [selectedLink, setSelectedLink] = useState<Partial<TreeLink> | undefined>(defaultSelected);
   const delayedSetFilter = debounce((newValue) => setFilter(newValue), 1000);
   const addMainDialogRef = useCallback((mainDialog) => onboardingAddCoachMarkRef({ mainDialog }), []);
   const projectCollection = useRecoilValue<BotInProject[]>(botProjectSpaceSelector).map((bot) => ({
@@ -157,6 +155,10 @@ export const ProjectTree: React.FC<Props> = ({
     hasWarnings: false,
   }));
 
+  useEffect(() => {
+    setSelectedLink(defaultSelected);
+  }, [defaultSelected]);
+
   // if we're in a single-bot setting, the root will be undefined, so we fall back to current
   const rootProjectId = useRecoilValue(rootBotProjectIdSelector) ?? useRecoilValue(currentProjectIdState);
   const botProjectSpace = useRecoilValue(botProjectSpaceSelector);
@@ -204,6 +206,11 @@ export const ProjectTree: React.FC<Props> = ({
     return bot.dialogs.some(dialogHasErrors(bot.projectId));
   };
 
+  const isTriggerMatch = (link1?: Partial<TreeLink>, link2?: Partial<TreeLink>) => {
+    if (link1 == null || link2 == null) return false;
+    return isMatch(link1, link2);
+  };
+
   const handleOnSelect = (link: TreeLink) => {
     setSelectedLink(link);
     onSelect(link);
@@ -233,7 +240,7 @@ export const ProjectTree: React.FC<Props> = ({
           showProps
           forceIndent={bot.isRemote ? SUMMARY_ARROW_SPACE : 0}
           icon={bot.isRemote ? icons.EXTERNAL_SKILL : icons.BOT}
-          isActive={isEqual(link, selectedLink)}
+          isActive={isTriggerMatch(link, selectedLink)}
           link={link}
           menu={[{ label: formatMessage('Create/edit skill manifest'), onClick: () => {} }]}
         />
@@ -279,7 +286,7 @@ export const ProjectTree: React.FC<Props> = ({
           showProps
           forceIndent={showTriggers ? 0 : SUMMARY_ARROW_SPACE}
           icon={isFormDialog ? icons.FORM_DIALOG : icons.DIALOG}
-          isActive={isEqual(link, selectedLink)}
+          isActive={isTriggerMatch(link, selectedLink)}
           link={link}
           menu={[
             {
@@ -325,7 +332,7 @@ export const ProjectTree: React.FC<Props> = ({
         dialogName={dialog.displayName}
         forceIndent={48}
         icon={icons.TRIGGER}
-        isActive={isEqual(link, selectedLink)}
+        isActive={isTriggerMatch(link, selectedLink)}
         link={link}
         menu={[
           {
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 581e722c0f..9ab8e10179 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -536,7 +536,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     const content = deleteTrigger(dialogs, dialogId, index, (trigger) => triggerApi.deleteTrigger(dialogId, trigger));
 
     if (content) {
-      updateDialog({ id: dialogId, content, projectId });
+      updateDialog({ id: dialogId, content, projectId: skillId ?? projectId });
       const match = /\[(\d+)\]/g.exec(selected);
       const current = match && match[1];
       if (!current) return;
@@ -584,11 +584,24 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   const selectedTrigger = currentDialog?.triggers.find((t) => t.id === selected);
   const withWarning = triggerNotSupported(currentDialog, selectedTrigger);
 
+  const parseTriggerId = (triggerId: string | undefined): number | undefined => {
+    if (triggerId == null) return undefined;
+    const indexString = triggerId.match(/\d+/)?.[0];
+    if (indexString == null) return undefined;
+    return parseInt(indexString);
+  };
+
   return (
     <React.Fragment>
       <div css={pageRoot}>
         <LeftRightSplit initialLeftGridWidth="20%" minLeftPixels={200} minRightPixels={800}>
           <ProjectTree
+            defaultSelected={{
+              projectId,
+              skillId: skillId ?? undefined,
+              dialogId,
+              trigger: parseTriggerId(selectedTrigger?.id),
+            }}
             onDeleteDialog={handleDeleteDialog}
             onDeleteTrigger={handleDeleteTrigger}
             onSelect={handleSelect}

From 360e98bd7f7ecb247ea5eb87126d2155e2a868aa Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Tue, 27 Oct 2020 14:04:32 -0700
Subject: [PATCH 29/44] change mocks folder name

---
 .../client/__tests__/{mocks => __mocks__}/sampleDialog.ts       | 0
 .../packages/client/__tests__/{mocks => __mocks__}/worker.ts    | 0
 Composer/packages/client/__tests__/components/design.test.tsx   | 2 +-
 .../packages/client/__tests__/components/projecttree.test.tsx   | 2 +-
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename Composer/packages/client/__tests__/{mocks => __mocks__}/sampleDialog.ts (100%)
 rename Composer/packages/client/__tests__/{mocks => __mocks__}/worker.ts (100%)

diff --git a/Composer/packages/client/__tests__/mocks/sampleDialog.ts b/Composer/packages/client/__tests__/__mocks__/sampleDialog.ts
similarity index 100%
rename from Composer/packages/client/__tests__/mocks/sampleDialog.ts
rename to Composer/packages/client/__tests__/__mocks__/sampleDialog.ts
diff --git a/Composer/packages/client/__tests__/mocks/worker.ts b/Composer/packages/client/__tests__/__mocks__/worker.ts
similarity index 100%
rename from Composer/packages/client/__tests__/mocks/worker.ts
rename to Composer/packages/client/__tests__/__mocks__/worker.ts
diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index aa4ad6edf5..278106ef5f 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { fireEvent } from '@botframework-composer/test-utils';
 
 import { renderWithRecoil } from '../testUtils';
-import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
+import { SAMPLE_DIALOG } from '../__mocks__/sampleDialog';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
 import { CreateDialogModal } from '../../src/pages/design/createDialogModal';
diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index 9412f1e955..0603440de4 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -6,7 +6,7 @@ import { fireEvent } from '@botframework-composer/test-utils';
 
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { renderWithRecoil } from '../testUtils';
-import { SAMPLE_DIALOG, SAMPLE_DIALOG_2 } from '../mocks/sampleDialog';
+import { SAMPLE_DIALOG, SAMPLE_DIALOG_2 } from '../__mocks__/sampleDialog';
 import { dialogsSelectorFamily, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
 
 const projectId = '12345.6789';

From 3406a933f017a301c524886fc8b6a7bb06ffdcc4 Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Tue, 27 Oct 2020 15:27:17 -0700
Subject: [PATCH 30/44] Load design page only after skill project is loaded

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 Composer/packages/client/src/router.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/Composer/packages/client/src/router.tsx b/Composer/packages/client/src/router.tsx
index 9488066c4d..fda81b41a4 100644
--- a/Composer/packages/client/src/router.tsx
+++ b/Composer/packages/client/src/router.tsx
@@ -104,7 +104,7 @@ const projectStyle = css`
   label: ProjectRouter;
 `;
 
-const ProjectRouter: React.FC<RouteComponentProps<{ projectId: string }>> = (props) => {
+const ProjectRouter: React.FC<RouteComponentProps<{ projectId: string; skillId: string }>> = (props) => {
   const { projectId = '' } = props;
   const schemas = useRecoilValue(schemasState(projectId));
   const { fetchProjectById } = useRecoilValue(dispatcherState);
@@ -126,7 +126,11 @@ const ProjectRouter: React.FC<RouteComponentProps<{ projectId: string }>> = (pro
   }, [schemas, projectId]);
 
   if (props.projectId && botProjects.includes(props.projectId)) {
-    return <div css={projectStyle}>{props.children}</div>;
+    if (props.skillId && !botProjects.includes(props.skillId)) {
+      return <LoadingSpinner />;
+    } else {
+      return <div css={projectStyle}>{props.children}</div>;
+    }
   }
   return <LoadingSpinner />;
 };

From 8f3573223fbdb035623ec11bdf4428c884b84d85 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Tue, 27 Oct 2020 15:42:11 -0700
Subject: [PATCH 31/44] fixes from CR

---
 .../src/components/ProjectTree/ExpandableNode.tsx    |  4 ++--
 .../client/src/recoilModel/dispatchers/navigation.ts | 12 +++++++-----
 Composer/packages/client/src/shell/useShell.ts       |  6 ++++--
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
index fb7bae5a9e..bd3baefe10 100644
--- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx
@@ -26,11 +26,11 @@ const nodeStyle = (depth: number) => css`
 const TRIANGLE_SCALE = 0.6;
 
 const detailsStyle = css`
-  details:not([open]) > summary::-webkit-details-marker {
+  &:not([open]) > summary::-webkit-details-marker {
     transform: scaleX(${TRIANGLE_SCALE});
   }
 
-  details[open] > summary::-webkit-details-marker {
+  &[open] > summary::-webkit-details-marker {
     transform: scaleY(${TRIANGLE_SCALE});
   }
 `;
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index fd9dddfc04..2f0955cbc1 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -9,7 +9,7 @@ import cloneDeep from 'lodash/cloneDeep';
 
 import { currentProjectIdState } from '../atoms';
 import { encodeArrayPathToDesignerPath } from '../../utils/convertUtils/designerPathEncoder';
-import { dialogsSelectorFamily } from '../selectors';
+import { dialogsSelectorFamily, rootBotProjectIdSelector } from '../selectors';
 
 import { createSelectedPath, getSelected } from './../../utils/dialogUtil';
 import { BreadcrumbItem } from './../../recoilModel/types';
@@ -51,10 +51,12 @@ export const navigationDispatcher = () => {
   const navTo = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
       projectId: string,
-      skillId: string | null,
       dialogId: string,
       breadcrumb: BreadcrumbItem[] = []
     ) => {
+      const rootBotProjectId = await snapshot.getPromise(rootBotProjectIdSelector);
+      if (rootBotProjectId == null) return;
+
       const dialogs = await snapshot.getPromise(dialogsSelectorFamily(projectId));
       const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
       const updatedBreadcrumb = cloneDeep(breadcrumb);
@@ -72,9 +74,9 @@ export const navigationDispatcher = () => {
         }
       }
 
-      const currentUri = convertPathToUrl(projectId, skillId, dialogId, path);
+      const currentUri = convertPathToUrl(rootBotProjectId, projectId, dialogId, path);
 
-      if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
+      if (checkUrl(currentUri, rootBotProjectId, projectId, designPageLocation)) return;
 
       navigateTo(currentUri, { state: { breadcrumb: updatedBreadcrumb } });
     }
@@ -174,7 +176,7 @@ export const navigationDispatcher = () => {
         if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
         navigateTo(currentUri, { state: { breadcrumb } });
       } else {
-        navTo(projectId, skillId, dialogId, breadcrumb);
+        navTo(skillId ?? projectId, dialogId, breadcrumb);
       }
     }
   );
diff --git a/Composer/packages/client/src/shell/useShell.ts b/Composer/packages/client/src/shell/useShell.ts
index f047288bd5..61f23afeae 100644
--- a/Composer/packages/client/src/shell/useShell.ts
+++ b/Composer/packages/client/src/shell/useShell.ts
@@ -137,11 +137,13 @@ export function useShell(source: EventSource, projectId: string): Shell {
   }
 
   function navigationTo(path) {
-    navTo(rootBotProjectId ?? projectId, projectId, path, breadcrumb);
+    if (rootBotProjectId == null) return;
+    navTo(projectId, path, breadcrumb);
   }
 
   function focusEvent(subPath) {
-    selectTo(rootBotProjectId ?? projectId, projectId, dialogId, subPath);
+    if (rootBotProjectId == null) return;
+    selectTo(rootBotProjectId, projectId, dialogId, subPath);
   }
 
   function focusSteps(subPaths: string[] = [], fragment?: string) {

From e3fa82bf641d06a7ad5e6e0e9095c6f2bf67b9e2 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Wed, 28 Oct 2020 09:06:47 -0700
Subject: [PATCH 32/44] fix more tests

---
 .../__tests__/components/design.test.tsx      |  2 +-
 .../__tests__/components/projecttree.test.tsx |  2 +-
 .../{__mocks__ => mocks}/sampleDialog.ts      |  0
 .../__tests__/{__mocks__ => mocks}/worker.ts  |  0
 .../client/src/pages/design/DesignPage.tsx    | 14 ++---
 .../dispatchers/__tests__/navigation.test.tsx | 60 +++++++++++++++----
 .../src/recoilModel/dispatchers/navigation.ts | 14 +++--
 .../packages/client/src/shell/triggerApi.ts   | 19 ++----
 .../packages/client/src/shell/useShell.ts     |  2 +-
 9 files changed, 75 insertions(+), 38 deletions(-)
 rename Composer/packages/client/__tests__/{__mocks__ => mocks}/sampleDialog.ts (100%)
 rename Composer/packages/client/__tests__/{__mocks__ => mocks}/worker.ts (100%)

diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index 278106ef5f..aa4ad6edf5 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { fireEvent } from '@botframework-composer/test-utils';
 
 import { renderWithRecoil } from '../testUtils';
-import { SAMPLE_DIALOG } from '../__mocks__/sampleDialog';
+import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
 import { CreateDialogModal } from '../../src/pages/design/createDialogModal';
diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index 0603440de4..9412f1e955 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -6,7 +6,7 @@ import { fireEvent } from '@botframework-composer/test-utils';
 
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { renderWithRecoil } from '../testUtils';
-import { SAMPLE_DIALOG, SAMPLE_DIALOG_2 } from '../__mocks__/sampleDialog';
+import { SAMPLE_DIALOG, SAMPLE_DIALOG_2 } from '../mocks/sampleDialog';
 import { dialogsSelectorFamily, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
 
 const projectId = '12345.6789';
diff --git a/Composer/packages/client/__tests__/__mocks__/sampleDialog.ts b/Composer/packages/client/__tests__/mocks/sampleDialog.ts
similarity index 100%
rename from Composer/packages/client/__tests__/__mocks__/sampleDialog.ts
rename to Composer/packages/client/__tests__/mocks/sampleDialog.ts
diff --git a/Composer/packages/client/__tests__/__mocks__/worker.ts b/Composer/packages/client/__tests__/mocks/worker.ts
similarity index 100%
rename from Composer/packages/client/__tests__/__mocks__/worker.ts
rename to Composer/packages/client/__tests__/mocks/worker.ts
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 9ab8e10179..cbc008a9ad 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -217,7 +217,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
          *   - If 'dialog' does not exist at `dialogId` path, fallback to main dialog.
          */
         if (foundId != null) {
-          navTo(projectId, skillId, foundId);
+          navTo(skillId ?? projectId, foundId);
         }
         return;
       }
@@ -261,15 +261,15 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     updateZoomRate({ currentRate: 1 });
     if (link.trigger != null || selectPath) {
       const path = link.trigger == null ? selectPath : `triggers[${link.trigger}]`;
-      selectTo(link.projectId, link.skillId ?? null, link.dialogId ?? null, path);
+      selectTo(link.skillId ?? link.projectId, link.dialogId ?? null, path);
     } else if (link.dialogId != null) {
-      navTo(link.projectId, link.skillId ?? null, link.dialogId, []);
+      navTo(link.skillId ?? link.projectId, link.dialogId, []);
     }
   }
 
   const onCreateDialogComplete = (dialogId) => {
     if (dialogId) {
-      navTo(projectId, null, dialogId, []);
+      navTo(projectId, dialogId, []);
     }
   };
 
@@ -544,14 +544,14 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       if (index === currentIdx) {
         if (currentIdx - 1 >= 0) {
           //if the deleted node is selected and the selected one is not the first one, navTo the previous trigger;
-          selectTo(projectId, skillId, dialogId, createSelectedPath(currentIdx - 1));
+          selectTo(skillId ?? projectId, dialogId, createSelectedPath(currentIdx - 1));
         } else {
           //if the deleted node is selected and the selected one is the first one, navTo the first trigger;
-          navTo(projectId, skillId, dialogId, []);
+          navTo(skillId ?? projectId, dialogId, []);
         }
       } else if (index < currentIdx) {
         //if the deleted node is at the front, navTo the current one;
-        selectTo(projectId, skillId, dialogId, createSelectedPath(currentIdx - 1));
+        selectTo(skillId ?? projectId, dialogId, createSelectedPath(currentIdx - 1));
       }
     }
   }
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
index d58ae40785..a08cf64459 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
@@ -21,7 +21,7 @@ import {
 } from '../../../utils/navigation';
 import { createSelectedPath, getSelected } from '../../../utils/dialogUtil';
 import { BreadcrumbItem } from '../../../recoilModel/types';
-import { currentProjectIdState } from '../../atoms';
+import { currentProjectIdState, botProjectIdsState, botProjectFileState, projectMetaDataState } from '../../atoms';
 
 jest.mock('../../../utils/navigation');
 jest.mock('../../../utils/dialogUtil');
@@ -35,6 +35,7 @@ const mockConvertPathToUrl = convertPathToUrl as jest.Mock<string>;
 const mockCreateSelectedPath = createSelectedPath as jest.Mock<string>;
 
 const projectId = '12345.678';
+const skillId = '98765.4321';
 
 function expectNavTo(location: string, state: {} | null = null) {
   expect(mockNavigateTo).toHaveBeenLastCalledWith(location, state == null ? expect.anything() : state);
@@ -85,6 +86,18 @@ describe('navigation dispatcher', () => {
           recoilState: dialogsSelectorFamily(projectId),
           initialValue: [{ id: 'newDialogId', triggers: [{ type: SDKKinds.OnBeginDialog }] }],
         },
+        {
+          recoilState: botProjectIdsState,
+          initialValue: [projectId],
+        },
+        {
+          recoilState: botProjectFileState(projectId),
+          initialValue: { foo: 'bar' },
+        },
+        {
+          recoilState: projectMetaDataState(projectId),
+          initialValue: { isRootBot: true },
+        },
       ],
       dispatcher: {
         recoilState: dispatcherState,
@@ -176,27 +189,27 @@ describe('navigation dispatcher', () => {
     it('navigates to a destination', async () => {
       mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/dialogId`);
       await act(async () => {
-        await dispatcher.navTo(projectId, null, 'dialogId', []);
+        await dispatcher.navTo(projectId, 'dialogId', []);
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId`);
-      expect(mockConvertPathToUrl).toBeCalledWith(projectId, null, 'dialogId', undefined);
+      expect(mockConvertPathToUrl).toBeCalledWith(projectId, projectId, 'dialogId', undefined);
     });
 
     it('redirects to the begin dialog trigger', async () => {
       mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/newDialogId?selection=triggers[0]`);
       mockCreateSelectedPath.mockReturnValue('triggers[0]');
       await act(async () => {
-        await dispatcher.navTo(projectId, null, 'newDialogId', []);
+        await dispatcher.navTo(projectId, 'newDialogId', []);
       });
       expectNavTo(`/bot/${projectId}/dialogs/newDialogId?selection=triggers[0]`);
-      expect(mockConvertPathToUrl).toBeCalledWith(projectId, null, 'newDialogId', 'triggers[0]');
+      expect(mockConvertPathToUrl).toBeCalledWith(projectId, projectId, 'newDialogId', 'triggers[0]');
       expect(mockCreateSelectedPath).toBeCalledWith(0);
     });
 
     it("doesn't navigate to a destination where we already are", async () => {
       mockCheckUrl.mockReturnValue(true);
       await act(async () => {
-        await dispatcher.navTo(projectId, null, 'dialogId', []);
+        await dispatcher.navTo(projectId, 'dialogId', []);
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
@@ -205,7 +218,7 @@ describe('navigation dispatcher', () => {
   describe('selectTo', () => {
     it("doesn't go anywhere without a selection", async () => {
       await act(async () => {
-        await dispatcher.selectTo(projectId, null, null, '');
+        await dispatcher.selectTo(null, null, '');
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
@@ -213,16 +226,25 @@ describe('navigation dispatcher', () => {
     it('navigates to a default URL with selected path', async () => {
       mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/dialogId?selected=selection`);
       await act(async () => {
-        await dispatcher.selectTo(projectId, null, null, 'selection');
+        await dispatcher.selectTo(null, null, 'selection');
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?selected=selection`);
       expect(mockConvertPathToUrl).toBeCalledWith(projectId, null, 'dialogId', 'selection');
     });
 
+    it('navigates to a default URL with skillId and selected path', async () => {
+      mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/skill/${skillId}/dialogs/dialogId?selected=selection`);
+      await act(async () => {
+        await dispatcher.selectTo(skillId, 'dialogId', 'selection');
+      });
+      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogId?selected=selection`);
+      expect(mockConvertPathToUrl).toBeCalledWith(projectId, skillId, 'dialogId', 'selection');
+    });
+
     it("doesn't go anywhere if we're already there", async () => {
       mockCheckUrl.mockReturnValue(true);
       await act(async () => {
-        await dispatcher.selectTo(projectId, null, null, 'selection');
+        await dispatcher.selectTo(null, null, 'selection');
       });
       expect(mockNavigateTo).not.toBeCalled();
     });
@@ -246,6 +268,16 @@ describe('navigation dispatcher', () => {
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
     });
 
+    it('goes to a focused page with skill', async () => {
+      mockGetSelected.mockReturnValueOnce('select');
+      await act(async () => {
+        await dispatcher.focusTo(projectId, skillId, 'focus', '');
+      });
+      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogId?selected=select&focused=focus`);
+      expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
+      expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
+    });
+
     it('goes to a focused page with fragment', async () => {
       mockGetSelected.mockReturnValueOnce('select');
       await act(async () => {
@@ -269,7 +301,7 @@ describe('navigation dispatcher', () => {
   });
 
   describe('selectAndFocus', () => {
-    it('sets selection and focus with a valud search', async () => {
+    it('sets selection and focus with a valid search', async () => {
       mockGetUrlSearch.mockReturnValue('?foo=bar&baz=quux');
       await act(async () => {
         await dispatcher.selectAndFocus(projectId, null, 'dialogId', 'select', 'focus');
@@ -277,6 +309,14 @@ describe('navigation dispatcher', () => {
       expectNavTo(`/bot/${projectId}/dialogs/dialogId?foo=bar&baz=quux`);
     });
 
+    it('sets selection and focus with a valid search and skillId', async () => {
+      mockGetUrlSearch.mockReturnValue('?foo=bar&baz=quux');
+      await act(async () => {
+        await dispatcher.selectAndFocus(projectId, skillId, 'dialogId', 'select', 'focus');
+      });
+      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogId?foo=bar&baz=quux`);
+    });
+
     it("doesn't go anywhere if we're already there", async () => {
       mockCheckUrl.mockReturnValue(true);
       await act(async () => {
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index 2f0955cbc1..d5549102e2 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -75,7 +75,7 @@ export const navigationDispatcher = () => {
       }
 
       const currentUri = convertPathToUrl(rootBotProjectId, projectId, dialogId, path);
-
+      console.log('navigate to', currentUri);
       if (checkUrl(currentUri, rootBotProjectId, projectId, designPageLocation)) return;
 
       navigateTo(currentUri, { state: { breadcrumb: updatedBreadcrumb } });
@@ -84,12 +84,16 @@ export const navigationDispatcher = () => {
 
   const selectTo = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
-      projectId: string,
       skillId: string | null,
       destinationDialogId: string | null,
       selectPath: string
     ) => {
       if (!selectPath) return;
+      const rootBotProjectId = await snapshot.getPromise(rootBotProjectIdSelector);
+      if (rootBotProjectId == null) return;
+
+      const projectId = skillId ?? rootBotProjectId;
+
       set(currentProjectIdState, projectId);
       const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
       const breadcrumb = await snapshot.getPromise(breadcrumbState(projectId));
@@ -100,9 +104,9 @@ export const navigationDispatcher = () => {
       const dialogs = await snapshot.getPromise(dialogsSelectorFamily(projectId));
       const currentDialog = dialogs.find(({ id }) => id === dialogId);
       const encodedSelectPath = encodeArrayPathToDesignerPath(currentDialog?.content, selectPath);
-      const currentUri = convertPathToUrl(projectId, skillId, dialogId, encodedSelectPath);
+      const currentUri = convertPathToUrl(rootBotProjectId, skillId, dialogId, encodedSelectPath);
 
-      if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
+      if (checkUrl(currentUri, rootBotProjectId, skillId, designPageLocation)) return;
       navigateTo(currentUri, { state: { breadcrumb: updateBreadcrumb(breadcrumb, BreadcrumbUpdateType.Selected) } });
     }
   );
@@ -171,7 +175,7 @@ export const navigationDispatcher = () => {
         const currentUri =
           skillId == null
             ? `/bot/${projectId}/dialogs/${dialogId}${search}`
-            : `/bot/${projectId}/skill/{skillId}/dialogs/${dialogId}${search}`;
+            : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}${search}`;
 
         if (checkUrl(currentUri, projectId, skillId, designPageLocation)) return;
         navigateTo(currentUri, { state: { breadcrumb } });
diff --git a/Composer/packages/client/src/shell/triggerApi.ts b/Composer/packages/client/src/shell/triggerApi.ts
index f7a59a87bc..c1d6ceb6c5 100644
--- a/Composer/packages/client/src/shell/triggerApi.ts
+++ b/Composer/packages/client/src/shell/triggerApi.ts
@@ -18,13 +18,7 @@ import get from 'lodash/get';
 
 import { useResolvers } from '../hooks/useResolver';
 import { onChooseIntentKey, generateNewDialog, intentTypeKey, qnaMatcherKey } from '../utils/dialogUtil';
-import {
-  schemasState,
-  lgFilesState,
-  dialogsSelectorFamily,
-  localeState,
-  rootBotProjectIdSelector,
-} from '../recoilModel';
+import { schemasState, lgFilesState, dialogsSelectorFamily, localeState } from '../recoilModel';
 import { Dispatcher } from '../recoilModel/dispatchers';
 
 import { dispatcherState } from './../recoilModel/DispatcherWrapper';
@@ -41,7 +35,7 @@ const defaultQnATriggerData = {
 };
 
 function createTriggerApi(
-  state: { rootProjectId; projectId; schemas; dialogs; locale; lgFiles },
+  state: { projectId; schemas; dialogs; locale; lgFiles },
   dispatchers: Dispatcher, //TODO
   luFileResolver: (id: string) => LuFile | undefined,
   lgFileResolver: (id: string) => LgFile | undefined,
@@ -61,7 +55,7 @@ function createTriggerApi(
     const lgFile = lgFileResolver(id);
     const dialog = dialogResolver(id);
     const { createLuIntent, createLgTemplates, updateDialog, selectTo } = dispatchers;
-    const { rootProjectId, projectId, schemas, dialogs, locale, lgFiles } = state;
+    const { projectId, schemas, dialogs, locale, lgFiles } = state;
     if (!luFile) throw new Error(`lu file ${id} not found`);
     if (!lgFile) throw new Error(`lg file ${id} not found`);
     if (!dialog) throw new Error(`dialog ${id} not found`);
@@ -118,7 +112,7 @@ function createTriggerApi(
     };
     await updateDialog(dialogPayload);
     if (autoSelected) {
-      selectTo(rootProjectId, projectId, newDialog.id, `triggers[${index}]`);
+      selectTo(projectId, newDialog.id, `triggers[${index}]`);
     }
   };
 
@@ -161,7 +155,6 @@ export function useTriggerApi(projectId: string) {
   const lgFiles = useRecoilValue(lgFilesState(projectId));
   const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const locale = useRecoilValue(localeState(projectId));
-  const rootProjectId = useRecoilValue(rootBotProjectIdSelector);
   const { deleteActions } = useActionApi(projectId);
   const { removeLuIntent } = useLuApi(projectId);
 
@@ -169,7 +162,7 @@ export function useTriggerApi(projectId: string) {
   const { luFileResolver, lgFileResolver, dialogResolver } = useResolvers(projectId);
   const [api, setApi] = useState(
     createTriggerApi(
-      { rootProjectId, projectId, schemas, dialogs, locale, lgFiles },
+      { projectId, schemas, dialogs, locale, lgFiles },
       dispatchers,
       luFileResolver,
       lgFileResolver,
@@ -181,7 +174,7 @@ export function useTriggerApi(projectId: string) {
 
   useEffect(() => {
     const newApi = createTriggerApi(
-      { rootProjectId, projectId, schemas, dialogs, locale, lgFiles },
+      { projectId, schemas, dialogs, locale, lgFiles },
       dispatchers,
       luFileResolver,
       lgFileResolver,
diff --git a/Composer/packages/client/src/shell/useShell.ts b/Composer/packages/client/src/shell/useShell.ts
index 61f23afeae..3e44f3ee05 100644
--- a/Composer/packages/client/src/shell/useShell.ts
+++ b/Composer/packages/client/src/shell/useShell.ts
@@ -143,7 +143,7 @@ export function useShell(source: EventSource, projectId: string): Shell {
 
   function focusEvent(subPath) {
     if (rootBotProjectId == null) return;
-    selectTo(rootBotProjectId, projectId, dialogId, subPath);
+    selectTo(projectId, dialogId, subPath);
   }
 
   function focusSteps(subPaths: string[] = [], fragment?: string) {

From 3d328571be8072e68d34a5d4d1ba230d177c98ed Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Wed, 28 Oct 2020 11:31:08 -0700
Subject: [PATCH 33/44] fix more unit tests

---
 .../dispatchers/__tests__/navigation.test.tsx | 22 ++++++++++++++++++-
 .../src/recoilModel/dispatchers/navigation.ts |  2 +-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
index a08cf64459..3ebdd821e4 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
@@ -81,6 +81,14 @@ describe('navigation dispatcher', () => {
             focused: 'b',
           },
         },
+        {
+          recoilState: designPageLocationState(skillId),
+          initialValue: {
+            dialogId: 'dialogInSkillId',
+            selected: 'a',
+            focused: 'b',
+          },
+        },
         { recoilState: currentProjectIdState, initialValue: projectId },
         {
           recoilState: dialogsSelectorFamily(projectId),
@@ -273,7 +281,7 @@ describe('navigation dispatcher', () => {
       await act(async () => {
         await dispatcher.focusTo(projectId, skillId, 'focus', '');
       });
-      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogId?selected=select&focused=focus`);
+      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogInSkillId?selected=select&focused=focus`);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
     });
@@ -288,6 +296,18 @@ describe('navigation dispatcher', () => {
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
     });
 
+    it('goes to a focused page with skill and fragment', async () => {
+      mockGetSelected.mockReturnValueOnce('select');
+      await act(async () => {
+        await dispatcher.focusTo(projectId, skillId, 'focus', 'fragment');
+      });
+      expectNavTo(
+        `/bot/${projectId}/skillId/${skillId}/dialogs/dialogInSkillId?selected=select&focused=focus#fragment`
+      );
+      expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
+      expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
+    });
+
     it('stays on the same page but updates breadcrumbs with a checked URL', async () => {
       mockCheckUrl.mockReturnValue(true);
       mockGetSelected.mockReturnValueOnce('select');
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index d5549102e2..82726649c5 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -75,7 +75,6 @@ export const navigationDispatcher = () => {
       }
 
       const currentUri = convertPathToUrl(rootBotProjectId, projectId, dialogId, path);
-      console.log('navigate to', currentUri);
       if (checkUrl(currentUri, rootBotProjectId, projectId, designPageLocation)) return;
 
       navigateTo(currentUri, { state: { breadcrumb: updatedBreadcrumb } });
@@ -131,6 +130,7 @@ export const navigationDispatcher = () => {
 
       if (focusPath) {
         const dialogs = await snapshot.getPromise(dialogsSelectorFamily(skillId ?? projectId));
+        console.log('in focusTo', projectId, skillId, focusPath, fragment, 'dialogs=', dialogs);
         const currentDialog = dialogs.find(({ id }) => id === dialogId);
         const encodedFocusPath = encodeArrayPathToDesignerPath(currentDialog?.content, focusPath);
 

From 3c106df7e883211603a186c8f8f0241ec4665ebe Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Wed, 28 Oct 2020 11:59:12 -0700
Subject: [PATCH 34/44] fix test typol

---
 .../src/recoilModel/dispatchers/__tests__/navigation.test.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
index 3ebdd821e4..6e4f4ebfd8 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
@@ -301,9 +301,7 @@ describe('navigation dispatcher', () => {
       await act(async () => {
         await dispatcher.focusTo(projectId, skillId, 'focus', 'fragment');
       });
-      expectNavTo(
-        `/bot/${projectId}/skillId/${skillId}/dialogs/dialogInSkillId?selected=select&focused=focus#fragment`
-      );
+      expectNavTo(`/bot/${projectId}/skill/${skillId}/dialogs/dialogInSkillId?selected=select&focused=focus#fragment`);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Selected);
       expect(mockUpdateBreadcrumb).toHaveBeenCalledWith(expect.anything(), BreadcrumbUpdateType.Focused);
     });

From 5662dcff54c3238ac6bba0af2ff47911c7c56f53 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 10:46:16 -0700
Subject: [PATCH 35/44] handle clicks on bots as bot/id/skill/id

---
 .../components/ProjectTree/ProjectTree.tsx    |  2 ++
 .../client/src/pages/design/DesignPage.tsx    |  9 ++++++---
 .../src/recoilModel/dispatchers/navigation.ts | 19 +++++++++++--------
 .../packages/client/src/utils/navigation.ts   | 19 ++++++++++++++-----
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 4a72f5c047..a56163cc7a 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -14,6 +14,7 @@ import { useRecoilValue } from 'recoil';
 import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
 import { extractSchemaProperties, groupTriggersByPropertyReference, NoGroupingTriggerGroupName } from '@bfc/indexers';
 import isMatch from 'lodash/isMatch';
+import isEqual from 'lodash/isEqual';
 
 import {
   dispatcherState,
@@ -250,6 +251,7 @@ export const ProjectTree: React.FC<Props> = ({
           isActive={isTriggerMatch(link, selectedLink)}
           link={link}
           menu={[{ label: formatMessage('Create/edit skill manifest'), onClick: () => {} }]}
+          onSelect={handleOnSelect}
         />
       </span>
     );
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index cbc008a9ad..bbe2e9058d 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -264,6 +264,9 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
       selectTo(link.skillId ?? link.projectId, link.dialogId ?? null, path);
     } else if (link.dialogId != null) {
       navTo(link.skillId ?? link.projectId, link.dialogId, []);
+    } else {
+      // with no dialog or ID, we must be looking at a bot link
+      navTo(link.skillId ?? link.projectId, null, []);
     }
   }
 
@@ -284,7 +287,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     return { actionSelected, showDisableBtn, showEnableBtn };
   }, [visualEditorSelection]);
 
-  const { onFocusFlowEditor, onBlurFlowEditor } = useElectronFeatures(actionSelected, canUndo(), canRedo());
+  const { onFocusFlowEditor, onBlurFlowEditor } = useElectronFeatures(actionSelected, canUndo?.(), canRedo?.());
 
   const EditorAPI = getEditorAPI();
   const toolbarItems: IToolbarItem[] = [
@@ -345,13 +348,13 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           {
             key: 'edit.undo',
             text: formatMessage('Undo'),
-            disabled: !canUndo(),
+            disabled: !canUndo?.(),
             onClick: undo,
           },
           {
             key: 'edit.redo',
             text: formatMessage('Redo'),
-            disabled: !canRedo(),
+            disabled: !canRedo?.(),
             onClick: redo,
           },
           {
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index 82726649c5..68313d8e6b 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -51,7 +51,7 @@ export const navigationDispatcher = () => {
   const navTo = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
       projectId: string,
-      dialogId: string,
+      dialogId: string | null,
       breadcrumb: BreadcrumbItem[] = []
     ) => {
       const rootBotProjectId = await snapshot.getPromise(rootBotProjectIdSelector);
@@ -64,13 +64,16 @@ export const navigationDispatcher = () => {
 
       let path;
       if (dialogId !== designPageLocation.dialogId) {
-        const currentDialog = dialogs.find(({ id }) => id === dialogId);
-        const beginDialogIndex = currentDialog?.triggers.findIndex(({ type }) => type === SDKKinds.OnBeginDialog);
-
-        if (typeof beginDialogIndex !== 'undefined' && beginDialogIndex >= 0) {
-          path = createSelectedPath(beginDialogIndex);
-          path = encodeArrayPathToDesignerPath(currentDialog?.content, path);
-          updatedBreadcrumb.push({ dialogId, selected: '', focused: '' });
+        if (dialogId == null) {
+        } else {
+          const currentDialog = dialogs.find(({ id }) => id === dialogId);
+          const beginDialogIndex = currentDialog?.triggers.findIndex(({ type }) => type === SDKKinds.OnBeginDialog);
+
+          if (typeof beginDialogIndex !== 'undefined' && beginDialogIndex >= 0) {
+            path = createSelectedPath(beginDialogIndex);
+            path = encodeArrayPathToDesignerPath(currentDialog?.content, path);
+            updatedBreadcrumb.push({ dialogId, selected: '', focused: '' });
+          }
         }
       }
 
diff --git a/Composer/packages/client/src/utils/navigation.ts b/Composer/packages/client/src/utils/navigation.ts
index 49e76b7dd1..dcc7b19fe4 100644
--- a/Composer/packages/client/src/utils/navigation.ts
+++ b/Composer/packages/client/src/utils/navigation.ts
@@ -87,14 +87,23 @@ export interface NavigationState {
   qnaKbUrls?: string[];
 }
 
-export function convertPathToUrl(projectId: string, skillId: string | null, dialogId: string, path?: string): string {
+export function convertPathToUrl(
+  projectId: string,
+  skillId: string | null,
+  dialogId: string | null,
+  path?: string
+): string {
   //path is like main.triggers[0].actions[0]
   //uri = id?selected=triggers[0]&focused=triggers[0].actions[0]
 
-  let uri =
-    skillId == null
-      ? `/bot/${projectId}/dialogs/${dialogId}`
-      : `/bot/${projectId}/skill/${skillId}/dialogs/${dialogId}`;
+  let uri = `/bot/${projectId}`;
+  if (skillId != null) {
+    uri += `/skill/${skillId}`;
+  }
+  if (dialogId != null) {
+    uri += `/dialogs/${dialogId}`;
+  }
+
   if (!path) return uri;
 
   const items = path.split('#');

From ead752b7791d8bfa5b443447fc5bec8782dcd2de Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 12:41:27 -0700
Subject: [PATCH 36/44] always go to dialog on click (not to a trigger in it)

---
 .../client/src/pages/design/DesignPage.tsx    |  7 +++---
 .../src/recoilModel/dispatchers/navigation.ts | 22 ++++---------------
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index bbe2e9058d..6a33b5e3e4 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -257,11 +257,10 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     createTrigger(dialogId, formData);
   };
 
-  function handleSelect(link: TreeLink, selectPath = '') {
+  function handleSelect(link: TreeLink) {
     updateZoomRate({ currentRate: 1 });
-    if (link.trigger != null || selectPath) {
-      const path = link.trigger == null ? selectPath : `triggers[${link.trigger}]`;
-      selectTo(link.skillId ?? link.projectId, link.dialogId ?? null, path);
+    if (link.trigger != null) {
+      selectTo(link.skillId ?? null, link.dialogId ?? null, `triggers[${link.trigger}]`);
     } else if (link.dialogId != null) {
       navTo(link.skillId ?? link.projectId, link.dialogId, []);
     } else {
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index 68313d8e6b..179728f834 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -50,34 +50,20 @@ export const navigationDispatcher = () => {
 
   const navTo = useRecoilCallback(
     ({ snapshot, set }: CallbackInterface) => async (
-      projectId: string,
+      skillId: string | null,
       dialogId: string | null,
       breadcrumb: BreadcrumbItem[] = []
     ) => {
       const rootBotProjectId = await snapshot.getPromise(rootBotProjectIdSelector);
       if (rootBotProjectId == null) return;
 
-      const dialogs = await snapshot.getPromise(dialogsSelectorFamily(projectId));
+      const projectId = skillId ?? rootBotProjectId;
+
       const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
       const updatedBreadcrumb = cloneDeep(breadcrumb);
       set(currentProjectIdState, projectId);
 
-      let path;
-      if (dialogId !== designPageLocation.dialogId) {
-        if (dialogId == null) {
-        } else {
-          const currentDialog = dialogs.find(({ id }) => id === dialogId);
-          const beginDialogIndex = currentDialog?.triggers.findIndex(({ type }) => type === SDKKinds.OnBeginDialog);
-
-          if (typeof beginDialogIndex !== 'undefined' && beginDialogIndex >= 0) {
-            path = createSelectedPath(beginDialogIndex);
-            path = encodeArrayPathToDesignerPath(currentDialog?.content, path);
-            updatedBreadcrumb.push({ dialogId, selected: '', focused: '' });
-          }
-        }
-      }
-
-      const currentUri = convertPathToUrl(rootBotProjectId, projectId, dialogId, path);
+      const currentUri = convertPathToUrl(rootBotProjectId, projectId, dialogId);
       if (checkUrl(currentUri, rootBotProjectId, projectId, designPageLocation)) return;
 
       navigateTo(currentUri, { state: { breadcrumb: updatedBreadcrumb } });

From 90a0a3f6cc4833d3e776557c1bd62b14222aa7b1 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 13:19:22 -0700
Subject: [PATCH 37/44] fix unit tests

---
 .../dispatchers/__tests__/navigation.test.tsx       | 13 +------------
 .../src/recoilModel/dispatchers/navigation.ts       |  4 ++--
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
index 6e4f4ebfd8..9661ff113f 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
+++ b/Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx
@@ -200,18 +200,7 @@ describe('navigation dispatcher', () => {
         await dispatcher.navTo(projectId, 'dialogId', []);
       });
       expectNavTo(`/bot/${projectId}/dialogs/dialogId`);
-      expect(mockConvertPathToUrl).toBeCalledWith(projectId, projectId, 'dialogId', undefined);
-    });
-
-    it('redirects to the begin dialog trigger', async () => {
-      mockConvertPathToUrl.mockReturnValue(`/bot/${projectId}/dialogs/newDialogId?selection=triggers[0]`);
-      mockCreateSelectedPath.mockReturnValue('triggers[0]');
-      await act(async () => {
-        await dispatcher.navTo(projectId, 'newDialogId', []);
-      });
-      expectNavTo(`/bot/${projectId}/dialogs/newDialogId?selection=triggers[0]`);
-      expect(mockConvertPathToUrl).toBeCalledWith(projectId, projectId, 'newDialogId', 'triggers[0]');
-      expect(mockCreateSelectedPath).toBeCalledWith(0);
+      expect(mockConvertPathToUrl).toBeCalledWith(projectId, projectId, 'dialogId');
     });
 
     it("doesn't navigate to a destination where we already are", async () => {
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index 179728f834..b0c78e4b24 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -4,14 +4,14 @@
 
 //TODO: refactor the router to use one-way data flow
 import { useRecoilCallback, CallbackInterface } from 'recoil';
-import { PromptTab, SDKKinds } from '@bfc/shared';
+import { PromptTab } from '@bfc/shared';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { currentProjectIdState } from '../atoms';
 import { encodeArrayPathToDesignerPath } from '../../utils/convertUtils/designerPathEncoder';
 import { dialogsSelectorFamily, rootBotProjectIdSelector } from '../selectors';
 
-import { createSelectedPath, getSelected } from './../../utils/dialogUtil';
+import { getSelected } from './../../utils/dialogUtil';
 import { BreadcrumbItem } from './../../recoilModel/types';
 import { breadcrumbState, designPageLocationState, focusPathState } from './../atoms/botState';
 import {

From a5bd2ee96102c176b43146fb4e5f14834a313c4d Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 14:04:42 -0700
Subject: [PATCH 38/44] fix link highlight for dialogs

---
 .../src/components/ProjectTree/ProjectTree.tsx  | 17 ++++++++++-------
 .../client/src/pages/design/DesignPage.tsx      |  2 +-
 .../packages/client/src/recoilModel/types.ts    |  1 +
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index a56163cc7a..ab6bd48da6 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -13,7 +13,6 @@ import debounce from 'lodash/debounce';
 import { useRecoilValue } from 'recoil';
 import { ISearchBoxStyles } from 'office-ui-fabric-react/lib/SearchBox';
 import { extractSchemaProperties, groupTriggersByPropertyReference, NoGroupingTriggerGroupName } from '@bfc/indexers';
-import isMatch from 'lodash/isMatch';
 import isEqual from 'lodash/isEqual';
 
 import {
@@ -211,9 +210,13 @@ export const ProjectTree: React.FC<Props> = ({
     return bot.dialogs.some(dialogHasErrors(bot.projectId));
   };
 
-  const isTriggerMatch = (link1?: Partial<TreeLink>, link2?: Partial<TreeLink>) => {
-    if (link1 == null || link2 == null) return false;
-    return isMatch(link1, link2);
+  const doesLinkMatch = (linkInTree?: Partial<TreeLink>, selectedLink?: Partial<TreeLink>) => {
+    if (linkInTree == null || selectedLink == null) return false;
+    return (
+      linkInTree.skillId === selectedLink.skillId &&
+      linkInTree.dialogId === selectedLink.dialogId &&
+      linkInTree.trigger === selectedLink.trigger
+    );
   };
 
   const handleOnSelect = (link: TreeLink) => {
@@ -248,7 +251,7 @@ export const ProjectTree: React.FC<Props> = ({
           showProps
           forceIndent={bot.isRemote ? SUMMARY_ARROW_SPACE : 0}
           icon={bot.isRemote ? icons.EXTERNAL_SKILL : icons.BOT}
-          isActive={isTriggerMatch(link, selectedLink)}
+          isActive={doesLinkMatch(link, selectedLink)}
           link={link}
           menu={[{ label: formatMessage('Create/edit skill manifest'), onClick: () => {} }]}
           onSelect={handleOnSelect}
@@ -295,7 +298,7 @@ export const ProjectTree: React.FC<Props> = ({
           showProps
           forceIndent={showTriggers ? 0 : SUMMARY_ARROW_SPACE}
           icon={isFormDialog ? icons.FORM_DIALOG : icons.DIALOG}
-          isActive={isTriggerMatch(link, selectedLink)}
+          isActive={doesLinkMatch(link, selectedLink)}
           link={link}
           menu={[
             {
@@ -340,7 +343,7 @@ export const ProjectTree: React.FC<Props> = ({
         dialogName={dialog.displayName}
         forceIndent={48}
         icon={icons.TRIGGER}
-        isActive={isTriggerMatch(link, selectedLink)}
+        isActive={doesLinkMatch(link, selectedLink)}
         link={link}
         menu={[
           {
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index 6a33b5e3e4..dfd8f56b33 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -222,7 +222,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
         return;
       }
 
-      setDesignPageLocation(skillId, {
+      setDesignPageLocation(skillId ?? projectId, {
         dialogId,
         selected,
         focused,
diff --git a/Composer/packages/client/src/recoilModel/types.ts b/Composer/packages/client/src/recoilModel/types.ts
index 8f59646139..453eca41b0 100644
--- a/Composer/packages/client/src/recoilModel/types.ts
+++ b/Composer/packages/client/src/recoilModel/types.ts
@@ -77,6 +77,7 @@ export interface AppUpdateState {
 }
 
 export interface BreadcrumbItem {
+  skillId?: string;
   dialogId: string;
   selected: string;
   focused: string;

From 1affb13d1eeeba2c2d31ed22c0baf31a456c05a0 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 14:59:57 -0700
Subject: [PATCH 39/44] attempt to fix breadcrumbs (will finish in separate PR)

---
 Composer/packages/client/src/pages/design/DesignPage.tsx    | 6 ++++--
 .../client/src/recoilModel/dispatchers/navigation.ts        | 4 +---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index dfd8f56b33..e838c9a3d2 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -262,7 +262,9 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     if (link.trigger != null) {
       selectTo(link.skillId ?? null, link.dialogId ?? null, `triggers[${link.trigger}]`);
     } else if (link.dialogId != null) {
-      navTo(link.skillId ?? link.projectId, link.dialogId, []);
+      navTo(link.skillId ?? link.projectId, link.dialogId, [
+        { skillId: link.skillId, dialogId: link.dialogId, selected: '', focused: '' },
+      ]);
     } else {
       // with no dialog or ID, we must be looking at a bot link
       navTo(link.skillId ?? link.projectId, null, []);
@@ -271,7 +273,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
 
   const onCreateDialogComplete = (dialogId) => {
     if (dialogId) {
-      navTo(projectId, dialogId, []);
+      navTo(projectId, dialogId, [{ dialogId, selected: '', focused: '' }]);
     }
   };
 
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index b0c78e4b24..c7492d5108 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -60,13 +60,12 @@ export const navigationDispatcher = () => {
       const projectId = skillId ?? rootBotProjectId;
 
       const designPageLocation = await snapshot.getPromise(designPageLocationState(projectId));
-      const updatedBreadcrumb = cloneDeep(breadcrumb);
       set(currentProjectIdState, projectId);
 
       const currentUri = convertPathToUrl(rootBotProjectId, projectId, dialogId);
       if (checkUrl(currentUri, rootBotProjectId, projectId, designPageLocation)) return;
 
-      navigateTo(currentUri, { state: { breadcrumb: updatedBreadcrumb } });
+      navigateTo(currentUri, { state: { breadcrumb } });
     }
   );
 
@@ -119,7 +118,6 @@ export const navigationDispatcher = () => {
 
       if (focusPath) {
         const dialogs = await snapshot.getPromise(dialogsSelectorFamily(skillId ?? projectId));
-        console.log('in focusTo', projectId, skillId, focusPath, fragment, 'dialogs=', dialogs);
         const currentDialog = dialogs.find(({ id }) => id === dialogId);
         const encodedFocusPath = encodeArrayPathToDesignerPath(currentDialog?.content, focusPath);
 

From 3989f1eda46c891d91edeac5a960765b9f4cc017 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 15:32:50 -0700
Subject: [PATCH 40/44] fixes from CR

---
 .../packages/client/src/recoilModel/dispatchers/navigation.ts  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
index c7492d5108..e18df80e4d 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/navigation.ts
@@ -5,7 +5,6 @@
 //TODO: refactor the router to use one-way data flow
 import { useRecoilCallback, CallbackInterface } from 'recoil';
 import { PromptTab } from '@bfc/shared';
-import cloneDeep from 'lodash/cloneDeep';
 
 import { currentProjectIdState } from '../atoms';
 import { encodeArrayPathToDesignerPath } from '../../utils/convertUtils/designerPathEncoder';
@@ -105,7 +104,7 @@ export const navigationDispatcher = () => {
       focusPath: string,
       fragment: string
     ) => {
-      set(currentProjectIdState, projectId);
+      set(currentProjectIdState, skillId ?? projectId);
       const designPageLocation = await snapshot.getPromise(designPageLocationState(skillId ?? projectId));
       const breadcrumb = await snapshot.getPromise(breadcrumbState(skillId ?? projectId));
       let updatedBreadcrumb = [...breadcrumb];

From 0dcc8e1b70e4ce1054ad38bd9135e30e2eeb4124 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 16:13:24 -0700
Subject: [PATCH 41/44] Update ProjectTree.tsx

---
 .../packages/client/src/components/ProjectTree/ProjectTree.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index ab6bd48da6..8b2cbd7970 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -163,8 +163,7 @@ export const ProjectTree: React.FC<Props> = ({
     setSelectedLink(defaultSelected);
   }, [defaultSelected]);
 
-  // if we're in a single-bot setting, the root will be undefined, so we fall back to current
-  const rootProjectId = useRecoilValue(rootBotProjectIdSelector) ?? useRecoilValue(currentProjectIdState);
+  const rootProjectId = useRecoilValue(rootBotProjectIdSelector);
   const botProjectSpace = useRecoilValue(botProjectSpaceSelector);
 
   const jsonSchemaFilesByProjectId = useRecoilValue(jsonSchemaFilesByProjectIdSelector);

From 502fe70ec91bf772b5238384bfb315d7e02f4e1c Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 16:28:09 -0700
Subject: [PATCH 42/44] Update ProjectTree.tsx

---
 .../packages/client/src/components/ProjectTree/ProjectTree.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 8b2cbd7970..7450615cc5 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -18,7 +18,6 @@ import isEqual from 'lodash/isEqual';
 import {
   dispatcherState,
   rootBotProjectIdSelector,
-  currentProjectIdState,
   botProjectSpaceSelector,
   jsonSchemaFilesByProjectIdSelector,
 } from '../../recoilModel';

From e17819774b07962c57b0acad7b60c6929efdaf46 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 17:06:10 -0700
Subject: [PATCH 43/44] Update ProjectTree.tsx

---
 .../client/src/components/ProjectTree/ProjectTree.tsx       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
index 7450615cc5..5de75b7a78 100644
--- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -24,6 +24,7 @@ import {
 import { getFriendlyName } from '../../utils/dialogUtil';
 import { triggerNotSupported } from '../../utils/dialogValidator';
 import { useFeatureFlag } from '../../utils/hooks';
+import { LoadingSpinner } from '../LoadingSpinner';
 
 import { TreeItem } from './treeItem';
 import { ExpandableNode } from './ExpandableNode';
@@ -167,6 +168,11 @@ export const ProjectTree: React.FC<Props> = ({
 
   const jsonSchemaFilesByProjectId = useRecoilValue(jsonSchemaFilesByProjectIdSelector);
 
+  if (rootProjectId == null) {
+    // this should only happen before a project is loaded in, so it won't last very long
+    return <LoadingSpinner />;
+  }
+
   const notificationMap: { [projectId: string]: { [dialogId: string]: Diagnostic[] } } = {};
 
   for (const bot of projectCollection) {

From 70119c1596a4bc6833047906b45ae259e8e9a6e1 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 29 Oct 2020 17:59:46 -0700
Subject: [PATCH 44/44] fix unit tests to add correct multibot Recoil stuff

---
 .../client/__tests__/components/design.test.tsx     | 11 ++++++++++-
 .../__tests__/components/projecttree.test.tsx       | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/Composer/packages/client/__tests__/components/design.test.tsx b/Composer/packages/client/__tests__/components/design.test.tsx
index aa4ad6edf5..f439076d51 100644
--- a/Composer/packages/client/__tests__/components/design.test.tsx
+++ b/Composer/packages/client/__tests__/components/design.test.tsx
@@ -9,7 +9,14 @@ import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
 import { CreateDialogModal } from '../../src/pages/design/createDialogModal';
-import { dialogsSelectorFamily, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
+import {
+  dialogsSelectorFamily,
+  currentProjectIdState,
+  botProjectIdsState,
+  schemasState,
+  projectMetaDataState,
+  botProjectFileState,
+} from '../../src/recoilModel';
 
 jest.mock('@bfc/code-editor', () => {
   return {
@@ -24,6 +31,8 @@ const initRecoilState = ({ set }) => {
   set(botProjectIdsState, [projectId]);
   set(dialogsSelectorFamily(projectId), dialogs);
   set(schemasState(projectId), { sdk: { content: {} } });
+  set(projectMetaDataState(projectId), { isRootBot: true });
+  set(botProjectFileState(projectId), { foo: 'bar' });
 };
 
 describe('<ProjectTree/>', () => {
diff --git a/Composer/packages/client/__tests__/components/projecttree.test.tsx b/Composer/packages/client/__tests__/components/projecttree.test.tsx
index 9412f1e955..1185e61d9c 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.tsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.tsx
@@ -7,7 +7,14 @@ import { fireEvent } from '@botframework-composer/test-utils';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { renderWithRecoil } from '../testUtils';
 import { SAMPLE_DIALOG, SAMPLE_DIALOG_2 } from '../mocks/sampleDialog';
-import { dialogsSelectorFamily, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
+import {
+  dialogsSelectorFamily,
+  currentProjectIdState,
+  botProjectIdsState,
+  projectMetaDataState,
+  schemasState,
+  botProjectFileState,
+} from '../../src/recoilModel';
 
 const projectId = '12345.6789';
 const projectId2 = '56789.1234';
@@ -18,6 +25,8 @@ const initRecoilState = ({ set }) => {
   set(botProjectIdsState, [projectId]);
   set(dialogsSelectorFamily(projectId), dialogs);
   set(schemasState(projectId), { sdk: { content: {} } });
+  set(projectMetaDataState(projectId), { isRootBot: true });
+  set(botProjectFileState(projectId), { foo: 'bar' });
 };
 
 const initRecoilStateMulti = ({ set }) => {
@@ -27,6 +36,8 @@ const initRecoilStateMulti = ({ set }) => {
   set(dialogsSelectorFamily(projectId2), [SAMPLE_DIALOG, SAMPLE_DIALOG_2]);
   set(schemasState(projectId), { sdk: { content: {} } });
   set(schemasState(projectId2), { sdk: { content: {} } });
+  set(projectMetaDataState(projectId), { isRootBot: true });
+  set(botProjectFileState(projectId), { foo: 'bar' });
 };
 
 describe('<ProjectTree/>', () => {