Use ouiCodeFont in Discover and reduce text size (#5783)

Also: * Fix react `key` errors * vertically align source cells * Clamp the height of the cells * Make sure time-series column never grows Signed-off-by: Miki <[email protected]>
opensearch-project · Feb 2, 2024 · 2db522e · 2db522e
1 parent 1095c8a
commit 2db522e
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 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
@@ -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
@@ -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.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
@@ -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
@@ -1,4 +1,4 @@
-.osdDocTable_expandedRow {
+.osdDocTable__detailsParent {
   border-top: none !important;
 }
 
@@ -31,4 +31,27 @@
   &:focus &__filterButton {
     opacity: 1;
   }
+
+  .osdDescriptionListFieldTitle {
+    margin: 0 4px 0 0 !important;
+  }
+
+  // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+  &.eui-textNoWrap {
+    // To make sure the time-series column never stretches
+    width: 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
@@ -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
@@ -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>