From cfbc84e5bc4a836786312fde910162d68ca712c1 Mon Sep 17 00:00:00 2001
From: John Knox <jknox@fb.com>
Date: Thu, 30 May 2019 06:49:13 -0700
Subject: [PATCH] Add error bar

Summary: Red error bar at bottom when something goes wrong.

Reviewed By: danielbuechele

Differential Revision: D15536042

fbshipit-source-id: 6a20e22489f9346864b78f9102a0917f94c1c74f
---
 src/plugins/databases/index.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/plugins/databases/index.js b/src/plugins/databases/index.js
index ab30ab1ac..9972bb713 100644
--- a/src/plugins/databases/index.js
+++ b/src/plugins/databases/index.js
@@ -16,6 +16,7 @@ import {
   Button,
   ButtonGroup,
   Input,
+  colors,
   getStringFromErrorLike,
 } from 'flipper';
 import {Component} from 'react';
@@ -38,6 +39,12 @@ const BoldSpan = styled('span')({
   fontWeight: 'bold',
   textTransform: 'uppercase',
 });
+const ErrorBar = styled('div')({
+  backgroundColor: colors.cherry,
+  color: colors.white,
+  lineHeight: '26px',
+  textAlign: 'center',
+});
 
 type DatabasesPluginState = {|
   selectedDatabase: number,
@@ -758,7 +765,9 @@ export default class DatabasesPlugin extends FlipperPlugin<
             ) : null}
           </FlexRow>
         </Toolbar>
-        {this.state.error && getStringFromErrorLike(this.state.error)}
+        {this.state.error && (
+          <ErrorBar>{getStringFromErrorLike(this.state.error)}</ErrorBar>
+        )}
       </FlexColumn>
     );
   }