#1165 add tearsheet group type (#1166)

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

@@ -18,6 +18,7 @@ import propertyUtils from "../../_utils_/property-utils";
 import { expect } from "chai";
 import TAB_PARAM_DEF from "../../test_resources/paramDefs/tab_paramDef.json";
 import PARAMS_ONLY_DEF from "../../test_resources/paramDefs/paramsOnly_paramDef.json";
+import CODE_PARAM_DEF from "../../test_resources/paramDefs/code_paramDef.json";
 
 describe("tabs and subtabs should be rendered correctly", () => {
 	let wrapper;
@@ -62,6 +63,24 @@ describe("tabs and subtabs should be rendered correctly", () => {
 	});
 });
 
+describe("Tearsheet group type", () => {
+	let wrapper;
+	let controller;
+	beforeEach(() => {
+		const flyout = propertyUtils.flyoutEditorForm(CODE_PARAM_DEF);
+		wrapper = flyout.wrapper;
+		controller = flyout.controller;
+	});
+
+	afterEach(() => {
+		wrapper.unmount();
+	});
+	it("validate tearsheet activates in memory", () => {
+		controller.setActiveTearsheet("tearsheet1");
+		expect(controller.getActiveTearsheet()).to.equal("tearsheet1");
+	});
+});
+
 describe("controls should be rendered correctly when no uihints are provided", () => {
 	let wrapper;
 	let controller;

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

@@ -21,6 +21,7 @@ import sinon from "sinon";
 
 import Expression from "../../../src/common-properties/controls/expression";
 import ExpressionBuilder from "../../../src/common-properties/controls/expression/expression-builder/expression-builder";
+import ExpressionToggle from "../../../src/common-properties/controls/expression/expression-toggle/expression-toggle";
 import Controller from "../../../src/common-properties/properties-controller";
 import propertyUtils from "../../_utils_/property-utils";
 import tableUtils from "./../../_utils_/table-utils";
@@ -40,7 +41,11 @@ const control = {
 	valueDef: {
 		isList: false
 	},
-	language: "CLEM"
+	language: "CLEM",
+	data: {
+		tearsheet_ref: "tearsheetX"
+	},
+	enableMaximize: true
 };
 
 const propertyId = { name: "test-expression" };
@@ -120,7 +125,7 @@ function getCopy(value) {
 }
 
 var controller = new Controller();
-
+const buttonHandler = sinon.spy();
 function reset() {
 	// setting of states needs to be done after property values.
 	// conditions are ran on each set and update of property values
@@ -130,6 +135,9 @@ function reset() {
 	controller.setDatasetMetadata(getCopy(dataModel));
 	var expressionInfo = getCopy(ExpressionInfo.input);
 	controller.setExpressionInfo(expressionInfo);
+	controller.setHandlers({
+		buttonHandler: buttonHandler
+	});
 }
 
 const propertiesConfig = { containerType: "Custom", rightFLyout: true };
@@ -180,6 +188,19 @@ describe("expression-control renders correctly", () => {
 		expect(expressionBuilderIcon).to.have.length(1);
 		expect(expressionBuilderIcon.text()).to.equal("launch expression builder");
 	});
+	it("should render maximize button", () => {
+		reset();
+		const wrapper = mountWithIntl(
+			<Expression
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+				rightFlyout
+			/>
+		);
+		expect(wrapper.find("button.maximize")).to.have.length(1);
+	});
 
 });
 
@@ -1025,3 +1046,58 @@ describe("expression builder classnames appear correctly", () => {
 		expect(wrapper.find(".table-subpanel-expression-control-class")).to.have.length(1);
 	});
 });
+describe("expression toggle", () => {
+	let wrapper;
+	beforeEach(() => {
+		reset();
+		wrapper = mountWithIntl(
+			<Provider store={controller.getStore()}>
+				<ExpressionToggle
+					control={control}
+					controller={controller}
+					enableMaximize
+				/>
+			</Provider>
+		);
+	});
+	it("should render maximize", () => {
+		expect(wrapper.find("button.maximize")).to.have.length(1);
+		expect(wrapper.find("button.minimize")).to.have.length(0);
+	});
+	it("should call button handler on maximize", () => {
+		wrapper.find("button.maximize").simulate("click");
+		expect(buttonHandler.calledOnce).to.equal(true);
+	});
+	it("should set active tearsheet", () => {
+		wrapper.find("button.maximize").simulate("click");
+		expect(controller.getActiveTearsheet()).to.equal("tearsheetX");
+	});
+});
+describe("expression toggle in tearsheet", () => {
+	let wrapper;
+	beforeEach(() => {
+		reset();
+		wrapper = mountWithIntl(
+			<Provider store={controller.getStore()}>
+				<ExpressionToggle
+					control={control}
+					controller={controller}
+					enableMaximize={false}
+				/>
+			</Provider>
+		);
+	});
+	it("should render minimize", () => {
+		expect(wrapper.find("button.maximize")).to.have.length(0);
+		expect(wrapper.find("button.minimize")).to.have.length(1);
+	});
+	it("should not call button handler on minimize", () => {
+		wrapper.find("button.minimize").simulate("click");
+		expect(buttonHandler.calledOnce).to.equal(false);
+	});
+	it("should set active tearsheet to null", () => {
+		controller.setActiveTearsheet("tearsheetX");
+		wrapper.find("button.minimize").simulate("click");
+		expect(controller.getActiveTearsheet()).to.equal(null);
+	});
+});

canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js

@@ -0,0 +1,53 @@
+/*
+ * 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.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Test suite for generic tearsheet testing
+
+import propertyUtils from "./../../_utils_/property-utils";
+import { expect } from "chai";
+import codeParamDef from "./../../test_resources/paramDefs/code_paramDef.json";
+
+describe("tearsheet tests", () => {
+	var wrapper;
+	var controller;
+	beforeEach(() => {
+		const renderedObject = propertyUtils.flyoutEditorForm(codeParamDef);
+		wrapper = renderedObject.wrapper;
+		controller = renderedObject.controller;
+	});
+
+	afterEach(() => {
+		wrapper.unmount();
+	});
+	it("should be hidden initially", () => {
+		expect(wrapper.find("div.tearsheet-panel")).to.have.length(0);
+	});
+	it("should be visible from the controller method", () => {
+		controller.setActiveTearsheet("tearsheet1");
+		wrapper.update();
+		expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1);
+	});
+	it("should be hidden from DON on the tearsheet close button", () => {
+		controller.setActiveTearsheet("tearsheet1");
+		wrapper.update();
+		wrapper.find("div.properties-tearsheet-panel button.bx--modal-close").simulate("click");
+		wrapper.update();
+		setTimeout(() => {
+			expect(wrapper.find("div.tearsheet-panel")).to.have.length(0);
+			expect(controller.getActiveTearsheet()).to.equal(null);
+		}, 1000);
+	});
+});

canvas_modules/common-canvas/__tests__/test_resources/paramDefs/code_paramDef.json

@@ -29,6 +29,10 @@
       {
         "parameter_ref": "code",
         "language": "text/x-python",
+        "enable_maximize": true,
+        "data": {
+          "tearsheet_ref": "tearsheet1"
+        },
         "label": {
           "default": "Code"
         },
@@ -56,14 +60,44 @@
     ],
     "group_info": [
       {
-        "id": "Values",
+        "id": "mainPanel",
         "label": {
-          "default": "Values"
+          "default": "Single Panel"
+        },
+        "type": "panels",
+        "group_info": [{
+          "id": "tearsheet1",
+          "label": {
+            "default": "Python"
+          },
+          "description": {
+            "default": "Your change is automatically saved."
+          },
+          "type": "tearsheetPanel",
+          "group_info": [{
+            "id": "tearsheet-code",
+            "label": {
+            "default": "Code Rows"
+          },
+          "parameter_refs": [
+            "code"
+          ]
+          }]
         },
-        "parameter_refs": [
-          "code",
-          "code_rows"
-        ]
+        {
+          "id": "code-panel",
+          "type": "panels",
+          "group_info": [{
+            "id": "code",
+            "label": {
+              "default": "Code Rows"
+            },
+            "parameter_refs": [
+              "code",
+              "code_rows"
+            ]
+          }]
+        }]
       }
     ]
   },

canvas_modules/common-canvas/locales/common-properties/locales/en.json

@@ -68,7 +68,9 @@
   "expression.recently.used": "Recently Used",
   "expression.all.functions": "All Functions",
   "expression.min.label": "Min",
+  "expression.minimize.label": "Minimize",
   "expression.max.label": "Max",
+  "expression.maximize.label": "Maximize",
   "toggle.on.label": "On",
   "toggle.off.label": "Off",
   "expression.no.functions": "No functions found.",

canvas_modules/common-canvas/locales/common-properties/locales/eo.json

@@ -68,7 +68,9 @@
   "expression.recently.used": "[Esperanto~Recently Used~eo]",
   "expression.all.functions": "[Esperanto~All Functions~eo]",
   "expression.min.label": "[Esperanto~Min~eo]",
+  "expression.minimize.label": "[Esperanto~Minimize~eo",
   "expression.max.label": "[Esperanto~Max~eo]",
+  "expression.maximize.label": "[Esperanto~Maximize~eo",
   "toggle.on.label": "[Esperanto~On~eo]",
   "toggle.off.label": "[Esperanto~Off~eo]",
   "expression.no.functions": "[Esperanto~No functions found.~~~~~eo]",

canvas_modules/common-canvas/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@elyra/pipeline-schemas": "^3.0.61",
+    "@elyra/pipeline-schemas": "^3.0.63",
     "codemirror": "^5.58.2",
     "d3": "^7.1.1",
     "dagre": "^0.8.5",

canvas_modules/common-canvas/src/common-properties/actions.js

@@ -43,6 +43,7 @@ export const UPDATE_STATIC_ROWS = "UPDATE_STATIC_ROWS";
 export const CLEAR_STATIC_ROWS = "CLEAR_STATIC_ROWS";
 export const SET_TABLE_BUTTON_ENABLED = "SET_TABLE_BUTTON_ENABLED";
 export const SET_HIDE_EDIT_BUTTON = "SET_HIDE_EDIT_BUTTON";
+export const SET_ACTIVE_TEARSHEET = "SET_ACTIVE_TEARSHEET";
 
 
 /*
@@ -149,3 +150,7 @@ export function clearStaticRows(info) {
 export function setTableButtonEnabled(info) {
 	return { type: SET_TABLE_BUTTON_ENABLED, info };
 }
+
+export function setTearsheetState(tearsheetId) {
+	return { type: SET_ACTIVE_TEARSHEET, tearsheetId };
+}

canvas_modules/common-canvas/src/common-properties/components/components.scss

@@ -27,4 +27,4 @@
 @import "./truncated-content-tooltip/truncated-content-tooltip";
 @import "./virtualized-table/virtualized-table";
 @import "./empty-table/empty-table";
-@import "./table-buttons/table-buttons"
+@import "./table-buttons/table-buttons";

canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx

@@ -34,6 +34,7 @@ import ControlPanel from "./../../panels/control";
 import Subtabs from "./../../panels/subtabs";
 
 import WideFlyout from "./../wide-flyout";
+import TearSheet from "../../panels/tearsheet";
 import FieldPicker from "./../field-picker";
 import TextPanel from "./../../panels/text-panel";
 import ActionPanel from "./../../panels/action-panel";
@@ -318,6 +319,7 @@ class EditorForm extends React.Component {
 		case ("hSeparator"):
 			return <hr key={"h-separator." + key} className="properties-h-separator" />;
 		case ("panel"):
+		case ("tearsheet"):
 			return this.genPanel(key, uiItem.panel, inPropertyId, indexof);
 		case ("subTabs"):
 			return (<Subtabs key={"subtabs." + key}
@@ -431,6 +433,19 @@ class EditorForm extends React.Component {
 				>
 					{content}
 				</TwistyPanel>);
+		case ("tearsheet"):
+			if (this.props.controller.getActiveTearsheet() === panel.id) {
+				return (
+					<TearSheet
+						key={panel.id}
+						controller={this.props.controller}
+						panel={panel}
+					>
+						{content}
+					</TearSheet>
+				);
+			}
+			return null;
 		case ("column"):
 			return (
 				<ColumnPanel

canvas_modules/common-canvas/src/common-properties/constants/form-constants.js

@@ -20,6 +20,7 @@ const ItemType = {
 	STATIC_TEXT: "staticText",
 	HORIZONTAL_SEPARATOR: "hSeparator",
 	PANEL: "panel",
+	TEARSHEET: "tearsheet",
 	SUB_TABS: "subTabs",
 	PRIMARY_TABS: "primaryTabs",
 	PANEL_SELECTOR: "panelSelector",
@@ -53,7 +54,8 @@ const GroupType = {
 	ACTION_PANEL: "actionPanel",
 	TEXT_PANEL: "textPanel",
 	TWISTY_PANEL: "twistyPanel",
-	COLUMN_PANEL: "columnPanel"
+	COLUMN_PANEL: "columnPanel",
+	TEARSHEET_PANEL: "tearsheetPanel"
 };
 
 const PanelType = {
@@ -63,7 +65,8 @@ const PanelType = {
 	SUMMARY: "summary",
 	ACTION_PANEL: "actionPanel",
 	TWISTY_PANEL: "twisty",
-	COLUMN_PANEL: "column"
+	COLUMN_PANEL: "column",
+	TEARSHEET: "tearsheet"
 };
 
 const ControlType = {