fix: Miscellaneous UI Fixes (#469)

* Fix dashboard preview modal title

* Improve vertical spacing in resource header

* Apply min-height to left panel metadata sections

* Update EditableSection rendering when missing optional props

* Update style for left panel metadata sections

* Fix resource detail height; Remove duplicate style

* Add hover effects on the service links

* Update EditableSection tests

amundsen_application/static/css/_layouts.scss

@@ -2,13 +2,13 @@
 $resource-header-height: 84px;
 
 .resource-detail-layout {
-  height: calc(100% - #{$nav-bar-height} - #{$footer-height});
+  height: calc(100vh - #{$nav-bar-height} - #{$footer-height});
 
   .resource-header {
     display: flex;
     height: $resource-header-height;
     border-bottom: 2px solid $divider;
-    padding: 16px 24px 0;
+    padding: 16px 24px;
 
 
     .icon-header {
@@ -20,11 +20,13 @@ $resource-header-height: 84px;
     .header-section {
       &.header-title {
         flex-grow: 1;
-        overflow: hidden;
 
         .header-title-text {
           display: inline-block;
           max-width: calc(100% - 100px);
+          // Better align the header-title-text
+          // (84px header height - 32px vertical padding - 2px border - 20px subtitle line-height) = 30px
+          line-height: 30px;
         }
       }
 
@@ -97,13 +99,20 @@ $resource-header-height: 84px;
 
       .section-title {
         color: $text-tertiary;
-        margin: 40px 0 8px;
+        margin-bottom: 8px;
+      }
+
+      .editable-section,
+      .metadata-section {
+        margin-top: 40px;
+        min-height: 70px;
+        display: inline-table;
       }
 
       .editable-text {
         font-size: 16px;
 
-        .markdown-wrapper{
+        .markdown-wrapper {
           font-size: 16px;
         }
       }

amundsen_application/static/js/components/DashboardPage/ImagePreview/index.tsx

@@ -33,7 +33,7 @@ const PreviewModal = ({ imageSrc, onClose }: PreviewModalProps) => {
   return (
     <Modal show={show} onHide={handleClose} scrollable="true" className="dashboard-preview-modal">
       <Modal.Header closeButton={true}>
-        <Modal.Title className="text-center">Constants.DASHBOARD_PREVIEW_MODAL_TITLE</Modal.Title>
+        <Modal.Title className="text-center">{Constants.DASHBOARD_PREVIEW_MODAL_TITLE}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <img

amundsen_application/static/js/components/DashboardPage/index.tsx

@@ -207,6 +207,7 @@ export class DashboardPage extends React.Component<DashboardPageProps, Dashboard
             </EditableSection>
             <section className="column-layout-2">
               <section className="left-panel">
+                <section className="metadata-section">
                   <div className="section-title title-3">Owners</div>
                   <div>
                     {
@@ -229,19 +230,26 @@ export class DashboardPage extends React.Component<DashboardPageProps, Dashboard
                       />
                     }
                   </div>
+                </section>
+                <section className="metadata-section">
                   <div className="section-title title-3">Created</div>
                   <div className="body-2 text-primary">
                     { formatDateTimeShort({ epochTimestamp: dashboard.created_timestamp}) }
                   </div>
+                </section>
+                <section className="metadata-section">
                   <div className="section-title title-3">Last Updated</div>
                   <div className="body-2 text-primary">
                     { formatDateTimeShort({ epochTimestamp: dashboard.updated_timestamp }) }
                   </div>
+                </section>
+                <section className="metadata-section">
                   <div className="section-title title-3">Recent View Count</div>
                   <div className="body-2 text-primary">
                     { dashboard.recent_view_count }
                   </div>
                 </section>
+              </section>
               <section className="right-panel">
                 <EditableSection title="Tags">
                   <TagInput
@@ -249,10 +257,13 @@ export class DashboardPage extends React.Component<DashboardPageProps, Dashboard
                     uriKey={ this.props.dashboard.uri }
                   />
                 </EditableSection>
+                <section className="metadata-section">
                   <div className="section-title title-3">Last Successful Run</div>
                   <div className="body-2 text-primary">
                     { formatDateTimeShort({ epochTimestamp: dashboard.last_successful_run_timestamp }) }
                   </div>
+                </section>
+                <section className="metadata-section">
                   <div className="section-title title-3">Last Run</div>
                   <div>
                     <div className="body-2 text-primary">
@@ -268,6 +279,7 @@ export class DashboardPage extends React.Component<DashboardPageProps, Dashboard
                   </div>
                 </section>
               </section>
+            </section>
             <ImagePreview uri={this.state.uri} redirectUrl={dashboard.url} />
           </section>
           <section className="right-panel">

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -155,37 +155,43 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
           </header>
           <article className="column-layout-1">
             <section className="left-panel">
-              {}
               <EditableSection title="Description">
                 <TableDescEditableText
                   maxLength={ AppConfig.editableText.tableDescLength }
                   value={ data.description }
                   editable={ data.is_editable }
                 />
-              </EditableSection>
                 <span>
                   { notificationsEnabled() && <RequestDescriptionText/> }
                 </span>
-              {issueTrackingEnabled() && <TableIssues tableKey={ this.key } tableName={ this.getDisplayName()}/>}
+              </EditableSection>
+              {
+                issueTrackingEnabled() &&
+                <section className="metadata-section">
+                  <TableIssues tableKey={ this.key } tableName={ this.getDisplayName()}/>
+                </section>
+              }
               <section className="column-layout-2">
                 <section className="left-panel">
                   {
                     !data.is_view &&
-                    <>
+                    <section className="metadata-section">
                       <div className="section-title title-3">Date Range</div>
                       <WatermarkLabel watermarks={ data.watermarks }/>
-                    </>
+                    </section>
                   }
                   {
                     !!data.last_updated_timestamp &&
-                    <>
+                    <section className="metadata-section">
                       <div className="section-title title-3">Last Updated</div>
                       <div className="body-2">{ formatDateTimeShort({ epochTimestamp: data.last_updated_timestamp }) }</div>
-                    </>
+                    </section>
                   }
+                  <section className="metadata-section">
                     <div className="section-title title-3">Frequent Users</div>
                     <FrequentUsers readers={ data.table_readers }/>
                   </section>
+                </section>
                 <section className="right-panel">
                   <EditableSection title="Tags">
                     <TagInput

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

 @import 'variables';
 
 .table-detail {
-  height: calc(100% - #{$nav-bar-height} - #{$footer-height});
-
   .column-layout-1 .left-panel {
     .programmatic-title {
       color: $text-primary;
@@ -15,4 +13,13 @@
       margin: 10px 0 4px;
     }
   }
+
+  .header-links {
+    .avatar-label {
+      &:focus,
+      &:hover {
+        color: $link-hover-color;
+      }
+    }
+  }
 }

amundsen_application/static/js/components/common/EditableSection/constants.ts

+export const EDIT_TEXT = 'Click to edit';

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

@@ -88,5 +88,10 @@ describe("EditableSection", () => {
         expect(wrapper.find(".edit-button").props().href).toBe(props.editUrl);
       });
     });
+
+    it("does not render button if readOnly=true and there is no external editUrl", () => {
+      const wrapper = setup({ readOnly: true }, <div/>).wrapper;
+      expect(wrapper.find(".edit-button").exists()).toBeFalsy();
+    });
   });
 });

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

 import * as React from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 
+import * as Constants from './constants';
+
 import './styles.scss';
 
 export interface EditableSectionProps {
@@ -22,6 +24,10 @@ export interface EditableSectionChildProps {
 }
 
 export class EditableSection extends React.Component<EditableSectionProps, EditableSectionState> {
+  static defaultProps: Partial<EditableSectionProps> = {
+    editText: Constants.EDIT_TEXT,
+  };
+
   constructor(props) {
     super(props);
 
@@ -53,6 +59,10 @@ export class EditableSection extends React.Component<EditableSectionProps, Edita
   renderReadOnlyButton = (): React.ReactNode => {
     const { editText, editUrl } = this.props;
     const popoverHoverFocus = (<Popover id="popover-trigger-hover-focus">{ editText }</Popover>);
+
+    if (!editUrl) {
+      return null;
+    }
     return (
       <OverlayTrigger
        trigger={["hover", "focus"]}