Skip to content

Commit

Permalink
#1129 Externalize string 'Return to previous flow' (#1623)
Browse files Browse the repository at this point in the history
  • Loading branch information
tomlyn authored Nov 8, 2023
1 parent 2dd3db8 commit 844562f
Show file tree
Hide file tree
Showing 9 changed files with 75 additions and 94 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"canvas.stateTagReadOnly": "Read-only",
"canvas.stateTagTipLocked": "This flow is locked and cannot be edited.",
"canvas.stateTagTipReadOnly": "This flow cannot be edited.",
"canvas.returnToPrevious": "Return to previous flow",
"comment.colorBackground": "Color background",
"comment.editComment": "Edit comment",
"node.createSupernode": "Create supernode",
Expand Down Expand Up @@ -48,7 +49,6 @@
"texttoolbar.bulletedListAction": "Bulleted List",
"texttoolbar.numberedListAction": "Numbered List",
"texttoolbar.titleAction": "Title",
"texttoolbar.headerAction": "Header",
"texttoolbar.subheaderAction": "Subheader",
"texttoolbar.bodyAction": "Body"
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"canvas.stateTagReadOnly": "[Esperanto~Read-only~~~eo]",
"canvas.stateTagTipLocked": "[Esperanto~This flow is locked and cannot be edited.~~~~~~~~~eo]",
"canvas.stateTagTipReadOnly": "[Esperanto~This flow cannot be edited.~~~~~~~~~eo]",
"canvas.returnToPrevious": "[Esperanto~Return to previous flow~~~~~~eo]",
"comment.colorBackground": "[Esperanto~Color background~~~~~~~~~eo]",
"comment.editComment": "[Esperanto~Edit comment~~~~~~~eo]",
"node.createSupernode": "[Esperanto~Create supernode~~eo]",
Expand Down Expand Up @@ -48,7 +49,6 @@
"texttoolbar.bulletedListAction": "[Esperanto~Bulleted List~~~~eo]",
"texttoolbar.numberedListAction": "[Esperanto~Numbered List~~~~eo]",
"texttoolbar.titleAction": "[Esperanto~Title~eo]",
"texttoolbar.headerAction": "[Esperanto~Header~eo]",
"texttoolbar.subheaderAction": "[Esperanto~Subheader~eo]",
"texttoolbar.bodyAction": "[Esperanto~Body~eo]"
}
Original file line number Diff line number Diff line change
Expand Up @@ -1569,6 +1569,11 @@ export default class CanvasController {
return this.objectModel.isRightFlyoutOpen();
}

isDisplayingFullPageSubFlow() {
const breadcrumbs = this.objectModel.getBreadcrumbs();
return breadcrumbs.length > 1;
}

// Displays a pipeline (identified by the pipelineId passed in). This must be
// one of the pipelines referenced by the current set of breadcrumbs. It
// cannot be used to open a new pipeline outside the current set of breadcruumbs.
Expand Down
38 changes: 36 additions & 2 deletions canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ import CommonCanvasContextToolbar from "./cc-context-toolbar.jsx";
import CommonCanvasTextToolbar from "./cc-text-toolbar.jsx";
import CommonCanvasStateTag from "./cc-state-tag.jsx";
import CanvasUtils from "./common-canvas-utils.js";
import { FlowData16 } from "@carbon/icons-react";
import { Button } from "carbon-components-react";
import { FlowData16, ArrowLeft16 } from "@carbon/icons-react";
import { DND_DATA_TEXT, STATE_TAG_LOCKED, STATE_TAG_READ_ONLY } from "./constants/canvas-constants";

import Logger from "../logging/canvas-logger.js";
import SVGCanvasD3 from "./svg-canvas-d3.js";

Expand Down Expand Up @@ -92,6 +92,7 @@ class CanvasContents extends React.Component {
this.onKeyDown = this.onKeyDown.bind(this);
this.onKeyUp = this.onKeyUp.bind(this);
this.onMouseMove = this.onMouseMove.bind(this);
this.onClickReturnToPrevious = this.onClickReturnToPrevious.bind(this);

// Variables to handle strange HTML drag and drop behaviors. That is, pairs
// of dragEnter/dragLeave events are fired as an external object is
Expand Down Expand Up @@ -270,6 +271,13 @@ class CanvasContents extends React.Component {
}
}

// Handles the click on the "Return to previous flow" button.
onClickReturnToPrevious(evt) {
evt.stopPropagation();
evt.preventDefault();
this.props.canvasController.displayPreviousPipeline();
}

