feat: Move Webchat Panel inside the Page section to prevent overlap over Debug Pane

Composer/cypress/integration/NotificationPage.spec.ts

@@ -19,11 +19,9 @@ context('Notification Page', () => {
     cy.findByTestId('showcode').click();
     cy.get('textarea').type('#', { delay: 200 });
 
-    cy.findByTestId('LeftNav-CommandBarButtonDiagnostics').click();
+    cy.findByTestId('DebugPanelDrawer').click();
 
-    cy.findByTestId('diagnostics-table-view').within(() => {
-      cy.findAllByText('TestBot_TestSample.en-us.lg').should('exist').first().click();
-    });
+    cy.findAllByText('TestBot_TestSample.en-us.lg').should('exist').first().click();
 
     cy.findAllByText('Bot responses').should('exist');
   });
@@ -39,11 +37,9 @@ context('Notification Page', () => {
     cy.findByTestId('showcode').click();
     cy.get('textarea').type('t*', { delay: 200 });
 
-    cy.findByTestId('LeftNav-CommandBarButtonDiagnostics').click();
+    cy.findByTestId('DebugPanelDrawer').click();
 
-    cy.findByTestId('diagnostics-table-view').within(() => {
-      cy.findAllByText('TestBot_TestSample.en-us.lu').should('exist').first().dblclick();
-    });
+    cy.findAllByText('TestBot_TestSample.en-us.lu').should('exist').first().dblclick();
 
     cy.findAllByText('TestBot_TestSample').should('exist');
   });

Composer/packages/client/src/components/Header.tsx

@@ -12,11 +12,9 @@ import { useCallback, useState, Fragment, useMemo, useEffect } from 'react';
 import { NeutralColors, SharedColors, FontSizes, CommunicationColors } from '@uifabric/fluent-theme';
 import { useRecoilValue } from 'recoil';
 import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
-import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
 import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
 
 import { useLocation } from '../utils/hooks';
