Add detection if a value has been formatted, conditional rendering

elastic · Oct 25, 2019 · a68c24f · a68c24f
1 parent 3fd9f91
commit a68c24f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/legacy/core_plugins/kbn_doc_views/public/views/table/table.tsx b/src/legacy/core_plugins/kbn_doc_views/public/views/table/table.tsx
@@ -19,7 +19,7 @@
 import React, { useState } from 'react';
 import { DocViewRenderProps } from 'ui/registry/doc_views';
 import { DocViewTableRow } from './table_row';
-import { formatValue, arrayContainsObjects } from './table_helper';
+import { arrayContainsObjects } from './table_helper';
 
 const COLLAPSE_LINE_LENGTH = 350;
 
@@ -47,8 +47,14 @@ export function DocViewTable({
         {Object.keys(flattened)
           .sort()
           .map(field => {
+            function trimAngularSpan(text: string) {
+              return text.replace('<span ng-non-bindable>', '').replace('</span>', '');
+            }
             const valueRaw = flattened[field];
-            const value = formatValue(valueRaw, formatted[field]);
+            const valueFormattedTrimmed = trimAngularSpan(formatted[field]);
+            const isFormatted = valueRaw !== valueFormattedTrimmed;
+            const value = isFormatted ? valueFormattedTrimmed : valueRaw;
+
             const isCollapsible = typeof value === 'string' && value.length > COLLAPSE_LINE_LENGTH;
             const isCollapsed = isCollapsible && !fieldRowOpen[field];
             const toggleColumn =
@@ -77,6 +83,7 @@ export function DocViewTable({
                 isCollapsed={isCollapsed}
                 isCollapsible={isCollapsible}
                 isColumnActive={Array.isArray(columns) && columns.includes(field)}
+                isFormatted={isFormatted}
                 onFilter={filter}
                 onToggleCollapse={() => toggleValueCollapse(field)}
                 onToggleColumn={toggleColumn}

diff --git a/src/legacy/core_plugins/kbn_doc_views/public/views/table/table_row.tsx b/src/legacy/core_plugins/kbn_doc_views/public/views/table/table_row.tsx
@@ -36,6 +36,7 @@ export interface Props {
   isCollapsible: boolean;
   isColumnActive: boolean;
   isCollapsed: boolean;
+  isFormatted: boolean;
   onToggleCollapse: () => void;
   onFilter?: DocViewFilterFn;
   onToggleColumn?: () => void;
@@ -51,6 +52,7 @@ export function DocViewTableRow({
   isCollapsible,
   isCollapsed,
   isColumnActive,
+  isFormatted,
   onFilter,
   onToggleCollapse,
   onToggleColumn,
@@ -85,19 +87,25 @@ export function DocViewTableRow({
         </td>
       )}
       <td className="kbnDocViewer__field">
-        <FieldName field={fieldMapping} fieldName={field}></FieldName>
+        <FieldName field={fieldMapping} fieldName={field} />
       </td>
       <td>
         {isCollapsible && (
           <DocViewTableRowBtnCollapse onClick={onToggleCollapse} isCollapsed={isCollapsed} />
         )}
         {displayUnderscoreWarning && <DocViewTableRowIconUnderscore />}
         {displayNoMappingWarning && <DocViewTableRowIconNoMapping />}
-        <div
-          className={valueClassName}
-          data-test-subj={`tableDocViewRow-${field}-value`}
-          dangerouslySetInnerHTML={{ __html: value as string }}
-        />
+        {isFormatted ? (
+          <div
+            className={valueClassName}
+            data-test-subj={`tableDocViewRow-${field}-value`}
+            dangerouslySetInnerHTML={{ __html: value as string }}
+          />
+        ) : (
+          <div className={valueClassName} data-test-subj={`tableDocViewRow-${field}-value`}>
+            {value}
+          </div>
+        )}
       </td>
     </tr>
   );