fix(data catalog): prefix icons disappear after saving

Author: aarthy-dk

testgen/ui/components/frontend/js/components/tree.js

@@ -8,7 +8,7 @@
  * @property {number?} iconSize
  * @property {string?} iconClass
  * @property {string?} iconTooltip
- * @property {Element?} prefix
+ * @property {Element|function?} prefix
  * @property {TreeNode[]?} children
  * @property {number?} level
  * @property {boolean?} expanded

testgen/ui/components/frontend/js/pages/data_catalog.js

@@ -118,24 +118,26 @@ const DataCatalog = (/** @type Properties */ props) => {
                 };
                 TAG_KEYS.forEach(key => tables[table_id][key] = item[`table_${key}`]);
             }
-            const prefixIcons = [];
-            if (item.critical_data_element ?? item.table_critical_data_element) {
-                prefixIcons.push(withTooltip(Icon({ size: 15, classes: 'text-purple' }, 'star'), { text: 'Critical data element', position: 'right' }));
-            }
-            if (item.excluded_data_element) {
-                prefixIcons.push(withTooltip(Icon({ size: 15, classes: 'text-brown' }, 'visibility_off'), { text: 'Excluded data element', position: 'right' }));
-            }
-            if (item.pii_flag) {
-                prefixIcons.push(withTooltip(Icon({ size: 15, classes: 'text-orange' }, 'shield_person'), { text: 'PII data', position: 'right' }));
-            }
             const columnNode = {
                 id: column_id,
                 label: column_name,
                 classes: `column ${drop_date ? 'text-disabled' : (add_date && (Date.now() - new Date(add_date * 1000).getTime()) < 7 * 86400000) ? 'text-bold' : ''}`,
                 ...getColumnIcon(item),
                 iconClass: value_ct === 0 ? 'text-error' : null,
                 iconTooltip: value_ct === 0 ? 'No non-null values detected' : null,
-                prefix: span({ class: 'tg-dh--column-prefix' }, ...prefixIcons),
+                prefix: () => {
+                    const icons = [];
+                    if (item.critical_data_element ?? item.table_critical_data_element) {
+                        icons.push(withTooltip(Icon({ size: 15, classes: 'text-purple' }, 'star'), { text: 'Critical data element', position: 'right' }));
+                    }
+                    if (item.excluded_data_element) {
+                        icons.push(withTooltip(Icon({ size: 15, classes: 'text-brown' }, 'visibility_off'), { text: 'Excluded data element', position: 'right' }));
+                    }
+                    if (item.pii_flag) {
+                        icons.push(withTooltip(Icon({ size: 15, classes: 'text-orange' }, 'shield_person'), { text: 'PII data', position: 'right' }));
+                    }
+                    return span({ class: 'tg-dh--column-prefix' }, ...icons);
+                },
                 criticalDataElement: !!(item.critical_data_element ?? item.table_critical_data_element),
                 excludedDataElement: !!item.excluded_data_element,
                 piiFlag: !!item.pii_flag,