From bcabf03b8c73cf240bba7aa1b120225f15c9a87f Mon Sep 17 00:00:00 2001 From: srikant Date: Tue, 23 Jan 2024 23:39:54 +0530 Subject: [PATCH 1/9] #1671 Tabbing to the information icon opens the tooltip but it doesn't close (#1672) --- .../common-canvas/src/tooltip/tooltip.jsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx index 4723a12aa2..05661935ba 100644 --- a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx +++ b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx @@ -32,6 +32,7 @@ class ToolTip extends React.Component { this.uuid = uuid4(); this.pendingTooltip = null; this.hideTooltipOnScrollAndResize = this.hideTooltipOnScrollAndResize.bind(this); + this.tabKeyPressed = false; } componentDidMount() { @@ -82,6 +83,12 @@ class ToolTip extends React.Component { } } + setKeyPressed(evt) { + if (evt.key === "Tab") { + this.tabKeyPressed = true; + } + } + getStyleValue(value) { return value + "px"; } @@ -337,10 +344,14 @@ class ToolTip extends React.Component { const mousedown = () => this.setTooltipVisible(false); // `focus` event occurs before `click`. Adding timeout in onFocus function to ensure click is executed first. // Ref - https://stackoverflow.com/a/49512400 + const onKeyDown = (evt) => this.setKeyPressed(evt); const onFocus = () => this.showTooltipWithDelay(); const onBlur = (evt) => { - // Keep tooltip visible when clicked on a link. - if (evt.relatedTarget === null) { + // Close the tooltip if tab is click + if (this.tabKeyPressed) { + this.setTooltipVisible(false); + this.tabKeyPressed = false; + } else if (evt.relatedTarget === null) { // Keep tooltip visible when clicked on a link. this.setTooltipVisible(false); } }; @@ -355,6 +366,7 @@ class ToolTip extends React.Component { onClick={this.props.showToolTipOnClick ? click : null} onFocus={this.props.showToolTipOnClick ? onFocus : null} // When focused using keyboard onBlur={this.props.showToolTipOnClick ? onBlur : null} + onKeyDown={this.props.showToolTipOnClick ? onKeyDown : null} tabIndex={this.props.showToolTipOnClick ? 0 : null} role={this.props.showToolTipOnClick ? "button" : null} aria-labelledby={this.props.showToolTipOnClick ? `${this.uuid}-${this.props.id}` : null} From aeb29af560fcc7bdd2bf2d5a63ebd0000aa141e1 Mon Sep 17 00:00:00 2001 From: Sara Akhtar <102617933+sara-akhtar@users.noreply.github.com> Date: Tue, 30 Jan 2024 04:04:02 +0400 Subject: [PATCH 2/9] #1676 New Translation Update (#1677) --- .../common-canvas/locales/common-properties/locales/de.json | 1 + .../common-canvas/locales/common-properties/locales/es.json | 1 + .../common-canvas/locales/common-properties/locales/fr.json | 1 + .../common-canvas/locales/common-properties/locales/it.json | 1 + .../common-canvas/locales/common-properties/locales/ja.json | 1 + .../common-canvas/locales/common-properties/locales/ko.json | 1 + .../common-canvas/locales/common-properties/locales/pt-br.json | 1 + .../common-canvas/locales/common-properties/locales/sv.json | 1 + .../common-canvas/locales/common-properties/locales/zh-CN.json | 1 + .../common-canvas/locales/common-properties/locales/zh-TW.json | 1 + 10 files changed, 10 insertions(+) diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/de.json b/canvas_modules/common-canvas/locales/common-properties/locales/de.json index 4c135a5b7d..8b3c4f3cf4 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/de.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/de.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "Keine Werte gefunden", "expression.functions.table.label": "Tabelle 'Funktionen'", "expression.fields.dropdown": "Felder", + "expression.add.column": "Hinzufügen", "expression.fields.title": "Felder", "expression.values.title": "Werte", "expression.field.column": "Feld", diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/es.json b/canvas_modules/common-canvas/locales/common-properties/locales/es.json index eafb505b0f..95e19e4e89 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/es.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/es.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "Ningún valor encontrado", "expression.functions.table.label": "Tabla de funciones", "expression.fields.dropdown": "Campos", + "expression.add.column": "Añadir", "expression.fields.title": "Campos", "expression.values.title": "Valores", "expression.field.column": "Campo", diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/fr.json b/canvas_modules/common-canvas/locales/common-properties/locales/fr.json index ee65a824ed..cfc0dd737b 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/fr.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/fr.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "Aucune valeur trouvée", "expression.functions.table.label": "Table Fonctions", "expression.fields.dropdown": "Zones", + "expression.add.column": "Ajouter", "expression.fields.title": "Zones", "expression.values.title": "Valeurs", "expression.field.column": "Champ", diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/it.json b/canvas_modules/common-canvas/locales/common-properties/locales/it.json index 75c68803af..65ec740058 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/it.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/it.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "Nessun valore trovato", "expression.functions.table.label": "Tabella funzioni", "expression.fields.dropdown": "Campi", + "expression.add.column": "Aggiungi", "expression.fields.title": "Campi", "expression.values.title": "Valori", "expression.field.column": "Campo", diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/ja.json b/canvas_modules/common-canvas/locales/common-properties/locales/ja.json index 149beb5df1..93cf8ced57 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/ja.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/ja.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "値が見つかりませんでした", "expression.functions.table.label": "関数の表", "expression.fields.dropdown": "フィールド", + "expression.add.column": "追加", "expression.fields.title": "フィールド", "expression.values.title": "値", "expression.field.column": "フィールド", diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/ko.json b/canvas_modules/common-canvas/locales/common-properties/locales/ko.json index df7c3c73cd..8fe03e28c5 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/ko.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/ko.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "값을 찾을 수 없음", "expression.functions.table.label": "함수 테이블", "expression.fields.dropdown": "필드(E)", + "expression.add.column": "추가", "expression.fields.title": "필드(E)", "expression.values.title": "값", "expression.field.column": "필드", diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/pt-br.json b/canvas_modules/common-canvas/locales/common-properties/locales/pt-br.json index eec235e11e..023731dbff 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/pt-br.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/pt-br.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "Nenhum valor localizado", "expression.functions.table.label": "Tabela de funções", "expression.fields.dropdown": "Campos", + "expression.add.column": "Incluir", "expression.fields.title": "Campos", "expression.values.title": "Valores", "expression.field.column": "Campo", diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/sv.json b/canvas_modules/common-canvas/locales/common-properties/locales/sv.json index 29d40bad28..d961ee9f40 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/sv.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/sv.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "Inga värden hittades", "expression.functions.table.label": "Funktionstabell", "expression.fields.dropdown": "Fält", + "expression.add.column": "Lägg till", "expression.fields.title": "Fält", "expression.values.title": "Värden", "expression.field.column": "Fält", diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/zh-CN.json b/canvas_modules/common-canvas/locales/common-properties/locales/zh-CN.json index 445545a1aa..f75d9bacd9 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/zh-CN.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/zh-CN.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "找不到值", "expression.functions.table.label": "函数表", "expression.fields.dropdown": "字段", + "expression.add.column": "添加", "expression.fields.title": "字段", "expression.values.title": "值", "expression.field.column": "字段", diff --git a/canvas_modules/common-canvas/locales/common-properties/locales/zh-TW.json b/canvas_modules/common-canvas/locales/common-properties/locales/zh-TW.json index bd2cb6cbb2..d2150c356c 100644 --- a/canvas_modules/common-canvas/locales/common-properties/locales/zh-TW.json +++ b/canvas_modules/common-canvas/locales/common-properties/locales/zh-TW.json @@ -56,6 +56,7 @@ "expression.values.empty.table.label": "沒有找到數值", "expression.functions.table.label": "功能表格", "expression.fields.dropdown": "欄位", + "expression.add.column": "新增", "expression.fields.title": "欄位", "expression.values.title": "值", "expression.field.column": "欄位", From 824152ecc78ca31a7d92f5e12c722bdce074b6e4 Mon Sep 17 00:00:00 2001 From: CTomlyn Date: Wed, 31 Jan 2024 14:02:31 -0800 Subject: [PATCH 3/9] #1678 In dark mode, text displayed with incorrect color when editing a comment with bkg-col-white-0 class applied (#1679) --- .../common-canvas/src/common-canvas/svg-canvas-d3.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss index 35312fd0e9..bc82fe6c81 100644 --- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss +++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss @@ -640,7 +640,7 @@ $link-highlight-color: $support-04; } .d3-comment-entry { background-color: $background-color; - color: $gray-100; + color: $text-color; } } From e71a2b4552b65b4403f8e7c3a3d0096ac10e65f8 Mon Sep 17 00:00:00 2001 From: srikant Date: Fri, 2 Feb 2024 22:57:22 +0530 Subject: [PATCH 4/9] Add Support for New Slider in Common Properties (#1675) --- .../common-properties/controls/slider-test.js | 246 +++++++++++++ .../paramDefs/slider_paramDef.json | 334 ++++++++++++++++++ .../constants/form-constants.js | 1 + .../controls/control-factory.js | 7 +- .../common-properties/controls/controls.scss | 1 + .../controls/slider/index.js | 18 + .../controls/slider/slider.jsx | 96 +++++ .../controls/slider/slider.scss | 44 +++ .../src/common-properties/form/ControlInfo.js | 6 + .../src/common-properties/form/EditorForm.js | 4 + .../common-properties/form/ParameterInfo.js | 8 + .../parameterDefs/slider_paramDef.json | 334 ++++++++++++++++++ 12 files changed, 1098 insertions(+), 1 deletion(-) create mode 100644 canvas_modules/common-canvas/__tests__/common-properties/controls/slider-test.js create mode 100644 canvas_modules/common-canvas/__tests__/test_resources/paramDefs/slider_paramDef.json create mode 100644 canvas_modules/common-canvas/src/common-properties/controls/slider/index.js create mode 100644 canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx create mode 100644 canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss create mode 100644 canvas_modules/harness/test_resources/parameterDefs/slider_paramDef.json diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/slider-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/slider-test.js new file mode 100644 index 0000000000..a6400a9319 --- /dev/null +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/slider-test.js @@ -0,0 +1,246 @@ +/* + * Copyright 2017-2023 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. + */ + +import React from "react"; +import { + mount +} from "../../_utils_/mount-utils.js"; +import propertyUtils from "../../_utils_/property-utils"; +import Controller from "./../../../src/common-properties/properties-controller"; +import { Provider } from "react-redux"; +import { expect } from "chai"; +import sinon from "sinon"; +import { Slider } from "carbon-components-react"; +import SliderControl from "./../../../src/common-properties/controls/slider"; +import sliderParamDef from "../../test_resources/paramDefs/slider_paramDef.json"; + +describe("SliderControl renders correctly", () => { + + const propertyId = { + name: "test-slider" + }; + + const controller = new Controller(); + + const control = { + name: "test-slider", + controlType: "slider", + minValue: 1, + maxValue: 10, + increment: 1, + light: true + }; + + propertyUtils.setControls(controller, [control]); + + beforeEach(() => { + controller.setErrorMessages({}); + controller.setControlStates({}); + }); + + + it("renders a Slider component", () => { + const wrapper = mount( + + + + ); + expect(wrapper.find(Slider)).to.have.length(1); + }); + + it("handles formatLabel function correctly", () => { + const wrapper = mount( + + + + ); + const sliderProps = wrapper.find(Slider).props(); + + const formatLabel = sliderProps.formatLabel; + expect(formatLabel(1)).to.equal(1); + expect(formatLabel(10)).to.equal(10); + expect(formatLabel(5)).to.equal(5); + }); + + + it("renders ValidationMessage component", () => { + const wrapper = mount( + + + + ); + expect(wrapper.find("ValidationMessage")).to.have.length(1); + }); + + it("renders ValidationMessage component", () => { + const wrapper = mount( + + + + ); + expect(wrapper.find("ValidationMessage")).to.have.length(1); + }); + + it("handles change event correctly", () => { + const wrapper = mount( + + + + ); + const sliderProps = wrapper.find(Slider).props(); + const handleChangeSpy = sinon.spy(controller, "updatePropertyValue"); + + // Simulate a change event on the Slider + sliderProps.onChange({ value: 7 }); + + // Ensure that handleChange method is called with the correct arguments + expect(handleChangeSpy.calledOnceWithExactly(propertyId, 7)).to.be.false; + + // Clean up the spy + handleChangeSpy.restore(); + }); + + it("handles formatLabel function correctly without minValue and maxValue", () => { + const controlWithLabels = { + name: "test-slider", + minValue: null, + maxValue: null, + increment: null, + light: true + }; + + const wrapper2 = mount( + + + + ); + + wrapper2.setProps({ + control: controlWithLabels, + }); + + const sliderProps = wrapper2.find(Slider).props(); + + expect(sliderProps.formatLabel(10)).to.equal(10); + }); + + it("handles formatLabel function correctly with minValue and maxValue", () => { + const controlWithLabels = { + name: "test-slider", + minValue: 1, + maxValue: 10, + increment: 1, + light: true + }; + + const wrapper2 = mount( + + + + ); + + wrapper2.setProps({ + control: controlWithLabels, + }); + + const sliderProps = wrapper2.find(Slider).props(); + + expect(sliderProps.formatLabel(1)).to.equal(1); + + expect(sliderProps.formatLabel(10)).to.equal(10); + }); + + it("renders ValidationMessage component", () => { + const wrapper = mount( + + + + ); + expect(wrapper.find("ValidationMessage")).to.have.length(1); + }); +}); + +describe("error messages renders correctly for slider controls", () => { + let wrapper; + + beforeEach(() => { + const renderedObject = propertyUtils.flyoutEditorForm(sliderParamDef); + wrapper = renderedObject.wrapper; + }); + afterEach(() => { + wrapper.unmount(); + }); + + it("slider component should have correct classnames", () => { + expect(wrapper.find("div.properties-slider")).to.have.length(8); + }); +}); diff --git a/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/slider_paramDef.json b/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/slider_paramDef.json new file mode 100644 index 0000000000..1f707824d3 --- /dev/null +++ b/canvas_modules/common-canvas/__tests__/test_resources/paramDefs/slider_paramDef.json @@ -0,0 +1,334 @@ +{ + "titleDefinition": { + "title": "Slider with Min Max" + }, + "current_parameters": { + "slider": 50, + "slider_double": 0.5, + "slider_null": null, + "slider_error": 50, + "slider_warning": 0, + "hide": true, + "slider_hidden": 0, + "disable": true, + "slider_disable": 50 + }, + "parameters": [ + { + "id": "disable", + "type": "boolean" + }, + { + "id": "slider", + "type": "integer" + }, + { + "id": "slider_double", + "type": "double" + }, + { + "id": "slider_empty", + "type": "integer" + }, + { + "id": "slider_undefined", + "type": "integer" + }, + { + "id": "slider_null", + "type": "integer" + }, + { + "id": "hide", + "type": "boolean" + }, + { + "id": "slider_hidden", + "type": "integer", + "required": true + }, + { + "id": "slider_disable", + "type": "integer", + "required": true + }, + { + "id": "slider_warning", + "type": "integer", + "required": true + }, + { + "id": "slider_error", + "type": "integer", + "required": true, + "default": 20 + } + ], + "complex_types": [ + { + "id": "sliders", + "parameters": [] + } + ], + "uihints": { + "id": "slider", + "icon": "images/default.svg", + "label": { + "default": "Slider Values" + }, + "parameter_info": [ + { + "parameter_ref": "slider", + "label": { + "default": "Slider Testing" + }, + "description": { + "default": "Slider Testing" + }, + "control": "slider", + "min_value": 10, + "max_value": 100, + "increment": 10, + "class_name": "slider-control-class" + }, + { + "parameter_ref": "slider_double", + "label": { + "default": "Slider Double Testing" + }, + "description": { + "default": "Slider Double Testing" + }, + "control": "slider", + "min_value": 0.1, + "max_value": 1, + "increment": 0.1, + "class_name": "slider-control-class" + }, + { + "parameter_ref": "slider_empty", + "label": { + "default": "Empty" + }, + "description": { + "default": "slider with parameter value set to '\"\"'" + }, + "control": "slider" + }, + { + "parameter_ref": "slider_null", + "label": { + "default": "Null" + }, + "description": { + "default": "slider with parameter value set to 'null'" + }, + "control": "slider" + }, + { + "parameter_ref": "slider_undefined", + "label": { + "default": "Undefined" + }, + "description": { + "default": "slider with parameter value set to 'undefined'" + }, + "control": "slider" + }, + { + "parameter_ref": "hide", + "label": { + "default": "Hide 'Slider Hidden'" + } + }, + { + "parameter_ref": "slider_hidden", + "label": { + "default": "Slider Hidden" + }, + "description": { + "default": "Slider Hidden Testing" + }, + "control": "slider", + "min_value": 0, + "max_value": 10, + "increment": 1 + }, + { + "parameter_ref": "slider_warning", + "label": { + "default": "Warning" + }, + "description": { + "default": "Slider with warning when set more than 8" + }, + "control": "slider", + "min_value": 0, + "max_value": 10, + "increment": 1 + }, + { + "parameter_ref": "slider_error", + "label": { + "default": "Error" + }, + "control": "slider", + "min_value": 10, + "max_value": 100, + "increment": 10, + "description": { + "default": "Slider error with range more than Max'" + } + }, + { + "parameter_ref": "disable", + "label": { + "default": "Disable 'Slider'" + } + }, + { + "parameter_ref": "slider_disable", + "label": { + "default": "Slider Disable Testing" + }, + "description": { + "default": "Slider Disable Testing" + }, + "control": "slider", + "min_value": 10, + "max_value": 100, + "increment": 10, + "class_name": "slider-control-class" + } + ], + "complex_type_info": [], + "group_info": [ + { + "id": "slider-values", + "label": { + "default": "Values" + }, + "type": "controls", + "parameter_refs": [ + "slider", + "slider_double", + "slider_empty", + "slider_null", + "slider_undefined" + ] + }, + { + "id": "slider", + "label": { + "default": "Conditions" + }, + "type": "controls", + "parameter_refs": [ + "hide", + "slider_hidden", + "disable", + "slider_disable" + ] + }, + { + "id": "slider-conditions", + "label": { + "default": "Error Handling" + }, + "type": "controls", + "parameter_refs": [ + "slider_error", + "slider_warning" + ] + } + ] + }, + "conditions": [ + { + "validation": { + "fail_message": { + "type": "warning", + "focus_parameter_ref": "slider_warning", + "message": { + "default": "Slider value to be less than 8" + } + }, + "evaluate": { + "condition": { + "parameter_ref": "slider_warning", + "op": "lessThan", + "value": 8 + } + } + } + }, + { + "validation": { + "fail_message": { + "type": "error", + "focus_parameter_ref": "slider_error", + "message": { + "default": "Needs to be greater than 10" + } + }, + "evaluate": { + "condition": { + "parameter_ref": "slider_error", + "op": "greaterThan", + "value": 9 + } + } + } + }, + { + "validation": { + "fail_message": { + "type": "error", + "focus_parameter_ref": "slider_error", + "message": { + "default": "Needs to be less than 100" + } + }, + "evaluate": { + "condition": { + "parameter_ref": "slider_error", + "op": "lessThan", + "value": 101 + } + } + } + }, + { + "visible": { + "parameter_refs": [ + "slider_hidden" + ], + "evaluate": { + "condition": { + "parameter_ref": "hide", + "op": "equals", + "value": false + } + } + } + }, + { + "enabled": { + "parameter_refs": [ + "slider_disable" + ], + "evaluate": { + "condition": { + "parameter_ref": "disable", + "op": "equals", + "value": false + } + } + } + } + ], + "resources": { + "slider.min.label": "MinLabelWIthLongText", + "slider.max.label": "Max" + } +} diff --git a/canvas_modules/common-canvas/src/common-properties/constants/form-constants.js b/canvas_modules/common-canvas/src/common-properties/constants/form-constants.js index 74d8a0b2bc..a4cfd1c6b8 100644 --- a/canvas_modules/common-canvas/src/common-properties/constants/form-constants.js +++ b/canvas_modules/common-canvas/src/common-properties/constants/form-constants.js @@ -81,6 +81,7 @@ const ControlType = { DATEFIELD: "datefield", DATEPICKER: "datepicker", DATEPICKERRANGE: "datepickerRange", + SLIDER: "slider", TIMEFIELD: "timefield", TIMESTAMP: "timestampfield", CHECKBOX: "checkbox", diff --git a/canvas_modules/common-canvas/src/common-properties/controls/control-factory.js b/canvas_modules/common-canvas/src/common-properties/controls/control-factory.js index cfd42c5207..1ef2ef8a76 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/control-factory.js +++ b/canvas_modules/common-canvas/src/common-properties/controls/control-factory.js @@ -48,6 +48,7 @@ import StructureEditorControl from "./structureeditor"; import StructureTableControl from "./structuretable"; import StructurelisteditorControl from "./structurelisteditor"; import ReadonlyTableControl from "./readonlytable"; +import Slider from "./slider"; import ControlItem from "./../components/control-item"; import ActionFactory from "./../actions/action-factory.js"; @@ -82,7 +83,8 @@ const accessibleControls = [ ControlType.ONEOFSELECT, ControlType.MULTISELECT, ControlType.SELECTSCHEMA, - ControlType.SELECTCOLUMN + ControlType.SELECTCOLUMN, + ControlType.SLIDER ]; const tableControls = [ @@ -337,6 +339,9 @@ export default class ControlFactory { rightFlyout={this.rightFlyout} />); break; + case (ControlType.SLIDER): + createdControl = (); + break; default: createdControl = (); } diff --git a/canvas_modules/common-canvas/src/common-properties/controls/controls.scss b/canvas_modules/common-canvas/src/common-properties/controls/controls.scss index 393cf2b98f..01037c59da 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/controls.scss +++ b/canvas_modules/common-canvas/src/common-properties/controls/controls.scss @@ -32,6 +32,7 @@ @import "./multiselect/multiselect"; @import "./datepicker-range/datepicker-range"; @import "./datepicker/datepicker"; +@import "./slider/slider"; .properties-ctrl-wrapper { padding-bottom: $spacing-05; // Adds padding to the control diff --git a/canvas_modules/common-canvas/src/common-properties/controls/slider/index.js b/canvas_modules/common-canvas/src/common-properties/controls/slider/index.js new file mode 100644 index 0000000000..fc3c10726d --- /dev/null +++ b/canvas_modules/common-canvas/src/common-properties/controls/slider/index.js @@ -0,0 +1,18 @@ +/* + * Copyright 2017-2023 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. + */ + +import Slider from "./slider.jsx"; +export default Slider; diff --git a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx new file mode 100644 index 0000000000..59b6747c75 --- /dev/null +++ b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.jsx @@ -0,0 +1,96 @@ +/* + * Copyright 2017-2023 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. + */ + +import React from "react"; +import PropTypes from "prop-types"; +import { Slider } from "carbon-components-react"; +import { connect } from "react-redux"; +import classNames from "classnames"; +import { v4 as uuid4 } from "uuid"; + +import * as ControlUtils from "../../util/control-utils"; +import ValidationMessage from "../../components/validation-message"; +import { STATES } from "../../constants/constants"; + + +class SliderControl extends React.Component { + constructor(props) { + super(props); + this.handleChange = this.handleChange.bind(this); + this.uuid = uuid4(); + } + + handleChange(e) { + this.props.controller.updatePropertyValue(this.props.propertyId, e.value); + } + + render() { + const minLabel = this.props.controller.getResource(`${this.props.control.name}.min.label`, null); + const maxLabel = this.props.controller.getResource(`${this.props.control.name}.max.label`, null); + const minValue = this.props.control.minValue ? this.props.control.minValue : 0; + const maxValue = this.props.control.maxValue ? this.props.control.maxValue : 10; + const step = this.props.control.increment ? this.props.control.increment : 1; + + return ( +
+ label || val + } + /> + +
+ ); + } +} + +SliderControl.propTypes = { + control: PropTypes.object.isRequired, + propertyId: PropTypes.object.isRequired, + controller: PropTypes.object.isRequired, + controlItem: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.element + ]), // list control passes string + tableControl: PropTypes.bool, + state: PropTypes.string, // pass in by redux + value: PropTypes.number, // pass in by redux + messageInfo: PropTypes.object // pass in by redux +}; + + +const mapStateToProps = (state, ownProps) => ({ + value: ownProps.controller.getPropertyValue(ownProps.propertyId), + state: ownProps.controller.getControlState(ownProps.propertyId), + valueStates: ownProps.controller.getControlValueStates(ownProps.propertyId), + messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId), + controlOpts: ownProps.controller.getFilteredEnumItems(ownProps.propertyId, ownProps.control) +}); + +export default connect(mapStateToProps, null)(SliderControl); + diff --git a/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss new file mode 100644 index 0000000000..52c4d0b73f --- /dev/null +++ b/canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss @@ -0,0 +1,44 @@ +/* + * Copyright 2017-2023 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. + */ + +.properties-slider { + .bx--slider-container { + min-width: 100%; + + .bx--slider { + min-width: unset; // Default Carbon Component Slider has a fixed min-width of 12.5rem so unset it to make it responsive + } + } + &.error { + .bx--text-input--invalid, .bx--text-input { + outline: unset; + outline-offset: unset; + } + input[type="number"]:not([disabled]) { + border: 2px solid $support-01; + } + } + &.warning { + .bx--text-input--invalid, .bx--text-input { + outline: unset; + outline-offset: unset; + } + input[type="number"]:not([disabled]) { + border: 2px solid $support-03; + } + } + +} 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 05f82793f1..9a1dc88747 100644 --- a/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js +++ b/canvas_modules/common-canvas/src/common-properties/form/ControlInfo.js @@ -82,6 +82,12 @@ export class Control { if (settings.increment) { this.increment = settings.increment; } + if (settings.minValue) { + this.minValue = settings.minValue; + } + if (settings.maxValue) { + this.maxValue = settings.maxValue; + } if (settings.generatedValues) { this.generatedValues = {}; if (settings.generatedValues.operation) { 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 d7296b6bbe..8daf742c74 100644 --- a/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js +++ b/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js @@ -484,6 +484,8 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition, case Type.DOUBLE: if (parameter.isList()) { controlType = ControlType.TEXTAREA; + } else if (parameter.control === ControlType.SLIDER) { + controlType = ControlType.SLIDER; } else { controlType = ControlType.NUMBERFIELD; } @@ -636,6 +638,8 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition, settings.enableMaximize = parameter.enableMaximize; settings.summary = parameter.summary; settings.increment = parameter.increment; + settings.minValue = parameter.minValue; + settings.maxValue = parameter.maxValue; settings.rowSelection = rowSelection; settings.generatedValues = parameter.generatedValues; settings.addRemoveRows = addRemoveRows; diff --git a/canvas_modules/common-canvas/src/common-properties/form/ParameterInfo.js b/canvas_modules/common-canvas/src/common-properties/form/ParameterInfo.js index 3b333d7e64..caf5819e09 100644 --- a/canvas_modules/common-canvas/src/common-properties/form/ParameterInfo.js +++ b/canvas_modules/common-canvas/src/common-properties/form/ParameterInfo.js @@ -65,6 +65,12 @@ export class ParameterDef { if (settings.charLimit) { this.charLimit = settings.charLimit; } + if (settings.minValue) { + this.minValue = settings.minValue; + } + if (settings.maxValue) { + this.maxValue = settings.maxValue; + } if (settings.placeHolderText) { this.placeHolderText = ResourceDef.make(settings.placeHolderText); } @@ -330,6 +336,8 @@ export class ParameterDef { "orientation": propertyOf(uihint)("orientation"), "width": propertyOf(uihint)("width"), "charLimit": propertyOf(uihint)("char_limit"), + "minValue": propertyOf(uihint)("min_value"), + "maxValue": propertyOf(uihint)("max_value"), "placeHolderText": propertyOf(uihint)("place_holder_text"), "separator": propertyOf(uihint)("separator"), "resource_key": propertyOf(uihint)("resource_key"), diff --git a/canvas_modules/harness/test_resources/parameterDefs/slider_paramDef.json b/canvas_modules/harness/test_resources/parameterDefs/slider_paramDef.json new file mode 100644 index 0000000000..0be6d13041 --- /dev/null +++ b/canvas_modules/harness/test_resources/parameterDefs/slider_paramDef.json @@ -0,0 +1,334 @@ +{ + "titleDefinition": { + "title": "Slider with Min Max" + }, + "current_parameters": { + "slider": 50, + "slider_double": 0.5, + "slider_null": null, + "slider_error": 50, + "slider_warning": 0, + "hide": true, + "slider_hidden": 0, + "disable": true, + "slider_disable": 50 + }, + "parameters": [ + { + "id": "disable", + "type": "boolean" + }, + { + "id": "slider", + "type": "integer" + }, + { + "id": "slider_double", + "type": "double" + }, + { + "id": "slider_empty", + "type": "integer" + }, + { + "id": "slider_undefined", + "type": "integer" + }, + { + "id": "slider_null", + "type": "integer" + }, + { + "id": "hide", + "type": "boolean" + }, + { + "id": "slider_hidden", + "type": "integer", + "required": true + }, + { + "id": "slider_disable", + "type": "integer", + "required": true + }, + { + "id": "slider_warning", + "type": "integer", + "required": true + }, + { + "id": "slider_error", + "type": "integer", + "required": true, + "default": 20 + } + ], + "complex_types": [ + { + "id": "sliders", + "parameters": [] + } + ], + "uihints": { + "id": "slider", + "icon": "images/default.svg", + "label": { + "default": "Slider Values" + }, + "parameter_info": [ + { + "parameter_ref": "slider", + "label": { + "default": "Slider Testing" + }, + "description": { + "default": "Slider Testing" + }, + "control": "slider", + "min_value": 10, + "max_value": 100, + "increment": 10, + "class_name": "slider-control-class" + }, + { + "parameter_ref": "slider_double", + "label": { + "default": "Slider Double Testing" + }, + "description": { + "default": "Slider Double Testing" + }, + "control": "slider", + "min_value": 0.1, + "max_value": 1, + "increment": 0.1, + "class_name": "slider-control-class" + }, + { + "parameter_ref": "slider_empty", + "label": { + "default": "Empty" + }, + "description": { + "default": "slider with parameter value set to '\"\"'" + }, + "control": "slider" + }, + { + "parameter_ref": "slider_null", + "label": { + "default": "Null" + }, + "description": { + "default": "slider with parameter value set to 'null'" + }, + "control": "slider" + }, + { + "parameter_ref": "slider_undefined", + "label": { + "default": "Undefined" + }, + "description": { + "default": "slider with parameter value set to 'undefined'" + }, + "control": "slider" + }, + { + "parameter_ref": "hide", + "label": { + "default": "Hide 'Slider Hidden'" + } + }, + { + "parameter_ref": "slider_hidden", + "label": { + "default": "Slider Hidden" + }, + "description": { + "default": "Slider Hidden Testing" + }, + "control": "slider", + "min_value": 0, + "max_value": 10, + "increment": 1 + }, + { + "parameter_ref": "slider_warning", + "label": { + "default": "Warning" + }, + "description": { + "default": "Slider with warning when set more than 8" + }, + "control": "slider", + "min_value": 0, + "max_value": 10, + "increment": 1 + }, + { + "parameter_ref": "slider_error", + "label": { + "default": "Error" + }, + "control": "slider", + "min_value": 10, + "max_value": 100, + "increment": 1, + "description": { + "default": "Slider error with range more than Max'" + } + }, + { + "parameter_ref": "disable", + "label": { + "default": "Disable 'Slider'" + } + }, + { + "parameter_ref": "slider_disable", + "label": { + "default": "Slider Disable Testing" + }, + "description": { + "default": "Slider Disable Testing" + }, + "control": "slider", + "min_value": 10, + "max_value": 100, + "increment": 10, + "class_name": "slider-control-class" + } + ], + "complex_type_info": [], + "group_info": [ + { + "id": "slider-values", + "label": { + "default": "Values" + }, + "type": "controls", + "parameter_refs": [ + "slider", + "slider_double", + "slider_empty", + "slider_null", + "slider_undefined" + ] + }, + { + "id": "slider", + "label": { + "default": "Conditions" + }, + "type": "controls", + "parameter_refs": [ + "hide", + "slider_hidden", + "disable", + "slider_disable" + ] + }, + { + "id": "slider-conditions", + "label": { + "default": "Error Handling" + }, + "type": "controls", + "parameter_refs": [ + "slider_error", + "slider_warning" + ] + } + ] + }, + "conditions": [ + { + "validation": { + "fail_message": { + "type": "warning", + "focus_parameter_ref": "slider_warning", + "message": { + "default": "Slider value to be less than 8" + } + }, + "evaluate": { + "condition": { + "parameter_ref": "slider_warning", + "op": "lessThan", + "value": 8 + } + } + } + }, + { + "validation": { + "fail_message": { + "type": "error", + "focus_parameter_ref": "slider_error", + "message": { + "default": "Needs to be greater than 10" + } + }, + "evaluate": { + "condition": { + "parameter_ref": "slider_error", + "op": "greaterThan", + "value": 9 + } + } + } + }, + { + "validation": { + "fail_message": { + "type": "error", + "focus_parameter_ref": "slider_error", + "message": { + "default": "Needs to be less than 100" + } + }, + "evaluate": { + "condition": { + "parameter_ref": "slider_error", + "op": "lessThan", + "value": 101 + } + } + } + }, + { + "visible": { + "parameter_refs": [ + "slider_hidden" + ], + "evaluate": { + "condition": { + "parameter_ref": "hide", + "op": "equals", + "value": false + } + } + } + }, + { + "enabled": { + "parameter_refs": [ + "slider_disable" + ], + "evaluate": { + "condition": { + "parameter_ref": "disable", + "op": "equals", + "value": false + } + } + } + } + ], + "resources": { + "slider.min.label": "Min", + "slider.max.label": "Max" + } +} From 73d2afcc4f3d8305bef846f200befc572b67a9da Mon Sep 17 00:00:00 2001 From: srikant Date: Mon, 5 Feb 2024 20:25:23 +0530 Subject: [PATCH 5/9] #1684 : Add Slider Control Documentation in Common Properties (#1687) --- .../src/common-properties/form/EditorForm.js | 2 - .../common-properties-components.jsx | 56 ++++++++++++++++++- .../common-properties-conditions.jsx | 2 + .../properties-documentation-constants.js | 50 +++++++++++++++++ 4 files changed, 107 insertions(+), 3 deletions(-) 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 8daf742c74..66a67d8d16 100644 --- a/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js +++ b/canvas_modules/common-canvas/src/common-properties/form/EditorForm.js @@ -484,8 +484,6 @@ function _makeControl(parameterMetadata, paramName, group, structureDefinition, case Type.DOUBLE: if (parameter.isList()) { controlType = ControlType.TEXTAREA; - } else if (parameter.control === ControlType.SLIDER) { - controlType = ControlType.SLIDER; } else { controlType = ControlType.NUMBERFIELD; } 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 415e86e1a3..4327663759 100644 --- a/canvas_modules/harness/src/client/components/common-properties-components.jsx +++ b/canvas_modules/harness/src/client/components/common-properties-components.jsx @@ -91,7 +91,8 @@ import { STRUCTURETABLE_GENERATED_VALUES_PROPS_INFO, STRUCTURETABLE_GENERATED_VALUES_DEFAULT_PROPS_INFO, ACTION_PROPS_INFO, - ACTION_IMAGE_PROPS_INFO + ACTION_IMAGE_PROPS_INFO, + SLIDER_PROPS_INFO } from "../constants/properties-documentation-constants.js"; import { CommonProperties } from "common-canvas"; // eslint-disable-line import/no-unresolved @@ -309,6 +310,25 @@ class CommonPropertiesComponents extends React.Component { "datepickerControlName.range.end.helper" ]; break; + case "slider": + jsonReplacer = [ + "current_parameters", + "sliderControlname", + "parameters", + "id", "type", "default", + "uihints", + "parameter_info", + "parameter_ref", "label", + "description", + "control", + "min_value", + "max_value", + "increment", + "resources", + "sliderControlName.min.label", + "sliderControlName.max.label", + ]; + break; case "timefield": jsonReplacer = [ "current_parameters", @@ -414,6 +434,7 @@ class CommonPropertiesComponents extends React.Component { "--selectschema", "--selectcolumn", "--selectcolumns", + "--slider", "--toggle", "--toggletext", "Complex", @@ -1645,6 +1666,38 @@ class CommonPropertiesComponents extends React.Component { +
+

