Padding on table and limits on description showing (#688)

Signed-off-by: Marcos Iglesias Valle <golodhros@gmail.com>

amundsen_application/static/css/_layouts.scss

@@ -6,7 +6,6 @@
 
 $resource-header-height: 84px;
 $aside-separation-space: 40px;
-$screen-lg-max: 1490px;
 $screen-lg-container: 1440px;
 
 .resource-detail-layout {

amundsen_application/static/css/_variables-default.scss

@@ -100,6 +100,9 @@ $body-min-width: 1048px;
 $footer-height: 60px;
 $navbar-item-line-height: 36px;
 
+// Extra breakpoints
+$screen-lg-max: 1490px;
+
 // SearchPanel
 $search-panel-width: 270px;
 $search-panel-border-width: 4px;

amundsen_application/static/js/components/ColumnList/styles.scss

@@ -4,7 +4,9 @@
 @import 'variables';
 @import 'typography';
 
-$description-max-width: 700px;
+$description-max-width: 650px;
+$description-max-width-med: 450px;
+$description-max-width-small: 300px;
 
 .column-list {
   margin: 0;
@@ -75,25 +77,29 @@ $description-max-width: 700px;
 
   .markdown-wrapper p {
     margin-top: 0;
+    white-space: normal;
   }
 
   .column-desc {
     @extend %text-body-w3;
 
-    padding-right: $spacer-1;
-    max-width: $description-max-width;
+    max-width: $description-max-width-small;
 
-    .ams-table-row.has-child-expanded & {
-      display: none;
+    @media (min-width: $screen-md-max) {
+      max-width: $description-max-width-med;
+    }
+
+    @media (min-width: $screen-lg-max) {
+      max-width: $description-max-width;
     }
   }
 
-  .column-type {
-    padding-right: $spacer-1;
+  .has-child-expanded .column-desc {
+    display: none;
   }
 
-  .actions,
   .usage-value {
-    padding-left: $spacer-1;
+    font-variant-numeric: tabular-nums;
+    font-family: $text-heading-font-family;
   }
 }

amundsen_application/static/js/components/common/Table/index.spec.tsx

@@ -212,10 +212,11 @@ describe('Table', () => {
               data,
               columns,
             });
-            const expected = 'left';
+            const expected = true;
             const actual = wrapper
               .find('.ams-table-header .ams-table-heading-cell')
-              .get(0).props.style.textAlign;
+              .at(0)
+              .hasClass('is-left-aligned');
 
             expect(actual).toEqual(expected);
           });
@@ -225,23 +226,25 @@ describe('Table', () => {
               data,
               columns,
             });
-            const expected = 'center';
+            const expected = true;
             const actual = wrapper
               .find('.ams-table-header .ams-table-heading-cell')
-              .get(1).props.style.textAlign;
+              .at(1)
+              .hasClass('is-center-aligned');
 
             expect(actual).toEqual(expected);
           });
 
-          it('renders the first column as right aligned', () => {
+          it('renders the third column as right aligned', () => {
             const { wrapper } = setup({
               data,
               columns,
             });
-            const expected = 'right';
+            const expected = true;
             const actual = wrapper
               .find('.ams-table-header .ams-table-heading-cell')
-              .get(2).props.style.textAlign;
+              .at(2)
+              .hasClass('is-right-aligned');
 
             expect(actual).toEqual(expected);
           });
@@ -253,10 +256,11 @@ describe('Table', () => {
               data,
               columns,
             });
-            const expected = 'left';
+            const expected = true;
             const actual = wrapper
               .find('.ams-table-body .ams-table-cell')
-              .get(0).props.style.textAlign;
+              .at(0)
+              .hasClass('is-left-aligned');
 
             expect(actual).toEqual(expected);
           });
@@ -266,10 +270,11 @@ describe('Table', () => {
               data,
               columns,
             });
-            const expected = 'center';
+            const expected = true;
             const actual = wrapper
               .find('.ams-table-body .ams-table-cell')
