This is an automated email from the ASF dual-hosted git repository. marat pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
The following commit(s) were added to refs/heads/main by this push: new 8040929a revert pull/#1314 8040929a is described below commit 8040929ac65dace0c6fe8b81e88a66211b41f420 Author: Marat Gubaidullin <ma...@talismancloud.io> AuthorDate: Thu Jun 13 18:06:44 2024 -0400 revert pull/#1314 --- .../src/main/webui/src/designer/karavan.css | 42 +- .../property/property/DslPropertyField.tsx | 35 +- .../property/property/KameletPropertyField.tsx | 24 +- karavan-designer/src/designer/karavan.css | 665 +++++++++++---------- .../property/property/DslPropertyField.tsx | 35 +- .../property/property/KameletPropertyField.tsx | 24 +- 6 files changed, 421 insertions(+), 404 deletions(-) diff --git a/karavan-app/src/main/webui/src/designer/karavan.css b/karavan-app/src/main/webui/src/designer/karavan.css index 0b2bf425..99a0392d 100644 --- a/karavan-app/src/main/webui/src/designer/karavan.css +++ b/karavan-app/src/main/webui/src/designer/karavan.css @@ -146,7 +146,6 @@ height: 160px; } - .kamelets-page .kamelet-card .pf-v5-c-card__header { padding-top: var(--pf-v5-global--spacer--sm); } @@ -189,12 +188,13 @@ padding: 5px; display: flex; flex-direction: row; - justify-content:flex-end; + justify-content: flex-end; } -.kamelets-page .kamelet-card .header-labels .pf-v5-c-card__header-main{ + +.kamelets-page .kamelet-card .header-labels .pf-v5-c-card__header-main { display: flex; flex-direction: row; - justify-content:space-between; + justify-content: space-between; } .kamelets-page .kamelet-card .footer-labels { @@ -320,7 +320,12 @@ min-width: 0px; } -.karavan .page .main-tabs-wrapper .main-tabs .pf-v5-c-tabs__link .pf-v5-c-tabs__item-icon { +.karavan +.page +.main-tabs-wrapper +.main-tabs +.pf-v5-c-tabs__link +.pf-v5-c-tabs__item-icon { height: 24px; margin-right: 0; } @@ -416,8 +421,8 @@ .karavan .dsl-page .graph .connections .path-incoming { stroke-dasharray: 5; - -webkit-animation: dashdraw .5s linear infinite; - animation: dashdraw .5s linear infinite; + -webkit-animation: dashdraw 0.5s linear infinite; + animation: dashdraw 0.5s linear infinite; stroke: var(--pf-v5-global--Color--200); stroke-width: 1; fill: transparent; @@ -442,15 +447,15 @@ .karavan .dsl-page .graph .connections .path-seda { stroke-dasharray: 2; stroke: var(--pf-v5-global--Color--200); - -webkit-animation: dashdraw .5s linear infinite; - animation: dashdraw .5s linear infinite; + -webkit-animation: dashdraw 0.5s linear infinite; + animation: dashdraw 0.5s linear infinite; stroke-width: 1; fill: transparent; } @keyframes dashdraw { 0% { - stroke-dashoffset: 10 + stroke-dashoffset: 10; } } @@ -514,7 +519,6 @@ margin: 0 auto 3px auto; } - .element-builder:hover .add-button, .karavan .step-element:hover .add-element-button, .karavan .step-element:hover .add-button { @@ -548,7 +552,6 @@ overflow-wrap: anywhere; } - /*Beans*/ .karavan .rest-page .properties .bean-properties .pf-v5-c-form__group-control { display: flex; @@ -616,7 +619,6 @@ padding: 0; } - .karavan .project-builder .card-header svg { margin-right: 6px; } @@ -710,15 +712,15 @@ background-color: var(--pf-v5-global--BackgroundColor--light-300); margin-bottom: 100px; } -.karavan .knowledbase-eip-section .pf-v5-c-toggle-group{ - margin:16px; -} +.karavan .knowledbase-eip-section .pf-v5-c-toggle-group { + margin: 16px; +} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - margin: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 0; } \ No newline at end of file diff --git a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx index 32d2d269..db35ddb4 100644 --- a/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx +++ b/karavan-app/src/main/webui/src/designer/property/property/DslPropertyField.tsx @@ -361,21 +361,22 @@ export function DslPropertyField(props: Props) { <InputGroupItem isFill> <TextInput ref={ref} className="text-field" isRequired - type={property.secret ? "password" : isNumber ? "number" : "text"} + type={property.secret ? "password" : "text"} id={property.name} name={property.name} value={textValue?.toString()} customIcon={property.type !== 'string' ? <Text component={TextVariants.p}>{property.type}</Text> : undefined} onBlur={_ => { - if (isNumber) { - propertyChanged(property.name, textValue ? Number(textValue):'') + if (isNumber && isNumeric((textValue))) { + propertyChanged(property.name, Number(textValue)) } else if (!isNumber) { propertyChanged(property.name, textValue) } }} onFocus={_ => setCheckChanges(true)} onChange={(_, v) => { - if (isNumber) { + + if (isNumber && isNumeric(v)) { setTextValue(v); setCheckChanges(true); } else if (!isNumber) { @@ -402,10 +403,10 @@ export function DslPropertyField(props: Props) { title={property.displayName} onClose={() => setShowEditor(false)} onSave={(fieldId, value1) => { - propertyChanged(property.name, value1) - setTextValue(value1); - setShowEditor(false); - }}/> + propertyChanged(property.name, value1) + setTextValue(value1); + setShowEditor(false); + }}/> </InputGroupItem>} </InputGroup> } @@ -456,10 +457,10 @@ export function DslPropertyField(props: Props) { title="Java Class" onClose={() => setShowEditor(false)} onSave={(fieldId, value1) => { - propertyChanged(fieldId, value); - InfrastructureAPI.onSaveCustomCode?.(value, value1); - setShowEditor(false) - }}/> + propertyChanged(fieldId, value); + InfrastructureAPI.onSaveCustomCode?.(value, value1); + setShowEditor(false) + }}/> </InputGroupItem>} </InputGroup>) } @@ -499,10 +500,10 @@ export function DslPropertyField(props: Props) { title={`Expression (${dslLanguage?.[0]})`} onClose={() => setShowEditor(false)} onSave={(fieldId, value1) => { - propertyChanged(fieldId, value1); - setTextValue(value1); - setShowEditor(false); - }}/> + propertyChanged(fieldId, value1); + setTextValue(value1); + setShowEditor(false); + }}/> </InputGroupItem>} </InputGroup> ) @@ -1015,4 +1016,4 @@ export function DslPropertyField(props: Props) { {getInfrastructureSelectorModal()} </div> ) -} +} \ No newline at end of file diff --git a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx index f8cfd07c..c17a6e05 100644 --- a/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx +++ b/karavan-app/src/main/webui/src/designer/property/property/KameletPropertyField.tsx @@ -208,9 +208,9 @@ export function KameletPropertyField(props: Props) { </InputGroup> } - // function isNumeric (num: any) { - // return (typeof(num) === 'number' || (typeof(num) === "string" && num.trim() !== '')) && !isNaN(num as number); - // } + function isNumeric (num: any) { + return (typeof(num) === 'number' || (typeof(num) === "string" && num.trim() !== '')) && !isNaN(num as number); + } function getNumberInput() { return ( @@ -218,16 +218,22 @@ export function KameletPropertyField(props: Props) { name={id} className="text-field" isRequired - type='number' + // type='number' value={textValue?.toString()} customIcon={<Text component={TextVariants.p}>{property.type}</Text>} - onBlur={(_) => { - parametersChanged(property.id, Number(textValue)) + onBlur={_ => { + if (isNumeric((textValue))) { + parametersChanged(property.id, Number(textValue)) + } }} onChange={(_, v) => { - setTextValue(v); - setCheckChanges(true); - }} + if (isNumeric(v)) { + setTextValue(v); + setCheckChanges(true); + } else { + setTextValue(textValue); + } + }} /> ) } diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css index d1e8dd1c..99a0392d 100644 --- a/karavan-designer/src/designer/karavan.css +++ b/karavan-designer/src/designer/karavan.css @@ -15,563 +15,564 @@ * limitations under the License. */ :root { - --pf-v5-global--FontSize--md: 14px; + --pf-v5-global--FontSize--md: 14px; } .karavan .tools-section { - padding-top: 0px; - padding-bottom: 0px; - padding-right: 0; - border-bottom: 1px solid #eee; - background-color: white; + padding-top: 0px; + padding-bottom: 0px; + padding-right: 0; + border-bottom: 1px solid #eee; + background-color: white; } .karavan .tools-section .dsl-title { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .karavan .tools-section .dsl-title .title { - margin-right: 16px; + margin-right: 16px; } .karavan .tools-section .tools .header { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .karavan .tools-section .tools .header .labels { - height: fit-content; - margin-left: 3px; + height: fit-content; + margin-left: 3px; } .karavan .brand { - height: 36px; + height: 36px; } .karavan .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle, .pf-v5-c-modal-box .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle { - outline: transparent; - outline-offset: 0; + outline: transparent; + outline-offset: 0; } .karavan .header-button { - margin-left: var(--pf-v5-c-page__header-tools--MarginRight); + margin-left: var(--pf-v5-c-page__header-tools--MarginRight); } .karavan .page-header { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .karavan .page-header .top-toolbar .pf-v5-c-page__header-tools { - margin-right: 0; + margin-right: 0; } .karavan .page-header .top-toolbar { - width: 100%; + width: 100%; } .karavan .page-header .pf-v5-c-page__header-brand { - padding-right: 16px; + padding-right: 16px; } .filler { - width: 100%; + width: 100%; } .modal-footer { - width: 100%; + width: 100%; } .modal-footer .deploy-buttons .pf-v5-c-form__actions { - justify-content: flex-end; - margin-top: 16px; + justify-content: flex-end; + margin-top: 16px; } .modal-footer .deploy-buttons .pf-v5-c-button { - margin-left: 16px; + margin-left: 16px; } .action-buttons .pf-v5-c-form__actions { - justify-content: flex-end; - margin-top: 16px; + justify-content: flex-end; + margin-top: 16px; } .action-buttons .pf-v5-c-button { - margin-left: 16px; + margin-left: 16px; } .pf-v5-c-modal-box__footer .hidden { - display: none; + display: none; } .upload-buttons .pf-v5-c-form__actions { - margin-top: 20px; - justify-content: flex-end; + margin-top: 20px; + justify-content: flex-end; } /*integration page*/ .integration-page .integration-card { - cursor: pointer; - height: 160px; + cursor: pointer; + height: 160px; } .integration-page .integration-card .pf-v5-c-card__header { - padding-right: 6px; + padding-right: 6px; } .integration-page .integration-card .icon { - height: 24px; + height: 24px; } .integration-page .integration-card .delete-button { - font-size: 17px; - line-height: 1; - border: 0; - padding: 0; - margin: 0; - background: transparent; - color: #b1b1b7; - visibility: hidden; + font-size: 17px; + line-height: 1; + border: 0; + padding: 0; + margin: 0; + background: transparent; + color: #b1b1b7; + visibility: hidden; } .integration-page .integration-card:hover .delete-button { - visibility: visible; + visibility: visible; } /*kamelets*/ .kamelets-page .kamelet-card { - cursor: pointer; - height: 160px; + cursor: pointer; + height: 160px; } .kamelets-page .kamelet-card .pf-v5-c-card__header { - padding-top: var(--pf-v5-global--spacer--sm); + padding-top: var(--pf-v5-global--spacer--sm); } .kamelets-page .kamelet-card .pf-v5-c-card__header .custom { - margin-left: auto; + margin-left: auto; } .kamelets-page .kamelet-card .pf-v5-c-card__header .pf-v5-c-card__header-main { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .kamelets-page .kamelet-card .pf-v5-c-card__title { - font-size: 15px; - font-weight: 400; + font-size: 15px; + font-weight: 400; } .kamelets-page .kamelet-card .pf-v5-c-card__body { - overflow: hidden; - position: relative; - line-height: 1.6em; + overflow: hidden; + position: relative; + line-height: 1.6em; } .kamelets-page .kamelet-card .icon { - height: 24px; - max-width: 24px; - margin-top: auto; - margin-bottom: auto; - margin-right: 5px; - border: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; + height: 24px; + max-width: 24px; + margin-top: auto; + margin-bottom: auto; + margin-right: 5px; + border: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; } .kamelets-page .kamelet-card .header-labels { - padding: 5px; - display: flex; - flex-direction: row; - justify-content: flex-end; + padding: 5px; + display: flex; + flex-direction: row; + justify-content: flex-end; } + .kamelets-page .kamelet-card .header-labels .pf-v5-c-card__header-main { - display: flex; - flex-direction: row; - justify-content: space-between; + display: flex; + flex-direction: row; + justify-content: space-between; } .kamelets-page .kamelet-card .footer-labels { - padding: 5px; - display: flex; - flex-direction: row; - justify-content: space-between; + padding: 5px; + display: flex; + flex-direction: row; + justify-content: space-between; } .kamelets-page .kamelet-card .version, .kamelets-page .kamelet-card .support-type, .kamelets-page .kamelet-card .support-level { - white-space: nowrap; + white-space: nowrap; } .kamelets-page .kamelet-card .labels { - opacity: 0.5; - font-weight: 200; + opacity: 0.5; + font-weight: 200; } .kamelets-page .kamelet-card:hover .labels { - opacity: 1; + opacity: 1; } /*kamelet modal*/ .kamelet-modal-card .pf-v5-c-card__header { - padding-right: 6px; - display: flex; - justify-content: space-between; + padding-right: 6px; + display: flex; + justify-content: space-between; } .kamelet-modal-card .pf-v5-c-card__title { - font-weight: 600; + font-weight: 600; } .kamelet-modal-card .description { - overflow: hidden; - position: relative; - max-width: 600px; + overflow: hidden; + position: relative; + max-width: 600px; } .kamelet-modal-card .icon { - height: 36px; - width: 36px; - margin-top: auto; - margin-bottom: auto; - border: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; + height: 36px; + width: 36px; + margin-top: auto; + margin-bottom: auto; + border: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; } .karavan .page { - height: 100vh; - width: 100%; - overflow: hidden; - display: flex; - flex-direction: column; + height: 100vh; + width: 100%; + overflow: hidden; + display: flex; + flex-direction: column; } .karavan main { - overflow: hidden; + overflow: hidden; } /*DSL*/ .karavan .dsl-page { - height: 100%; + height: 100%; } .karavan .dsl-page .dsl-page-columns { - display: block; - height: 100%; - background: #fafafa; - padding-bottom: 66px; + display: block; + height: 100%; + background: #fafafa; + padding-bottom: 66px; } .karavan .top-icon { - height: 24px; + height: 24px; } .karavan .designer-page { - display: flex; - flex-direction: column; - height: 100%; + display: flex; + flex-direction: column; + height: 100%; } .karavan .designer-page .project-page-section { - background-color: white; + background-color: white; } .karavan .page .main-tabs-wrapper { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: relative; } .karavan .page .main-tabs-wrapper::before { - content: ""; - position: absolute; - right: 0; - bottom: 0; - left: 0; - border: solid; - border-width: 0 0 var(--pf-v5-global--BorderWidth--sm) 0; - border-bottom-color: var(--pf-v5-global--BorderColor--100); + content: ""; + position: absolute; + right: 0; + bottom: 0; + left: 0; + border: solid; + border-width: 0 0 var(--pf-v5-global--BorderWidth--sm) 0; + border-bottom-color: var(--pf-v5-global--BorderColor--100); } .karavan .page .main-tabs-wrapper .main-tabs .top-menu-item { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .karavan .page .main-tabs-wrapper .main-tabs .top-menu-item .count { - background: var(--pf-v5-global--active-color--100); - color: white; - height: fit-content; - margin-top: auto; - margin-bottom: auto; - min-width: 0px; + background: var(--pf-v5-global--active-color--100); + color: white; + height: fit-content; + margin-top: auto; + margin-bottom: auto; + min-width: 0px; } .karavan - .page - .main-tabs-wrapper - .main-tabs - .pf-v5-c-tabs__link - .pf-v5-c-tabs__item-icon { - height: 24px; - margin-right: 0; +.page +.main-tabs-wrapper +.main-tabs +.pf-v5-c-tabs__link +.pf-v5-c-tabs__item-icon { + height: 24px; + margin-right: 0; } .karavan .page .main-tabs-wrapper .main-tabs .pf-v5-c-tabs__item-text { - font-weight: bold; - margin-top: auto; - margin-bottom: auto; - margin-right: 6px; + font-weight: bold; + margin-top: auto; + margin-bottom: auto; + margin-right: 6px; } .karavan .designer-page .page .main-tabs-wrapper .hide-log { - white-space: nowrap; - margin-right: 16px; + white-space: nowrap; + margin-right: 16px; } /*Properties*/ .karavan .dsl-page .properties { - padding: 10px 10px 10px 10px; - background: transparent; - width: 100%; - height: 100%; - overflow: auto; - display: flex; - flex-direction: column; - justify-content: space-between; - margin-bottom: 20px; - padding-bottom: 30px; + padding: 10px 10px 10px 10px; + background: transparent; + width: 100%; + height: 100%; + overflow: auto; + display: flex; + flex-direction: column; + justify-content: space-between; + margin-bottom: 20px; + padding-bottom: 30px; } .karavan .pf-v5-c-drawer__splitter { - width: 2px; - background-color: #fcfcfc; + width: 2px; + background-color: #fcfcfc; } .karavan .pf-v5-c-drawer__splitter-handle { - display: none; + display: none; } /*Graph*/ .karavan .dsl-page .graph { - display: block; - flex-direction: column; - height: 100%; - width: 100%; - position: relative; - overflow-y: auto; + display: block; + flex-direction: column; + height: 100%; + width: 100%; + position: relative; + overflow-y: auto; } .karavan .dsl-page .flows { - width: 100%; - position: absolute; - padding-bottom: 66px; + width: 100%; + position: absolute; + padding-bottom: 66px; } .karavan .dsl-page .flows .add-flow { - margin-top: 16px; - display: flex; - justify-content: center; - gap: 6px; + margin-top: 16px; + display: flex; + justify-content: center; + gap: 6px; } /*connections*/ .karavan .dsl-page .graph .connections { - position: absolute; - top: 0; - left: 0; - background: transparent; + position: absolute; + top: 0; + left: 0; + background: transparent; } .karavan .dsl-page .graph .connections .icon { - height: 20px; - width: 20px; + height: 20px; + width: 20px; } .karavan .dsl-page .graph .connections .arrow { - stroke: var(--pf-v5-global--Color--200); - fill: var(--pf-v5-global--Color--200); + stroke: var(--pf-v5-global--Color--200); + fill: var(--pf-v5-global--Color--200); } .karavan .dsl-page .graph .connections .path { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; + stroke: var(--pf-v5-global--Color--200); + stroke-width: 1; + fill: transparent; } .karavan .dsl-page .graph .connections .circle-outgoing, .karavan .dsl-page .graph .connections .circle-incoming { - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: white; + stroke: var(--pf-v5-global--Color--200); + stroke-width: 1; + fill: white; } .karavan .dsl-page .graph .connections .path-incoming { - stroke-dasharray: 5; - -webkit-animation: dashdraw 0.5s linear infinite; - animation: dashdraw 0.5s linear infinite; - stroke: var(--pf-v5-global--Color--200); - stroke-width: 1; - fill: transparent; + stroke-dasharray: 5; + -webkit-animation: dashdraw 0.5s linear infinite; + animation: dashdraw 0.5s linear infinite; + stroke: var(--pf-v5-global--Color--200); + stroke-width: 1; + fill: transparent; } .karavan .dsl-page .graph .connections .path-direct { - stroke-dasharray: 0; - stroke: var(--pf-v5-global--Color--200); - stroke-width: 0.7; - stroke-opacity: 0.7; - fill: transparent; + stroke-dasharray: 0; + stroke: var(--pf-v5-global--Color--200); + stroke-width: 0.7; + stroke-opacity: 0.7; + fill: transparent; } .karavan .dsl-page .graph .connections .path-direct-selected { - stroke-dasharray: 0; - stroke: var(--pf-v5-global--active-color--100); - stroke-width: 1; - stroke-opacity: 1; - fill: transparent; + stroke-dasharray: 0; + stroke: var(--pf-v5-global--active-color--100); + stroke-width: 1; + stroke-opacity: 1; + fill: transparent; } .karavan .dsl-page .graph .connections .path-seda { - stroke-dasharray: 2; - stroke: var(--pf-v5-global--Color--200); - -webkit-animation: dashdraw 0.5s linear infinite; - animation: dashdraw 0.5s linear infinite; - stroke-width: 1; - fill: transparent; + stroke-dasharray: 2; + stroke: var(--pf-v5-global--Color--200); + -webkit-animation: dashdraw 0.5s linear infinite; + animation: dashdraw 0.5s linear infinite; + stroke-width: 1; + fill: transparent; } @keyframes dashdraw { - 0% { - stroke-dashoffset: 10; - } + 0% { + stroke-dashoffset: 10; + } } .karavan .dsl-page .flows .step-element { - align-items: center; - text-align: center; - display: flex; - flex-direction: column; - width: fit-content; - border-color: var(--pf-v5-global--Color--200); - border-radius: 42px; - border-width: 1px; - min-width: 120px; - padding: 3px 4px 4px 4px; - margin: 3px auto 0 auto; - position: relative; + align-items: center; + text-align: center; + display: flex; + flex-direction: column; + width: fit-content; + border-color: var(--pf-v5-global--Color--200); + border-radius: 42px; + border-width: 1px; + min-width: 120px; + padding: 3px 4px 4px 4px; + margin: 3px auto 0 auto; + position: relative; } .karavan { - --step-border-color: var(--pf-v5-global--Color--200); - --step-border-color-selected: var(--pf-v5-global--active-color--100); + --step-border-color: var(--pf-v5-global--Color--200); + --step-border-color-selected: var(--pf-v5-global--active-color--100); } .karavan .dsl-page .flows .children { - display: flex; - flex-wrap: wrap; - flex-wrap: nowrap; - gap: 6px; + display: flex; + flex-wrap: wrap; + flex-wrap: nowrap; + gap: 6px; } .karavan .dsl-page .flows .has-child { - display: flex; - flex-direction: column; - flex-wrap: nowrap; - gap: 6px; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + gap: 6px; } .karavan .dsl-page .flows .hidden-step { - display: none; + display: none; } .element-builder .add-button { - top: 0; - right: 5px; - font-size: 15px; - line-height: 1; - border: 0; - padding: 0; - margin: 3px auto 0 auto; - background: transparent; - color: var(--pf-v5-global--primary-color--100); - visibility: hidden; - height: 100%; - display: flex; - flex-direction: column; - justify-content: flex-end; - width: 16px; + top: 0; + right: 5px; + font-size: 15px; + line-height: 1; + border: 0; + padding: 0; + margin: 3px auto 0 auto; + background: transparent; + color: var(--pf-v5-global--primary-color--100); + visibility: hidden; + height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 16px; } .element-builder .add-button svg { - margin: 0 auto 3px auto; + margin: 0 auto 3px auto; } .element-builder:hover .add-button, .karavan .step-element:hover .add-element-button, .karavan .step-element:hover .add-button { - visibility: visible; + visibility: visible; } .dsl-gallery { - margin-top: 16px; + margin-top: 16px; } .move-modal { - width: 270px !important; + width: 270px !important; } .move-modal .pf-v5-c-modal-box__body { - margin-right: 0 !important; + margin-right: 0 !important; } .move-modal .pf-v5-m-plain { - display: none; + display: none; } .yaml-code { - overflow: auto; - height: 100%; - width: 100%; - padding-bottom: 100px; + overflow: auto; + height: 100%; + width: 100%; + padding-bottom: 100px; } .pf-v5-c-popover__footer { - overflow-wrap: anywhere; + overflow-wrap: anywhere; } /*Beans*/ .karavan .rest-page .properties .bean-properties .pf-v5-c-form__group-control { - display: flex; - flex-direction: column; - gap: 6px; + display: flex; + flex-direction: column; + gap: 6px; } .karavan .rest-page .properties .bean-property { - display: flex; - flex-direction: row; - gap: 3px; + display: flex; + flex-direction: row; + gap: 3px; } .karavan .rest-page .properties .bean-property .delete-button { - padding: 3px; - color: #b1b1b7; + padding: 3px; + color: #b1b1b7; } /*YAML*/ .karavan .yaml-page { - height: 100px; + height: 100px; } /*Exception*/ @@ -581,145 +582,145 @@ .karavan .templates-page, .karavan .exception-page, .karavan .error-page { - flex: 1; - overflow: auto; + flex: 1; + overflow: auto; } .karavan .templates-page-columns, .karavan .exception-page-columns, .karavan .error-page-columns { - height: 100%; - background: #fafafa; + height: 100%; + background: #fafafa; } .karavan .templates-page-columns .pf-v5-c-empty-state, .karavan .exception-page-columns .pf-v5-c-empty-state, .karavan .error-page-columns .pf-v5-c-empty-state { - margin: auto; - height: 100%; + margin: auto; + height: 100%; } /* Help */ .dont-show { - margin-right: auto; + margin-right: auto; } /* Project Tools */ .karavan .project-builder { - height: 100%; + height: 100%; } .karavan .project-builder .tools-section { - padding-left: 10px; - padding-right: 10px; + padding-left: 10px; + padding-right: 10px; } .karavan .project-builder .pf-v5-c-toolbar__content { - padding: 0; + padding: 0; } .karavan .project-builder .card-header svg { - margin-right: 6px; + margin-right: 6px; } .karavan .project-builder .card-disabled { - opacity: 0.4; + opacity: 0.4; } .karavan .project-builder .pf-v5-c-form { - --pf-v5-c-form--GridGap: 1em; + --pf-v5-c-form--GridGap: 1em; } .karavan .project-builder .pf-v5-c-card__body { - --pf-v5-c-card--child--PaddingRight: 0.5em; - --pf-v5-c-card--child--PaddingBottom: 1em; - --pf-v5-c-card--child--PaddingLeft: 1em; + --pf-v5-c-card--child--PaddingRight: 0.5em; + --pf-v5-c-card--child--PaddingBottom: 1em; + --pf-v5-c-card--child--PaddingLeft: 1em; } .karavan .project-builder .pf-v5-c-card__header { - --pf-v5-c-card--first-child--PaddingTop: 0.5em; + --pf-v5-c-card--first-child--PaddingTop: 0.5em; } .karavan .project-builder .center { - height: 100%; - width: 100%; - display: flex; - flex-direction: row; - gap: 10px; - padding: 10px; + height: 100%; + width: 100%; + display: flex; + flex-direction: row; + gap: 10px; + padding: 10px; } .karavan .project-builder .center-column { - width: 100%; - display: flex; - flex-direction: column; - gap: 10px; + width: 100%; + display: flex; + flex-direction: column; + gap: 10px; } .karavan .project-builder .footer { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 10px; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 10px; } .karavan .project-builder .footer .progress { - flex-grow: 4; + flex-grow: 4; } .karavan .project-builder .footer .buttons { - height: 60px; - display: flex; - flex-direction: column; - justify-content: space-around; + height: 60px; + display: flex; + flex-direction: column; + justify-content: space-around; } .karavan .project-builder .project-properties td { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } .karavan .project-builder .project-properties td, .karavan .project-builder .project-properties tr { - border: none; + border: none; } .karavan .project-builder .project-properties .delete-button { - padding: 0 0 0 6px; - margin: 0; + padding: 0 0 0 6px; + margin: 0; } .karavan .project-builder .add-button { - width: fit-content; - margin-top: 6px; + width: fit-content; + margin-top: 6px; } .root .tooltip-required-field .pf-v5-c-tooltip__content { - text-align: start; + text-align: start; } .karavan .kamelet-section { - display: flex; - flex-direction: column; - height: 100%; + display: flex; + flex-direction: column; + height: 100%; } .karavan .kamelets-page { - overflow: auto; - flex-shrink: unset; - flex-grow: 1; - background-color: var(--pf-v5-global--BackgroundColor--light-300); - margin-bottom: 100px; + overflow: auto; + flex-shrink: unset; + flex-grow: 1; + background-color: var(--pf-v5-global--BackgroundColor--light-300); + margin-bottom: 100px; } + .karavan .knowledbase-eip-section .pf-v5-c-toggle-group { - margin: 16px; + margin: 16px; } - input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - margin: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 0; } \ No newline at end of file diff --git a/karavan-designer/src/designer/property/property/DslPropertyField.tsx b/karavan-designer/src/designer/property/property/DslPropertyField.tsx index 32d2d269..db35ddb4 100644 --- a/karavan-designer/src/designer/property/property/DslPropertyField.tsx +++ b/karavan-designer/src/designer/property/property/DslPropertyField.tsx @@ -361,21 +361,22 @@ export function DslPropertyField(props: Props) { <InputGroupItem isFill> <TextInput ref={ref} className="text-field" isRequired - type={property.secret ? "password" : isNumber ? "number" : "text"} + type={property.secret ? "password" : "text"} id={property.name} name={property.name} value={textValue?.toString()} customIcon={property.type !== 'string' ? <Text component={TextVariants.p}>{property.type}</Text> : undefined} onBlur={_ => { - if (isNumber) { - propertyChanged(property.name, textValue ? Number(textValue):'') + if (isNumber && isNumeric((textValue))) { + propertyChanged(property.name, Number(textValue)) } else if (!isNumber) { propertyChanged(property.name, textValue) } }} onFocus={_ => setCheckChanges(true)} onChange={(_, v) => { - if (isNumber) { + + if (isNumber && isNumeric(v)) { setTextValue(v); setCheckChanges(true); } else if (!isNumber) { @@ -402,10 +403,10 @@ export function DslPropertyField(props: Props) { title={property.displayName} onClose={() => setShowEditor(false)} onSave={(fieldId, value1) => { - propertyChanged(property.name, value1) - setTextValue(value1); - setShowEditor(false); - }}/> + propertyChanged(property.name, value1) + setTextValue(value1); + setShowEditor(false); + }}/> </InputGroupItem>} </InputGroup> } @@ -456,10 +457,10 @@ export function DslPropertyField(props: Props) { title="Java Class" onClose={() => setShowEditor(false)} onSave={(fieldId, value1) => { - propertyChanged(fieldId, value); - InfrastructureAPI.onSaveCustomCode?.(value, value1); - setShowEditor(false) - }}/> + propertyChanged(fieldId, value); + InfrastructureAPI.onSaveCustomCode?.(value, value1); + setShowEditor(false) + }}/> </InputGroupItem>} </InputGroup>) } @@ -499,10 +500,10 @@ export function DslPropertyField(props: Props) { title={`Expression (${dslLanguage?.[0]})`} onClose={() => setShowEditor(false)} onSave={(fieldId, value1) => { - propertyChanged(fieldId, value1); - setTextValue(value1); - setShowEditor(false); - }}/> + propertyChanged(fieldId, value1); + setTextValue(value1); + setShowEditor(false); + }}/> </InputGroupItem>} </InputGroup> ) @@ -1015,4 +1016,4 @@ export function DslPropertyField(props: Props) { {getInfrastructureSelectorModal()} </div> ) -} +} \ No newline at end of file diff --git a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx index f8cfd07c..c17a6e05 100644 --- a/karavan-designer/src/designer/property/property/KameletPropertyField.tsx +++ b/karavan-designer/src/designer/property/property/KameletPropertyField.tsx @@ -208,9 +208,9 @@ export function KameletPropertyField(props: Props) { </InputGroup> } - // function isNumeric (num: any) { - // return (typeof(num) === 'number' || (typeof(num) === "string" && num.trim() !== '')) && !isNaN(num as number); - // } + function isNumeric (num: any) { + return (typeof(num) === 'number' || (typeof(num) === "string" && num.trim() !== '')) && !isNaN(num as number); + } function getNumberInput() { return ( @@ -218,16 +218,22 @@ export function KameletPropertyField(props: Props) { name={id} className="text-field" isRequired - type='number' + // type='number' value={textValue?.toString()} customIcon={<Text component={TextVariants.p}>{property.type}</Text>} - onBlur={(_) => { - parametersChanged(property.id, Number(textValue)) + onBlur={_ => { + if (isNumeric((textValue))) { + parametersChanged(property.id, Number(textValue)) + } }} onChange={(_, v) => { - setTextValue(v); - setCheckChanges(true); - }} + if (isNumeric(v)) { + setTextValue(v); + setCheckChanges(true); + } else { + setTextValue(textValue); + } + }} /> ) }