From ee69f47e9e4951ecbe9bacb0b1e1d62b89f8ecf7 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Wed, 31 Jan 2024 11:07:09 -0800
Subject: [PATCH] Use `ouiCodeFont` in Discover and reduce text size

Also:
* Fix react `key` errors
* vertically align source cells
* Clamp the height of the cells

Signed-off-by: Miki <miki@amazon.com>
---
 .../core_app/assets/legacy_dark_theme.css     |  2 +-
 .../core_app/assets/legacy_light_theme.css    |  2 +-
 .../data_grid/data_grid_table_cell_value.scss |  1 +
 .../data_grid/data_grid_table_cell_value.tsx  |  2 +-
 .../default_discover_table/_doc_table.scss    |  7 +++++
 .../default_discover_table/_table_cell.scss   | 15 +++++++++-
 .../default_discover_table/table_header.tsx   |  1 +
 .../default_discover_table/table_rows.tsx     | 29 ++++++++++++++-----
 8 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/core/server/core_app/assets/legacy_dark_theme.css b/src/core/server/core_app/assets/legacy_dark_theme.css
index 4ef4c726e414..b56eeed717a1 100644
--- a/src/core/server/core_app/assets/legacy_dark_theme.css
+++ b/src/core/server/core_app/assets/legacy_dark_theme.css
@@ -802,7 +802,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: 12px;
 }
 .table thead {
   font-size: 12px;
diff --git a/src/core/server/core_app/assets/legacy_light_theme.css b/src/core/server/core_app/assets/legacy_light_theme.css
index 9f9a0dc118d1..d4f6d10e7022 100644
--- a/src/core/server/core_app/assets/legacy_light_theme.css
+++ b/src/core/server/core_app/assets/legacy_light_theme.css
@@ -802,7 +802,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: 20px;
-  font-size: 14px;
+  font-size: 12px;
 }
 .table thead {
   font-size: 12px;
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss
index 6015c8f6a11b..a9ace2affca8 100644
--- a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.scss
@@ -1,3 +1,4 @@
 .euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title.osdDescriptionListFieldTitle {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);
+  margin-left: 0;
 }
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx
index 10911ab96a7e..7c4201f93127 100644
--- a/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx
+++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table_cell_value.tsx
@@ -30,7 +30,7 @@ export function fetchSourceTypeDataCell(
   const keys = Object.keys(formattedRow);
 
   return (
-    <EuiDescriptionList type="inline" compressed>
+    <EuiDescriptionList type="inline" compressed className="source">
       {keys.map((key, index) => (
         <Fragment key={key}>
           <EuiDescriptionListTitle className="osdDescriptionListFieldTitle">
diff --git a/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss b/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss
index 86519fb5a46c..1e780a7e4d8a 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss
+++ b/src/plugins/discover/public/application/components/default_discover_table/_doc_table.scss
@@ -42,6 +42,13 @@ doc-table {
 
 .osd-table,
 .osdDocTable {
+  @include ouiCodeFont;
+
+  // To fight intruding styles that conflict with OUI's
+  & > tbody > tr > td {
+    line-height: inherit;
+  }
+
   /**
     *  Style OpenSearch document _source in table view <dt>key:<dt><dd>value</dd>
     *  Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted
diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
index 65dbcd73fba9..51d1c0ce96f8 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
+++ b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
@@ -1,4 +1,4 @@
-.osdDocTable_expandedRow {
+.osdDocTable__detailsParent {
   border-top: none !important;
 }
 
@@ -32,3 +32,16 @@
     opacity: 1;
   }
 }
+
+.osdDocTableCell__source {
+  .truncate-by-height {
+    transform: translateY(-1.5px);
+    margin-bottom: -1.5px;
+  }
+
+  dd,
+  dl,
+  dt {
+    font-size: inherit !important;
+  }
+}
diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx
index 4d714228f3bc..6715910e8346 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx
+++ b/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx
@@ -64,6 +64,7 @@ export function TableHeader({
 
           return (
             <TableHeaderColumn
+              key={idx}
               currentIdx={idx}
               colLeftIdx={colLeftIdx}
               colRightIdx={colRightIdx}
diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx
index 0885d7f9f1e7..9092ec527683 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx
+++ b/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx
@@ -43,7 +43,7 @@ export const TableRow = ({
   const flattened = indexPattern.flattenHit(row);
   const [isExpanded, setIsExpanded] = useState(false);
   const tableRow = (
-    <tr>
+    <tr key={row._id}>
       <td data-test-subj="docTableExpandToggleColumn" className="osdDocTableCell__toggleDetails">
         <EuiButtonIcon
           color="text"
@@ -61,6 +61,7 @@ export const TableRow = ({
         if (typeof row === 'undefined') {
           return (
             <td
+              key={columnId}
               data-test-subj="docTableField"
               className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
             >
@@ -71,8 +72,14 @@ export const TableRow = ({
 
         if (fieldInfo?.type === '_source') {
           return (
-            <td className="eui-textBreakAll eui-textBreakWord" data-test-subj="docTableField">
-              {fetchSourceTypeDataCell(indexPattern, row, columnId, false)}
+            <td
+              key={columnId}
+              className="osdDocTableCell eui-textBreakAll eui-textBreakWord osdDocTableCell__source"
+              data-test-subj="docTableField"
+            >
+              <div className="truncate-by-height">
+                {fetchSourceTypeDataCell(indexPattern, row, columnId, false)}
+              </div>
             </td>
           );
         }
@@ -82,6 +89,7 @@ export const TableRow = ({
         if (typeof formattedValue === 'undefined') {
           return (
             <td
+              key={columnId}
               data-test-subj="docTableField"
               className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
             >
@@ -95,18 +103,23 @@ export const TableRow = ({
         if (!fieldInfo?.filterable) {
           return (
             <td
+              key={columnId}
               data-test-subj="docTableField"
               className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
             >
-              {/* eslint-disable-next-line react/no-danger */}
-              <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
+              <div className="truncate-by-height">
+                {/* eslint-disable-next-line react/no-danger */}
+                <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
+              </div>
             </td>
           );
         }
 
         return (
           <TableCell
+            key={columnId}
             columnId={columnId}
+            columnType={fieldInfo?.type}
             onFilter={onFilter}
             isTimeField={indexPattern.timeFieldName === columnId}
             fieldMapping={fieldMapping}
@@ -118,9 +131,9 @@ export const TableRow = ({
   );
 
   const expandedTableRow = (
-    <tr>
-      <td className="osdDocTable_expandedRow" colSpan={columnIds.length + 1}>
-        <EuiFlexGroup justifyContent="center" alignItems="center">
+    <tr key={'x' + row._id}>
+      <td className="osdDocTable__detailsParent" colSpan={columnIds.length + 2}>
+        <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             <EuiIcon type="folderOpen" />
           </EuiFlexItem>