Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

feat: Move Debug Panel outside the main content container #6870

Merged
srinaath merged 20 commits into from
Apr 12, 2021
Merged

feat: Move Debug Panel outside the main content container #6870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
c623832
Runtime log data websocket
Apr 8, 2021
ae4f14b
Merge branch 'main' of https://github.com/microsoft/BotFramework-Comp…
Apr 8, 2021
a20456c
All tests passing
Apr 8, 2021
a3f3f55
Conditional inputs removal
Apr 8, 2021
b77496f
Remove unused classes
Apr 8, 2021
02158fd
Merge branch 'main' into feature/websocket-runtime
srinaath Apr 8, 2021
8cdafab
Layout updates
Apr 9, 2021
aa73a4a
Merge branch 'main' of https://github.com/microsoft/BotFramework-Comp…
Apr 9, 2021
7c11156
Style updates
Apr 9, 2021
b3503f2
Merge branch 'main' of https://github.com/microsoft/BotFramework-Comp…
Apr 9, 2021
064bb92
Moved variables around
Apr 9, 2021
9fe9c9b
Merge branch 'main' of https://github.com/microsoft/BotFramework-Comp…
Apr 9, 2021
db75d87
Merge branch 'main' of https://github.com/microsoft/BotFramework-Comp…
Apr 12, 2021
81b889c
Deelte unused file
Apr 12, 2021
0c6c8f8
Merge branch 'main' into feature/layout-debugpanel
srinaath Apr 12, 2021
e83a3ff
static data-test-id
Apr 12, 2021
04a0d0e
Merge branch 'feature/layout-debugpanel' of https://github.com/micros…
Apr 12, 2021
1d37e24
Add todo here
Apr 12, 2021
b52f719
Codnitional title rendering
Apr 12, 2021
d07c825
Merge branch 'main' into feature/layout-debugpanel
srinaath Apr 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions Composer/packages/client/src/components/Page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,10 @@ export const headerContent = css`
label: PageHeaderContent;
`;

