From 2668fcd85f1f89b8f56e46851e0b4a688ad1803d Mon Sep 17 00:00:00 2001
From: "J.C. Zhong" <jianchengzhong@pinterest.com>
Date: Fri, 10 Mar 2023 23:03:36 +0000
Subject: [PATCH 1/2] feat: display data element description as column
 description

---
 .../DataElement/DataElementDescription.tsx    | 69 +++++++++++++++++++
 .../DataTableColumnCard.tsx                   | 27 +++++---
 .../DataTableViewOverview.tsx                 |  9 ++-
 3 files changed, 95 insertions(+), 10 deletions(-)
 create mode 100644 querybook/webapp/components/DataElement/DataElementDescription.tsx

diff --git a/querybook/webapp/components/DataElement/DataElementDescription.tsx b/querybook/webapp/components/DataElement/DataElementDescription.tsx
new file mode 100644
index 000000000..d1755c590
--- /dev/null
+++ b/querybook/webapp/components/DataElement/DataElementDescription.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import {
+    DataElementAssociationType,
+    IDataElementAssociation,
+} from 'const/dataElement';
+import { KeyContentDisplay } from 'ui/KeyContentDisplay/KeyContentDisplay';
+import { AccentText } from 'ui/StyledText/StyledText';
+
+export const DataElementDescription = ({
+    dataElementAssociation,
+}: {
+    dataElementAssociation: IDataElementAssociation;
+}) => {
+    const valueDataElement = dataElementAssociation.value;
+    const keyDataElement = dataElementAssociation.key;
+
+    const valueName =
+        typeof valueDataElement === 'object'
+            ? valueDataElement.name
+            : valueDataElement;
+    const keyName =
+        typeof keyDataElement === 'object'
+            ? keyDataElement.name
+            : keyDataElement;
+
+    const valueDescription =
+        typeof valueDataElement === 'object'
+            ? valueDataElement.description
+            : null;
+    const keyDescription =
+        typeof keyDataElement === 'object' ? keyDataElement.description : null;
+
+    const mapDescrptionDOM = (
+        <div>
+            <KeyContentDisplay keyString={keyName}>
+                <AccentText>{keyDescription}</AccentText>
+            </KeyContentDisplay>
+            <KeyContentDisplay keyString={valueName}>
+                <AccentText>{valueDescription}</AccentText>
+            </KeyContentDisplay>
+        </div>
+    );
+
+    const listDescriptionDOM = (
+        <div>
+            <KeyContentDisplay keyString={valueName}>
+                <AccentText>{valueDescription}</AccentText>
+            </KeyContentDisplay>
+        </div>
+    );
+
+    return (
+        <div>
+            <AccentText color="lightest" untitled>
+                (showing data element description)
+            </AccentText>
+            {dataElementAssociation.type ===
+            DataElementAssociationType.ARRAY ? (
+                listDescriptionDOM
+            ) : dataElementAssociation.type ===
+              DataElementAssociationType.MAP ? (
+                mapDescrptionDOM
+            ) : (
+                <AccentText>{valueDescription}</AccentText>
+            )}
+        </div>
+    );
+};
diff --git a/querybook/webapp/components/DataTableViewColumn/DataTableColumnCard.tsx b/querybook/webapp/components/DataTableViewColumn/DataTableColumnCard.tsx
index 020984562..c293f603d 100644
--- a/querybook/webapp/components/DataTableViewColumn/DataTableColumnCard.tsx
+++ b/querybook/webapp/components/DataTableViewColumn/DataTableColumnCard.tsx
@@ -2,6 +2,7 @@ import { ContentState } from 'draft-js';
 import React, { useMemo } from 'react';
 
 import { DataElement } from 'components/DataElement/DataElement';
+import { DataElementDescription } from 'components/DataElement/DataElementDescription';
 import { DataTableColumnStats } from 'components/DataTableStats/DataTableColumnStats';
 import { TableTag } from 'components/DataTableTags/DataTableTags';
 import { IDataColumn } from 'const/metastore';
@@ -53,13 +54,21 @@ export const DataTableColumnCard: React.FunctionComponent<IProps> = ({
         <TableTag tag={tag} readonly={true} key={tag.id} mini={true} />
     ));
 