-              .get(1).props.style.textAlign;
+              .at(1)
+              .hasClass('is-center-aligned');
 
             expect(actual).toEqual(expected);
           });
@@ -279,10 +284,11 @@ describe('Table', () => {
               data,
               columns,
             });
-            const expected = 'right';
+            const expected = true;
             const actual = wrapper
               .find('.ams-table-body .ams-table-cell')
-              .get(2).props.style.textAlign;
+              .at(2)
+              .hasClass('is-right-aligned');
 
             expect(actual).toEqual(expected);
           });

amundsen_application/static/js/components/common/Table/index.tsx

@@ -43,6 +43,11 @@ const DEFAULT_ROW_HEIGHT = 30;
 const EXPANDING_CELL_WIDTH = '70px';
 const DEFAULT_TEXT_ALIGNMENT = 'left';
 const DEFAULT_CELL_WIDTH = 'auto';
+const ALIGNEMENT_TO_CLASS_MAP = {
+  left: 'is-left-aligned',
+  right: 'is-right-aligned',
+  center: 'is-center-aligned',
+};
 
 type RowStyles = {
   height: string;
@@ -54,6 +59,9 @@ type EmptyRowProps = {
   emptyMessage?: string;
 };
 
+const getCellAlignmentClass = (alignment: TextAlignmentValues) =>
+  ALIGNEMENT_TO_CLASS_MAP[alignment];
+
 const EmptyRow: React.FC<EmptyRowProps> = ({
   colspan,
   rowStyles,
@@ -204,7 +212,6 @@ const Table: React.FC<TableProps> = ({
                       : DEFAULT_CELL_WIDTH;
                   const cellStyle = {
                     width,
-                    textAlign: `${horAlign}` as TextAlignmentValues,
                   };
                   // TODO: Improve the typing of this
                   let cellContent: React.ReactNode | typeof value = value;
@@ -214,7 +221,9 @@ const Table: React.FC<TableProps> = ({
 
                   return (
                     <td
-                      className="ams-table-cell"
+                      className={`ams-table-cell ${getCellAlignmentClass(
+                        horAlign
+                      )}`}
                       key={`index:${index}`}
                       style={cellStyle}
                     >
@@ -253,12 +262,13 @@ const Table: React.FC<TableProps> = ({
         ({ title, horAlign = DEFAULT_TEXT_ALIGNMENT, width = null }, index) => {
           const cellStyle = {
             width: width ? `${width}px` : DEFAULT_CELL_WIDTH,
-            textAlign: `${horAlign}` as TextAlignmentValues,
           };
 
           return (
             <th
-              className="ams-table-heading-cell"
+              className={`ams-table-heading-cell ${getCellAlignmentClass(
+                horAlign
+              )}`}
               key={`index:${index}`}
               style={cellStyle}
             >

amundsen_application/static/js/components/common/Table/styles.scss

@@ -42,6 +42,22 @@ $row-bottom-border-color: $gray10;
   &:last-child {
     padding-right: $spacer-3;
   }
+
+  &.is-left-aligned {
+    text-align: left;
+    padding-right: $spacer-1;
+  }
+
+  &.is-right-aligned {
+    text-align: right;
+    padding-left: $spacer-1;
+  }
+
+  &.is-center-aligned {
+    text-align: center;
+    padding-left: $spacer-1;
+    padding-right: $spacer-1;
+  }
 }
 
 .ams-table-row {
@@ -72,6 +88,22 @@ $row-bottom-border-color: $gray10;
   &:last-child {
     padding-right: $spacer-3;
   }
+
+  &.is-left-aligned {
+    text-align: left;
+    padding-right: $spacer-1;
+  }
+
+  &.is-right-aligned {
+    text-align: right;
+    padding-left: $spacer-1;
+  }
+
+  &.is-center-aligned {
+    text-align: center;
+    padding-left: $spacer-1;
+    padding-right: $spacer-1;
+  }
 }
 
 .ams-table-expanding-button {