= ({
summary={renderTriggerGroupHeader(groupDisplayName, dialog, projectId)}
onToggle={(newState) => setPageElement(key, newState)}
>
- {renderTriggerList(triggers, dialog, projectId, link, 1)}
+ {renderTriggerList(triggers, dialog, projectId, link)}
);
};
@@ -485,7 +473,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
@@ -634,7 +622,7 @@ export const ProjectTree: React.FC = ({
// eventually we will filter on topic trigger phrases
const filteredTopics =
filter == null || filter.length === 0 ? topics : topics.filter((topic) => filterMatch(topic.displayName));
- const commonLink = options.showCommonLinks ? [renderCommonDialogHeader(projectId, 1)] : [];
+ const commonLink = options.showCommonLinks ? [renderCommonDialogHeader(projectId)] : [];
const importedLgLinks = options.showLgImports
? lgImportsList.map((file) => renderLgImportAsDialog(file, projectId))
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/constants.ts b/Composer/packages/client/src/components/ProjectTree/constants.ts
index 64133fa6c2..77028671af 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 2a2d7051fd..d4a575a8c2 100644
--- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
+++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx
@@ -21,13 +21,13 @@ import { DiagnosticSeverity, Diagnostic, Icons } 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';
import { TreeItemContent } from './TreeItemContent';
// -------------------- Styles -------------------- //
-const projectTreeItemContainer = css`
+const projectTreeItemContainer = (extraSpace: number) => css`
outline: none;
:focus {
outline: rgb(102, 102, 102) solid 1px;
@@ -39,6 +39,8 @@ const projectTreeItemContainer = css`
text-align: left;
cursor: pointer;
+ padding-left: ${extraSpace}px;
+
label: ProjectTreeItemContainer;
`;
@@ -94,16 +96,13 @@ const navContainer = (
isActive: boolean,
menuOpenHere: boolean,
textWidth: number,
- isBroken: boolean,
- padLeft: number,
- marginLeft: number
+ isBroken: boolean
) => css`
${isAnyMenuOpen
? ''
: `
&:hover {
- background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20};
-
+ background: ${isActive ? NeutralColors.gray40 : NeutralColors.gray20};
.dialog-more-btn {
visibility: visible;
}
@@ -125,17 +124,11 @@ const navContainer = (
label: navItem;
- height: 24px;
font-size: 12px;
- padding-left: ${padLeft}px;
- margin-left: ${marginLeft}px;
- 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};
}
@@ -285,7 +278,6 @@ type ITreeItemProps = {
dialogName?: string;
textWidth?: number;
extraSpace?: number;
- padLeft?: number;
marginLeft?: number;
hasChildren?: boolean;
menu?: TreeMenuItem[];
@@ -293,6 +285,8 @@ type ITreeItemProps = {
isMenuOpen?: boolean;
showErrors?: boolean;
role?: string;
+ href?: string;
+ tooltip?: string;
};
const renderTreeMenuItem = (link: TreeLink) => (item: TreeMenuItem) => {
@@ -424,11 +418,7 @@ export const TreeItem: React.FC = ({
dialogName,
onSelect,
textWidth = 100,
- hasChildren = false,
menu = [],
- extraSpace = 0,
- padLeft = 0,
- marginLeft = 0,
menuOpenCallback = () => {},
isMenuOpen = false,
showErrors = true,
@@ -444,7 +434,6 @@ 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 overflowIconWidthOnHover = overflowMenu.length > 0 ? THREE_DOTS_ICON_WIDTH : 0;
@@ -517,7 +506,7 @@ export const TreeItem: React.FC = ({
);
},
- [textWidth, spacerWidth, extraSpace, overflowIconWidthActiveOrChildSelected, showErrors]
+ [textWidth, overflowIconWidthActiveOrChildSelected, showErrors]
);
const onRenderOverflowButton = useCallback(
@@ -574,15 +563,7 @@ export const TreeItem: React.FC = ({
return (
= ({
: undefined
}
>
-
= ({
]}
overflowItems={overflowMenu}
styles={{ item: { flex: 1 } }}
- onRenderItem={onRenderItem(
- textWidth - spacerWidth + extraSpace - overflowIconWidthActiveOrChildSelected,
- showErrors
- )}
+ onRenderItem={onRenderItem(textWidth, showErrors)}
onRenderOverflowButton={onRenderOverflowButton(
!!isActive,
isChildSelected,