-import { BASEPATH } from '../constants';
 import {
   dispatcherState,
   appUpdateState,
@@ -35,11 +33,10 @@ import { AppUpdaterStatus } from '../constants';
 import TelemetryClient from '../telemetry/TelemetryClient';
 import { useBotControllerBar } from '../hooks/useControllerBar';
 
-import { WebChatPanel } from './WebChat/WebChatPanel';
 import { languageListTemplates, languageFullName } from './MultiLanguage';
 import { NotificationButton } from './Notifications/NotificationButton';
-import { GetStarted } from './GetStarted/GetStarted';
 import { BotController } from './BotRuntimeController/BotController';
+import { GetStarted } from './GetStarted/GetStarted';
 export const actionButton = css`
   font-size: ${FontSizes.size18};
   margin-top: 2px;
@@ -158,6 +155,7 @@ export const Header = () => {
   const locale = useRecoilValue(localeState(projectId));
   const appUpdate = useRecoilValue(appUpdateState);
   const [teachingBubbleVisibility, setTeachingBubbleVisibility] = useState<boolean>();
+
   const [showGetStartedTeachingBubble, setShowGetStartedTeachingBubble] = useState<boolean>(false);
   const settings = useRecoilValue(settingsState(projectId));
   const isWebChatPanelVisible = useRecoilValue(isWebChatPanelVisibleState);
@@ -383,43 +381,6 @@ export const Header = () => {
         </Callout>
       )}
 
-      <Panel
-        isHiddenOnDismiss
-        closeButtonAriaLabel={formatMessage('Close')}
-        customWidth="395px"
-        headerText={projectName}
-        isBlocking={false}
-        isOpen={isWebChatPanelVisible}
-        styles={{
-          root: {
-            marginTop: '50px',
-          },
-          scrollableContent: {
-            width: '100%',
-            height: '100%',
-          },
-          content: {
-            width: '100%',
-            height: '100%',
-            padding: 0,
-            margin: 0,
-          },
-        }}
-        type={PanelType.custom}
-        onDismiss={() => {
-          setWebChatPanelVisibility(false);
-          TelemetryClient.track('WebChatPaneClosed');
-        }}
-      >
-        {webchatEssentials?.projectId ? (
-          <WebChatPanel
-            botData={{ ...webchatEssentials }}
-            directlineHostUrl={BASEPATH}
-            isWebChatPanelVisible={isWebChatPanelVisible}
-          />
-        ) : null}
-      </Panel>
-
       <GetStarted
         isOpen={botProjectSolutionLoaded && showGetStarted}
         projectId={rootBotProjectId}

Composer/packages/client/src/components/NavTree.tsx

@@ -20,7 +20,7 @@ const root = css`
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  overflow-y: auto;
+  overflow-y: hidden;
   overflow-x: hidden;
   .ms-List-cell {
     min-height: 36px;

Composer/packages/client/src/components/Page.tsx

@@ -12,13 +12,12 @@ import formatMessage from 'format-message';
 
 import { navigateTo, buildURL } from '../utils/navigation';
 import { dispatcherState, PageMode } from '../recoilModel';
-import { DebugPanel } from '../pages/design/DebugPanel/DebugPanel';
 import implementedDebugExtensions from '../pages/design/DebugPanel/TabExtensions';
+import { splitPaneContainer, splitPaneWrapper } from '../pages/design/styles';
 
 import { NavTree, INavTreeItem } from './NavTree';
 import { ProjectTree } from './ProjectTree/ProjectTree';
 import { renderThinSplitter } from './Split/ThinSplitter';
-
 // -------------------- Styles -------------------- //
 
 export const root = css`
@@ -29,6 +28,15 @@ export const root = css`
   label: Page;
 `;
 
+export const contentWrapper = css`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  position: relative;
+  label: PageContent;
+`;
+
 export const pageWrapper = css`
   display: flex;
   flex-direction: column;
@@ -51,7 +59,6 @@ export const header = css`
 export const headerTitle = css`
   font-size: ${FontSizes.xLarge};
   font-weight: ${FontWeights.semibold};
-
   label: PageHeaderTitle;
 `;
 
@@ -70,6 +77,7 @@ export const main = (hasRenderHeaderContent) => css`
   flex-grow: 1;
   border-top: 1px solid #dddddd;
   position: relative;
+  overflow: auto;
   nav {
     ul {
       margin-top: 0px;
@@ -136,7 +144,6 @@ const Page: React.FC<IPageProps> = (props) => {
     contentStyle = defaultContentStyle,
     shouldShowEditorError = false,
     useNewTree,
-    useDebugPane,
     pageMode,
     showCommonLinks = false,
     projectId,
@@ -168,64 +175,60 @@ const Page: React.FC<IPageProps> = (props) => {
   const displayedToolbarItems = toolbarItems.concat(debugItems);
 
   return (
-    <div css={root} data-testid={props['data-testid']}>
-      <div css={pageWrapper}>
-        <Toolbar toolbarItems={displayedToolbarItems} />
-        <div css={headerStyle}>
-          <h1 css={headerTitle}>{title}</h1>
-          {onRenderHeaderContent && <div css={headerContent}>{onRenderHeaderContent()}</div>}
-        </div>
-        <div css={main(!!onRenderHeaderContent)} role="main">
-          <Split
-            resetOnDoubleClick
-            initialPrimarySize="20%"
-            minPrimarySize="200px"
-            minSecondarySize="800px"
-            renderSplitter={renderThinSplitter}
-            onMeasuredSizesChanged={onMeasuredSizesChanged}
-          >
-            {useNewTree ? (
-              <ProjectTree
-                headerAriaLabel={formatMessage('Filter by file name')}
-                headerPlaceholder={formatMessage('Filter by file name')}
-                options={{
-                  showDelete: false,
-                  showTriggers: false,
-                  showDialogs: true,
-                  showLgImports: pageMode === 'language-generation',
-                  showLuImports: pageMode === 'language-understanding',
-                  showRemote: false,
-                  showMenu: false,
-                  showQnAMenu: pageMode === 'knowledge-base',
-                  showErrors: false,
-                  showCommonLinks,
-                }}
-                selectedLink={{
-                  projectId,
-                  skillId,
-                  dialogId,
-                  lgFileId: pageMode === 'language-generation' && fileId ? fileId : undefined,
-                  luFileId: pageMode === 'language-understanding' && fileId ? fileId : undefined,
-                }}
-                onSelect={(link) => {
-                  navigateTo(buildURL(pageMode, link));
-                }}
-              />
-            ) : (
-              <NavTree navLinks={navLinks as INavTreeItem[]} regionName={navRegionName} />
-            )}
-            <div
-              aria-label={mainRegionName}
-              css={content(shouldShowEditorError)}
-              data-testid="PageContent"
-              role="region"
-            >
-              <div css={contentStyle}>{children}</div>
+    <div css={contentWrapper} data-testid={props['data-testid']} role="main">
+      <Toolbar toolbarItems={displayedToolbarItems} />
+      <div css={headerStyle}>
+        <h1 css={headerTitle}>{title}</h1>
+        {onRenderHeaderContent && <div css={headerContent}>{onRenderHeaderContent()}</div>}
+      </div>
+      <Split
+        resetOnDoubleClick
+        initialPrimarySize="20%"
+        minPrimarySize="200px"
+        minSecondarySize="800px"
+        renderSplitter={renderThinSplitter}
+        onMeasuredSizesChanged={onMeasuredSizesChanged}
+      >
+        <div css={contentWrapper}>
+          <div css={splitPaneContainer}>
+            <div css={splitPaneWrapper}>
+              {useNewTree ? (
+                <ProjectTree
+                  headerAriaLabel={formatMessage('Filter by file name')}
+                  headerPlaceholder={formatMessage('Filter by file name')}
+                  options={{
+                    showDelete: false,
+                    showTriggers: false,
+                    showDialogs: true,
+                    showLgImports: pageMode === 'language-generation',
+                    showLuImports: pageMode === 'language-understanding',
+                    showRemote: false,
+                    showMenu: false,
+                    showQnAMenu: pageMode === 'knowledge-base',
+                    showErrors: false,
+                    showCommonLinks,
+                  }}
+                  selectedLink={{
+                    projectId,
+                    skillId,
+                    dialogId,
+                    lgFileId: pageMode === 'language-generation' && fileId ? fileId : undefined,
+                    luFileId: pageMode === 'language-understanding' && fileId ? fileId : undefined,
+                  }}
+                  onSelect={(link) => {
+                    navigateTo(buildURL(pageMode, link));
+                  }}
+                />
+              ) : (
+                <NavTree navLinks={navLinks as INavTreeItem[]} regionName={navRegionName} />
+              )}
             </div>
-          </Split>
+          </div>
         </div>
-        {useDebugPane ? <DebugPanel /> : null}
-      </div>
+        <div aria-label={mainRegionName} css={content(shouldShowEditorError)} data-testid="PageContent" role="region">
+          <div css={contentStyle}>{children}</div>
+        </div>
+      </Split>
     </div>
   );
 };