[Discover] Fix multi-field display when parent field is not indexed (#102938) (#105583)

* Show multifields when parent is not indexed

* [Discover] Fix for multi-fields when parent is not indexed

* Readd package.json

* Applying Tims suggestion

* Add a unit test

* Updating unit test so that it tests the right thing

src/plugins/discover/public/application/components/table/table.test.tsx

@@ -334,6 +334,33 @@ describe('DocViewTable at Discover Doc with Fields API', () => {
             },
           },
         },
+        {
+          name: 'city',
+          displayName: 'city',
+          type: 'keyword',
+          isMapped: true,
+          readFromDocValues: true,
+          searchable: true,
+          shortDotsEnable: false,
+          scripted: false,
+          filterable: false,
+        },
+        {
+          name: 'city.raw',
+          displayName: 'city.raw',
+          type: 'string',
+          isMapped: true,
+          spec: {
+            subType: {
+              multi: {
+                parent: 'city',
+              },
+            },
+          },
+          shortDotsEnable: false,
+          scripted: false,
+          filterable: false,
+        },
       ],
     },
     metaFields: ['_index', '_type', '_score', '_id'],
@@ -380,6 +407,7 @@ describe('DocViewTable at Discover Doc with Fields API', () => {
       customer_first_name: 'Betty',
       'customer_first_name.keyword': 'Betty',
       'customer_first_name.nickname': 'Betsy',
+      'city.raw': 'Los Angeles',
     },
   };
   const props = {
@@ -417,6 +445,8 @@ describe('DocViewTable at Discover Doc with Fields API', () => {
       findTestSubject(component, 'tableDocViewRow-customer_first_name.nickname-multifieldBadge')
         .length
     ).toBe(1);
+
+    expect(findTestSubject(component, 'tableDocViewRow-city.raw').length).toBe(1);
   });
 
   it('does not render multifield rows if showMultiFields flag is not set', () => {
@@ -449,5 +479,7 @@ describe('DocViewTable at Discover Doc with Fields API', () => {
       findTestSubject(component, 'tableDocViewRow-customer_first_name.nickname-multifieldBadge')
         .length
     ).toBe(0);
+
+    expect(findTestSubject(component, 'tableDocViewRow-city.raw').length).toBe(1);
   });
 });

src/plugins/discover/public/application/components/table/table.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { EuiInMemoryTable } from '@elastic/eui';
 import { IndexPattern, IndexPatternField } from '../../../../../data/public';
 import { SHOW_MULTIFIELDS } from '../../../../common';
@@ -60,6 +60,8 @@ export const DocViewerTable = ({
     indexPattern?.fields,
   ]);
 
+  const [childParentFieldsMap] = useState({} as Record<string, string>);
+
   const formattedHit = useMemo(() => indexPattern?.formatHit(hit, 'html'), [hit, indexPattern]);
 
   const tableColumns = useMemo(() => {
@@ -92,11 +94,21 @@ export const DocViewerTable = ({
   }
 
   const flattened = indexPattern.flattenHit(hit);
+  Object.keys(flattened).forEach((key) => {
+    const field = mapping(key);
+    if (field && field.spec?.subType?.multi?.parent) {
+      childParentFieldsMap[field.name] = field.spec.subType.multi.parent;
+    }
+  });
   const items: FieldRecord[] = Object.keys(flattened)
     .filter((fieldName) => {
       const fieldMapping = mapping(fieldName);
       const isMultiField = !!fieldMapping?.spec?.subType?.multi;
-      return isMultiField ? showMultiFields : true;
+      if (!isMultiField) {
+        return true;
+      }
+      const parent = childParentFieldsMap[fieldName];
+      return showMultiFields || (parent && !flattened.hasOwnProperty(parent));
     })
     .sort((fieldA, fieldB) => {
       const mappingA = mapping(fieldA);