Search: clean up styling (#47221)

public/app/features/search/page/table/Table.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
-import { useTable, useBlockLayout, Column, TableOptions, Cell } from 'react-table';
+import { useTable, Column, TableOptions, Cell, useAbsoluteLayout } from 'react-table';
 import { DataFrame, DataFrameType, DataFrameView, DataSourceRef, Field, GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
-import { useStyles2 } from '@grafana/ui';
 import { FixedSizeList } from 'react-window';
 import { TableCell } from '@grafana/ui/src/components/Table/TableCell';
 import { getTableStyles } from '@grafana/ui/src/components/Table/styles';
+import { useStyles2 } from '@grafana/ui';
 
 import { LocationInfo } from '../../service';
 import { generateColumns } from './columns';
@@ -66,7 +66,7 @@ export const Table = ({ data, width, tags, onTagFilterChange, onDatasourceChange
     [memoizedColumns, memoizedData]
   );
 
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(options, useBlockLayout);
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(options, useAbsoluteLayout);
 
   const RenderRow = React.useCallback(
     ({ index: rowIndex, style }) => {
@@ -78,35 +78,15 @@ export const Table = ({ data, width, tags, onTagFilterChange, onDatasourceChange
       return (
         <div {...row.getRowProps({ style })} className={styles.rowContainer}>
           {row.cells.map((cell: Cell, index: number) => {
-            if (
-              cell.column.id === 'column-checkbox' ||
-              cell.column.id === 'column-tags' ||
-              cell.column.id === 'column-datasource'
-            ) {
-              return (
-                <div key={index} className={styles.cellWrapper}>
-                  <TableCell
-                    key={index}
-                    tableStyles={tableStyles}
-                    cell={cell}
-                    columnIndex={index}
-                    columnCount={row.cells.length}
-                  />
-                </div>
-              );
-            }
-
             return (
-              <a href={url} key={index}>
+              <a href={url} key={index} className={styles.cellWrapper}>
-                <div className={styles.cellWrapper}>
+                <TableCell
-                  <TableCell
+                  key={index}
-                    key={index}
+                  tableStyles={tableStyles}
-                    tableStyles={tableStyles}
+                  cell={cell}
-                    cell={cell}
+                  columnIndex={index}
-                    columnIndex={index}
+                  columnCount={row.cells.length}
-                    columnCount={row.cells.length}
+                />
-                  />
-                </div>
               </a>
             );
           })}
@@ -178,7 +158,12 @@ const getStyles = (theme: GrafanaTheme2) => {
       align-items: center;
     `,
     cellWrapper: css`
-      display: flex;
+      div {
+        border-right: none;
+        &:hover {
+          box-shadow: none;
+        }
+      }
     `,
     headerCell: css`
       padding-top: 2px;
@@ -190,17 +175,30 @@ const getStyles = (theme: GrafanaTheme2) => {
       align-items: center;
     `,
     rowContainer: css`
+      label: row;
       &:hover {
         background-color: ${rowHoverBg};
       }
     `,
     typeIcon: css`
+      margin-left: 5px;
       margin-right: 9.5px;
       vertical-align: middle;
       display: inline-block;
       margin-bottom: ${theme.v1.spacing.xxs};
       fill: ${theme.colors.text.secondary};
     `,
+    datasourceItem: css`
+      span {
+        &:hover {
+          color: ${theme.colors.text.link};
+        }
+      }
+    `,
+    invalidDatasourceItem: css`
+      color: ${theme.colors.error.main};
+      text-decoration: line-through;
+    `,
     typeText: css`
       color: ${theme.colors.text.secondary};
     `,
@@ -218,13 +216,14 @@ const getStyles = (theme: GrafanaTheme2) => {
       margin-top: 5px;
     `,
     infoWrap: css`
+      color: ${theme.colors.text.secondary};
       span {
         margin-right: 10px;
       }
     `,
     tagList: css`
       justify-content: flex-start;
-      pointer-events: auto;
+      flex-wrap: nowrap;
     `,
   };
 };

public/app/features/search/page/table/columns.tsx

@@ -65,6 +65,7 @@ export const generateColumns = (
   const DATASOURCE_COLUMN_WIDTH = 200;
   const INFO_COLUMN_WIDTH = 100;
   const LOCATION_COLUMN_WIDTH = 200;
+  const TAGS_COLUMN_WIDTH = 200;
 
   width = TYPE_COLUMN_WIDTH;
   if (isDashboardList) {
@@ -92,12 +93,28 @@ export const generateColumns = (
   // Show datasources if we have any
   if (access.datasource && hasFieldValue(access.datasource)) {
     width = DATASOURCE_COLUMN_WIDTH;
-    columns.push(makeDataSourceColumn(access.datasource, width, styles.typeIcon, onDatasourceChange));
+    columns.push(
+      makeDataSourceColumn(
+        access.datasource,
+        width,
+        styles.typeIcon,
+        styles.datasourceItem,
+        styles.invalidDatasourceItem,
+        onDatasourceChange
+      )
+    );
+    availableWidth -= width;
+  }
+
+  // Show tags if we have any
+  if (access.tags && hasFieldValue(access.tags)) {
+    width = TAGS_COLUMN_WIDTH;
+    columns.push(makeTagsColumn(access.tags, width, styles.tagList, tags, onTagFilterChange));
     availableWidth -= width;
   }
 
   if (isDashboardList) {
-    width = INFO_COLUMN_WIDTH;
+    width = Math.max(availableWidth, INFO_COLUMN_WIDTH);
     columns.push({
       Cell: DefaultCell,
       id: `column-info`,
@@ -109,8 +126,8 @@ export const generateColumns = (
       },
       width: width,
     });
-    availableWidth -= width;
   } else {
+    width = Math.max(availableWidth, LOCATION_COLUMN_WIDTH);
     columns.push({
       Cell: DefaultCell,
       id: `column-location`,
@@ -138,15 +155,8 @@ export const generateColumns = (
         }
         return null;
       },
-      width: LOCATION_COLUMN_WIDTH,
+      width: width,
     });
-    availableWidth -= width;
-  }
-
-  // Show tags if we have any
-  if (access.tags && hasFieldValue(access.tags)) {
-    width = Math.max(availableWidth, 250);
-    columns.push(makeTagsColumn(access.tags, width, styles.tagList, tags, onTagFilterChange));
   }
 
   return columns;
@@ -176,6 +186,8 @@ function makeDataSourceColumn(
   field: Field<DataSourceRef[]>,
   width: number,
   iconClass: string,
+  datasourceItemClass: string,
+  invalidDatasourceItemClass: string,
   onDatasourceChange: (datasource?: string) => void
 ): TableColumn {
   return {
@@ -188,27 +200,30 @@ function makeDataSourceColumn(
       if (dslist?.length) {
         const srv = getDataSourceSrv();
         return (
-          <div>
+          <div className={datasourceItemClass}>
             {dslist.map((v, i) => {
               const settings = srv.getInstanceSettings(v);
               const icon = settings?.meta?.info?.logos?.small;
               if (icon) {
                 return (
-                  <a
+                  <span
                     key={i}
-                    href={`datasources/edit/${settings.uid}`}
                     onClick={(e) => {
                       e.stopPropagation();
                       e.preventDefault();
                       onDatasourceChange(settings.uid);
                     }}
                   >
-                    <SVG src={icon} width={14} height={14} title={settings.type} className={iconClass} />
+                    <img src={icon} width={14} height={14} title={settings.type} className={iconClass} />
                     {settings.name}
-                  </a>
+                  </span>
                 );
               }
-              return <span key={i}>{v.type}</span>;
+              return (
+                <span className={invalidDatasourceItemClass} key={i}>
+                  {v.type}
+                </span>
+              );
             })}
           </div>
         );