From 6a828a051aa764b167c2722cc08ede43fcdb3e73 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Tue, 15 Feb 2022 14:06:24 +0100
Subject: [PATCH] Logs: Fix LogDetailsRow tests that produced console errors
 (#45388)

* Fix LogDetailsRow tests that produced console errors

* Use div instead of wrapping with table

* Use div instead of wrapping with table
---
 .../grafana-ui/src/components/Logs/LogDetailsRow.test.tsx | 8 +++++++-
 packages/grafana-ui/src/components/Logs/LogLabelStats.tsx | 7 ++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Logs/LogDetailsRow.test.tsx b/packages/grafana-ui/src/components/Logs/LogDetailsRow.test.tsx
index 4c1243f4161..781320c1f70 100644
--- a/packages/grafana-ui/src/components/Logs/LogDetailsRow.test.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogDetailsRow.test.tsx
@@ -20,7 +20,13 @@ const setup = (propOverrides?: Partial<Props>) => {
 
   Object.assign(props, propOverrides);
 
-  return render(<LogDetailsRow {...props} />);
+  return render(
+    <table>
+      <tbody>
+        <LogDetailsRow {...props} />
+      </tbody>
+    </table>
+  );
 };
 
 describe('LogDetailsRow', () => {
diff --git a/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx b/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx
index 1130cc766e3..fd5aa50d4d5 100644
--- a/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogLabelStats.tsx
@@ -15,10 +15,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     logsStats: css`
       label: logs-stats;
-      column-span: 2;
       background: inherit;
       color: ${theme.colors.text};
       word-break: break-all;
+      width: fit-content;
+      max-width: 100%;
     `,
     logsStatsHeader: css`
       label: logs-stats__header;
@@ -74,7 +75,7 @@ class UnThemedLogLabelStats extends PureComponent<Props> {
     const otherProportion = otherCount / total;
 
     return (
-      <td className={style.logsStats} data-testid="logLabelStats">
+      <div className={style.logsStats} data-testid="logLabelStats">
         <div className={style.logsStatsHeader}>
           <div className={style.logsStatsTitle}>
             {label}: {total} of {rowCount} rows have that {isLabel ? 'label' : 'field'}
@@ -89,7 +90,7 @@ class UnThemedLogLabelStats extends PureComponent<Props> {
             <LogLabelStatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />
           )}
         </div>
-      </td>
+      </div>
     );
   }
 }