feat: display the label text linked to the selected data model binding

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<string>(
-    initialDataModelBindingKey,
-  );
+  const bindings = Object.keys(dataModelBindings).map((key) => {
+    const dataModelBinding = convertDataBindingToInternalFormat(dataModelBindings?.[key]);
+    return {
+      key,
+      dataModelBinding,
+    };
+  });
+  const [dataModelBindingKey, setDataModelBindingKey] = useState<string>(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 && (
-            <StudioCombobox.Option key={key} value={key} description={field}>
-              {key === 'simpleBinding'
-                ? t(`ux_editor.component_title.${componentType}`)
-                : t(`ux_editor.modal_properties_data_model_label.${key}`)}
-            </StudioCombobox.Option>
-          )
+          <StudioCombobox.Option key={key} value={key} description={dataModelBinding.field}>
+            {key === 'simpleBinding'
+              ? t(`ux_editor.component_title.${componentType}`)
+              : t(`ux_editor.modal_properties_data_model_label.${key}`)}
+          </StudioCombobox.Option>
         );
       })}
     </StudioCombobox>

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<string>();
 
@@ -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 && (

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 => {

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 (
     <StudioProperty.Button compact={compact} onClick={onOpen} property={label} value={value} />
   );

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditDataModelBinding.tsx

@@ -28,8 +28,7 @@ export const EditDataModelBinding = <T extends ComponentType>({
   const [dataModelSelectVisible, setDataModelSelectVisible] = useState(false);
 
   const internalBindingFormat = convertDataBindingToInternalFormat(
-    component?.dataModelBindings,
-    bindingKey,
+    component?.dataModelBindings?.[bindingKey],
   );
 
   const labelSpecificText = label

frontend/packages/ux-editor/src/utils/dataModelUtils.test.ts

@@ -157,17 +157,15 @@
     };
     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' });
   });
 
   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 @@
     };
     const bindingKey = undefined;
     const internalFormat = convertDataBindingToInternalFormat(
-      component?.dataModelBindings,
-      bindingKey,
+      component?.dataModelBindings?.[bindingKey],
     );
     expect(internalFormat).toEqual({ dataType: '', field: undefined });
   });

frontend/packages/ux-editor/src/utils/dataModelUtils.ts

@@ -1,6 +1,6 @@
 import type { DataModelFieldElement } from 'app-shared/types/DataModelFieldElement';
 import { ComponentType } from 'app-shared/types/ComponentType';
 import type { IDataModelBindings } from '../types/global';
 
 export const getMinOccursFromDataModelFields = (
   dataBindingName: string,
@@ -103,14 +103,8 @@
 };
 
 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';