fix: Explore -Tables missing vertical spacing (#78149)

* fix: added vertical space to tables

* chore: used theme for spacing

* fix: extended themeable2

* test: fixed TableContainer test with theme

public/app/features/explore/Table/TableContainer.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { DataFrame, FieldType, getDefaultTimeRange, InternalTimeZones, toDataFrame } from '@grafana/data';
 
-import { TableContainer } from './TableContainer';
+import { TableContainerWithTheme } from './TableContainer';
 
 function getTables(): HTMLElement[] {
   return screen.getAllByRole('table');
@@ -57,10 +57,10 @@ const defaultProps = {
   timeZone: InternalTimeZones.utc,
 };
 
-describe('TableContainer', () => {
+describe('TableContainerWithTheme', () => {
   describe('With one main frame', () => {
     it('should render component', () => {
-      render(<TableContainer {...defaultProps} />);
+      render(<TableContainerWithTheme {...defaultProps} />);
       const tables = getTables();
       expect(tables.length).toBe(1);
       expect(tables[0]).toBeInTheDocument();
@@ -82,12 +82,12 @@ describe('TableContainer', () => {
           length: 0,
         },
       ];
-      render(<TableContainer {...defaultProps} tableResult={emptyFrames} />);
+      render(<TableContainerWithTheme {...defaultProps} tableResult={emptyFrames} />);
       expect(screen.getByText('0 series returned')).toBeInTheDocument();
     });
 
     it('should update time when timezone changes', () => {
-      const { rerender } = render(<TableContainer {...defaultProps} />);
+      const { rerender } = render(<TableContainerWithTheme {...defaultProps} />);
       const rowsBeforeChange = within(getTables()[0]).getAllByRole('row');
       expect(getRowsData(rowsBeforeChange)).toEqual([
         { time: '2021-01-01 00:00:00', text: 'test_string_1' },
@@ -96,7 +96,7 @@ describe('TableContainer', () => {
         { time: '2021-01-01 02:00:00', text: 'test_string_4' },
       ]);
 
-      rerender(<TableContainer {...defaultProps} timeZone="cest" />);
+      rerender(<TableContainerWithTheme {...defaultProps} timeZone="cest" />);
       const rowsAfterChange = within(getTables()[0]).getAllByRole('row');
       expect(getRowsData(rowsAfterChange)).toEqual([
         { time: '2020-12-31 19:00:00', text: 'test_string_1' },
@@ -110,7 +110,7 @@ describe('TableContainer', () => {
     it('should render multiple tables for multiple frames', () => {
       const dataFrames = [dataFrame, dataFrame];
       const multiDefaultProps = { ...defaultProps, tableResult: dataFrames };
-      render(<TableContainer {...multiDefaultProps} />);
+      render(<TableContainerWithTheme {...multiDefaultProps} />);
       const tables = getTables();
       expect(tables.length).toBe(2);
       expect(tables[0]).toBeInTheDocument();

public/app/features/explore/Table/TableContainer.tsx

@@ -1,9 +1,10 @@
+import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { applyFieldOverrides, TimeZone, SplitOpen, DataFrame, LoadingState, FieldType } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
-import { Table, AdHocFilterItem, PanelChrome } from '@grafana/ui';
+import { Table, AdHocFilterItem, PanelChrome, withTheme2, Themeable2 } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { t } from 'app/core/internationalization';
 import {
@@ -17,7 +18,7 @@ import { MetaInfoText } from '../MetaInfoText';
 import { selectIsWaitingForData } from '../state/query';
 import { exploreDataLinkPostProcessorFactory } from '../utils/links';
 
-interface TableContainerProps {
+interface TableContainerProps extends Themeable2 {
   ariaLabel?: string;
   exploreId: string;
   width: number;
@@ -61,7 +62,8 @@ export class TableContainer extends PureComponent<Props> {
   }
 
   render() {
-    const { loading, onCellFilterAdded, tableResult, width, splitOpenFn, range, ariaLabel, timeZone } = this.props;
+    const { loading, onCellFilterAdded, tableResult, width, splitOpenFn, range, ariaLabel, timeZone, theme } =
+      this.props;
 
     let dataFrames = hasDeprecatedParentRowIndex(tableResult)
       ? migrateFromParentRowIndexToNestedFrames(tableResult)
@@ -93,30 +95,34 @@ export class TableContainer extends PureComponent<Props> {
             {() => <MetaInfoText metaItems={[{ value: t('explore.table.no-data', '0 series returned') }]} />}
           </PanelChrome>
         )}
-        {frames &&
-          frames.length > 0 &&
-          frames.map((data, i) => (
-            <PanelChrome
-              key={data.refId || `table-${i}`}
-              title={this.getTableTitle(dataFrames, data, i)}
-              width={width}
-              height={this.getTableHeight(data.length, this.hasSubFrames(data))}
-              loadingState={loading ? LoadingState.Loading : undefined}
-            >
-              {(innerWidth, innerHeight) => (
-                <Table
-                  ariaLabel={ariaLabel}
-                  data={data}
-                  width={innerWidth}
-                  height={innerHeight}
-                  onCellFilterAdded={onCellFilterAdded}
-                />
-              )}
-            </PanelChrome>
-          ))}
+        {frames && frames.length > 0 && (
+          <div className={css({ display: 'flex', flexDirection: 'column', gap: theme.spacing(1) })}>
+            {frames.map((data, i) => (
+              <PanelChrome
+                key={data.refId || `table-${i}`}
+                title={this.getTableTitle(dataFrames, data, i)}
+                width={width}
+                height={this.getTableHeight(data.length, this.hasSubFrames(data))}
+                loadingState={loading ? LoadingState.Loading : undefined}
+              >
+                {(innerWidth, innerHeight) => (
+                  <Table
+                    ariaLabel={ariaLabel}
+                    data={data}
+                    width={innerWidth}
+                    height={innerHeight}
+                    onCellFilterAdded={onCellFilterAdded}
+                  />
+                )}
+              </PanelChrome>
+            ))}
+          </div>
+        )}
       </>
     );
   }
 }
 
-export default connector(TableContainer);
+export const TableContainerWithTheme = withTheme2(TableContainer);
+
+export default withTheme2(connector(TableContainer));