diff --git a/canvas_modules/common-canvas/src/object-model/redux/canvas-store.js b/canvas_modules/common-canvas/src/object-model/redux/canvas-store.js index b7c9bb108b..a662432f19 100644 --- a/canvas_modules/common-canvas/src/object-model/redux/canvas-store.js +++ b/canvas_modules/common-canvas/src/object-model/redux/canvas-store.js @@ -259,6 +259,10 @@ export default class CanavasStore { return this.cloneData(this.store.getState().tooltip); } + isLeftFlyoutOpen() { + return this.store.getState().leftflyout.isOpen; + } + isRightFlyoutOpen() { return this.store.getState().rightflyout.isOpen; } diff --git a/canvas_modules/common-canvas/src/palette/palette.scss b/canvas_modules/common-canvas/src/palette/palette.scss index c6012352af..9c74db85c6 100644 --- a/canvas_modules/common-canvas/src/palette/palette.scss +++ b/canvas_modules/common-canvas/src/palette/palette.scss @@ -52,6 +52,10 @@ $palette-search-container-height: 41px; } } +.palette-nav { + height: 100%; +} + .palette-flyout-content { position: absolute; // Needed to allow the scroll of categories/nodes to work. height: 100%; diff --git a/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx b/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx index 704ab3ef64..f183897f9e 100644 --- a/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx +++ b/canvas_modules/harness/src/client/components/custom-canvases/stages/stages-canvas.jsx @@ -13,12 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +/* eslint no-alert: "off" */ import React from "react"; import PropTypes from "prop-types"; import { CommonCanvas, CanvasController, Palette } from "common-canvas"; // eslint-disable-line import/no-unresolved +import { Button } from "@carbon/react"; import { Edit, OpenPanelFilledLeft, Search } from "@carbon/react/icons"; import MultiCommandPanel from "./multi-command-panel"; @@ -31,7 +33,8 @@ export default class StagesCanvas extends React.Component { super(props); this.state = { - leftFlyout: null + leftFlyout: null, + showLeftFlyout: false }; this.canvasController = new CanvasController(); @@ -52,12 +55,26 @@ export default class StagesCanvas extends React.Component { return { linkId: link.id, pipelineId: pId, decorations: decs }; }); this.canvasController.setLinksMultiDecorations(pipelineLinkDecorations); + + // Palette header object - used in a real application to open an asset browser. + this.paletteHeader = ( +
+ +
+ ); } getToolbarConfig() { + // The code below can be used if flipping between the two palette icons with the arrow is needed + // const icon = this.state.showLeftFlyout ? () : (); + + const icon = (); + const toolbarConfig = { leftBar: [ - { action: "left-flyout-palette", enable: true, iconEnabled: () }, + { action: "left-flyout-palette", enable: true, iconEnabled: icon }, { action: "left-flyout-search", enable: true, iconEnabled: () }, { divider: true }, { action: "undo", @@ -114,6 +131,7 @@ export default class StagesCanvas extends React.Component { enableMarkdownInComments: true, enableContextToolbar: true, enableResizableNodes: true, + enablePaletteHeader: this.paletteHeader, tipConfig: { palette: true, nodes: true, @@ -210,18 +228,18 @@ export default class StagesCanvas extends React.Component { editActionHandler(data, command) { if (data.editType === "left-flyout-palette") { if (this.state.leftFlyout === "palette") { - this.setState({ leftFlyout: null }); + this.setState({ leftFlyout: null, showLeftFlyout: false }); } else { - this.setState({ leftFlyout: "palette" }); + this.setState({ leftFlyout: "palette", showLeftFlyout: true }); } } else if (data.editType === "left-flyout-search") { if (this.state.leftFlyout === "search") { - this.setState({ leftFlyout: null }); + this.setState({ leftFlyout: null, showLeftFlyout: false }); } else { - this.setState({ leftFlyout: "search" }); + this.setState({ leftFlyout: "search", showLeftFlyout: true }); } } else if (data.editType === "linkNodes") { @@ -282,15 +300,12 @@ export default class StagesCanvas extends React.Component { const config = this.getConfig(); const toolbarConfig = this.getToolbarConfig(); - let showLeftFlyout = false; let leftFlyoutContent = null; if (this.state.leftFlyout === "palette") { - showLeftFlyout = true; leftFlyoutContent = (); } else if (this.state.leftFlyout === "search") { - showLeftFlyout = true; leftFlyoutContent = (
This panel could contain Search controls to provde a sophisticated search experience. @@ -306,7 +321,7 @@ export default class StagesCanvas extends React.Component { contextMenuHandler={this.contextMenuHandler} toolbarConfig={toolbarConfig} config={config} - showLeftFlyout={showLeftFlyout} + showLeftFlyout={this.state.showLeftFlyout} leftFlyoutContent={leftFlyoutContent} /> );