@elyra/canvas 12.9.0 → 12.10.2

package/src/palette/palette-dialog-topbar.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/palette/palette-dialog.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -545,6 +545,7 @@ class PaletteDialog extends React.Component {
 					<PaletteDialogContent paletteJSON={this.props.paletteJSON}
 						showGrid={this.state.showGrid}
 						canvasController={this.props.canvasController}
+						isEditingEnabled={this.props.isEditingEnabled}
 					/>
 				</div>
 			</nav>
@@ -557,7 +558,8 @@ PaletteDialog.propTypes = {
 	paletteJSON: PropTypes.object.isRequired,
 	showPalette: PropTypes.bool.isRequired,
 	parentDivId: PropTypes.string.isRequired,
-	canvasController: PropTypes.object.isRequired
+	canvasController: PropTypes.object.isRequired,
+	isEditingEnabled: PropTypes.bool.isRequired
 };
 
 export default injectIntl(PaletteDialog);

package/src/palette/palette-flyout-content-category.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/palette/palette-flyout-content-filtered-list.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -54,6 +54,7 @@ class PaletteFlyoutContentFilteredList extends React.Component {
 						isShowRanking={this.props.isShowRanking}
 						canvasController={this.props.canvasController}
 						isPaletteOpen={this.props.isPaletteOpen}
+						isEditingEnabled={this.props.isEditingEnabled}
 					/>
 				</div>
 			);
@@ -86,6 +87,7 @@ PaletteFlyoutContentFilteredList.propTypes = {
 	nodeTypeInfos: PropTypes.array.isRequired,
 	canvasController: PropTypes.object.isRequired,
 	isPaletteOpen: PropTypes.bool.isRequired,
+	isEditingEnabled: PropTypes.bool.isRequired,
 	isNodeTypeInfosArrayTruncated: PropTypes.bool,
 	isShowRanking: PropTypes.bool
 };

package/src/palette/palette-flyout-content-search.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/palette/palette-flyout-content.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -16,7 +16,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import debounce from "lodash/debounce";
+import { debounce } from "lodash";
 import { getFilteredNodeTypeInfos } from "./palette-flyout-utils.js";
 import PaletteFlyoutContentCategory from "./palette-flyout-content-category.jsx";
 import PaletteFlyoutContentSearch from "./palette-flyout-content-search.jsx";
@@ -86,6 +86,7 @@ class PaletteFlyoutContent extends React.Component {
 						canvasController={this.props.canvasController}
 						isPaletteOpen={this.props.isPaletteOpen}
 						isLastCategory={isLastCategory}
+						isEditingEnabled={this.props.isEditingEnabled}
 					/>);
 			}
 
@@ -125,6 +126,7 @@ class PaletteFlyoutContent extends React.Component {
 				nodeTypeInfos={filteredNodeTypeInfos}
 				canvasController={this.props.canvasController}
 				isPaletteOpen={this.props.isPaletteOpen}
+				isEditingEnabled={this.props.isEditingEnabled}
 				// isShowRanking // Uncomment this to show ranking for debuggig ranking algorithm
 				isNodeTypeInfosArrayTruncated={isNodeTypeInfosArrayTruncated}
 			/>);
