diff --git a/Composer/cypress/integration/Breadcrumb.spec.ts b/Composer/cypress/integration/Breadcrumb.spec.ts index fa885d582d..21ab54ba48 100644 --- a/Composer/cypress/integration/Breadcrumb.spec.ts +++ b/Composer/cypress/integration/Breadcrumb.spec.ts @@ -58,7 +58,7 @@ context('breadcrumb', () => { // Click on an action cy.withinEditor('VisualEditor', () => { cy.findByTestId('RuleEditor').within(() => { - cy.findByText('Send a response').click(); + cy.findByText('Send a response').click({ force: true }); }); }); diff --git a/Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.tsx b/Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.tsx index 668aaf6081..e5acf96c8e 100644 --- a/Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.tsx @@ -16,9 +16,9 @@ import { StepRenderer } from '../renderers/StepRenderer'; import { GraphLayout } from '../../models/GraphLayout'; import { EdgeMenu } from '../menus/EdgeMenu'; import { SVGContainer } from '../lib/SVGContainer'; -import { renderEdge } from '../lib/EdgeUtil'; import { GraphNodeMap, useSmartLayout } from '../../hooks/useSmartLayout'; import { designerCache } from '../../store/DesignerCache'; +import { FlowEdges } from '../lib/FlowEdges'; const StepInterval = ElementInterval.y; @@ -57,7 +57,9 @@ export const StepGroup: FunctionComponent = ({ return (
- + {nodes ? nodes.map((node, index) => ( diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/FlowEdges.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/FlowEdges.tsx new file mode 100644 index 0000000000..8d771242a0 --- /dev/null +++ b/Composer/packages/extensions/visual-designer/src/components/lib/FlowEdges.tsx @@ -0,0 +1,17 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import React, { FC } from 'react'; + +import { Edge } from '../../models/EdgeData'; + +import { renderEdge } from './EdgeUtil'; + +export interface FlowEdgesProps { + edges: Edge[]; +} + +export const FlowEdges: FC = ({ edges }) => { + if (!Array.isArray(edges)) return null; + return <>{edges.map(edge => renderEdge(edge))}; +}; diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/OffsetContainer.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/OffsetContainer.tsx index fd06d825b0..170c6024c9 100644 --- a/Composer/packages/extensions/visual-designer/src/components/lib/OffsetContainer.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/lib/OffsetContainer.tsx @@ -13,7 +13,7 @@ interface OffsetContainerProps { export class OffsetContainer extends React.Component { render(): ReactNode { - const { offset, children } = this.props; + const { offset, children, ...otherProps } = this.props; if (!offset) return children; return ( @@ -27,7 +27,7 @@ export class OffsetContainer extends React.Component {children}
diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/SVGContainer.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/SVGContainer.tsx index 81f5e3669f..151fae481d 100644 --- a/Composer/packages/extensions/visual-designer/src/components/lib/SVGContainer.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/lib/SVGContainer.tsx @@ -1,10 +1,11 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import React from 'react'; +/** @jsx jsx */ +import { jsx } from '@emotion/core'; -export const SVGContainer = ({ children, hidden = false }) => ( - +export const SVGContainer = ({ children, width = 100, height = 100, hidden = false }) => ( + {children} ); diff --git a/Composer/packages/extensions/visual-designer/src/editors/StepEditor.tsx b/Composer/packages/extensions/visual-designer/src/editors/StepEditor.tsx index fa4082685f..e00403ee50 100644 --- a/Composer/packages/extensions/visual-designer/src/editors/StepEditor.tsx +++ b/Composer/packages/extensions/visual-designer/src/editors/StepEditor.tsx @@ -66,7 +66,7 @@ export const StepEditor = ({ id, data, onEvent, trigger, addCoachMarkRef }): JSX css={{ position: 'relative', width: editorWidth, height: editorHeight }} aria-label="step-editor" > - + {drawSVGEdge('editor-edge__head', editorAxisX, TriggerSize.height, EdgeDirection.Down, ElementInterval.y / 2)} {drawSVGEdge( 'editor-edge__tail', diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ForeachWidget.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ForeachWidget.tsx index bb67c62fd5..c671a40845 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ForeachWidget.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ForeachWidget.tsx @@ -15,10 +15,10 @@ import { LoopIndicator } from '../components/decorations/LoopIndicator'; import { StepGroup } from '../components/groups'; import { ElementWrapper } from '../components/renderers/ElementWrapper'; import { ElementMeasurer } from '../components/renderers/ElementMeasurer'; -import { renderEdge } from '../components/lib/EdgeUtil'; import { SVGContainer } from '../components/lib/SVGContainer'; import { useSmartLayout, GraphNodeMap } from '../hooks/useSmartLayout'; import { designerCache } from '../store/DesignerCache'; +import { FlowEdges } from '../components/lib/FlowEdges'; enum ForeachNodes { Foreach = 'foreachNode', @@ -97,7 +97,9 @@ export const ForeachWidget: FunctionComponent = ({ id, data, onEvent(NodeEventTypes.Focus, { id })} /> ))} - {Array.isArray(edges) ? edges.map(x => renderEdge(x)) : null} + + + ); }; diff --git a/Composer/packages/extensions/visual-designer/src/widgets/IfConditionWidget.tsx b/Composer/packages/extensions/visual-designer/src/widgets/IfConditionWidget.tsx index b17a05711f..7dfbdd9825 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/IfConditionWidget.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/IfConditionWidget.tsx @@ -16,9 +16,9 @@ import { Diamond } from '../components/nodes/templates/Diamond'; import { ElementWrapper } from '../components/renderers/ElementWrapper'; import { ElementMeasurer } from '../components/renderers/ElementMeasurer'; import { SVGContainer } from '../components/lib/SVGContainer'; -import { renderEdge } from '../components/lib/EdgeUtil'; import { useSmartLayout, GraphNodeMap } from '../hooks/useSmartLayout'; import { designerCache } from '../store/DesignerCache'; +import { FlowEdges } from '../components/lib/FlowEdges'; enum IfElseNodes { Condition = 'conditionNode', @@ -105,7 +105,9 @@ export const IfConditionWidget: FunctionComponent = ({ ); })} - {Array.isArray(edges) ? edges.map(x => renderEdge(x)) : null} + + + ); }; diff --git a/Composer/packages/extensions/visual-designer/src/widgets/PromptWidget.tsx b/Composer/packages/extensions/visual-designer/src/widgets/PromptWidget.tsx index 4240e491f9..02c9406adc 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/PromptWidget.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/PromptWidget.tsx @@ -14,12 +14,12 @@ import { OffsetContainer } from '../components/lib/OffsetContainer'; import { ElementWrapper } from '../components/renderers/ElementWrapper'; import { NodeEventTypes } from '../constants/NodeEventTypes'; import { IconBrick } from '../components/decorations/IconBrick'; -import { renderEdge } from '../components/lib/EdgeUtil'; import { SVGContainer } from '../components/lib/SVGContainer'; import { GraphLayout } from '../models/GraphLayout'; import { ElementMeasurer } from '../components/renderers/ElementMeasurer'; import { useSmartLayout, GraphNodeMap } from '../hooks/useSmartLayout'; import { designerCache } from '../store/DesignerCache'; +import { FlowEdges } from '../components/lib/FlowEdges'; enum PromptNodes { BotAsks = 'botAsksNode', @@ -91,7 +91,9 @@ export const PromptWidget: FC = ({ onEvent(NodeEventTypes.Focus, { id, tab: PromptTab.OTHER })} /> - {Array.isArray(edges) ? edges.map(x => renderEdge(x)) : null} + + + ); }; diff --git a/Composer/packages/extensions/visual-designer/src/widgets/SwitchConditionWidget.tsx b/Composer/packages/extensions/visual-designer/src/widgets/SwitchConditionWidget.tsx index 16a25591c8..7435719918 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/SwitchConditionWidget.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/SwitchConditionWidget.tsx @@ -15,10 +15,10 @@ import { StepGroup } from '../components/groups'; import { Diamond } from '../components/nodes/templates/Diamond'; import { ElementWrapper } from '../components/renderers/ElementWrapper'; import { ElementMeasurer } from '../components/renderers/ElementMeasurer'; -import { renderEdge } from '../components/lib/EdgeUtil'; import { SVGContainer } from '../components/lib/SVGContainer'; import { GraphNodeMap, useSmartLayout } from '../hooks/useSmartLayout'; import { designerCache } from '../store/DesignerCache'; +import { FlowEdges } from '../components/lib/FlowEdges'; enum SwitchNodes { Switch = 'switchNode', @@ -114,7 +114,9 @@ export const SwitchConditionWidget: FunctionComponent ))} - {Array.isArray(edges) ? edges.map(x => renderEdge(x)) : null} + + + ); };