From 6dd9db1076be370f1f380dcb95b1db50138f007e Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Fri, 14 Feb 2025 12:40:46 +0100 Subject: [PATCH 1/2] Fix labels --- .../DataModelBindingsCombobox.tsx | 28 +++++++++---------- .../EditColumnElement/EditColumnElement.tsx | 22 ++++++++++----- .../utils/editSubformTableColumnsUtils.ts | 28 +++++++++++++------ .../components/TextResource/TextResource.tsx | 2 +- .../EditDataModelBinding.tsx | 3 +- .../src/utils/dataModelUtils.test.ts | 9 ++---- .../ux-editor/src/utils/dataModelUtils.ts | 8 +----- 7 files changed, 55 insertions(+), 45 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/DataModelBindingsCombobox.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/DataModelBindingsCombobox.tsx index 403e6fed55b..09f72a0d022 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/DataModelBindingsCombobox.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/DataModelBindingsCombobox.tsx @@ -8,19 +8,22 @@ type DataModelBindingsComboboxProps = { componentType: string; dataModelBindings?: IDataModelBindings; onDataModelBindingChange: (dataModelBindingKey: string) => void; - initialDataModelBindingKey: string; }; export const DataModelBindingsCombobox = ({ componentType, dataModelBindings, onDataModelBindingChange, - initialDataModelBindingKey, }: DataModelBindingsComboboxProps) => { const { t } = useTranslation(); - const [dataModelBindingKey, setDataModelBindingKey] = useState( - initialDataModelBindingKey, - ); + const bindings = Object.keys(dataModelBindings).map((key) => { + const dataModelBinding = convertDataBindingToInternalFormat(dataModelBindings?.[key]); + return { + key, + dataModelBinding, + }; + }); + const [dataModelBindingKey, setDataModelBindingKey] = useState(bindings[0].key); const onValueChange = (value: string) => { setDataModelBindingKey(value); @@ -39,16 +42,13 @@ export const DataModelBindingsCombobox = ({ value={[dataModelBindingKey]} onValueChange={(values) => onValueChange(values[0])} > - {Object.keys(dataModelBindings).map((key) => { - const { field } = convertDataBindingToInternalFormat(dataModelBindings, key); + {bindings.map(({ key, dataModelBinding }) => { return ( - field && ( - - {key === 'simpleBinding' - ? t(`ux_editor.component_title.${componentType}`) - : t(`ux_editor.modal_properties_data_model_label.${key}`)} - - ) + + {key === 'simpleBinding' + ? t(`ux_editor.component_title.${componentType}`) + : t(`ux_editor.modal_properties_data_model_label.${key}`)} + ); })} diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx index 97e9b0fae9b..de1a5fc1fa4 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx @@ -44,6 +44,8 @@ export const EditColumnElement = ({ const { org, app } = useStudioEnvironmentParams(); const { data: formLayouts } = useFormLayoutsQuery(org, app, subformLayout); const { data: layoutSets } = useLayoutSetsQuery(org, app); + const subformDefaultDataModel = getDefaultDataModel(layoutSets, subformLayout); + const availableComponents = getComponentsForSubformTable(formLayouts, subformDefaultDataModel); const [selectedComponentId, setSelectedComponentId] = useState(); @@ -56,13 +58,16 @@ export const EditColumnElement = ({ const bindingKey = Object.keys(selectedComponent.dataModelBindings)[0]; const binding = convertDataBindingToInternalFormat( - selectedComponent?.dataModelBindings, - bindingKey, + selectedComponent?.dataModelBindings?.[bindingKey], ); + const title = + selectedComponent?.textResourceBindings?.[`${bindingKey}Title`] ?? + selectedComponent?.textResourceBindings?.title; + onChange({ ...tableColumn, - headerContent: selectedComponent.textResourceBindings?.title, + headerContent: title, cellContent: { query: binding.field }, }); }; @@ -71,16 +76,20 @@ export const EditColumnElement = ({ dataModelBindings: IDataModelBindings, dataModelBindingKey: string, ) => { - const { field } = convertDataBindingToInternalFormat(dataModelBindings, dataModelBindingKey); + const { field } = convertDataBindingToInternalFormat(dataModelBindings?.[dataModelBindingKey]); + + const selectedComponent = availableComponents.find((comp) => comp.id === selectedComponentId); + const title = + selectedComponent?.textResourceBindings?.[`${dataModelBindingKey}Title`] ?? + selectedComponent?.textResourceBindings?.title; const updatedTableColumn = { ...tableColumn, + headerContent: title, cellContent: { query: field }, }; onChange(updatedTableColumn); }; - const subformDefaultDataModel = getDefaultDataModel(layoutSets, subformLayout); - const availableComponents = getComponentsForSubformTable(formLayouts, subformDefaultDataModel); const isSaveButtonDisabled = !tableColumn.headerContent || !tableColumn.cellContent?.query; const component = availableComponents.find((comp) => comp.id === selectedComponentId); @@ -103,7 +112,6 @@ export const EditColumnElement = ({ onDataModelBindingChange={(dataModelBindingKey: string) => handleBindingChange(component?.dataModelBindings, dataModelBindingKey) } - initialDataModelBindingKey={dataModelBindingKeys[0]} /> )} {isTableColumnDefined && ( diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/utils/editSubformTableColumnsUtils.ts b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/utils/editSubformTableColumnsUtils.ts index 586ea829e36..def9f31e0b0 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/utils/editSubformTableColumnsUtils.ts +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/utils/editSubformTableColumnsUtils.ts @@ -38,16 +38,28 @@ const componentsWithTitleAndDefaultDataModel = ( components: FormItem[], defaultDataModel: string, ): FormItem[] => { - const hasValidDataBinding = (comp: FormItem) => - Object.keys(comp.dataModelBindings ?? {}).some((binding) => { - const { dataType, field } = convertDataBindingToInternalFormat( - comp?.dataModelBindings, - binding, - ); - return dataType === defaultDataModel || (dataType === '' && field !== ''); + return components?.reduce((filteredComponents, component) => { + const dataModelBindings = {}; + Object.keys(component.dataModelBindings ?? {}).forEach((bindingKey) => { + const dataModelBinding = component?.dataModelBindings?.[bindingKey]; + const binding = convertDataBindingToInternalFormat(dataModelBinding); + + const hasValidDataBinding = + (binding.dataType === defaultDataModel || binding.dataType === '') && binding.field !== ''; + if (hasValidDataBinding) { + dataModelBindings[bindingKey] = dataModelBinding; + } }); - return components.filter((comp) => comp.textResourceBindings?.title && hasValidDataBinding(comp)); + if (Object.keys(dataModelBindings ?? {}).length > 0) { + filteredComponents.push({ + ...component, + dataModelBindings, + }); + } + + return filteredComponents; + }, []); }; export const getDefaultDataModel = (layoutSets: LayoutSets, subformLayout: string): string => { diff --git a/frontend/packages/ux-editor/src/components/TextResource/TextResource.tsx b/frontend/packages/ux-editor/src/components/TextResource/TextResource.tsx index e911dd30c01..5dcf263ce70 100644 --- a/frontend/packages/ux-editor/src/components/TextResource/TextResource.tsx +++ b/frontend/packages/ux-editor/src/components/TextResource/TextResource.tsx @@ -161,7 +161,7 @@ const TextResourceButton = ({ onOpen, textResourceId, }: TextResourceButtonProps) => { - const value = useTextResourceValue(textResourceId); + const value = useTextResourceValue(textResourceId) || textResourceId; return ( ); diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditDataModelBinding.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditDataModelBinding.tsx index 1b238b4d748..e7bc857c670 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditDataModelBinding.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditDataModelBinding.tsx @@ -28,8 +28,7 @@ export const EditDataModelBinding = ({ const [dataModelSelectVisible, setDataModelSelectVisible] = useState(false); const internalBindingFormat = convertDataBindingToInternalFormat( - component?.dataModelBindings, - bindingKey, + component?.dataModelBindings?.[bindingKey], ); const labelSpecificText = label diff --git a/frontend/packages/ux-editor/src/utils/dataModelUtils.test.ts b/frontend/packages/ux-editor/src/utils/dataModelUtils.test.ts index 852f680cdd9..86b63de9f63 100644 --- a/frontend/packages/ux-editor/src/utils/dataModelUtils.test.ts +++ b/frontend/packages/ux-editor/src/utils/dataModelUtils.test.ts @@ -157,8 +157,7 @@ describe('convertDataBindingToInternalFormat', () => { }; const bindingKey = 'simpleBinding'; const internalFormat = convertDataBindingToInternalFormat( - (component as unknown as FormItem)?.dataModelBindings, - bindingKey, + (component as unknown as FormItem)?.dataModelBindings?.[bindingKey], ); expect(internalFormat).toEqual({ dataType: 'dataType', field: 'field' }); }); @@ -166,8 +165,7 @@ describe('convertDataBindingToInternalFormat', () => { it('should return correct format when it has old format', () => { const bindingKey = 'simpleBinding'; const internalFormat = convertDataBindingToInternalFormat( - testComponent?.dataModelBindings, - bindingKey, + testComponent?.dataModelBindings?.[bindingKey], ); expect(internalFormat).toEqual({ dataType: '', field: '' }); }); @@ -179,8 +177,7 @@ describe('convertDataBindingToInternalFormat', () => { }; const bindingKey = undefined; const internalFormat = convertDataBindingToInternalFormat( - component?.dataModelBindings, - bindingKey, + component?.dataModelBindings?.[bindingKey], ); expect(internalFormat).toEqual({ dataType: '', field: undefined }); }); diff --git a/frontend/packages/ux-editor/src/utils/dataModelUtils.ts b/frontend/packages/ux-editor/src/utils/dataModelUtils.ts index 26454cc3f01..3a823ca88dc 100644 --- a/frontend/packages/ux-editor/src/utils/dataModelUtils.ts +++ b/frontend/packages/ux-editor/src/utils/dataModelUtils.ts @@ -103,14 +103,8 @@ export type InternalBindingFormat = { }; export const convertDataBindingToInternalFormat = ( - dataModelBindings: IDataModelBindings, - bindingKey: string, + dataModelBinding: string | InternalBindingFormat, ): InternalBindingFormat => { - const dataModelBinding = - dataModelBindings && bindingKey in dataModelBindings - ? dataModelBindings[bindingKey] - : undefined; - const isOldFormatOrNotSet = typeof dataModelBinding === 'string' || typeof dataModelBinding === 'undefined'; From 34d16e829b318592fa3f223050fb717f6aec1997 Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Tue, 18 Feb 2025 13:44:41 +0100 Subject: [PATCH 2/2] Fix merge --- .../ColumnElement/EditColumnElement/EditColumnElement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx index 2acbf872eb5..7d09342781d 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx @@ -76,7 +76,7 @@ export const EditColumnElement = ({ dataModelBindings: IDataModelBindingsKeyValue, dataModelBindingKey: string, ) => { - const { field } = convertDataBindingToInternalFormat(dataModelBindings?.[dataModelBindingKey]); + const { field } = convertDataBindingToInternalFormat(dataModelBindings[dataModelBindingKey]); const selectedComponent = availableComponents.find((comp) => comp.id === selectedComponentId); const title =