restyle alert bar and move it to an scss import

embark-ui/src/components/Layout.js

@@ -246,13 +246,12 @@ class Layout extends React.Component {
             <AppSidebarMinimizer />
           </AppSidebar>
           }
-
           <main className="main">
-            <Alert color="danger" isOpen={(this.state.searchError && Boolean(searchResult.error))} toggle={() => this.dismissSearchError()}>
-              {searchResult.error}
-            </Alert>
-
             <Container fluid className="h-100 pt-4">
+              <Alert color="danger" isOpen={(this.state.searchError && Boolean(searchResult.error))}
+                     className="search-error no-gutters" toggle={() => this.dismissSearchError()}>
+                {searchResult.error}
+              </Alert>
               {children}
             </Container>
           </main>

embark-ui/src/components/SearchBar.js

@@ -4,7 +4,6 @@ import {Form, Input, Button} from 'reactstrap';
 import FontAwesome from 'react-fontawesome';
 import classNames from 'classnames';
 
-import './SearchBar.css';
 
 class SearchBar extends React.Component {
   constructor(props) {

embark-ui/src/constants.js

@@ -1,5 +1,6 @@
 export const EMBARK_PROCESS_NAME = 'embark';
-export const LOG_LIMIT = 50;
+export const LOG_LIMIT = 200;
+export const ELEMENTS_LIMIT = 200;
 export const DARK_THEME = 'dark';
 export const LIGHT_THEME = 'light';
 export const DEPLOYMENT_PIPELINES = {

embark-ui/src/reducers/index.js

@@ -3,11 +3,10 @@ import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE
         FETCH_CREDENTIALS, UPDATE_BASE_ETHER, CHANGE_THEME, FETCH_THEME, EXPLORER_SEARCH, DEBUGGER_INFO,
         SIGN_MESSAGE, VERIFY_MESSAGE, TOGGLE_BREAKPOINT,
         UPDATE_DEPLOYMENT_PIPELINE, WEB3_CONNECT, WEB3_DEPLOY, WEB3_ESTIMAGE_GAS, FETCH_EDITOR_TABS} from "../actions";
-import {EMBARK_PROCESS_NAME, DARK_THEME, DEPLOYMENT_PIPELINES, DEFAULT_HOST} from '../constants';
+import {EMBARK_PROCESS_NAME, DARK_THEME, DEPLOYMENT_PIPELINES, DEFAULT_HOST, ELEMENTS_LIMIT} from '../constants';
 
 const BN_FACTOR = 10000;
 const VOID_ADDRESS = '0x0000000000000000000000000000000000000000';
-const MAX_ELEMENTS = 200;
 
 const entitiesDefaultState = {
   accounts: [],
@@ -92,7 +91,7 @@ const filtrer = {
   },
   processLogs: function(processLog, index, self) {
     if (processLog.id !== undefined) {
-      return index === self.findIndex((p) => p.id === processLog.id) && index <= MAX_ELEMENTS;
+      return index === self.findIndex((p) => p.id === processLog.id) && index <= ELEMENTS_LIMIT;
     }
     return true;
   },
@@ -108,14 +107,14 @@ const filtrer = {
     return index === self.findIndex((t) => t.address === account.address);
   },
   blocks: function(block, index, self) {
-    if (index > MAX_ELEMENTS) {
+    if (index > ELEMENTS_LIMIT) {
       return false;
     }
 
     return index === self.findIndex((t) => t.number === block.number);
   },
   transactions: function(tx, index, self) {
-    if (index > MAX_ELEMENTS) {
+    if (index > ELEMENTS_LIMIT) {
       return false;
     }
     return index === self.findIndex((t) => (

embark-ui/src/sagas/searchSaga.js

@@ -1,10 +1,10 @@
 import {put, select} from "redux-saga/effects";
 import {getAccounts, getBlocks, getTransactions, getContracts} from "../reducers/selectors";
 import {fetchAccounts, fetchBlocks, fetchTransactions, fetchContracts} from "./index";
+import {ELEMENTS_LIMIT} from '../constants';
 
 export function *searchExplorer(entity, payload) {
   let result;
-  const SEARCH_LIMIT = 100;
 
   // Accounts
   yield fetchAccounts({});
@@ -29,7 +29,7 @@ export function *searchExplorer(entity, payload) {
   }
 
   // Blocks
-  yield fetchBlocks({limit: SEARCH_LIMIT});
+  yield fetchBlocks({limit: ELEMENTS_LIMIT});
   const blocks = yield select(getBlocks);
   const intSearchValue = parseInt(payload.searchValue, 10);
   result = blocks.find(block => {
@@ -41,7 +41,7 @@ export function *searchExplorer(entity, payload) {
   }
 
   // Transactions
-  yield fetchTransactions({blockLimit: SEARCH_LIMIT});
+  yield fetchTransactions({blockLimit: ELEMENTS_LIMIT});
   const transactions = yield select(getTransactions);
   result = transactions.find(transaction => {
     return transaction.hash === payload.searchValue;
@@ -51,5 +51,5 @@ export function *searchExplorer(entity, payload) {
     return yield put(entity.success(result));
   }
 
-  return yield put(entity.success({error: 'No result found in transactions, accounts, contracts, or blocks'}));
+  return yield put(entity.success({error: `No result found in transactions, accounts, contracts, or blocks. Please note: We limit the search to the last ${ELEMENTS_LIMIT} elements for performance`}));
 }

embark-ui/src/scss/SearchBar.scss

@@ -1,3 +1,6 @@
+@import "bootstrap/variables";
+@import "variables";
+
 #root .search-bar input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -27,4 +30,13 @@
 
 .search-bar .search-loading {
   margin-top: 16px;
-}
+}
+
+#root .search-error {
+  position: sticky;
+  margin: -#{$grid-gutter-width} -#{$grid-gutter-width} #{$grid-gutter-width} -#{$grid-gutter-width};
+  top: $navbar-height;
+  z-index: 3242;
+  border-radius: 0;
+  border: 0;
+}

embark-ui/src/scss/coreui.scss

@@ -60,3 +60,5 @@
   // Custom Properties support for Internet Explorer
   @import "ie-custom-properties";
 }
+
+@import "SearchBar";