slider

+

A slider control is rendered for a parameter of control=slider. + This control contains adjustable content where the value can be increased or decreased by moving the handle along horizontal track. + The slider accepts additional uihints for the + min max and increment. +

+

+ The 'Step' is defined using the 'increment' parameter in UI hints. It determines how many increments the input value and slider handle will jump when the handle is moved. + Additionally, an input box can be used to enter values within the min_value and max_value range. +

+

+ Helper text is available by providing a resource key in the parameterDef. + Similarly, the minimum value and maximum value labels are also available to customize through resource labels. + Look at the example json to see the format. +

+
+
+ + {this.renderRightFlyoutButton(SLIDER_PROPS_INFO)} +
+
+ 
+								{this.jsonReplacer(SLIDER_PROPS_INFO.parameterDef, "slider")}
+
+
+
+

toggle

A two-state control, They are commonly used for “on/off” switches. @@ -1734,6 +1787,7 @@ class CommonPropertiesComponents extends React.Component {

  • radioset
  • oneofselect
  • selectschema
    • +
  • slider
    • diff --git a/canvas_modules/harness/src/client/components/common-properties-conditions.jsx b/canvas_modules/harness/src/client/components/common-properties-conditions.jsx index 2e89762cdb..c9c7a2f4aa 100644 --- a/canvas_modules/harness/src/client/components/common-properties-conditions.jsx +++ b/canvas_modules/harness/src/client/components/common-properties-conditions.jsx @@ -347,6 +347,8 @@ class CommonPropertiesComponents extends React.Component { dmMeasurementEquals: "yes", dmMeasurementNotEquals: "yes", dmRoleEquals: "yes", dmRoleNotEquals: "yes", lengthEquals: "no", lengthGreaterThan: "no", lengthLessThan: "no" }, { Control: "selectcolumns ([string])", empty: "yes", greaterLessThan: "no", equals: "yes", contains: "yes", matches: "no", colNotExists: "no", isDateTime: "no", dmTypeEquals: "yes", dmTypeNotEquals: "yes", dmMeasurementEquals: "yes", dmMeasurementNotEquals: "yes", dmRoleEquals: "yes", dmRoleNotEquals: "yes", lengthEquals: "yes", lengthGreaterThan: "yes", lengthLessThan: "yes" }, + { Control: "slider (number)", empty: "yes", greaterLessThan: "yes", equals: "yes", contains: "no", matches: "no", colNotExists: "no", isDateTime: "no", dmTypeEquals: "no", dmTypeNotEquals: "no", + dmMeasurementEquals: "no", dmMeasurementNotEquals: "no", dmRoleEquals: "no", dmRoleNotEquals: "no", lengthEquals: "no", lengthGreaterThan: "no", lengthLessThan: "no" }, { Control: "someofselect ([string])", empty: "yes", greaterLessThan: "no", equals: "yes", contains: "yes", matches: "no", colNotExists: "no", isDateTime: "no", dmTypeEquals: "no", dmTypeNotEquals: "no", dmMeasurementEquals: "no", dmMeasurementNotEquals: "no", dmRoleEquals: "no", dmRoleNotEquals: "no", lengthEquals: "yes", lengthGreaterThan: "yes", lengthLessThan: "yes" }, { Control: "textarea (string/[string])", empty: "yes", greaterLessThan: "no", equals: "yes", contains: "yes", matches: "no", colNotExists: "no", isDateTime: "no", dmTypeEquals: "no", dmTypeNotEquals: "no", 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 304d14db18..5b77c36e28 100644 --- a/canvas_modules/harness/src/client/constants/properties-documentation-constants.js +++ b/canvas_modules/harness/src/client/constants/properties-documentation-constants.js @@ -2272,6 +2272,56 @@ _defineConstant("DATEPICKER_RANGE_PROPS_INFO", { } } }); +_defineConstant("SLIDER_PROPS_INFO", { + "title": "Slider Title", + "parameterDef": { + "titleDefinition": { + "title": "Control: slider", + "editable": false + }, + "current_parameters": { + "sliderControlName": 10 + }, + "parameters": [ + { + "id": "sliderControlName", + "type": "slider", + "default": 10 + } + ], + "uihints": { + "id": "sliderControlName", + "parameter_info": [ + { + "parameter_ref": "sliderControlName", + "label": { + "default": "Slider Control Name" + }, + "description": { + "default": "Slider test" + }, + "control": "slider", + "min_value": 1, + "max_value": 100, + "increment": 1 + } + ], + "group_info": [ + { + "id": "sliderControlName", + "type": "controls", + "parameter_refs": [ + "sliderControlName" + ] + } + ] + }, + "resources": { + "sliderControlName.min.label": "1", + "sliderControlName.max.label": "100" + } + } +}); _defineConstant("CHECKBOX_SINGLE_PROPS_INFO", { "title": "Checkbox Title", "parameterDef": { From 5458b862d68b3797eff0e96d07b0bbefbafbf3a3 Mon Sep 17 00:00:00 2001 From: Veena S <151116685+veenas1@users.noreply.github.com> Date: Tue, 6 Feb 2024 17:34:02 +0530 Subject: [PATCH 6/9] #1682 [Dark mode] Text Analysis and other nodes - overlay color (#1683) --- .../common-properties/components/wide-flyout/wide-flyout.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/canvas_modules/common-canvas/src/common-properties/components/wide-flyout/wide-flyout.scss b/canvas_modules/common-canvas/src/common-properties/components/wide-flyout/wide-flyout.scss index 5c482c2fc7..5cd0e577b9 100644 --- a/canvas_modules/common-canvas/src/common-properties/components/wide-flyout/wide-flyout.scss +++ b/canvas_modules/common-canvas/src/common-properties/components/wide-flyout/wide-flyout.scss @@ -24,12 +24,11 @@ $properties-modal-buttons-height: 64px; left: 0; right: 0; bottom: 0; - background-color: $text-01; + background-color: $overlay-01; z-index: 1000; cursor: default; &.show { display: block; - opacity: 0.5; } } From 18eed58f805ca1cfe61f4f6b8a815c4f9edd709a Mon Sep 17 00:00:00 2001 From: CTomlyn Date: Tue, 6 Feb 2024 09:41:48 -0800 Subject: [PATCH 7/9] Change patch to minor release (#1688) --- scripts/publish_modules.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/publish_modules.sh b/scripts/publish_modules.sh index 284fd9a16b..26c9fb6eee 100755 --- a/scripts/publish_modules.sh +++ b/scripts/publish_modules.sh @@ -52,7 +52,7 @@ setup_git_branch checkout_branch ${MAIN} cd ./canvas_modules/common-canvas -npm version patch +npm version minor NPM_VERSION=`node -p "require('./package.json').version"` echo "Updated main build $NPM_VERSION" commit_changes ${MAIN} "Update Elyra Canvas to version ${NPM_VERSION} [skip ci]" From df5f0a58cb5a654b2bb090c118010ce535681601 Mon Sep 17 00:00:00 2001 From: Automated build Date: Tue, 6 Feb 2024 18:15:05 +0000 Subject: [PATCH 8/9] Update Elyra Canvas to version 12.41.0 [skip ci] --- canvas_modules/common-canvas/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/canvas_modules/common-canvas/package.json b/canvas_modules/common-canvas/package.json index 071ad370e1..4966f40ecb 100644 --- a/canvas_modules/common-canvas/package.json +++ b/canvas_modules/common-canvas/package.json @@ -1,6 +1,6 @@ { "name": "@elyra/canvas", - "version": "12.40.1", + "version": "12.41.0", "description": "Elyra common-canvas", "main": "dist/common-canvas.js", "module": "dist/common-canvas.es.js", From e2177cd23ece55a85c003f6913e3acfd49e62d67 Mon Sep 17 00:00:00 2001 From: srikant Date: Wed, 7 Feb 2024 03:05:19 +0530 Subject: [PATCH 9/9] #1685 : Set tooltip visible based on closest for link click (#1686) --- canvas_modules/common-canvas/src/tooltip/tooltip.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx index 05661935ba..5b178f0252 100644 --- a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx +++ b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx @@ -351,8 +351,15 @@ class ToolTip extends React.Component { if (this.tabKeyPressed) { this.setTooltipVisible(false); this.tabKeyPressed = false; - } else if (evt.relatedTarget === null) { // Keep tooltip visible when clicked on a link. - this.setTooltipVisible(false); + } else { + // Check if evt.relatedTarget is a child of .common-canvas-tooltip to set tooltip visible when clicked on link + const el = evt?.relatedTarget?.closest(".common-canvas-tooltip"); + if (el?.tagName?.toLowerCase() === "div") { + this.setTooltipVisible(true); + } else { + // Close the tooltip if evt.relatedTarget is not a child of .common-canvas-tooltip + this.setTooltipVisible(false); + } } }; const click = (evt) => this.toggleTooltipOnClick(evt);