From a277d504a2b258d01be3a1aa401a19a33b8c817d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 10 Jan 2023 07:48:53 +0100
Subject: [PATCH] Table: Improve data link text style (#60811)

Table: Change data link text style
---
 .../src/components/Table/DefaultCell.tsx           | 11 +++++++++--
 packages/grafana-ui/src/components/Table/styles.ts | 14 ++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
index 1a5139e79b7..1129e0796ee 100644
--- a/packages/grafana-ui/src/components/Table/DefaultCell.tsx
+++ b/packages/grafana-ui/src/components/Table/DefaultCell.tsx
@@ -27,7 +27,6 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
   const showFilters = field.config.filterable;
   const showActions = (showFilters && cell.value !== undefined) || inspectEnabled;
   const cellStyle = getCellStyle(tableStyles, field, displayValue, inspectEnabled);
-
   const hasLinks = Boolean(getCellLinks(field, row)?.length);
 
   return (
@@ -38,7 +37,7 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
         <DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
           {(api) => {
             return (
-              <div onClick={api.openMenu} className={cx(tableStyles.cellLink, api.targetClassName)}>
+              <div onClick={api.openMenu} className={getLinkStyle(tableStyles, field, api.targetClassName)}>
                 {value}
               </div>
             );
@@ -85,3 +84,11 @@ function getCellStyle(
 
   return disableOverflowOnHover ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer;
 }
+
+function getLinkStyle(tableStyles: TableStyles, field: Field, targetClassName: string | undefined) {
+  if (field.config.custom?.displayMode === TableCellDisplayMode.Auto) {
+    return cx(tableStyles.cellLink, targetClassName);
+  }
+
+  return cx(tableStyles.cellLinkForColoredCell, targetClassName);
+}
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index afb821a7853..0e38b3b1761 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -16,6 +16,7 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
     const cellActionsOverflow: CSSObject = {
       margin: theme.spacing(0, -0.5, 0, 0.5),
     };
+
     const cellActionsNoOverflow: CSSObject = {
       position: 'absolute',
       top: 0,
@@ -168,6 +169,19 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       text-overflow: ellipsis;
       user-select: text;
       white-space: nowrap;
+      color: ${theme.colors.text.link};
+      font-weight: ${theme.typography.fontWeightMedium};
+      &:hover {
+        text-decoration: underline;
+      }
+    `,
+    cellLinkForColoredCell: css`
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: text;
+      white-space: nowrap;
+      font-weight: ${theme.typography.fontWeightMedium};
       text-decoration: underline;
     `,
     imageCellLink: css`