Search: Improve tab navigation (#48932)

packages/grafana-ui/src/components/Table/TableCell.tsx

@@ -10,9 +10,10 @@ export interface Props {
   onCellFilterAdded?: TableFilterActionCallback;
   columnIndex: number;
   columnCount: number;
+  userProps?: object;
 }
 
-export const TableCell: FC<Props> = ({ cell, tableStyles, onCellFilterAdded, columnIndex, columnCount }) => {
+export const TableCell: FC<Props> = ({ cell, tableStyles, onCellFilterAdded, columnIndex, columnCount, userProps }) => {
   const cellProps = cell.getCellProps();
   const field = (cell.column as any as GrafanaTableColumn).field;
 
@@ -38,5 +39,6 @@ export const TableCell: FC<Props> = ({ cell, tableStyles, onCellFilterAdded, col
     onCellFilterAdded,
     cellProps,
     innerWidth,
+    userProps,
   }) as React.ReactElement;
 };

public/app/features/search/page/components/SearchResultsTable.tsx

@@ -29,7 +29,6 @@ export type TableColumn = Column & {
   field?: Field;
 };
 
-const skipHREF = new Set(['column-checkbox', 'column-datasource', 'column-location']);
 const HEADER_HEIGHT = 36; // pixels
 
 export const SearchResultsTable = ({
@@ -78,28 +77,21 @@ export const SearchResultsTable = ({
       return (
         <div {...row.getRowProps({ style })} className={styles.rowContainer}>
           {row.cells.map((cell: Cell, index: number) => {
-            const body = (
+            return (
               <TableCell
                 key={index}
                 tableStyles={tableStyles}
                 cell={cell}
                 columnIndex={index}
                 columnCount={row.cells.length}
+                userProps={{ href: url }}
               />
             );
-            if (skipHREF.has(cell.column.id)) {
-              return body;
-            }
-            return (
-              <a href={url} key={index} className={styles.cellWrapper}>
-                {body}
-              </a>
-            );
           })}
         </div>
       );
     },
-    [rows, prepareRow, response.view.fields.url?.values, styles.rowContainer, styles.cellWrapper, tableStyles]
+    [rows, prepareRow, response.view.fields.url?.values, styles.rowContainer, tableStyles]
   );
 
   if (!rows.length) {
@@ -171,11 +163,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       align-items: center;
     `,
     cellWrapper: css`
-      div {
-        border-right: none;
-        &:hover {
-          box-shadow: none;
-        }
+      border-right: none;
+      &:hover {
+        box-shadow: none;
       }
     `,
     headerCell: css`

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

@@ -79,9 +79,9 @@ export const generateColumns = (
     Cell: (p) => {
       const name = access.name.values.get(p.row.index);
       return (
-        <div {...p.cellProps} className={p.cellStyle}>
+        <a {...p.cellProps} href={p.userProps.href} className={cx(p.cellStyle, styles.cellWrapper)}>
           {name}
-        </div>
+        </a>
       );
     },
     id: `column-name`,
@@ -92,7 +92,7 @@ export const generateColumns = (
   availableWidth -= width;
 
   width = TYPE_COLUMN_WIDTH;
-  columns.push(makeTypeColumn(access.kind, access.panel_type, width, styles.typeText, styles.typeIcon));
+  columns.push(makeTypeColumn(access.kind, access.panel_type, width, styles));
   availableWidth -= width;
 
   // Show datasources if we have any
@@ -222,8 +222,7 @@ function makeTypeColumn(
   kindField: Field<string>,
   typeField: Field<string>,
   width: number,
-  typeTextClass: string,
-  iconClass: string
+  styles: Record<string, string>
 ): TableColumn {
   return {
     Cell: DefaultCell,
@@ -264,8 +263,8 @@ function makeTypeColumn(
         }
       }
       return (
-        <div className={typeTextClass}>
-          <SVG src={icon} width={14} height={14} title={txt} className={iconClass} />
+        <div className={styles.typeText}>
+          <SVG src={icon} width={14} height={14} title={txt} className={styles.typeIcon} />
           {txt}
         </div>
       );