forked from microsoft/BotFramework-Composer
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: show topics in left nav (microsoft#6987)
* display topics in left nav * only show external link icon on hover * sort system topics at end of list * show tooltip when hovering on pva topic * show system topic icon * collapse topic list with Enter Co-authored-by: Ben Yackley <[email protected]> Co-authored-by: Chris Whitten <[email protected]>
- Loading branch information
3 people
authored
Apr 16, 2021
1 parent
0a50f34
commit 1ce457b
Showing
14 changed files
with
253 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
84 changes: 84 additions & 0 deletions
84
Composer/packages/client/src/components/ProjectTree/TopicsList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| /** @jsx jsx */ | ||
| import { jsx } from '@emotion/core'; | ||
| import React from 'react'; | ||
| import { DialogInfo } from '@bfc/shared'; | ||
| import formatMessage from 'format-message'; | ||
| import get from 'lodash/get'; | ||
|
|
||
| import { ExpandableNode } from './ExpandableNode'; | ||
| import { TreeItem } from './treeItem'; | ||
| import { LEVEL_PADDING, INDENT_PER_LEVEL } from './constants'; | ||
| import { headerCSS } from './ProjectTree'; | ||
|
|
||
| type TopicsListProps = { | ||
| onToggle: (newState: boolean) => void; | ||
| topics: DialogInfo[]; | ||
| textWidth: number; | ||
| projectId: string; | ||
| }; | ||
|
|
||
| export const TopicsList: React.FC<TopicsListProps> = ({ topics, onToggle, textWidth, projectId }) => { | ||
| const linkTooltip = formatMessage('Open in Power Virtual Agents'); | ||
|
|
||
| const renderTopic = (topic: DialogInfo) => { | ||
| const isSystemTopic = get(topic.content, 'isSystemTopic', false); | ||
|
|
||
| return ( | ||
| <TreeItem | ||
| key={topic.id} | ||
| dialogName={topic.displayName} | ||
| extraSpace={INDENT_PER_LEVEL} | ||
| isActive={false} | ||
| isMenuOpen={false} | ||
| itemType={isSystemTopic ? 'system topic' : 'topic'} | ||
| link={{ | ||
| projectId, | ||
| dialogId: topic.id, | ||
| displayName: topic.displayName, | ||
| href: get(topic.content, '$designer.link'), | ||
| tooltip: linkTooltip, | ||
| }} | ||
| marginLeft={1 * INDENT_PER_LEVEL} | ||
| role="treeitem" | ||
| textWidth={textWidth} | ||
| onSelect={(link) => { | ||
| if (link.href) { | ||
| // eslint-disable-next-line security/detect-non-literal-fs-filename | ||
| window.open(link.href, '_blank'); | ||
| } | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <ExpandableNode | ||
| key="pva-topics" | ||
| depth={1} | ||
| summary={ | ||
| <span css={headerCSS('pva-topics')}> | ||
| <TreeItem | ||
| hasChildren | ||
| isActive={false} | ||
| isChildSelected={false} | ||
| isMenuOpen={false} | ||
| itemType="topic" | ||
| link={{ | ||
| displayName: formatMessage('Power Virtual Agents Topics ({count})', { count: topics.length }), | ||
| projectId, | ||
| }} | ||
| padLeft={0 * LEVEL_PADDING} | ||
| showErrors={false} | ||
| textWidth={textWidth} | ||
| /> | ||
| </span> | ||
| } | ||
| onToggle={onToggle} | ||
| > | ||
| <div>{topics.map(renderTopic)}</div> | ||
| </ExpandableNode> | ||
| ); | ||
| }; |
21 changes: 21 additions & 0 deletions
21
Composer/packages/client/src/components/ProjectTree/TreeItemContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| // Copyright (c) Microsoft Corporation. | ||
| // Licensed under the MIT License. | ||
|
|
||
| import React from 'react'; | ||
| import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip'; | ||
|
|
||
| type TreeItemContentProps = { | ||
| tooltip?: string | JSX.Element | JSX.Element[]; | ||
| }; | ||
|
|
||
| export const TreeItemContent: React.FC<TreeItemContentProps> = ({ children, tooltip }) => { | ||
| if (tooltip) { | ||
| return ( | ||
| <TooltipHost content={tooltip} directionalHint={DirectionalHint.bottomCenter}> | ||
| {children} | ||
| </TooltipHost> | ||
| ); | ||
| } | ||
|
|
||
| return <React.Fragment>{children}</React.Fragment>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.