// TODO: https://github.com/microsoft/BotFramework-Composer/issues/6873. Investigate static numbers
export const main = (hasRenderHeaderContent) => css`
margin-left: 2px;
height: ${hasRenderHeaderContent ? 'calc(100vh - 181px)' : 'calc(100vh - 165px)'};
max-height: ${hasRenderHeaderContent ? 'calc(100vh - 181px)' : 'calc(100vh - 165px)'};
display: flex;
flex-grow: 1;
border-top: 1px solid #dddddd;
Expand Down Expand Up @@ -220,10 +221,10 @@ const Page: React.FC<IPageProps> = (props) => {
role="region"
>
<div css={contentStyle}>{children}</div>
{useDebugPane ? <DebugPanel /> : null}
</div>
</Split>
</div>
{useDebugPane ? <DebugPanel /> : null}
</div>
</div>
);
Expand Down
121 changes: 64 additions & 57 deletions Composer/packages/client/src/pages/design/DebugPanel/DebugPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ import {
debugPaneHeaderStyle,
debugPaneContentStyle,
debugPaneFooterStyle,
expandedPanelHeaderHeight,
collapsedPaneHeaderHeight,
debugPanelDefaultHeight,
debugPanelMaxExpandedHeight,
debugPanelMinHeight,
} from './styles';
import debugExtensions from './TabExtensions';
import { DebugDrawerKeys, DebugPanelTabHeaderProps } from './TabExtensions/types';
Expand Down Expand Up @@ -67,7 +72,7 @@ export const DebugPanel: React.FC = () => {
return { key: tabKey, element };
};

const computedPivotHeight = isPanelExpanded ? 36 : 24;
const computedPivotHeight = isPanelExpanded ? expandedPanelHeaderHeight : collapsedPaneHeaderHeight;

const headerPivot = useMemo(() => {
const tabTitles = debugExtensions
Expand Down Expand Up @@ -124,67 +129,69 @@ export const DebugPanel: React.FC = () => {
}, [isPanelExpanded, activeTab]);

return (
<Resizable
css={css`
${debugPaneContainerStyle}
`}
data-testid="debug-panel"
defaultSize={{
width: '100%',
height: isPanelExpanded ? 300 : computedPivotHeight,
}}
enable={{
top: isPanelExpanded,
right: false,
bottom: false,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false,
}}
maxHeight={isPanelExpanded ? 600 : computedPivotHeight}
minHeight={isPanelExpanded ? 200 : computedPivotHeight}
>
<div
<div>
<Resizable
css={css`
${debugPaneBarStyle}
${isPanelExpanded ? debugPaneHeaderStyle : debugPaneFooterStyle}
${debugPaneContainerStyle}
`}
data-testid={isPanelExpanded ? 'debug-panel__header' : 'debug-panel__footer'}
data-testid="debug-panel"
defaultSize={{
width: '100%',
height: isPanelExpanded ? debugPanelDefaultHeight : computedPivotHeight,
}}
enable={{
top: isPanelExpanded,
right: false,
bottom: false,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false,
}}
maxHeight={isPanelExpanded ? debugPanelMaxExpandedHeight : computedPivotHeight}
minHeight={isPanelExpanded ? debugPanelMinHeight : computedPivotHeight}
>
<div css={leftBarStyle} data-testid="header__left">
{headerPivot}
</div>
<div
css={{ flexGrow: 1, cursor: 'pointer', outline: 'none' }}
data-testid="header__blank"
role="button"
tabIndex={0}
onClick={onDebugPaneClick}
onKeyPress={onDebugPaneClick}
></div>
<div css={rightBarStyle} data-testid="header__right">
<IconButton
iconProps={{ iconName: isPanelExpanded ? 'ChevronDown' : 'ChevronUp' }}
styles={{ root: { height: '100%' } }}
title={formatMessage('Collapse debug panel')}
onClick={() => {
if (isPanelExpanded) {
onCollapsePanel();
} else {
onExpandPanel('Diagnostics');
}
}}
css={css`
${debugPaneBarStyle}
${isPanelExpanded ? debugPaneHeaderStyle : debugPaneFooterStyle}
`}
data-testid={isPanelExpanded ? 'debug-panel__header' : 'debug-panel__footer'}
>
<div css={leftBarStyle} data-testid="header__left">
{headerPivot}
</div>
<div
css={{ flexGrow: 1, cursor: 'pointer', outline: 'none' }}
data-testid="header__blank"
role="button"
tabIndex={0}
onClick={onDebugPaneClick}
onKeyPress={onDebugPaneClick}
/>
<div css={rightBarStyle} data-testid="header__right">
<IconButton
iconProps={{ iconName: isPanelExpanded ? 'ChevronDown' : 'ChevronUp' }}
styles={{ root: { height: '100%' } }}
title={isPanelExpanded ? formatMessage('Collapse Debug Panel') : formatMessage('Expand Debug Panel')}
onClick={() => {
if (isPanelExpanded) {
onCollapsePanel();
} else {
onExpandPanel('Diagnostics');
}
}}
/>
</div>
</div>
<div css={debugPaneContentStyle} data-testid="debug-panel__content">
{debugExtensions.map((debugTabs) => {
const { ContentWidget } = debugTabs;
return <ContentWidget key={`tabContent-${debugTabs.key}`} isActive={activeTab === debugTabs.key} />;
})}
</div>
</div>
<div css={debugPaneContentStyle} data-testid="debug-panel__content">
{debugExtensions.map((debugTabs) => {
const { ContentWidget } = debugTabs;
return <ContentWidget key={`tabContent-${debugTabs.key}`} isActive={activeTab === debugTabs.key} />;
})}
</div>
</Resizable>
</Resizable>
</div>
);
};
17 changes: 10 additions & 7 deletions Composer/packages/client/src/pages/design/DebugPanel/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@

import { css } from '@emotion/core';

export const DebugPaneHeaderHeight = 36;

export const DebugPaneFooterHeight = 24;
export const expandedPanelHeaderHeight = 36;
export const collapsedPaneHeaderHeight = 32;
export const debugPanelMaxExpandedHeight = 500;
export const debugPanelDefaultHeight = 300;
export const debugPanelMinHeight = 200;

export const debugPaneContainerStyle = css`
display: flex;
Expand All @@ -14,18 +16,17 @@ export const debugPaneContainerStyle = css`
`;

