[Discover] Monospace font in Document Explorer (#131513)

* [Discover] Monospace font in Document Explorer * [Discover] Update code style * [Discover] Update jest snapshot * [Discover] Update jest snapshot * [Discover] Increase the default width for time column * [Discover] Reduce font size for cell popover * [Discover] Update font size for cell popover and fix tests * [Discover] Update width to 210
elastic · May 6, 2022 · e55f8c8 · e55f8c8
1 parent 743cce0
commit e55f8c8
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/src/plugins/discover/public/components/discover_grid/constants.ts b/src/plugins/discover/public/components/discover_grid/constants.ts
@@ -19,7 +19,7 @@ export const GRID_STYLE = {
 
 export const pageSizeArr = [25, 50, 100, 250];
 export const defaultPageSize = 100;
-export const defaultTimeColumnWidth = 190;
+export const defaultTimeColumnWidth = 210;
 export const toolbarVisibility = {
   showColumnSelector: {
     allowHide: false,

diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/components/discover_grid/discover_grid.scss
@@ -30,6 +30,15 @@
   }
 }
 
+.dscDiscoverGrid__cellValue {
+  font-family: $euiCodeFontFamily;
+}
+
+.dscDiscoverGrid__cellPopoverValue {
+  font-family: $euiCodeFontFamily;
+  font-size: $euiFontSizeS;
+}
+
 .dscDiscoverGrid__footer {
   background-color: $euiColorLightShade;
   padding: $euiSize / 2 $euiSize;

diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_columns.test.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_columns.test.tsx
@@ -207,7 +207,7 @@ describe('Discover grid columns', function () {
             />
           </React.Fragment>,
           "id": "timestamp",
-          "initialWidth": 190,
+          "initialWidth": 210,
           "isSortable": true,
           "schema": "datetime",
         },

diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx
@@ -92,7 +92,9 @@ describe('Discover grid cell rendering', function () {
         setCellProps={jest.fn()}
       />
     );
-    expect(component.html()).toMatchInlineSnapshot(`"<span>100</span>"`);
+    expect(component.html()).toMatchInlineSnapshot(
+      `"<span class=\\"dscDiscoverGrid__cellValue\\">100</span>"`
+    );
   });
 
   it('renders bytes column correctly using _source when details is true', () => {
@@ -115,7 +117,9 @@ describe('Discover grid cell rendering', function () {
         setCellProps={jest.fn()}
       />
     );
-    expect(component.html()).toMatchInlineSnapshot(`"<span>100</span>"`);
+    expect(component.html()).toMatchInlineSnapshot(
+      `"<span class=\\"dscDiscoverGrid__cellPopoverValue\\">100</span>"`
+    );
   });
 
   it('renders bytes column correctly using fields when details is true', () => {
@@ -138,7 +142,9 @@ describe('Discover grid cell rendering', function () {
         setCellProps={jest.fn()}
       />
     );
-    expect(component.html()).toMatchInlineSnapshot(`"<span>100</span>"`);
+    expect(component.html()).toMatchInlineSnapshot(
+      `"<span class=\\"dscDiscoverGrid__cellPopoverValue\\">100</span>"`
+    );
   });
 
   it('renders _source column correctly', () => {
@@ -163,7 +169,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <EuiDescriptionList
-        className="dscDiscoverGrid__descriptionList"
+        className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
         compressed={true}
         type="inline"
       >
@@ -280,7 +286,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <EuiDescriptionList
-        className="dscDiscoverGrid__descriptionList"
+        className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
         compressed={true}
         type="inline"
       >
@@ -359,7 +365,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <EuiDescriptionList
-        className="dscDiscoverGrid__descriptionList"
+        className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
         compressed={true}
         type="inline"
       >
@@ -485,7 +491,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <EuiDescriptionList
-        className="dscDiscoverGrid__descriptionList"
+        className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
         compressed={true}
         type="inline"
       >
@@ -527,7 +533,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <EuiDescriptionList
-        className="dscDiscoverGrid__descriptionList"
+        className="dscDiscoverGrid__descriptionList dscDiscoverGrid__cellValue"
         compressed={true}
         type="inline"
       >
@@ -603,6 +609,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <span
+        className="dscDiscoverGrid__cellValue"
         dangerouslySetInnerHTML={
           Object {
             "__html": Array [
@@ -634,7 +641,9 @@ describe('Discover grid cell rendering', function () {
         setCellProps={jest.fn()}
       />
     );
-    expect(component.html()).toMatchInlineSnapshot(`"<span>-</span>"`);
+    expect(component.html()).toMatchInlineSnapshot(
+      `"<span class=\\"dscDiscoverGrid__cellValue\\">-</span>"`
+    );
   });
 
   it('renders correctly when invalid column is given', () => {
@@ -657,7 +666,9 @@ describe('Discover grid cell rendering', function () {
         setCellProps={jest.fn()}
       />
     );
-    expect(component.html()).toMatchInlineSnapshot(`"<span>-</span>"`);
+    expect(component.html()).toMatchInlineSnapshot(
+      `"<span class=\\"dscDiscoverGrid__cellValue\\">-</span>"`
+    );
   });
 
   it('renders unmapped fields correctly', () => {
@@ -695,6 +706,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(component).toMatchInlineSnapshot(`
       <span
+        className="dscDiscoverGrid__cellValue"
         dangerouslySetInnerHTML={
           Object {
             "__html": Array [
@@ -718,6 +730,7 @@ describe('Discover grid cell rendering', function () {
     );
     expect(componentWithDetails).toMatchInlineSnapshot(`
       <span
+        className="dscDiscoverGrid__cellPopoverValue"
         dangerouslySetInnerHTML={
           Object {
             "__html": Array [

diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.tsx
@@ -7,6 +7,7 @@
  */
 
 import React, { Fragment, useContext, useEffect, useMemo } from 'react';
+import classnames from 'classnames';
 import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import {
@@ -26,6 +27,8 @@ import { ElasticSearchHit } from '../../types';
 import { useDiscoverServices } from '../../utils/use_discover_services';
 import { MAX_DOC_FIELDS_DISPLAYED } from '../../../common';
 
+const CELL_CLASS = 'dscDiscoverGrid__cellValue';
+
 export const getRenderCellValueFn =
   (
     dataView: DataView,
@@ -67,7 +70,7 @@ export const getRenderCellValueFn =
     }, [ctx, row, setCellProps]);
 
     if (typeof row === 'undefined' || typeof rowFlattened === 'undefined') {
-      return <span>-</span>;
+      return <span className={CELL_CLASS}>-</span>;
     }
 
     /**
@@ -102,7 +105,11 @@ export const getRenderCellValueFn =
         : formatHit(row, dataView, fieldsToShow, maxEntries, fieldFormats);
 
       return (
-        <EuiDescriptionList type="inline" compressed className="dscDiscoverGrid__descriptionList">
+        <EuiDescriptionList
+          type="inline"
+          compressed
+          className={classnames('dscDiscoverGrid__descriptionList', CELL_CLASS)}
+        >
           {pairs.map(([key, value]) => (
             <Fragment key={key}>
               <EuiDescriptionListTitle>{key}</EuiDescriptionListTitle>
@@ -118,6 +125,7 @@ export const getRenderCellValueFn =
 
     return (
       <span
+        className={CELL_CLASS}
         // formatFieldValue guarantees sanitized values
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
@@ -170,6 +178,7 @@ function renderPopoverContent({
 
   return (
     <span
+      className="dscDiscoverGrid__cellPopoverValue"
       // formatFieldValue guarantees sanitized values
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{