#1703 Carbon 11, React 18, Webpack 5 for Elyra canvas (#1704)

canvas_modules/common-canvas/__tests__/_utils_/control-utils.js

@@ -20,7 +20,7 @@ function getDropdownItems(wrapper, parameterId) {
 	const dropdownButton = dropdownWrapper.find("button");
 	dropdownButton.simulate("click");
 	dropdownWrapper = wrapper.find(`div[data-id='properties-${parameterId}']`);
-	const dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item");
+	const dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item");
 	return dropdownList;
 }
 

canvas_modules/common-canvas/__tests__/_utils_/custom-components/CustomToggleCtrl.jsx

@@ -16,9 +16,8 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import Icon from "carbon-components-react/lib/components/Icon";
-import Toggle from "carbon-components-react/lib/components/Toggle";
-import ToggleSmall from "carbon-components-react/lib/components/ToggleSmall";
+import { WarningFilled, ErrorFilled } from "@carbon/react/icons";
+import { Toggle } from "@carbon/react";
 import { connect } from "react-redux";
 
 class CustomToggleCtrl extends React.Component {
@@ -43,9 +42,9 @@ class CustomToggleCtrl extends React.Component {
 		if (this.props.messageInfo && this.props.messageInfo.text && !this.props.table) {
 			messageText = this.props.messageInfo.text;
 			if (this.props.messageInfo.type === "warning") {
-				icon = (<Icon className="warning" name="warning--glyph" />);
+				icon = (<WarningFilled className="warning" />);
 			} else if (this.props.messageInfo.type === "error") {
-				icon = (<Icon className="error" name="error--glyph" />);
+				icon = (<ErrorFilled className="error" />);
 			}
 		}
 		let visibility;
@@ -71,7 +70,8 @@ class CustomToggleCtrl extends React.Component {
 			/>
 		);
 		if (this.props.table) {
-			toggle = (<ToggleSmall
+			toggle = (<Toggle
+				size="sm"
 				disabled={disabled}
 				id={id}
 				toggled={this.props.controlValue}

canvas_modules/common-canvas/__tests__/command-stack/command-stack.js

@@ -15,9 +15,6 @@
  */
 
 import { expect } from "chai";
-import chai from "chai";
-import chaiEnzyme from "chai-enzyme";
-chai.use(chaiEnzyme()); // Note the invocation at the end
 import CommandStack from "../../src/command-stack/command-stack.js";
 
 /* eslint no-console: ["error", { allow: ["warn", "error"] }] */

canvas_modules/common-canvas/__tests__/common-properties/actions/button-action-test.js

@@ -152,9 +152,9 @@ describe("action-button renders correctly", () => {
 		const button = wrapper.find("button");
 		expect(button).to.have.length(1);
 		// verify button kind is secondary
-		expect(button.prop("className").includes("bx--btn--secondary")).to.equal(true);
+		expect(button.prop("className").includes("cds--btn--secondary")).to.equal(true);
 		// verify button size is extra large
-		expect(button.prop("className").includes("bx--btn--xl")).to.equal(true);
+		expect(button.prop("className").includes("cds--btn--xl")).to.equal(true);
 	});
 	it("action button default kind is tertiary and size is small", () => {
 		const actionWithoutButtonObject = {
@@ -181,9 +181,9 @@ describe("action-button renders correctly", () => {
 		const button = wrapper.find("button");
 		expect(button).to.have.length(1);
 		// verify default button kind is tertiary
-		expect(button.prop("className").includes("bx--btn--tertiary")).to.equal(true);
+		expect(button.prop("className").includes("cds--btn--tertiary")).to.equal(true);
 		// verify default button size is small
-		expect(button.prop("className").includes("bx--btn--sm")).to.equal(true);
+		expect(button.prop("className").includes("cds--btn--sm")).to.equal(true);
 	});
 });
 

canvas_modules/common-canvas/__tests__/common-properties/components/editor-form-test.js

@@ -36,7 +36,7 @@ describe("tabs and subtabs should be rendered correctly", () => {
 		let category = wrapper.find("div[data-id='properties-Primary2']");
 		const subTabsContainer = category.find("div.properties-subtabs");
 		expect(subTabsContainer).to.have.length(1);
-		const subTabs = subTabsContainer.find("button.bx--tabs--scrollable__nav-link");
+		const subTabs = subTabsContainer.find("button.cds--tabs--scrollable__nav-link");
 		expect(subTabs).to.have.length(3);
 		subTabs.at(2).simulate("click");
 		category = wrapper.find("div[data-id='properties-Primary2']");
@@ -112,7 +112,7 @@ describe("controls should be rendered correctly when no uihints are provided", (
 		controller.updatePropertyValue({ name: "textfield" }, null);
 		wrapper.update();
 		// validate message is created
-		expect(wrapper.find(".bx--form-requirement")).to.have.length(1);
+		expect(wrapper.find(".cds--form-requirement")).to.have.length(1);
 		// valide no catagories(tabs) are created
 		expect(wrapper.find(".properties-categories")).to.have.length(0);
 	});

canvas_modules/common-canvas/__tests__/common-properties/components/flexibletable-test.js

@@ -21,15 +21,11 @@ import tableUtils from "./../../_utils_/table-utils";
 
 import { mountWithIntl } from "../../_utils_/intl-utils";
 import { expect } from "chai";
-import chai from "chai";
-import chaiEnzyme from "chai-enzyme";
 import sinon from "sinon";
 import fieldPickerParamDef from "./../../test_resources/paramDefs/fieldpicker_paramDef.json";
 import glmmParamDef from "./../../test_resources/paramDefs/glmm_paramDef.json";
 import propertyUtils from "../../_utils_/property-utils";
 
-chai.use(chaiEnzyme()); // Note the invocation at the end
-
 const controller = new Controller();
 
 const updateRowSelections = sinon.spy();

canvas_modules/common-canvas/__tests__/common-properties/components/moveabletablerows-test.js

@@ -19,13 +19,10 @@ import MoveableTableRows from "../../../src/common-properties/components/moveabl
 import FlexibleTable from "../../../src/common-properties/components/flexible-table";
 import { mountWithIntl } from "../../_utils_/intl-utils";
 import { expect } from "chai";
-import chai from "chai";
-import chaiEnzyme from "chai-enzyme";
 import sinon from "sinon";
 import propertyUtils from "../../_utils_/property-utils";
 import Controller from "../../../src/common-properties/properties-controller";
 
-chai.use(chaiEnzyme()); // Note the invocation at the end
 
 const handleRowClick = sinon.spy();
 const setScrollToRow = sinon.spy();

canvas_modules/common-canvas/__tests__/common-properties/components/title-editor-test.js

@@ -183,8 +183,8 @@ describe("title-editor renders correctly", () => {
 		expect(titleChangeHandler.calledWith(newTitle)).to.be.true;
 		// Verify warning message is displayed
 		const warningMessage = "Title exceeds 10 characters. This is a warning message. There is no restriction on message length. Height is adjusted for multi-line messages.";
-		expect(wrapper.find(".bx--text-input__field-wrapper--warning")).to.have.length(1);
-		expect(wrapper.find(".bx--form-requirement").text()).to.equal(warningMessage);
+		expect(wrapper.find(".cds--text-input__field-wrapper--warning")).to.have.length(1);
+		expect(wrapper.find(".cds--form-requirement").text()).to.equal(warningMessage);
 	});
 	it("Error message returned by titleChangeHandler should be displayed correctly", () => {
 		controller.setTitle("test title");
@@ -204,8 +204,8 @@ describe("title-editor renders correctly", () => {
 
 		// verify error message is displayed
 		const errorMessage = "Only 15 characters are allowed in title.";
-		expect(wrapper.find(".bx--text-input__field-wrapper[data-invalid=true]")).to.have.length(1);
-		expect(wrapper.find(".bx--form-requirement").text()).to.equal(errorMessage);
+		expect(wrapper.find(".cds--text-input__field-wrapper[data-invalid=true]")).to.have.length(1);
+		expect(wrapper.find(".cds--form-requirement").text()).to.equal(errorMessage);
 	});
 	it("Don't show any error/warning message when titleChangeHandler doesn't return anything", () => {
 		controller.setTitle("test title");
@@ -224,7 +224,7 @@ describe("title-editor renders correctly", () => {
 		expect(titleChangeHandler.calledWith(newTitle)).to.be.true;
 
 		// verify no message is displayed
-		expect(wrapper.find(".bx--form-requirement")).to.have.length(0);
+		expect(wrapper.find(".cds--form-requirement")).to.have.length(0);
 	});
 	it("Don't show any error/warning message when titleChangeHandler response is invalid", () => {
 		controller.setTitle("test title");
@@ -244,7 +244,7 @@ describe("title-editor renders correctly", () => {
 		expect(titleChangeHandler.calledWith(newTitle)).to.be.true;
 
 		// verify no message is displayed
-		expect(wrapper.find(".bx--form-requirement")).to.have.length(0);
+		expect(wrapper.find(".cds--form-requirement")).to.have.length(0);
 	});
 	it("test label is readonly", () => {
 		helpClickHandler.resetHistory();

canvas_modules/common-canvas/__tests__/common-properties/controls/custom-test.js

@@ -78,7 +78,7 @@ describe("custom control renders correctly", () => {
 		const dropdownButton = dropdownWrapper.find("button");
 		dropdownButton.simulate("click"); // open dropdown
 		dropdownWrapper = wrapper.find("div[data-id='properties-colors']");
-		let dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item");
+		let dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item");
 		expect(dropdownList).to.be.length(1); // should have 1 item. Before custom toggle changes
 
 		const customToggle = wrapper.find("div[data-id='properties-ci-custom_toggle']");
@@ -90,15 +90,15 @@ describe("custom control renders correctly", () => {
 
 		// select the first item
 		dropdownWrapper = wrapper.find("div[data-id='properties-colors']");
-		dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item");
+		dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item");
 		expect(dropdownList).to.be.length(2); // should have 2 items. Custom toggle control updates the values
 
 		toggle.getDOMNode().checked = false;
 		toggle.simulate("change");
 
 		// select the first item
 		dropdownWrapper = wrapper.find("div[data-id='properties-colors']");
-		dropdownList = dropdownWrapper.find("div.bx--list-box__menu-item");
+		dropdownList = dropdownWrapper.find("div.cds--list-box__menu-item");
 		expect(dropdownList).to.be.length(3); // should have 2 items. Custom toggle control updates the values
 	});
 });

canvas_modules/common-canvas/__tests__/common-properties/controls/datefield-test.js

@@ -175,7 +175,7 @@ describe("datefield-control renders correctly", () => {
 			/>
 		);
 		const dateWrapper = wrapper.find("div[data-id='properties-test-datefield']");
-		expect(dateWrapper.find(".bx--text-input--light")).to.have.length(1);
+		expect(dateWrapper.find(".cds--text-input--light")).to.have.length(1);
 	});
 
 	it("should render `DatefieldControl` with light mode disabled", () => {
@@ -190,7 +190,7 @@ describe("datefield-control renders correctly", () => {
 			/>
 		);
 		const dateWrapper = wrapper.find("div[data-id='properties-test-datefield']");
-		expect(dateWrapper.find(".bx--text-input--light")).to.have.length(0);
+		expect(dateWrapper.find(".cds--text-input--light")).to.have.length(0);
 	});
 });
 
@@ -226,15 +226,15 @@ describe("error messages renders correctly for datefield controls", () => {
 		};
 		const actual = controller.getErrorMessage({ name: "date_ymd" });
 		expect(datefieldErrorMessages).to.eql(actual);
-		let messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		let messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 
 		// Now simulate entering a valid date with the correct format.
 		input.simulate("change", { target: { value: "2012-2-25" } });
 
 		dateWrapper = wrapper.find("div[data-id='properties-date_ymd']");
 		// Ensure the error message is no longer displayed.
-		messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(0);
 	});
 
@@ -261,15 +261,15 @@ describe("error messages renders correctly for datefield controls", () => {
 		const actual = controller.getErrorMessage({ name: "date_ymd" });
 
 		expect(datefieldErrorMessages).to.eql(actual);
-		let messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		let messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 
 		// Now simulate entering a valid date with the correct format.
 		input.simulate("change", { target: { value: "9999-2-25" } });
 
 		// Ensure the error message is no longer displayed.
 		dateWrapper = wrapper.find("div[data-id='properties-date_ymd']");
-		messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(0);
 	});
 
@@ -292,15 +292,15 @@ describe("error messages renders correctly for datefield controls", () => {
 		};
 		const actual = controller.getErrorMessage({ name: "date_mdy" });
 		expect(datefieldErrorMessages).to.eql(actual);
-		let messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		let messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 
 		// Now simulate entering a valid date with the correct format.
 		input.simulate("change", { target: { value: "2-25-1958" } });
 
 		// Ensure the error message is no longer displayed.
 		dateWrapper = wrapper.find("div[data-id='properties-date_mdy']");
-		messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(0);
 	});
 
@@ -312,7 +312,7 @@ describe("error messages renders correctly for datefield controls", () => {
 
 		// Ensure an error message is not displayed.
 		dateWrapper = wrapper.find("div[data-id='properties-date_ymd_non_req']");
-		const messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		const messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(0);
 	});
 

canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-range-test.js

@@ -173,7 +173,7 @@ describe("error messages renders correctly for datepickerRange controls", () =>
 		};
 		const actual = controller.getErrorMessage(propertyId);
 		expect(actual).to.eql(expectedDatepickerErrorMessages);
-		let messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		let messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(2); // Each input will display an error
 
 		// Now simulate entering a valid date with the correct format.
@@ -186,7 +186,7 @@ describe("error messages renders correctly for datepickerRange controls", () =>
 
 		// Ensure the error message is no longer displayed.
 		dateWrapper = wrapper.find("div[data-id='properties-ctrl-datepicker_range_required']");
-		messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(0);
 	});
 
@@ -203,7 +203,7 @@ describe("error messages renders correctly for datepickerRange controls", () =>
 
 		// Ensure an error message is not displayed.
 		dateWrapper = wrapper.find("div[data-id='properties-ctrl-datepicker']");
-		const messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		const messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(0);
 	});
 

canvas_modules/common-canvas/__tests__/common-properties/controls/datepicker-test.js

@@ -158,7 +158,7 @@ describe("error messages renders correctly for datepicker controls", () => {
 		};
 		const actual = controller.getErrorMessage(propertyId);
 		expect(actual).to.eql(expectedDatepickerErrorMessages);
-		let messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		let messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(1);
 
 		// Now simulate entering a valid date with the correct format.
@@ -168,7 +168,7 @@ describe("error messages renders correctly for datepicker controls", () => {
 
 		// Ensure the error message is no longer displayed.
 		dateWrapper = wrapper.find("div[data-id='properties-ctrl-datepicker_required']");
-		messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(0);
 	});
 
@@ -184,7 +184,7 @@ describe("error messages renders correctly for datepicker controls", () => {
 
 		// Ensure an error message is not displayed.
 		dateWrapper = wrapper.find("div[data-id='properties-ctrl-datepicker']");
-		const messageWrapper = dateWrapper.find("div.bx--form-requirement");
+		const messageWrapper = dateWrapper.find("div.cds--form-requirement");
 		expect(messageWrapper).to.have.length(0);
 	});