[Discover] Replace doc viewer table with EuiInMemoryTable (#102149) (#…

…103678) * [Discover] replace legacy table with euiInMemoryTable * [Discover] update styles, add badge * fix font in badge and adjust line height * add tooltip * [Discover] update unit tests, return actions column to left side * [Discover] update field name test snapshot * [Discover] update wording * [Discover] handle pagination, return formatting value styles * [Discover] fix failing stylelint error * [Discover] return responsive prop, update classes * [Discover] update test and meet formatting rules * improve table view on medium * remove extra file * [Discover] fix unit test * [Discover] align top vertically field name and action cells, disable table responsive design * [Discover] adjust styles for cross browser compatibility * [Discover] remove pagination optimize styles, update test * [Discover] fix eslint * [Discover] clean up styles * [Discover] fix single doc view * [Discover] add check lack of multifieldBadge Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jul 1, 2021 · 0e42013 · 0e42013
1 parent a933484
commit 0e42013
Show file tree

Hide file tree

Showing 11 changed files with 508 additions and 385 deletions.
diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss
@@ -1,82 +1,57 @@
-.kbnDocViewerTable {
-  @include euiBreakpoint('xs', 's','m') {
-    table-layout: fixed;
-  }
-}
-
 .kbnDocViewer {
-  pre,
-  .kbnDocViewer__value {
-    display: inline-block;
-    word-break: break-all;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    color: $euiColorFullShade;
+  .euiTableRowCell {
     vertical-align: top;
-    padding-top: $euiSizeXS * .5;
-  }
-  .kbnDocViewer__field {
-    padding-top: $euiSizeS;
-  }
-
-  .kbnDocViewer__multifield_row:hover td {
-    background-color: transparent;
-  }
-
-  .kbnDocViewer__multifield_title {
-    font-family: $euiFontFamily;
   }
 
-  .dscFieldName {
-    color: $euiColorDarkShade;
+  tr:first-child th {
+    border-bottom-color: transparent;
   }
+}
 
-  td,
-  pre {
-    font-family: $euiCodeFontFamily;
-  }
+.kbnDocViewer__tableRow {
+  font-size: $euiFontSizeXS;
+  font-family: $euiCodeFontFamily;
 
-  tr:first-child td {
-    border-top-color: transparent;
+  .kbnDocViewer__buttons {
+    // Show all icons if one is focused,
+    &:focus-within {
+      .kbnDocViewer__actionButton {
+        opacity: 1;
+      }
+    }
   }
 
-  tr:hover {
+  &:hover {
     .kbnDocViewer__actionButton {
       opacity: 1;
     }
   }
-}
 
-.kbnDocViewer__buttons,
-.kbnDocViewer__field {
-  white-space: nowrap;
-}
-.kbnDocViewer__buttons {
-  width: 108px;
+  .kbnDocViewer__actionButton {
+    @include euiBreakpoint('m', 'l', 'xl') {
+      opacity: 0;
+    }
 
-  // Show all icons if one is focused,
-  &:focus-within {
-    .kbnDocViewer__actionButton {
+    &:focus {
       opacity: 1;
     }
   }
 }
 
-.kbnDocViewer__field {
-  width: $euiSize * 10;
-  @include euiBreakpoint('xs', 's', 'm') {
-    width: $euiSize * 6;
-  }
+.kbnDocViewer__tableActionsCell,
+.kbnDocViewer__tableFieldNameCell {
+  align-items: flex-start;
+  padding: $euiSizeXS;
 }
 
-.kbnDocViewer__actionButton {
-  @include euiBreakpoint('m', 'l', 'xl') {
-    opacity: 0;
-  }
-
-  &:focus {
-    opacity: 1;
-  }
+.kbnDocViewer__value {
+  display: inline-block;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  line-height: $euiLineHeight;
+  color: $euiColorFullShade;
+  vertical-align: top;
 }
 
 .kbnDocViewer__warning {

diff --git a/.../discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap b/.../discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap
diff --git a/src/plugins/discover/public/application/components/field_name/field_name.scss b/src/plugins/discover/public/application/components/field_name/field_name.scss
@@ -0,0 +1,12 @@
+.kbnDocViewer__fieldIcon {
+  padding-top: $euiSizeXS * 1.5;
+}
+
+.kbnDocViewer__fieldName {
+  line-height: $euiLineHeight;
+  padding: $euiSizeXS;
+}
+
+.kbnDocViewer__multiFieldBadge {
+  @include euiFont;
+}
diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx
@@ -6,51 +6,81 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import React, { Fragment } from 'react';
+import './field_name.scss';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import { FieldIcon, FieldIconProps } from '../../../../../kibana_react/public';
 import { getFieldTypeName } from './field_type_name';
-import { FieldMapping } from '../../doc_views/doc_views_types';
+import { IndexPatternField } from '../../../../../data/public';
 
 // properties fieldType and fieldName are provided in kbn_doc_view
 // this should be changed when both components are deangularized
 interface Props {
   fieldName: string;
   fieldType: string;
-  fieldMapping?: FieldMapping;
+  fieldMapping?: IndexPatternField;
   fieldIconProps?: Omit<FieldIconProps, 'type'>;
   scripted?: boolean;
-  className?: string;
 }
 
 export function FieldName({
   fieldName,
   fieldMapping,
   fieldType,
   fieldIconProps,
-  className,
   scripted = false,
 }: Props) {
   const typeName = getFieldTypeName(fieldType);
   const displayName =
     fieldMapping && fieldMapping.displayName ? fieldMapping.displayName : fieldName;
   const tooltip = displayName !== fieldName ? `${fieldName} (${displayName})` : fieldName;
+  const isMultiField = !!fieldMapping?.spec?.subType?.multi;
 
   return (
-    <EuiFlexGroup className={className} alignItems="center" gutterSize="s" responsive={false}>
-      <EuiFlexItem grow={false}>
+    <Fragment>
+      <EuiFlexItem grow={false} className="kbnDocViewer__fieldIcon">
         <FieldIcon type={fieldType} label={typeName} scripted={scripted} {...fieldIconProps} />
       </EuiFlexItem>
-      <EuiFlexItem className="eui-textTruncate">
-        <EuiToolTip
-          position="top"
-          content={tooltip}
-          delay="long"
-          anchorClassName="eui-textTruncate"
-        >
-          <span>{displayName}</span>
-        </EuiToolTip>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+
+      <EuiFlexGroup wrap={true} gutterSize="none" responsive={false} alignItems="flexStart">
+        <EuiFlexItem className="kbnDocViewer__fieldName eui-textBreakAll" grow={false}>
+          <EuiToolTip
+            position="top"
+            content={tooltip}
+            delay="long"
+            anchorClassName="eui-textBreakAll"
+          >
+            <span>{displayName}</span>
+          </EuiToolTip>
+        </EuiFlexItem>
+
+        {isMultiField && (
+          <EuiToolTip
+            position="top"
+            delay="long"
+            content={i18n.translate(
+              'discover.fieldChooser.discoverField.multiFieldTooltipContent',
+              {
+                defaultMessage: 'Multi-fields can have multiple values per field',
+              }
+            )}
+          >
+            <EuiBadge
+              title=""
+              className="kbnDocViewer__multiFieldBadge"
+              color="default"
+              data-test-subj={`tableDocViewRow-${fieldName}-multifieldBadge`}
+            >
+              <FormattedMessage
+                id="discover.fieldChooser.discoverField.multiField"
+                defaultMessage="multi-field"
+              />
+            </EuiBadge>
+          </EuiToolTip>
+        )}
+      </EuiFlexGroup>
+    </Fragment>
   );
 }