Vertically align the text in osdQueryBar with other elements on the page

Signed-off-by: Miki <[email protected]>
ananzh · Jan 31, 2024 · 1848efe · 1848efe
1 parent 8ec8176
commit 1848efe
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 30 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/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -34,8 +34,8 @@
   // Unlike most inputs within layout control groups, the text area still needs a border.
   // These adjusts help it sit above the control groups shadow to line up correctly.
   padding: $euiSizeS;
-  padding-top: $euiSizeS + 3px;
-  transform: translateY(-1px) translateX(-1px);
+  padding-top: $euiSizeS + 2px;
+  transform: translateY(-2px) translateX(-1px);
 
   &:not(:focus):not(:invalid) {
     @include euiYScrollWithShadows;

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
@@ -1,3 +1,4 @@
 .euiDescriptionList.euiDescriptionList--inline .euiDescriptionList__title.osdDescriptionListFieldTitle {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);
+  font-size: inherit;
 }
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
@@ -69,6 +69,23 @@ doc-table {
   }
 }
 
+.osdDiscoverTable {
+  @include ouiCodeFont;
+
+  & > tbody > tr:not(.osdDiscoverInViewRow):not(.osdDiscoverExpandedRow) {
+    visibility: hidden;
+  }
+
+  .osdDiscoverExpandedRow {
+    background: $euiColorEmptyShade;
+    border-top: none !important;
+
+    & > td {
+      padding: 2em;
+    }
+  }
+}
+
 .osdDocTable__row {
   td {
     position: relative;

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,24 +1,26 @@
-.osdDocTable_expandedRow {
-  border-top: none !important;
-}
-
 .osdDocTableCell__toggleDetails {
   padding: 4px 0 0 !important;
 }
 
-.osdDocTableCell__filter { // TODO: make them appear at top right corner
-}
-
 /**
    * 1. Align icon with text in cell.
    * 2. Use opacity to make this element accessible to screen readers and keyboard.
    * 3. Show on focus to enable keyboard accessibility.
    */
 
 .osdDocTableCell {
-  white-space: pre-wrap;
+  position: relative;
 
-  &__filterButton {
+  &__filter {
+    position: absolute;
+    white-space: nowrap;
+    right: 0;
+    top: 0.5em;
+    background: $ouiPageBackgroundColor;
+  }
+
+  &__filterButton,
+  &__filter {
     opacity: 0;
     transition: opacity $euiAnimSpeedFast;
 
@@ -28,7 +30,34 @@
   }
 
   &:hover &__filterButton,
-  &:focus &__filterButton {
+  &:focus &__filterButton,
+  &:hover &__filter,
+  &:focus &__filter {
     opacity: 1;
   }
+
+  .osdDescriptionListFieldTitle {
+    margin: 0 4px 0 0 !important;
+  }
+
+  /* stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors */
+  &.eui-textNoWrap {
+    width: 1%;
+  }
+}
+
+.osdDocTable__limitedHeight {
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  max-height: 10em;
+  overflow: hidden;
+}
+
+.osdDocTableCell__source {
+  .osdDocTable__limitedHeight {
+    transform: translateY(-3px);
+    max-height: calc(10em - 3px);
+  }
 }
diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx
@@ -18,6 +18,7 @@ import { DocViewFilterFn } from '../../doc_views/doc_views_types';
 
 export interface TableCellProps {
   columnId: string;
+  columnType?: string;
   onFilter: DocViewFilterFn;
   filterable?: boolean;
   fieldMapping?: any;
@@ -26,16 +27,14 @@ export interface TableCellProps {
 
 export const TableCell = ({
   columnId,
+  columnType,
   onFilter,
   fieldMapping,
   sanitizedCellValue,
 }: TableCellProps) => {
-  return (
-    // eslint-disable-next-line react/no-danger
-    <td
-      data-test-subj="docTableField"
-      className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
-    >
+  const content = (
+    <>
+      {/* eslint-disable-next-line react/no-danger */}
       <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
       <span className="osdDocTableCell__filter">
         <EuiToolTip
@@ -69,6 +68,19 @@ export const TableCell = ({
           />
         </EuiToolTip>
       </span>
+    </>
+  );
+
+  return columnType === 'date' ? (
+    <td data-test-subj="docTableField" className="osdDocTableCell eui-textNoWrap">
+      {content}
+    </td>
+  ) : (
+    <td
+      data-test-subj="docTableField"
+      className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
+    >
+      <div className="osdDocTable__limitedHeight">{content}</div>
     </td>
   );
 };
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="osdDocTable__limitedHeight">
+                {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,6 +103,7 @@ export const TableRow = ({
         if (!fieldInfo?.filterable) {
           return (
             <td
+              key={columnId}
               data-test-subj="docTableField"
               className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
             >
@@ -106,7 +115,9 @@ export const TableRow = ({
 
         return (
           <TableCell
+            key={columnId}
             columnId={columnId}
+            columnType={fieldInfo?.type}
             onFilter={onFilter}
             fieldMapping={fieldMapping}
             sanitizedCellValue={sanitizedCellValue}
@@ -117,9 +128,9 @@ export const TableRow = ({
   );
 
   const expandedTableRow = (
-    <tr>
-      <td className="osdDocTable_expandedRow" colSpan={columnIds.length + 1}>
-        <EuiFlexGroup justifyContent="center" alignItems="center">
+    <tr className="osdDiscoverExpandedRow" key={'x' + row._id}>
+      <td colSpan={columnIds.length + 2}>
+        <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             <EuiIcon type="folderOpen" />
           </EuiFlexItem>

diff --git a/src/plugins/discover/public/application/helpers/breadcrumbs.ts b/src/plugins/discover/public/application/helpers/breadcrumbs.ts
@@ -30,16 +30,14 @@
 
 import { i18n } from '@osd/i18n';
 import { EuiBreadcrumb } from '@elastic/eui';
-import { getServices } from '../../opensearch_dashboards_services';
 
 export function getRootBreadcrumbs(): EuiBreadcrumb[] {
-  const { core } = getServices();
   return [
     {
       text: i18n.translate('discover.rootBreadcrumb', {
         defaultMessage: 'Discover',
       }),
-      onClick: () => core.application.navigateToApp('discover'),
+      href: '#/',
     },
   ];
 }