-    const userCommentsContent = (
-        <EditableTextField
-            value={column.description as ContentState}
-            onSave={updateDataColumnDescription.bind(null, column.id)}
-            placeholder="No user comments yet for column."
-            onEditRedirect={onEditColumnDescriptionRedirect}
-        />
+    const descriptionContent = (
+        <div>
+            {dataElementAssociation &&
+                !(column.description as ContentState).hasText() && (
+                    <DataElementDescription
+                        dataElementAssociation={dataElementAssociation}
+                    />
+                )}
+            <EditableTextField
+                value={column.description as ContentState}
+                onSave={updateDataColumnDescription.bind(null, column.id)}
+                placeholder="add column description"
+                onEditRedirect={onEditColumnDescriptionRedirect}
+            />
+        </div>
     );
     return (
         <div className="DataTableColumnCard">
@@ -108,8 +117,8 @@ export const DataTableColumnCard: React.FunctionComponent<IProps> = ({
                                 {column.comment}
                             </KeyContentDisplay>
                         )}
-                        <KeyContentDisplay keyString="User Comments">
-                            {userCommentsContent}
+                        <KeyContentDisplay keyString="Description">
+                            {descriptionContent}
                         </KeyContentDisplay>
                         <DataTableColumnStats columnId={column.id} />
                     </div>
diff --git a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
index 15df1c0cc..aef6f907f 100644
--- a/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
+++ b/querybook/webapp/components/DataTableViewOverview/DataTableViewOverview.tsx
@@ -34,6 +34,7 @@ import { refreshDataTableInMetastore } from 'redux/dataSources/action';
 import { SoftButton, TextButton } from 'ui/Button/Button';
 import { EditableTextField } from 'ui/EditableTextField/EditableTextField';
 import { KeyContentDisplay } from 'ui/KeyContentDisplay/KeyContentDisplay';
+import { Link } from 'ui/Link/Link';
 import { LoadingRow } from 'ui/Loading/Loading';
 import { Message } from 'ui/Message/Message';
 import { ShowMoreText } from 'ui/ShowMoreText/ShowMoreText';
@@ -154,7 +155,13 @@ export const DataTableViewOverview: React.FC<
         table.custom_properties ?? {}
     ).map(([key, value]) => (
         <KeyContentDisplay key={key} keyString={titleize(key, '_', ' ')}>
-            {value}
+            {/https?:\/\/[^\s]+/.test(value.trim()) ? (
+                <Link to={value} newTab>
+                    {value}
+                </Link>
+            ) : (
+                value
+            )}
         </KeyContentDisplay>
     ));
 

From c91a7558567a1a5d251dbde201860f48eee1cfb6 Mon Sep 17 00:00:00 2001
From: "J.C. Zhong" <jianchengzhong@pinterest.com>
Date: Fri, 10 Mar 2023 23:48:06 +0000
Subject: [PATCH 2/2] refactor

---
 .../DataElement/DataElementDescription.tsx    | 81 ++++++++++---------
 1 file changed, 41 insertions(+), 40 deletions(-)

diff --git a/querybook/webapp/components/DataElement/DataElementDescription.tsx b/querybook/webapp/components/DataElement/DataElementDescription.tsx
index d1755c590..6a2773ad3 100644
--- a/querybook/webapp/components/DataElement/DataElementDescription.tsx
+++ b/querybook/webapp/components/DataElement/DataElementDescription.tsx
@@ -15,55 +15,56 @@ export const DataElementDescription = ({
     const valueDataElement = dataElementAssociation.value;
     const keyDataElement = dataElementAssociation.key;
 
-    const valueName =
-        typeof valueDataElement === 'object'
-            ? valueDataElement.name
-            : valueDataElement;
-    const keyName =
-        typeof keyDataElement === 'object'
-            ? keyDataElement.name
-            : keyDataElement;
+    const getDescriptionDOM = () => {
+        const valueName =
+            typeof valueDataElement === 'object'
+                ? valueDataElement.name
+                : valueDataElement;
+        const valueDescription =
+            typeof valueDataElement === 'object'
+                ? valueDataElement.description
+                : null;
 
-    const valueDescription =
-        typeof valueDataElement === 'object'
-            ? valueDataElement.description
-            : null;
-    const keyDescription =
-        typeof keyDataElement === 'object' ? keyDataElement.description : null;
+        if (dataElementAssociation.type === DataElementAssociationType.REF) {
+            return <AccentText>{valueDescription}</AccentText>;
+        }
 
-    const mapDescrptionDOM = (
-        <div>
-            <KeyContentDisplay keyString={keyName}>
-                <AccentText>{keyDescription}</AccentText>
-            </KeyContentDisplay>
-            <KeyContentDisplay keyString={valueName}>
-                <AccentText>{valueDescription}</AccentText>
-            </KeyContentDisplay>
-        </div>
-    );
+        if (dataElementAssociation.type === DataElementAssociationType.ARRAY) {
+            return (
+                <KeyContentDisplay keyString={valueName}>
+                    <AccentText>{valueDescription}</AccentText>
+                </KeyContentDisplay>
+            );
+        }
 
-    const listDescriptionDOM = (
-        <div>
-            <KeyContentDisplay keyString={valueName}>
-                <AccentText>{valueDescription}</AccentText>
-            </KeyContentDisplay>
-        </div>
-    );
+        if (dataElementAssociation.type === DataElementAssociationType.MAP) {
+            const keyName =
+                typeof keyDataElement === 'object'
+                    ? keyDataElement.name
+                    : keyDataElement;
+            const keyDescription =
+                typeof keyDataElement === 'object'
+                    ? keyDataElement.description
+                    : null;
+            return (
+                <div>
+                    <KeyContentDisplay keyString={keyName}>
+                        <AccentText>{keyDescription}</AccentText>
+                    </KeyContentDisplay>
+                    <KeyContentDisplay keyString={valueName}>
+                        <AccentText>{valueDescription}</AccentText>
+                    </KeyContentDisplay>
+                </div>
+            );
+        }
+    };
 
     return (
         <div>
             <AccentText color="lightest" untitled>
                 (showing data element description)
             </AccentText>
-            {dataElementAssociation.type ===
-            DataElementAssociationType.ARRAY ? (
-                listDescriptionDOM
-            ) : dataElementAssociation.type ===
-              DataElementAssociationType.MAP ? (
-                mapDescrptionDOM
-            ) : (
-                <AccentText>{valueDescription}</AccentText>
-            )}
+            {getDescriptionDOM()}
         </div>
     );
 };