From 2ace1d732eb47221f86aae6fce3433139637464c Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Tue, 12 Feb 2019 23:42:02 +0100
Subject: [PATCH] Remove TabPaneAlert

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 src/App.css | 11 ++++++-----
 src/App.js  | 21 +++++----------------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/App.css b/src/App.css
index 77dc28756d..11d49d8eda 100644
--- a/src/App.css
+++ b/src/App.css
@@ -27,6 +27,11 @@ button.execute-btn {
     border-left: 1px solid #dee2e6;
     border-right: 1px solid #dee2e6;
     border-bottom: 1px solid #dee2e6;
+    padding: 10px;
+}
+
+.tab-content .alert {
+    margin-bottom: 0;
 }
 
 .data-table.table {
@@ -67,7 +72,7 @@ button.execute-btn {
 }
 
 .graph-controls {
-    padding: 15px 0 10px 10px;
+    margin-bottom: 10px;
 }
 
 .graph-controls input {
@@ -99,10 +104,6 @@ button.execute-btn {
     color: #495057;
 }
 
-.tabpane-alert {
-    margin: 10px;
-}
-
 .graph-legend {
     margin: 15px 0 15px 25px;
 }
diff --git a/src/App.js b/src/App.js
index eddbd92c9f..0affe24d0c 100755
--- a/src/App.js
+++ b/src/App.js
@@ -563,17 +563,6 @@ class ExpressionInput extends Component {
   }
 }
 
-function TabPaneAlert(props) {
-  return (
-    <>
-      {/* Without the following <div> hack, giving the <Alert> any top margin
-          makes the entire tab pane look detached by that margin. */}
-      <div style={{height: '1px'}}></div>
-      <Alert className="tabpane-alert" color={props.color}>{props.children}</Alert>
-    </>
-  );
-}
-
 class DataTable extends PureComponent {
   limitSeries(series) {
     const maxSeries = 10000;
@@ -588,11 +577,11 @@ class DataTable extends PureComponent {
     const data = this.props.data;
 
     if (data === null) {
-      return <TabPaneAlert color="light">No data queried yet</TabPaneAlert>;
+      return <Alert color="light">No data queried yet</Alert>;
     }
 
     if (data.result === null || data.result.length === 0) {
-      return <TabPaneAlert color="secondary">Empty query result</TabPaneAlert>;
+      return <Alert color="secondary">Empty query result</Alert>;
     }
 
     let rows = [];
@@ -619,16 +608,16 @@ class DataTable extends PureComponent {
           rows.push(<tr><td>scalar</td><td>{data.result[1]}</td></tr>);
           break;
         default:
-          return <TabPaneAlert color="danger">Unsupported result value type '{data.resultType}'</TabPaneAlert>;
+          return <Alert color="danger">Unsupported result value type '{data.resultType}'</Alert>;
       }
     }
 
     return (
       <>
         {data.result.length !== limitedSeries.length &&
-          <TabPaneAlert color="danger">
+          <Alert color="danger">
             <strong>Warning:</strong> Fetched {data.result.length} metrics, only displaying first {limitedSeries.length}.
-          </TabPaneAlert>
+          </Alert>
         }
         <Table hover size="sm" className="data-table">
           <tbody>