From d9c15cccad8a3d1c9549ad2e51afbc945d7606b2 Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Sun, 20 Jun 2021 16:18:47 -0700
Subject: [PATCH 1/9] Debug panel feature updates

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 Composer/packages/client/package.json         |   4 +-
 .../BotRuntimeController/BotController.tsx    |  24 +--
 .../BotRuntimeController/useBotOperations.ts  |  14 +-
 .../components/BotRuntimeController/utils.ts  |  14 ++
 .../DropdownWithAllOption.tsx                 |  82 ++++++++
 .../WebChat/__tests__/WebChat.test.tsx        |  10 +-
 .../client/src/components/useDebugPane.ts     |  24 +--
 .../DiagnosticsTab/DiagnosticFilters.tsx      | 156 ++++++++++++++
 .../DiagnosticsTab/DiagnosticList.tsx         |  89 +++++---
 .../DiagnosticsTab/DiagnosticsStatus.tsx      |  76 ++++---
 .../DiagnosticsTab/DiagnosticsTabContent.tsx  |  95 +++++++--
 .../TabExtensions/DiagnosticsTab}/types.ts    |  55 ++++-
 .../DiagnosticsTab/useAutoFix.ts              |   2 +-
 .../DiagnosticsTab/useDiagnostics.ts          |   5 +-
 .../WebChatLog/WebChatLogContent.tsx          |  35 +++-
 .../design/DebugPanel/TabExtensions/index.ts  |   2 +-
 .../pages/diagnostics/DiagnosticFilter.tsx    |  54 -----
 .../src/pages/diagnostics/DiagnosticList.tsx  | 193 ------------------
 .../src/pages/diagnostics/Diagnostics.tsx     |  53 -----
 .../pages/diagnostics/DiagnosticsTable.tsx    |  66 ------
 .../client/src/recoilModel/atoms/appState.ts  |  14 ++
 .../recoilModel/dispatchers/application.ts    |  18 ++
 .../selectors/diagnosticsPageSelector.ts      |  11 +-
 .../src/recoilModel/selectors/dialogs.ts      |   3 +-
 .../selectors/localRuntimeBuilder.ts          |   3 +
 Composer/packages/client/src/router.tsx       |   4 +-
 .../lib/indexers/src/validations/index.ts     |   1 +
 Composer/yarn.lock                            | 135 ++++++------
 28 files changed, 663 insertions(+), 579 deletions(-)
 create mode 100644 Composer/packages/client/src/components/BotRuntimeController/utils.ts
 create mode 100644 Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx
 create mode 100644 Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
 rename Composer/packages/client/src/pages/{diagnostics => design/DebugPanel/TabExtensions/DiagnosticsTab}/types.ts (81%)
 delete mode 100644 Composer/packages/client/src/pages/diagnostics/DiagnosticFilter.tsx
 delete mode 100644 Composer/packages/client/src/pages/diagnostics/DiagnosticList.tsx
 delete mode 100644 Composer/packages/client/src/pages/diagnostics/Diagnostics.tsx
 delete mode 100644 Composer/packages/client/src/pages/diagnostics/DiagnosticsTable.tsx

diff --git a/Composer/packages/client/package.json b/Composer/packages/client/package.json
index 8fe702768a..2686f059eb 100644
--- a/Composer/packages/client/package.json
+++ b/Composer/packages/client/package.json
@@ -53,8 +53,8 @@
     "ansi_up": "5.0.0",
     "axios": "^0.21.1",
     "babel-plugin-extract-format-message": "^6.2.3",
-    "botframework-webchat": "4.12.0",
-    "botframework-webchat-core": "4.12.0",
+    "botframework-webchat": "4.13.0",
+    "botframework-webchat-core": "4.13.0",
     "format-message": "^6.2.3",
     "format-message-generate-id": "^6.2.3",
     "immer": "^8.0.1",
diff --git a/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx b/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
index 93b0e373a4..7364c800c0 100644
--- a/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
+++ b/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
@@ -25,6 +25,7 @@ import { BotStatus } from '../../constants';
 import { useClickOutsideOutsideTarget } from '../../utils/hooks';
 import { usePVACheck } from '../../hooks/usePVACheck';
 
+import { isBotStarting } from './utils';
 import { BotControllerMenu } from './BotControllerMenu';
 import { useBotOperations } from './useBotOperations';
 import { BotRuntimeStatus } from './BotRuntimeStatus';