export const debugPaneHeaderStyle = css`
height: ${DebugPaneHeaderHeight}px;
border-top: 1px solid #dfdfdf;
`;

export const debugPaneContentStyle = css`
height: calc(100% - ${DebugPaneHeaderHeight}px);
height: calc(100% - ${expandedPanelHeaderHeight}px);
overflow-y: hidden;
overflow-x: auto;
`;

export const debugPaneFooterStyle = css`
height: ${DebugPaneFooterHeight}px;
height: ${collapsedPaneHeaderHeight}px;
border-top: 1px solid #dfdfdf;
`;

Expand All @@ -35,7 +36,9 @@ export const debugPaneBarStyle = css`
background: #faf9f8;
`;

export const leftBarStyle = css``;
export const leftBarStyle = css`
padding: 0 16px;
`;

export const rightBarStyle = css`
display: flex;
Expand Down
84 changes: 51 additions & 33 deletions Composer/packages/client/src/pages/design/DesignPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// Licensed under the MIT License.

/** @jsx jsx */
import { jsx } from '@emotion/core';
import { css, jsx } from '@emotion/core';
import { RouteComponentProps } from '@reach/router';
import { useRecoilValue } from 'recoil';
import { Split, SplitMeasuredSizes } from '@geoffcox/react-splitter';
Expand All @@ -16,10 +16,26 @@ import CommandBar from './CommandBar';
import VisualPanel from './VisualPanel';
import PropertyPanel from './PropertyPanel';
import useEmptyPropsHandler from './useEmptyPropsHandler';
import { contentWrapper, editorContainer, editorWrapper, pageRoot } from './styles';
import { contentWrapper, editorContainer, editorWrapper } from './styles';
import Modals from './Modals';
import { DebugPanel } from './DebugPanel/DebugPanel';

export const root = css`
height: calc(100vh - 50px);
display: flex;
flex-direction: row;

label: Page;
`;

export const pageWrapper = css`
display: flex;
flex-direction: column;
flex-grow: 1;

label: PageWrapper;
`;

const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: string; skillId?: string }>> = (
props
) => {
Expand All @@ -35,37 +51,39 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
const activeBot = skillId ?? projectId;

return (
<div css={pageRoot}>
<Split
resetOnDoubleClick
initialPrimarySize="20%"
minPrimarySize="200px"
minSecondarySize="800px"
renderSplitter={renderThinSplitter}
splitterSize="5px"
onMeasuredSizesChanged={onMeasuredSizesChanged}
>
<SideBar projectId={activeBot} />
<div css={contentWrapper} role="main">
<CommandBar projectId={activeBot} />
<Conversation css={editorContainer}>
<div css={editorWrapper}>
<Split
resetOnDoubleClick
initialPrimarySize="65%"
minPrimarySize="500px"
minSecondarySize="350px"
renderSplitter={renderThinSplitter}
>
<VisualPanel projectId={activeBot} />
<PropertyPanel isSkill={activeBot !== projectId} projectId={activeBot} />
</Split>
</div>
</Conversation>
<DebugPanel />
</div>
</Split>
<Modals projectId={activeBot} />
<div css={root} data-testid="DesignPage">
<div css={pageWrapper}>
<Split
resetOnDoubleClick
initialPrimarySize="20%"
minPrimarySize="200px"
minSecondarySize="800px"
renderSplitter={renderThinSplitter}
splitterSize="5px"
onMeasuredSizesChanged={onMeasuredSizesChanged}
>
<SideBar projectId={activeBot} />
<div css={contentWrapper} role="main">
<CommandBar projectId={activeBot} />
<Conversation css={editorContainer}>
<div css={editorWrapper}>
<Split
resetOnDoubleClick
initialPrimarySize="65%"
minPrimarySize="500px"
minSecondarySize="350px"
renderSplitter={renderThinSplitter}
>
<VisualPanel projectId={activeBot} />
<PropertyPanel isSkill={activeBot !== projectId} projectId={activeBot} />
</Split>
</div>
</Conversation>
</div>
</Split>
<Modals projectId={activeBot} />
<DebugPanel />
</div>
</div>
);
};
Expand Down