setCanvasInfo() {
// TODO - Eventually move nodeLayout and canvasLayout into redux and then
// pass them into this.svgCanvasD3() as props.
Expand Down Expand Up @@ -337,6 +345,30 @@ class CanvasContents extends React.Component {
return emptyCanvas;
}

getReturnToPreviousBtn() {
let returnToPrevious = null;
if (!this.props.canvasController.isPrimaryPipelineEmpty() &&
(this.props.canvasController.isDisplayingFullPageSubFlow() ||
this.props.canvasConfig?.enableCanvasLayout?.alwaysDisplayBackToParentFlow)) {
const label = this.getLabel("canvas.returnToPrevious");
returnToPrevious = (
<div className={"return-to-previous"}>
<Button kind={"tertiary"}
onClick={this.onClickReturnToPrevious}
aria-label={label}
size={"md"}
>
<div className={"return-to-previous-content"}>
<ArrowLeft16 />
<span>{label}</span>
</div>
</Button>
</div>
);
}
return returnToPrevious;
}

getContextMenu() {
if (this.props.canvasConfig.enableContextToolbar) {
return (
Expand Down Expand Up @@ -535,6 +567,7 @@ class CanvasContents extends React.Component {

const stateTag = this.getStateTag();
const emptyCanvas = this.getEmptyCanvas();
const returnToPreviousBtn = this.getReturnToPreviousBtn();
const contextMenu = this.getContextMenu();
const textToolbar = this.getTextToolbar();
const dropZoneCanvas = this.getDropZone();
Expand All @@ -553,6 +586,7 @@ class CanvasContents extends React.Component {
>
{svgCanvasDiv}
{emptyCanvas}
{returnToPreviousBtn}
{stateTag}
{contextMenu}
{textToolbar}
Expand Down
33 changes: 30 additions & 3 deletions canvas_modules/common-canvas/src/common-canvas/common-canvas.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ $panel-border-color: $ui-03;
cursor: default;
overflow: hidden;
position: relative; // This allows the State Tag to have positio: absolute

}

.right-flyout-panel {
Expand All @@ -74,7 +73,6 @@ $panel-border-color: $ui-03;
// Make sure the bottom panel appear above the empty canvas content
// (when displayed) in the flow editor div.
z-index: 1;

}

.bottom-panel-drag {
Expand Down Expand Up @@ -201,7 +199,6 @@ $panel-border-color: $ui-03;
grid-template-columns: 1fr;
}


/* Styles for empty canvas objects */

.empty-canvas {
Expand Down Expand Up @@ -241,6 +238,36 @@ $panel-border-color: $ui-03;
text-align: center;
}

/* Styles for 'Return to previous flow' button - shown for full-page sub-flows */

.return-to-previous {
position: absolute;
left: 15px;
top: 15px;
background-color: $ui-background;
& button {
background-color: $ui-background;
padding-right: 20px;
}
& button:hover,
& button:focus {
background-color: $ui-03;
color: $interactive-01;
}
& .return-to-previous-content {
display: flex;
background-color: transparent;
& svg {
margin-top: 1px;
margin-left: 4px;
margin-right: 7px;
}
& span {
padding-bottom: 2px;
}
}
}

/* Styles for drop zone canvas objects */

.dropzone-canvas {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -235,12 +235,6 @@ export const NODE_WARNING_ICON =
"<path style=\"stroke-width: 0; fill: #161616; opacity: 1;\" d=\"M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z\"></path>" +
"</svg>";

export const LEFT_ARROW_ICON =
"<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" " +
"width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" aria-hidden=\"true\" style=\"will-change: transform;\">" +
"<path d=\"M13 26L14.41 24.59 6.83 17 29 17 29 15 6.83 15 14.41 7.41 13 6 3 16 13 26z\"></path>" +
"<title>Arrow left</title></svg>";

// This image is stored in the format to be shown as an <img> in the JSX
// created by palette-flyout-content-category render method.
export const SAVED_NODES_FOLDER_ICON =
Expand Down
26 changes: 0 additions & 26 deletions canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@ $canvas-background-color: $ui-background;
$region-selector-stroke-color: $ui-05;
$region-selector-fill-color: $ui-03;

// 'Back to previous flow' control colors
$back-to-previous-flow-box-color: $interactive-01;
$back-to-previous-flow-box-fill-hover: $ui-03;

// Node colors
$node-body-stroke: $ui-05;
$node-body-fill: $ui-01;
Expand Down Expand Up @@ -154,28 +150,6 @@ $link-highlight-color: $support-04;
fill: transparent;
}

/* Back to Previous Flow control */

.d3-back-to-previous-flow-box {
stroke: $back-to-previous-flow-box-color;
fill: $canvas-background-color;
}

.d3-back-to-previous-flow-box[data-pointer-hover="yes"] {
stroke: $back-to-previous-flow-box-color;
fill: $back-to-previous-flow-box-fill-hover;
}

.d3-back-to-previous-flow-text {
font-size: 14px;
font-weight: 400;
fill: $back-to-previous-flow-box-color;
}

.d3-back-to-previous-flow-box, .d3-back-to-previous-flow-text {
cursor: pointer;
}

/* Ghost div and node used when dragging a node from the palette */

.d3-ghost-div {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
LINK_TYPE_CURVE, LINK_TYPE_ELBOW, LINK_TYPE_STRAIGHT,
LINK_DIR_LEFT_RIGHT, LINK_DIR_TOP_BOTTOM, LINK_DIR_BOTTOM_TOP,
LINK_SELECTION_NONE, LINK_SELECTION_HANDLES, LINK_SELECTION_DETACHABLE,
CONTEXT_MENU_BUTTON, DEC_LINK, DEC_NODE, LEFT_ARROW_ICON, EDIT_ICON,
CONTEXT_MENU_BUTTON, DEC_LINK, DEC_NODE, EDIT_ICON,
NODE_MENU_ICON, SUPER_NODE_EXPAND_ICON, PORT_OBJECT_IMAGE,
TIP_TYPE_NODE, TIP_TYPE_PORT, TIP_TYPE_DEC, TIP_TYPE_LINK,
USE_DEFAULT_ICON, USE_DEFAULT_EXT_ICON,
Expand Down Expand Up @@ -156,15 +156,6 @@ export default class SVGCanvasRenderer {
this.zoomUtils.restoreZoom();
}

// Show the 'Back to Parent' control, if we are showing a sub-flow
// in full screen mode or, the alwaysDisplayBackToParentFlow option is
// switched on to always display it (used by apps that manage their own
// supernodes/sub-flows).
if (this.dispUtils.isDisplayingSubFlowFullPage() ||
this.canvasLayout.alwaysDisplayBackToParentFlow) {
this.addBackToParentFlowArrow(this.canvasSVG);
}

// If we are showing a sub-flow in full screen mode and there
// is no saved zoom for this pipeline, zoom it to fit the
// screen so it looks similar to the in-place sub-flow view.
Expand Down Expand Up @@ -1386,50 +1377,6 @@ export default class SVGCanvasRenderer {
}
}

addBackToParentFlowArrow(canvasSVG) {
const g = canvasSVG
.append("g")
.attr("transform", "translate(15, 15)")
.on("mouseenter", function(d3Event, d) { // Use function keyword so 'this' pointer references the DOM text object
d3.select(this).select("rect")
.attr("data-pointer-hover", "yes");
})
.on("mouseleave", function(d3Event, d) { // Use function keyword so 'this' pointer references the DOM text object
d3.select(this).select("rect")
.attr("data-pointer-hover", "no");
})
.on("mousedown mouseup", (d3Event) => {
// Prevent mouse events going through to the canvas. This prevents
// a drag gesture on the button activating the canvas drag action.
CanvasUtils.stopPropagationAndPreventDefault(d3Event);
})
.on("click", (d3Event) => {
CanvasUtils.stopPropagationAndPreventDefault(d3Event);
this.canvasController.displayPreviousPipeline();
});

g.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 210)
.attr("height", 40)
.attr("class", "d3-back-to-previous-flow-box");

g.append("svg")
.attr("x", 16)
.attr("y", 11)
.attr("width", 16)
.attr("height", 16)
.html(LEFT_ARROW_ICON)
.attr("class", "d3-back-to-previous-flow-text");

g.append("text")
.attr("x", 40)
.attr("y", 24)
.attr("class", "d3-back-to-previous-flow-text")
.text("Return to previous flow");
}

createDropShadow(defs) {
var dropShadowFilter = defs.append("filter")
.attr("id", this.getId("node_drop_shadow"))
Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/harness/cypress/support/canvas/node-cmds.js
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,7 @@ Cypress.Commands.add("clickExpansionIconOfSupernodeInsideSupernode", (supernodeN

Cypress.Commands.add("clickReturnToPreviousButton", () => {
cy.get("#canvas-div-0")
.find(".d3-back-to-previous-flow-text")
.find(".return-to-previous")
.eq(0)
.click();
});
Expand Down

0 comments on commit 844562f

Please sign in to comment.