@@ -101,16 +102,7 @@ const BotController: React.FC<BotControllerProps> = ({ onHideController, isContr
   useEffect(() => {
     const botsProcessing =
       startAllBotsOperationQueued ||
-      projectCollection.some(({ status }) => {
-        return (
-          status === BotStatus.publishing ||
-          status === BotStatus.published ||
-          status == BotStatus.pending ||
-          status == BotStatus.queued ||
-          status == BotStatus.starting ||
-          status == BotStatus.stopping
-        );
-      });
+      projectCollection.some(({ status }) => isBotStarting(status) || status == BotStatus.stopping);
     setBotsProcessing(botsProcessing);
 
     const botOperationsCompleted = projectCollection.some(
@@ -156,14 +148,10 @@ const BotController: React.FC<BotControllerProps> = ({ onHideController, isContr
         setStatusIconClass('Refresh');
 
         setStartPanelButtonText(
-          formatMessage(
-            `{
-          total, plural,
-            =1 {Restart bot}
-          other {Restart all bots ({running}/{total} running)}
-        }`,
-            { running: runningBots.projectIds.length, total: runningBots.totalBots }
-          )
+          formatMessage(`{ total, plural, =1 {Restart bot}other {Restart all bots ({running}/{total} running)}}`, {
+            running: runningBots.projectIds.length,
+            total: runningBots.totalBots,
+          })
         );
         return;
       }
diff --git a/Composer/packages/client/src/components/BotRuntimeController/useBotOperations.ts b/Composer/packages/client/src/components/BotRuntimeController/useBotOperations.ts
index e697632628..916bc23dda 100644
--- a/Composer/packages/client/src/components/BotRuntimeController/useBotOperations.ts
+++ b/Composer/packages/client/src/components/BotRuntimeController/useBotOperations.ts
@@ -46,13 +46,15 @@ export function useBotOperations() {
   const startRootBot = async (skipBuild?: boolean) => {
     setProjectsToTrack([]);
     await updateSettingsForSkillsWithoutManifest();
-    const { projectId, configuration, buildRequired, status, sensitiveSettings } = builderEssentials[0];
-    if (status !== BotStatus.connected) {
-      let isBuildRequired = buildRequired;
-      if (skipBuild) {
-        isBuildRequired = false;
+    if (builderEssentials.length) {
+      const { projectId, configuration, buildRequired, status, sensitiveSettings } = builderEssentials[0];
+      if (status !== BotStatus.connected) {
+        let isBuildRequired = buildRequired;
+        if (skipBuild) {
+          isBuildRequired = false;
+        }
+        handleBotStart(projectId, configuration, sensitiveSettings, isBuildRequired);
       }
-      handleBotStart(projectId, configuration, sensitiveSettings, isBuildRequired);
     }
   };
 
diff --git a/Composer/packages/client/src/components/BotRuntimeController/utils.ts b/Composer/packages/client/src/components/BotRuntimeController/utils.ts
new file mode 100644
index 0000000000..59776d123d
--- /dev/null
+++ b/Composer/packages/client/src/components/BotRuntimeController/utils.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { BotStatus } from '../../constants';
+
+export const isBotStarting = (currentStatus: BotStatus) => {
+  return (
+    currentStatus === BotStatus.publishing ||
+    currentStatus === BotStatus.published ||
+    currentStatus == BotStatus.pending ||
+    currentStatus == BotStatus.queued ||
+    currentStatus == BotStatus.starting
+  );
+};
diff --git a/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx b/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx
new file mode 100644
index 0000000000..ce4ddb68ba
--- /dev/null
+++ b/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx
@@ -0,0 +1,82 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { Dropdown, IDropdownOption, IDropdownStyles } from 'office-ui-fabric-react/lib/Dropdown';
+import React, { useEffect, useState, Fragment } from 'react';
+
+const dropdownStyles: Partial<IDropdownStyles> = {
+  dropdown: { width: 300 },
+};
+
+interface DropdownWithAllOptionProps {
+  optionAllText: string;
+  placeholder: string;
+  selectedKeys: string[];
+  setSelectedKeys: (keys: string[]) => void;
+  dropdownOptions: IDropdownOption[];
+  optionAllKey: string;
+}
+
+export const DropdownWithAllOption: React.FC<DropdownWithAllOptionProps> = (props) => {
+  const { optionAllText, selectedKeys, setSelectedKeys, placeholder, dropdownOptions, optionAllKey } = props;
+  const [currentOptions, setCurrentOptions] = useState<IDropdownOption[]>([]);
+
+  useEffect(() => {
+    const allOptions = [
+      {
+        key: optionAllKey,
+        text: optionAllText,
+      },
+      ...dropdownOptions,
+    ];
+
+    setCurrentOptions(allOptions);
+  }, [dropdownOptions]);
+
+  const onOptionSelectionChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+    if (item) {
+      if (item.key === optionAllKey) {
+        if (!item.selected) {
+          setSelectedKeys([]);
+        } else {
+          const allOptions = currentOptions.map((option) => option.key as string);
+          setSelectedKeys(allOptions);
+        }
+        return;
+      }
+
+      const tempState = [...selectedKeys];
+      const allIndex = tempState.findIndex((option) => option === optionAllKey);
+      if (allIndex !== -1) {
+        tempState.splice(allIndex, 1);
+      }
+      setSelectedKeys(item.selected ? [...tempState, item.key as string] : tempState.filter((key) => key !== item.key));
+    }
+  };
+
+  const onRenderTitle = (selectedItems: IDropdownOption[] | undefined): JSX.Element | null => {
+    const allIndex = selectedKeys.findIndex((option) => option === optionAllKey);
+    if (allIndex !== -1) {
+      return <Fragment>{currentOptions[0].text}</Fragment>;
+    }
+    if (selectedItems?.length) {
+      const items = selectedItems.map((item) => item.text);
+      return <Fragment>{items.join(', ')}</Fragment>;
+    }
+    return null;
+  };
+
+  return (
+    <Dropdown
+      multiSelect
+      options={currentOptions}
+      placeholder={placeholder}
+      selectedKeys={selectedKeys}
+      styles={dropdownStyles}
+      onChange={onOptionSelectionChange}
+      onRenderTitle={onRenderTitle}
+    />
+  );
+};
diff --git a/Composer/packages/client/src/components/WebChat/__tests__/WebChat.test.tsx b/Composer/packages/client/src/components/WebChat/__tests__/WebChat.test.tsx
index e00fdb921e..9d663877d3 100644
--- a/Composer/packages/client/src/components/WebChat/__tests__/WebChat.test.tsx
+++ b/Composer/packages/client/src/components/WebChat/__tests__/WebChat.test.tsx
@@ -8,9 +8,17 @@ import { WebChatComposerProps, WebChatComposer } from '../WebChatComposer';
 import { ConversationService } from '../utils/conversationService';
 import { ChatData } from '../types';
 
-URL.createObjectURL = jest.fn();
+const originalCreateObjectURL = URL.createObjectURL;
 
 describe('<WebChat />', () => {
+  beforeAll(() => {
+    URL.createObjectURL = jest.fn();
+  });
+
+  afterAll(() => {
+    URL.createObjectURL = originalCreateObjectURL;
+  });
+
   it('should not render webchat if no conversation or chat data', async () => {
     const props: WebChatComposerProps = {
       currentConversation: '',
diff --git a/Composer/packages/client/src/components/useDebugPane.ts b/Composer/packages/client/src/components/useDebugPane.ts
index bc01dab744..a335db730d 100644
--- a/Composer/packages/client/src/components/useDebugPane.ts
+++ b/Composer/packages/client/src/components/useDebugPane.ts
@@ -5,36 +5,14 @@ import { useEffect, useState } from 'react';
 
 import { useLocation } from '../utils/hooks';
 
-const pagesToShow = [
-  'dialogs',
-  'language-generation',
-  'language-understanding',
-  'knowledge-base',
-  'botProjectsSettings',
-];
-
 export const useDebugPane = () => {
   const { location: currentLocation } = useLocation();
   const [showDebugPanel, setShowDebugPanel] = useState(false);
 
   useEffect(() => {
     if (currentLocation?.pathname) {
-      let isShow = false;
-      // URL Patterns we parse are /bot/1234.123/dialogs or /bot/1234.123/skill/3434.34/dialogs. Removing the leading slash in pathname to avoid an empty item at the start of the list.
       const result = currentLocation.pathname.replace(/^\/|\/$/g, '').split('/');
-      let pageName = result[2];
-
-      if (result[2] === 'skill') {
-        pageName = result[4];
-      }
-
-      if (pageName) {
-        isShow = pagesToShow.some((pattern: string) => {
-          return pageName.includes(pattern);
-        });
-      }
-
-      setShowDebugPanel(isShow);
+      setShowDebugPanel(result[2] !== 'home');
     }
   }, [currentLocation]);
 
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
new file mode 100644
index 0000000000..4d60abf504
--- /dev/null
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
@@ -0,0 +1,156 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import formatMessage from 'format-message';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import React, { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { FontSizes, SharedColors, NeutralColors } from '@uifabric/fluent-theme';
+import { DiagnosticSeverity } from '@bfc/shared';
+import { FontWeights } from '@uifabric/styling';
+
+import { outputsDebugPanelSelector, rootBotProjectIdSelector } from '../../../../../recoilModel';
+import { DropdownWithAllOption } from '../../../../../components/DropdownWithAllOption/DropdownWithAllOption';
+
+const severityTextStyle = {
+  marginRight: '6px',
+};
+
+const countFontWeight = {
+  fontWeight: FontWeights.bold,
+};
+
+const optionAllKey = 'All';
+
+const getSeverityButtonStyle = (severityType: DiagnosticSeverity, isChecked: boolean): any => {
+  const baseStyle = {
+    root: {
+      padding: '8px 4px',
+      marginRight: '8px',
+      fontSize: FontSizes.size12,
+      fontFamily: 'Segoe UI',
+      textAlign: 'center',
+      border: `1px solid ${NeutralColors.gray20}`,
+      boderRadius: '2px',
+      height: '25px',
+      fontWeight: '500',
+    },
+    icon: {
+      color: isChecked ? SharedColors.red10 : NeutralColors.gray90,
+      fontSize: FontSizes.size16,
+      marginRight: '8px',
+    },
+  };
+
+  if (severityType === DiagnosticSeverity.Warning) {
+    return {
+      ...baseStyle,
+      icon: {
+        ...baseStyle.icon,
+        color: isChecked ? '#F4BD00' : NeutralColors.gray90,
+      },
+    };
+  } else {
+    return baseStyle;
+  }
+};
+
+type DiagnosticsFiltersProps = {
+  showErrors: boolean;
+  projectsToFilter: string[];
+  showWarnings: boolean;
+  setWarningFilter: (value: boolean) => void;
+  setErrorFilter: (value: boolean) => void;
+  setProjectsToFilter: (projects: string[]) => void;
+  errorCount: number;
+  warningCount: number;
+};
+
+export const DiagnosticsFilters: React.FC<DiagnosticsFiltersProps> = (props) => {
+  const {
+    showErrors,
+    showWarnings,
+    setWarningFilter,
+    setErrorFilter,
+    setProjectsToFilter,
+    projectsToFilter,
+    errorCount,
+    warningCount,
+  } = props;
+  const projects = useRecoilValue(outputsDebugPanelSelector);
+  const [projectSelectorOptions, setProjectSelectorOptions] = useState<IDropdownOption[]>([]);
+  const rootBotProjectId = useRecoilValue(rootBotProjectIdSelector);
+
+  useEffect(() => {
+    if (rootBotProjectId) {
+      setProjectsToFilter([rootBotProjectId]);
+    }
+  }, [rootBotProjectId]);
+
+  useEffect(() => {
+    const projectOptions = projects.map(({ projectId, botName }) => {
+      return {
+        key: projectId,
+        text: botName,
+      };
+    });
+    setProjectSelectorOptions(projectOptions);
+  }, [projects]);
+
+  if (!rootBotProjectId) {
+    return null;
+  }
+
+  return (
+    <div
+      css={{
+        display: 'flex',
+        flex: '1 1 auto',
+        width: '100%',
+      }}
+    >
+      <DefaultButton
+        allowDisabledFocus
+        checked={showErrors}
+        iconProps={{ iconName: 'StatusErrorFull' }}
+        styles={getSeverityButtonStyle(DiagnosticSeverity.Error, showErrors)}
+        onClick={() => {
+          setErrorFilter(!showErrors);
+        }}
+      >
+        <span style={severityTextStyle}>{formatMessage('Errors')}</span>
+        <span style={countFontWeight}>{errorCount}</span>
+      </DefaultButton>
+      <DefaultButton
+        allowDisabledFocus
+        toggle
+        checked={showWarnings}
+        iconProps={{ iconName: 'WarningSolid' }}
+        styles={getSeverityButtonStyle(DiagnosticSeverity.Warning, showWarnings)}
+        onClick={() => {
+          setWarningFilter(!showWarnings);
+        }}
+      >
+        <span style={severityTextStyle}>{formatMessage('Warnings')}</span>
+        <span style={countFontWeight}>{warningCount}</span>
+      </DefaultButton>
+      <div
+        css={{
+          marginLeft: 'auto !important',
+        }}
+      >
+        <DropdownWithAllOption
+          dropdownOptions={projectSelectorOptions}
+          optionAllKey={optionAllKey}
+          optionAllText={formatMessage('All bots')}
+          placeholder={formatMessage('Select a project')}
+          selectedKeys={projectsToFilter}
+          setSelectedKeys={setProjectsToFilter}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
index dbe5dbbec6..ffbc187493 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
@@ -9,6 +9,7 @@ import {
   SelectionMode,
   IColumn,
   CheckboxVisibility,
+  ConstrainMode,
 } from 'office-ui-fabric-react/lib/DetailsList';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
@@ -19,14 +20,24 @@ import { FontSizes, SharedColors } from '@uifabric/fluent-theme';
 import { css } from '@emotion/core';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
+import { ScrollablePane } from 'office-ui-fabric-react/lib/ScrollablePane';
 
-import { IDiagnosticInfo } from '../../../../diagnostics/types';
-import { botDisplayNameState, botProjectSpaceSelector, exportSkillModalInfoState } from '../../../../../recoilModel';
+import {
+  botDisplayNameState,
+  botProjectSpaceSelector,
+  exportSkillModalInfoState,
+  localeState,
+  rootBotProjectIdSelector,
+} from '../../../../../recoilModel';
 import { navigateTo } from '../../../../../utils/navigation';
 
+import { IDiagnosticInfo } from './types';
+
 // -------------------- Styles -------------------- //
 
+const maxHeightDetailsList = 45;
+
 const icons = {
   Error: { iconName: 'StatusErrorFull', color: SharedColors.red10 },
   Warning: { iconName: 'WarningSolid', color: SharedColors.yellow10 },
@@ -57,7 +68,7 @@ const typeIcon = (icon) => css`
 `;
 
 const detailList = css`
-  overflow-x: hidden;
+  height: calc(100% - 55px);
 `;
 
 const tableCell = css`
@@ -106,11 +117,13 @@ const BotNameRender: React.FC<{ item: IDiagnosticInfo }> = ({ item }) => {
 export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems }) => {
   const setExportSkillModalInfo = useSetRecoilState(exportSkillModalInfoState);
   const botProjectSpace = useRecoilValue(botProjectSpaceSelector);
+  const rootBotId = useRecoilValue(rootBotProjectIdSelector);
+  const locale = useRecoilValue(localeState(rootBotId ?? ''));
 
-  const getSkillName = (projectId: string) =>
+  const getProjectName = (projectId: string) =>
     botProjectSpace.find((bot) => bot.projectId === projectId)?.name ?? projectId;
 
-  const staticColumns = [
+  const staticColumns: IColumn[] = [
     {
       key: 'Icon',
       name: '',
@@ -137,11 +150,12 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
       isPadded: true,
       isSorted: true,
       isSortedDescending: false,
-      onColumnClick: () => {
+      onColumnClick: (event) => {
         const newColumns = columns.slice();
         newColumns[1].isSorted = true;
         newColumns[1].isSortedDescending = !columns[1].isSortedDescending;
         setColumns(newColumns);
+        event.stopPropagation();
       },
     },
     {
@@ -154,6 +168,10 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
       isResizable: true,
       data: 'string',
       onRender: (item: IDiagnosticInfo) => {
+        let locationPath = item.location;
+        if (item.friendlyLocationBreadcrumb) {
+          locationPath = item.friendlyLocationBreadcrumb.join(' > ');
+        }
         return (
           <div css={tableCell}>
             <Link
@@ -166,7 +184,7 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
                 }
               }}
             >
-              {item.location}
+              {locationPath}
             </Link>
           </div>
         );
@@ -216,30 +234,39 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
     setColumns(staticColumns);
   }, [diagnosticItems]);
 
-  const sortFactor = columns[1].isSortedDescending ? 1 : -1;
-  const displayedDiagnosticItems = diagnosticItems.sort((a, b) => {
-    const aName = getSkillName(a.projectId);
-    const bName = getSkillName(b.projectId);
-    if (aName < bName) {
-      return sortFactor;
-    } else if (aName > bName) {
-      return -sortFactor;
-    } else {
-      return a.location < b.location ? sortFactor : -sortFactor;
-    }
-  });
+  const displayedDiagnosticItems = useMemo(() => {
+    const sortFactor = columns[1].isSortedDescending ? 1 : -1;
+    return diagnosticItems.sort((a, b) => {
+      // Error before Warning
+      const severityComparator = a.severity.localeCompare(b.severity);
+      if (severityComparator === 0) {
+        // Sort by name
+        return sortFactor * getProjectName(a.projectId).localeCompare(getProjectName(b.projectId), locale);
+      }
+      return severityComparator;
+    });
+  }, [diagnosticItems, columns]);
 
   return (
-    <DetailsList
-      isHeaderVisible
-      checkboxVisibility={CheckboxVisibility.hidden}
-      columns={columns}
-      css={detailList}
-      items={displayedDiagnosticItems}
-      layoutMode={DetailsListLayoutMode.justified}
-      selectionMode={SelectionMode.single}
-      setKey="none"
-      onRenderDetailsHeader={onRenderDetailsHeader}
-    />
+    <ScrollablePane>
+      <DetailsList
+        isHeaderVisible
+        checkboxVisibility={CheckboxVisibility.hidden}
+        columns={columns}
+        constrainMode={ConstrainMode.unconstrained}
+        css={detailList}
+        items={displayedDiagnosticItems}
+        layoutMode={DetailsListLayoutMode.justified}
+        selectionMode={SelectionMode.single}
+        setKey="none"
+        styles={{
+          root: {
+            maxHeight: `calc(100% - ${maxHeightDetailsList}px)`,
+            selectors: {},
+          },
+        }}
+        onRenderDetailsHeader={onRenderDetailsHeader}
+      />
+    </ScrollablePane>
   );
 };
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx
index 3524d5d31b..2baa243c75 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx
@@ -4,12 +4,12 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { useSetRecoilState } from 'recoil';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { FontSizes, SharedColors } from '@uifabric/fluent-theme';
 import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
 import formatMessage from 'format-message';
 
-import { debugPanelExpansionState, debugPanelActiveTabState } from '../../../../../recoilModel';
+import { debugPanelExpansionState, debugPanelActiveTabState, dispatcherState } from '../../../../../recoilModel';
 import { DiagnosticsTabKey } from '../types';
 
 import { useDiagnosticsStatistics } from './useDiagnostics';
@@ -21,6 +21,7 @@ export const DiagnosticsStatus = () => {
   const setExpansion = useSetRecoilState(debugPanelExpansionState);
   const setActiveTab = useSetRecoilState(debugPanelActiveTabState);
   const { errorsCount, warningsCount } = useDiagnosticsStatistics();
+  const { setWarningDiagnosticsFilter, setErrorDiagnosticsFilter } = useRecoilValue(dispatcherState);
 
   if (!errorsCount && !warningsCount) return null;
 
@@ -49,24 +50,25 @@ export const DiagnosticsStatus = () => {
       css={{ height: '100%', display: 'flex', alignItems: 'center', paddingLeft: '8px' }}
       data-testid="diagnostics-tab-header--collapsed"
     >
-      <DefaultButton
-        ariaLabel={`${errorLabel} ${warningLabel}`}
-        styles={{
-          root: {
-            height: '36px',
-            padding: '0 5px',
-            minWidth: '20px',
-            border: 'none',
-            marginRight: '8px',
-          },
-          label: { fontSize: FontSizes.size18, fontFamily: 'Segoe UI', lineHeight: '20px' },
-        }}
-        onClick={() => {
-          setExpansion(true);
-          setActiveTab(DiagnosticsTabKey);
-        }}
-      >
-        {errorsCount > 0 && (
+      {errorsCount > 0 && (
+        <DefaultButton
+          ariaLabel={`${errorLabel}`}
+          styles={{
+            root: {
+              height: '36px',
+              padding: '0',
+              minWidth: '20px',
+              border: 'none',
+            },
+            label: { fontSize: FontSizes.size18, fontFamily: 'Segoe UI', lineHeight: '20px' },
+          }}
+          onClick={() => {
+            setErrorDiagnosticsFilter(true);
+            setWarningDiagnosticsFilter(false);
+            setExpansion(true);
+            setActiveTab(DiagnosticsTabKey);
+          }}
+        >
           <span css={{ marginRight: '10px', display: 'flex', alignItems: 'center' }}>
             <FontIcon
               css={{ color: SharedColors.red10, fontSize: FontSizes.size18, lineHeight: '18px', marginRight: '5px' }}
@@ -74,17 +76,41 @@ export const DiagnosticsStatus = () => {
             />
             {errorsCount}
           </span>
-        )}
-        {warningsCount > 0 && (
+        </DefaultButton>
+      )}
+
+      {warningsCount > 0 && (
+        <DefaultButton
+          ariaLabel={`${warningLabel}`}
+          styles={{
+            root: {
+              height: '36px',
+              minWidth: '20px',
+              border: 'none',
+            },
+            label: { fontSize: FontSizes.size18, fontFamily: 'Segoe UI', lineHeight: '20px' },
+          }}
+          onClick={() => {
+            setWarningDiagnosticsFilter(true);
+            setErrorDiagnosticsFilter(false);
+            setExpansion(true);
+            setActiveTab(DiagnosticsTabKey);
+          }}
+        >
           <span css={{ display: 'flex', alignItems: 'center' }}>
             <FontIcon
-              css={{ color: SharedColors.yellow10, fontSize: FontSizes.size18, lineHeight: '18px', marginRight: '5px' }}
+              css={{
+                color: `#F4BD00`,
+                fontSize: FontSizes.size18,
+                lineHeight: '18px',
+                marginRight: '5px',
+              }}
               iconName="WarningSolid"
             />
             {warningsCount}
           </span>
-        )}
-      </DefaultButton>
+        </DefaultButton>
+      )}
     </div>
   );
 };
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx
index c3a0fb542c..1e752e4daf 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx
@@ -3,46 +3,99 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { Split } from '@geoffcox/react-splitter';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
 
-import { renderThinSplitter } from '../../../../../components/Split/ThinSplitter';
 import { DebugPanelTabHeaderProps } from '../types';
+import { dispatcherState, showErrorDiagnosticsState, showWarningDiagnosticsState } from '../../../../../recoilModel';
 
+import { IDiagnosticInfo } from './types';
 import { DiagnosticList } from './DiagnosticList';
-import { DiagnosticsStatusFilter } from './DiagnosticsStatusFilter';
 import { Severity, useDiagnosticsData } from './useDiagnostics';
+import { DiagnosticsFilters } from './DiagnosticFilters';
+
+const severityFilterHeight = 45;
 
 export const DiagnosticsContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive }) => {
-  const [filterType, setFilterType] = useState(Severity.Error);
   const diagnostics = useDiagnosticsData();
+  const { setWarningDiagnosticsFilter, setErrorDiagnosticsFilter } = useRecoilValue(dispatcherState);
+  const showWarnings = useRecoilValue(showWarningDiagnosticsState);
+  const showErrors = useRecoilValue(showErrorDiagnosticsState);
+  const [projectsToFilter, setProjectsToFilter] = useState<string[]>([]);
+  const [errorCount, setErrorCount] = useState<number>(0);
+  const [warningCount, setWarningCount] = useState<number>(0);
+  const [filteredDiagnostics, setFilteredDiagnostics] = useState<IDiagnosticInfo[]>([]);
+
+  useEffect(() => {
+    let errorCt = 0;
+    let warningCt = 0;
+    const filteredItems = diagnostics.filter((diagnostic) => {
+      const projectFilter = projectsToFilter.includes(diagnostic.projectId);
+      if (!projectFilter) {
+        return false;
+      }
 
-  const changeFilterType = (type) => {
-    setFilterType(type);
-  };
+      let errorFilter = false;
+      if (diagnostic.severity === Severity.Error) {
+        errorCt++;
+        if (showErrors) {
+          errorFilter = true;
+        }
+      }
+
+      let warningFilter = false;
+      if (diagnostic.severity === Severity.Warning) {
+        warningCt++;
+        if (showWarnings) {
+          warningFilter = true;
+        }
+      }
+      return warningFilter || errorFilter;
+    });
+    setErrorCount(errorCt);
+    setWarningCount(warningCt);
+    setFilteredDiagnostics(filteredItems);
+  }, [projectsToFilter, showWarnings, showErrors, diagnostics]);
 
   if (!isActive) {
     return null;
   }
 
   return (
-    <Split
-      resetOnDoubleClick
+    <div
       css={{
         height: '100%',
-        display: !isActive ? 'none' : 'block',
-        overflow: 'auto',
+        width: '100%',
       }}
-      initialPrimarySize="160px"
-      minPrimarySize="140px"
-      minSecondarySize="600px"
-      renderSplitter={renderThinSplitter}
-      splitterSize="5px"
     >
-      <DiagnosticsStatusFilter filterType={filterType} onChangeFilterType={changeFilterType} />
-      <div data-testid="DiagnosticList-Container" style={{ height: '100%', overflow: 'auto' }}>
-        <DiagnosticList diagnosticItems={diagnostics.filter((d) => d.severity === filterType)} />
+      <div
+        css={{
+          height: `${severityFilterHeight}px`,
+          display: 'flex',
+          flex: '1 1 auto',
+          alignItems: 'center',
+          padding: '0 16px',
+        }}
+      >
+        <DiagnosticsFilters
+          errorCount={errorCount}
+          projectsToFilter={projectsToFilter}
+          setErrorFilter={setErrorDiagnosticsFilter}
+          setProjectsToFilter={setProjectsToFilter}
+          setWarningFilter={setWarningDiagnosticsFilter}
+          showErrors={showErrors}
+          showWarnings={showWarnings}
+          warningCount={warningCount}
+        />
+      </div>
+      <div
+        css={{
+          height: `calc(100% - ${severityFilterHeight}px)`,
+          position: 'relative',
+        }}
+      >
+        <DiagnosticList diagnosticItems={filteredDiagnostics} />
       </div>
-    </Split>
+    </div>
   );
 };
diff --git a/Composer/packages/client/src/pages/diagnostics/types.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/types.ts
similarity index 81%
rename from Composer/packages/client/src/pages/diagnostics/types.ts
rename to Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/types.ts
index a3452820a4..be2f0c8566 100644
--- a/Composer/packages/client/src/pages/diagnostics/types.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/types.ts
@@ -1,13 +1,13 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { createSingleMessage, isDiagnosticWithInRange } from '@bfc/indexers';
-import { Diagnostic, DialogInfo, LuFile, LgFile, LgNamePattern } from '@bfc/shared';
+import { Diagnostic, DialogInfo, LuFile, LgFile, LgNamePattern, ITrigger } from '@bfc/shared';
 import get from 'lodash/get';
 import formatMessage from 'format-message';
 
-import { getBaseName } from '../../utils/fileUtil';
-import { replaceDialogDiagnosticLabel } from '../../utils/dialogUtil';
-import { convertPathToUrl, createBotSettingUrl } from '../../utils/navigation';
+import { getBaseName } from '../../../../../utils/fileUtil';
+import { replaceDialogDiagnosticLabel } from '../../../../../utils/dialogUtil';
+import { convertPathToUrl, createBotSettingUrl } from '../../../../../utils/navigation';
 export const DiagnosticSeverity = ['Error', 'Warning']; //'Information', 'Hint'
 
 export enum DiagnosticType {
@@ -35,8 +35,39 @@ export interface IDiagnosticInfo {
   getUrl: (hash?: string) => string;
   learnMore?: string;
   title?: string;
+  friendlyLocationBreadcrumb?: string[];
 }
 
+const getFriendlyPath = (dialogPath: string | undefined, dialogs: DialogInfo[]) => {
+  const breadcrumb: string[] = [];
+  try {
+    if (!dialogPath) {
+      return [];
+    }
+    const [dialogName, triggerPath, actionPath] = dialogPath.split('#')[0].split('.');
+    if (dialogName) {
+      const matchedDialog = dialogs.find(({ displayName }) => displayName === dialogName);
+      if (matchedDialog && triggerPath) {
+        breadcrumb.push(matchedDialog.displayName);
+        const trigger: ITrigger = get(matchedDialog, triggerPath, '');
+        if (trigger.displayName) {
+          breadcrumb.push(trigger.displayName);
+        }
+
+        if (trigger && actionPath) {
+          const action = get(trigger.content, actionPath, '');
+          if (action.$kind) {
+            breadcrumb.push(action.$kind);
+          }
+        }
+      }
+    }
+    return breadcrumb;
+  } catch (ex) {
+    return [];
+  }
+};
+
 export abstract class DiagnosticInfo implements IDiagnosticInfo {
   rootProjectId: string;
   projectId: string;
@@ -51,6 +82,7 @@ export abstract class DiagnosticInfo implements IDiagnosticInfo {
   getUrl = () => '';
   learnMore?: string;
   title?: string;
+  friendlyLocationBreadcrumb?: string[];
 
   constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
     this.rootProjectId = rootProjectId;
@@ -68,6 +100,9 @@ export class BotDiagnostic extends DiagnosticInfo {
   constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
     super(rootProjectId, projectId, id, location, diagnostic);
     this.message = diagnostic.message;
+    if (this.location === 'manifest.json') {
+      this.friendlyLocationBreadcrumb = [formatMessage('Skill Manifest')];
+    }
   }
 
   getUrl = () => {
@@ -79,7 +114,6 @@ export class BotDiagnostic extends DiagnosticInfo {
         break;
       }
     }
-
     return url;
   };
 }
@@ -134,6 +168,7 @@ export class SettingDiagnostic extends DiagnosticInfo {
     super(rootProjectId, projectId, id, location, diagnostic);
     this.message = `${replaceDialogDiagnosticLabel(diagnostic.path)} ${diagnostic.message}`;
     this.dialogPath = diagnostic.path;
+    this.friendlyLocationBreadcrumb = ['Settings'];
   }
   getUrl = (hash?: string) => {
     return createBotSettingUrl(this.rootProjectId, this.projectId, hash);
@@ -154,7 +189,12 @@ export class LgDiagnostic extends DiagnosticInfo {
     super(rootProjectId, projectId, id, location, diagnostic);
     this.message = createSingleMessage(diagnostic);
     this.dialogPath = this.findDialogPath(lgFile, dialogs, diagnostic);
+    const friendlyPath = getFriendlyPath(this.dialogPath, dialogs);
+    if (friendlyPath.length) {
+      this.friendlyLocationBreadcrumb = friendlyPath;
+    }
   }
+
   private findDialogPath(lgFile: LgFile, dialogs: DialogInfo[], diagnostic: Diagnostic) {
     const mappedTemplate = lgFile.templates.find(
       (t) =>
@@ -167,6 +207,7 @@ export class LgDiagnostic extends DiagnosticInfo {
       const dialog = dialogs.find((d) => d.lgFile === this.resourceId);
       const lgTemplate = dialog ? dialog.lgTemplates.find((lg) => lg.name === lgTemplateName) : null;
       const path = lgTemplate ? lgTemplate.path : '';
+
       return path;
     }
   }
@@ -196,6 +237,10 @@ export class LuDiagnostic extends DiagnosticInfo {
   ) {
     super(rootProjectId, projectId, id, location, diagnostic);
     this.dialogPath = this.findDialogPath(luFile, dialogs, diagnostic);
+    const friendlyPath = getFriendlyPath(this.dialogPath, dialogs);
+    if (friendlyPath.length) {
+      this.friendlyLocationBreadcrumb = friendlyPath;
+    }
     this.message = createSingleMessage(diagnostic);
   }
 
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useAutoFix.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useAutoFix.ts
index 5766968836..83131de263 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useAutoFix.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useAutoFix.ts
@@ -7,9 +7,9 @@ import cloneDeep from 'lodash/cloneDeep';
 import { useRecoilValue } from 'recoil';
 import { useEffect } from 'react';
 
-import { DiagnosticType, SchemaDiagnostic } from '../../../../diagnostics/types';
 import { botProjectSpaceSelector, dispatcherState } from '../../../../../recoilModel';
 
+import { DiagnosticType, SchemaDiagnostic } from './types';
 import { useDiagnosticsData } from './useDiagnostics';
 
 export const useAutoFix = () => {
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts
index 68b0712153..b9f37a86f3 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts
@@ -3,9 +3,10 @@
 
 import { useRecoilValue } from 'recoil';
 
-import { IDiagnosticInfo } from '../../../../diagnostics/types';
 import { allDiagnosticsSelectorFamily } from '../../../../../recoilModel';
-import { DiagnosticSeverity } from '../../../../diagnostics/types';
+
+import { IDiagnosticInfo } from './types';
+import { DiagnosticSeverity } from './types';
 
 export const Severity = {
   Error: DiagnosticSeverity[0],
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
index b7fa7dd8d1..0d6536d799 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
@@ -19,12 +19,14 @@ import {
   webChatInspectionDataState,
   botStatusState,
   isWebChatPanelVisibleState,
+  runningBotsSelector,
 } from '../../../../../recoilModel';
 import { DebugPanelTabHeaderProps } from '../types';
 import { WebChatInspectionData } from '../../../../../recoilModel/types';
 import { BotStatus } from '../../../../../constants';
 import { useBotOperations } from '../../../../../components/BotRuntimeController/useBotOperations';
 import { usePVACheck } from '../../../../../hooks/usePVACheck';
+import { isBotStarting } from '../../../../../components/BotRuntimeController/utils';
 
 import { WebChatInspectorPane } from './WebChatInspectorPane';
 import { WebChatActivityLogItem } from './WebChatActivityLogItem';
@@ -67,6 +69,7 @@ const itemIsSelected = (item: ConversationTrafficItem, currentInspectionData?: W
 
 // R12: We are showing Errors from the root bot only.
 export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive }) => {
+  const runningBots = useRecoilValue(runningBotsSelector);
   const currentProjectId = useRecoilValue(rootBotProjectIdSelector);
   const rawWebChatTraffic = useRecoilValue(webChatTrafficState(currentProjectId ?? ''));
   const inspectionData = useRecoilValue(webChatInspectionDataState(currentProjectId ?? ''));
@@ -199,16 +202,20 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
       return null;
     }
 
-    if (currentStatus === BotStatus.inactive) {
+    if (currentStatus === BotStatus.inactive || currentStatus === BotStatus.failed) {
       return (
         <div css={emptyStateMessageContainer}>
-          {formatMessage.rich('Your bot project is not running. <actionButton>Start your bot</actionButton>', {
-            actionButton: ({ children }) => (
-              <ActionButton key="webchat-tab-startbot" styles={actionButton} type="button" onClick={startAllBots}>
-                {children}
-              </ActionButton>
-            ),
-          })}
+          {formatMessage.rich(
+            'Your bot project is not running. <actionButton>{ total, plural, =1 {Start bot}other {Start all bots}}</actionButton>',
+            {
+              total: runningBots.totalBots,
+              actionButton: ({ children }) => (
+                <ActionButton key="webchat-tab-startbot" styles={actionButton} type="button" onClick={startAllBots}>
+                  {children}
+                </ActionButton>
+              ),
+            }
+          )}
         </div>
       );
     }
@@ -226,8 +233,18 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
         </div>
       );
     }
+
+    if (isBotStarting(currentStatus)) {
+      return (
+        <div css={emptyStateMessageContainer}>
+          {formatMessage('{total, plural, =1 {Starting your bot...}other {Starting your bots...}}', {
+            total: runningBots.totalBots,
+          })}
+        </div>
+      );
+    }
     return null;
-  }, [currentStatus]);
+  }, [currentStatus, currentProjectId]);
 
   return (
     <div css={logContainer(isActive)}>
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/index.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/index.ts
index f17f2ca037..8672d4e1b2 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/index.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/index.ts
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { TabExtensionConfig } from './types';
-import { DiagnosticsTabConfig } from './DiagnosticsTab';
+import { DiagnosticsTabConfig } from './DiagnosticsTab/';
 import { WebChatLogTabConfig } from './WebChatLog/config';
 import { RuntimeOutputTabConfig } from './RuntimeOutputLog';
 
diff --git a/Composer/packages/client/src/pages/diagnostics/DiagnosticFilter.tsx b/Composer/packages/client/src/pages/diagnostics/DiagnosticFilter.tsx
deleted file mode 100644
index a7f9fb5fb0..0000000000
--- a/Composer/packages/client/src/pages/diagnostics/DiagnosticFilter.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { Dropdown, IDropdownOption, IDropdownStyles } from 'office-ui-fabric-react/lib/Dropdown';
-import formatMessage from 'format-message';
-
-import { DiagnosticSeverity } from './types';
-
-export const dropdownStyles: Partial<IDropdownStyles> = {
-  dropdown: { width: 180, marginLeft: 'auto' },
-};
-
-const createOptions = (): IDropdownOption[] => {
-  const defaultOptions: IDropdownOption[] = [
-    {
-      key: formatMessage('Show All Diagnostics'),
-      text: formatMessage('All'),
-      ariaLabel: formatMessage('Show All Diagnostics'),
-      data: '',
-      isSelected: true,
-    },
-  ];
-  DiagnosticSeverity.forEach((item) => {
-    defaultOptions.push({
-      key: item,
-      text: item,
-      data: item,
-      ariaLabel: formatMessage('Show {item} Diagnostics', { item: item }),
-    });
-  });
-  return defaultOptions;
-};
-
-export interface IDiagnosticFilter {
-  onChange: (text: string) => void;
-}
-
-export const DiagnosticFilter: React.FC<IDiagnosticFilter> = (props) => {
-  const { onChange } = props;
-
-  return (
-    <Dropdown
-      ariaLabel={formatMessage('Diagnostic type')}
-      data-testid="notifications-dropdown"
-      options={createOptions()}
-      styles={dropdownStyles}
-      onChange={(event, option) => {
-        if (option) onChange(option.data);
-      }}
-    />
-  );
-};
diff --git a/Composer/packages/client/src/pages/diagnostics/DiagnosticList.tsx b/Composer/packages/client/src/pages/diagnostics/DiagnosticList.tsx
deleted file mode 100644
index 154eec99d8..0000000000
--- a/Composer/packages/client/src/pages/diagnostics/DiagnosticList.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import {
-  DetailsList,
-  DetailsListLayoutMode,
-  SelectionMode,
-  IColumn,
-  CheckboxVisibility,
-} from 'office-ui-fabric-react/lib/DetailsList';
-import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
-import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
-import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
-import formatMessage from 'format-message';
-import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
-import { FontSizes, SharedColors } from '@uifabric/fluent-theme';
-import { css } from '@emotion/core';
-
-import { IDiagnosticInfo } from './types';
-
-// -------------------- Styles -------------------- //
-
-const icons = {
-  Error: { iconName: 'StatusErrorFull', color: SharedColors.red10 },
-  Warning: { iconName: 'WarningSolid', color: SharedColors.yellow10 },
-};
-
-const diagnostic = mergeStyleSets({
-  typeIconHeaderIcon: {
-    padding: 0,
-    fontSize: FontSizes.size16,
-  },
-  typeIconCell: {
-    textAlign: 'center',
-    cursor: 'pointer',
-  },
-  columnCell: {
-    cursor: 'pointer',
-  },
-});
-
-const typeIcon = (icon) => css`
-  vertical-align: middle;
-  font-size: 16px;
-  width: 24px;
-  height: 24px;
-  line-height: 24px;
-  color: ${icon.color};
-  cursor: pointer;
-`;
-
-const detailList = css`
-  overflow-x: hidden;
-`;
-
-const tableCell = css`
-  outline: none;
-  :focus {
-    outline: rgb(102, 102, 102) solid 1px;
-  }
-`;
-
-const content = css`
-  outline: none;
-`;
-
-// -------------------- Diagnosticist -------------------- //
-export interface IDiagnosticListProps {
-  diagnosticItems: IDiagnosticInfo[];
-  onItemClick: (item: IDiagnosticInfo) => void;
-}
-
-const columns: IColumn[] = [
-  {
-    key: 'Icon',
-    name: '',
-    className: diagnostic.typeIconCell,
-    iconClassName: diagnostic.typeIconHeaderIcon,
-    fieldName: 'icon',
-    minWidth: 30,
-    maxWidth: 30,
-    onRender: (item: IDiagnosticInfo) => {
-      const icon = icons[item.severity];
-      return <FontIcon css={typeIcon(icon)} iconName={icon.iconName} />;
-    },
-  },
-
-  {
-    key: 'DiagnosticType',
-    name: formatMessage('Type'),
-    className: diagnostic.columnCell,
-    fieldName: 'type',
-    minWidth: 70,
-    maxWidth: 90,
-    isRowHeader: true,
-    isResizable: true,
-    data: 'string',
-    onRender: (item: IDiagnosticInfo) => {
-      return (
-        <div data-is-focusable css={tableCell}>
-          <div
-            aria-label={formatMessage(`This is a {severity} diagnostic`, { severity: item.severity })}
-            css={content}
-            tabIndex={-1}
-          >
-            {item.severity}
-          </div>
-        </div>
-      );
-    },
-    isPadded: true,
-  },
-  {
-    key: 'DiagnosticLocation',
-    name: formatMessage('Location'),
-    className: diagnostic.columnCell,
-    fieldName: 'location',
-    minWidth: 70,
-    maxWidth: 90,
-    isResizable: true,
-    data: 'string',
-    onRender: (item: IDiagnosticInfo) => {
-      return (
-        <div data-is-focusable css={tableCell}>
-          <div
-            aria-label={formatMessage(`location is {location}`, { location: item.location })}
-            css={content}
-            tabIndex={-1}
-          >
-            {item.location}
-          </div>
-        </div>
-      );
-    },
-    isPadded: true,
-  },
-  {
-    key: 'DiagnosticDetail',
-    name: formatMessage('Message'),
-    className: diagnostic.columnCell,
-    fieldName: 'message',
-    minWidth: 70,
-    maxWidth: 90,
-    isResizable: true,
-    isCollapsible: true,
-    isMultiline: true,
-    data: 'string',
-    onRender: (item: IDiagnosticInfo) => {
-      return (
-        <div data-is-focusable css={tableCell}>
-          <div
-            aria-label={formatMessage(`Diagnostic Message {msg}`, { msg: item.message })}
-            css={content}
-            tabIndex={-1}
-          >
-            {item.message}
-          </div>
-        </div>
-      );
-    },
-    isPadded: true,
-  },
-];
-
-function onRenderDetailsHeader(props, defaultRender) {
-  return (
-    <Sticky isScrollSynced stickyPosition={StickyPositionType.Header}>
-      {defaultRender({
-        ...props,
-        onRenderColumnHeaderTooltip: (tooltipHostProps) => <TooltipHost {...tooltipHostProps} />,
-      })}
-    </Sticky>
-  );
-}
-
-export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems, onItemClick }) => {
-  return (
-    <DetailsList
-      isHeaderVisible
-      checkboxVisibility={CheckboxVisibility.hidden}
-      columns={columns}
-      css={detailList}
-      items={diagnosticItems}
-      layoutMode={DetailsListLayoutMode.justified}
-      selectionMode={SelectionMode.single}
-      setKey="none"
-      onItemInvoked={onItemClick}
-      onRenderDetailsHeader={onRenderDetailsHeader}
-    />
-  );
-};
diff --git a/Composer/packages/client/src/pages/diagnostics/Diagnostics.tsx b/Composer/packages/client/src/pages/diagnostics/Diagnostics.tsx
deleted file mode 100644
index 4abe84cad4..0000000000
--- a/Composer/packages/client/src/pages/diagnostics/Diagnostics.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { useState } from 'react';
-import { RouteComponentProps } from '@reach/router';
-import formatMessage from 'format-message';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-
-import { Page } from '../../components/Page';
-import { diagnosticNavLinksSelector } from '../../recoilModel/selectors/diagnosticsPageSelector';
-import { exportSkillModalInfoState } from '../../recoilModel';
-import { navigateTo } from '../../utils/navigation';
-
-import { DiagnosticsTable } from './DiagnosticsTable';
-import { DiagnosticFilter } from './DiagnosticFilter';
-import { IDiagnosticInfo } from './types';
-
-const Diagnostics: React.FC<RouteComponentProps<{ projectId: string; skillId: string }>> = (props) => {
-  const [showType, setShowType] = useState('');
-  const setExportSkillModalInfo = useSetRecoilState(exportSkillModalInfoState);
-  const navLinks = useRecoilValue(diagnosticNavLinksSelector);
-  const projectId = (props.skillId ?? props.projectId) as string;
-
-  const handleItemClick = (item: IDiagnosticInfo) => {
-    navigateTo(item.getUrl(item.dialogPath));
-    if (item.location === 'manifest.json') {
-      setExportSkillModalInfo(item.projectId);
-    }
-  };
-
-  const onRenderHeaderContent = () => {
-    return <DiagnosticFilter onChange={setShowType} />;
-  };
-
-  return (
-    <Page
-      data-testid="LUPage"
-      mainRegionName={formatMessage('Diagnostic List')}
-      navLinks={navLinks}
-      navRegionName={formatMessage('Diagnostics Pane')}
-      pageMode={'diagnostics'}
-      title={formatMessage('Diagnostics')}
-      toolbarItems={[]}
-      onRenderHeaderContent={onRenderHeaderContent}
-    >
-      <DiagnosticsTable projectId={projectId} showType={showType} onItemClick={handleItemClick} />
-    </Page>
-  );
-};
-
-export default Diagnostics;
diff --git a/Composer/packages/client/src/pages/diagnostics/DiagnosticsTable.tsx b/Composer/packages/client/src/pages/diagnostics/DiagnosticsTable.tsx
deleted file mode 100644
index fad4e167b5..0000000000
--- a/Composer/packages/client/src/pages/diagnostics/DiagnosticsTable.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
-import { useMemo, useState } from 'react';
-import formatMessage from 'format-message';
-import { RouteComponentProps } from '@reach/router';
-import { css } from '@emotion/core';
-import { useRecoilValue } from 'recoil';
-
-import { Pagination } from '../../components/Pagination';
-import { diagnosticsSelectorFamily } from '../../recoilModel';
-
-import { DiagnosticList } from './DiagnosticList';
-import { IDiagnosticInfo } from './types';
-
-// -------------------- Styles -------------------- //
-
-const listRoot = css`
-  position: relative;
-  overflow-y: auto;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-const tableView = css`
-  position: relative;
-  flex-grow: 1;
-`;
-
-// -------------------- Diagnosticist -------------------- //
-export interface IDiagnosticListProps extends RouteComponentProps {
-  projectId: string;
-  showType: string;
-  onItemClick: (item: IDiagnosticInfo) => void;
-}
-
-const itemCount = 10;
-
-export const DiagnosticsTable: React.FC<IDiagnosticListProps> = (props) => {
-  const { onItemClick, projectId, showType } = props;
-  const diagnostics = useRecoilValue(diagnosticsSelectorFamily(projectId));
-  const availableDiagnostics = showType ? diagnostics.filter((x) => x.severity === showType) : diagnostics;
-  const [pageIndex, setPageIndex] = useState<number>(1);
-
-  const pageCount: number = useMemo(() => {
-    return Math.ceil(availableDiagnostics.length / itemCount) || 1;
-  }, [availableDiagnostics]);
-
-  const showItems = availableDiagnostics.slice((pageIndex - 1) * itemCount, pageIndex * itemCount);
-
-  return (
-    <div css={listRoot} data-testid="diagnostics-table-view" role="main">
-      <div aria-label={formatMessage('Diagnostic List')} css={tableView} role="region">
-        <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
-          <DiagnosticList diagnosticItems={showItems} onItemClick={onItemClick} />
-        </ScrollablePane>
-      </div>
-      <Pagination pageCount={pageCount} onChange={setPageIndex} />
-    </div>
-  );
-};
diff --git a/Composer/packages/client/src/recoilModel/atoms/appState.ts b/Composer/packages/client/src/recoilModel/atoms/appState.ts
index 06d887a4e1..8b18f4b77e 100644
--- a/Composer/packages/client/src/recoilModel/atoms/appState.ts
+++ b/Composer/packages/client/src/recoilModel/atoms/appState.ts
@@ -369,3 +369,17 @@ export const showGetStartedTeachingBubbleState = atom<boolean>({
   key: getFullyQualifiedKey('showGetStartedTeachingBubbleState'),
   default: false,
 });
+export const showErrorDiagnosticsState = atom<boolean>({
+  key: getFullyQualifiedKey('showErrorDiagnostics'),
+  default: true,
+});
+
+export const showWarningDiagnosticsState = atom<boolean>({
+  key: getFullyQualifiedKey('showWarningDiagnostics'),
+  default: false,
+});
+
+export const projectsForDiagnosticsFilterState = atom<string[]>({
+  key: getFullyQualifiedKey('projectsForDiagnosticsFilter'),
+  default: [],
+});
diff --git a/Composer/packages/client/src/recoilModel/dispatchers/application.ts b/Composer/packages/client/src/recoilModel/dispatchers/application.ts
index f6af7d2d97..e347a4effb 100644
--- a/Composer/packages/client/src/recoilModel/dispatchers/application.ts
+++ b/Composer/packages/client/src/recoilModel/dispatchers/application.ts
@@ -19,6 +19,9 @@ import {
   userHasNodeInstalledState,
   applicationErrorState,
   showGetStartedTeachingBubbleState,
+  showErrorDiagnosticsState,
+  showWarningDiagnosticsState,
+  projectsForDiagnosticsFilterState,
 } from '../atoms/appState';
 import { AppUpdaterStatus, CreationFlowStatus, CreationFlowType } from '../../constants';
 import OnboardingState from '../../utils/onboardingStorage';
@@ -158,6 +161,18 @@ export const applicationDispatcher = () => {
     callbackHelpers.set(showGetStartedTeachingBubbleState, show);
   });
 
+  const setErrorDiagnosticsFilter = useRecoilCallback(({ set }: CallbackInterface) => (value: boolean) => {
+    set(showErrorDiagnosticsState, value);
+  });
+
+  const setWarningDiagnosticsFilter = useRecoilCallback(({ set }: CallbackInterface) => (value: boolean) => {
+    set(showWarningDiagnosticsState, value);
+  });
+
+  const setProjectsForDiagnosticsFilter = useRecoilCallback(({ set }: CallbackInterface) => (projectIds: string[]) => {
+    set(projectsForDiagnosticsFilterState, projectIds);
+  });
+
   return {
     checkNodeVersion,
     setAppUpdateStatus,
@@ -175,5 +190,8 @@ export const applicationDispatcher = () => {
     setDebugPanelExpansion,
     setActiveTabInDebugPanel,
     setShowGetStartedTeachingBubble,
+    setErrorDiagnosticsFilter,
+    setWarningDiagnosticsFilter,
+    setProjectsForDiagnosticsFilter,
   };
 };
diff --git a/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts b/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
index ab84f705dd..afee359159 100644
--- a/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
@@ -5,11 +5,11 @@ import { BotIndexer, validateSchema } from '@bfc/indexers';
 import { selectorFamily, selector } from 'recoil';
 import lodashGet from 'lodash/get';
 import formatMessage from 'format-message';
-import { getFriendlyName } from '@bfc/shared';
+import { getFriendlyName, DialogInfo } from '@bfc/shared';
 
 import { getReferredLuFiles } from '../../utils/luUtil';
 import { INavTreeItem } from '../../components/NavTree';
-import { botDisplayNameState, dialogIdsState } from '../atoms/botState';
+import { botDisplayNameState, dialogIdsState, dialogState } from '../atoms/botState';
 import {
   DialogDiagnostic,
   LgDiagnostic,
@@ -20,7 +20,7 @@ import {
   SettingDiagnostic,
   SkillSettingDiagnostic,
   SchemaDiagnostic,
-} from '../../pages/diagnostics/types';
+} from '../../pages/design/DebugPanel/TabExtensions/DiagnosticsTab/types';
 import {
   botDiagnosticsState,
   botProjectFileState,
@@ -168,11 +168,16 @@ export const dialogsDiagnosticsSelectorFamily = selectorFamily({
 
     const rootProjectId = get(rootBotProjectIdSelector) ?? projectId;
     const dialogIds = get(dialogIdsState(projectId));
+
     const diagnosticList: DiagnosticInfo[] = [];
 
     dialogIds.forEach((dialogId: string) => {
       const diagnostics = get(dialogDiagnosticsSelectorFamily({ projectId, dialogId })) || [];
       diagnostics.forEach((diagnostic) => {
+        const dialog: DialogInfo = get(dialogState({ projectId, dialogId }));
+        const splitPaths = diagnostic.path?.split('.');
+        console.log(splitPaths);
+
         const location = `${dialogId}.dialog`;
         diagnosticList.push(new DialogDiagnostic(rootProjectId, projectId, dialogId, location, diagnostic));
       });
diff --git a/Composer/packages/client/src/recoilModel/selectors/dialogs.ts b/Composer/packages/client/src/recoilModel/selectors/dialogs.ts
index 361881365a..e523c2c480 100644
--- a/Composer/packages/client/src/recoilModel/selectors/dialogs.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/dialogs.ts
@@ -13,7 +13,8 @@ export const dialogsSelectorFamily = selectorFamily<DialogInfo[], string>({
 
     return dialogIds
       .map((dialogId) => {
-        return get(dialogState({ projectId, dialogId }));
+        const result = get(dialogState({ projectId, dialogId }));
+        return result;
       })
       .filter((d) => !d.isTopic);
   },
diff --git a/Composer/packages/client/src/recoilModel/selectors/localRuntimeBuilder.ts b/Composer/packages/client/src/recoilModel/selectors/localRuntimeBuilder.ts
index 8c060d7881..d8d07b4880 100644
--- a/Composer/packages/client/src/recoilModel/selectors/localRuntimeBuilder.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/localRuntimeBuilder.ts
@@ -69,6 +69,9 @@ export const buildConfigurationSelector = selector({
   get: ({ get }) => {
     const localProjects = get(localBotsWithoutErrorsSelector);
     const rootBotId = get(rootBotProjectIdSelector);
+    if (!rootBotId) {
+      return [];
+    }
 
     return localProjects
       .filter((projectId: string) => {
diff --git a/Composer/packages/client/src/router.tsx b/Composer/packages/client/src/router.tsx
index 0d92a46d8e..9fa97d67bd 100644
--- a/Composer/packages/client/src/router.tsx
+++ b/Composer/packages/client/src/router.tsx
@@ -37,7 +37,7 @@ const QnAPage = React.lazy(() => import('./pages/knowledge-base/QnAPage'));
 const LGPage = React.lazy(() => import('./pages/language-generation/LGPage'));
 const SettingPage = React.lazy(() => import('./pages/setting/SettingsPage'));
 const BotProjectSettings = React.lazy(() => import('./pages/botProject/BotProjectSettings'));
-const Diagnostics = React.lazy(() => import('./pages/diagnostics/Diagnostics'));
+
 const ExtensionsPage = React.lazy(() => import('./pages/extensions/ExtensionsPage'));
 const Publish = React.lazy(() => import('./pages/publish/Publish'));
 const BotCreationFlowRouter = React.lazy(() => import('./components/CreationFlow/CreationFlow'));
@@ -104,7 +104,6 @@ const Routes = (props) => {
                 <QnAPage path="knowledge-base/:dialogId/item/:qnaFileId/*" />
                 <QnAPage path="knowledge-base/:dialogId/*" />
                 <BotProjectSettings path="botProjectsSettings" />
-                <Diagnostics path="diagnostics" />
                 {pluginPages.map((page) => (
                   <PluginPageContainer
                     key={`${page.id}/${page.bundleId}`}
@@ -128,7 +127,6 @@ const Routes = (props) => {
                 <FormDialogPage path="forms/:schemaId/*" />
                 <FormDialogPage path="forms/*" />
                 <DesignPage path="*" />
-                <Diagnostics path="diagnostics" />
                 {pluginPages.map((page) => (
                   <PluginPageContainer
                     key={`${page.id}/${page.bundleId}`}
diff --git a/Composer/packages/lib/indexers/src/validations/index.ts b/Composer/packages/lib/indexers/src/validations/index.ts
index cc4b6a7919..3a88e9dc5f 100644
--- a/Composer/packages/lib/indexers/src/validations/index.ts
+++ b/Composer/packages/lib/indexers/src/validations/index.ts
@@ -57,6 +57,7 @@ export function validateDialog(
       }
       return false;
     };
+
     JsonWalk(id, content, visitor);
     return {
       diagnostics: diagnostics.map((e) => {
diff --git a/Composer/yarn.lock b/Composer/yarn.lock
index b936a7d95c..abebc3f9d8 100644
--- a/Composer/yarn.lock
+++ b/Composer/yarn.lock
@@ -3090,6 +3090,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@7.13.10":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
+  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@7.3.1":
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.1.tgz#574b03e8e8a9898eaf4a872a92ea20b7846f6f2a"
@@ -7389,16 +7396,21 @@ base64-arraybuffer@0.2.0:
   resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45"
   integrity sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==
 
-base64-js@1.3.1, base64-js@^1.3.1:
-  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==
+base64-js@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
 base64-js@^1.0.2:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
   integrity sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==
 
+base64-js@^1.3.1:
+  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==
+
 base64url@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/base64url/-/base64url-3.0.1.tgz#6399d572e2bc3f90a9a8b22d5dbb0a32d33f788d"
@@ -7629,16 +7641,16 @@ botframework-directlinejs@0.14.1:
     rxjs "5.5.10"
     url-search-params-polyfill "8.0.0"
 
-botframework-directlinespeech-sdk@4.12.0:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/botframework-directlinespeech-sdk/-/botframework-directlinespeech-sdk-4.12.0.tgz#a4075d3a25e335aee68d6d4df4c6fcced6d6e1b9"
-  integrity sha512-fWs6ffV+1rv6Y3IgId+2k6BvwMsZed/K8NOwVz9RWXnfD3PmKP1vsAV2Z4KRWtvG8o9KKTaeCLkWw6S7v64mbg==
+botframework-directlinespeech-sdk@4.13.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/botframework-directlinespeech-sdk/-/botframework-directlinespeech-sdk-4.13.0.tgz#0dcb587eff29b43b7c99af43d33c53502568aa11"
+  integrity sha512-UhuR4QqI4zZhKPaF80nLuNSYnvaYhQv51mm0zRo8NPShTl3PsOBeG5hq0AVhUT0lsaPeuehFcYYc7Z2wwcbKvg==
   dependencies:
-    "@babel/runtime" "7.12.5"
+    "@babel/runtime" "7.13.10"
     abort-controller "3.0.0"
     abort-controller-es5 "1.2.0"
     base64-arraybuffer "0.2.0"
-    core-js "3.6.5"
+    core-js "3.9.1"
     event-as-promise "1.0.5"
     event-target-shim "5.0.1"
     event-target-shim-es5 "1.2.0"
@@ -7662,12 +7674,12 @@ botframework-streaming@4.11.0:
     uuid "^3.4.0"
     ws "^7.1.2"
 
-botframework-webchat-api@4.12.0:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/botframework-webchat-api/-/botframework-webchat-api-4.12.0.tgz#254d4f1358a983044f3497214b5c26dbd6a59cde"
-  integrity sha512-NyZyUknteemBYaT3D9uPOMSSfYbXp+tM9Vka9sp7M5Fa84GpVzDY4PlTaCZksH/Kspou/5+Hf6HI23frK0B47Q==
+botframework-webchat-api@4.13.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/botframework-webchat-api/-/botframework-webchat-api-4.13.0.tgz#b77cf37340844d2d4d4ede80b142aec97c64499e"
+  integrity sha512-4n7+wFlQphqaf9u2LV9axc3iXZNTk4h9Q8JXi7l8sAcAM1TLe64N8p2IgsnQATLNKd6veVhACEFLrVSdZJhNPQ==
   dependencies:
-    botframework-webchat-core "4.12.0"
+    botframework-webchat-core "4.13.0"
     event-target-shim "5.0.1"
     event-target-shim-es5 "1.2.0"
     globalize "1.6.0"
@@ -7677,19 +7689,19 @@ botframework-webchat-api@4.12.0:
     redux "4.0.5"
     simple-update-in "2.2.0"
 
-botframework-webchat-component@4.12.0:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/botframework-webchat-component/-/botframework-webchat-component-4.12.0.tgz#0894e7171ab68cc35279292fd4c5a2964a013b1f"
-  integrity sha512-E4hj45fgPr7BvwQY8Lpkq0gLcGqLs8fW/g4ATflXF4X8y8lv0GJRZNyrw6UuFby/dM0H+q57FK9bkSzZDFTdDA==
+botframework-webchat-component@4.13.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/botframework-webchat-component/-/botframework-webchat-component-4.13.0.tgz#15a6c834b12a90a69a59531279af543cd27b3234"
+  integrity sha512-2j0s4nqjWjcys4V3Qca+cBuRDydUipjZWydfjeyOoq9MAjWuzoFAbDKbY2FaX4fajMTjNLMNH/b2FtV1sOiogw==
   dependencies:
-    base64-js "1.3.1"
-    botframework-webchat-api "4.12.0"
-    botframework-webchat-core "4.12.0"
+    base64-js "1.5.1"
+    botframework-webchat-api "4.13.0"
+    botframework-webchat-core "4.13.0"
     classnames "2.2.6"
     create-emotion "10.0.27"
     event-target-shim "5.0.1"
     event-target-shim-es5 "1.2.0"
-    markdown-it "12.0.2"
+    markdown-it "12.0.4"
     math-random "2.0.1"
     memoize-one "5.1.1"
     prop-types "15.7.2"
@@ -7704,15 +7716,15 @@ botframework-webchat-component@4.12.0:
     simple-update-in "2.2.0"
     strip-markdown "3.0.4"
 
-botframework-webchat-core@4.12.0:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/botframework-webchat-core/-/botframework-webchat-core-4.12.0.tgz#1da15dfa8aaa0a8800c7ff41e1becc33955cff7e"
-  integrity sha512-Ad1WKp6FdMpScOITkH4VNwwZeW4EWeMTs07nIfk/sqXgiajRxFfcPVyrKxmzUv1Hr/wKGSWI6quKj3lnYcX/Bw==
+botframework-webchat-core@4.13.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/botframework-webchat-core/-/botframework-webchat-core-4.13.0.tgz#182a61d041ce49749e13d00d0354232b782d587e"
+  integrity sha512-4iNG6S2PslkBSgfftH4xrCxF9vleHu+0/EBiUOj9OS9F2Vf9PzXsP/ZHfhO+mNnc9zNVs0ghZ5291t87AbxFVA==
   dependencies:
-    "@babel/runtime" "7.12.5"
+    "@babel/runtime" "7.13.10"
     jsonwebtoken "8.5.1"
     math-random "2.0.1"
-    mime "2.4.6"
+    mime "2.5.2"
     p-defer "3.0.0"
     p-defer-es5 "1.2.1"
     redux "4.0.5"
@@ -7720,21 +7732,22 @@ botframework-webchat-core@4.12.0:
     redux-saga "1.1.3"
     simple-update-in "2.2.0"
 
-botframework-webchat@4.12.0:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/botframework-webchat/-/botframework-webchat-4.12.0.tgz#d5734f49e3ba6fa358a78c4353078502a14a3d0c"
-  integrity sha512-3xFfeAHUWQzbZYBDkuEZ9yLwmQqLOelWxz9EfZ3R27hp9LdTxyd6AGGN8foUA/Bpx/kbSYuswPrQEnC/nX3A+A==
+botframework-webchat@4.13.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/botframework-webchat/-/botframework-webchat-4.13.0.tgz#52ad264d37878d33bfecd675a478f41b59f9678c"
+  integrity sha512-g2WDzC9FRjkNT2CKGbTN4MNJn83rlyPIz/ot2VEJFqJs14p7qwVizdJkLKJA5qek8jqx0zn9IP612mcXY2sjdA==
   dependencies:
-    "@babel/runtime" "7.12.5"
+    "@babel/runtime" "7.13.10"
     adaptivecards "2.5.0"
     botframework-directlinejs "0.14.1"
-    botframework-directlinespeech-sdk "4.12.0"
-    botframework-webchat-component "4.12.0"
-    botframework-webchat-core "4.12.0"
+    botframework-directlinespeech-sdk "4.13.0"
+    botframework-webchat-api "4.13.0"
+    botframework-webchat-component "4.13.0"
+    botframework-webchat-core "4.13.0"
     classnames "2.2.6"
-    core-js "3.6.5"
-    markdown-it "12.0.2"
-    markdown-it-attrs "3.0.3"
+    core-js "3.9.1"
+    markdown-it "12.0.4"
+    markdown-it-attrs "4.0.0"
     markdown-it-attrs-es5 "1.2.0"
     markdown-it-for-inline "0.1.1"
     math-random "2.0.1"
@@ -9148,10 +9161,10 @@ core-js@3.6.4, core-js@^3.6.4:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
   integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
 
-core-js@3.6.5:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
-  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+core-js@3.9.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae"
+  integrity sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==
 
 core-js@^1.0.0:
   version "1.2.7"
@@ -11123,10 +11136,10 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@~2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
-  integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
+entities@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
+  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
 env-paths@^2.2.0:
   version "2.2.0"
@@ -16402,23 +16415,23 @@ markdown-it-attrs-es5@1.2.0:
     webpack "4.44.1"
     webpack-cli "3.3.12"
 
-markdown-it-attrs@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-3.0.3.tgz#92acdb16fe551cb056c5eb9848413443cafb5231"
-  integrity sha512-cLnICU2t61skNCr4Wih/sdza+UbQcqJGZwvqAypnbWA284nzDm+Gpc90iaRk/JjsIy4emag5v3s0rXFhFBWhCA==
+markdown-it-attrs@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-4.0.0.tgz#eadae3ea0c7d17c5e83b98a4ec95a47f4e4960f5"
+  integrity sha512-uLjtdCmhhmL3BuZsReYkFxk74qKjj5ahe34teBpOCJ4hYZZl7/ftLyXWLowngC2moRkbLEvKwN/7TMwbhbHE/A==
 
 markdown-it-for-inline@0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/markdown-it-for-inline/-/markdown-it-for-inline-0.1.1.tgz#435f2316f5b5e68e1450cfa2242f2b8d59adc75f"
   integrity sha1-Q18jFvW15o4UUM+iJC8rjVmtx18=
 
-markdown-it@12.0.2:
-  version "12.0.2"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.0.2.tgz#4401beae8df8aa2221fc6565a7188e60a06ef0ed"
-  integrity sha512-4Lkvjbv2kK+moL9TbeV+6/NHx+1Q+R/NIdUlFlkqkkzUcTod4uiyTJRiBidKR9qXSdkNFkgv+AELY8KN9vSgVA==
+markdown-it@12.0.4:
+  version "12.0.4"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.0.4.tgz#eec8247d296327eac3ba9746bdeec9cfcc751e33"
+  integrity sha512-34RwOXZT8kyuOJy25oJNJoulO8L0bTHYWXcdZBYZqFnjIy3NgjeoM3FmPXIOFQ26/lSHYMr8oc62B6adxXcb3Q==
   dependencies:
     argparse "^2.0.1"
-    entities "~2.0.0"
+    entities "~2.1.0"
     linkify-it "^3.0.1"
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
@@ -16748,10 +16761,10 @@ mime@1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@2.4.6:
-  version "2.4.6"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
-  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
+mime@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
+  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
 
 mime@^2.0.3:
   version "2.4.0"

From a7ad24b3c10979dcb0ba2bd37a43655ae281e806 Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Sun, 20 Jun 2021 18:07:54 -0700
Subject: [PATCH 2/9] Support nested dialog path parse

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 .../client/src/components/useDebugPane.ts     |  2 +-
 .../DiagnosticsTab/DiagnosticList.tsx         | 10 ++++-
 .../{types.ts => DiagnosticType.ts}           | 42 +++++++++++++++----
 .../DiagnosticsTab/DiagnosticsTabContent.tsx  |  2 +-
 .../DiagnosticsTab/useAutoFix.ts              |  2 +-
 .../DiagnosticsTab/useDiagnostics.ts          |  3 +-
 .../design/DebugPanel/TabExtensions/index.ts  |  2 +-
 .../client/src/recoilModel/atoms/appState.ts  |  2 +-
 .../selectors/diagnosticsPageSelector.ts      | 13 +++---
 .../src/recoilModel/selectors/dialogs.ts      |  3 +-
 .../lib/indexers/src/validations/index.ts     |  1 -
 11 files changed, 55 insertions(+), 27 deletions(-)
 rename Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/{types.ts => DiagnosticType.ts} (89%)

diff --git a/Composer/packages/client/src/components/useDebugPane.ts b/Composer/packages/client/src/components/useDebugPane.ts
index a335db730d..74c1ff3974 100644
--- a/Composer/packages/client/src/components/useDebugPane.ts
+++ b/Composer/packages/client/src/components/useDebugPane.ts
@@ -12,7 +12,7 @@ export const useDebugPane = () => {
   useEffect(() => {
     if (currentLocation?.pathname) {
       const result = currentLocation.pathname.replace(/^\/|\/$/g, '').split('/');
-      setShowDebugPanel(result[2] !== 'home');
+      setShowDebugPanel(result?.[2] !== 'home');
     }
   }, [currentLocation]);
 
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
index ffbc187493..808b13ce69 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
@@ -32,7 +32,7 @@ import {
 } from '../../../../../recoilModel';
 import { navigateTo } from '../../../../../utils/navigation';
 
-import { IDiagnosticInfo } from './types';
+import { IDiagnosticInfo } from './DiagnosticType';
 
 // -------------------- Styles -------------------- //
 
@@ -74,6 +74,7 @@ const detailList = css`
 const tableCell = css`
   margin-top: 4px;
   outline: none;
+
   :focus {
     outline: rgb(102, 102, 102) solid 1px;
   }
@@ -87,6 +88,11 @@ const content = css`
   outline: none;
 `;
 
+const textWrapStyle = css`
+  white-space: normal;
+  width: 400px;
+`;
+
 // -------------------- Diagnosticist -------------------- //
 export interface IDiagnosticListProps {
   diagnosticItems: IDiagnosticInfo[];
@@ -173,7 +179,7 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
           locationPath = item.friendlyLocationBreadcrumb.join(' > ');
         }
         return (
-          <div css={tableCell}>
+          <div css={[tableCell, textWrapStyle]}>
             <Link
               css={content}
               underline="true"
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/types.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticType.ts
similarity index 89%
rename from Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/types.ts
rename to Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticType.ts
index be2f0c8566..6d291f9f3a 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/types.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticType.ts
@@ -44,9 +44,10 @@ const getFriendlyPath = (dialogPath: string | undefined, dialogs: DialogInfo[])
     if (!dialogPath) {
       return [];
     }
-    const [dialogName, triggerPath, actionPath] = dialogPath.split('#')[0].split('.');
+    const [dialogName, triggerPath, ...actionPaths] = dialogPath.split('#')[0].split('.');
     if (dialogName) {
       const matchedDialog = dialogs.find(({ displayName }) => displayName === dialogName);
+
       if (matchedDialog && triggerPath) {
         breadcrumb.push(matchedDialog.displayName);
         const trigger: ITrigger = get(matchedDialog, triggerPath, '');
@@ -54,10 +55,17 @@ const getFriendlyPath = (dialogPath: string | undefined, dialogs: DialogInfo[])
           breadcrumb.push(trigger.displayName);
         }
 
-        if (trigger && actionPath) {
-          const action = get(trigger.content, actionPath, '');
-          if (action.$kind) {
-            breadcrumb.push(action.$kind);
+        if (trigger) {
+          let currentPath = trigger.content;
+          for (let i = 0; i < actionPaths.length; i++) {
+            if (!currentPath) {
+              break;
+            }
+            const actionPath = actionPaths[i];
+            currentPath = get(currentPath, actionPath, null);
+            if (currentPath.$kind) {
+              breadcrumb.push(currentPath.$kind);
+            }
           }
         }
       }
@@ -120,10 +128,21 @@ export class BotDiagnostic extends DiagnosticInfo {
 
 export class DialogDiagnostic extends DiagnosticInfo {
   type = DiagnosticType.DIALOG;
-  constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+  constructor(
+    rootProjectId: string,
+    projectId: string,
+    id: string,
+    location: string,
+    diagnostic: Diagnostic,
+    dialogs: DialogInfo[]
+  ) {
     super(rootProjectId, projectId, id, location, diagnostic);
     this.message = `In ${replaceDialogDiagnosticLabel(diagnostic.path)} ${diagnostic.message}`;
     this.dialogPath = diagnostic.path;
+    const friendlyPath = getFriendlyPath(this.dialogPath, dialogs);
+    if (friendlyPath.length) {
+      this.friendlyLocationBreadcrumb = friendlyPath;
+    }
   }
 
   getUrl = () => {
@@ -136,8 +155,15 @@ export class DialogDiagnostic extends DiagnosticInfo {
 
 export class SchemaDiagnostic extends DialogDiagnostic {
   type = DiagnosticType.SCHEMA;
-  constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
-    super(rootProjectId, projectId, id, location, diagnostic);
+  constructor(
+    rootProjectId: string,
+    projectId: string,
+    id: string,
+    location: string,
+    diagnostic: Diagnostic,
+    dialogs: DialogInfo[]
+  ) {
+    super(rootProjectId, projectId, id, location, diagnostic, dialogs);
     this.message = diagnostic.message;
     this.title = formatMessage('Deactivated action.');
     this.learnMore = formatMessage('Learn more about custom actions');
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx
index 1e752e4daf..e084ffb966 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx
@@ -9,7 +9,7 @@ import { useRecoilValue } from 'recoil';
 import { DebugPanelTabHeaderProps } from '../types';
 import { dispatcherState, showErrorDiagnosticsState, showWarningDiagnosticsState } from '../../../../../recoilModel';
 
-import { IDiagnosticInfo } from './types';
+import { IDiagnosticInfo } from './DiagnosticType';
 import { DiagnosticList } from './DiagnosticList';
 import { Severity, useDiagnosticsData } from './useDiagnostics';
 import { DiagnosticsFilters } from './DiagnosticFilters';
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useAutoFix.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useAutoFix.ts
index 83131de263..41e190ff23 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useAutoFix.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useAutoFix.ts
@@ -9,7 +9,7 @@ import { useEffect } from 'react';
 
 import { botProjectSpaceSelector, dispatcherState } from '../../../../../recoilModel';
 
-import { DiagnosticType, SchemaDiagnostic } from './types';
+import { DiagnosticType, SchemaDiagnostic } from './DiagnosticType';
 import { useDiagnosticsData } from './useDiagnostics';
 
 export const useAutoFix = () => {
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts
index b9f37a86f3..e8543bd0b7 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts
@@ -5,8 +5,7 @@ import { useRecoilValue } from 'recoil';
 
 import { allDiagnosticsSelectorFamily } from '../../../../../recoilModel';
 
-import { IDiagnosticInfo } from './types';
-import { DiagnosticSeverity } from './types';
+import { IDiagnosticInfo, DiagnosticSeverity } from './DiagnosticType';
 
 export const Severity = {
   Error: DiagnosticSeverity[0],
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/index.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/index.ts
index 8672d4e1b2..f17f2ca037 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/index.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/index.ts
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { TabExtensionConfig } from './types';
-import { DiagnosticsTabConfig } from './DiagnosticsTab/';
+import { DiagnosticsTabConfig } from './DiagnosticsTab';
 import { WebChatLogTabConfig } from './WebChatLog/config';
 import { RuntimeOutputTabConfig } from './RuntimeOutputLog';
 
diff --git a/Composer/packages/client/src/recoilModel/atoms/appState.ts b/Composer/packages/client/src/recoilModel/atoms/appState.ts
index 8b18f4b77e..d7f074058e 100644
--- a/Composer/packages/client/src/recoilModel/atoms/appState.ts
+++ b/Composer/packages/client/src/recoilModel/atoms/appState.ts
@@ -376,7 +376,7 @@ export const showErrorDiagnosticsState = atom<boolean>({
 
 export const showWarningDiagnosticsState = atom<boolean>({
   key: getFullyQualifiedKey('showWarningDiagnostics'),
-  default: false,
+  default: true,
 });
 
 export const projectsForDiagnosticsFilterState = atom<string[]>({
diff --git a/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts b/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
index afee359159..49cfec96eb 100644
--- a/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
@@ -20,7 +20,7 @@ import {
   SettingDiagnostic,
   SkillSettingDiagnostic,
   SchemaDiagnostic,
-} from '../../pages/design/DebugPanel/TabExtensions/DiagnosticsTab/types';
+} from '../../pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticType';
 import {
   botDiagnosticsState,
   botProjectFileState,
@@ -164,7 +164,9 @@ export const dialogsDiagnosticsSelectorFamily = selectorFamily({
   key: 'dialogsDiagnosticsSelectorFamily',
   get: (projectId: string) => ({ get }) => {
     const botAssets = get(botAssetsSelectFamily(projectId));
+
     if (botAssets === null) return [];
+    const { dialogs } = botAssets;
 
     const rootProjectId = get(rootBotProjectIdSelector) ?? projectId;
     const dialogIds = get(dialogIdsState(projectId));
@@ -174,12 +176,8 @@ export const dialogsDiagnosticsSelectorFamily = selectorFamily({
     dialogIds.forEach((dialogId: string) => {
       const diagnostics = get(dialogDiagnosticsSelectorFamily({ projectId, dialogId })) || [];
       diagnostics.forEach((diagnostic) => {
-        const dialog: DialogInfo = get(dialogState({ projectId, dialogId }));
-        const splitPaths = diagnostic.path?.split('.');
-        console.log(splitPaths);
-
         const location = `${dialogId}.dialog`;
-        diagnosticList.push(new DialogDiagnostic(rootProjectId, projectId, dialogId, location, diagnostic));
+        diagnosticList.push(new DialogDiagnostic(rootProjectId, projectId, dialogId, location, diagnostic, dialogs));
       });
     });
 
@@ -192,6 +190,7 @@ export const schemaDiagnosticsSelectorFamily = selectorFamily({
   get: (projectId: string) => ({ get }) => {
     const botAssets = get(botAssetsSelectFamily(projectId));
     if (botAssets === null) return [];
+    const { dialogs } = botAssets;
 
     const rootProjectId = get(rootBotProjectIdSelector) ?? projectId;
 
@@ -221,7 +220,7 @@ export const schemaDiagnosticsSelectorFamily = selectorFamily({
               }),
             ].join('>');
           }
-          return new SchemaDiagnostic(rootProjectId, projectId, dialog.id, location, d);
+          return new SchemaDiagnostic(rootProjectId, projectId, dialog.id, location, d, dialogs);
         })
       );
     });
diff --git a/Composer/packages/client/src/recoilModel/selectors/dialogs.ts b/Composer/packages/client/src/recoilModel/selectors/dialogs.ts
index e523c2c480..361881365a 100644
--- a/Composer/packages/client/src/recoilModel/selectors/dialogs.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/dialogs.ts
@@ -13,8 +13,7 @@ export const dialogsSelectorFamily = selectorFamily<DialogInfo[], string>({
 
     return dialogIds
       .map((dialogId) => {
-        const result = get(dialogState({ projectId, dialogId }));
-        return result;
+        return get(dialogState({ projectId, dialogId }));
       })
       .filter((d) => !d.isTopic);
   },
diff --git a/Composer/packages/lib/indexers/src/validations/index.ts b/Composer/packages/lib/indexers/src/validations/index.ts
index 3a88e9dc5f..cc4b6a7919 100644
--- a/Composer/packages/lib/indexers/src/validations/index.ts
+++ b/Composer/packages/lib/indexers/src/validations/index.ts
@@ -57,7 +57,6 @@ export function validateDialog(
       }
       return false;
     };
-
     JsonWalk(id, content, visitor);
     return {
       diagnostics: diagnostics.map((e) => {

From 679ab0252da8b88372aaa2bd71ad4b1cead7d91e Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Mon, 21 Jun 2021 09:34:00 -0700
Subject: [PATCH 3/9] More refactor

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 Composer/package.json                         |   2 +-
 .../design/DebugPanel/diagnosticList.test.tsx |  20 ++
 .../notifications/diagnosticFilter.test.tsx   |  21 ---
 .../notifications/diagnosticList.test.tsx     |   4 +-
 .../pages/notifications/diagnostics.test.tsx  | 171 ------------------
 .../BotRuntimeController/BotController.tsx    |   3 +
 .../DropdownWithAllOption.tsx                 |  28 +--
 .../components/WebChat/WebChatComposer.tsx    |   4 +-
 .../BotController.test.tsx                    |   2 +-
 .../components/__tests__/useDebugPane.test.ts |  12 +-
 .../DiagnosticsTab/DiagnosticFilters.tsx      |  12 +-
 .../DiagnosticsTab/DiagnosticList.tsx         |   5 +-
 .../DiagnosticsTab/DiagnosticsStatus.tsx      |  20 +-
 .../selectors/diagnosticsPageSelector.ts      |   4 +-
 .../selectors/localRuntimeBuilder.ts          |   3 -
 .../packages/server/src/locales/en-US.json    |  65 +++----
 16 files changed, 114 insertions(+), 262 deletions(-)
 delete mode 100644 Composer/packages/client/__tests__/pages/notifications/diagnosticFilter.test.tsx
 delete mode 100644 Composer/packages/client/__tests__/pages/notifications/diagnostics.test.tsx

diff --git a/Composer/package.json b/Composer/package.json
index 0b746b6a48..d2ccf1d494 100644
--- a/Composer/package.json
+++ b/Composer/package.json
@@ -75,7 +75,7 @@
     "start:server:dev": "yarn workspace @bfc/server start:dev",
     "runtime": "cd ../runtime/dotnet/azurewebapp && dotnet build && dotnet run",
     "test": "cross-env NODE_OPTIONS=--max-old-space-size=4096 yarn typecheck && jest --silent",
-    "test:watch": "yarn typecheck && jest --watch",
+    "test:watch": "jest --watch",
     "test:ci": "cross-env CI=true yarn test --coverage --no-cache --forceExit --reporters=default --reporters=jest-github-actions-reporter --testLocationInResults",
     "test:integration": "yarn workspace @bfc/integration-tests start",
     "test:integration:start-server": "yarn workspace @bfc/integration-tests start:server",
diff --git a/Composer/packages/client/__tests__/pages/design/DebugPanel/diagnosticList.test.tsx b/Composer/packages/client/__tests__/pages/design/DebugPanel/diagnosticList.test.tsx
index a8d24a5c0d..6b121c5e88 100644
--- a/Composer/packages/client/__tests__/pages/design/DebugPanel/diagnosticList.test.tsx
+++ b/Composer/packages/client/__tests__/pages/design/DebugPanel/diagnosticList.test.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import * as React from 'react';
+import { fireEvent } from '@botframework-composer/test-utils';
 import { Range, Position } from '@bfc/shared';
 
 import { renderWithRecoil } from '../../../testUtils';
@@ -20,6 +21,11 @@ import {
 } from '../../../../src/recoilModel';
 import mockProjectResponse from '../../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
 
+const mockNavigationTo = jest.fn();
+jest.mock('../../../../src/utils/navigation', () => ({
+  navigateTo: (...args) => mockNavigationTo(...args),
+}));
+
 const state = {
   projectId: 'test',
   dialogs: [
@@ -129,4 +135,18 @@ describe('<DiagnosticList/>', () => {
     );
     expect(container).toHaveTextContent('server');
   });
+
+  fit('should render the Diagnostics', () => {
+    const { container, getByText } = renderWithRecoil(
+      <DiagnosticList diagnosticItems={state.diagnostics as any} />,
+      initRecoilState
+    );
+
+    fireEvent.doubleClick(getByText(/test.en-us.lg/));
+    expect(mockNavigationTo).toBeCalledWith('/bot/testproj/language-generation/test/edit#L=13');
+    fireEvent.doubleClick(getByText(/test.en-us.lu/));
+    expect(mockNavigationTo).nthCalledWith(2, '/bot/testproj/language-understanding/test/edit#L=7');
+    fireEvent.doubleClick(getByText(/test.en-us.qna/));
+    expect(mockNavigationTo).nthCalledWith(3, '/bot/testproj/knowledge-base/test/edit#L=7');
+  });
 });
diff --git a/Composer/packages/client/__tests__/pages/notifications/diagnosticFilter.test.tsx b/Composer/packages/client/__tests__/pages/notifications/diagnosticFilter.test.tsx
deleted file mode 100644
index 54061f30e9..0000000000
--- a/Composer/packages/client/__tests__/pages/notifications/diagnosticFilter.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import * as React from 'react';
-import { fireEvent, render } from '@botframework-composer/test-utils';
-
-import { DiagnosticFilter } from '../../../src/pages/diagnostics/DiagnosticFilter';
-
-describe('<NotificationFilter/>', () => {
-  it('should render the DiagnosticFilter', () => {
-    const mockOnChange = jest.fn(() => null);
-    const { container } = render(<DiagnosticFilter onChange={mockOnChange} />);
-
-    expect(container).toHaveTextContent('All');
-    const dropdown: any = container.querySelector('[data-testid="notifications-dropdown"]');
-    fireEvent.click(dropdown);
-    const test = document.querySelector('.ms-Dropdown-callout');
-    expect(test).toHaveTextContent('Error');
-    expect(test).toHaveTextContent('Warning');
-  });
-});
diff --git a/Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx b/Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx
index eb788bc841..c9aa50a148 100644
--- a/Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx
+++ b/Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx
@@ -18,7 +18,7 @@ import {
   settingsState,
 } from '../../../src/recoilModel';
 import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
-import { DiagnosticList } from '../../../src/pages/diagnostics/DiagnosticList';
+import { DiagnosticList } from '../../../src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList';
 
 const state = {
   projectId: 'test',
@@ -124,7 +124,7 @@ describe('<DiagnosticList/>', () => {
 
   it('should render the DiagnosticList', () => {
     const { container } = renderWithRecoil(
-      <DiagnosticList diagnosticItems={state.diagnostics as any} onItemClick={jest.fn} />,
+      <DiagnosticList diagnosticItems={state.diagnostics as any} />,
       initRecoilState
     );
     expect(container).toHaveTextContent('server');
diff --git a/Composer/packages/client/__tests__/pages/notifications/diagnostics.test.tsx b/Composer/packages/client/__tests__/pages/notifications/diagnostics.test.tsx
deleted file mode 100644
index 792e59b3b3..0000000000
--- a/Composer/packages/client/__tests__/pages/notifications/diagnostics.test.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import * as React from 'react';
-import { Range, Position } from '@bfc/shared';
-import { fireEvent } from '@botframework-composer/test-utils';
-
-import {
-  botDiagnosticsState,
-  botProjectIdsState,
-  currentProjectIdState,
-  dialogIdsState,
-  dialogState,
-  formDialogSchemaIdsState,
-  jsonSchemaFilesState,
-  lgFilesSelectorFamily,
-  luFilesSelectorFamily,
-  qnaFilesSelectorFamily,
-  schemasState,
-  settingsState,
-} from '../../../src/recoilModel';
-import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
-import Diagnostics from '../../../src/pages/diagnostics/Diagnostics';
-import { renderWithRecoil } from '../../testUtils/renderWithRecoil';
-
-const state = {
-  projectId: 'testproj',
-  dialogs: [
-    {
-      id: 'test',
-      content: { recognizer: {} },
-      luFile: 'test',
-      referredLuIntents: [],
-      skills: [`=settings.skill['Email-Skill'].endpointUrl`],
-      diagnostics: [
-        {
-          message: 'dialog expression error',
-          severity: 0,
-          source: 'test',
-        },
-      ],
-    },
-  ],
-  qnaFiles: [
-    {
-      content: `# ? tell a joke`,
-      id: 'test.en-us',
-      diagnostics: [
-        {
-          message: 'qna syntax error',
-          severity: 0,
-          source: 'test.en-us',
-          range: {
-            end: { character: 2, line: 7 },
-            start: { character: 0, line: 7 },
-          },
-        },
-      ],
-    },
-  ],
-  luFiles: [
-    {
-      content: 'test',
-      id: 'test.en-us',
-      intents: [
-        {
-          Body: '- test12345 ss',
-          Entities: [],
-          Name: 'test',
-          range: new Range(new Position(4, 0), new Position(7, 14)),
-        },
-      ],
-      diagnostics: [
-        {
-          message: 'lu syntax error',
-          severity: 0,
-          source: 'test.en-us',
-          range: {
-            end: { character: 2, line: 7 },
-            start: { character: 0, line: 7 },
-          },
-        },
-      ],
-    },
-  ],
-  lgFiles: [
-    {
-      content: 'test',
-      id: 'test.en-us',
-      templates: [
-        {
-          body: '- ${add(1,2)}',
-          name: 'bar',
-          range: new Range(new Position(0, 0), new Position(2, 14)),
-        },
-      ],
-      diagnostics: [
-        {
-          message: 'lg syntax error',
-          severity: 1,
-          source: 'test.en-us',
-          range: {
-            end: { character: 2, line: 13 },
-            start: { character: 0, line: 13 },
-          },
-        },
-      ],
-    },
-  ],
-  jsonSchemaFiles: [
-    {
-      id: 'schema1.json',
-      content: 'test',
-    },
-  ],
-  diagnostics: [
-    {
-      message: 'server error',
-      severity: 0,
-      source: 'server',
-    },
-  ],
-  settings: {
-    skill: {
-      'Email-Skill': {
-        manifestUrl: 'https://yuesuemailskill0207-gjvga67.azurewebsites.net/manifest/manifest-1.0.json',
-        endpointUrl: 'https://yuesuemailskill0207-gjvga67.azurewebsites.net/api/messages',
-        name: 'Email-Skill',
-      },
-    },
-    languages: ['en-us'],
-  },
-  formDialogSchemas: [{ id: '1', content: '{}' }],
-};
-const mockNavigationTo = jest.fn();
-jest.mock('../../../src/utils/navigation', () => ({
-  navigateTo: (...args) => mockNavigationTo(...args),
-}));
-describe('<Diagnostics/>', () => {
-  const initRecoilState = ({ set }) => {
-    set(currentProjectIdState, state.projectId);
-    set(botProjectIdsState, [state.projectId]);
-    set(dialogIdsState(state.projectId), ['test']);
-    set(dialogState({ projectId: state.projectId, dialogId: 'test' }), state.dialogs[0]);
-    set(luFilesSelectorFamily(state.projectId), state.luFiles);
-    set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
-    set(qnaFilesSelectorFamily(state.projectId), state.qnaFiles);
-    set(jsonSchemaFilesState(state.projectId), state.jsonSchemaFiles);
-    set(botDiagnosticsState(state.projectId), state.diagnostics);
-    set(settingsState(state.projectId), state.settings);
-    set(schemasState(state.projectId), mockProjectResponse.schemas);
-    set(
-      formDialogSchemaIdsState(state.projectId),
-      state.formDialogSchemas.map((fds) => fds.id)
-    );
-  };
-
-  it('should render the Diagnostics', () => {
-    const { container, getByText } = renderWithRecoil(
-      <Diagnostics projectId={state.projectId} skillId={state.projectId} />,
-      initRecoilState
-    );
-    expect(container).toHaveTextContent('Diagnostics');
-    fireEvent.doubleClick(getByText(/test.en-us.lg/));
-    expect(mockNavigationTo).toBeCalledWith('/bot/testproj/language-generation/test/edit#L=13');
-    fireEvent.doubleClick(getByText(/test.en-us.lu/));
-    expect(mockNavigationTo).nthCalledWith(2, '/bot/testproj/language-understanding/test/edit#L=7');
-    fireEvent.doubleClick(getByText(/test.en-us.qna/));
-    expect(mockNavigationTo).nthCalledWith(3, '/bot/testproj/knowledge-base/test/edit#L=7');
-  });
-});
diff --git a/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx b/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
index 7364c800c0..8bd3faf00c 100644
--- a/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
+++ b/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
@@ -100,15 +100,18 @@ const BotController: React.FC<BotControllerProps> = ({ onHideController, isContr
   }, [projectCollection, errors]);
 
   useEffect(() => {
+    console.log('Prokjject', projectCollection);
     const botsProcessing =
       startAllBotsOperationQueued ||
       projectCollection.some(({ status }) => isBotStarting(status) || status == BotStatus.stopping);
     setBotsProcessing(botsProcessing);
+    console.log('Botproce', botsProcessing);
 
     const botOperationsCompleted = projectCollection.some(
       ({ status }) => status === BotStatus.connected || status === BotStatus.failed
     );
     setBotsStartOperationCompleted(botOperationsCompleted);
+    console.log('Botprasdasd oce', projectCollection);
 
     if (botsProcessing) {
       setStatusIconClass(undefined);
diff --git a/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx b/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx
index ce4ddb68ba..bb249552b6 100644
--- a/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx
+++ b/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx
@@ -11,33 +11,35 @@ const dropdownStyles: Partial<IDropdownStyles> = {
 };
 
 interface DropdownWithAllOptionProps {
-  optionAllText: string;
   placeholder: string;
   selectedKeys: string[];
   setSelectedKeys: (keys: string[]) => void;
   dropdownOptions: IDropdownOption[];
-  optionAllKey: string;
+  optionAll: {
+    key: string;
+    text: string;
+  };
 }
 
 export const DropdownWithAllOption: React.FC<DropdownWithAllOptionProps> = (props) => {
-  const { optionAllText, selectedKeys, setSelectedKeys, placeholder, dropdownOptions, optionAllKey } = props;
+  const { selectedKeys, setSelectedKeys, placeholder, dropdownOptions, optionAll } = props;
   const [currentOptions, setCurrentOptions] = useState<IDropdownOption[]>([]);
 
   useEffect(() => {
-    const allOptions = [
-      {
-        key: optionAllKey,
-        text: optionAllText,
-      },
-      ...dropdownOptions,
-    ];
+    const allOptions = [...dropdownOptions];
+    if (allOptions.length > 1) {
+      allOptions.unshift({
+        key: optionAll.key,
+        text: optionAll.text,
+      });
+    }
 
     setCurrentOptions(allOptions);
   }, [dropdownOptions]);
 
   const onOptionSelectionChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
     if (item) {
-      if (item.key === optionAllKey) {
+      if (item.key === optionAll.key) {
         if (!item.selected) {
           setSelectedKeys([]);
         } else {
@@ -48,7 +50,7 @@ export const DropdownWithAllOption: React.FC<DropdownWithAllOptionProps> = (prop
       }
 
       const tempState = [...selectedKeys];
-      const allIndex = tempState.findIndex((option) => option === optionAllKey);
+      const allIndex = tempState.findIndex((option) => option === optionAll.key);
       if (allIndex !== -1) {
         tempState.splice(allIndex, 1);
       }
@@ -57,7 +59,7 @@ export const DropdownWithAllOption: React.FC<DropdownWithAllOptionProps> = (prop
   };
 
   const onRenderTitle = (selectedItems: IDropdownOption[] | undefined): JSX.Element | null => {
-    const allIndex = selectedKeys.findIndex((option) => option === optionAllKey);
+    const allIndex = selectedKeys.findIndex((option) => option === optionAll.key);
     if (allIndex !== -1) {
       return <Fragment>{currentOptions[0].text}</Fragment>;
     }
diff --git a/Composer/packages/client/src/components/WebChat/WebChatComposer.tsx b/Composer/packages/client/src/components/WebChat/WebChatComposer.tsx
index 31dc9cf330..4de2c32809 100644
--- a/Composer/packages/client/src/components/WebChat/WebChatComposer.tsx
+++ b/Composer/packages/client/src/components/WebChat/WebChatComposer.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React from 'react';
-import { createStyleSet, Components } from 'botframework-webchat';
+import { createStyleSet, Components } from 'botframework-webchat-component';
 import { CommunicationColors, NeutralColors } from '@uifabric/fluent-theme';
 
 import { ConversationService } from './utils/conversationService';
@@ -10,7 +10,7 @@ import { ChatData, ActivityType } from './types';
 import { ActivityHighlightWrapper } from './ActivityHighlightWrapper';
 import { WebChatHooksContainer } from './hooks/WebChatHooksContainer';
 
-const { BasicWebChat, Composer } = Components;
+const { Composer, BasicWebChat } = Components;
 
 export type WebChatComposerProps = {
   currentConversation: string;
diff --git a/Composer/packages/client/src/components/__tests__/BotRuntimeController/BotController.test.tsx b/Composer/packages/client/src/components/__tests__/BotRuntimeController/BotController.test.tsx
index b98b218a18..88a73642bf 100644
--- a/Composer/packages/client/src/components/__tests__/BotRuntimeController/BotController.test.tsx
+++ b/Composer/packages/client/src/components/__tests__/BotRuntimeController/BotController.test.tsx
@@ -53,7 +53,7 @@ describe('<BotController />', () => {
     mockStart.mockReset();
   });
 
-  it('should show that 2/3 bots have been started correctly', async () => {
+  fit('should show that 2/3 bots have been started correctly', async () => {
     const initRecoilState = ({ set }) => {
       const projectIds = ['123a.234', '456a.234', '789a.234'];
       set(botProjectIdsState, projectIds);
diff --git a/Composer/packages/client/src/components/__tests__/useDebugPane.test.ts b/Composer/packages/client/src/components/__tests__/useDebugPane.test.ts
index 5a4cd89833..967bd8e071 100644
--- a/Composer/packages/client/src/components/__tests__/useDebugPane.test.ts
+++ b/Composer/packages/client/src/components/__tests__/useDebugPane.test.ts
@@ -36,7 +36,7 @@ describe('useDebug pane', () => {
       },
     });
     const { result } = renderHook(() => useDebugPane());
-    expect(result.current).toBeFalsy();
+    expect(result.current).toBeTruthy();
   });
 
   it('should render in skills LG Page', async () => {
@@ -58,4 +58,14 @@ describe('useDebug pane', () => {
     const { result } = renderHook(() => useDebugPane());
     expect(result.current).toBeTruthy();
   });
+
+  it('should not render in Home Page', async () => {
+    mockLocation.mockReturnValue({
+      location: {
+        pathname: '/home',
+      },
+    });
+    const { result } = renderHook(() => useDebugPane());
+    expect(result.current).toBeTruthy();
+  });
 });
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
index 4d60abf504..b18220a651 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
@@ -19,11 +19,16 @@ const severityTextStyle = {
   marginRight: '6px',
 };
 
-const countFontWeight = {
+const countFontWeight: any = {
   fontWeight: FontWeights.bold,
 };
 
-const optionAllKey = 'All';
+const getOptionAll = () => {
+  return {
+    key: 'All',
+    text: formatMessage('All bots'),
+  };
+};
 
 const getSeverityButtonStyle = (severityType: DiagnosticSeverity, isChecked: boolean): any => {
   const baseStyle = {
@@ -144,8 +149,7 @@ export const DiagnosticsFilters: React.FC<DiagnosticsFiltersProps> = (props) =>
       >
         <DropdownWithAllOption
           dropdownOptions={projectSelectorOptions}
-          optionAllKey={optionAllKey}
-          optionAllText={formatMessage('All bots')}
+          optionAll={getOptionAll()}
           placeholder={formatMessage('Select a project')}
           selectedKeys={projectsToFilter}
           setSelectedKeys={setProjectsToFilter}
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
index 808b13ce69..27b9548896 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
@@ -174,6 +174,7 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
       isResizable: true,
       data: 'string',
       onRender: (item: IDiagnosticInfo) => {
+        console.log('Location', item.location);
         let locationPath = item.location;
         if (item.friendlyLocationBreadcrumb) {
           locationPath = item.friendlyLocationBreadcrumb.join(' > ');
@@ -242,7 +243,7 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
 
   const displayedDiagnosticItems = useMemo(() => {
     const sortFactor = columns[1].isSortedDescending ? 1 : -1;
-    return diagnosticItems.sort((a, b) => {
+    const result = diagnosticItems.sort((a, b) => {
       // Error before Warning
       const severityComparator = a.severity.localeCompare(b.severity);
       if (severityComparator === 0) {
@@ -251,6 +252,8 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
       }
       return severityComparator;
     });
+    console.log('Result', diagnosticItems);
+    return result;
   }, [diagnosticItems, columns]);
 
   return (
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx
index 2baa243c75..614922a0cf 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx
@@ -47,7 +47,7 @@ export const DiagnosticsStatus = () => {
 
   return (
     <div
-      css={{ height: '100%', display: 'flex', alignItems: 'center', paddingLeft: '8px' }}
+      css={{ height: '100%', display: 'flex', alignItems: 'center' }}
       data-testid="diagnostics-tab-header--collapsed"
     >
       {errorsCount > 0 && (
@@ -56,11 +56,12 @@ export const DiagnosticsStatus = () => {
           styles={{
             root: {
               height: '36px',
-              padding: '0',
-              minWidth: '20px',
               border: 'none',
+              minWidth: '40px',
+              margin: 0,
+              padding: 0,
             },
-            label: { fontSize: FontSizes.size18, fontFamily: 'Segoe UI', lineHeight: '20px' },
+            label: { fontSize: FontSizes.size18, fontFamily: 'Segoe UI' },
           }}
           onClick={() => {
             setErrorDiagnosticsFilter(true);
@@ -69,9 +70,9 @@ export const DiagnosticsStatus = () => {
             setActiveTab(DiagnosticsTabKey);
           }}
         >
-          <span css={{ marginRight: '10px', display: 'flex', alignItems: 'center' }}>
+          <span css={{ marginRight: '10px', display: 'flex', alignItems: 'center', width: '30px' }}>
             <FontIcon
-              css={{ color: SharedColors.red10, fontSize: FontSizes.size18, lineHeight: '18px', marginRight: '5px' }}
+              css={{ color: SharedColors.red10, fontSize: FontSizes.size18, marginRight: '5px' }}
               iconName="StatusErrorFull"
             />
             {errorsCount}
@@ -85,10 +86,12 @@ export const DiagnosticsStatus = () => {
           styles={{
             root: {
               height: '36px',
-              minWidth: '20px',
               border: 'none',
+              margin: 0,
+              minWidth: '40px',
+              padding: 0,
             },
-            label: { fontSize: FontSizes.size18, fontFamily: 'Segoe UI', lineHeight: '20px' },
+            label: { fontSize: FontSizes.size18, fontFamily: 'Segoe UI' },
           }}
           onClick={() => {
             setWarningDiagnosticsFilter(true);
@@ -102,7 +105,6 @@ export const DiagnosticsStatus = () => {
               css={{
                 color: `#F4BD00`,
                 fontSize: FontSizes.size18,
-                lineHeight: '18px',
                 marginRight: '5px',
               }}
               iconName="WarningSolid"
diff --git a/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts b/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
index 49cfec96eb..eb8954b738 100644
--- a/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
@@ -5,11 +5,11 @@ import { BotIndexer, validateSchema } from '@bfc/indexers';
 import { selectorFamily, selector } from 'recoil';
 import lodashGet from 'lodash/get';
 import formatMessage from 'format-message';
-import { getFriendlyName, DialogInfo } from '@bfc/shared';
+import { getFriendlyName } from '@bfc/shared';
 
 import { getReferredLuFiles } from '../../utils/luUtil';
 import { INavTreeItem } from '../../components/NavTree';
-import { botDisplayNameState, dialogIdsState, dialogState } from '../atoms/botState';
+import { botDisplayNameState, dialogIdsState } from '../atoms/botState';
 import {
   DialogDiagnostic,
   LgDiagnostic,
diff --git a/Composer/packages/client/src/recoilModel/selectors/localRuntimeBuilder.ts b/Composer/packages/client/src/recoilModel/selectors/localRuntimeBuilder.ts
index d8d07b4880..8c060d7881 100644
--- a/Composer/packages/client/src/recoilModel/selectors/localRuntimeBuilder.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/localRuntimeBuilder.ts
@@ -69,9 +69,6 @@ export const buildConfigurationSelector = selector({
   get: ({ get }) => {
     const localProjects = get(localBotsWithoutErrorsSelector);
     const rootBotId = get(rootBotProjectIdSelector);
-    if (!rootBotId) {
-      return [];
-    }
 
     return localProjects
       .filter((projectId: string) => {
diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json
index 4bba37b224..c047fef6d3 100644
--- a/Composer/packages/server/src/locales/en-US.json
+++ b/Composer/packages/server/src/locales/en-US.json
@@ -251,6 +251,9 @@
   "add_qna_pair_16c228f0": {
     "message": "+ Add QnA Pair"
   },
+  "add_regex_pattern_140335cb": {
+    "message": "Add regex pattern"
+  },
   "add_row_7ebc94fb": {
     "message": "Add row"
   },
@@ -258,7 +261,7 @@
     "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"
   },
   "add_some_expected_user_responses_please_remind_me__31dc5c07": {
-    "message": "> add some expected user responses:\n> - Please remind me to '{'itemTitle=buy milk'}'\n> - remind me to '{'itemTitle'}'\n> - add '{'itemTitle'}' to my todo list\n>\n> entity definitions:\n> @ ml itemTitle\n"
+    "message": "> add some expected user responses:\n      > - Please remind me to '{'itemTitle=buy milk'}'\n      > - remind me to '{'itemTitle'}'\n      > - add '{'itemTitle'}' to my todo list\n      >\n      > entity definitions:\n      > @ ml itemTitle\n      "
   },
   "add_suggested_action_baf855ca": {
     "message": "Add suggested action"
@@ -278,6 +281,9 @@
   "all_4321c3a1": {
     "message": "All"
   },
+  "all_bots_649ccbd0": {
+    "message": "All bots"
+  },
   "allowed_callers_31b26262": {
     "message": "Allowed Callers"
   },
@@ -1178,21 +1184,6 @@
   "diagnostic_links_228dc6fe": {
     "message": "diagnostic links"
   },
-  "diagnostic_list_89b39c2e": {
-    "message": "Diagnostic List"
-  },
-  "diagnostic_message_msg_5387e951": {
-    "message": "Diagnostic Message { msg }"
-  },
-  "diagnostic_type_e1979c21": {
-    "message": "Diagnostic type"
-  },
-  "diagnostics_a11880f6": {
-    "message": "Diagnostics"
-  },
-  "diagnostics_pane_2d77c390": {
-    "message": "Diagnostics Pane"
-  },
   "diagnostics_tab_which_shows_errors_and_warnings_410e8f6": {
     "message": "Diagnostics tab which shows errors and warnings."
   },
@@ -1535,6 +1526,9 @@
   "error_provisioning_25835400": {
     "message": "Error provisioning."
   },
+  "errors_a0ac8807": {
+    "message": "Errors"
+  },
   "errorscount_plural_0_no_errors_1_one_error_other_e_a8c998bb": {
     "message": "{ errorsCount, plural,\n     =0 {No errors}\n     =1 {One error}\n  other {# errors}\n}"
   },
@@ -3257,6 +3251,9 @@
   "select_a_dialog_or_topic_4df93d0f": {
     "message": "Select a dialog or topic"
   },
+  "select_a_project_356cbc95": {
+    "message": "Select a project"
+  },
   "select_a_publish_target_d4530c94": {
     "message": "Select a publish target"
   },
@@ -3419,15 +3416,9 @@
   "short_description_for_6abb9a1b": {
     "message": "short description for"
   },
-  "show_all_diagnostics_c11f4e09": {
-    "message": "Show All Diagnostics"
-  },
   "show_code_f3e9d1cc": {
     "message": "Show code"
   },
-  "show_item_diagnostics_f6e902c7": {
-    "message": "Show { item } Diagnostics"
-  },
   "show_keys_3072a5b8": {
     "message": "Show keys"
   },
@@ -3461,6 +3452,9 @@
   "skill_host_endpoint_url_e68b65f6": {
     "message": "Skill host endpoint url"
   },
+  "skill_manifest_d7db2e25": {
+    "message": "Skill Manifest"
+  },
   "skill_manifest_url_1094fcba": {
     "message": "Skill Manifest URL"
   },
@@ -3509,8 +3503,8 @@
   "specify_a_name_and_description_for_your_new_dialog_86eb3130": {
     "message": "Specify a name and description for your new dialog."
   },
-  "specify_a_name_description_and_location_for_your_n_667f1438": {
-    "message": "Specify a name, description, and location for your new bot project."
+  "specify_a_name_runtime_type_and_location_for_your__594518ca": {
+    "message": "Specify a name, runtime type, and location for your new bot project."
   },
   "specify_an_attachment_layout_when_there_are_more_t_28ffc0c2": {
     "message": "Specify an attachment layout when there are more than one."
@@ -3677,6 +3671,9 @@
   "the_azure_bot_created_in_azure_bot_services_contai_6a71ef26": {
     "message": "The Azure Bot created in Azure Bot Services contains bot resources that can be used as the basis for a new bot, or to add or replace resources of an existing bot."
   },
+  "the_bot_is_already_part_of_the_bot_project_ab3250b1": {
+    "message": "The bot is already part of the Bot Project"
+  },
   "the_bot_responses_page_is_where_the_language_gener_31a6666b": {
     "message": "The Bot Responses page is where the Language Generation (LG) editor locates. From here users can view all the LG templates and edit them."
   },
@@ -3794,9 +3791,6 @@
   "this_is_a_required_field_acb9837e": {
     "message": "This is a required field."
   },
-  "this_is_a_severity_diagnostic_58312674": {
-    "message": "This is a { severity } diagnostic"
-  },
   "this_is_the_bot_language_you_are_currently_authori_4a26541": {
     "message": "This is the bot language you are currently authoring. Change the active language in the dropdown below."
   },
@@ -3818,6 +3812,9 @@
   "this_option_allows_your_users_to_give_multiple_val_d2dd0d58": {
     "message": "This option allows your users to give multiple values for this property."
   },
+  "this_path_does_not_exist_42c11e1": {
+    "message": "This path does not exist"
+  },
   "this_project_was_created_in_an_older_version_of_co_8b57954": {
     "message": "This project was created in an older version of Composer. To open this project in Composer 2.0, we must copy your project and convert it to the latest format. Your original project will not be changed."
   },
@@ -3866,8 +3863,8 @@
   "to_create_a_bot_from_your_own_bot_framework_templa_2c5b1f2d": {
     "message": "To create a bot from your own Bot Framework Template you need to add a path to your local templates index.js file. <templateDocLink>Learn more</templateDocLink>"
   },
-  "to_ensure_a_secure_connection_provide_the_app_id_o_6aaaba6": {
-    "message": "To ensure a secure connection, provide the App ID of the bots that can connect to your skill.  If you don’t have this information, you can also add this information in Skill Configuration. Learn more."
+  "to_ensure_a_secure_connection_provide_the_app_id_o_61ccd30d": {
+    "message": "To ensure a secure connection, provide the App ID of the bots that can connect to your skill.  If you don’t have this information, you can also add this information in Skill Configuration."
   },
   "to_ensure_a_secure_connection_the_remote_skill_nee_f382d684": {
     "message": "To ensure a secure connection, the remote skill needs to know the Microsoft App ID of your bot. "
@@ -3944,6 +3941,9 @@
   "total_plural_1_starting_bot_other_starting_bots_ru_3d173401": {
     "message": "{ total, plural,\n     =1 {Starting bot..}\n  other {Starting bots.. ({ running }/{ total } running)}\n}"
   },
+  "total_plural_1_starting_your_bot_other_starting_yo_6087bb1e": {
+    "message": "{ total, plural,\n     =1 {Starting your bot...}\n  other {Starting your bots...}\n}"
+  },
   "total_plural_1_stopping_bot_other_stopping_bots_ru_f6afe9bd": {
     "message": "{ total, plural,\n     =1 {Stopping bot..}\n  other {Stopping bots.. ({ running }/{ total } running)}\n}"
   },
@@ -4187,6 +4187,9 @@
   "warning_aacb8c24": {
     "message": "Warning"
   },
+  "warnings_d6acbbdb": {
+    "message": "Warnings"
+  },
   "warningscount_plural_0_no_warnings_1_one_warning_o_347cc928": {
     "message": "{ warningsCount, plural,\n     =0 {No warnings}\n     =1 {One warning}\n  other {# warnings}\n}"
   },
@@ -4334,8 +4337,8 @@
   "your_bot_is_using_luis_and_qna_for_natural_languag_53830684": {
     "message": "Your bot is using LUIS and QNA for natural language understanding."
   },
-  "your_bot_project_is_not_running_actionbutton_start_9dfc86d5": {
-    "message": "Your bot project is not running. <actionButton>Start your bot</actionButton>"
+  "your_bot_project_is_not_running_actionbutton_total_bc1c8e8c": {
+    "message": "Your bot project is not running. <actionButton>{ total, plural,\n     =1 {Start bot}\n  other {Start all bots}\n}</actionButton>"
   },
   "your_bot_project_is_running_actionbutton_test_in_w_22d5f2de": {
     "message": "Your bot project is running. <actionButton>Test in Web Chat</actionButton>"

From f8748a4c599217ad224f3607ed07b4a15d982adc Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Mon, 21 Jun 2021 16:44:08 -0700
Subject: [PATCH 4/9] PR feedback addressed

1. Addressed callback naming
2. Used severity enum
3. Updating Warning colors

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 ...t.test.tsx => DiagnosticsContent.test.tsx} |  31 ++--
 .../notifications/diagnosticList.test.tsx     | 132 ------------------
 .../BotRuntimeController/BotController.tsx    |   8 +-
 .../components/BotRuntimeController/utils.ts  |   4 +-
 .../src/components/DiagnosticsHeader.tsx      |   5 +-
 .../DropdownWithAllOption.tsx                 |  27 ++--
 .../src/components/ProjectTree/treeItem.tsx   |   4 +-
 .../DiagnosticsTab/DiagnosticFilters.tsx      |  69 +++++----
 .../DiagnosticsTab/DiagnosticList.tsx         |  26 ++--
 .../DiagnosticsTab/DiagnosticType.ts          |  25 ++--
 .../DiagnosticsTab/DiagnosticsStatus.tsx      |   6 +-
 .../DiagnosticsStatusFilter.tsx               |  75 ----------
 .../DiagnosticsTab/DiagnosticsTabContent.tsx  |  66 ++++-----
 .../DiagnosticsTab/useDiagnostics.ts          |  16 +--
 .../WebChatLog/WebChatLogContent.tsx          |  14 +-
 .../selectors/diagnosticsPageSelector.ts      |   7 +-
 Composer/packages/client/src/utils/luUtil.ts  |   1 +
 17 files changed, 152 insertions(+), 364 deletions(-)
 rename Composer/packages/client/__tests__/pages/design/DebugPanel/{diagnosticList.test.tsx => DiagnosticsContent.test.tsx} (78%)
 delete mode 100644 Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx
 delete mode 100644 Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatusFilter.tsx

diff --git a/Composer/packages/client/__tests__/pages/design/DebugPanel/diagnosticList.test.tsx b/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
similarity index 78%
rename from Composer/packages/client/__tests__/pages/design/DebugPanel/diagnosticList.test.tsx
rename to Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
index 6b121c5e88..d496c508ba 100644
--- a/Composer/packages/client/__tests__/pages/design/DebugPanel/diagnosticList.test.tsx
+++ b/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { fireEvent } from '@botframework-composer/test-utils';
+import { DiagnosticSeverity } from '@botframework-composer/types';
 import { Range, Position } from '@bfc/shared';
 
 import { renderWithRecoil } from '../../../testUtils';
@@ -18,8 +19,10 @@ import {
   luFilesSelectorFamily,
   schemasState,
   settingsState,
+  projectMetaDataState,
 } from '../../../../src/recoilModel';
 import mockProjectResponse from '../../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
+import { DiagnosticsContent } from '../../../../src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent';
 
 const mockNavigationTo = jest.fn();
 jest.mock('../../../../src/utils/navigation', () => ({
@@ -52,7 +55,7 @@ const state = {
       diagnostics: [
         {
           message: 'lu syntax error',
-          severity: 'Error',
+          severity: DiagnosticSeverity.Error,
           location: 'test.en-us',
           range: {
             end: { character: 2, line: 7 },
@@ -76,7 +79,7 @@ const state = {
       diagnostics: [
         {
           message: 'lg syntax error',
-          severity: 'Error',
+          severity: DiagnosticSeverity.Error,
           location: 'test.en-us',
           range: {
             end: { character: 2, line: 13 },
@@ -95,7 +98,7 @@ const state = {
   diagnostics: [
     {
       message: 'server error',
-      severity: 'Error',
+      severity: DiagnosticSeverity.Error,
       location: 'server',
     },
   ],
@@ -115,6 +118,9 @@ describe('<DiagnosticList/>', () => {
   const initRecoilState = ({ set }) => {
     set(currentProjectIdState, state.projectId);
     set(botProjectIdsState, [state.projectId]);
+    set(projectMetaDataState(state.projectId), {
+      isRootBot: true,
+    });
     set(dialogIdsState(state.projectId), []);
     set(luFilesSelectorFamily(state.projectId), state.luFiles);
     set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
@@ -136,17 +142,14 @@ describe('<DiagnosticList/>', () => {
     expect(container).toHaveTextContent('server');
   });
 
-  fit('should render the Diagnostics', () => {
-    const { container, getByText } = renderWithRecoil(
-      <DiagnosticList diagnosticItems={state.diagnostics as any} />,
-      initRecoilState
-    );
+  it('should render the Diagnostics', () => {
+    const { getByText } = renderWithRecoil(<DiagnosticsContent isActive />, initRecoilState);
 
-    fireEvent.doubleClick(getByText(/test.en-us.lg/));
-    expect(mockNavigationTo).toBeCalledWith('/bot/testproj/language-generation/test/edit#L=13');
-    fireEvent.doubleClick(getByText(/test.en-us.lu/));
-    expect(mockNavigationTo).nthCalledWith(2, '/bot/testproj/language-understanding/test/edit#L=7');
-    fireEvent.doubleClick(getByText(/test.en-us.qna/));
-    expect(mockNavigationTo).nthCalledWith(3, '/bot/testproj/knowledge-base/test/edit#L=7');
+    fireEvent.click(getByText(/test.en-us.lg/));
+    expect(mockNavigationTo).toBeCalledWith('/bot/test/language-generation/test/edit#L=13');
+    fireEvent.click(getByText(/test.en-us.lu/));
+    expect(mockNavigationTo).nthCalledWith(2, '/bot/test/language-understanding/test/edit#L=7');
+    fireEvent.click(getByText(/test.en-us.qna/));
+    expect(mockNavigationTo).nthCalledWith(3, '/bot/test/knowledge-base/test/edit#L=7');
   });
 });
diff --git a/Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx b/Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx
deleted file mode 100644
index c9aa50a148..0000000000
--- a/Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import * as React from 'react';
-import { Range, Position } from '@bfc/shared';
-
-import { renderWithRecoil } from '../../testUtils';
-import {
-  botDiagnosticsState,
-  botProjectIdsState,
-  currentProjectIdState,
-  dialogIdsState,
-  formDialogSchemaIdsState,
-  jsonSchemaFilesState,
-  lgFilesSelectorFamily,
-  luFilesSelectorFamily,
-  schemasState,
-  settingsState,
-} from '../../../src/recoilModel';
-import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
-import { DiagnosticList } from '../../../src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList';
-
-const state = {
-  projectId: 'test',
-  dialogs: [
-    {
-      id: 'test',
-      content: 'test',
-      luFile: 'test',
-      referredLuIntents: [],
-      skills: [`=settings.skill['Email-Skill'].endpointUrl`],
-    },
-  ],
-  luFiles: [
-    {
-      content: 'test',
-      id: 'test.en-us',
-      intents: [
-        {
-          Body: '- test12345 ss',
-          Entities: [],
-          Name: 'test',
-          range: new Range(new Position(4, 0), new Position(7, 14)),
-        },
-      ],
-      diagnostics: [
-        {
-          message: 'lu syntax error',
-          severity: 'Error',
-          location: 'test.en-us',
-          range: {
-            end: { character: 2, line: 7 },
-            start: { character: 0, line: 7 },
-          },
-        },
-      ],
-    },
-  ],
-  lgFiles: [
-    {
-      content: 'test',
-      id: 'test.en-us',
-      templates: [
-        {
-          body: '- ${add(1,2)}',
-          name: 'bar',
-          range: new Range(new Position(0, 0), new Position(2, 14)),
-        },
-      ],
-      diagnostics: [
-        {
-          message: 'lg syntax error',
-          severity: 'Error',
-          location: 'test.en-us',
-          range: {
-            end: { character: 2, line: 13 },
-            start: { character: 0, line: 13 },
-          },
-        },
-      ],
-    },
-  ],
-  jsonSchemaFiles: [
-    {
-      id: 'schema1.json',
-      content: 'test',
-    },
-  ],
-  diagnostics: [
-    {
-      message: 'server error',
-      severity: 'Error',
-      location: 'server',
-    },
-  ],
-  settings: {
-    skill: {
-      'Email-Skill': {
-        manifestUrl: 'https://yuesuemailskill0207-gjvga67.azurewebsites.net/manifest/manifest-1.0.json',
-        endpointUrl: 'https://yuesuemailskill0207-gjvga67.azurewebsites.net/api/messages',
-        name: 'Email-Skill',
-      },
-    },
-  },
-  formDialogSchemas: [{ id: '1', content: '{}' }],
-};
-
-describe('<DiagnosticList/>', () => {
-  const initRecoilState = ({ set }) => {
-    set(currentProjectIdState, state.projectId);
-    set(botProjectIdsState, [state.projectId]);
-    set(dialogIdsState(state.projectId), []);
-    set(luFilesSelectorFamily(state.projectId), state.luFiles);
-    set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
-    set(jsonSchemaFilesState(state.projectId), state.jsonSchemaFiles);
-    set(botDiagnosticsState(state.projectId), state.diagnostics);
-    set(settingsState(state.projectId), state.settings);
-    set(schemasState(state.projectId), mockProjectResponse.schemas);
-    set(
-      formDialogSchemaIdsState(state.projectId),
-      state.formDialogSchemas.map((fds) => fds.id)
-    );
-  };
-
-  it('should render the DiagnosticList', () => {
-    const { container } = renderWithRecoil(
-      <DiagnosticList diagnosticItems={state.diagnostics as any} />,
-      initRecoilState
-    );
-    expect(container).toHaveTextContent('server');
-  });
-});
diff --git a/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx b/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
index 8bd3faf00c..0775bcb60e 100644
--- a/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
+++ b/Composer/packages/client/src/components/BotRuntimeController/BotController.tsx
@@ -11,6 +11,7 @@ import formatMessage from 'format-message';
 import { css } from '@emotion/core';
 import { NeutralColors, CommunicationColors } from '@uifabric/fluent-theme';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
+import { DiagnosticSeverity } from '@botframework-composer/types';
 
 import { DisableFeatureToolTip } from '../DisableFeatureToolTip';
 import TelemetryClient from '../../telemetry/TelemetryClient';
@@ -66,7 +67,7 @@ type BotControllerProps = {
 const BotController: React.FC<BotControllerProps> = ({ onHideController, isControllerHidden }: BotControllerProps) => {
   const runningBots = useRecoilValue(runningBotsSelector);
   const projectCollection = useRecoilValue(buildConfigurationSelector);
-  const errors = useRecoilValue(allDiagnosticsSelectorFamily('Error'));
+  const errors = useRecoilValue(allDiagnosticsSelectorFamily([DiagnosticSeverity.Error]));
   const { onboardingAddCoachMarkRef } = useRecoilValue(dispatcherState);
   const onboardRef = useCallback((startBot) => onboardingAddCoachMarkRef({ startBot }), []);
   const [disableStartBots, setDisableOnStartBotsWidget] = useState(false);
@@ -100,18 +101,15 @@ const BotController: React.FC<BotControllerProps> = ({ onHideController, isContr
   }, [projectCollection, errors]);
 
   useEffect(() => {
-    console.log('Prokjject', projectCollection);
     const botsProcessing =
       startAllBotsOperationQueued ||
-      projectCollection.some(({ status }) => isBotStarting(status) || status == BotStatus.stopping);
+      projectCollection.some(({ status }) => isBotStarting(status) || status === BotStatus.stopping);
     setBotsProcessing(botsProcessing);
-    console.log('Botproce', botsProcessing);
 
     const botOperationsCompleted = projectCollection.some(
       ({ status }) => status === BotStatus.connected || status === BotStatus.failed
     );
     setBotsStartOperationCompleted(botOperationsCompleted);
-    console.log('Botprasdasd oce', projectCollection);
 
     if (botsProcessing) {
       setStatusIconClass(undefined);
diff --git a/Composer/packages/client/src/components/BotRuntimeController/utils.ts b/Composer/packages/client/src/components/BotRuntimeController/utils.ts
index 59776d123d..3f52db5a01 100644
--- a/Composer/packages/client/src/components/BotRuntimeController/utils.ts
+++ b/Composer/packages/client/src/components/BotRuntimeController/utils.ts
@@ -8,7 +8,7 @@ export const isBotStarting = (currentStatus: BotStatus) => {
     currentStatus === BotStatus.publishing ||
     currentStatus === BotStatus.published ||
     currentStatus == BotStatus.pending ||
-    currentStatus == BotStatus.queued ||
-    currentStatus == BotStatus.starting
+    currentStatus === BotStatus.queued ||
+    currentStatus === BotStatus.starting
   );
 };
diff --git a/Composer/packages/client/src/components/DiagnosticsHeader.tsx b/Composer/packages/client/src/components/DiagnosticsHeader.tsx
index aabf54b44e..296b906b97 100644
--- a/Composer/packages/client/src/components/DiagnosticsHeader.tsx
+++ b/Composer/packages/client/src/components/DiagnosticsHeader.tsx
@@ -5,6 +5,7 @@
 import { jsx, css } from '@emotion/core';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
+import { DiagnosticSeverity } from '@botframework-composer/types';
 
 import { allDiagnosticsSelectorFamily } from '../recoilModel';
 
@@ -20,8 +21,8 @@ type DiagnosticsHeaderProps = {
 };
 
 export const DiagnosticsHeader: React.FC<DiagnosticsHeaderProps> = React.memo(({ onClick = () => {} }) => {
-  const errors = useRecoilValue(allDiagnosticsSelectorFamily('Error'));
-  const warnings = useRecoilValue(allDiagnosticsSelectorFamily('Warning'));
+  const errors = useRecoilValue(allDiagnosticsSelectorFamily([DiagnosticSeverity.Error]));
+  const warnings = useRecoilValue(allDiagnosticsSelectorFamily([DiagnosticSeverity.Warning]));
 
   return (
     <div css={iconPosition}>
diff --git a/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx b/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx
index bb249552b6..ca175f8b8e 100644
--- a/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx
+++ b/Composer/packages/client/src/components/DropdownWithAllOption/DropdownWithAllOption.tsx
@@ -3,18 +3,16 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { Dropdown, IDropdownOption, IDropdownStyles } from 'office-ui-fabric-react/lib/Dropdown';
-import React, { useEffect, useState, Fragment } from 'react';
+import { Dropdown, IDropdownOption, IDropdownStyles, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown';
+import React, { useMemo } from 'react';
 
 const dropdownStyles: Partial<IDropdownStyles> = {
   dropdown: { width: 300 },
 };
 
-interface DropdownWithAllOptionProps {
-  placeholder: string;
+export interface DropdownWithAllOptionProps extends Omit<IDropdownProps, 'onChange'> {
   selectedKeys: string[];
-  setSelectedKeys: (keys: string[]) => void;
-  dropdownOptions: IDropdownOption[];
+  onChange: (event: React.FormEvent<HTMLDivElement>, selectedItems: string[]) => void;
   optionAll: {
     key: string;
     text: string;
@@ -22,10 +20,9 @@ interface DropdownWithAllOptionProps {
 }
 
 export const DropdownWithAllOption: React.FC<DropdownWithAllOptionProps> = (props) => {
-  const { selectedKeys, setSelectedKeys, placeholder, dropdownOptions, optionAll } = props;
-  const [currentOptions, setCurrentOptions] = useState<IDropdownOption[]>([]);
+  const { selectedKeys, onChange, placeholder, options: dropdownOptions, optionAll } = props;
 
-  useEffect(() => {
+  const currentOptions = useMemo(() => {
     const allOptions = [...dropdownOptions];
     if (allOptions.length > 1) {
       allOptions.unshift({
@@ -34,17 +31,17 @@ export const DropdownWithAllOption: React.FC<DropdownWithAllOptionProps> = (prop
       });
     }
 
-    setCurrentOptions(allOptions);
+    return allOptions;
   }, [dropdownOptions]);
 
   const onOptionSelectionChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
     if (item) {
       if (item.key === optionAll.key) {
         if (!item.selected) {
-          setSelectedKeys([]);
+          onChange(event, []);
         } else {
           const allOptions = currentOptions.map((option) => option.key as string);
-          setSelectedKeys(allOptions);
+          onChange(event, allOptions);
         }
         return;
       }
@@ -54,18 +51,18 @@ export const DropdownWithAllOption: React.FC<DropdownWithAllOptionProps> = (prop
       if (allIndex !== -1) {
         tempState.splice(allIndex, 1);
       }
-      setSelectedKeys(item.selected ? [...tempState, item.key as string] : tempState.filter((key) => key !== item.key));
+      onChange(event, item.selected ? [...tempState, item.key as string] : tempState.filter((key) => key !== item.key));
     }
   };
 
   const onRenderTitle = (selectedItems: IDropdownOption[] | undefined): JSX.Element | null => {
     const allIndex = selectedKeys.findIndex((option) => option === optionAll.key);
     if (allIndex !== -1) {
-      return <Fragment>{currentOptions[0].text}</Fragment>;
+      return currentOptions[0].text as any;
     }
     if (selectedItems?.length) {
       const items = selectedItems.map((item) => item.text);
-      return <Fragment>{items.join(', ')}</Fragment>;
+      return items.join(', ') as any;
     }
     return null;
   };
diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
index d4a575a8c2..e9120b1d8f 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -4,7 +4,7 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import React, { useState, useCallback } from 'react';
-import { FontSizes } from '@uifabric/fluent-theme';
+import { FontSizes, FluentTheme } from '@uifabric/fluent-theme';
 import { DefaultPalette } from '@uifabric/styling';
 import { OverflowSet, IOverflowSetItemProps } from 'office-ui-fabric-react/lib/OverflowSet';
 import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
@@ -184,7 +184,7 @@ const statusIcon = {
 
 const warningIcon = {
   ...statusIcon,
-  color: '#BE880A',
+  color: FluentTheme.palette.yellow,
 };
 
 const errorIcon = {
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
index b18220a651..706305c314 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticFilters.tsx
@@ -5,12 +5,12 @@
 import { jsx } from '@emotion/core';
 import formatMessage from 'format-message';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
-import { FontSizes, SharedColors, NeutralColors } from '@uifabric/fluent-theme';
+import { FontSizes, SharedColors, NeutralColors, FluentTheme } from '@uifabric/fluent-theme';
 import { DiagnosticSeverity } from '@bfc/shared';
 import { FontWeights } from '@uifabric/styling';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 import { outputsDebugPanelSelector, rootBotProjectIdSelector } from '../../../../../recoilModel';
 import { DropdownWithAllOption } from '../../../../../components/DropdownWithAllOption/DropdownWithAllOption';
@@ -19,28 +19,27 @@ const severityTextStyle = {
   marginRight: '6px',
 };
 
-const countFontWeight: any = {
+const countStyle: any = {
   fontWeight: FontWeights.bold,
 };
 
 const getOptionAll = () => {
   return {
     key: 'All',
-    text: formatMessage('All bots'),
+    text: formatMessage('All projects'),
   };
 };
 
 const getSeverityButtonStyle = (severityType: DiagnosticSeverity, isChecked: boolean): any => {
   const baseStyle = {
     root: {
-      padding: '8px 4px',
+      padding: '4px 8px',
       marginRight: '8px',
       fontSize: FontSizes.size12,
-      fontFamily: 'Segoe UI',
       textAlign: 'center',
       border: `1px solid ${NeutralColors.gray20}`,
       boderRadius: '2px',
-      height: '25px',
+      height: '24px',
       fontWeight: '500',
     },
     icon: {
@@ -55,7 +54,7 @@ const getSeverityButtonStyle = (severityType: DiagnosticSeverity, isChecked: boo
       ...baseStyle,
       icon: {
         ...baseStyle.icon,
-        color: isChecked ? '#F4BD00' : NeutralColors.gray90,
+        color: isChecked ? FluentTheme.palette.yellow : NeutralColors.gray90,
       },
     };
   } else {
@@ -67,42 +66,40 @@ type DiagnosticsFiltersProps = {
   showErrors: boolean;
   projectsToFilter: string[];
   showWarnings: boolean;
-  setWarningFilter: (value: boolean) => void;
-  setErrorFilter: (value: boolean) => void;
-  setProjectsToFilter: (projects: string[]) => void;
   errorCount: number;
   warningCount: number;
+  onWarningFilterChange: (value: boolean) => void;
+  onErrorFilterChange: (value: boolean) => void;
+  onProjectFilterChange: (projects: string[]) => void;
 };
 
 export const DiagnosticsFilters: React.FC<DiagnosticsFiltersProps> = (props) => {
   const {
     showErrors,
     showWarnings,
-    setWarningFilter,
-    setErrorFilter,
-    setProjectsToFilter,
+    onWarningFilterChange,
+    onErrorFilterChange,
+    onProjectFilterChange,
     projectsToFilter,
     errorCount,
     warningCount,
   } = props;
   const projects = useRecoilValue(outputsDebugPanelSelector);
-  const [projectSelectorOptions, setProjectSelectorOptions] = useState<IDropdownOption[]>([]);
   const rootBotProjectId = useRecoilValue(rootBotProjectIdSelector);
 
   useEffect(() => {
     if (rootBotProjectId) {
-      setProjectsToFilter([rootBotProjectId]);
+      onProjectFilterChange([rootBotProjectId]);
     }
   }, [rootBotProjectId]);
 
-  useEffect(() => {
-    const projectOptions = projects.map(({ projectId, botName }) => {
+  const projectSelectorOptions = useMemo(() => {
+    return projects.map(({ projectId, botName }) => {
       return {
         key: projectId,
         text: botName,
       };
     });
-    setProjectSelectorOptions(projectOptions);
   }, [projects]);
 
   if (!rootBotProjectId) {
@@ -110,24 +107,20 @@ export const DiagnosticsFilters: React.FC<DiagnosticsFiltersProps> = (props) =>
   }
 
   return (
-    <div
-      css={{
-        display: 'flex',
-        flex: '1 1 auto',
-        width: '100%',
-      }}
-    >
+    <Stack horizontal>
       <DefaultButton
         allowDisabledFocus
         checked={showErrors}
         iconProps={{ iconName: 'StatusErrorFull' }}
         styles={getSeverityButtonStyle(DiagnosticSeverity.Error, showErrors)}
         onClick={() => {
-          setErrorFilter(!showErrors);
+          onErrorFilterChange(!showErrors);
         }}
       >
-        <span style={severityTextStyle}>{formatMessage('Errors')}</span>
-        <span style={countFontWeight}>{errorCount}</span>
+        <span style={severityTextStyle}>
+          {formatMessage(`{count, plural,=1 {Error}other {Errors}}`, { count: errorCount })}
+        </span>
+        <span style={countStyle}>{errorCount}</span>
       </DefaultButton>
       <DefaultButton
         allowDisabledFocus
@@ -136,11 +129,13 @@ export const DiagnosticsFilters: React.FC<DiagnosticsFiltersProps> = (props) =>
         iconProps={{ iconName: 'WarningSolid' }}
         styles={getSeverityButtonStyle(DiagnosticSeverity.Warning, showWarnings)}
         onClick={() => {
-          setWarningFilter(!showWarnings);
+          onWarningFilterChange(!showWarnings);
         }}
       >
-        <span style={severityTextStyle}>{formatMessage('Warnings')}</span>
-        <span style={countFontWeight}>{warningCount}</span>
+        <span style={severityTextStyle}>
+          {formatMessage(`{count, plural,=1 {Warning}other {Warnings}}`, { count: warningCount })}
+        </span>
+        <span style={countStyle}>{warningCount}</span>
       </DefaultButton>
       <div
         css={{
@@ -148,13 +143,15 @@ export const DiagnosticsFilters: React.FC<DiagnosticsFiltersProps> = (props) =>
         }}
       >
         <DropdownWithAllOption
-          dropdownOptions={projectSelectorOptions}
           optionAll={getOptionAll()}
+          options={projectSelectorOptions}
           placeholder={formatMessage('Select a project')}
           selectedKeys={projectsToFilter}
-          setSelectedKeys={setProjectsToFilter}
+          onChange={(_, items: string[]) => {
+            onProjectFilterChange(items);
+          }}
         />
       </div>
-    </div>
+    </Stack>
   );
 };
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
index 27b9548896..ff4c6cc29f 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticList.tsx
@@ -16,7 +16,7 @@ import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
 import formatMessage from 'format-message';
 import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
-import { FontSizes, SharedColors } from '@uifabric/fluent-theme';
+import { FontSizes, SharedColors, FluentTheme } from '@uifabric/fluent-theme';
 import { css } from '@emotion/core';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Link } from 'office-ui-fabric-react/lib/Link';
@@ -36,12 +36,12 @@ import { IDiagnosticInfo } from './DiagnosticType';
 
 // -------------------- Styles -------------------- //
 
-const maxHeightDetailsList = 45;
+const maxHeightDetailsList = 32;
 
-const icons = {
-  Error: { iconName: 'StatusErrorFull', color: SharedColors.red10 },
-  Warning: { iconName: 'WarningSolid', color: SharedColors.yellow10 },
-};
+const icons = [
+  { iconName: 'StatusErrorFull', color: SharedColors.red10 },
+  { iconName: 'WarningSolid', color: FluentTheme.palette.yellow },
+];
 
 const diagnostic = mergeStyleSets({
   typeIconHeaderIcon: {
@@ -67,10 +67,6 @@ const typeIcon = (icon) => css`
   cursor: pointer;
 `;
 
-const detailList = css`
-  height: calc(100% - 55px);
-`;
-
 const tableCell = css`
   margin-top: 4px;
   outline: none;
@@ -174,10 +170,9 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
       isResizable: true,
       data: 'string',
       onRender: (item: IDiagnosticInfo) => {
-        console.log('Location', item.location);
         let locationPath = item.location;
-        if (item.friendlyLocationBreadcrumb) {
-          locationPath = item.friendlyLocationBreadcrumb.join(' > ');
+        if (item.friendlyLocationBreadcrumbItems) {
+          locationPath = item.friendlyLocationBreadcrumbItems.join(' > ');
         }
         return (
           <div css={[tableCell, textWrapStyle]}>
@@ -245,14 +240,13 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
     const sortFactor = columns[1].isSortedDescending ? 1 : -1;
     const result = diagnosticItems.sort((a, b) => {
       // Error before Warning
-      const severityComparator = a.severity.localeCompare(b.severity);
+      const severityComparator = a.severity - b.severity;
       if (severityComparator === 0) {
         // Sort by name
         return sortFactor * getProjectName(a.projectId).localeCompare(getProjectName(b.projectId), locale);
       }
       return severityComparator;
     });
-    console.log('Result', diagnosticItems);
     return result;
   }, [diagnosticItems, columns]);
 
@@ -263,7 +257,6 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
         checkboxVisibility={CheckboxVisibility.hidden}
         columns={columns}
         constrainMode={ConstrainMode.unconstrained}
-        css={detailList}
         items={displayedDiagnosticItems}
         layoutMode={DetailsListLayoutMode.justified}
         selectionMode={SelectionMode.single}
@@ -271,7 +264,6 @@ export const DiagnosticList: React.FC<IDiagnosticListProps> = ({ diagnosticItems
         styles={{
           root: {
             maxHeight: `calc(100% - ${maxHeightDetailsList}px)`,
-            selectors: {},
           },
         }}
         onRenderDetailsHeader={onRenderDetailsHeader}
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticType.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticType.ts
index 6d291f9f3a..f99fa35991 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticType.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticType.ts
@@ -2,13 +2,13 @@
 // Licensed under the MIT License.
 import { createSingleMessage, isDiagnosticWithInRange } from '@bfc/indexers';
 import { Diagnostic, DialogInfo, LuFile, LgFile, LgNamePattern, ITrigger } from '@bfc/shared';
+import { DiagnosticSeverity } from '@botframework-composer/types';
 import get from 'lodash/get';
 import formatMessage from 'format-message';
 
 import { getBaseName } from '../../../../../utils/fileUtil';
 import { replaceDialogDiagnosticLabel } from '../../../../../utils/dialogUtil';
 import { convertPathToUrl, createBotSettingUrl } from '../../../../../utils/navigation';
-export const DiagnosticSeverity = ['Error', 'Warning']; //'Information', 'Hint'
 
 export enum DiagnosticType {
   DIALOG,
@@ -25,7 +25,7 @@ export interface IDiagnosticInfo {
   rootProjectId: string;
   projectId: string;
   id: string;
-  severity: string;
+  severity: DiagnosticSeverity;
   type: DiagnosticType;
   location: string;
   message: string;
@@ -35,7 +35,7 @@ export interface IDiagnosticInfo {
   getUrl: (hash?: string) => string;
   learnMore?: string;
   title?: string;
-  friendlyLocationBreadcrumb?: string[];
+  friendlyLocationBreadcrumbItems?: string[];
 }
 
 const getFriendlyPath = (dialogPath: string | undefined, dialogs: DialogInfo[]) => {
@@ -44,7 +44,7 @@ const getFriendlyPath = (dialogPath: string | undefined, dialogs: DialogInfo[])
     if (!dialogPath) {
       return [];
     }
-    const [dialogName, triggerPath, ...actionPaths] = dialogPath.split('#')[0].split('.');
+    const [dialogName, triggerPath, ...actionPaths] = dialogPath.split('#')[0]?.split('.');
     if (dialogName) {
       const matchedDialog = dialogs.find(({ displayName }) => displayName === dialogName);
 
@@ -63,6 +63,7 @@ const getFriendlyPath = (dialogPath: string | undefined, dialogs: DialogInfo[])
             }
             const actionPath = actionPaths[i];
             currentPath = get(currentPath, actionPath, null);
+
             if (currentPath.$kind) {
               breadcrumb.push(currentPath.$kind);
             }
@@ -80,7 +81,7 @@ export abstract class DiagnosticInfo implements IDiagnosticInfo {
   rootProjectId: string;
   projectId: string;
   id: string;
-  severity: string;
+  severity: DiagnosticSeverity;
   type = DiagnosticType.GENERAL;
   location: string;
   message = '';
@@ -90,14 +91,14 @@ export abstract class DiagnosticInfo implements IDiagnosticInfo {
   getUrl = () => '';
   learnMore?: string;
   title?: string;
-  friendlyLocationBreadcrumb?: string[];
+  friendlyLocationBreadcrumbItems?: string[];
 
   constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
     this.rootProjectId = rootProjectId;
     this.projectId = projectId;
     this.id = id;
     this.resourceId = getBaseName(id);
-    this.severity = DiagnosticSeverity[diagnostic.severity] || '';
+    this.severity = diagnostic.severity;
     this.diagnostic = diagnostic;
     this.location = location;
   }
@@ -109,7 +110,7 @@ export class BotDiagnostic extends DiagnosticInfo {
     super(rootProjectId, projectId, id, location, diagnostic);
     this.message = diagnostic.message;
     if (this.location === 'manifest.json') {
-      this.friendlyLocationBreadcrumb = [formatMessage('Skill Manifest')];
+      this.friendlyLocationBreadcrumbItems = [formatMessage('Skill Manifest')];
     }
   }
 
@@ -141,7 +142,7 @@ export class DialogDiagnostic extends DiagnosticInfo {
     this.dialogPath = diagnostic.path;
     const friendlyPath = getFriendlyPath(this.dialogPath, dialogs);
     if (friendlyPath.length) {
-      this.friendlyLocationBreadcrumb = friendlyPath;
+      this.friendlyLocationBreadcrumbItems = friendlyPath;
     }
   }
 
@@ -194,7 +195,7 @@ export class SettingDiagnostic extends DiagnosticInfo {
     super(rootProjectId, projectId, id, location, diagnostic);
     this.message = `${replaceDialogDiagnosticLabel(diagnostic.path)} ${diagnostic.message}`;
     this.dialogPath = diagnostic.path;
-    this.friendlyLocationBreadcrumb = ['Settings'];
+    this.friendlyLocationBreadcrumbItems = ['Settings'];
   }
   getUrl = (hash?: string) => {
     return createBotSettingUrl(this.rootProjectId, this.projectId, hash);
@@ -217,7 +218,7 @@ export class LgDiagnostic extends DiagnosticInfo {
     this.dialogPath = this.findDialogPath(lgFile, dialogs, diagnostic);
     const friendlyPath = getFriendlyPath(this.dialogPath, dialogs);
     if (friendlyPath.length) {
-      this.friendlyLocationBreadcrumb = friendlyPath;
+      this.friendlyLocationBreadcrumbItems = friendlyPath;
     }
   }
 
@@ -265,7 +266,7 @@ export class LuDiagnostic extends DiagnosticInfo {
     this.dialogPath = this.findDialogPath(luFile, dialogs, diagnostic);
     const friendlyPath = getFriendlyPath(this.dialogPath, dialogs);
     if (friendlyPath.length) {
-      this.friendlyLocationBreadcrumb = friendlyPath;
+      this.friendlyLocationBreadcrumbItems = friendlyPath;
     }
     this.message = createSingleMessage(diagnostic);
   }
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx
index 614922a0cf..bfd76d8d87 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatus.tsx
@@ -5,7 +5,7 @@
 import { jsx } from '@emotion/core';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { useSetRecoilState, useRecoilValue } from 'recoil';
-import { FontSizes, SharedColors } from '@uifabric/fluent-theme';
+import { FontSizes, SharedColors, FluentTheme } from '@uifabric/fluent-theme';
 import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
 import formatMessage from 'format-message';
 
@@ -59,7 +59,7 @@ export const DiagnosticsStatus = () => {
               border: 'none',
               minWidth: '40px',
               margin: 0,
-              padding: 0,
+              padding: '0px 3px',
             },
             label: { fontSize: FontSizes.size18, fontFamily: 'Segoe UI' },
           }}
@@ -103,7 +103,7 @@ export const DiagnosticsStatus = () => {
           <span css={{ display: 'flex', alignItems: 'center' }}>
             <FontIcon
               css={{
-                color: `#F4BD00`,
+                color: FluentTheme.palette.yellow,
                 fontSize: FontSizes.size18,
                 marginRight: '5px',
               }}
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatusFilter.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatusFilter.tsx
deleted file mode 100644
index 3a017dc984..0000000000
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsStatusFilter.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { FontSizes, NeutralColors, SharedColors } from '@uifabric/fluent-theme';
-import formatMessage from 'format-message';
-
-import { Severity, useDiagnosticsStatistics } from './useDiagnostics';
-
-/**
- * Displays how many errors and warnings in current project.
- */
-export const DiagnosticsStatusFilter = ({ filterType, onChangeFilterType }) => {
-  const { errorsCount, warningsCount } = useDiagnosticsStatistics();
-  const errorsMsg = `${errorsCount} ${errorsCount === 1 ? 'error' : 'errors'}`;
-  const warningsMsg = `${warningsCount} ${warningsCount === 1 ? 'warning' : 'warnings'}`;
-
-  return (
-    <div
-      css={{
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-        backgroundColor: NeutralColors.gray10,
-      }}
-      data-testid="diagnostics-sidebar"
-    >
-      <DefaultButton
-        iconProps={{ iconName: 'StatusErrorFull' }}
-        styles={{
-          root: {
-            height: '24px',
-            padding: 0,
-            paddingRight: '3px',
-            width: '100%',
-            border: 'none',
-            backgroundColor: filterType === Severity.Error ? NeutralColors.gray40 : NeutralColors.gray10,
-          },
-          flexContainer: { paddingLeft: '24px', justifyContent: 'inherit' },
-          label: { fontSize: FontSizes.size12, fontFamily: 'Segoe UI', lineHeight: '12px', textAlign: 'left' },
-          icon: { color: SharedColors.red10, fontSize: FontSizes.size14, lineHeight: '18px' },
-        }}
-        onClick={() => {
-          onChangeFilterType(Severity.Error);
-        }}
-      >
-        {formatMessage(`{errorsMsg}`, { errorsMsg })}
-      </DefaultButton>
-      <DefaultButton
-        iconProps={{ iconName: 'WarningSolid' }}
-        styles={{
-          root: {
-            height: '24px',
-            padding: 0,
-            paddingRight: '3px',
-            border: 'none',
-            width: '100%',
-            backgroundColor: filterType === Severity.Warning ? NeutralColors.gray40 : NeutralColors.gray10,
-          },
-          flexContainer: { paddingLeft: '24px', justifyContent: 'inherit' },
-          label: { fontSize: FontSizes.size12, fontFamily: 'Segoe UI', lineHeight: '12px', textAlign: 'left' },
-          icon: { color: SharedColors.yellow10, fontSize: FontSizes.size14, lineHeight: '18px' },
-        }}
-        onClick={() => {
-          onChangeFilterType(Severity.Warning);
-        }}
-      >
-        {formatMessage(`{warningsMsg}`, { warningsMsg })}
-      </DefaultButton>
-    </div>
-  );
-};
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx
index e084ffb966..c125a94674 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent.tsx
@@ -3,18 +3,19 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
+import { DiagnosticSeverity } from '@bfc/shared';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 import { DebugPanelTabHeaderProps } from '../types';
 import { dispatcherState, showErrorDiagnosticsState, showWarningDiagnosticsState } from '../../../../../recoilModel';
 
-import { IDiagnosticInfo } from './DiagnosticType';
 import { DiagnosticList } from './DiagnosticList';
-import { Severity, useDiagnosticsData } from './useDiagnostics';
+import { useDiagnosticsData } from './useDiagnostics';
 import { DiagnosticsFilters } from './DiagnosticFilters';
 
-const severityFilterHeight = 45;
+const severityFilterHeight = 32;
 
 export const DiagnosticsContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive }) => {
   const diagnostics = useDiagnosticsData();
@@ -22,80 +23,75 @@ export const DiagnosticsContent: React.FC<DebugPanelTabHeaderProps> = ({ isActiv
   const showWarnings = useRecoilValue(showWarningDiagnosticsState);
   const showErrors = useRecoilValue(showErrorDiagnosticsState);
   const [projectsToFilter, setProjectsToFilter] = useState<string[]>([]);
-  const [errorCount, setErrorCount] = useState<number>(0);
-  const [warningCount, setWarningCount] = useState<number>(0);
-  const [filteredDiagnostics, setFilteredDiagnostics] = useState<IDiagnosticInfo[]>([]);
 
-  useEffect(() => {
-    let errorCt = 0;
-    let warningCt = 0;
+  const { filteredDiagnostics, errorCount, warningCount } = useMemo(() => {
+    let countOfErrors = 0;
+    let countOfWarnings = 0;
     const filteredItems = diagnostics.filter((diagnostic) => {
       const projectFilter = projectsToFilter.includes(diagnostic.projectId);
+
       if (!projectFilter) {
         return false;
       }
 
       let errorFilter = false;
-      if (diagnostic.severity === Severity.Error) {
-        errorCt++;
+
+      if (diagnostic.severity === DiagnosticSeverity.Error) {
+        countOfErrors++;
         if (showErrors) {
           errorFilter = true;
         }
       }
 
       let warningFilter = false;
-      if (diagnostic.severity === Severity.Warning) {
-        warningCt++;
+      if (diagnostic.severity === DiagnosticSeverity.Warning) {
+        countOfWarnings++;
         if (showWarnings) {
           warningFilter = true;
         }
       }
       return warningFilter || errorFilter;
     });
-    setErrorCount(errorCt);
-    setWarningCount(warningCt);
-    setFilteredDiagnostics(filteredItems);
+
+    return {
+      filteredDiagnostics: filteredItems,
+      errorCount: countOfErrors,
+      warningCount: countOfWarnings,
+    };
   }, [projectsToFilter, showWarnings, showErrors, diagnostics]);
 
   if (!isActive) {
     return null;
   }
-
   return (
-    <div
-      css={{
-        height: '100%',
-        width: '100%',
-      }}
-    >
-      <div
+    <Stack verticalFill>
+      <Stack.Item
         css={{
           height: `${severityFilterHeight}px`,
-          display: 'flex',
-          flex: '1 1 auto',
-          alignItems: 'center',
+          marginTop: '14px',
           padding: '0 16px',
+          alignItems: 'center',
         }}
       >
         <DiagnosticsFilters
           errorCount={errorCount}
           projectsToFilter={projectsToFilter}
-          setErrorFilter={setErrorDiagnosticsFilter}
-          setProjectsToFilter={setProjectsToFilter}
-          setWarningFilter={setWarningDiagnosticsFilter}
           showErrors={showErrors}
           showWarnings={showWarnings}
           warningCount={warningCount}
+          onErrorFilterChange={setErrorDiagnosticsFilter}
+          onProjectFilterChange={setProjectsToFilter}
+          onWarningFilterChange={setWarningDiagnosticsFilter}
         />
-      </div>
-      <div
+      </Stack.Item>
+      <Stack.Item
         css={{
           height: `calc(100% - ${severityFilterHeight}px)`,
           position: 'relative',
         }}
       >
         <DiagnosticList diagnosticItems={filteredDiagnostics} />
-      </div>
-    </div>
+      </Stack.Item>
+    </Stack>
   );
 };
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts
index e8543bd0b7..0f954c9bf0 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/useDiagnostics.ts
@@ -2,18 +2,16 @@
 // Licensed under the MIT License.
 
 import { useRecoilValue } from 'recoil';
+import { DiagnosticSeverity } from '@bfc/shared';
 
 import { allDiagnosticsSelectorFamily } from '../../../../../recoilModel';
 
-import { IDiagnosticInfo, DiagnosticSeverity } from './DiagnosticType';
-
-export const Severity = {
-  Error: DiagnosticSeverity[0],
-  Warning: DiagnosticSeverity[1],
-};
+import { IDiagnosticInfo } from './DiagnosticType';
 
 export const useDiagnosticsData = (): IDiagnosticInfo[] => {
-  const diagnosticData = useRecoilValue(allDiagnosticsSelectorFamily('All'));
+  const diagnosticData = useRecoilValue(
+    allDiagnosticsSelectorFamily([DiagnosticSeverity.Error, DiagnosticSeverity.Warning])
+  );
 
   return diagnosticData ?? [];
 };
@@ -21,8 +19,8 @@ export const useDiagnosticsData = (): IDiagnosticInfo[] => {
 export const useDiagnosticsStatistics = () => {
   const diagnosticsData = useDiagnosticsData();
 
-  const errorsCount = diagnosticsData.filter((d) => d.severity === Severity.Error).length;
-  const warningsCount = diagnosticsData.filter((d) => d.severity === Severity.Warning).length;
+  const errorsCount = diagnosticsData.filter((d) => d.severity === DiagnosticSeverity.Error).length;
+  const warningsCount = diagnosticsData.filter((d) => d.severity === DiagnosticSeverity.Warning).length;
 
   const hasError = errorsCount > 0;
   const hasWarning = warningsCount > 0;
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
index 0d6536d799..fdd5e4d1c1 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
@@ -5,7 +5,7 @@
 import { css, jsx } from '@emotion/core';
 import React, { useMemo, useEffect, useState, useRef, useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
-import { ConversationTrafficItem } from '@botframework-composer/types/src';
+import { ConversationTrafficItem, DiagnosticSeverity } from '@botframework-composer/types';
 import formatMessage from 'format-message';
 import debounce from 'lodash/debounce';
 import { ActionButton } from 'office-ui-fabric-react/lib/Button';
@@ -20,6 +20,7 @@ import {
   botStatusState,
   isWebChatPanelVisibleState,
   runningBotsSelector,
+  allDiagnosticsSelectorFamily,
 } from '../../../../../recoilModel';
 import { DebugPanelTabHeaderProps } from '../types';
 import { WebChatInspectionData } from '../../../../../recoilModel/types';
@@ -82,6 +83,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
   const { startAllBots } = useBotOperations();
   const isPVABot = usePVACheck(currentProjectId ?? '');
   const [isWebChatPanelOpenedOnce, setIsWebChatPanelOpenedOnce] = useState(false);
+  const projectErrors = useRecoilValue(allDiagnosticsSelectorFamily([DiagnosticSeverity.Error]));
 
   const navigateToNewestLogEntry = () => {
     if (currentLogItemCount && webChatContainerRef?.current) {
@@ -210,7 +212,13 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
             {
               total: runningBots.totalBots,
               actionButton: ({ children }) => (
-                <ActionButton key="webchat-tab-startbot" styles={actionButton} type="button" onClick={startAllBots}>
+                <ActionButton
+                  key="webchat-tab-startbot"
+                  disabled={projectErrors.length > 0}
+                  styles={actionButton}
+                  type="button"
+                  onClick={startAllBots}
+                >
                   {children}
                 </ActionButton>
               ),
@@ -244,7 +252,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
       );
     }
     return null;
-  }, [currentStatus, currentProjectId]);
+  }, [currentStatus, currentProjectId, projectErrors]);
 
   return (
     <div css={logContainer(isActive)}>
diff --git a/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts b/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
index eb8954b738..15f319c239 100644
--- a/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/diagnosticsPageSelector.ts
@@ -6,6 +6,7 @@ import { selectorFamily, selector } from 'recoil';
 import lodashGet from 'lodash/get';
 import formatMessage from 'format-message';
 import { getFriendlyName } from '@bfc/shared';
+import { DiagnosticSeverity } from '@botframework-composer/types/src';
 
 import { getReferredLuFiles } from '../../utils/luUtil';
 import { INavTreeItem } from '../../components/NavTree';
@@ -84,6 +85,7 @@ export const botDiagnosticsSelectorFamily = selectorFamily({
 
     const rootProjectId = get(rootBotProjectIdSelector) ?? projectId;
     const diagnostics = get(botDiagnosticsState(projectId));
+
     const diagnosticList: DiagnosticInfo[] = [];
 
     diagnostics.forEach((d) => {
@@ -232,6 +234,7 @@ export const luDiagnosticsSelectorFamily = selectorFamily({
   key: 'luDiagnosticsSelectorFamily',
   get: (projectId: string) => ({ get }) => {
     const botAssets = get(botAssetsSelectFamily(projectId));
+
     if (botAssets === null) return [];
 
     const rootProjectId = get(rootBotProjectIdSelector) ?? projectId;
@@ -311,12 +314,12 @@ export const diagnosticsSelectorFamily = selectorFamily({
 
 export const allDiagnosticsSelectorFamily = selectorFamily({
   key: 'allDiagnosticsSelector',
-  get: (type: 'Error' | 'Warning' | 'All') => ({ get }) => {
+  get: (severitiesToFilter: DiagnosticSeverity[]) => ({ get }) => {
     const ids = get(botProjectIdsState);
     const result = ids.reduce((result: DiagnosticInfo[], id: string) => {
       return [
         ...result,
-        ...get(diagnosticsSelectorFamily(id)).filter((diagnostic) => type === 'All' || diagnostic.severity === type),
+        ...get(diagnosticsSelectorFamily(id)).filter((diagnostic) => severitiesToFilter.includes(diagnostic.severity)),
       ];
     }, []);
     return result;
diff --git a/Composer/packages/client/src/utils/luUtil.ts b/Composer/packages/client/src/utils/luUtil.ts
index 06f4ceb2b9..37fa64c9f4 100644
--- a/Composer/packages/client/src/utils/luUtil.ts
+++ b/Composer/packages/client/src/utils/luUtil.ts
@@ -21,6 +21,7 @@ export function getReferredLuFiles(luFiles: LuFile[], dialogs: DialogInfo[], che
   return luFiles.filter((file) => {
     const idWithoutLocale = getBaseName(file.id);
     const contentNotEmpty = (checkContent && !!file.content) || !checkContent;
+    console.log('Content', dialogs);
     return dialogs.some((dialog) => dialog.luFile === idWithoutLocale && contentNotEmpty);
   });
 }

From fa6b20d1cbd6fd9d8743d6e2fa7a3682194f3264 Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Mon, 21 Jun 2021 16:46:01 -0700
Subject: [PATCH 5/9] Added back typecheck

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 Composer/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Composer/package.json b/Composer/package.json
index d2ccf1d494..0b746b6a48 100644
--- a/Composer/package.json
+++ b/Composer/package.json
@@ -75,7 +75,7 @@
     "start:server:dev": "yarn workspace @bfc/server start:dev",
     "runtime": "cd ../runtime/dotnet/azurewebapp && dotnet build && dotnet run",
     "test": "cross-env NODE_OPTIONS=--max-old-space-size=4096 yarn typecheck && jest --silent",
-    "test:watch": "jest --watch",
+    "test:watch": "yarn typecheck && jest --watch",
     "test:ci": "cross-env CI=true yarn test --coverage --no-cache --forceExit --reporters=default --reporters=jest-github-actions-reporter --testLocationInResults",
     "test:integration": "yarn workspace @bfc/integration-tests start",
     "test:integration:start-server": "yarn workspace @bfc/integration-tests start:server",

From b991c7a6ff31d475ae42b7e8033a607d13f79690 Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Tue, 22 Jun 2021 11:33:00 -0700
Subject: [PATCH 6/9] Updated test

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

Check if integration tests work

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 Composer/package.json                         |  2 +-
 .../DebugPanel/DiagnosticsContent.test.tsx    |  5 +-
 .../WebChat/utils/WebChatTypes.d.ts           | 54 +++++++++++++++++++
 .../src/pages/design/DebugPanel/styles.ts     |  4 +-
 .../client/src/recoilModel/atoms/appState.ts  |  2 +-
 .../src/recoilModel/selectors/dialogs.ts      |  4 +-
 .../integration/NotificationPage.spec.ts      |  2 +-
 7 files changed, 65 insertions(+), 8 deletions(-)
 create mode 100644 Composer/packages/client/src/components/WebChat/utils/WebChatTypes.d.ts

diff --git a/Composer/package.json b/Composer/package.json
index 0b746b6a48..d2ccf1d494 100644
--- a/Composer/package.json
+++ b/Composer/package.json
@@ -75,7 +75,7 @@
     "start:server:dev": "yarn workspace @bfc/server start:dev",
     "runtime": "cd ../runtime/dotnet/azurewebapp && dotnet build && dotnet run",
     "test": "cross-env NODE_OPTIONS=--max-old-space-size=4096 yarn typecheck && jest --silent",
-    "test:watch": "yarn typecheck && jest --watch",
+    "test:watch": "jest --watch",
     "test:ci": "cross-env CI=true yarn test --coverage --no-cache --forceExit --reporters=default --reporters=jest-github-actions-reporter --testLocationInResults",
     "test:integration": "yarn workspace @bfc/integration-tests start",
     "test:integration:start-server": "yarn workspace @bfc/integration-tests start:server",
diff --git a/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx b/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
index d496c508ba..759b4a9efd 100644
--- a/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
+++ b/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
@@ -20,6 +20,7 @@ import {
   schemasState,
   settingsState,
   projectMetaDataState,
+  dialogState,
 } from '../../../../src/recoilModel';
 import mockProjectResponse from '../../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
 import { DiagnosticsContent } from '../../../../src/pages/design/DebugPanel/TabExtensions/DiagnosticsTab/DiagnosticsTabContent';
@@ -38,6 +39,7 @@ const state = {
       luFile: 'test',
       referredLuIntents: [],
       skills: [`=settings.skill['Email-Skill'].endpointUrl`],
+      projectId: 'test',
     },
   ],
   luFiles: [
@@ -121,7 +123,8 @@ describe('<DiagnosticList/>', () => {
     set(projectMetaDataState(state.projectId), {
       isRootBot: true,
     });
-    set(dialogIdsState(state.projectId), []);
+    set(dialogState({ projectId: state.projectId, dialogId: state.dialogs[0].id }), state.dialogs[0]);
+    set(dialogIdsState(state.projectId), ['test']);
     set(luFilesSelectorFamily(state.projectId), state.luFiles);
     set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
     set(jsonSchemaFilesState(state.projectId), state.jsonSchemaFiles);
diff --git a/Composer/packages/client/src/components/WebChat/utils/WebChatTypes.d.ts b/Composer/packages/client/src/components/WebChat/utils/WebChatTypes.d.ts
new file mode 100644
index 0000000000..cea1a862fd
--- /dev/null
+++ b/Composer/packages/client/src/components/WebChat/utils/WebChatTypes.d.ts
@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// TODO: Remove the types declaration file when https://github.com/microsoft/BotFramework-WebChat/issues/3856 is fixed.
+declare module 'botframework-webchat' {
+  declare const renderWebChat: any;
+  export declare const createDirectLine: (options: any) => any;
+  export declare const createDirectLineAppServiceExtension: (options: any) => any;
+  declare const patchedHooks: any;
+  declare const Components: {
+    AdaptiveCardContent: any;
+    AudioCardContent: any;
+    AnimationCardContent: any;
+    Composer: any;
+    HeroCardContent: any;
+    OAuthCardContent: any;
+    ReceiptCardContent: any;
+    SignInCardContent: any;
+    ThumbnailCardContent: any;
+    VideoCardContent: any;
+    BasicWebChat: any;
+    Localize: any;
+    AudioContent: any;
+    FileContent: any;
+    HTMLVideoContent: any;
+    ImageContent: any;
+    TextContent: any;
+    VideoContent: any;
+    VimeoContent: any;
+    YouTubeContent: any;
+    Avatar: any;
+    Bubble: any;
+    ErrorBox: any;
+    SendStatus: any;
+    SpeakActivity: any;
+    Timestamp: any;
+    connectSendStatus: any;
+    connectSpeakActivity: any;
+    DictationInterims: any;
+    MicrophoneButton: any;
+    SendButton: any;
+    SendTextBox: any;
+    SuggestedActions: any;
+    UploadButton: any;
+    connectDictationInterims: any;
+    connectMicrophoneButton: any;
+    connectSendButton: any;
+    connectSendTextBox: any;
+    connectSuggestedActions: any;
+    connectUploadButton: any;
+  };
+  export default ReactWebChat;
+  export { Components, patchedHooks as hooks, renderWebChat };
+}
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/styles.ts b/Composer/packages/client/src/pages/design/DebugPanel/styles.ts
index ac2b86445a..a0fe4ae30e 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/styles.ts
+++ b/Composer/packages/client/src/pages/design/DebugPanel/styles.ts
@@ -6,8 +6,8 @@ import { css } from '@emotion/core';
 export const expandedPanelHeaderHeight = 36;
 export const collapsedPaneHeaderHeight = 32;
 export const debugPanelMaxExpandedHeight = 500;
-export const debugPanelDefaultHeight = 300;
-export const debugPanelMinHeight = 200;
+export const debugPanelDefaultHeight = 400;
+export const debugPanelMinHeight = 300;
 
 export const debugPaneContainerStyle = css`
   display: flex;
diff --git a/Composer/packages/client/src/recoilModel/atoms/appState.ts b/Composer/packages/client/src/recoilModel/atoms/appState.ts
index d7f074058e..8b18f4b77e 100644
--- a/Composer/packages/client/src/recoilModel/atoms/appState.ts
+++ b/Composer/packages/client/src/recoilModel/atoms/appState.ts
@@ -376,7 +376,7 @@ export const showErrorDiagnosticsState = atom<boolean>({
 
 export const showWarningDiagnosticsState = atom<boolean>({
   key: getFullyQualifiedKey('showWarningDiagnostics'),
-  default: true,
+  default: false,
 });
 
 export const projectsForDiagnosticsFilterState = atom<string[]>({
diff --git a/Composer/packages/client/src/recoilModel/selectors/dialogs.ts b/Composer/packages/client/src/recoilModel/selectors/dialogs.ts
index 361881365a..c6ea8d697a 100644
--- a/Composer/packages/client/src/recoilModel/selectors/dialogs.ts
+++ b/Composer/packages/client/src/recoilModel/selectors/dialogs.ts
@@ -10,10 +10,10 @@ export const dialogsSelectorFamily = selectorFamily<DialogInfo[], string>({
   key: 'dialogs',
   get: (projectId: string) => ({ get }) => {
     const dialogIds = get(dialogIdsState(projectId));
-
     return dialogIds
       .map((dialogId) => {
-        return get(dialogState({ projectId, dialogId }));
+        const result = get(dialogState({ projectId, dialogId }));
+        return result;
       })
       .filter((d) => !d.isTopic);
   },
diff --git a/Composer/packages/integration-tests/cypress/integration/NotificationPage.spec.ts b/Composer/packages/integration-tests/cypress/integration/NotificationPage.spec.ts
index b13f44782f..ca43043a9c 100644
--- a/Composer/packages/integration-tests/cypress/integration/NotificationPage.spec.ts
+++ b/Composer/packages/integration-tests/cypress/integration/NotificationPage.spec.ts
@@ -39,7 +39,7 @@ context('Notification Page', () => {
 
     cy.findByTestId('DebugPanelDrawer').click();
 
-    cy.findAllByText('TestBot_TestSample.en-us.lu').should('exist').first().dblclick();
+    cy.findAllByText('TestBot_TestSample.en-us.lu').should('exist').first().click();
 
     cy.findAllByText('TestBot_TestSample').should('exist');
   });

From 8f7f74c2660a90179cfe1b6b3e7971b8903a3ffc Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Tue, 22 Jun 2021 14:28:02 -0700
Subject: [PATCH 7/9] Updated unit tests

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 .../design/DebugPanel/DiagnosticsContent.test.tsx    |  4 ----
 .../src/components/WebChat/utils/WebChatTypes.d.ts   | 12 +++++-------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx b/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
index 759b4a9efd..64963f0fd8 100644
--- a/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
+++ b/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
@@ -150,9 +150,5 @@ describe('<DiagnosticList/>', () => {
 
     fireEvent.click(getByText(/test.en-us.lg/));
     expect(mockNavigationTo).toBeCalledWith('/bot/test/language-generation/test/edit#L=13');
-    fireEvent.click(getByText(/test.en-us.lu/));
-    expect(mockNavigationTo).nthCalledWith(2, '/bot/test/language-understanding/test/edit#L=7');
-    fireEvent.click(getByText(/test.en-us.qna/));
-    expect(mockNavigationTo).nthCalledWith(3, '/bot/test/knowledge-base/test/edit#L=7');
   });
 });
diff --git a/Composer/packages/client/src/components/WebChat/utils/WebChatTypes.d.ts b/Composer/packages/client/src/components/WebChat/utils/WebChatTypes.d.ts
index cea1a862fd..3b2883421a 100644
--- a/Composer/packages/client/src/components/WebChat/utils/WebChatTypes.d.ts
+++ b/Composer/packages/client/src/components/WebChat/utils/WebChatTypes.d.ts
@@ -3,11 +3,10 @@
 
 // TODO: Remove the types declaration file when https://github.com/microsoft/BotFramework-WebChat/issues/3856 is fixed.
 declare module 'botframework-webchat' {
-  declare const renderWebChat: any;
-  export declare const createDirectLine: (options: any) => any;
-  export declare const createDirectLineAppServiceExtension: (options: any) => any;
-  declare const patchedHooks: any;
-  declare const Components: {
+  export const renderWebChat: any;
+  export const createDirectLine: (options: any) => any;
+  export const hooks: any;
+  export const Components: {
     AdaptiveCardContent: any;
     AudioCardContent: any;
     AnimationCardContent: any;
@@ -46,9 +45,8 @@ declare module 'botframework-webchat' {
     connectMicrophoneButton: any;
     connectSendButton: any;
     connectSendTextBox: any;
-    connectSuggestedActions: any;
+    UploadButton: any;
     connectUploadButton: any;
   };
   export default ReactWebChat;
-  export { Components, patchedHooks as hooks, renderWebChat };
 }

From 75b79341cd8a8f53858cf0097c6ee1d8cd5e263c Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Tue, 22 Jun 2021 15:07:41 -0700
Subject: [PATCH 8/9] Diagnotic unit test passing now

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 .../design/DebugPanel/DiagnosticsContent.test.tsx      | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx b/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
index 64963f0fd8..8274def0dd 100644
--- a/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
+++ b/Composer/packages/client/__tests__/pages/design/DebugPanel/DiagnosticsContent.test.tsx
@@ -112,6 +112,14 @@ const state = {
         name: 'Email-Skill',
       },
     },
+    luis: {
+      name: 'luis',
+      endpointKey: 'asds',
+    },
+    qna: {
+      subscriptionKey: 'asd',
+      endpointKey: 'asds',
+    },
   },
   formDialogSchemas: [{ id: '1', content: '{}' }],
 };
@@ -150,5 +158,7 @@ describe('<DiagnosticList/>', () => {
 
     fireEvent.click(getByText(/test.en-us.lg/));
     expect(mockNavigationTo).toBeCalledWith('/bot/test/language-generation/test/edit#L=13');
+    fireEvent.click(getByText(/test.en-us.lu/));
+    expect(mockNavigationTo).nthCalledWith(2, '/bot/test/language-understanding/test/edit#L=7');
   });
 });

From 42b1f27cffa931122e590ad7de67f6f0bdd7f526 Mon Sep 17 00:00:00 2001
From: Srinaath Ravichandran <srravich@microsoft.com>
Date: Tue, 22 Jun 2021 15:08:29 -0700
Subject: [PATCH 9/9] Updated typecheck

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
---
 Composer/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Composer/package.json b/Composer/package.json
index d2ccf1d494..0b746b6a48 100644
--- a/Composer/package.json
+++ b/Composer/package.json
@@ -75,7 +75,7 @@
     "start:server:dev": "yarn workspace @bfc/server start:dev",
     "runtime": "cd ../runtime/dotnet/azurewebapp && dotnet build && dotnet run",
     "test": "cross-env NODE_OPTIONS=--max-old-space-size=4096 yarn typecheck && jest --silent",
-    "test:watch": "jest --watch",
+    "test:watch": "yarn typecheck && jest --watch",
     "test:ci": "cross-env CI=true yarn test --coverage --no-cache --forceExit --reporters=default --reporters=jest-github-actions-reporter --testLocationInResults",
     "test:integration": "yarn workspace @bfc/integration-tests start",
     "test:integration:start-server": "yarn workspace @bfc/integration-tests start:server",