@@ -185,7 +187,8 @@ class PaletteFlyoutContent extends React.Component {
 PaletteFlyoutContent.propTypes = {
 	paletteJSON: PropTypes.object.isRequired,
 	canvasController: PropTypes.object.isRequired,
-	isPaletteOpen: PropTypes.bool.isRequired
+	isPaletteOpen: PropTypes.bool.isRequired,
+	isEditingEnabled: PropTypes.bool.isRequired
 };
 
 export default PaletteFlyoutContent;

package/src/palette/palette-flyout-utils.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import has from "lodash/has";
+import { has } from "lodash";
 
 // The entry point to this utils file.
 // Returns a filtered, ranked array of nodeTypeInfo objects for the nodeTypes
@@ -68,7 +68,7 @@ function getOccurrences(nodeType, category, filterStrings) {
 // Returns the occurences and hit counts info for the label of the category
 // passed in based on the filterStrings.
 function getCategoryLabelInfo(category, filterStrings) {
-	const catLabel = has(category, "label")
+	const catLabel = has(category, "label") && category.label
 		? category.label.toLowerCase()
 		: "";
 	const { occurrences, hitCounts } = wordOccurrences(catLabel, filterStrings);
@@ -78,7 +78,7 @@ function getCategoryLabelInfo(category, filterStrings) {
 // Returns the occurences and hit counts info for the label of the node
 // passed in based on the filterStrings.
 function getNodeLabelInfo(nodeType, filterStrings) {
-	const nodeLabel = has(nodeType, "app_data.ui_data.label")
+	const nodeLabel = has(nodeType, "app_data.ui_data.label") && nodeType.app_data.ui_data.label
 		? nodeType.app_data.ui_data.label.toLowerCase()
 		: "";
 	const { occurrences, hitCounts } = wordOccurrences(nodeLabel, filterStrings);
@@ -88,7 +88,7 @@ function getNodeLabelInfo(nodeType, filterStrings) {
 // Returns the occurences and hit counts info for the description of the node
 // passed in based on the filterStrings.
 function getNodeDescInfo(nodeType, filterStrings) {
-	const desc = has(nodeType, "app_data.ui_data.description")
+	const desc = has(nodeType, "app_data.ui_data.description") && nodeType.app_data.ui_data.description
 		? nodeType.app_data.ui_data.description.toLowerCase()
 		: "";
 	const { occurrences, hitCounts } = wordOccurrences(desc, filterStrings);

package/src/palette/palette-flyout.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -45,6 +45,7 @@ class PaletteFlyout extends React.Component {
 						paletteJSON={this.props.paletteJSON}
 						canvasController={this.props.canvasController}
 						isPaletteOpen={this.props.showPalette}
+						isEditingEnabled={this.props.isEditingEnabled}
 					/>
 				</div>
 			</nav>
@@ -57,7 +58,8 @@ PaletteFlyout.propTypes = {
 	paletteJSON: PropTypes.object.isRequired,
 	showPalette: PropTypes.bool.isRequired,
 	enableNarrowPalette: PropTypes.bool.isRequired,
-	canvasController: PropTypes.object.isRequired
+	canvasController: PropTypes.object.isRequired,
+	isEditingEnabled: PropTypes.bool.isRequired
 };
 
 export default injectIntl(PaletteFlyout);

package/src/palette/palette.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2021 Elyra Authors
+ * Copyright 2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -42,6 +42,7 @@ class Palette extends React.Component {
 				paletteJSON={this.props.paletteJSON}
 				showPalette={this.props.showPalette}
 				canvasController={this.props.canvasController}
+				isEditingEnabled={this.props.isEditingEnabled}
 			/>);
 		} else if (this.props.enablePaletteLayout === PALETTE_LAYOUT_MODAL) {
 			palette = (<PaletteDialog
@@ -49,6 +50,7 @@ class Palette extends React.Component {
 				showPalette={this.props.showPalette}
 				parentDivId={this.props.containingDivId}
 				canvasController={this.props.canvasController}
+				isEditingEnabled={this.props.isEditingEnabled}
 			/>);
 		}
 
@@ -65,12 +67,14 @@ Palette.propTypes = {
 	enablePaletteLayout: PropTypes.string,
 	enableNarrowPalette: PropTypes.bool,
 	paletteJSON: PropTypes.object,
-	showPalette: PropTypes.bool
+	showPalette: PropTypes.bool,
+	isEditingEnabled: PropTypes.bool
 };
 
 const mapStateToProps = (state, ownProps) => ({
 	enablePaletteLayout: state.canvasconfig.enablePaletteLayout,
 	enableNarrowPalette: state.canvasconfig.enableNarrowPalette,
+	isEditingEnabled: state.canvasconfig.enableEditingActions,
 	paletteJSON: state.palette.content,
 	// TODO - No need to do this when paletteInitialState is removed
 	showPalette: typeof state.palette.isOpen === "undefined" ? false : state.palette.isOpen

package/src/palette/palette.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/toolbar/toolbar-action-item.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -133,7 +133,7 @@ class ToolbarActionItem extends React.Component {
 	}
 
 	wrapInTooltip(content) {
-		if (!this.props.overflow && (this.props.actionObj.label || this.props.actionObj.tooltip)) {
+		if (!this.props.overflow && (this.showLabelAsTip(this.props.actionObj) || this.props.actionObj.tooltip)) {
 			const actionName = this.generateActionName();
 			const tipText = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;
 			const tooltipId = actionName + "-" + this.props.instanceId + "-tooltip";
@@ -148,6 +148,20 @@ class ToolbarActionItem extends React.Component {
 		return content;
 	}
 
+	// Returns true if the label should be shown as a tooltip or false if not.
+	// We do not show the label as a tooltip if it is already shown in the
+	// toolbar next to the icon (i.e. incLabelWithIcon is set to something).
+	showLabelAsTip(actionObj) {
+		if (actionObj.label) {
+			if (actionObj.incLabelWithIcon === "before" ||
+					actionObj.incLabelWithIcon === "after") {
+				return false;
+			}
+			return true;
+		}
+		return false;
+	}
+
 	render() {
 		const actionObj = this.props.actionObj;
 		const actionName = this.generateActionName();
@@ -167,7 +181,7 @@ class ToolbarActionItem extends React.Component {
 				"toolbar-item": !this.props.overflow && !actionObj.jsx,
 				"toolbar-jsx-item": !this.props.overflow && actionObj.jsx,
 				"toolbar-overflow-jsx-item": this.props.overflow && actionObj.jsx,
-				"associated-panel-selected": actionObj.action === this.props.associatedPanelAction && this.props.isAssociatedPanelOpen },
+				"toolbar-item-selected": actionObj.isSelected },
 			kindAsClass,
 			actionName);
 
@@ -199,6 +213,7 @@ ToolbarActionItem.propTypes = {
 		className: PropTypes.string,
 		textContent: PropTypes.string,
 		iconTypeOverride: PropTypes.string,
+		isSelected: PropTypes.bool,
 		kind: PropTypes.string,
 		jsx: PropTypes.object,
 		tooltip: PropTypes.oneOfType([
@@ -209,9 +224,7 @@ ToolbarActionItem.propTypes = {
 	toolbarActionHandler: PropTypes.func.isRequired,
 	instanceId: PropTypes.number.isRequired,
 	overflow: PropTypes.bool,
-	onFocus: PropTypes.func,
-	isAssociatedPanelOpen: PropTypes.bool,
-	associatedPanelAction: PropTypes.string
+	onFocus: PropTypes.func
 };
 
 export default ToolbarActionItem;

package/src/toolbar/toolbar-divider-item.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/toolbar/toolbar-overflow-item.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/toolbar/toolbar.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -209,8 +209,6 @@ class Toolbar extends React.Component {
 						overflow={overflow}
 						instanceId={this.props.instanceId}
 						onFocus={this.onFocus}
-						isAssociatedPanelOpen={this.props.isAssociatedPanelOpen}
-						associatedPanelAction={this.props.associatedPanelAction}
 					/>
 				);
 			}
@@ -306,9 +304,7 @@ Toolbar.propTypes = {
 	config: PropTypes.object.isRequired,
 	instanceId: PropTypes.number,
 	toolbarActionHandler: PropTypes.func,
-	additionalText: PropTypes.object,
-	isAssociatedPanelOpen: PropTypes.bool,
-	associatedPanelAction: PropTypes.string
+	additionalText: PropTypes.object
 };
 
 export default injectIntl(Toolbar);

package/src/toolbar/toolbar.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -212,7 +212,7 @@ $toolbar-divider-width: 1px;
 	padding: 0;
 }
 
-.associated-panel-selected {
+.toolbar-item-selected {
 	&.default,
 	&.ghost {
 		& button {

package/src/tooltip/tooltip.jsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2021 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

package/src/tooltip/tooltip.scss

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2020 Elyra Authors
+ * Copyright 2017-2022 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.