Resolve unintended style descrepancies (#471)

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

@@ -58,68 +58,67 @@ export class TableIssues extends React.Component<TableIssueProps> {
     );
   }
 
-  renderMoreIssuesMessage = (count: number, url: string) => {
+  renderIssueTitle = () => {
     return (
-      <span className="table-more-issues" key="more-issue-link">
-        <a id="more-issues-link" className="table-issue-more-issues" target="_blank" href={url} onClick={logClick}>
-         View all {count} issues
-        </a>
-        |
-        { this.renderReportIssueLink() }
-      </span>
+      <div className="section-title title-3">
+        Issues
+      </div>
     );
   }
 
-  renderReportIssueLink = () => {
-    return (
-      <div className="table-report-new-issue">
+  renderIssueContent = () => {
+    if (this.props.issues.length === 0) {
+      return (
+        <div className="issue-banner">
+          { NO_DATA_ISSUES_TEXT }
+        </div>
+      )
+    };
+    return this.props.issues.map(this.renderIssue);
+  }
+
+  renderIssueFooter = () => {
+    const hasIssues = this.props.issues.length !== 0;
+    const reportIssueLink = (
+      <div className={`table-report-new-issue ${hasIssues ? 'ml-1' : ''}`}>
         <ReportTableIssue tableKey={ this.props.tableKey } tableName={ this.props.tableName }/>
       </div>
     );
-  }
 
-  renderIssueTitle = () => {
+    if (!hasIssues) {
+      return reportIssueLink;
+    }
     return (
-      <div className="section-title title-3">
-        Issues
-      </div>
+      <span className="table-more-issues" key="more-issue-link">
+        <a id="more-issues-link" className="table-issue-more-issues" target="_blank" href={this.props.allIssuesUrl} onClick={logClick}>
+         View all { this.props.total } issues
+        </a>
+        |
+        { reportIssueLink }
+      </span>
     );
   }
 
   render() {
     if (this.props.isLoading) {
       return (
-        <div>
+        <>
           {this.renderIssueTitle()}
           <div className="table-issues">
             <LoadingSpinner />
           </div>
-        </div>
+        </>
       )
     }
 
-    if (this.props.issues.length === 0) {
-      return (
-        <div>
-          {this.renderIssueTitle()}
-          <div className="table-issues">
-            <div className="issue-banner">
-              {NO_DATA_ISSUES_TEXT}
-            </div>
-          </div>
-          { this.renderReportIssueLink()}
-        </div>
-      );
-    }
-
     return (
-      <div>
+      <>
         {this.renderIssueTitle()}
         <div className="table-issues">
-          { this.props.issues.map(this.renderIssue)}
+          {this.renderIssueContent()}
         </div>
-        { this.renderMoreIssuesMessage(this.props.total, this.props.allIssuesUrl)}
-      </div>
+        {this.renderIssueFooter()}
+      </>
     );
   }
 }

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

@@ -10,13 +10,14 @@
     flex-direction: row;
     border-top: 1px solid $stroke-light;
     color: $text-secondary;
+    line-height: 24px;
 
     &:last-child {
       border-bottom: 1px solid $stroke-light;
     }
 
-    > :not(.table-issue-priority) {
-      line-height: 24px;
+    .table-issue-priority {
+      line-height: 20px;
     }
   }
   .table-issue-link {
@@ -75,5 +76,8 @@
 }
 .table-report-new-issue {
   margin-bottom: $spacer-1;
-  margin-left: $spacer-1;
+
+  &.ml-1 {
+    margin-left: $spacer-1;
+  }
 }