[Discover] Fix toggling multi fields from doc view table (#91121)

elastic · Feb 15, 2021 · 2db193b · 2db193b
1 parent 2f845dd
commit 2db193b
Showing 1 changed file with 24 additions and 17 deletions.
diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { DocViewTableRow } from './table_row';
 import { trimAngularSpan } from './table_helper';
@@ -54,6 +54,20 @@ export function DocViewTable({
     setFieldsWithParents(arr);
   }, [indexPattern, hit]);
 
+  const toggleColumn = useCallback(
+    (field: string) => {
+      if (!onRemoveColumn || !onAddColumn || !columns) {
+        return;
+      }
+      if (columns.includes(field)) {
+        onRemoveColumn(field);
+      } else {
+        onAddColumn(field);
+      }
+    },
+    [onRemoveColumn, onAddColumn, columns]
+  );
+
   if (!indexPattern) {
     return null;
   }
@@ -65,6 +79,7 @@ export function DocViewTable({
     fieldRowOpen[field] = !fieldRowOpen[field];
     setFieldRowOpen({ ...fieldRowOpen });
   }
+
   return (
     <table className="table table-condensed kbnDocViewerTable">
       <tbody>
@@ -85,16 +100,6 @@ export function DocViewTable({
 
             const isCollapsible = value.length > COLLAPSE_LINE_LENGTH;
             const isCollapsed = isCollapsible && !fieldRowOpen[field];
-            const toggleColumn =
-              onRemoveColumn && onAddColumn && Array.isArray(columns)
-                ? () => {
-                    if (columns.includes(field)) {
-                      onRemoveColumn(field);
-                    } else {
-                      onAddColumn(field);
-                    }
-                  }
-                : undefined;
             const displayUnderscoreWarning = !mapping(field) && field.indexOf('_') === 0;
 
             const fieldType = isNestedFieldParent(field, indexPattern)
@@ -109,10 +114,10 @@ export function DocViewTable({
                   displayUnderscoreWarning={displayUnderscoreWarning}
                   isCollapsed={isCollapsed}
                   isCollapsible={isCollapsible}
-                  isColumnActive={Array.isArray(columns) && columns.includes(field)}
+                  isColumnActive={!!columns?.includes(field)}
                   onFilter={filter}
                   onToggleCollapse={() => toggleValueCollapse(field)}
-                  onToggleColumn={toggleColumn}
+                  onToggleColumn={() => toggleColumn(field)}
                   value={value}
                   valueRaw={valueRaw}
                 />
@@ -123,7 +128,7 @@ export function DocViewTable({
                     data-test-subj={`tableDocViewRow-multifieldsTitle-${field}`}
                   >
                     <td className="kbnDocViewer__field">&nbsp;</td>
-                    <td className="kbnDocViewer__multifield_title">
+                    <td className="kbnDocViewer__multifield_title" colSpan={2}>
                       <b>
                         {i18n.translate('discover.fieldChooser.discoverField.multiFields', {
                           defaultMessage: 'Multi fields',
@@ -142,10 +147,12 @@ export function DocViewTable({
                           displayUnderscoreWarning={displayUnderscoreWarning}
                           isCollapsed={isCollapsed}
                           isCollapsible={isCollapsible}
-                          isColumnActive={Array.isArray(columns) && columns.includes(field)}
+                          isColumnActive={Array.isArray(columns) && columns.includes(multiField)}
                           onFilter={filter}
-                          onToggleCollapse={() => toggleValueCollapse(field)}
-                          onToggleColumn={toggleColumn}
+                          onToggleCollapse={() => {
+                            toggleValueCollapse(multiField);
+                          }}
+                          onToggleColumn={() => toggleColumn(multiField)}
                           value={value}
                           valueRaw={valueRaw}
                         />