Update beta color and remove search button (elastic#21643)

# Conflicts: # x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js
sorenlouv · Aug 3, 2018 · 1bec834 · 1bec834
1 parent b46de1e
commit 1bec834
Showing 1 changed file with 50 additions and 52 deletions.
diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js
@@ -6,16 +6,11 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import Suggestions from './Suggestions';
 import ClickOutside from './ClickOutside';
-import {
-  EuiButton,
-  EuiFieldSearch,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiProgress,
-  EuiIconTip
-} from '@elastic/eui';
+import { EuiFieldSearch, EuiProgress, EuiToolTip } from '@elastic/eui';
+import { units, fontSizes, colors } from '../../../../style/variables';
 
 const KEY_CODES = {
   LEFT: 37,
@@ -27,6 +22,16 @@ const KEY_CODES = {
   TAB: 9
 };
 
+const BetaLabel = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: ${fontSizes.small};
+  transform: translateY(calc(-100% - ${units.quarter}px));
+  cursor: pointer;
+  color: ${colors.gray2};
+`;
+
 export class Typeahead extends Component {
   state = {
     isSuggestionsVisible: false,
@@ -167,53 +172,46 @@ export class Typeahead extends Component {
         onClickOutside={this.onClickOutside}
         style={{ position: 'relative' }}
       >
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem style={{ position: 'relative' }}>
-            <EuiFieldSearch
-              fullWidth
+        <div style={{ position: 'relative' }}>
+          <BetaLabel>
+            <EuiToolTip content="The Query bar feature is still in beta. Help us report any issues or bugs by using the APM feedback link in the top.">
+              <div>Beta</div>
+            </EuiToolTip>
+          </BetaLabel>
+
+          <EuiFieldSearch
+            fullWidth
+            style={{
+              backgroundImage: 'none'
+            }}
+            placeholder="Search transactions and errors... (E.g. transaction.duration.us > 300000 AND context.response.status_code >= 400)"
+            inputRef={node => {
+              if (node) {
+                this.inputRef = node;
+              }
+            }}
+            disabled={this.props.disabled}
+            value={this.state.value}
+            onKeyDown={this.onKeyDown}
+            onKeyUp={this.onKeyUp}
+            onChange={this.onChangeInputValue}
+            onClick={this.onClickInput}
+            autoComplete="off"
+            spellCheck={false}
+          />
+
+          {this.props.isLoading && (
+            <EuiProgress
+              size="xs"
+              color="accent"
+              position="absolute"
               style={{
-                backgroundImage: 'none'
-              }}
-              placeholder="Search transactions or errors… (i.e. transaction.duration.us => 100000)"
-              inputRef={node => {
-                if (node) {
-                  this.inputRef = node;
-                }
+                bottom: 0,
+                top: 'initial'
               }}
-              disabled={this.props.disabled}
-              value={this.state.value}
-              onKeyDown={this.onKeyDown}
-              onKeyUp={this.onKeyUp}
-              onChange={this.onChangeInputValue}
-              onClick={this.onClickInput}
-              autoComplete="off"
-              spellCheck={false}
-            />
-
-            {this.props.isLoading && (
-              <EuiProgress
-                size="xs"
-                color="accent"
-                position="absolute"
-                style={{
-                  bottom: 0,
-                  top: 'initial'
-                }}
-              />
-            )}
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.onSubmit} disabled={this.props.disabled}>
-              Search
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiIconTip
-              content="The Query bar feature is still in beta. Help us report any issues or bugs by using the APM feedback link in the top."
-              position="left"
             />
-          </EuiFlexItem>
-        </EuiFlexGroup>
+          )}
+        </div>
 
         <Suggestions
           show={this.state.isSuggestionsVisible}