From 19e6f06f7eae9d25c623423f87a861f532cdbbe1 Mon Sep 17 00:00:00 2001 From: Jesus Guerrero Date: Wed, 5 Oct 2022 15:16:42 -0700 Subject: [PATCH] #1165 Add tearsheet group type (#1196) --- .../common-properties/form/form-test.js | 1 + .../panels/tearsheet-test.js | 21 +- .../json/form-actions-test.json | 2 + .../json/form-editstyle-test.json | 5 + .../json/form-placement-test.json | 1 + .../json/form-structure-test.json | 3 + .../json/form-structure2-test.json | 3 + .../json/form-test-condition.json | 2 + .../test_resources/json/form-test.json | 7 + .../paramDefs/code_paramDef.json | 286 +++++++++++++++--- .../components/editor-form/editor-form.jsx | 75 +++-- .../controls/datefield/datefield.jsx | 2 +- .../controls/dropdown/dropdown.jsx | 6 +- .../controls/expression/expression.jsx | 2 +- .../common-properties/controls/list/list.jsx | 2 +- .../controls/multiselect/multiselect.jsx | 4 +- .../controls/numberfield/numberfield.jsx | 2 +- .../controls/passwordfield/passwordfield.jsx | 2 +- .../controls/selectcolumns/selectcolumns.jsx | 2 +- .../controls/someofselect/someofselect.jsx | 2 +- .../controls/textarea/textarea.jsx | 4 +- .../controls/textfield/textfield.jsx | 2 +- .../controls/timefield/timefield.jsx | 2 +- .../src/common-properties/form/ControlInfo.js | 1 + .../src/common-properties/form/EditorForm.js | 23 +- .../src/common-properties/index.scss | 5 + .../panels/tearsheet/tearsheet.jsx | 31 +- .../panels/tearsheet/tearsheet.scss | 8 +- .../properties-controller.js | 8 +- .../ui-conditions/ui-conditions-parser.js | 1 + .../ui-conditions/ui-groups-parser.js | 1 + canvas_modules/harness/src/client/App.js | 3 + .../common-properties-components.jsx | 72 +++++ .../properties-documentation-constants.js | 86 ++++++ .../harness/src/styles/properties.scss | 2 +- .../parameterDefs/code_paramDef.json | 279 ++++++++++++++--- .../parameterDefs/tab_paramDef.json | 34 +++ 37 files changed, 822 insertions(+), 170 deletions(-) diff --git a/canvas_modules/common-canvas/__tests__/common-properties/form/form-test.js b/canvas_modules/common-canvas/__tests__/common-properties/form/form-test.js index 2fae899f6f..79d913f38a 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/form/form-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/form/form-test.js @@ -59,6 +59,7 @@ describe("Correct form should be created", () => { "label": { "text": "boolean_param" }, + "light": false, "labelVisible": false, "controlType": "checkbox", "valueDef": { diff --git a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js b/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js index fcf0808111..9205df3087 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/panels/tearsheet-test.js @@ -32,22 +32,27 @@ describe("tearsheet tests", () => { afterEach(() => { wrapper.unmount(); }); - it("should be hidden initially", () => { - expect(wrapper.find("div.tearsheet-panel")).to.have.length(0); + it("should be have only one tearsheet rendered", () => { + expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1); }); it("should be visible from the controller method", () => { controller.setActiveTearsheet("tearsheet1"); wrapper.update(); - expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1); + expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(1); + }); + it("should have title and description set", () => { + controller.setActiveTearsheet("tearsheet1"); + wrapper.update(); + expect(wrapper.find("div.properties-tearsheet-panel .bx--modal-header h3").text()).to.equal("Python"); + expect(wrapper.find("div.properties-tearsheet-panel .bx--modal-header p").text()).to.equal("Your change is automatically saved."); }); - it("should be hidden from DON on the tearsheet close button", () => { + it("should be hidden but not removed from DOM 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); + expect(wrapper.find("div.properties-tearsheet-panel.is-visible")).to.have.length(0); + expect(wrapper.find("div.properties-tearsheet-panel")).to.have.length(1); + expect(controller.getActiveTearsheet()).to.equal(null); }); }); diff --git a/canvas_modules/common-canvas/__tests__/test_resources/json/form-actions-test.json b/canvas_modules/common-canvas/__tests__/test_resources/json/form-actions-test.json index 9114ef20d2..8d47a2982d 100644 --- a/canvas_modules/common-canvas/__tests__/test_resources/json/form-actions-test.json +++ b/canvas_modules/common-canvas/__tests__/test_resources/json/form-actions-test.json @@ -275,6 +275,7 @@ "description": { "text": "Try pressing Increment or Descrement buttons" }, + "light": false, "labelVisible": true, "controlType": "readonly", "valueDef": { @@ -341,6 +342,7 @@ "description": { "text": "Press 'Update Datamodel' to add a new field" }, + "light": false, "labelVisible": true, "controlType": "selectcolumns", "valueDef": { diff --git a/canvas_modules/common-canvas/__tests__/test_resources/json/form-editstyle-test.json b/canvas_modules/common-canvas/__tests__/test_resources/json/form-editstyle-test.json index 0f5095a36d..5ac8db10f0 100644 --- a/canvas_modules/common-canvas/__tests__/test_resources/json/form-editstyle-test.json +++ b/canvas_modules/common-canvas/__tests__/test_resources/json/form-editstyle-test.json @@ -238,6 +238,7 @@ "description": { "text": "Rename columns in the active dataset" }, + "light": false, "labelVisible": true, "controlType": "structuretable", "valueDef": { @@ -253,6 +254,7 @@ "label": { "text": "Input name" }, + "light": false, "labelVisible": true, "controlType": "selectcolumn", "valueDef": { @@ -269,6 +271,7 @@ "label": { "text": "Output name" }, + "light": false, "labelVisible": true, "controlType": "textfield", "valueDef": { @@ -287,6 +290,7 @@ "label": { "text": "New Label" }, + "light": false, "labelVisible": true, "controlType": "textfield", "valueDef": { @@ -314,6 +318,7 @@ "label": { "text": "Output name" }, + "light": false, "labelVisible": true, "controlType": "textfield", "valueDef": { diff --git a/canvas_modules/common-canvas/__tests__/test_resources/json/form-placement-test.json b/canvas_modules/common-canvas/__tests__/test_resources/json/form-placement-test.json index f124ec6a96..94b0352980 100644 --- a/canvas_modules/common-canvas/__tests__/test_resources/json/form-placement-test.json +++ b/canvas_modules/common-canvas/__tests__/test_resources/json/form-placement-test.json @@ -176,6 +176,7 @@ "text": "Only the first row for each value of the columns added below will be included in the data table. Duplicate rows with the same value will be discarded.", "placement": "on_panel" }, + "light": false, "labelVisible": true, "controlType": "selectcolumns", "valueDef": { diff --git a/canvas_modules/common-canvas/__tests__/test_resources/json/form-structure-test.json b/canvas_modules/common-canvas/__tests__/test_resources/json/form-structure-test.json index 26bd4e0988..153942226d 100644 --- a/canvas_modules/common-canvas/__tests__/test_resources/json/form-structure-test.json +++ b/canvas_modules/common-canvas/__tests__/test_resources/json/form-structure-test.json @@ -218,6 +218,7 @@ "description": { "text": "Rename columns in the active dataset" }, + "light": false, "labelVisible": true, "controlType": "structuretable", "valueDef": { @@ -233,6 +234,7 @@ "label": { "text": "Input name" }, + "light": false, "labelVisible": true, "controlType": "selectcolumn", "valueDef": { @@ -249,6 +251,7 @@ "label": { "text": "Output name" }, + "light": false, "labelVisible": true, "controlType": "textfield", "valueDef": { diff --git a/canvas_modules/common-canvas/__tests__/test_resources/json/form-structure2-test.json b/canvas_modules/common-canvas/__tests__/test_resources/json/form-structure2-test.json index 9097423cb3..225e7c1cae 100644 --- a/canvas_modules/common-canvas/__tests__/test_resources/json/form-structure2-test.json +++ b/canvas_modules/common-canvas/__tests__/test_resources/json/form-structure2-test.json @@ -213,6 +213,7 @@ "label": { "text": "Sort by" }, + "light": false, "labelVisible": true, "controlType": "structuretable", "valueDef": { @@ -228,6 +229,7 @@ "label": { "text": "Field" }, + "light": false, "labelVisible": true, "controlType": "selectcolumn", "valueDef": { @@ -245,6 +247,7 @@ "label": { "text": "Order" }, + "light": false, "labelVisible": true, "controlType": "toggletext", "valueDef": { diff --git a/canvas_modules/common-canvas/__tests__/test_resources/json/form-test-condition.json b/canvas_modules/common-canvas/__tests__/test_resources/json/form-test-condition.json index 8a9e4e2a30..c03f499bd7 100644 --- a/canvas_modules/common-canvas/__tests__/test_resources/json/form-test-condition.json +++ b/canvas_modules/common-canvas/__tests__/test_resources/json/form-test-condition.json @@ -98,6 +98,7 @@ "label": { "text": "int_param" }, + "light": false, "labelVisible": true, "controlType": "numberfield", "valueDef": { @@ -115,6 +116,7 @@ "label": { "text": "exp_param" }, + "light": false, "labelVisible": true, "controlType": "expression", "valueDef": { diff --git a/canvas_modules/common-canvas/__tests__/test_resources/json/form-test.json b/canvas_modules/common-canvas/__tests__/test_resources/json/form-test.json index 54f82f49a2..ea1cdda35a 100644 --- a/canvas_modules/common-canvas/__tests__/test_resources/json/form-test.json +++ b/canvas_modules/common-canvas/__tests__/test_resources/json/form-test.json @@ -196,6 +196,7 @@ "label": { "text": "Target label: resource" }, + "light": false, "labelVisible": true, "controlType": "selectcolumn", "valueDef": { @@ -213,6 +214,7 @@ "label": { "text": "inputs" }, + "light": false, "labelVisible": true, "controlType": "selectcolumns", "valueDef": { @@ -253,6 +255,7 @@ "description": { "text": "Enum description: default" }, + "light": false, "labelVisible": true, "controlType": "radioset", "valueDef": { @@ -301,6 +304,7 @@ "description": { "text": "Int description: default" }, + "light": false, "labelVisible": true, "controlType": "numberfield", "valueDef": { @@ -337,6 +341,7 @@ "label": { "text": "double_param" }, + "light": false, "labelVisible": true, "controlType": "numberfield", "valueDef": { @@ -369,6 +374,7 @@ "label": { "text": "boolean_param" }, + "light": false, "labelVisible": false, "controlType": "checkbox", "valueDef": { @@ -404,6 +410,7 @@ "description": { "text": "String desciption: default" }, + "light": false, "labelVisible": true, "controlType": "textfield", "valueDef": { diff --git a/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/code_paramDef.json b/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/code_paramDef.json index 294a80275c..b6201b3470 100644 --- a/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/code_paramDef.json +++ b/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/code_paramDef.json @@ -4,7 +4,15 @@ }, "current_parameters": { "code": "Age >= 55", - "code_rows": "" + "code_rows": "Age < 55", + "string": "test", + "string2": "test", + "date_mdy": "11-05-2018", + "timefieldControlName": "10:05:20Z", + "listControlName": [ + "list item 1" + ], + "passwordField": "" }, "parameters": [ { @@ -14,6 +22,77 @@ { "id": "code_rows", "type": "string" + }, + { + "id": "string", + "type": "string" + }, + { + "id": "string2", + "type": "string" + }, + { + "id": "listControlName", + "type": "array[string]", + "default": "listPlaceholderText" + }, + { + "id": "date_mdy", + "type": "date", + "required": true + }, + { + "id": "timefieldControlName", + "type": "time" + }, + { + "id": "passwordField", + "type": "password", + "default": "", + "role": "new_column" + }, + { + "id": "numberfieldControlName", + "type": "integer", + "default": 0 + }, + { + "id": "oneofselectList", + "enum": [ + "red", + "orange", + "yellow", + "green", + "blue", + "purple" + ], + "default": "yellow" + }, + { + "id": "multiselectList", + "enum": [ + "red", + "orange", + "yellow", + "green", + "blue", + "purple" + ], + "default": [ + "yellow" + ] + }, + { + "id": "someofselectList", + "type": "array[string]", + "enum": [ + "red", + "orange", + "yellow", + "green", + "blue", + "purple" + ] } ], "uihints": { @@ -48,6 +127,10 @@ { "parameter_ref": "code_rows", "language": "text/x-rsrc", + "enable_maximize": true, + "data": { + "tearsheet_ref": "tearsheet2" + }, "label": { "default": "R code with Rows" }, @@ -56,50 +139,169 @@ }, "control": "code", "rows": 15 - } - ], - "group_info": [ + }, + { + "parameter_ref": "string", + "label": { + "default": "string" + }, + "description": { + "default": "textfield with parameter value set to 'testing'" + }, + "class_name": "string-textfield-control-class" + }, + { + "parameter_ref": "string2", + "label": { + "default": "string" + }, + "control": "textarea", + "description": { + "default": "textarea with sting value" + }, + "class_name": "string-textarea-control-class" + }, + { + "parameter_ref": "listControlName", + "control": "list", + "label": { + "default": "List Control Name" + }, + "moveable_rows": true, + "rows": 6, + "description": { + "default": "List test" + } + }, { - "id": "mainPanel", + "parameter_ref": "date_mdy", "label": { - "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" - ] - }] - }, - { - "id": "code-panel", - "type": "panels", - "group_info": [{ - "id": "code", - "label": { - "default": "Code Rows" - }, - "parameter_refs": [ - "code", - "code_rows" - ] - }] - }] + "default": "Required Date M-D-Y" + }, + "description": { + "default": "Required datefield with value set to '2018-5-11' with M-D-Y format" + }, + "date_format": "M-D-Y", + "class_name": "datefield-control-class" + }, + { + "parameter_ref": "timefieldControlName", + "label": { + "default": "Timefield Control Name" + }, + "description": { + "default": "Timefield test" + }, + "time_format": "HH:mm:ss" + }, + { + "parameter_ref": "passwordField", + "label": { + "default": "Password Control Name" + }, + "description": { + "default": "Enter your password" + } + }, + { + "parameter_ref": "numberfieldControlName", + "label": { + "default": "Numberfield Control Name" + }, + "description": { + "default": "Numberfield test" + } + }, + { + "parameter_ref": "oneofselectList", + "label": { + "default": "One of Select Control Name" + }, + "description": { + "default": "oneofselect test" + } + }, + { + "parameter_ref": "multiselectList", + "control": "multiselect", + "label": { + "default": "Multiselect Control Name" + }, + "description": { + "default": "multiselect test" + } + }, + { + "parameter_ref": "someofselectList", + "label": { + "default": "Some of Select Control Name" + }, + "description": { + "default": "someofselect test" + } } - ] + ], + "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", + "string", + "string2", + "date_mdy", + "timefieldControlName", + "passwordField", + "numberfieldControlName", + "oneofselectList", + "multiselectList", + "someofselectList", + "listControlName" + ] + }] + }, { + "id": "tearsheet2", + "label": { + "default": "Python 2" + }, + "description": { + "default": "Your change is automatically saved 2." + }, + "type": "tearsheetPanel", + "group_info": [{ + "id": "tearsheet-code-2", + "label": { + "default": "Code Rows" + }, + "parameter_refs": [ + "code_rows" + ] + }] + }, { + "id": "code-panel", + "type": "panels", + "group_info": [{ + "id": "code", + "label": { + "default": "Code Rows" + }, + "parameter_refs": [ + "code", + "code_rows", + "listControlName" + ] + }] + }] }, "conditions": [], "resources": {} diff --git a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx index c462b4c56c..b69b95a70f 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx +++ b/canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx @@ -41,9 +41,9 @@ import ActionPanel from "./../../panels/action-panel"; import ActionFactory from "./../../actions/action-factory"; import Icon from "./../../../icons/icon"; +import { ItemType } from "../../constants/form-constants"; const ALERT_TAB_GROUP = "alertMsgs"; - class EditorForm extends React.Component { constructor(props) { @@ -70,6 +70,10 @@ class EditorForm extends React.Component { this.actionFactory = new ActionFactory(this.props.controller); + this.FIRST_TEARSHEET_ID = null; + this.TEARSHEETS = {}; + this.visibleTearsheet = null; + } shouldComponentUpdate(nextProps, nextState) { @@ -129,9 +133,12 @@ class EditorForm extends React.Component { const tabContent = []; let hasAlertsTab = false; let modalSelected = 0; + const nonTearsheetTabs = tabs.filter((t) => t.content.itemType !== ItemType.TEARSHEET); + const tearsheetTabs = tabs.filter((t) => t.content.itemType === ItemType.TEARSHEET); + const totalTabs = tearsheetTabs.concat(nonTearsheetTabs); - for (let i = 0; i < tabs.length; i++) { - const tab = tabs[i]; + for (let i = 0; i < totalTabs.length; i++) { + const tab = totalTabs[i]; const tabState = this.props.controller.getPanelState({ name: tab.group }); if (tabState === STATES.HIDDEN) { continue; @@ -144,8 +151,9 @@ class EditorForm extends React.Component { if (this.props.additionalComponents) { additionalComponent = this.props.additionalComponents[tab.group]; } - // if only 1 tab don't show any tabs - if (tabs.length === 1) { + // if only 1 tab AND + // if total non-tearsheet tabs is 1; don't show any tabs + if (totalTabs.length === 1 && nonTearsheetTabs.length === 1) { return (
{panelItems} @@ -160,20 +168,31 @@ class EditorForm extends React.Component { panelArrow = ; categoryOpen = true; } - tabContent.push( -
- -
+ if (tab.content.itemType !== ItemType.TEARSHEET && nonTearsheetTabs.length === 1) { + tabContent.push( +
{panelItems} {additionalComponent}
-
- ); + ); + } else { + tabContent.push( +
+ +
+ {panelItems} + {additionalComponent} +
+
+ ); + } } else { if (this.props.activeTab === tab.group) { modalSelected = i; @@ -183,6 +202,7 @@ class EditorForm extends React.Component { key={this._getContainerIndex(hasAlertsTab, i) + "-" + key} tabIndex={i} label={tab.text} + className={classNames({ "properties-hidden-container": tab.content.itemType === ItemType.TEARSHEET })} onClick={this._modalTabsOnClick.bind(this, tab.group)} > {panelItems} @@ -434,15 +454,28 @@ class EditorForm extends React.Component { {content} ); case ("tearsheet"): - if (this.props.controller.getActiveTearsheet() === panel.id) { + if (!this.TEARSHEETS[panel.id]) { + this.TEARSHEETS[panel.id] = { + panel: panel, + title: panel.label, + description: panel.description ? panel.description.text : null, + content: content + }; + } + if (this.props.controller.getActiveTearsheet() !== null) { + this.visibleTearsheet = this.TEARSHEETS[this.props.controller.getActiveTearsheet()]; + } else { + this.visibleTearsheet = null; + } + if (!this.FIRST_TEARSHEET_ID || this.FIRST_TEARSHEET_ID === panel.id) { + this.FIRST_TEARSHEET_ID = panel.id; return ( - {content} - + tearsheet={this.visibleTearsheet} + /> ); } return null; diff --git a/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx index ce70db7754..3e08d1ce89 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/datefield/datefield.jsx @@ -83,7 +83,7 @@ class DatefieldControl extends React.Component { value={this.value} labelText={this.props.controlItem} hideLabel={this.props.tableControl} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} />
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx index 016821ad57..2a648f8369 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx @@ -208,7 +208,7 @@ class DropDown extends React.Component { disabled={this.props.state === STATES.DISABLED} onChange={this.handleChange} value={selection} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} > { options } ); @@ -223,7 +223,7 @@ class DropDown extends React.Component { items={dropDown.options} onChange={this.handleComboOnChange} onInputChange={this.handleOnInputChange} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} translateWithId={(id) => listBoxMenuIconTranslationIds[id]} titleText={this.props.controlItem} />); @@ -237,7 +237,7 @@ class DropDown extends React.Component { onChange={this.handleChange} selectedItem={dropDown.selectedOption} label={this.emptyLabel} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} translateWithId={(id) => listBoxMenuIconTranslationIds[id]} titleText={this.props.controlItem} />); diff --git a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression.jsx b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression.jsx index c1221b508a..bda4c395bf 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/expression/expression.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/expression/expression.jsx @@ -339,7 +339,7 @@ class ExpressionControl extends React.Component {
) : null; - const className = classNames(`properties-expression-editor ${messageType}`, { "properties-light-disabled": !this.props.controller.getLight() }); + const className = classNames(`properties-expression-editor ${messageType}`, { "properties-light-disabled": this.props.control.light || !this.props.controller.getLight() }); const expressionLink = (
{button} diff --git a/canvas_modules/common-canvas/src/common-properties/controls/list/list.jsx b/canvas_modules/common-canvas/src/common-properties/controls/list/list.jsx index 6286f94bdf..55e853fbda 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/list/list.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/list/list.jsx @@ -150,7 +150,7 @@ class ListControl extends AbstractTable { selectedRows={this.props.selectedRows} rowSelection={this.props.control.rowSelection} updateRowSelections={this.updateRowSelections} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} emptyTablePlaceholder={this.props.control.additionalText} />); diff --git a/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx b/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx index dc2a47d735..53e644e8e7 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/multiselect/multiselect.jsx @@ -154,7 +154,7 @@ class MultiSelectControl extends React.Component { onChange={this.handleOnChange} placeholder={label} titleText={this.props.tableControl ? null : this.props.controlItem} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} />); } else { dropdownComponent = (); } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx index 19d6d4cb0e..d051c00733 100755 --- a/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.jsx @@ -125,7 +125,7 @@ class NumberfieldControl extends React.Component { label={this.props.controlItem} hideLabel={this.props.tableControl} allowEmpty - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)} /> {numberGenerator} diff --git a/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx index 6f938e1d08..97b31883b4 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/passwordfield/passwordfield.jsx @@ -51,7 +51,7 @@ class PasswordControl extends React.Component { value={value} labelText={this.props.controlItem} hideLabel={this.props.tableControl} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} tooltipAlignment="end" /> diff --git a/canvas_modules/common-canvas/src/common-properties/controls/selectcolumns/selectcolumns.jsx b/canvas_modules/common-canvas/src/common-properties/controls/selectcolumns/selectcolumns.jsx index 92346c0cb5..e428541d88 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/selectcolumns/selectcolumns.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/selectcolumns/selectcolumns.jsx @@ -137,7 +137,7 @@ class SelectColumnsControl extends AbstractTable { selectedRows={this.props.selectedRows} rowSelection={this.props.control.rowSelection} updateRowSelections={this.updateRowSelections} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} emptyTablePlaceholder={this.props.control.additionalText} />); diff --git a/canvas_modules/common-canvas/src/common-properties/controls/someofselect/someofselect.jsx b/canvas_modules/common-canvas/src/common-properties/controls/someofselect/someofselect.jsx index 2a2c232eeb..82a1e66102 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/someofselect/someofselect.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/someofselect/someofselect.jsx @@ -109,7 +109,7 @@ class SomeofselectControl extends React.Component { updateRowSelections={this.updateSelections} selectable showHeader={false} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} emptyTablePlaceholder={this.props.control.additionalText} /> diff --git a/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx b/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx index edd4a2def9..9773db7096 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/textarea/textarea.jsx @@ -78,7 +78,7 @@ class TextareaControl extends React.Component { value={value} labelText={this.props.controlItem} hideLabel={this.props.tableControl} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} />
); @@ -92,7 +92,7 @@ class TextareaControl extends React.Component { value={value} labelText={this.props.controlItem} hideLabel={this.props.tableControl} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} />); } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.jsx index ed88a88e37..4ee9e3997a 100755 --- a/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.jsx @@ -103,7 +103,7 @@ class TextfieldControl extends React.Component { value={value} labelText={this.props.controlItem} hideLabel={this.props.tableControl} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} />); } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/timefield/timefield.jsx b/canvas_modules/common-canvas/src/common-properties/controls/timefield/timefield.jsx index 1e7b5fb312..718e1a6e04 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/timefield/timefield.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/timefield/timefield.jsx @@ -81,7 +81,7 @@ class TimefieldControl extends React.Component { value={this.value} labelText={this.props.controlItem} hideLabel={this.props.tableControl} - light={this.props.controller.getLight()} + light={this.props.controller.getLight() && !this.props.control.light} /> diff --git a/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js b/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js index 32cd049f4e..97f14f9367 100644 --- a/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js +++ b/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js @@ -184,5 +184,6 @@ export class Control { if (settings.buttons) { this.buttons = settings.buttons; } + this.light = settings.light || false; } } diff --git a/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js b/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js index e0492925bb..60855e4791 100644 --- a/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js +++ b/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js @@ -135,7 +135,7 @@ function makePrimaryTab(propertyDef, group, l10nProvider) { return new EditorTab(label, group.name, _makeUIItem(propertyDef.parameterMetadata, propertyDef.actionMetadata, group, propertyDef.structureMetadata, l10nProvider)); } -function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider) { +function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = false) { const groupName = group.name; let groupItem = null; let groupLabel = null; @@ -144,7 +144,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata switch (group.groupType()) { case GroupType.CONTROLS: return UIItem.makePanel(new ControlPanel(groupName, PanelType.GENERAL, groupClassName, nestedPanel, - _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider))); + _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light))); case GroupType.COLUMN_SELECTION: return UIItem.makePanel(new ControlPanel(groupName, PanelType.COLUMN_SELECTION, groupClassName, nestedPanel, _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider))); @@ -240,14 +240,18 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata } case GroupType.TEARSHEET_PANEL: { groupLabel = l10nProvider.l10nLabel(group, group.name); + let groupDesc; + if (group.description) { + groupDesc = new Description(l10nProvider.l10nResource(group.description)); + } const panSubItems = []; if (Array.isArray(group.subGroups)) { group.subGroups.forEach(function(subGroup) { - groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider); + groupItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, true); panSubItems.push(groupItem); }); } - return UIItem.makeTearsheetPanel(new ControlPanel(groupName, PanelType.TEARSHEET, groupClassName, nestedPanel, panSubItems, groupLabel, false), group.description); + return UIItem.makeTearsheetPanel(new ControlPanel(groupName, PanelType.TEARSHEET, groupClassName, nestedPanel, panSubItems, groupLabel, false), groupDesc); } default: logger.warn("(Unknown group type '" + group.groupType() + "')"); @@ -258,7 +262,7 @@ function _makeUIItem(parameterMetadata, actionMetadata, group, structureMetadata /** * Called on a base property group. */ -function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider) { +function _makeControls(parameterMetadata, actionMetadata, group, structureMetadata, l10nProvider, light = false) { const uiItems = []; const panelInsertedFor = []; if (!Array.isArray(group.parameterNames())) { @@ -272,7 +276,7 @@ function _makeControls(parameterMetadata, actionMetadata, group, structureMetada structureDef = structureMetadata.getStructure(prop.baseType()); } if (!(group instanceof StructureDef) || (group instanceof StructureDef && prop.isSubPanelEdit())) { - const ctrl = _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata); + const ctrl = _makeControl(parameterMetadata, paramName, group, structureDef, l10nProvider, actionMetadata, structureMetadata, null, light); const control = UIItem.makeControl(ctrl); if (prop.separatorBefore()) { uiItems.push(UIItem.makeHSeparator()); @@ -316,7 +320,7 @@ function _makeControls(parameterMetadata, actionMetadata, group, structureMetada if (Array.isArray(group.subGroups)) { group.subGroups.forEach(function(subGroup) { if (!_hasPanelBeenInserted(panelInsertedFor, subGroup.dependsOn)) { - const uiItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider); + const uiItem = _makeUIItem(parameterMetadata, actionMetadata, subGroup, structureMetadata, l10nProvider, light); uiItems.push(uiItem); } }); @@ -411,8 +415,8 @@ function _makeStringControl(parameter, isSubControl) { /** * Creates a control for the supplied property. */ -function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl) { - const isSubControl = typeof subControl !== "undefined"; +function _makeControl(parameterMetadata, paramName, group, structureDefinition, l10nProvider, actionMetadata, structureMetadata, subControl, light = false) { + const isSubControl = typeof subControl !== "undefined" && subControl; // Assume the property is defined const parameter = isSubControl ? subControl : parameterMetadata.getParameter(paramName); @@ -637,6 +641,7 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition, settings.customValueAllowed = parameter.customValueAllowed; settings.className = parameter.className; settings.buttons = buttons; + settings.light = light; if (isSubControl) { settings.visible = parameter.visible; settings.width = parameter.columns(8); diff --git a/canvas_modules/common-canvas/src/common-properties/index.scss b/canvas_modules/common-canvas/src/common-properties/index.scss index 368d896cba..ebd4dce0b0 100644 --- a/canvas_modules/common-canvas/src/common-properties/index.scss +++ b/canvas_modules/common-canvas/src/common-properties/index.scss @@ -49,6 +49,11 @@ align-items: left; } +.bx--tabs--scrollable .bx--tabs--scrollable__nav-item.properties-hidden-container, +.properties-hidden-container { + display: none; +} + .properties-modal-error { button:first-of-type { // hides the secondary button display: none; diff --git a/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.jsx b/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.jsx index 7f1b66dd97..0ad75b6de9 100644 --- a/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.jsx +++ b/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.jsx @@ -4,51 +4,38 @@ import { ComposedModal, ModalHeader, ModalBody } from "carbon-components-react"; import { Portal } from "react-portal"; class TearSheet extends Component { - constructor(props) { - super(props); - this.state = { - open: false - }; - } - componentDidMount() { - setTimeout(() => { - this.setState({ - open: true - }); - }, 0); - } render() { - const title = this.props.panel.label ? this.props.panel.label : null; - const description = this.props.panel.description ? this.props.panel.description.default : null; + const title = this.props.tearsheet ? this.props.tearsheet.title : null; + const description = this.props.tearsheet ? this.props.tearsheet.description : null; + const content = this.props.tearsheet ? this.props.tearsheet.content : null; return ( { - setTimeout(() => { - this.props.controller.clearActiveTearsheet(); - }, 500); + this.props.controller.clearActiveTearsheet(); }} > {description ? (

{description}

) : null} - {this.props.children} + {content} ); } } TearSheet.propTypes = { - panel: PropTypes.object.isRequired, + open: PropTypes.bool, controller: PropTypes.object.isRequired, - children: PropTypes.array + children: PropTypes.array, + tearsheet: PropTypes.object }; export default TearSheet; diff --git a/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.scss b/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.scss index 5da0365569..766940924b 100644 --- a/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.scss +++ b/canvas_modules/common-canvas/src/common-properties/panels/tearsheet/tearsheet.scss @@ -1,5 +1,11 @@ .properties-tearsheet-panel.bx--modal { align-items: flex-end; + &.is-visible { + .bx--modal-container { + transform: translate3d(0, 0, 0); + transition: transform 240ms cubic-bezier(0, 0, 0.3, 1); + } + } .bx--modal-container { max-height: calc(100% - 88px); height: 100%; @@ -22,7 +28,7 @@ padding: $spacing-06 $spacing-07; background-color: $ui-background; margin-bottom: 0; - .react-codemirror2, .react-codemirror2 .CodeMirror { + .bx--multi-select, .bx--dropdown, .bx--number input[type=number], .bx--text-input, .bx--text-area { // override carbon's modal background-color: $ui-01; } } diff --git a/canvas_modules/common-canvas/src/common-properties/properties-controller.js b/canvas_modules/common-canvas/src/common-properties/properties-controller.js index d5b1ea921e..eeb8eb0d30 100644 --- a/canvas_modules/common-canvas/src/common-properties/properties-controller.js +++ b/canvas_modules/common-canvas/src/common-properties/properties-controller.js @@ -31,7 +31,7 @@ import { Type, ParamRole, ControlType } from "./constants/form-constants"; import { has, cloneDeep, assign, isEmpty, isEqual, isUndefined, get } from "lodash"; import Form from "./form/Form"; import { getConditionOps } from "./ui-conditions/condition-ops/condition-ops"; - +import { ItemType } from "./constants/form-constants"; export default class PropertiesController { constructor() { @@ -180,7 +180,11 @@ export default class PropertiesController { this.uiItems = this.form.uiItems; // set last so properties dialog doesn't render too early // set initial tab to first tab if (!isEmpty(this.uiItems) && !isEmpty(this.uiItems[0].tabs)) { - this.propertiesStore.setActiveTab(this.uiItems[0].tabs[0].group); + // active tab is the first non-tearsheet + const filteredTearsheets = this.uiItems[0].tabs.filter((tab) => tab.content.itemType !== ItemType.TEARSHEET); + if (filteredTearsheets.length) { + this.propertiesStore.setActiveTab(filteredTearsheets[0].group); + } } // set title diff --git a/canvas_modules/common-canvas/src/common-properties/ui-conditions/ui-conditions-parser.js b/canvas_modules/common-canvas/src/common-properties/ui-conditions/ui-conditions-parser.js index 28332258f5..131459381b 100644 --- a/canvas_modules/common-canvas/src/common-properties/ui-conditions/ui-conditions-parser.js +++ b/canvas_modules/common-canvas/src/common-properties/ui-conditions/ui-conditions-parser.js @@ -193,6 +193,7 @@ function parseUiItem(controls, actions, uiItem, panelId, parentCategoryId) { break; case ItemType.STATIC_TEXT: case ItemType.TEXT_PANEL: + case ItemType.TEARSHEET: case ItemType.HORIZONTAL_SEPARATOR: { break; } diff --git a/canvas_modules/common-canvas/src/common-properties/ui-conditions/ui-groups-parser.js b/canvas_modules/common-canvas/src/common-properties/ui-conditions/ui-groups-parser.js index 13c5e3811e..042ccd89e6 100644 --- a/canvas_modules/common-canvas/src/common-properties/ui-conditions/ui-groups-parser.js +++ b/canvas_modules/common-canvas/src/common-properties/ui-conditions/ui-groups-parser.js @@ -93,6 +93,7 @@ function parseUiItem(panelTree, uiItem, currentPanel) { break; } case ItemType.STATIC_TEXT: + case ItemType.TEARSHEET: case ItemType.HORIZONTAL_SEPARATOR: { break; } diff --git a/canvas_modules/harness/src/client/App.js b/canvas_modules/harness/src/client/App.js index ed6d5d343b..0d55d68e61 100644 --- a/canvas_modules/harness/src/client/App.js +++ b/canvas_modules/harness/src/client/App.js @@ -1841,6 +1841,9 @@ class App extends React.Component { propertyActionHandler(actionId, appData, data) { const propertiesController = (appData && appData.inExtraCanvas) ? this.propertiesController2 : this.propertiesController; + if (actionId === "openTearsheet") { + propertiesController.setActiveTearsheet(data.tearsheet_ref); + } if (actionId === "increment") { const propertyId = { name: data.parameter_ref }; let value = propertiesController.getPropertyValue(propertyId); diff --git a/canvas_modules/harness/src/client/components/common-properties-components.jsx b/canvas_modules/harness/src/client/components/common-properties-components.jsx index 23110f748e..9a2262eeee 100644 --- a/canvas_modules/harness/src/client/components/common-properties-components.jsx +++ b/canvas_modules/harness/src/client/components/common-properties-components.jsx @@ -34,6 +34,8 @@ import { PANEL_SELECTOR_INSERT_PROPS_INFO, SUMMARY_PANEL_PROPS_INFO, TWISTY_PANEL_PROPS_INFO, + TEARSHEET_PANEL_PROPS_INFO, + TEARSHEET_PANEL_FROM_HOST_PROPS_INFO, COLUMN_PANEL_PROPS_INFO, COLUMNSELECTION_PROPS_INFO, TEXT_PANEL_PROPS_INFO, @@ -118,6 +120,8 @@ class CommonPropertiesComponents extends React.Component { this.twistyActionHandler = this.twistyActionHandler.bind(this); this.twistyControllerHandler = this.twistyControllerHandler.bind(this); + this.tearsheetControllerHandler = this.tearsheetControllerHandler.bind(this); + } componentDidMount() { @@ -162,6 +166,10 @@ class CommonPropertiesComponents extends React.Component { this.twistyPropertiesController = propertiesController; } + tearsheetControllerHandler(propertiesController) { + this.tearsheetPropertiesController = propertiesController; + } + actionHandler(actionId, appData, data) { if (actionId === "increment") { const propertyId = { name: data.parameter_ref }; @@ -352,6 +360,8 @@ class CommonPropertiesComponents extends React.Component { "--columnPanel", "--columnSelection", "--textPanel", + "--tearsheetPanel", + "--tearsheetPanelExpression", "Controls", "--textfield", "--textarea", @@ -707,6 +717,68 @@ class CommonPropertiesComponents extends React.Component { +
+

tearsheetPanel with Host

+

A modal window animated into view from below that can hold any children. +

+

The tearsheetPanel can be invoked by the host application via referrence to + any tearsheetId

+
+
+
+
+ +
+ +
+
+ 
+									{this.jsonReplacer(TEARSHEET_PANEL_FROM_HOST_PROPS_INFO.parameterDef, "panel")}
+
+
+
+
+
+
+

tearsheetPanel with Expression

+

A modal window animated into view from below that can hold any children. +

+

Automatically invoked from maximize button under the following 2 conditions:

+
    +
  1. 1. In code parameter info, add enable_maximize: true and tearsheet_ref propertly mapped in data attribute
    2. +
  2. 2. Host application returns null to button handler function
    3. +
+
+
+
+
+ +
+
+ 
+									{this.jsonReplacer(TEARSHEET_PANEL_PROPS_INFO.parameterDef, "panel")}
+
+
+
+
+

columnPanel

A panel that displays multiple columns of panels

diff --git a/canvas_modules/harness/src/client/constants/properties-documentation-constants.js b/canvas_modules/harness/src/client/constants/properties-documentation-constants.js index 4b76ec8b51..4b10bbe019 100644 --- a/canvas_modules/harness/src/client/constants/properties-documentation-constants.js +++ b/canvas_modules/harness/src/client/constants/properties-documentation-constants.js @@ -1099,6 +1099,92 @@ _defineConstant("TWISTY_PANEL_PROPS_INFO", { } } }); +_defineConstant("TEARSHEET_PANEL_PROPS_INFO", { + "title": "Panel Type: Tearsheet", + "parameterDef": { + "current_parameters": { + "code": "Age >= 55" + }, + "parameters": [ + { + "id": "code", + "type": "string" + } + ], + "uihints": { + "parameter_info": [{ + "parameter_ref": "code", + "language": "text/x-python", + "enable_maximize": true, + "data": { + "tearsheet_ref": "tearsheet1" + }, + "label": { + "default": "Code" + }, + "description": { + "default": "Enter Python code" + }, + "text_before": { + "default": "Press ctrl-space to autocomplete" + }, + "control": "code", + "class_name": "code-control-class" + }], + "group_info": [{ + "id": "tearsheet-code", + "label": { + "default": "Expression with Maximize" + }, + "parameter_refs": [ + "code" + ] + }, { + "id": "tearsheet1", + "label": { + "default": "Python" + }, + "description": { + "default": "Your change is automatically saved." + }, + "type": "tearsheetPanel", + "group_info": [{ + "id": "tearsheet-code-2", + "parameter_refs": [ + "code" + ] + }] + }] + } + } +}); +_defineConstant("TEARSHEET_PANEL_FROM_HOST_PROPS_INFO", { + "title": "Panel Type: Tearsheet", + "parameterDef": { + "uihints": { + "group_info": [{ + "id": "tearsheet0", + "label": { + "default": "Python" + }, + "description": { + "default": "Your change is automatically saved." + }, + "type": "tearsheetPanel", + "group_info": [{ + "id": "orange", + "type": "textPanel", + "label": { + "default": "Oranges" + }, + "description": { + "default": "An orange tree can grow to reach 30 feet and live for over a hundred years." + } + }] + }] + } + } +}); _defineConstant("COLUMN_PANEL_PROPS_INFO", { "title": "Panel Type: ColumnPanel", "parameterDef": { diff --git a/canvas_modules/harness/src/styles/properties.scss b/canvas_modules/harness/src/styles/properties.scss index 6055c49b63..7c1d0ef972 100644 --- a/canvas_modules/harness/src/styles/properties.scss +++ b/canvas_modules/harness/src/styles/properties.scss @@ -26,7 +26,7 @@ .harness-properties-documentation-container > .right-flyout-panel > .properties-right-flyout > .properties-modal-buttons, .harness-conditions-documentation-container > .right-flyout-panel > -.properties-right-flyout > .properties-modal-buttons { +.properties-right-flyout > .properties-modal-buttons, .harness-properties-hidden { display: none; } diff --git a/canvas_modules/harness/test_resources/parameterDefs/code_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/code_paramDef.json index 32e442b867..b6201b3470 100644 --- a/canvas_modules/harness/test_resources/parameterDefs/code_paramDef.json +++ b/canvas_modules/harness/test_resources/parameterDefs/code_paramDef.json @@ -4,7 +4,15 @@ }, "current_parameters": { "code": "Age >= 55", - "code_rows": "Age < 55" + "code_rows": "Age < 55", + "string": "test", + "string2": "test", + "date_mdy": "11-05-2018", + "timefieldControlName": "10:05:20Z", + "listControlName": [ + "list item 1" + ], + "passwordField": "" }, "parameters": [ { @@ -14,6 +22,77 @@ { "id": "code_rows", "type": "string" + }, + { + "id": "string", + "type": "string" + }, + { + "id": "string2", + "type": "string" + }, + { + "id": "listControlName", + "type": "array[string]", + "default": "listPlaceholderText" + }, + { + "id": "date_mdy", + "type": "date", + "required": true + }, + { + "id": "timefieldControlName", + "type": "time" + }, + { + "id": "passwordField", + "type": "password", + "default": "", + "role": "new_column" + }, + { + "id": "numberfieldControlName", + "type": "integer", + "default": 0 + }, + { + "id": "oneofselectList", + "enum": [ + "red", + "orange", + "yellow", + "green", + "blue", + "purple" + ], + "default": "yellow" + }, + { + "id": "multiselectList", + "enum": [ + "red", + "orange", + "yellow", + "green", + "blue", + "purple" + ], + "default": [ + "yellow" + ] + }, + { + "id": "someofselectList", + "type": "array[string]", + "enum": [ + "red", + "orange", + "yellow", + "green", + "blue", + "purple" + ] } ], "uihints": { @@ -60,63 +139,167 @@ }, "control": "code", "rows": 15 + }, + { + "parameter_ref": "string", + "label": { + "default": "string" + }, + "description": { + "default": "textfield with parameter value set to 'testing'" + }, + "class_name": "string-textfield-control-class" + }, + { + "parameter_ref": "string2", + "label": { + "default": "string" + }, + "control": "textarea", + "description": { + "default": "textarea with sting value" + }, + "class_name": "string-textarea-control-class" + }, + { + "parameter_ref": "listControlName", + "control": "list", + "label": { + "default": "List Control Name" + }, + "moveable_rows": true, + "rows": 6, + "description": { + "default": "List test" + } + }, + { + "parameter_ref": "date_mdy", + "label": { + "default": "Required Date M-D-Y" + }, + "description": { + "default": "Required datefield with value set to '2018-5-11' with M-D-Y format" + }, + "date_format": "M-D-Y", + "class_name": "datefield-control-class" + }, + { + "parameter_ref": "timefieldControlName", + "label": { + "default": "Timefield Control Name" + }, + "description": { + "default": "Timefield test" + }, + "time_format": "HH:mm:ss" + }, + { + "parameter_ref": "passwordField", + "label": { + "default": "Password Control Name" + }, + "description": { + "default": "Enter your password" + } + }, + { + "parameter_ref": "numberfieldControlName", + "label": { + "default": "Numberfield Control Name" + }, + "description": { + "default": "Numberfield test" + } + }, + { + "parameter_ref": "oneofselectList", + "label": { + "default": "One of Select Control Name" + }, + "description": { + "default": "oneofselect test" + } + }, + { + "parameter_ref": "multiselectList", + "control": "multiselect", + "label": { + "default": "Multiselect Control Name" + }, + "description": { + "default": "multiselect test" + } + }, + { + "parameter_ref": "someofselectList", + "label": { + "default": "Some of Select Control Name" + }, + "description": { + "default": "someofselect test" + } } ], "group_info": [{ - "id": "mainPanel", + "id": "tearsheet1", "label": { - "default": "Single Panel" + "default": "Python" }, - "type": "panels", + "description": { + "default": "Your change is automatically saved." + }, + "type": "tearsheetPanel", "group_info": [{ - "id": "tearsheet1", + "id": "tearsheet-code", "label": { - "default": "Python" + "default": "Code Rows" }, - "description": { - "default": "Your change is automatically saved." - }, - "type": "tearsheetPanel", - "group_info": [{ - "id": "tearsheet-code", - "label": { - "default": "Code Rows" - }, - "parameter_refs": [ - "code" - ] - }] - }, { - "id": "tearsheet2", + "parameter_refs": [ + "code", + "string", + "string2", + "date_mdy", + "timefieldControlName", + "passwordField", + "numberfieldControlName", + "oneofselectList", + "multiselectList", + "someofselectList", + "listControlName" + ] + }] + }, { + "id": "tearsheet2", + "label": { + "default": "Python 2" + }, + "description": { + "default": "Your change is automatically saved 2." + }, + "type": "tearsheetPanel", + "group_info": [{ + "id": "tearsheet-code-2", "label": { - "default": "Python 2" + "default": "Code Rows" }, - "description": { - "default": "Your change is automatically saved 2." - }, - "type": "tearsheetPanel", - "group_info": [{ - "id": "tearsheet-code-2", - "label": { - "default": "Code Rows" - }, - "parameter_refs": [ - "code_rows" - ] - }] - }, { - "id": "code-panel", - "type": "panels", - "group_info": [{ - "id": "code", - "label": { - "default": "Code Rows" - }, - "parameter_refs": [ - "code", - "code_rows" - ] - }] + "parameter_refs": [ + "code_rows" + ] + }] + }, { + "id": "code-panel", + "type": "panels", + "group_info": [{ + "id": "code", + "label": { + "default": "Code Rows" + }, + "parameter_refs": [ + "code", + "code_rows", + "listControlName" + ] }] }] }, diff --git a/canvas_modules/harness/test_resources/parameterDefs/tab_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/tab_paramDef.json index c8f6a25674..a3021b109f 100644 --- a/canvas_modules/harness/test_resources/parameterDefs/tab_paramDef.json +++ b/canvas_modules/harness/test_resources/parameterDefs/tab_paramDef.json @@ -264,6 +264,16 @@ "summary": true } ], + "action_info": [{ + "id": "openTearsheet", + "label": { + "default": "open tearsheet" + }, + "control": "button", + "data": { + "tearsheet_ref": "tearsheetHidden" + } + }], "group_info": [ { "id": "Primary", @@ -326,6 +336,13 @@ } ] }, + { + "id": "openTearsheet-action-panel", + "type": "actionPanel", + "action_refs": [ + "openTearsheet" + ] + }, { "id": "summary-panel", "label": { @@ -427,6 +444,23 @@ ] } ] + }, + { + "id": "tearsheetHidden", + "label": { + "default": "Tearsheet" + }, + "type": "tearsheetPanel", + "group_info":[{ + "id": "orange", + "type": "textPanel", + "label": { + "default": "Oranges" + }, + "description": { + "default": "An orange tree can grow to reach 30 feet and live for over a hundred years." + } + }] } ] },