Fixing markdown for truncated column descriptions in the table (#1905)

Signed-off-by: Kristen Armes <karmes@lyft.com>
amundsen-io · Jun 16, 2022 · 7107864 · 7107864
1 parent 991b07f
commit 7107864
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/frontend/amundsen_application/static/js/features/ColumnList/constants.ts b/frontend/amundsen_application/static/js/features/ColumnList/constants.ts
@@ -7,3 +7,4 @@ export const COLUMN_LINEAGE_UPSTREAM_TITLE = `Top ${COLUMN_LINEAGE_LIST_SIZE} Up
 export const COLUMN_LINEAGE_MORE_TEXT = 'See More';
 export const HAS_COLUMN_STATS_TEXT = 'Column stats available';
 export const DELAY_SHOW_POPOVER_MS = 500;
+export const BREAK_MARKDOWN_TYPE = 'break';
diff --git a/frontend/amundsen_application/static/js/features/ColumnList/index.tsx b/frontend/amundsen_application/static/js/features/ColumnList/index.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
+import * as ReactMarkdown from 'react-markdown';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 
 import { NestingArrow } from 'components/SVGIcons/NestingArrow';
@@ -32,7 +33,11 @@ import { buildTableKey, TablePageParams } from 'utils/navigationUtils';
 import { GraphIcon } from 'components/SVGIcons/GraphIcon';
 
 import ColumnType from './ColumnType';
-import { EMPTY_MESSAGE, HAS_COLUMN_STATS_TEXT } from './constants';
+import {
+  BREAK_MARKDOWN_TYPE,
+  EMPTY_MESSAGE,
+  HAS_COLUMN_STATS_TEXT,
+} from './constants';
 
 import './styles.scss';
 
@@ -258,7 +263,12 @@ const ColumnList: React.FC<ColumnListProps> = ({
                 )}
                 {columnMetadataIcons}
               </div>
-              <p className="column-desc truncated">{description}</p>
+              <ReactMarkdown
+                className="column-desc"
+                disallowedTypes={[BREAK_MARKDOWN_TYPE]}
+              >
+                {description}
+              </ReactMarkdown>
             </div>
           </>
         );

diff --git a/frontend/amundsen_application/static/js/features/ColumnList/styles.scss b/frontend/amundsen_application/static/js/features/ColumnList/styles.scss
@@ -80,11 +80,14 @@ $nested-column-row-color: $gray5;
     white-space: normal;
   }
 
-  .column-desc {
+  .column-desc p {
     @extend %text-body-w3;
 
     margin: 0;
     max-width: $description-max-width-small;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     @media (min-width: $screen-md-max) {
       max-width: $description-max-width-med;