Table: Improve data link text style (#60811)

Table: Change data link text style

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);
+}

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`