From 79ffb699eeaa3b040789c2bd5f8ae4de11899845 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 15 Dec 2022 07:15:35 +0100
Subject: [PATCH] Revert "TablePanel: Improve and align table styles with rest
 of Grafana"

This reverts commit 1e28ee41ccdb79d0676c9ebe500ddebcdeec6732.
---
 .../src/components/Table/HeaderRow.tsx        | 11 +++-----
 .../grafana-ui/src/components/Table/Table.tsx |  6 ++---
 .../grafana-ui/src/components/Table/styles.ts | 26 +++++++------------
 public/app/plugins/panel/table/module.tsx     |  1 +
 4 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/HeaderRow.tsx b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
index ddd7c598692..7d9147e4a41 100644
--- a/packages/grafana-ui/src/components/Table/HeaderRow.tsx
+++ b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
@@ -21,7 +21,7 @@ export const HeaderRow = (props: HeaderRowProps) => {
   const tableStyles = useStyles2(getTableStyles);
 
   return (
-    <div role="rowgroup" className={tableStyles.headerRow}>
+    <div role="rowgroup">
       {headerGroups.map((headerGroup: HeaderGroup) => {
         const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps();
         return (
@@ -62,12 +62,9 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, showTypeIcons?:
               <Icon name={getFieldTypeIcon(field)} title={field?.type} size="sm" className={tableStyles.typeIcon} />
             )}
             <div>{column.render('Header')}</div>
-            {column.isSorted &&
-              (column.isSortedDesc ? (
-                <Icon size="lg" name="arrow-down" className={tableStyles.sortIcon} />
-              ) : (
-                <Icon name="arrow-up" size="lg" className={tableStyles.sortIcon} />
-              ))}
+            <div>
+              {column.isSorted && (column.isSortedDesc ? <Icon name="arrow-down" /> : <Icon name="arrow-up" />)}
+            </div>
           </button>
           {column.canFilter && <Filter column={column} tableStyles={tableStyles} field={field} />}
         </>
diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 325004560ab..e858c5af919 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -150,7 +150,7 @@ export const Table = memo((props: Props) => {
   const variableSizeListScrollbarRef = useRef<HTMLDivElement>(null);
   const tableStyles = useStyles2(getTableStyles);
   const theme = useTheme2();
-  const headerHeight = noHeader ? 0 : tableStyles.rowHeight;
+  const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
   const [footerItems, setFooterItems] = useState<FooterItem[] | undefined>(footerValues);
   const [expandedIndexes, setExpandedIndexes] = useState<Set<number>>(new Set());
   const prevExpandedIndexes = usePrevious(expandedIndexes);
@@ -288,9 +288,7 @@ export const Table = memo((props: Props) => {
   if (enablePagination) {
     listHeight -= tableStyles.cellHeight;
   }
-
-  const pageSize = Math.round(listHeight / tableStyles.rowHeight) - 1;
-
+  const pageSize = Math.round(listHeight / tableStyles.cellHeight) - 1;
   useEffect(() => {
     // Don't update the page size if it is less than 1
     if (pageSize <= 0) {
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index f96628f35b7..ebc27d5b979 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -3,7 +3,8 @@ import { css, CSSObject } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 
 export const getTableStyles = (theme: GrafanaTheme2) => {
-  const footerBg = theme.colors.background.secondary;
+  const { colors } = theme;
+  const headerBg = theme.colors.background.secondary;
   const borderColor = theme.colors.border.weak;
   const resizerColor = theme.colors.primary.border;
   const cellPadding = 6;
@@ -106,9 +107,10 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
     `,
     thead: css`
       label: thead;
-      height: ${rowHeight}px;
+      height: ${cellHeight}px;
       overflow-y: auto;
       overflow-x: hidden;
+      background: ${headerBg};
       position: relative;
     `,
     tfoot: css`
@@ -116,17 +118,15 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       height: ${cellHeight}px;
       overflow-y: auto;
       overflow-x: hidden;
-      background: ${footerBg};
+      background: ${headerBg};
       position: relative;
     `,
-    headerRow: css`
-      label: row;
-      border-bottom: 1px solid ${borderColor};
-    `,
     headerCell: css`
       padding: ${cellPadding}px;
       overflow: hidden;
       white-space: nowrap;
+      color: ${colors.primary.text};
+      border-right: 1px solid ${theme.colors.border.weak};
       display: flex;
 
       &:last-child {
@@ -141,15 +141,8 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      font-weight: ${theme.typography.fontWeightMedium};
       display: flex;
-      align-items: center;
       margin-right: ${theme.spacing(0.5)};
-
-      &:hover {
-        text-decoration: underline;
-        color: ${theme.colors.text.link};
-      }
     `,
     cellContainer: buildCellContainerStyle(undefined, undefined, true),
     cellContainerNoOverflow: buildCellContainerStyle(undefined, undefined, false),
@@ -159,9 +152,6 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       user-select: text;
       white-space: nowrap;
     `,
-    sortIcon: css`
-      margin-left: ${theme.spacing(0.5)};
-    `,
     cellLink: css`
       cursor: pointer;
       overflow: hidden;
@@ -183,10 +173,12 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
     `,
     paginationWrapper: css`
       display: flex;
+      background: ${headerBg};
       height: ${cellHeight}px;
       justify-content: center;
       align-items: center;
       width: 100%;
+      border-top: 1px solid ${theme.colors.border.weak};
       li {
         margin-bottom: 0;
       }
diff --git a/public/app/plugins/panel/table/module.tsx b/public/app/plugins/panel/table/module.tsx
index 5f81d88069d..5872e486f2b 100644
--- a/public/app/plugins/panel/table/module.tsx
+++ b/public/app/plugins/panel/table/module.tsx
@@ -20,6 +20,7 @@ const footerCategory = 'Table footer';
 export const plugin = new PanelPlugin<PanelOptions, TableFieldOptions>(TablePanel)
   .setPanelChangeHandler(tablePanelChangedHandler)
   .setMigrationHandler(tableMigrationHandler)
+  .setNoPadding()
   .useFieldConfig({
     useCustomConfig: (builder) => {
       builder