From a70cc8d349ca73d2935b9a6aeee00b99b2f7bed0 Mon Sep 17 00:00:00 2001
From: Victor Zhang <rongzhang@pinterest.com>
Date: Mon, 29 Apr 2024 16:24:54 -0400
Subject: [PATCH] fix: move workflow link to source query tab

---
 .../DataTableViewSourceQuery.scss             |  3 +++
 .../DataTableViewSourceQuery.tsx              | 26 +++++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/querybook/webapp/components/DataTableViewSourceQuery/DataTableViewSourceQuery.scss b/querybook/webapp/components/DataTableViewSourceQuery/DataTableViewSourceQuery.scss
index bdb2b5380..b13b2021d 100644
--- a/querybook/webapp/components/DataTableViewSourceQuery/DataTableViewSourceQuery.scss
+++ b/querybook/webapp/components/DataTableViewSourceQuery/DataTableViewSourceQuery.scss
@@ -22,4 +22,7 @@
             border-radius: var(--border-radius);
         }
     }
+    .DataTableViewSourceQuery-workflow {
+        margin-bottom: 12px;
+    }
 }
diff --git a/querybook/webapp/components/DataTableViewSourceQuery/DataTableViewSourceQuery.tsx b/querybook/webapp/components/DataTableViewSourceQuery/DataTableViewSourceQuery.tsx
index 879101c37..3a3fa4b0e 100644
--- a/querybook/webapp/components/DataTableViewSourceQuery/DataTableViewSourceQuery.tsx
+++ b/querybook/webapp/components/DataTableViewSourceQuery/DataTableViewSourceQuery.tsx
@@ -34,6 +34,7 @@ export const DataTableViewSourceQuery: React.FunctionComponent<IProps> = ({
     dataJobMetadataById,
 }) => {
     const [showOldJobMetadata, setShowOldJobMetadata] = useState(false);
+
     const jobMetadataIds = useMemo(
         () =>
             Array.from(
@@ -74,12 +75,31 @@ export const DataTableViewSourceQuery: React.FunctionComponent<IProps> = ({
         const loaded = !(dataJobMetadataById[id] as any).__loading;
         const dataJobMetadata = dataJobMetadataById[id];
         return loaded ? (
-            <DataJobMetadataInfo key={id} dataJobMetadata={dataJobMetadata} />
+            <DataJobMetadataInfo
+                key={id}
+                dataJobMetadata={dataJobMetadata}
+                table={table}
+            />
         ) : (
             <Loading key={id} />
         );
     });
 
+    const customProperties = table.custom_properties ?? {};
+    const workflowValue = customProperties['workflow']?.toString() ?? null;
+    const workflowDOM = workflowValue ? (
+        <div className="DataTableViewSourceQuery-workflow">
+            <div className="data-job-source-query-top">
+                <Title size="med" className="mb12">
+                    Workflow
+                </Title>
+            </div>
+            <Link to={workflowValue} newTab>
+                {workflowValue}
+            </Link>
+        </div>
+    ) : null;
+
     const errorDOM =
         jobMetadataIds.length > 0 ? null : (
             <EmptyText className="m24">
@@ -100,6 +120,7 @@ export const DataTableViewSourceQuery: React.FunctionComponent<IProps> = ({
     return (
         <div className="DataTableViewSourceQuery">
             {parentDOM}
+            {workflowDOM}
             {errorDOM}
             {showMoreDOM}
         </div>
@@ -108,7 +129,8 @@ export const DataTableViewSourceQuery: React.FunctionComponent<IProps> = ({
 
 const DataJobMetadataInfo: React.FC<{
     dataJobMetadata: IDataJobMetadata;
-}> = ({ dataJobMetadata }) => {
+    table: IDataTable;
+}> = ({ dataJobMetadata, table }) => {
     const queryExecutionUrlRows = [];
     if (
         dataJobMetadata.is_adhoc &&