From 5e40fce55212daed06b07eab8919b47bee583b6b Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Wed, 14 Apr 2021 15:40:53 -0700 Subject: [PATCH 01/15] swap out details/summary for ul/li --- .../components/ProjectTree/ExpandableNode.tsx | 33 +++++-------------- .../src/components/ProjectTree/treeItem.tsx | 9 ++--- 2 files changed, 11 insertions(+), 31 deletions(-) diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx index 2fd0b5d1b1..d6adb5974b 100644 --- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx @@ -18,29 +18,27 @@ type Props = { isActive?: boolean; }; -const summaryStyle = (depth: number, isActive: boolean, isOpen: boolean) => css` +const summaryStyle = (isActive: boolean, isOpen: boolean) => css` label: summary; - padding-left: ${depth * INDENT_PER_LEVEL + 12}px; - padding-top: 6px; - display: list-item; :hover { background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20}; } background: ${isActive ? NeutralColors.gray30 : NeutralColors.white}; + ${isOpen ? '' : 'li { display: none };'} ${isOpen - ? `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;' d='M 0 8 H 16 L 8 16 L 0 8'/%3E%3C/svg%3E");` - : `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black;' d='M 8 0 V 16 L 16 8 L 8 0'/%3E%3C/svg%3E");`} + ? `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black%3B' d='M 0 8 H 16 L 8 16 L 0 8'/%3E%3C/svg%3E");` + : `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black%3B' d='M 8 0 V 16 L 16 8 L 8 0'/%3E%3C/svg%3E");`} `; const nodeStyle = css` margin-top: 2px; + padding-inline-start: ${INDENT_PER_LEVEL}px; `; export const ExpandableNode = ({ children, summary, detailsRef, - depth = 0, onToggle, defaultState = true, isActive = false, @@ -64,25 +62,12 @@ export const ExpandableNode = ({ } return ( -
+
+ ); }; diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx index 8775ce8e38..5b0f920c80 100644 --- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx +++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx @@ -94,8 +94,7 @@ const navContainer = ( menuOpenHere: boolean, textWidth: number, isBroken: boolean, - padLeft: number, - marginLeft: number + padLeft: number ) => css` ${isAnyMenuOpen ? '' @@ -123,8 +122,6 @@ const navContainer = ( height: 24px; font-size: 12px; - padding-left: ${padLeft}px; - margin-left: ${marginLeft}px; min-width: calc(100% - ${padLeft + 24}px); opacity: ${isBroken ? 0.5 : 1}; align-items: center; @@ -560,8 +557,7 @@ export const TreeItem: React.FC = ({ thisItemSelected, textWidth - spacerWidth + extraSpace - overflowIconWidthOnHover, isBroken, - padLeft, - marginLeft + padLeft )} data-testid={dataTestId} role={role} @@ -575,7 +571,6 @@ export const TreeItem: React.FC = ({ } }} > -
Date: Wed, 14 Apr 2021 16:43:00 -0700 Subject: [PATCH 02/15] fix placement of items --- .../components/ProjectTree/ExpandableNode.tsx | 36 +++++++++++++------ .../components/ProjectTree/ProjectHeader.tsx | 2 -- .../components/ProjectTree/ProjectTree.tsx | 24 ++++--------- .../src/components/ProjectTree/constants.ts | 1 - .../src/components/ProjectTree/treeItem.tsx | 31 +++++++--------- 5 files changed, 44 insertions(+), 50 deletions(-) diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx index d6adb5974b..2372eb12ec 100644 --- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx @@ -6,8 +6,6 @@ import { jsx, css } from '@emotion/core'; import { useState, MouseEvent, KeyboardEvent } from 'react'; import { NeutralColors } from '@uifabric/fluent-theme'; -import { INDENT_PER_LEVEL } from './constants'; - type Props = { children: React.ReactNode; summary: React.ReactNode; @@ -18,8 +16,8 @@ type Props = { isActive?: boolean; }; -const summaryStyle = (isActive: boolean, isOpen: boolean) => css` - label: summary; +const listItemStyle = (isActive: boolean, isOpen: boolean) => css` + label: listItem; :hover { background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20}; } @@ -30,9 +28,11 @@ const summaryStyle = (isActive: boolean, isOpen: boolean) => css` : `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black%3B' d='M 8 0 V 16 L 16 8 L 8 0'/%3E%3C/svg%3E");`} `; -const nodeStyle = css` - margin-top: 2px; - padding-inline-start: ${INDENT_PER_LEVEL}px; +const listStyle = css` + label: list; + margin-top: 4px; + padding-inline-start: 20px; + margin-block-end: 0px; `; export const ExpandableNode = ({ @@ -51,8 +51,9 @@ export const ExpandableNode = ({ } function handleClick(ev: MouseEvent) { - if ((ev.target as Element)?.tagName.toLowerCase() === 'summary') { + if ((ev.target as Element)?.tagName.toLowerCase() === 'ul') { setExpandedWithCallback(!isExpanded); + ev.stopPropagation(); } ev.preventDefault(); } @@ -62,12 +63,25 @@ export const ExpandableNode = ({ } return ( -
    +
      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */} -
    • +
    • {summary}
    • -
      {children}
      + {isExpanded &&
      {children}
      }
    ); }; diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectHeader.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectHeader.tsx index 6a17eb65ad..8fa0fb5859 100644 --- a/Composer/packages/client/src/components/ProjectTree/ProjectHeader.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ProjectHeader.tsx @@ -19,8 +19,6 @@ import { TreeItem } from './treeItem'; import { ProjectTreeOptions, TreeLink } from './types'; const headerCSS = (label: string) => css` - margin-top: -6px; - width: 100%; label: ${label}; `; diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx index dfd4b6c439..30198e0ca6 100644 --- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx @@ -60,7 +60,6 @@ const tree = css` `; const headerCSS = (label: string, isActive?: boolean) => css` - margin-top: -6px; width: 100%; label: ${label}; :hover { @@ -306,7 +305,7 @@ export const ProjectTree: React.FC = ({ }; return ( - + = ({ }, dialog: DialogInfo, projectId: string, - dialogLink: TreeLink, - depth: number + dialogLink: TreeLink ): React.ReactNode => { const link: TreeLink = { projectId: rootProjectId, @@ -351,12 +349,11 @@ export const ProjectTree: React.FC = ({ = ({ return scope.toLowerCase().includes(filter.toLowerCase()); }; - const renderTriggerList = ( - triggers: ITrigger[], - dialog: DialogInfo, - projectId: string, - dialogLink: TreeLink, - depth: number - ) => { + const renderTriggerList = (triggers: ITrigger[], dialog: DialogInfo, projectId: string, dialogLink: TreeLink) => { return triggers .filter((tr) => filterMatch(dialog.displayName) || filterMatch(getTriggerName(tr))) .map((tr) => { @@ -408,8 +399,7 @@ export const ProjectTree: React.FC = ({ { ...tr, index, displayName: getTriggerName(tr), warningContent, errorContent }, dialog, projectId, - dialogLink, - depth + dialogLink ); }); }; @@ -466,7 +456,7 @@ export const ProjectTree: React.FC = ({ summary={renderTriggerGroupHeader(groupDisplayName, dialog, projectId)} onToggle={(newState) => setPageElement(key, newState)} > -
    {renderTriggerList(triggers, dialog, projectId, link, 1)}
    +
    {renderTriggerList(triggers, dialog, projectId, link)}
    ); }; @@ -487,7 +477,7 @@ export const ProjectTree: React.FC = ({ const renderDialogTriggers = (dialog: DialogInfo, projectId: string, startDepth: number, dialogLink: TreeLink) => { return dialogIsFormDialog(dialog) ? renderDialogTriggersByProperty(dialog, projectId, startDepth + 1) - : renderTriggerList(dialog.triggers, dialog, projectId, dialogLink, 1); + : renderTriggerList(dialog.triggers, dialog, projectId, dialogLink); }; // flatten lg imports url is same to dialog, to match correct link need render it as dialog diff --git a/Composer/packages/client/src/components/ProjectTree/constants.ts b/Composer/packages/client/src/components/ProjectTree/constants.ts index 307b7eb639..ed45088865 100644 --- a/Composer/packages/client/src/components/ProjectTree/constants.ts +++ b/Composer/packages/client/src/components/ProjectTree/constants.ts @@ -1,7 +1,6 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -export const SUMMARY_ARROW_SPACE = 28; // the rough pixel size of the dropdown arrow to the left of a Details/Summary element export const INDENT_PER_LEVEL = 16; export const ACTION_ICON_WIDTH = 28; export const THREE_DOTS_ICON_WIDTH = 28; diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx index 5b0f920c80..49faf9b873 100644 --- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx +++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx @@ -21,7 +21,7 @@ import { DiagnosticSeverity, Diagnostic } from '@bfc/shared'; import isEmpty from 'lodash/isEmpty'; import uniqueId from 'lodash/uniqueId'; -import { SUMMARY_ARROW_SPACE, THREE_DOTS_ICON_WIDTH } from './constants'; +import { THREE_DOTS_ICON_WIDTH } from './constants'; import { TreeLink, TreeMenuItem } from './types'; // -------------------- Styles -------------------- // @@ -96,12 +96,12 @@ const navContainer = ( isBroken: boolean, padLeft: number ) => css` - ${isAnyMenuOpen - ? '' - : ` + ${ + isAnyMenuOpen + ? '' + : ` &:hover { - background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20}; - + background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20}; .dialog-more-btn { visibility: visible; } @@ -111,7 +111,9 @@ const navContainer = ( .treeItem-text { max-width: ${textWidth}px; } - }`}; + }; + ` + } background: ${isActive ? NeutralColors.gray30 : menuOpenHere ? '#f2f2f2' : 'transparent'}; @@ -120,15 +122,11 @@ const navContainer = ( label: navItem; - height: 24px; font-size: 12px; - min-width: calc(100% - ${padLeft + 24}px); + min-width: 100%; opacity: ${isBroken ? 0.5 : 1}; align-items: center; - position: relative; - top: -4px; - :hover { background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20}; } @@ -411,11 +409,9 @@ export const TreeItem: React.FC = ({ dialogName, onSelect, textWidth = 100, - hasChildren = false, menu = [], extraSpace = 0, padLeft = 0, - marginLeft = 0, menuOpenCallback = () => {}, isMenuOpen = false, showErrors = true, @@ -430,7 +426,7 @@ export const TreeItem: React.FC = ({ const linkString = `${link.projectId}_DialogTreeItem${link.dialogId}_${link.trigger ?? ''}`; const isBroken = !!link.botError; - const spacerWidth = hasChildren && !isBroken ? 0 : SUMMARY_ARROW_SPACE + extraSpace; + const spacerWidth = extraSpace; const overflowIconWidthOnHover = overflowMenu.length > 0 ? THREE_DOTS_ICON_WIDTH : 0; @@ -587,10 +583,7 @@ export const TreeItem: React.FC = ({ ]} overflowItems={overflowMenu} styles={{ item: { flex: 1 } }} - onRenderItem={onRenderItem( - textWidth - spacerWidth + extraSpace - overflowIconWidthActiveOrChildSelected, - showErrors - )} + onRenderItem={onRenderItem(textWidth + extraSpace, showErrors)} onRenderOverflowButton={onRenderOverflowButton( !!isActive, isChildSelected, From 858032861241ef47fbdeee737f37f28e352280c2 Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Thu, 15 Apr 2021 12:06:44 -0700 Subject: [PATCH 03/15] Update ExpandableNode.tsx --- .../client/src/components/ProjectTree/ExpandableNode.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx index 2372eb12ec..0ff449c509 100644 --- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx @@ -22,7 +22,6 @@ const listItemStyle = (isActive: boolean, isOpen: boolean) => css` background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20}; } background: ${isActive ? NeutralColors.gray30 : NeutralColors.white}; - ${isOpen ? '' : 'li { display: none };'} ${isOpen ? `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black%3B' d='M 0 8 H 16 L 8 16 L 0 8'/%3E%3C/svg%3E");` : `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black%3B' d='M 8 0 V 16 L 16 8 L 8 0'/%3E%3C/svg%3E");`} @@ -73,12 +72,7 @@ export const ExpandableNode = ({ onKeyDown={handleKey} > {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */} -
  • +
  • {summary}
  • {isExpanded &&
    {children}
    } From 9b167590ed0d0aa82fcef6d1c6c741bb339ce1be Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Thu, 15 Apr 2021 14:03:49 -0700 Subject: [PATCH 04/15] fix layout issues and clicking behavior --- .../src/components/ProjectTree/ExpandableNode.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx index 0ff449c509..81813f66c0 100644 --- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx @@ -23,14 +23,15 @@ const listItemStyle = (isActive: boolean, isOpen: boolean) => css` } background: ${isActive ? NeutralColors.gray30 : NeutralColors.white}; ${isOpen - ? `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black%3B' d='M 0 8 H 16 L 8 16 L 0 8'/%3E%3C/svg%3E");` - : `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10' width='10' viewBox='0 0 16 16'%3E%3Cpath style='fill:black%3B' d='M 8 0 V 16 L 16 8 L 8 0'/%3E%3C/svg%3E");`} + ? `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16' width='16' viewBox='0 0 24 16'%3E%3Cpath style='fill:black%3B' d='M 8 8 h 16 l -8 8 l -8 -8'/%3E%3C/svg%3E");` + : `list-style-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16' width='16' viewBox='0 0 24 16'%3E%3Cpath style='fill:black%3B' d='M 16 0 v 16 l 8 -8 l -8 -8'/%3E%3C/svg%3E");`} `; const listStyle = css` label: list; margin-top: 4px; - padding-inline-start: 20px; + margin-left: 8px; + padding-inline-start: 12px; margin-block-end: 0px; `; @@ -50,7 +51,8 @@ export const ExpandableNode = ({ } function handleClick(ev: MouseEvent) { - if ((ev.target as Element)?.tagName.toLowerCase() === 'ul') { + const target = ev.target as Element; + if (target.tagName.toLowerCase() === 'li') { setExpandedWithCallback(!isExpanded); ev.stopPropagation(); } From f753120ff877cc86a2762750bd5fc6f48c185aa1 Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Thu, 15 Apr 2021 14:26:53 -0700 Subject: [PATCH 05/15] fix variables --- .../components/ProjectTree/ProjectTree.tsx | 4 +-- .../src/components/ProjectTree/treeItem.tsx | 26 +++++++------------ 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx index 30198e0ca6..bb120794fe 100644 --- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx @@ -282,7 +282,6 @@ export const ProjectTree: React.FC = ({ link={dialogLink} menu={options.showMenu ? menu : options.showQnAMenu ? [QnAMenuItem] : []} menuOpenCallback={setMenuOpen} - padLeft={depth * LEVEL_PADDING} showErrors={false} textWidth={leftSplitWidth - TREE_PADDING} onSelect={handleOnSelect} @@ -313,7 +312,6 @@ export const ProjectTree: React.FC = ({ itemType={'dialog'} link={dialogLink} menuOpenCallback={setMenuOpen} - padLeft={depth * LEVEL_PADDING} showErrors={false} textWidth={leftSplitWidth - TREE_PADDING} onSelect={handleOnSelect} @@ -349,7 +347,7 @@ export const ProjectTree: React.FC = ({ css` outline: none; :focus { outline: rgb(102, 102, 102) solid 1px; @@ -38,6 +38,8 @@ const projectTreeItemContainer = css` text-align: left; cursor: pointer; + padding-left: ${extraSpace}px; + label: ProjectTreeItemContainer; `; @@ -93,8 +95,7 @@ const navContainer = ( isActive: boolean, menuOpenHere: boolean, textWidth: number, - isBroken: boolean, - padLeft: number + isBroken: boolean ) => css` ${ isAnyMenuOpen @@ -209,6 +210,7 @@ const diagnosticWarningIcon = { color: '#8A8780', background: '#FFF4CE', }; + const itemName = (nameWidth: number) => css` max-width: ${nameWidth}px; overflow: hidden; @@ -270,7 +272,6 @@ type ITreeItemProps = { dialogName?: string; textWidth?: number; extraSpace?: number; - padLeft?: number; marginLeft?: number; hasChildren?: boolean; menu?: TreeMenuItem[]; @@ -411,7 +412,6 @@ export const TreeItem: React.FC = ({ textWidth = 100, menu = [], extraSpace = 0, - padLeft = 0, menuOpenCallback = () => {}, isMenuOpen = false, showErrors = true, @@ -426,7 +426,6 @@ export const TreeItem: React.FC = ({ const linkString = `${link.projectId}_DialogTreeItem${link.dialogId}_${link.trigger ?? ''}`; const isBroken = !!link.botError; - const spacerWidth = extraSpace; const overflowIconWidthOnHover = overflowMenu.length > 0 ? THREE_DOTS_ICON_WIDTH : 0; @@ -456,7 +455,7 @@ export const TreeItem: React.FC = ({
    = ({
    ); }, - [textWidth, spacerWidth, extraSpace, overflowIconWidthActiveOrChildSelected, showErrors] + [textWidth, overflowIconWidthActiveOrChildSelected, showErrors] ); const onRenderOverflowButton = useCallback( @@ -547,14 +546,7 @@ export const TreeItem: React.FC = ({ return (
    = ({ ]} overflowItems={overflowMenu} styles={{ item: { flex: 1 } }} - onRenderItem={onRenderItem(textWidth + extraSpace, showErrors)} + onRenderItem={onRenderItem(textWidth, showErrors)} onRenderOverflowButton={onRenderOverflowButton( !!isActive, isChildSelected, From 5955b70b15da5ecc5e4050c482aff5e810fe4e22 Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Thu, 15 Apr 2021 14:40:13 -0700 Subject: [PATCH 06/15] more fixes --- .../client/src/components/ProjectTree/ExpandableNode.tsx | 4 ++-- .../client/src/components/ProjectTree/ProjectTree.tsx | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx index 81813f66c0..8de548647a 100644 --- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx @@ -30,8 +30,8 @@ const listItemStyle = (isActive: boolean, isOpen: boolean) => css` const listStyle = css` label: list; margin-top: 4px; - margin-left: 8px; - padding-inline-start: 12px; + margin-left: 16px; + padding-inline-start: 6px; margin-block-end: 0px; `; diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx index bb120794fe..df717a1ae7 100644 --- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx @@ -111,7 +111,6 @@ type Props = { }; const TREE_PADDING = 100; // the horizontal space taken up by stuff in the tree other than text or indentation -const LEVEL_PADDING = 44; // the size of a reveal-triangle and the space around it export const ProjectTree: React.FC = ({ headerMenu = [], @@ -292,7 +291,7 @@ export const ProjectTree: React.FC = ({ }; }; - const renderCommonDialogHeader = (skillId: string, depth: number) => { + const renderCommonDialogHeader = (skillId: string) => { const dialogLink: TreeLink = { dialogId: 'common', displayName: formatMessage('Common'), @@ -620,7 +619,7 @@ export const ProjectTree: React.FC = ({ (dialog) => filterMatch(dialog.displayName) || dialog.triggers.some((trigger) => filterMatch(getTriggerName(trigger))) ); - const commonLink = options.showCommonLinks ? [renderCommonDialogHeader(projectId, 1)] : []; + const commonLink = options.showCommonLinks ? [renderCommonDialogHeader(projectId)] : []; const importedLgLinks = options.showLgImports ? lgImportsList.map((file) => renderLgImportAsDialog(file, projectId)) From 5bb8704d5fd9a090aee7d47f171e4fced1f48571 Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Thu, 15 Apr 2021 16:11:09 -0700 Subject: [PATCH 07/15] Update ExpandableNode.tsx --- .../client/src/components/ProjectTree/ExpandableNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx index 8de548647a..746b53a985 100644 --- a/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ExpandableNode.tsx @@ -29,7 +29,7 @@ const listItemStyle = (isActive: boolean, isOpen: boolean) => css` const listStyle = css` label: list; - margin-top: 4px; + margin-top: 0; margin-left: 16px; padding-inline-start: 6px; margin-block-end: 0px; From 3fedc483229b96ae39c6890cb595e2adfb4d5dd5 Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Fri, 16 Apr 2021 14:46:47 -0700 Subject: [PATCH 08/15] Update ProjectTree.tsx --- .../packages/client/src/components/ProjectTree/ProjectTree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx index 0e31ade98b..ada71de572 100644 --- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx @@ -30,7 +30,7 @@ import { getBaseName } from '../../utils/fileUtil'; import { TreeItem } from './treeItem'; import { ExpandableNode } from './ExpandableNode'; -import { INDENT_PER_LEVEL, LEVEL_PADDING, TREE_PADDING } from './constants'; +import { INDENT_PER_LEVEL, TREE_PADDING } from './constants'; import { ProjectTreeHeader, ProjectTreeHeaderMenuItem } from './ProjectTreeHeader'; import { isChildTriggerLinkSelected, doesLinkMatch } from './helpers'; import { ProjectHeader } from './ProjectHeader'; From a167b75bfcad29dc9051d21a08d2e966f0ffdc03 Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Fri, 16 Apr 2021 15:06:13 -0700 Subject: [PATCH 09/15] Update ProjectTree.tsx --- .../packages/client/src/components/ProjectTree/ProjectTree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx index ada71de572..704d8bc94e 100644 --- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx @@ -60,7 +60,7 @@ const tree = css` label: tree; `; -const headerCSS = (label: string, isActive?: boolean) => css` +export const headerCSS = (label: string, isActive?: boolean) => css` width: 100%; label: ${label}; :hover { From 260d5b1628defd9eef34b53e4e2e430ef7e7b05e Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Fri, 16 Apr 2021 15:20:11 -0700 Subject: [PATCH 10/15] remove stray comment --- Composer/packages/client/src/components/ProjectTree/treeItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx index 639f5ea620..715bf7bdc6 100644 --- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx +++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx @@ -459,7 +459,6 @@ export const TreeItem: React.FC = ({ } return ( - // *** THIS IS NEW STUFF, VERIFY IT
    Date: Fri, 16 Apr 2021 15:59:31 -0700 Subject: [PATCH 11/15] Update expandableNode.test.tsx --- .../client/__tests__/components/expandableNode.test.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Composer/packages/client/__tests__/components/expandableNode.test.tsx b/Composer/packages/client/__tests__/components/expandableNode.test.tsx index 1fa7739519..6d9388b42d 100644 --- a/Composer/packages/client/__tests__/components/expandableNode.test.tsx +++ b/Composer/packages/client/__tests__/components/expandableNode.test.tsx @@ -14,16 +14,17 @@ describe('', () => { it('closes and opens on click', async () => { if (component == null) fail(); + const triangle = await component.findByTestId('summaryTag'); let details = await component.findByTestId('dialog'); - expect(details.attributes.getNamedItem('open')).not.toBeNull(); + expect(details.childNodes.length).toBe(2); // 1 for the summary itself, 1 for the details fireEvent.click(triangle); details = await component.findByTestId('dialog'); - expect(details.attributes.getNamedItem('open')).toBeNull(); + expect(details.childNodes.length).toBe(1); // when the node is closed, the details don't render at all fireEvent.click(triangle); details = await component.findByTestId('dialog'); - expect(details.attributes.getNamedItem('open')).not.toBeNull(); + expect(details.childNodes.length).toBe(2); }); }); From 04f194f94074ada3a01e4a47f1aa12d36e4ab59a Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Mon, 19 Apr 2021 12:17:28 -0700 Subject: [PATCH 12/15] add new timeout to tests --- Composer/cypress/integration/Breadcrumb.spec.ts | 4 ++-- Composer/packages/server/src/locales/en-US.json | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Composer/cypress/integration/Breadcrumb.spec.ts b/Composer/cypress/integration/Breadcrumb.spec.ts index 9f7d373374..6258aea5d3 100644 --- a/Composer/cypress/integration/Breadcrumb.spec.ts +++ b/Composer/cypress/integration/Breadcrumb.spec.ts @@ -13,7 +13,7 @@ context('breadcrumb', () => { }); function hasBreadcrumbItems(cy: Cypress.cy, items: (string | RegExp)[]) { - cy.get('[data-testid="Breadcrumb"]') + cy.get('[data-testid="Breadcrumb"]', { timeout: 10000 }) .last() .get('li') .should(($li) => { @@ -35,7 +35,7 @@ context('breadcrumb', () => { hasBreadcrumbItems(cy, ['__TestTodoSample']); }); - it('can show dialog and trigger name in breadcrumb', () => { + it.only('can show dialog and trigger name in breadcrumb', () => { cy.findByTestId('ProjectTree').within(() => { cy.findByTestId('addtodo_Dialog started').click(); }); diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json index 18725294d3..945d7b9cfd 100644 --- a/Composer/packages/server/src/locales/en-US.json +++ b/Composer/packages/server/src/locales/en-US.json @@ -1262,6 +1262,9 @@ "edit_in_json_75d0d754": { "message": "Edit in JSON" }, + "edit_in_power_virtual_agents_56ee7ac2": { + "message": "Edit in Power Virtual Agents" + }, "edit_kb_name_5e2d8c5b": { "message": "Edit KB name" }, @@ -2594,9 +2597,6 @@ "open_e0beb7b9": { "message": "Open" }, - "open_in_power_virtual_agents_fcd881e6": { - "message": "Open in Power Virtual Agents" - }, "open_inline_editor_a5aabcfa": { "message": "Open inline editor" }, From 1a64edc59c2baf6f30a74e6ce0061275f33cddc1 Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Mon, 19 Apr 2021 12:17:36 -0700 Subject: [PATCH 13/15] Update Breadcrumb.spec.ts --- Composer/cypress/integration/Breadcrumb.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/cypress/integration/Breadcrumb.spec.ts b/Composer/cypress/integration/Breadcrumb.spec.ts index 6258aea5d3..aa9a6cdf74 100644 --- a/Composer/cypress/integration/Breadcrumb.spec.ts +++ b/Composer/cypress/integration/Breadcrumb.spec.ts @@ -35,7 +35,7 @@ context('breadcrumb', () => { hasBreadcrumbItems(cy, ['__TestTodoSample']); }); - it.only('can show dialog and trigger name in breadcrumb', () => { + it('can show dialog and trigger name in breadcrumb', () => { cy.findByTestId('ProjectTree').within(() => { cy.findByTestId('addtodo_Dialog started').click(); }); From b849dec4e87f18d95c00ab9ef6b7f2db9b3173d2 Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Mon, 19 Apr 2021 13:49:54 -0700 Subject: [PATCH 14/15] post-merge fixes --- .../client/src/components/ProjectTree/TopicsList.tsx | 6 ++++-- .../packages/client/src/components/ProjectTree/treeItem.tsx | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/Composer/packages/client/src/components/ProjectTree/TopicsList.tsx b/Composer/packages/client/src/components/ProjectTree/TopicsList.tsx index c2c4b26236..f050de5634 100644 --- a/Composer/packages/client/src/components/ProjectTree/TopicsList.tsx +++ b/Composer/packages/client/src/components/ProjectTree/TopicsList.tsx @@ -10,7 +10,7 @@ import get from 'lodash/get'; import { ExpandableNode } from './ExpandableNode'; import { TreeItem } from './treeItem'; -import { LEVEL_PADDING, INDENT_PER_LEVEL } from './constants'; +import { INDENT_PER_LEVEL } from './constants'; import { headerCSS } from './ProjectTree'; type TopicsListProps = { @@ -69,8 +69,10 @@ export const TopicsList: React.FC = ({ topics, onToggle, textWi link={{ displayName: formatMessage('Power Virtual Agents Topics ({count})', { count: topics.length }), projectId, + isRoot: false, + isRemote: false, + diagnostics: [], }} - padLeft={0 * LEVEL_PADDING} showErrors={false} textWidth={textWidth} /> diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx index 715bf7bdc6..d4a575a8c2 100644 --- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx +++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx @@ -285,6 +285,8 @@ type ITreeItemProps = { isMenuOpen?: boolean; showErrors?: boolean; role?: string; + href?: string; + tooltip?: string; }; const renderTreeMenuItem = (link: TreeLink) => (item: TreeMenuItem) => { @@ -417,7 +419,6 @@ export const TreeItem: React.FC = ({ onSelect, textWidth = 100, menu = [], - extraSpace = 0, menuOpenCallback = () => {}, isMenuOpen = false, showErrors = true, From 479a23ff0382457a4d97be38ef8cd481ff3040fb Mon Sep 17 00:00:00 2001 From: Ben Yackley <61990921+beyackle@users.noreply.github.com> Date: Mon, 19 Apr 2021 15:06:50 -0700 Subject: [PATCH 15/15] scope breadcrumb tests to inside breadcrumb --- Composer/cypress/integration/Breadcrumb.spec.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/Composer/cypress/integration/Breadcrumb.spec.ts b/Composer/cypress/integration/Breadcrumb.spec.ts index aa9a6cdf74..a50f8967bd 100644 --- a/Composer/cypress/integration/Breadcrumb.spec.ts +++ b/Composer/cypress/integration/Breadcrumb.spec.ts @@ -13,12 +13,13 @@ context('breadcrumb', () => { }); function hasBreadcrumbItems(cy: Cypress.cy, items: (string | RegExp)[]) { - cy.get('[data-testid="Breadcrumb"]', { timeout: 10000 }) + cy.get('[data-testid="Breadcrumb"]') .last() - .get('li') - .should(($li) => { - items.forEach((item, idx) => { - expect($li.eq(idx)).to.contain(item); + .within(() => { + cy.get('li').should(($li) => { + items.forEach((item, idx) => { + expect($li.eq(idx)).to.contain(item); + }); }); }); }