From 684da232053c70c8bf3009fb40357c33e607a640 Mon Sep 17 00:00:00 2001
From: Kevin Delemme <kevin.delemme@elastic.co>
Date: Mon, 16 Sep 2024 12:16:07 -0400
Subject: [PATCH] chore(rca): Hide X axis on ESQL item (#192696)

---
 .../items/esql_item/register_esql_item.tsx    | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx b/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
index 5f2f95807b4e0..7e64db5557fc2 100644
--- a/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
+++ b/x-pack/plugins/observability_solution/investigate_app/public/items/esql_item/register_esql_item.tsx
@@ -4,8 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-import { css } from '@emotion/css';
+import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import type { ESQLSearchResponse } from '@kbn/es-types';
 import { i18n } from '@kbn/i18n';
@@ -123,29 +122,24 @@ export function EsqlWidget({ suggestion, dataView, esqlQuery, dateHistogramResul
     [dataView, lens, dateHistogramResults]
   );
 
+  // in the case of a lnsDatatable, we want to render the preview of the histogram and not the datable (input) itself
   if (input.attributes.visualizationType === 'lnsDatatable') {
     let innerElement: React.ReactElement;
     if (previewInput.error) {
       innerElement = <ErrorMessage error={previewInput.error} />;
     } else if (previewInput.value) {
-      innerElement = <lens.EmbeddableComponent {...previewInput.value} />;
+      innerElement = (
+        <lens.EmbeddableComponent
+          {...previewInput.value}
+          style={{ height: 128 }}
+          overrides={{ axisX: { hide: true } }}
+        />
+      );
     } else {
       innerElement = <EuiLoadingSpinner size="s" />;
     }
-    return (
-      <EuiFlexGroup direction="column" gutterSize="s">
-        <EuiFlexItem
-          grow={false}
-          className={css`
-            > div {
-              height: 128px;
-            }
-          `}
-        >
-          {innerElement}
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
+
+    return <EuiFlexItem grow={true}>{innerElement}</EuiFlexItem>;
   }
 
   return (