From 734292409b4d2f66463e80166e79702c43a00aab Mon Sep 17 00:00:00 2001
From: Victor Zhang <victorzhang1997@hotmail.com>
Date: Tue, 21 May 2024 16:38:33 -0400
Subject: [PATCH] ui: Add icon to table links (#1453)

* add icon to table links

* comments
---
 .../DataTableViewOverview.scss                 |  5 +++++
 .../DataTableViewOverview.tsx                  | 18 +++++++-----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.scss b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.scss
index 82140d4fa..8db8f4708 100644
--- a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.scss
+++ b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.scss
@@ -23,4 +23,9 @@
     .raw-metastore-info{
         word-break: break-all;
     }
+    .data-table-table-links {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+    }
 }
diff --git a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
index 77908d999..71d0560c2 100644
--- a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
+++ b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
@@ -25,7 +25,7 @@ import {
 } from 'const/metastore';
 import { useMounted } from 'hooks/useMounted';
 import { Nullable } from 'lib/typescript';
-import { isValidUrl, titleize } from 'lib/utils';
+import { titleize } from 'lib/utils';
 import { generateFormattedDate } from 'lib/utils/datetime';
 import { getAppName } from 'lib/utils/global';
 import { getHumanReadableByteSize } from 'lib/utils/number';
@@ -41,6 +41,7 @@ import { Message } from 'ui/Message/Message';
 import { ShowMoreText } from 'ui/ShowMoreText/ShowMoreText';
 
 import { DataTableViewOverviewSection } from './DataTableViewOverviewSection';
+import { Icon } from 'ui/Icon/Icon';
 
 import './DataTableViewOverview.scss';
 
@@ -132,7 +133,8 @@ export const DataTableViewOverview: React.FC<
 
     const tableLinksDOM = (table.table_links ?? []).map((link, index) => (
         <div key={index}>
-            <Link to={link.url} newTab>
+            <Link to={link.url} newTab className="data-table-table-links">
+                <Icon name="Link" size={12} />
                 {link.label ?? link.url}
             </Link>
             <br />
@@ -184,15 +186,9 @@ export const DataTableViewOverview: React.FC<
 
     const otherPropertiesDOM = Object.entries(customProperties)
         .filter(([key]) => !pinnedCustomProperties.includes(key))
-        .map(([key, value]) => {
-            return (
-                <KeyContentDisplayLink
-                    key={key}
-                    keyString={key}
-                    value={value}
-                />
-            );
-        });
+        .map(([key, value]) => (
+            <KeyContentDisplayLink key={key} keyString={key} value={value} />
+        ));
 
     const rawMetastoreInfoDOM = table.hive_metastore_description ? (
         <pre className="raw-metastore-info">