From fc55e62f1b7d5bf5d39e0e6fffacfae56eaedd6b Mon Sep 17 00:00:00 2001 From: Marat Gubaidullin Date: Mon, 16 Sep 2024 14:54:18 -0400 Subject: [PATCH] #1401 --- .../property/property/ExpressionField.tsx | 33 +++++++++++++++++-- .../route/element/DslElementHeader.tsx | 2 +- .../property/property/ExpressionField.tsx | 33 +++++++++++++++++-- .../route/element/DslElementHeader.tsx | 2 +- .../property/property/ExpressionField.tsx | 33 +++++++++++++++++-- .../route/element/DslElementHeader.tsx | 2 +- 6 files changed, 93 insertions(+), 12 deletions(-) diff --git a/karavan-app/src/main/webui/src/designer/property/property/ExpressionField.tsx b/karavan-app/src/main/webui/src/designer/property/property/ExpressionField.tsx index cf2d98502c9..25793d4bd19 100644 --- a/karavan-app/src/main/webui/src/designer/property/property/ExpressionField.tsx +++ b/karavan-app/src/main/webui/src/designer/property/property/ExpressionField.tsx @@ -36,6 +36,9 @@ import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition"; import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi"; import {DslPropertyField} from "./DslPropertyField"; import {CamelUi} from "../../utils/CamelUi"; +import {usePropertiesStore} from "../PropertyStore"; +import {shallow} from "zustand/shallow"; +import {PropertyUtil} from "./PropertyUtil"; interface Props { property: PropertyMeta, @@ -45,6 +48,8 @@ interface Props { export function ExpressionField(props: Props) { + + const [propertyFilter, changedOnly, requiredOnly] = usePropertiesStore((s) => [s.propertyFilter, s.changedOnly, s.requiredOnly], shallow) const [selectIsOpen, setSelectIsOpen] = useState(false); const [propsAreOpen, setPropsAreOpen] = useState(false); @@ -91,10 +96,32 @@ export function ExpressionField(props: Props) { function getProps (): PropertyMeta[] { const dslName = getValueClassName(); - return CamelDefinitionApiExt.getElementProperties(dslName) + const filter = propertyFilter.toLocaleLowerCase(); + let propertyMetas = CamelDefinitionApiExt.getElementProperties(dslName) .filter(p => p.name !== 'id') .filter(p => p.name !== 'expression') - .filter(p => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen')); + .filter(p => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen')) + .filter(p => p.name === 'parameters' || p.name.toLocaleLowerCase().includes(filter) || p.label.toLocaleLowerCase().includes(filter) || p.displayName.toLocaleLowerCase().includes(filter)); + if (requiredOnly) { + propertyMetas = propertyMetas.filter(p => p.name === 'parameters' || p.required); + } + if (changedOnly) { + propertyMetas = propertyMetas.filter(p => p.name === 'parameters' || PropertyUtil.hasDslPropertyValueChanged(p, getPropertyValue(p))); + } + return propertyMetas + } + + function getPropertyValue(property: PropertyMeta) { + const value = getExpressionValue(); + return value ? (value as any)[property.name] : undefined; + } + + function getPropertySelectorChanged(): boolean { + return requiredOnly || changedOnly || propertyFilter?.trim().length > 0; + } + + function getShowExpanded(): boolean { + return propsAreOpen || getPropertySelectorChanged(); } function getExpressionProps (): PropertyMeta | undefined { @@ -165,7 +192,7 @@ export function ExpressionField(props: Props) { setPropsAreOpen(isExpanded)} - isExpanded={propsAreOpen}> + isExpanded={getShowExpanded()}> {value && getProps().map((property: PropertyMeta) => {getHeader()} - {tooltip}}/> + {tooltip}}/> ) diff --git a/karavan-designer/src/designer/property/property/ExpressionField.tsx b/karavan-designer/src/designer/property/property/ExpressionField.tsx index cf2d98502c9..25793d4bd19 100644 --- a/karavan-designer/src/designer/property/property/ExpressionField.tsx +++ b/karavan-designer/src/designer/property/property/ExpressionField.tsx @@ -36,6 +36,9 @@ import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition"; import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi"; import {DslPropertyField} from "./DslPropertyField"; import {CamelUi} from "../../utils/CamelUi"; +import {usePropertiesStore} from "../PropertyStore"; +import {shallow} from "zustand/shallow"; +import {PropertyUtil} from "./PropertyUtil"; interface Props { property: PropertyMeta, @@ -45,6 +48,8 @@ interface Props { export function ExpressionField(props: Props) { + + const [propertyFilter, changedOnly, requiredOnly] = usePropertiesStore((s) => [s.propertyFilter, s.changedOnly, s.requiredOnly], shallow) const [selectIsOpen, setSelectIsOpen] = useState(false); const [propsAreOpen, setPropsAreOpen] = useState(false); @@ -91,10 +96,32 @@ export function ExpressionField(props: Props) { function getProps (): PropertyMeta[] { const dslName = getValueClassName(); - return CamelDefinitionApiExt.getElementProperties(dslName) + const filter = propertyFilter.toLocaleLowerCase(); + let propertyMetas = CamelDefinitionApiExt.getElementProperties(dslName) .filter(p => p.name !== 'id') .filter(p => p.name !== 'expression') - .filter(p => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen')); + .filter(p => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen')) + .filter(p => p.name === 'parameters' || p.name.toLocaleLowerCase().includes(filter) || p.label.toLocaleLowerCase().includes(filter) || p.displayName.toLocaleLowerCase().includes(filter)); + if (requiredOnly) { + propertyMetas = propertyMetas.filter(p => p.name === 'parameters' || p.required); + } + if (changedOnly) { + propertyMetas = propertyMetas.filter(p => p.name === 'parameters' || PropertyUtil.hasDslPropertyValueChanged(p, getPropertyValue(p))); + } + return propertyMetas + } + + function getPropertyValue(property: PropertyMeta) { + const value = getExpressionValue(); + return value ? (value as any)[property.name] : undefined; + } + + function getPropertySelectorChanged(): boolean { + return requiredOnly || changedOnly || propertyFilter?.trim().length > 0; + } + + function getShowExpanded(): boolean { + return propsAreOpen || getPropertySelectorChanged(); } function getExpressionProps (): PropertyMeta | undefined { @@ -165,7 +192,7 @@ export function ExpressionField(props: Props) { setPropsAreOpen(isExpanded)} - isExpanded={propsAreOpen}> + isExpanded={getShowExpanded()}> {value && getProps().map((property: PropertyMeta) => {getHeader()} - {tooltip}}/> + {tooltip}}/> ) diff --git a/karavan-space/src/designer/property/property/ExpressionField.tsx b/karavan-space/src/designer/property/property/ExpressionField.tsx index cf2d98502c9..25793d4bd19 100644 --- a/karavan-space/src/designer/property/property/ExpressionField.tsx +++ b/karavan-space/src/designer/property/property/ExpressionField.tsx @@ -36,6 +36,9 @@ import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition"; import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi"; import {DslPropertyField} from "./DslPropertyField"; import {CamelUi} from "../../utils/CamelUi"; +import {usePropertiesStore} from "../PropertyStore"; +import {shallow} from "zustand/shallow"; +import {PropertyUtil} from "./PropertyUtil"; interface Props { property: PropertyMeta, @@ -45,6 +48,8 @@ interface Props { export function ExpressionField(props: Props) { + + const [propertyFilter, changedOnly, requiredOnly] = usePropertiesStore((s) => [s.propertyFilter, s.changedOnly, s.requiredOnly], shallow) const [selectIsOpen, setSelectIsOpen] = useState(false); const [propsAreOpen, setPropsAreOpen] = useState(false); @@ -91,10 +96,32 @@ export function ExpressionField(props: Props) { function getProps (): PropertyMeta[] { const dslName = getValueClassName(); - return CamelDefinitionApiExt.getElementProperties(dslName) + const filter = propertyFilter.toLocaleLowerCase(); + let propertyMetas = CamelDefinitionApiExt.getElementProperties(dslName) .filter(p => p.name !== 'id') .filter(p => p.name !== 'expression') - .filter(p => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen')); + .filter(p => !p.isObject || (p.isObject && !CamelUi.dslHasSteps(p.type)) || (dslName === 'CatchDefinition' && p.name === 'onWhen')) + .filter(p => p.name === 'parameters' || p.name.toLocaleLowerCase().includes(filter) || p.label.toLocaleLowerCase().includes(filter) || p.displayName.toLocaleLowerCase().includes(filter)); + if (requiredOnly) { + propertyMetas = propertyMetas.filter(p => p.name === 'parameters' || p.required); + } + if (changedOnly) { + propertyMetas = propertyMetas.filter(p => p.name === 'parameters' || PropertyUtil.hasDslPropertyValueChanged(p, getPropertyValue(p))); + } + return propertyMetas + } + + function getPropertyValue(property: PropertyMeta) { + const value = getExpressionValue(); + return value ? (value as any)[property.name] : undefined; + } + + function getPropertySelectorChanged(): boolean { + return requiredOnly || changedOnly || propertyFilter?.trim().length > 0; + } + + function getShowExpanded(): boolean { + return propsAreOpen || getPropertySelectorChanged(); } function getExpressionProps (): PropertyMeta | undefined { @@ -165,7 +192,7 @@ export function ExpressionField(props: Props) { setPropsAreOpen(isExpanded)} - isExpanded={propsAreOpen}> + isExpanded={getShowExpanded()}> {value && getProps().map((property: PropertyMeta) => {getHeader()} - {tooltip}}/> + {tooltip}}/> )