feat: display data element description as column description

querybook/webapp/components/DataElement/DataElementDescription.tsx

@@ -0,0 +1,70 @@
+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 getDescriptionDOM = () => {
+        const valueName =
+            typeof valueDataElement === 'object'
+                ? valueDataElement.name
+                : valueDataElement;
+        const valueDescription =
+            typeof valueDataElement === 'object'
+                ? valueDataElement.description
+                : null;
+
+        if (dataElementAssociation.type === DataElementAssociationType.REF) {
+            return <AccentText>{valueDescription}</AccentText>;
+        }
+
+        if (dataElementAssociation.type === DataElementAssociationType.ARRAY) {
+            return (
+                <KeyContentDisplay keyString={valueName}>
+                    <AccentText>{valueDescription}</AccentText>
+                </KeyContentDisplay>
+            );
+        }
+
+        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>
+            {getDescriptionDOM()}
+        </div>
+    );
+};

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>

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