From 1eb6b4e47970b3b8327208cfef718d947eb2a28d Mon Sep 17 00:00:00 2001
From: rongzhang <rongzhang@pinterest.com>
Date: Fri, 17 May 2024 21:22:00 +0000
Subject: [PATCH 1/2] add icon to table links

---
 .../DataTableViewOverview/DataTableViewOverview.tsx      | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
index 77908d999..ab00b1ebb 100644
--- a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
+++ b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
@@ -41,6 +41,7 @@ import { Message } from 'ui/Message/Message';
 import { ShowMoreText } from 'ui/ShowMoreText/ShowMoreText';
 
 import { DataTableViewOverviewSection } from './DataTableViewOverviewSection';
+import { Link2 } from 'lucide-react';
 
 import './DataTableViewOverview.scss';
 
@@ -133,6 +134,14 @@ export const DataTableViewOverview: React.FC<
     const tableLinksDOM = (table.table_links ?? []).map((link, index) => (
         <div key={index}>
             <Link to={link.url} newTab>
+                <Link2
+                    size={20}
+                    style={{
+                        position: 'relative',
+                        top: '5px',
+                        paddingRight: '5px',
+                    }}
+                />
                 {link.label ?? link.url}
             </Link>
             <br />

From deef2ead0a8853f234f9ed12dcbab3df76ff493e Mon Sep 17 00:00:00 2001
From: rongzhang <victorzhang1997@hotmail.com>
Date: Tue, 21 May 2024 16:09:24 +0000
Subject: [PATCH 2/2] comments

---
 .../DataTableViewOverview.scss                |  5 ++++
 .../DataTableViewOverview.tsx                 | 27 +++++--------------
 2 files changed, 12 insertions(+), 20 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 ab00b1ebb..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,7 +41,7 @@ import { Message } from 'ui/Message/Message';
 import { ShowMoreText } from 'ui/ShowMoreText/ShowMoreText';
 
 import { DataTableViewOverviewSection } from './DataTableViewOverviewSection';
-import { Link2 } from 'lucide-react';
+import { Icon } from 'ui/Icon/Icon';
 
 import './DataTableViewOverview.scss';
 
@@ -133,15 +133,8 @@ export const DataTableViewOverview: React.FC<
 
     const tableLinksDOM = (table.table_links ?? []).map((link, index) => (
         <div key={index}>
-            <Link to={link.url} newTab>
-                <Link2
-                    size={20}
-                    style={{
-                        position: 'relative',
-                        top: '5px',
-                        paddingRight: '5px',
-                    }}
-                />
+            <Link to={link.url} newTab className="data-table-table-links">
+                <Icon name="Link" size={12} />
                 {link.label ?? link.url}
             </Link>
             <br />
@@ -193,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">