ADDON-34764: Added MoreInfo mappings and resolved overlapping label i…

…ssue
splunk · Mar 23, 2021 · 481689d · 481689d
1 parent aaa0667
commit 481689d
Showing 1 changed file with 18 additions and 20 deletions.
diff --git a/...nk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.jsx b/...nk_add_on_ucc_framework/ucc_ui_lib/src/main/webapp/components/table/TableExpansionRow.jsx
@@ -4,34 +4,32 @@ import Table from '@splunk/react-ui/Table';
 import { _ } from '@splunk/ui-utils/i18n';
 
 function getExpansionRowData(row, moreInfo) {
-    return (
-        moreInfo &&
-        moreInfo.length &&
+    const DefinitionLists = [];
+    if (moreInfo?.length) {
         moreInfo.map((val) => {
             const label = _(val.label);
-            return (
-                <>
-                    {row[val.field] && (
-                        <>
-                            <DL.Term>{label}</DL.Term>
-                            <DL.Description>
-                                {val.field === 'disabled'
-                                    ? val.mapping[row[val.field]]
-                                    : `${row[val.field]}`}
-                            </DL.Description>
-                        </>
-                    )}
-                </>
-            );
-        })
-    );
+            if (val.field in row) {
+                DefinitionLists.push(<DL.Term>{label}</DL.Term>);
+                DefinitionLists.push(
+                    <DL.Description>
+                        {val.mapping
+                            ? val.mapping[row[val.field]]
+                                ? val.mapping[row[val.field]]
+                                : row[val.field]
+                            : row[val.field]}
+                    </DL.Description>
+                );
+            }
+        });
+    }
+    return DefinitionLists;
 }
 
 export function getExpansionRow(colSpan, row, moreInfo) {
     return (
         <Table.Row key={`${row.id}-expansion`}>
             <Table.Cell style={{ borderTop: 'none' }} colSpan={colSpan}>
-                <DL>{getExpansionRowData(row, moreInfo)}</DL>
+                <DL termWidth={250}>{getExpansionRowData(row, moreInfo)}</DL>
             </Table.Cell>
         </Table.Row>
     );