@elyra/canvas 12.22.0 → 12.23.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas-constants-09ffa4d4.js +2 -0
- package/dist/canvas-constants-09ffa4d4.js.map +1 -0
- package/dist/canvas-constants-ab55d0fd.js +2 -0
- package/dist/canvas-constants-ab55d0fd.js.map +1 -0
- package/dist/canvas-controller-3a399ae6.js +2 -0
- package/dist/canvas-controller-3a399ae6.js.map +1 -0
- package/dist/canvas-controller-c046093c.js +2 -0
- package/dist/canvas-controller-c046093c.js.map +1 -0
- package/dist/{canvas-logger-a0f1beaa.js → canvas-logger-3459dfc2.js} +2 -2
- package/dist/{canvas-logger-a0f1beaa.js.map → canvas-logger-3459dfc2.js.map} +1 -1
- package/dist/{canvas-logger-815781bb.js → canvas-logger-fa8cef5b.js} +2 -2
- package/dist/{canvas-logger-815781bb.js.map → canvas-logger-fa8cef5b.js.map} +1 -1
- package/dist/common-canvas-088c1a4b.js +2 -0
- package/dist/common-canvas-088c1a4b.js.map +1 -0
- package/dist/common-canvas-7676cc1b.js +2 -0
- package/dist/common-canvas-7676cc1b.js.map +1 -0
- package/dist/common-canvas.es.js +1 -1
- package/dist/common-canvas.es.js.map +1 -1
- package/dist/common-canvas.js +1 -1
- package/dist/common-canvas.js.map +1 -1
- package/dist/common-properties-9d77f8e1.js +2 -0
- package/dist/common-properties-9d77f8e1.js.map +1 -0
- package/dist/common-properties-a31de521.js +2 -0
- package/dist/common-properties-a31de521.js.map +1 -0
- package/dist/{createClass-6db89a23.js → createClass-72b049bc.js} +1 -1
- package/dist/createClass-72b049bc.js.map +1 -0
- package/dist/{createClass-32a0cf0f.js → createClass-d5cac0b7.js} +1 -1
- package/dist/createClass-d5cac0b7.js.map +1 -0
- package/dist/{datarecord-metadata-v3-schema-6b6384ff.js → datarecord-metadata-v3-schema-03db5d5d.js} +2 -2
- package/dist/{datarecord-metadata-v3-schema-6b6384ff.js.map → datarecord-metadata-v3-schema-03db5d5d.js.map} +1 -1
- package/dist/{datarecord-metadata-v3-schema-81228a9a.js → datarecord-metadata-v3-schema-07d7682c.js} +2 -2
- package/dist/{datarecord-metadata-v3-schema-81228a9a.js.map → datarecord-metadata-v3-schema-07d7682c.js.map} +1 -1
- package/dist/extends-87da7df3.js +7 -0
- package/dist/extends-87da7df3.js.map +1 -0
- package/dist/{extends-12382a72.js → extends-dc95dba8.js} +2 -2
- package/dist/extends-dc95dba8.js.map +1 -0
- package/dist/flexible-table-59ad2c83.js +2 -0
- package/dist/flexible-table-59ad2c83.js.map +1 -0
- package/dist/flexible-table-5c4fbb7b.js +2 -0
- package/dist/flexible-table-5c4fbb7b.js.map +1 -0
- package/dist/{getPrototypeOf-bf88242f.js → getPrototypeOf-4e282dd3.js} +1 -1
- package/dist/getPrototypeOf-4e282dd3.js.map +1 -0
- package/dist/{getPrototypeOf-a1c3fe64.js → getPrototypeOf-b3806813.js} +1 -1
- package/dist/getPrototypeOf-b3806813.js.map +1 -0
- package/dist/{icon-1ef0f3b9.js → icon-2c16236a.js} +2 -2
- package/dist/{icon-162ec1ee.js.map → icon-2c16236a.js.map} +1 -1
- package/dist/{icon-162ec1ee.js → icon-816af0e7.js} +2 -2
- package/dist/{icon-1ef0f3b9.js.map → icon-816af0e7.js.map} +1 -1
- package/dist/index-2f6be19d.js +2 -0
- package/dist/index-2f6be19d.js.map +1 -0
- package/dist/index-6f739fa1.js +2 -0
- package/dist/index-6f739fa1.js.map +1 -0
- package/dist/lib/canvas-controller.es.js +1 -1
- package/dist/lib/canvas-controller.js +1 -1
- package/dist/lib/canvas.es.js +1 -1
- package/dist/lib/canvas.js +1 -1
- package/dist/lib/command-stack.es.js +1 -1
- package/dist/lib/command-stack.es.js.map +1 -1
- package/dist/lib/command-stack.js +1 -1
- package/dist/lib/command-stack.js.map +1 -1
- package/dist/lib/context-menu.es.js +1 -1
- package/dist/lib/context-menu.es.js.map +1 -1
- package/dist/lib/context-menu.js +1 -1
- package/dist/lib/context-menu.js.map +1 -1
- package/dist/lib/properties/field-picker.es.js +1 -1
- package/dist/lib/properties/field-picker.js +1 -1
- package/dist/lib/properties/flexible-table.es.js +1 -1
- package/dist/lib/properties/flexible-table.js +1 -1
- package/dist/lib/properties.es.js +1 -1
- package/dist/lib/properties.js +1 -1
- package/dist/lib/tooltip.es.js +1 -1
- package/dist/lib/tooltip.es.js.map +1 -1
- package/dist/lib/tooltip.js +1 -1
- package/dist/lib/tooltip.js.map +1 -1
- package/dist/styles/common-canvas.min.css +1 -1
- package/dist/styles/common-canvas.min.css.map +1 -1
- package/dist/{toolbar-bb5bee87.js → toolbar-2ef99bd8.js} +2 -2
- package/dist/{toolbar-59ce5251.js.map → toolbar-2ef99bd8.js.map} +1 -1
- package/dist/{toolbar-59ce5251.js → toolbar-cb967e26.js} +2 -2
- package/dist/{toolbar-bb5bee87.js.map → toolbar-cb967e26.js.map} +1 -1
- package/locales/common-properties/locales/en.json +2 -0
- package/package.json +1 -1
- package/src/common-canvas/cc-contents.jsx +14 -2
- package/src/common-canvas/constants/canvas-constants.js +1 -0
- package/src/common-canvas/svg-canvas-d3.js +8 -0
- package/src/common-canvas/svg-canvas-d3.scss +11 -1
- package/src/common-canvas/svg-canvas-renderer.js +176 -132
- package/src/common-canvas/svg-canvas-utils-decs.js +4 -3
- package/src/common-canvas/svg-canvas-utils-textarea.js +19 -5
- package/src/common-properties/components/editor-form/editor-form.jsx +6 -8
- package/src/common-properties/components/flexible-table/flexible-table.scss +1 -0
- package/src/common-properties/components/virtualized-table/virtualized-table.jsx +38 -34
- package/src/common-properties/components/virtualized-table/virtualized-table.scss +17 -0
- package/src/common-properties/constants/constants.js +3 -0
- package/src/common-properties/controls/expression/expression-builder/expression-select-field-function.jsx +25 -18
- package/src/common-properties/controls/expression/expressionInfo-parser.js +11 -0
- package/src/common-properties/controls/passwordfield/passwordfield.jsx +2 -2
- package/src/common-properties/controls/toggle/toggle.jsx +1 -3
- package/src/common-properties/controls/toggle/toggle.scss +7 -4
- package/src/common-properties/form/EditorForm.js +4 -2
- package/src/common-properties/ui-conditions/ui-conditions-parser.js +1 -1
- package/src/common-properties/ui-conditions/ui-groups-parser.js +1 -1
- package/src/common-properties/util/property-utils.js +3 -0
- package/src/context-menu/common-context-menu.jsx +7 -0
- package/src/context-menu/context-menu-wrapper.jsx +30 -15
- package/src/object-model/api-pipeline.js +6 -9
- package/src/object-model/layout-dimensions.js +6 -6
- package/src/object-model/pipeline-out-handler.js +1 -1
- package/src/object-model/redux/reducers/canvasinfo.js +0 -1
- package/src/object-model/redux/reducers/nodes.js +0 -9
- package/stats.html +1 -1
- package/dist/canvas-constants-34cdb7df.js +0 -2
- package/dist/canvas-constants-34cdb7df.js.map +0 -1
- package/dist/canvas-constants-3c09c7f6.js +0 -2
- package/dist/canvas-constants-3c09c7f6.js.map +0 -1
- package/dist/canvas-controller-ccb05f9f.js +0 -2
- package/dist/canvas-controller-ccb05f9f.js.map +0 -1
- package/dist/canvas-controller-feabad26.js +0 -2
- package/dist/canvas-controller-feabad26.js.map +0 -1
- package/dist/common-canvas-bcfe04ef.js +0 -2
- package/dist/common-canvas-bcfe04ef.js.map +0 -1
- package/dist/common-canvas-c4f77878.js +0 -2
- package/dist/common-canvas-c4f77878.js.map +0 -1
- package/dist/common-properties-597dd249.js +0 -2
- package/dist/common-properties-597dd249.js.map +0 -1
- package/dist/common-properties-de0ca66b.js +0 -2
- package/dist/common-properties-de0ca66b.js.map +0 -1
- package/dist/createClass-32a0cf0f.js.map +0 -1
- package/dist/createClass-6db89a23.js.map +0 -1
- package/dist/extends-12382a72.js.map +0 -1
- package/dist/extends-195c6b49.js +0 -7
- package/dist/extends-195c6b49.js.map +0 -1
- package/dist/flexible-table-056c538e.js +0 -2
- package/dist/flexible-table-056c538e.js.map +0 -1
- package/dist/flexible-table-7fb8a62e.js +0 -2
- package/dist/flexible-table-7fb8a62e.js.map +0 -1
- package/dist/getPrototypeOf-a1c3fe64.js.map +0 -1
- package/dist/getPrototypeOf-bf88242f.js.map +0 -1
- package/dist/index-61be3509.js +0 -2
- package/dist/index-61be3509.js.map +0 -1
- package/dist/index-8076376e.js +0 -2
- package/dist/index-8076376e.js.map +0 -1
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
import { Column, Table, AutoSizer } from "react-virtualized";
|
|
18
18
|
import Draggable from "react-draggable";
|
|
19
19
|
import { Checkbox, Loading } from "carbon-components-react";
|
|
20
|
-
import { ArrowUp16, ArrowDown16, ArrowsVertical16 } from "@carbon/icons-react";
|
|
20
|
+
import { ArrowUp16, ArrowDown16, ArrowsVertical16, Information16 } from "@carbon/icons-react";
|
|
21
21
|
import Tooltip from "./../../../tooltip/tooltip.jsx";
|
|
22
22
|
import { SORT_DIRECTION, STATES, ROW_SELECTION, MINIMUM_COLUMN_WIDTH, MINIMUM_COLUMN_WIDTH_WITHOUT_LABEL } from "./../../constants/constants";
|
|
23
23
|
import { injectIntl } from "react-intl";
|
|
@@ -234,28 +234,25 @@ class VirtualizedTable extends React.Component {
|
|
|
234
234
|
</span>);
|
|
235
235
|
}
|
|
236
236
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
</div>
|
|
257
|
-
);
|
|
258
|
-
}
|
|
237
|
+
const tooltip = columnData.headerLabel
|
|
238
|
+
? (<div className="properties-tooltips">
|
|
239
|
+
<span style= {{ fontWeight: "bold" }}>{columnData.headerLabel}</span>
|
|
240
|
+
</div>)
|
|
241
|
+
: null;
|
|
242
|
+
|
|
243
|
+
const infoIcon = isEmpty(columnData.description)
|
|
244
|
+
? null
|
|
245
|
+
: (<div className="properties-vt-info-icon-tip">
|
|
246
|
+
<Tooltip
|
|
247
|
+
id={`properties-tooltip-${columnData.headerLabel}-info`}
|
|
248
|
+
tip={columnData.description}
|
|
249
|
+
direction="bottom"
|
|
250
|
+
className="properties-tooltips"
|
|
251
|
+
showToolTipOnClick
|
|
252
|
+
>
|
|
253
|
+
<Information16 className="properties-vt-info-icon" />
|
|
254
|
+
</Tooltip>
|
|
255
|
+
</div>);
|
|
259
256
|
|
|
260
257
|
const tooltipId = uuid4() + "-tooltip-column-" + dataKey;
|
|
261
258
|
|
|
@@ -279,20 +276,27 @@ class VirtualizedTable extends React.Component {
|
|
|
279
276
|
</Draggable>)
|
|
280
277
|
: "";
|
|
281
278
|
|
|
279
|
+
const header = isEmpty(tooltip)
|
|
280
|
+
? (<div className="properties-vt-label-icon">
|
|
281
|
+
{label}
|
|
282
|
+
{infoIcon}
|
|
283
|
+
</div>)
|
|
284
|
+
: (<div className="properties-vt-label-tip-icon">
|
|
285
|
+
<Tooltip
|
|
286
|
+
id={tooltipId}
|
|
287
|
+
tip={tooltip}
|
|
288
|
+
direction="bottom"
|
|
289
|
+
className="properties-tooltips"
|
|
290
|
+
>
|
|
291
|
+
{label}
|
|
292
|
+
</Tooltip>
|
|
293
|
+
{infoIcon}
|
|
294
|
+
</div>);
|
|
295
|
+
|
|
282
296
|
return (
|
|
283
297
|
<div className={classNames({ "properties-vt-column-with-resize": resizeElem !== "", "properties-vt-column-without-resize": resizeElem === "" })}>
|
|
284
298
|
<div className={classNames("properties-vt-column properties-tooltips-container", { "sort-column-active": dataKey === this.props.sortBy })}>
|
|
285
|
-
{
|
|
286
|
-
? label
|
|
287
|
-
: <Tooltip
|
|
288
|
-
id={tooltipId}
|
|
289
|
-
tip={tooltip}
|
|
290
|
-
direction="bottom"
|
|
291
|
-
className="properties-tooltips"
|
|
292
|
-
>
|
|
293
|
-
{label}
|
|
294
|
-
</Tooltip>
|
|
295
|
-
}
|
|
299
|
+
{header}
|
|
296
300
|
{disableSort === false && sortIcon}
|
|
297
301
|
</div>
|
|
298
302
|
{ resizeElem }
|
|
@@ -100,6 +100,23 @@
|
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
+
.properties-vt-label-tip-icon {
|
|
104
|
+
width: inherit;
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
|
|
108
|
+
.properties-vt-info-icon-tip {
|
|
109
|
+
height: $spacing-05;
|
|
110
|
+
margin-left: $spacing-03;
|
|
111
|
+
|
|
112
|
+
.properties-vt-info-icon {
|
|
113
|
+
&:hover {
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
103
120
|
.properties-vt-row-checkbox {
|
|
104
121
|
height: $spacing-07;
|
|
105
122
|
margin-left: $spacing-05;
|
|
@@ -72,11 +72,14 @@ export const MESSAGE_KEYS = {
|
|
|
72
72
|
EXPRESSION_FIELDS_TITLE: "expression.fields.title",
|
|
73
73
|
EXPRESSION_VALUES_TITLE: "expression.values.title",
|
|
74
74
|
EXPRESSION_FIELD_COLUMN: "expression.field.column",
|
|
75
|
+
EXPRESSION_FIELD_COLUMN_DESCRIPTION: "expression.field.column.description",
|
|
75
76
|
EXPRESSION_STORAGE_COLUMN: "expression.storage.column",
|
|
76
77
|
EXPRESSION_VALUE_COLUMN: "expression.value.column",
|
|
78
|
+
EXPRESSION_VALUE_COLUMN_DESCRIPTION: "expression.value.column.description",
|
|
77
79
|
EXPRESSION_FUNCTION_COLUMN: "expression.function.column",
|
|
78
80
|
EXPRESSION_RETURN_COLUMN: "expression.return.column",
|
|
79
81
|
EXPRESSION_RECENTLY_USED_COLUMN: "expression.recently.used.column",
|
|
82
|
+
EXPRESSION_RECENTLY_USED_COLUMN_DESCRIPTION: "expression.recently.used.column.description",
|
|
80
83
|
EXPRESSION_FIELD_TAB: "expression.field.tab",
|
|
81
84
|
EXPRESSION_FUNCTIONS_TAB: "expression.functions.tab",
|
|
82
85
|
EXPRESSION_RECENTLY_USED: "expression.recently.used",
|
|
@@ -29,19 +29,19 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
|
|
|
29
29
|
constructor(props) {
|
|
30
30
|
super(props);
|
|
31
31
|
this.reactIntl = props.controller.getReactIntl();
|
|
32
|
-
this.
|
|
33
|
-
|
|
32
|
+
this.valueColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN);
|
|
33
|
+
this.valueColumnDesc = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN_DESCRIPTION);
|
|
34
|
+
this.recentUseCat = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_RECENTLY_USED);
|
|
34
35
|
this.recentUseCatInfo = {
|
|
35
36
|
id: this.recentUseCat,
|
|
36
37
|
locLabel: this.recentUseCat,
|
|
37
38
|
field_columns: {
|
|
38
39
|
field_column_info: {
|
|
39
|
-
locLabel: formatMessage(this.reactIntl,
|
|
40
|
-
MESSAGE_KEYS.EXPRESSION_RECENTLY_USED_COLUMN)
|
|
40
|
+
locLabel: formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_RECENTLY_USED_COLUMN)
|
|
41
41
|
},
|
|
42
42
|
value_column_info: {
|
|
43
|
-
locLabel:
|
|
44
|
-
|
|
43
|
+
locLabel: this.valueColumn,
|
|
44
|
+
descLabel: this.valueColumnDesc
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
};
|
|
@@ -256,23 +256,21 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
|
|
|
256
256
|
}
|
|
257
257
|
|
|
258
258
|
_makeDatasetFields(dataset, fieldDataset) {
|
|
259
|
-
const fieldColumn = formatMessage(this.reactIntl,
|
|
260
|
-
|
|
261
|
-
const storageColumn = formatMessage(this.reactIntl,
|
|
262
|
-
|
|
263
|
-
const valueColumn = formatMessage(this.reactIntl,
|
|
264
|
-
MESSAGE_KEYS.EXPRESSION_VALUE_COLUMN);
|
|
265
|
-
const dropdownLabel = formatMessage(this.reactIntl,
|
|
266
|
-
MESSAGE_KEYS.EXPRESSION_FIELDS_DROPDOWN_TITLE);
|
|
259
|
+
const fieldColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN);
|
|
260
|
+
const fieldColumnDesc = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELD_COLUMN_DESCRIPTION);
|
|
261
|
+
const storageColumn = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_STORAGE_COLUMN);
|
|
262
|
+
const dropdownLabel = formatMessage(this.reactIntl, MESSAGE_KEYS.EXPRESSION_FIELDS_DROPDOWN_TITLE);
|
|
267
263
|
const fieldsCatInfo = {
|
|
268
264
|
id: "fields",
|
|
269
265
|
locLabel: dropdownLabel,
|
|
270
266
|
field_columns: {
|
|
271
267
|
field_column_info: {
|
|
272
|
-
locLabel: fieldColumn
|
|
268
|
+
locLabel: fieldColumn,
|
|
269
|
+
descLabel: fieldColumnDesc
|
|
273
270
|
},
|
|
274
271
|
value_column_info: {
|
|
275
|
-
locLabel: valueColumn
|
|
272
|
+
locLabel: this.valueColumn,
|
|
273
|
+
descLabel: this.valueColumnDesc
|
|
276
274
|
},
|
|
277
275
|
additional_column_info: [
|
|
278
276
|
{
|
|
@@ -369,8 +367,17 @@ export default class ExpressionSelectFieldOrFunction extends React.Component {
|
|
|
369
367
|
}
|
|
370
368
|
|
|
371
369
|
if (categoryInfo) {
|
|
372
|
-
fieldHeaders.push({
|
|
373
|
-
|
|
370
|
+
fieldHeaders.push({
|
|
371
|
+
key: "fieldName",
|
|
372
|
+
label: categoryInfo.field_columns.field_column_info.locLabel,
|
|
373
|
+
description: categoryInfo.field_columns.field_column_info.descLabel,
|
|
374
|
+
resizable: true
|
|
375
|
+
});
|
|
376
|
+
valueHeader.push({
|
|
377
|
+
key: "values",
|
|
378
|
+
label: categoryInfo.field_columns.value_column_info.locLabel,
|
|
379
|
+
description: categoryInfo.field_columns.value_column_info.descLabel
|
|
380
|
+
});
|
|
374
381
|
if (categoryInfo.field_columns.additional_column_info) {
|
|
375
382
|
for (let i = 0; i < categoryInfo.field_columns.additional_column_info.length; i++) {
|
|
376
383
|
sortable.push(categoryInfo.field_columns.additional_column_info[i].id);
|
|
@@ -57,8 +57,19 @@ function setExpressionInfo(inExpressionInfo) {
|
|
|
57
57
|
if (inExpressionInfo.fields.field_categories) {
|
|
58
58
|
inExpressionInfo.fields.field_categories.forEach((fieldCat) => {
|
|
59
59
|
fieldCat.locLabel = l10nProvider.l10nLabel(fieldCat, fieldCat.id);
|
|
60
|
+
|
|
60
61
|
fieldCat.field_columns.field_column_info.locLabel = l10nProvider.l10nLabel(fieldCat.field_columns.field_column_info, fieldCat.id + ".field_column_info");
|
|
61
62
|
fieldCat.field_columns.value_column_info.locLabel = l10nProvider.l10nLabel(fieldCat.field_columns.value_column_info, fieldCat.id + ".value_column_info");
|
|
63
|
+
|
|
64
|
+
const fieldColInfoDesc = l10nProvider.l10nDesc(fieldCat.field_columns.field_column_info, fieldCat.id + ".field_column_info");
|
|
65
|
+
if (fieldColInfoDesc !== fieldCat.id + ".field_column_info") {
|
|
66
|
+
fieldCat.field_columns.field_column_info.descLabel = fieldColInfoDesc;
|
|
67
|
+
}
|
|
68
|
+
const valueColInfoDesc = l10nProvider.l10nDesc(fieldCat.field_columns.value_column_info, fieldCat.id + ".value_column_info");
|
|
69
|
+
if (valueColInfoDesc !== fieldCat.id + ".value_column_info") {
|
|
70
|
+
fieldCat.field_columns.value_column_info.descLabel = valueColInfoDesc;
|
|
71
|
+
}
|
|
72
|
+
|
|
62
73
|
if (fieldCat.field_columns.additional_column_info) {
|
|
63
74
|
fieldCat.field_columns.additional_column_info.forEach((col) => {
|
|
64
75
|
col.locLabel = l10nProvider.l10nLabel(col, fieldCat.id + ".additional_column_info." + col.id);
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
import React from "react";
|
|
18
18
|
import PropTypes from "prop-types";
|
|
19
19
|
import { connect } from "react-redux";
|
|
20
|
-
import {
|
|
20
|
+
import { PasswordInput, Form } from "carbon-components-react";
|
|
21
21
|
import ValidationMessage from "./../../components/validation-message";
|
|
22
22
|
import * as ControlUtils from "./../../util/control-utils";
|
|
23
23
|
import { STATES } from "./../../constants/constants.js";
|
|
@@ -41,7 +41,7 @@ class PasswordControl extends React.Component {
|
|
|
41
41
|
return (
|
|
42
42
|
<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
|
|
43
43
|
<Form>
|
|
44
|
-
<
|
|
44
|
+
<PasswordInput
|
|
45
45
|
{...validationProps}
|
|
46
46
|
autoComplete="off"
|
|
47
47
|
id={this.id}
|
|
@@ -54,10 +54,8 @@ class ToggleControl extends React.Component {
|
|
|
54
54
|
labelB={labelOn}
|
|
55
55
|
labelA={labelOff}
|
|
56
56
|
onToggle={this.handleChange.bind(this)}
|
|
57
|
-
labelText={this.props.controlItem}
|
|
57
|
+
labelText={this.props.tableControl ? null : this.props.controlItem}
|
|
58
58
|
/>);
|
|
59
|
-
|
|
60
|
-
|
|
61
59
|
const className = classNames("properties-toggle", { "hide": this.props.state === STATES.HIDDEN }, this.props.messageInfo ? this.props.messageInfo.type : null);
|
|
62
60
|
return (
|
|
63
61
|
<div className={className} data-id={ControlUtils.getDataId(this.props.propertyId)}>
|
|
@@ -14,10 +14,13 @@
|
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
|
+
.properties-toggle {
|
|
18
|
+
.properties-label-container {
|
|
19
|
+
padding-bottom: 0;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
17
22
|
.properties-table-cell-control { // overrides when in a table cell
|
|
18
|
-
.
|
|
19
|
-
|
|
20
|
-
margin: $spacing-02 0;
|
|
21
|
-
}
|
|
23
|
+
.bx--toggle__switch { // override carbon when inside a table
|
|
24
|
+
margin-bottom: $spacing-05;
|
|
22
25
|
}
|
|
23
26
|
}
|
|
@@ -467,8 +467,10 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition,
|
|
|
467
467
|
controlType = ControlType.PASSWORDFIELD;
|
|
468
468
|
break;
|
|
469
469
|
case Type.BOOLEAN:
|
|
470
|
-
|
|
471
|
-
|
|
470
|
+
if (!parameter.control || parameter.control === ControlType.CHECKBOX) {
|
|
471
|
+
labelVisible = false;
|
|
472
|
+
controlType = ControlType.CHECKBOX;
|
|
473
|
+
}
|
|
472
474
|
break;
|
|
473
475
|
case Type.INTEGER:
|
|
474
476
|
case Type.LONG:
|
|
@@ -144,6 +144,7 @@ function parseUiItem(controls, actions, uiItem, panelId, parentCategoryId) {
|
|
|
144
144
|
}
|
|
145
145
|
case ItemType.ADDITIONAL_LINK:
|
|
146
146
|
case ItemType.CHECKBOX_SELECTOR:
|
|
147
|
+
case ItemType.TEARSHEET:
|
|
147
148
|
case ItemType.PANEL: {
|
|
148
149
|
if (uiItem.panel && uiItem.panel.uiItems) {
|
|
149
150
|
let locPanelId = panelId;
|
|
@@ -193,7 +194,6 @@ function parseUiItem(controls, actions, uiItem, panelId, parentCategoryId) {
|
|
|
193
194
|
break;
|
|
194
195
|
case ItemType.STATIC_TEXT:
|
|
195
196
|
case ItemType.TEXT_PANEL:
|
|
196
|
-
case ItemType.TEARSHEET:
|
|
197
197
|
case ItemType.HORIZONTAL_SEPARATOR: {
|
|
198
198
|
break;
|
|
199
199
|
}
|
|
@@ -44,6 +44,7 @@ function parseUiItem(panelTree, uiItem, currentPanel) {
|
|
|
44
44
|
case ItemType.PANEL:
|
|
45
45
|
case ItemType.CUSTOM_PANEL:
|
|
46
46
|
case ItemType.ADDITIONAL_LINK:
|
|
47
|
+
case ItemType.TEARSHEET:
|
|
47
48
|
case ItemType.CHECKBOX_SELECTOR: {
|
|
48
49
|
if (uiItem.panel && uiItem.panel.id) {
|
|
49
50
|
panelTree[currentPanel].panels.push(uiItem.panel.id);
|
|
@@ -93,7 +94,6 @@ function parseUiItem(panelTree, uiItem, currentPanel) {
|
|
|
93
94
|
break;
|
|
94
95
|
}
|
|
95
96
|
case ItemType.STATIC_TEXT:
|
|
96
|
-
case ItemType.TEARSHEET:
|
|
97
97
|
case ItemType.HORIZONTAL_SEPARATOR: {
|
|
98
98
|
break;
|
|
99
99
|
}
|
|
@@ -54,6 +54,9 @@ function formatMessage(intl, key, substituteObj) {
|
|
|
54
54
|
const defaultMessages = { ...defaultMessages1, ...defaultMessages2 };
|
|
55
55
|
let formattedMessage;
|
|
56
56
|
if (typeof intl !== "undefined" && intl !== null) {
|
|
57
|
+
if (intl.messages[key] === "") {
|
|
58
|
+
return ""; // Allow empty strings
|
|
59
|
+
}
|
|
57
60
|
formattedMessage = intl.formatMessage({ id: key, defaultMessage: defaultMessages[key] }, substituteObj);
|
|
58
61
|
} else {
|
|
59
62
|
formattedMessage = defaultMessages[key];
|
|
@@ -92,6 +92,13 @@ class CommonContextMenu extends React.Component {
|
|
|
92
92
|
menuPos.x -= menuSize.width;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
// Add a pixel to x and y because on Chrome without this the context menu
|
|
96
|
+
// appears with the top corner of the first menu item under the mouse
|
|
97
|
+
// cursor. This highlights the first menu item (which looks weird) and, if
|
|
98
|
+
// the first item is a cascade menu, automatically opens the sub-menu.
|
|
99
|
+
menuPos.x += 1;
|
|
100
|
+
menuPos.y += 1;
|
|
101
|
+
|
|
95
102
|
return menuPos;
|
|
96
103
|
}
|
|
97
104
|
|
|
@@ -18,8 +18,6 @@ import React from "react";
|
|
|
18
18
|
import PropTypes from "prop-types";
|
|
19
19
|
import CommonContextMenu from "./common-context-menu.jsx";
|
|
20
20
|
|
|
21
|
-
const CONTEXT_MENU_BUTTON = 2;
|
|
22
|
-
|
|
23
21
|
export default class ContextMenuWrapper extends React.Component {
|
|
24
22
|
constructor(props) {
|
|
25
23
|
super(props);
|
|
@@ -57,23 +55,19 @@ export default class ContextMenuWrapper extends React.Component {
|
|
|
57
55
|
}
|
|
58
56
|
|
|
59
57
|
handleClickOutside(e) {
|
|
60
|
-
// On
|
|
61
|
-
//
|
|
62
|
-
//
|
|
63
|
-
//
|
|
64
|
-
//
|
|
65
|
-
|
|
66
|
-
// events.
|
|
67
|
-
// Also, on Safari, when a user is displaying the context menu with a ctrl-click,
|
|
68
|
-
// the click is received with a ctrlKey field enabled. So we also ignore that.
|
|
69
|
-
if (e.button === CONTEXT_MENU_BUTTON || e.ctrlKey) {
|
|
58
|
+
// On Safari, when a user is displaying the context menu with a ctrl-click
|
|
59
|
+
// (which is a supported context menu gesture on the Mac) a secondary click
|
|
60
|
+
// event is emmitted which is received here with the ctrlKey field enabled.
|
|
61
|
+
// So we ignore that event otherwse, if we continue, the context menu will
|
|
62
|
+
// be closed.
|
|
63
|
+
if (e.ctrlKey) {
|
|
70
64
|
e.stopPropagation();
|
|
71
65
|
return;
|
|
72
66
|
}
|
|
73
67
|
|
|
74
|
-
// If the click was anywhere outside the context menu
|
|
75
|
-
|
|
76
|
-
if (
|
|
68
|
+
// If the click was anywhere outside the context menu and
|
|
69
|
+
// the ellipsis button we just close the menu.
|
|
70
|
+
if (!this.isOverContextMenu(e) && !this.isOverEllipsisButton(e)) {
|
|
77
71
|
// This stop propagation is needed in common canvas so that selected nodes will
|
|
78
72
|
// remain selected even after clicking outside the context menu to close the menu.
|
|
79
73
|
if (this.props.stopPropagation) {
|
|
@@ -83,6 +77,27 @@ export default class ContextMenuWrapper extends React.Component {
|
|
|
83
77
|
}
|
|
84
78
|
}
|
|
85
79
|
|
|
80
|
+
// Retruns true if the event occurred over the context menu.
|
|
81
|
+
isOverContextMenu(e) {
|
|
82
|
+
const domNode = document.getElementById("context-menu-popover");
|
|
83
|
+
return !domNode || domNode.contains(e.target);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Returns true if the event occurred over the ellipsis button. Typically
|
|
87
|
+
// there will be only one ellipsis button on the canvas, since they are only
|
|
88
|
+
// displayed on hover, but in some test cicumstances there might be more
|
|
89
|
+
// than one.
|
|
90
|
+
isOverEllipsisButton(e) {
|
|
91
|
+
const ellipsisNodes = document.getElementsByClassName("d3-node-ellipsis-group");
|
|
92
|
+
let state = false;
|
|
93
|
+
for (let i = 0; i < ellipsisNodes.length; i++) {
|
|
94
|
+
if (state === false && ellipsisNodes[i].contains(e.target)) {
|
|
95
|
+
state = true;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
return state;
|
|
99
|
+
}
|
|
100
|
+
|
|
86
101
|
contextMenuClicked(action, param) {
|
|
87
102
|
this.props.contextMenuActionHandler(action, param);
|
|
88
103
|
}
|
|
@@ -716,7 +716,10 @@ export default class APIPipeline {
|
|
|
716
716
|
}
|
|
717
717
|
|
|
718
718
|
setNodeProperties(nodeId, properties) {
|
|
719
|
-
|
|
719
|
+
let newNode = cloneDeep(this.getNode(nodeId));
|
|
720
|
+
newNode = Object.assign(newNode, properties);
|
|
721
|
+
newNode = this.objectModel.setNodeAttributes(newNode);
|
|
722
|
+
this.store.dispatch({ type: "REPLACE_NODE", data: { node: newNode }, pipelineId: this.pipelineId });
|
|
720
723
|
}
|
|
721
724
|
|
|
722
725
|
setNodeMessage(nodeId, message) {
|
|
@@ -736,17 +739,11 @@ export default class APIPipeline {
|
|
|
736
739
|
}
|
|
737
740
|
|
|
738
741
|
setNodeInputPorts(nodeId, inputs) {
|
|
739
|
-
|
|
740
|
-
node.inputs = inputs;
|
|
741
|
-
const newNode = this.objectModel.setNodeAttributes(node);
|
|
742
|
-
this.store.dispatch({ type: "REPLACE_NODE", data: { node: newNode }, pipelineId: this.pipelineId });
|
|
742
|
+
this.setNodeProperties(nodeId, { inputs });
|
|
743
743
|
}
|
|
744
744
|
|
|
745
745
|
setNodeOutputPorts(nodeId, outputs) {
|
|
746
|
-
|
|
747
|
-
node.outputs = outputs;
|
|
748
|
-
const newNode = this.objectModel.setNodeAttributes(node);
|
|
749
|
-
this.store.dispatch({ type: "REPLACE_NODE", data: { node: newNode }, pipelineId: this.pipelineId });
|
|
746
|
+
this.setNodeProperties(nodeId, { outputs });
|
|
750
747
|
}
|
|
751
748
|
|
|
752
749
|
addCustomAttrToNodes(nodeIds, attrName, attrValue) {
|
|
@@ -57,7 +57,7 @@ const portsHorizontalDefaultLayout = {
|
|
|
57
57
|
labelSingleLine: true, // false allow multi-line labels
|
|
58
58
|
labelOutline: false,
|
|
59
59
|
labelMaxCharacters: null, // null allows unlimited characters
|
|
60
|
-
labelAllowReturnKey: false, // true allows line feed to be inserted into label
|
|
60
|
+
labelAllowReturnKey: false, // true allows line feed to be inserted into label, "save" to make the return key save the label.
|
|
61
61
|
|
|
62
62
|
// An array of decorations to be applied to the node. For details see:
|
|
63
63
|
// https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification
|
|
@@ -82,7 +82,7 @@ const portsHorizontalDefaultLayout = {
|
|
|
82
82
|
|
|
83
83
|
// Width and height for label decorators
|
|
84
84
|
decoratorLabelWidth: 80,
|
|
85
|
-
decoratorLabelHeight:
|
|
85
|
+
decoratorLabelHeight: 30,
|
|
86
86
|
|
|
87
87
|
// Display drop shadow under and round the nodes
|
|
88
88
|
dropShadow: true,
|
|
@@ -294,7 +294,7 @@ const portsHorizontalDefaultLayout = {
|
|
|
294
294
|
|
|
295
295
|
// Width and height for label decorators
|
|
296
296
|
linkDecoratorLabelWidth: 80,
|
|
297
|
-
linkDecoratorLabelHeight:
|
|
297
|
+
linkDecoratorLabelHeight: 30,
|
|
298
298
|
|
|
299
299
|
// Values for drawing connectors. wrapAroundSpacing and
|
|
300
300
|
// wrapAroundNodePadding are used when curved connectors are drawn all the
|
|
@@ -448,7 +448,7 @@ const portsVerticalDefaultLayout = {
|
|
|
448
448
|
labelSingleLine: true, // false allow multi-line labels
|
|
449
449
|
labelOutline: false,
|
|
450
450
|
labelMaxCharacters: null, // null allows unlimited characters
|
|
451
|
-
labelAllowReturnKey: false, // true allows line feed to be inserted into label
|
|
451
|
+
labelAllowReturnKey: false, // true allows line feed to be inserted into label, "save" to make the return key save the label.
|
|
452
452
|
|
|
453
453
|
// An array of decorations to be applied to the node. For details see:
|
|
454
454
|
// https://github.com/elyra-ai/canvas/wiki/2.4.2-Decoration-Specification
|
|
@@ -473,7 +473,7 @@ const portsVerticalDefaultLayout = {
|
|
|
473
473
|
|
|
474
474
|
// Width and height for label decorators
|
|
475
475
|
decoratorLabelWidth: 80,
|
|
476
|
-
decoratorLabelHeight:
|
|
476
|
+
decoratorLabelHeight: 30,
|
|
477
477
|
|
|
478
478
|
// Display drop shadow under and round the nodes
|
|
479
479
|
dropShadow: false,
|
|
@@ -685,7 +685,7 @@ const portsVerticalDefaultLayout = {
|
|
|
685
685
|
|
|
686
686
|
// Width and height for label decorators
|
|
687
687
|
linkDecoratorLabelWidth: 80,
|
|
688
|
-
linkDecoratorLabelHeight:
|
|
688
|
+
linkDecoratorLabelHeight: 30,
|
|
689
689
|
|
|
690
690
|
// Values for drawing connectors. wrapAroundSpacing and
|
|
691
691
|
// wrapAroundNodePadding are used when curved connectors are drawn all the
|
|
@@ -365,7 +365,7 @@ export default class PipelineOutHandler {
|
|
|
365
365
|
canvasInfoLinks.forEach((link) => {
|
|
366
366
|
if (link.type === "commentLink" &&
|
|
367
367
|
link.srcNodeId === commentId) {
|
|
368
|
-
const newLink = { node_ref: link.trgNodeId };
|
|
368
|
+
const newLink = { id: link.id, node_ref: link.trgNodeId };
|
|
369
369
|
if (link.class_name) {
|
|
370
370
|
newLink.class_name = link.class_name;
|
|
371
371
|
}
|
|
@@ -155,7 +155,6 @@ export default (state = {}, action) => {
|
|
|
155
155
|
case "REPLACE_NODES":
|
|
156
156
|
case "REPLACE_NODE":
|
|
157
157
|
case "SIZE_AND_POSITION_OBJECTS":
|
|
158
|
-
case "SET_NODE_PROPERTIES":
|
|
159
158
|
case "SET_NODE_PARAMETERS":
|
|
160
159
|
case "SET_NODE_UI_PARAMETERS":
|
|
161
160
|
case "SET_NODE_MESSAGE":
|
|
@@ -123,15 +123,6 @@ export default (state = [], action) => {
|
|
|
123
123
|
return !nodeFound;
|
|
124
124
|
});
|
|
125
125
|
|
|
126
|
-
case "SET_NODE_PROPERTIES":
|
|
127
|
-
return state.map((node, index) => {
|
|
128
|
-
if (action.data.nodeId === node.id) {
|
|
129
|
-
const newNode = Object.assign({}, node, action.data.properties);
|
|
130
|
-
return newNode;
|
|
131
|
-
}
|
|
132
|
-
return node;
|
|
133
|
-
});
|
|
134
|
-
|
|
135
126
|
case "SET_NODE_PARAMETERS":
|
|
136
127
|
return state.map((node, index) => {
|
|
137
128
|
if (action.data.nodeId === node.id) {
|