@elyra/canvas 12.12.3 → 12.13.0

package/src/common-properties/form/EditorForm.js

@@ -88,7 +88,7 @@ class ControlPanel {
 }
 
 class ActionPanel {
-	constructor(id, panelType, className, nestedPanel, actions) {
+	constructor(id, panelType, className, nestedPanel, actions, label, description) {
 		this.id = id;
 		this.panelType = panelType;
 		this.nestedPanel = nestedPanel;
@@ -96,6 +96,12 @@ class ActionPanel {
 		if (className) {
 			this.className = className;
 		}
+		if (label) {
+			this.label = label;
+		}
+		if (description) {
+			this.description = description;
+		}
 	}
 }
 
@@ -201,12 +207,24 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata
 		return UIItem.makePanel(new ControlPanel(groupName, PanelType.SUMMARY, groupClassName, nestedPanel, panSubItems, groupLabel));
 	}
 	case GroupType.ACTION_PANEL: {
+		groupLabel = l10nProvider.l10nResource(group.label);
+		let groupDesc;
+		if (group.description) {
+			groupDesc = new Description(l10nProvider.l10nResource(group.description),
+				null,
+				group.description ? group.description.link : null);
+		}
 		return UIItem.makePanel(new ActionPanel(groupName, PanelType.ACTION_PANEL, groupClassName, nestedPanel,
-			_makeActions(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider)));
+			_makeActions(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider), groupLabel, groupDesc));
 	}
 	case GroupType.TEXT_PANEL: {
 		groupLabel = l10nProvider.l10nResource(group.label);
-		const groupDesc = l10nProvider.l10nResource(group.description);
+		let groupDesc;
+		if (group.description) {
+			groupDesc = new Description(l10nProvider.l10nResource(group.description),
+				group.description ? group.description.placement : null,
+				group.description ? group.description.link : null);
+		}
 		return UIItem.makeTextPanel(groupName, groupLabel, groupDesc, groupClassName, nestedPanel);
 	}
 	case GroupType.TWISTY_PANEL: {

package/src/common-properties/panels/action-panel/action-panel.jsx

@@ -19,22 +19,57 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import classNames from "classnames";
 import * as ControlUtils from "./../../util/control-utils";
-import { STATES } from "./../../constants/constants";
+import { STATES, CARBON_ICONS } from "./../../constants/constants";
+import { evaluateText } from "./../../util/property-utils.js";
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import Icon from "./../../../icons/icon.jsx";
+import { isEmpty } from "lodash";
 
 class ActionPanel extends Component {
 	render() {
 		const className = this.props.panel.className ? this.props.panel.className : "";
+		const hidden = this.props.panelState === STATES.HIDDEN;
+		const disabled = this.props.panelState === STATES.DISABLED;
+		let label;
+		if (this.props.panel.label) {
+			let tooltip;
+			if (this.props.panel.description && !isEmpty(this.props.panel.description.text)) {
+				const dynamicDescriptionText = evaluateText(this.props.panel.description.text, this.props.controller);
+				// If tooltip has a link, add propertyId in the link object
+				if (this.props.panel.description.link) {
+					this.props.panel.description.link.propertyId = { name: this.props.panel.id };
+				}
+				tooltip = (<Tooltip
+					id={`tooltip-label-${this.props.panel.id}`}
+					tip={dynamicDescriptionText}
+					link={this.props.panel.description.link ? this.props.panel.description.link : null}
+					tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
+					direction="bottom"
+					disable={hidden || disabled}
+					showToolTipOnClick
+				>
+					<Icon type={CARBON_ICONS.INFORMATION} className="properties-control-description-icon-info" />
+				</Tooltip>);
+			}
+			label = (
+				<div className={classNames("properties-label-container")}>
+					<label className="properties-control-label">{this.props.panel.label}</label>
+					{tooltip}
+				</div>
+			);
+		}
 		return (
 			<div
 				className={classNames(
 					"properties-action-panel",
-					{ "hide": this.props.panelState === STATES.HIDDEN },
+					{ "hide": hidden },
 					{ "properties-control-nested-panel": this.props.panel.nestedPanel },
 					className
 				)}
 				data-id={ControlUtils.getDataId({ name: this.props.panel.id })}
-				disabled={this.props.panelState === STATES.DISABLED}
+				disabled={disabled}
 			>
+				{label}
 				{this.props.children}
 			</div>);
 	}

package/src/common-properties/panels/action-panel/action-panel.scss

@@ -18,6 +18,9 @@
 	display: flex;
 	flex-wrap: wrap;
 	padding-bottom: $spacing-03;
+	.properties-label-container {
+		width: 100%;
+	}
 	&:last-child {
 		padding-bottom: $spacing-06; // (24px + 16px outer padding)
 	}

package/src/common-properties/panels/text-panel/text-panel.jsx

@@ -19,24 +19,55 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { evaluateText } from "./../../util/property-utils.js";
 import classNames from "classnames";
-import { STATES } from "./../../constants/constants";
+import { STATES, CARBON_ICONS } from "./../../constants/constants";
+import { isEmpty } from "lodash";
+import Tooltip from "./../../../tooltip/tooltip.jsx";
+import Icon from "./../../../icons/icon.jsx";
 
 class TextPanel extends Component {
 	render() {
 		const className = this.props.panel.className ? this.props.panel.className : "";
-		const label = this.props.panel.label ? (<div className="panel-label">{this.props.panel.label}</div>) : null;
-		const description = this.props.panel.description
-			? (<div className="panel-description">{evaluateText(this.props.panel.description, this.props.controller)}</div>)
-			: null;
+		const hidden = this.props.panelState === STATES.HIDDEN;
+		const disabled = this.props.panelState === STATES.DISABLED;
+		let label = this.props.panel.label ? (<div className="panel-label">{this.props.panel.label}</div>) : null;
+		let description;
+		if (this.props.panel.description && !isEmpty(this.props.panel.description.text)) {
+			const dynamicDescriptionText = evaluateText(this.props.panel.description.text, this.props.controller);
+			if (this.props.panel.description.placement === "as_tooltip") {
+				// If tooltip has a link, add propertyId in the link object
+				if (this.props.panel.description.link) {
+					this.props.panel.description.link.propertyId = { name: this.props.panel.id };
+				}
+				const tooltip = (<Tooltip
+					id={`tooltip-label-${this.props.panel.id}`}
+					tip={dynamicDescriptionText}
+					link={this.props.panel.description.link ? this.props.panel.description.link : null}
+					tooltipLinkHandler={this.props.controller.getHandlers().tooltipLinkHandler}
+					direction="bottom"
+					disable={hidden || disabled}
+					showToolTipOnClick
+				>
+					<Icon type={CARBON_ICONS.INFORMATION} className="properties-control-description-icon-info" />
+				</Tooltip>);
+				label = (
+					<div className={classNames("properties-label-container")}>
+						{label}
+						{tooltip}
+					</div>
+				);
+			} else {
+				description = <div className="panel-description">{dynamicDescriptionText}</div>;
+			}
+		}
 		return (
 			<div
 				className={classNames(
 					"properties-text-panel",
-					{ "hide": this.props.panelState === STATES.HIDDEN },
+					{ "hide": hidden },
 					{ "properties-control-nested-panel": this.props.panel.nestedPanel },
 					className
 				)}
-				disabled={this.props.panelState === STATES.DISABLED}
+				disabled={disabled}
 			>
 				{label}
 				{description}

package/src/common-properties/panels/text-panel/text-panel.scss

@@ -15,9 +15,6 @@
  */
 
 .properties-text-panel {
-	:not(:empty) {
-		padding-bottom: $spacing-05;
-	}
 	.panel-label {
 		@include carbon--type-style("productive-heading-01");
 		color: $text-01;
@@ -26,6 +23,10 @@
 	.panel-description {
 		@include carbon--type-style("body-short-01");
 		color: $text-01;
+		padding-bottom: $spacing-05;
+	}
+	.tooltip-container {
+		margin-bottom: $spacing-03;
 	}
 	&[disabled] {
 		opacity: 0.5;

package/src/common-properties/properties-controller.js

@@ -1346,7 +1346,8 @@ export default class PropertiesController {
 		// don't return hidden message
 		if (filterHiddenDisable) {
 			const controlState = this.getControlState(propertyId);
-			if (controlState === STATES.DISABLED || controlState === STATES.HIDDEN) {
+			const controlType = this.getControlType(propertyId);
+			if (controlState === STATES.DISABLED || controlState === STATES.HIDDEN || controlType === ControlType.HIDDEN) {
 				return null;
 			}
 		}
@@ -1444,7 +1445,8 @@ export default class PropertiesController {
 	_filterHiddenDisabledErrors(messages) {
 		const filterCondition = (testMessage, propertyId) => {
 			const controlState = this.getControlState(propertyId);
-			return controlState !== "hidden" && controlState !== "disabled";
+			const controlType = this.getControlType(propertyId);
+			return controlState !== STATES.HIDDEN && controlState !== STATES.DISABLED && controlType !== ControlType.HIDDEN;
 		};
 		const filteredMessages = this._filterErrors(messages, filterCondition);
 		return filteredMessages;
@@ -1632,6 +1634,9 @@ export default class PropertiesController {
 	}
 
 	getControlType(propertyId) {
+		if (typeof propertyId === "undefined") {
+			return null;
+		}
 		const control = this.getControl(propertyId);
 		if (control) {
 			return control.controlType;
@@ -1639,6 +1644,15 @@ export default class PropertiesController {
 		return null;
 	}
 
+	// check if given column is visible in the table
+	getColumnVisibility(propertyId, columnIndex) {
+		return this.controls[propertyId.name][columnIndex].visible;
+	}
+
+	toggleColumnVisibility(propertyId, columnIndex, value) {
+		this.controls[propertyId.name][columnIndex].visible = value;
+	}
+
 	/*
 	* Summary Panel controls Methods
 	*/

package/src/common-properties/ui-conditions/conditions-utils.js

@@ -423,7 +423,7 @@ function updatePanelChildrenStatesForPanelIds(panelIds, controller) {
 * @param {object} propertyId. required.
 * @param {string} proposed new state value. required.
 */
-function updateState(refState, propertyId, value) {
+function updateState(refState, propertyId, value, controller) {
 	let propState = refState[propertyId.name];
 	if (!propState) {
 		propState = {};
@@ -452,6 +452,12 @@ function updateState(refState, propertyId, value) {
 		} else {
 			// Table column level
 			propState[colId].value = newPropState.value;
+			// if all cells are "hidden", hide an entire column
+			const hideColumn = (value === "hidden");
+			const updateColumnVisibility = controller.getColumnVisibility(propertyId, propertyId.col) !== !hideColumn;
+			if (typeof controller !== "undefined" && updateColumnVisibility) {
+				controller.toggleColumnVisibility(propertyId, propertyId.col, !hideColumn);
+			}
 		}
 	} else {
 		// Control level
@@ -841,10 +847,10 @@ function _updateRefsState(stateOn, definition, propertyId, newStates, controller
 			}
 		} else if (stateOn === true) { // control|panel should be visible || enabled
 			if (referenceId && currentState !== newOnState && currentState !== notAllowedState) {
-				updateState(refStates, referenceId, newOnState);
+				updateState(refStates, referenceId, newOnState, controller);
 			}
 		} else if (referenceId && (visibleControl || (!visibleControl && currentState !== notAllowedState))) {
-			_updateStateIfPanel(newStates, referenceId, newOffState, refStates);
+			_updateStateIfPanel(newStates, referenceId, newOffState, refStates, controller);
 		}
 	}
 }
@@ -975,7 +981,7 @@ function _updateStateIfParent(newStates, panel, state, controller, referenceId)
 }
 
 // A control can only set a state to enabled if it was previously disabled. The same applies to hidden and visible
-function _updateStateIfPanel(newStates, referenceId, state, refStates) {
+function _updateStateIfPanel(newStates, referenceId, state, refStates, controller) {
 	const controlName = referenceId.name;
 	if (refStates[controlName]) {
 		let prevValue = refStates[controlName].value;
@@ -985,10 +991,10 @@ function _updateStateIfPanel(newStates, referenceId, state, refStates) {
 				if (typeof referenceId.row !== "undefined" && refStates[controlName][referenceId.col][referenceId.row]) {
 					prevValue = refStates[controlName][referenceId.col][referenceId.row].value;
 				} else { // first time setting control state for each row in the column
-					updateState(refStates, referenceId, state);
+					updateState(refStates, referenceId, state, controller);
 				}
 			} else { // first time setting control state for the column
-				updateState(refStates, referenceId, state);
+				updateState(refStates, referenceId, state, controller);
 			}
 		}
 		// Can only set a state to enabled if it was previously disabled. The same applies to hidden and visible
@@ -996,10 +1002,10 @@ function _updateStateIfPanel(newStates, referenceId, state, refStates) {
 				(prevValue === STATES.DISABLED && state === STATES.ENABLED) ||
 				(prevValue === STATES.DISABLED && state === STATES.HIDDEN) ||
 				(prevValue === STATES.HIDDEN && state === STATES.VISIBLE)) {
-			updateState(refStates, referenceId, state);
+			updateState(refStates, referenceId, state, controller);
 		}
 	} else { // first time setting control state
-		updateState(refStates, referenceId, state);
+		updateState(refStates, referenceId, state, controller);
 	}
 }
 

package/src/palette/palette-content-list-item.jsx

@@ -47,6 +47,7 @@ class PaletteContentListItem extends React.Component {
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
 		this.onMouseDown = this.onMouseDown.bind(this);
+		this.onKeyPress = this.onKeyPress.bind(this);
 	}
 
 	onMouseDown() {
@@ -73,6 +74,13 @@ class PaletteContentListItem extends React.Component {
 		}
 	}
 
+	onKeyPress(e) {
+		// e.key === " " is needed to allow Cypress test in palette.js to run on the build machine!
+		if (e.key === " " || e.code === "Space" || e.keyCode === 32) {
+			this.onDoubleClick();
+		}
+	}
+
 	// This is needed in-case the drag ends somewhere other than the canvas area.
 	onDragEnd() {
 		this.props.canvasController.nodeTemplateDragEnd();
@@ -289,23 +297,25 @@ class PaletteContentListItem extends React.Component {
 			: null;
 
 		const nodeLabel = itemText
-			? <div className="palette-list-item-text-div">{itemText}</div>
+			? <div className="palette-list-item-text-div" tabIndex="-1">{itemText}</div>
 			: null;
 
 		return (
 			<div id={this.props.nodeTypeInfo.nodeType.id}
 				data-id={this.props.nodeTypeInfo.nodeType.op}
+				tabIndex={0}
 				draggable={draggable}
 				className={mainDivClass}
 				onMouseOver={this.onMouseOver}
 				onMouseLeave={this.onMouseLeave}
+				onKeyPress={this.props.isEditingEnabled ? this.onKeyPress : null}
 				onMouseDown={this.props.isEditingEnabled ? this.onMouseDown : null}
 				onDragStart={this.props.isEditingEnabled ? this.onDragStart : null}
 				onDragEnd={this.props.isEditingEnabled ? this.onDragEnd : null}
 				onDoubleClick={this.props.isEditingEnabled ? this.onDoubleClick : null}
 			>
 				{categoryLabel}
-				<div className="palette-list-item-icon-and-text">
+				<div className="palette-list-item-icon-and-text" tabIndex="-1">
 					{icon}
 					{nodeLabel}
 					{ranking}

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

@@ -38,6 +38,7 @@ class PaletteContentList extends React.Component {
 						isDisplaySearchResult={false}
 						canvasController={this.props.canvasController}
 						isPaletteOpen={this.props.isPaletteOpen}
+						isEditingEnabled={this.props.isEditingEnabled}
 					/>
 				</div>
 			);
@@ -46,27 +47,20 @@ class PaletteContentList extends React.Component {
 				var itemKey = "item_" + idx;
 
 				contentItems.push(
-					<div key={itemKey}>
-						<PaletteContentListItem
-							nodeTypeInfo={this.props.nodeTypeInfos[idx]}
-							isDisplaySearchResult={false}
-							canvasController={this.props.canvasController}
-							isPaletteOpen={this.props.isPaletteOpen}
-							isEditingEnabled={this.props.isEditingEnabled}
-						/>
-					</div>
+					<PaletteContentListItem
+						key={itemKey}
+						nodeTypeInfo={this.props.nodeTypeInfos[idx]}
+						isDisplaySearchResult={false}
+						canvasController={this.props.canvasController}
+						isPaletteOpen={this.props.isPaletteOpen}
+						isEditingEnabled={this.props.isEditingEnabled}
+					/>
 				);
 			}
 		}
 
-		const style = {};
-		style.borderBottom = this.props.isLastCategory ? "none" : null;
-		style.display = this.props.show ? "block" : "none";
-
 		return (
-			<div width="100%" draggable="false" className="palette-content-list palette-scroll"
-				style={ style }
-			>
+			<div width="100%" draggable="false" className="palette-content-list palette-scroll">
 				{contentItems}
 			</div>
 		);
@@ -76,11 +70,9 @@ class PaletteContentList extends React.Component {
 PaletteContentList.propTypes = {
 	category: PropTypes.object.isRequired,
 	nodeTypeInfos: PropTypes.array.isRequired,
-	show: PropTypes.bool.isRequired,
 	canvasController: PropTypes.object.isRequired,
 	isPaletteOpen: PropTypes.bool.isRequired,
-	isLastCategory: PropTypes.bool.isRequired,
-	isEditingEnabled: PropTypes.bool.isRequired
+	isEditingEnabled: PropTypes.bool.isRequired,
 };
 
 export default PaletteContentList;

package/src/palette/palette-dialog-content-grid.jsx

@@ -53,12 +53,8 @@ class PaletteDialogContentGrid extends React.Component {
 			}
 		}
 
-		const displayValue = this.props.show ? "block" : "none";
-
 		return (
-			<div width="100%" className="palette-scroll"
-				style={{ display: displayValue }}
-			>
+			<div width="100%" className="palette-scroll">
 				{gridNodes}
 			</div>
 		);
@@ -68,7 +64,6 @@ class PaletteDialogContentGrid extends React.Component {
 PaletteDialogContentGrid.propTypes = {
 	category: PropTypes.object.isRequired,
 	nodeTypes: PropTypes.array.isRequired,
-	show: PropTypes.bool.isRequired,
 	isEditingEnabled: PropTypes.bool.isRequired,
 	canvasController: PropTypes.object.isRequired
 };

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

@@ -80,27 +80,29 @@ class PaletteDialogContent extends React.Component {
 		const category = this.getSelectedCategory(this.props.paletteJSON.categories);
 		const nodeTypes = category && category.node_types ? category.node_types : [];
 		const nodeTypeInfos = nodeTypes.map((nt) =>	({ nodeType: nt, category: category }));
-
-		return (
-			<div className="palette-dialog-content" ref="palettecontent">
-				<PaletteDialogContentCategories categories={cats}
-					selectedCategory={this.state.selectedCategory}
-					categorySelectedMethod={this.categorySelected}
-				/>
-				<PaletteDialogContentGrid show={this.props.showGrid}
+		const content = this.props.showGrid
+			? (
+				<PaletteDialogContentGrid
 					category={category}
 					nodeTypes={nodeTypes}
 					canvasController={this.props.canvasController}
 					isEditingEnabled={this.props.isEditingEnabled}
-				/>
-				<PaletteContentList show={!this.props.showGrid}
+				/>)
+			: (
+				<PaletteContentList
 					category={category}
 					nodeTypeInfos={nodeTypeInfos}
 					canvasController={this.props.canvasController}
 					isPaletteOpen
-					isLastCategory={false}
 					isEditingEnabled={this.props.isEditingEnabled}
+				/>);
+		return (
+			<div className="palette-dialog-content" ref="palettecontent">
+				<PaletteDialogContentCategories categories={cats}
+					selectedCategory={this.state.selectedCategory}
+					categorySelectedMethod={this.categorySelected}
 				/>
+				{content}
 			</div>
 		);
 	}

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

@@ -17,10 +17,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { InlineLoading } from "carbon-components-react";
-import Icon from "../icons/icon.jsx";
 import SVG from "react-inlinesvg";
-import { TIP_TYPE_PALETTE_CATEGORY, CANVAS_CARBON_ICONS } from "../common-canvas/constants/canvas-constants.js";
+import { TIP_TYPE_PALETTE_CATEGORY } from "../common-canvas/constants/canvas-constants.js";
 import { get } from "lodash";
+import { AccordionItem } from "carbon-components-react";
+import PaletteContentList from "./palette-content-list.jsx";
+
 
 class PaletteFlyoutContentCategory extends React.Component {
 	constructor(props) {
@@ -63,7 +65,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 			description = this.props.category.loading_text;
 		}
 
-		const content = (
+		const titleLoadingObj = (
 			<div className="palette-flyout-category">
 				<div className="palette-flyout-category-item-loading">
 					<InlineLoading
@@ -78,22 +80,14 @@ class PaletteFlyoutContentCategory extends React.Component {
 				</div>
 			</div>
 		);
+
+		const content = (
+			<AccordionItem className="palette-loading-category" title={titleLoadingObj} />
+		);
 		return content;
 	}
 
 	getRenderCategory() {
-		let caretClassName = "palette-flyout-category-caret";
-		if (!this.props.isPaletteOpen) {
-			caretClassName += " palette-flyout-category-caret-closed"; // When palette is closed extra style
-		}
-
-		let caretImage = null;
-		if (this.props.itemCount > 0 || this.props.category.empty_text) {
-			caretImage = this.props.isCategorySelected
-				? <Icon type={CANVAS_CARBON_ICONS.CHEVRONARROWS.UP} className={caretClassName} />
-				: <Icon type={CANVAS_CARBON_ICONS.CHEVRONARROWS.DOWN} className={caretClassName} />;
-		}
-
 		let itemImage = null;
 		if (this.props.category.image && this.props.category.image !== "") {
 			if (this.props.category.image.endsWith(".svg")) {
@@ -131,8 +125,8 @@ class PaletteFlyoutContentCategory extends React.Component {
 				</span>
 			);
 		}
-
-		const content = (
+		const nodeTypeInfos = this.props.category.node_types.map((nt) => ({ nodeType: nt, category: this.props.category }));
+		const titleObj = (
 			<div className="palette-flyout-category"
 				data-id={get(this.props.category, "id", "")}
 				onClick={this.categorySelected}
@@ -143,11 +137,20 @@ class PaletteFlyoutContentCategory extends React.Component {
 				<div className="palette-flyout-category-item">
 					{itemImage}
 					{itemText}
-				</div>
-				{caretImage}
-			</div>
+				</div></div>
+		);
+		return (
+			<AccordionItem title={titleObj}>
+				<PaletteContentList
+					key={this.props.category.id + "-nodes"}
+					category={this.props.category}
+					nodeTypeInfos={nodeTypeInfos}
+					canvasController={this.props.canvasController}
+					isPaletteOpen={this.props.isPaletteOpen}
+					isEditingEnabled={this.props.isEditingEnabled}
+				/>
+			</AccordionItem>
 		);
-		return content;
 	}
 
 	categorySelected() {
@@ -168,11 +171,10 @@ class PaletteFlyoutContentCategory extends React.Component {
 
 PaletteFlyoutContentCategory.propTypes = {
 	category: PropTypes.object.isRequired,
-	isCategorySelected: PropTypes.bool.isRequired,
 	categorySelectedMethod: PropTypes.func.isRequired,
-	itemCount: PropTypes.number.isRequired,
 	canvasController: PropTypes.object.isRequired,
-	isPaletteOpen: PropTypes.bool.isRequired
+	isPaletteOpen: PropTypes.bool.isRequired,
+	isEditingEnabled: PropTypes.bool.isRequired,
 };
 
 export default PaletteFlyoutContentCategory;

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

@@ -20,9 +20,10 @@ 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";
-import PaletteContentList from "./palette-content-list.jsx";
 import PaletteFlyoutContentFilteredList from "./palette-flyout-content-filtered-list.jsx";
 import Logger from "../logging/canvas-logger.js";
+import { Accordion } from "carbon-components-react";
+
 
 const logger = new Logger("PaletteFlyoutContent");
 
@@ -71,41 +72,20 @@ class PaletteFlyoutContent extends React.Component {
 		const contentDivs = [];
 		for (let idx = 0; idx < categories.length; idx++) {
 			const category = categories[idx];
-			const isLastCategory = idx === categories.length - 1;
-			const nodeTypeInfos = category.node_types.map((nt) => ({ nodeType: nt, category: category }));
-			const isCategorySelected = this.isCategorySelected(category.id);
-
-			let content = null;
-			if (isCategorySelected) {
-				content = (
-					<PaletteContentList
-						key={category.label + "-nodes"}
-						show
-						category={category}
-						nodeTypeInfos={nodeTypeInfos}
-						canvasController={this.props.canvasController}
-						isPaletteOpen={this.props.isPaletteOpen}
-						isLastCategory={isLastCategory}
-						isEditingEnabled={this.props.isEditingEnabled}
-					/>);
-			}
-
 			contentDivs.push(
 				<div key={category.label + "-container"}>
 					<PaletteFlyoutContentCategory
 						key={category.id}
 						category={category}
-						isCategorySelected={isCategorySelected}
 						categorySelectedMethod={this.categorySelected}
-						itemCount={nodeTypeInfos.length}
 						canvasController={this.props.canvasController}
 						isPaletteOpen={this.props.isPaletteOpen}
+						isEditingEnabled={this.props.isEditingEnabled}
 					/>
-					{content}
 				</div>
 			);
 		}
-		return contentDivs;
+		return <Accordion>{contentDivs}</Accordion>;
 	}
 
 	getFilteredContentDivs(categories) {