From d61ffc906ca7846f581dab37833dd64c776cab8e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 25 May 2018 10:54:46 -0700
Subject: [PATCH] Mock out search state and interactions

---
 ...sSearchBar.tsx => LogsSearchContainer.tsx} | 23 +++++++++---
 ui/src/logs/components/LogsTableContainer.tsx | 10 ++----
 ui/src/logs/containers/LogsPage.tsx           | 35 +++++++++++++++++--
 3 files changed, 54 insertions(+), 14 deletions(-)
 rename ui/src/logs/components/{LogsSearchBar.tsx => LogsSearchContainer.tsx} (68%)

diff --git a/ui/src/logs/components/LogsSearchBar.tsx b/ui/src/logs/components/LogsSearchContainer.tsx
similarity index 68%
rename from ui/src/logs/components/LogsSearchBar.tsx
rename to ui/src/logs/components/LogsSearchContainer.tsx
index 5440b00956..dda1aa4512 100644
--- a/ui/src/logs/components/LogsSearchBar.tsx
+++ b/ui/src/logs/components/LogsSearchContainer.tsx
@@ -1,11 +1,16 @@
-import React, {PureComponent} from 'react'
+import React, {PureComponent, ChangeEvent, KeyboardEvent} from 'react'
 
 interface Props {
-  thing: string
+  numResults: number
+  searchString: string
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  onSearch: () => void
 }
 
 class LogsSearchBar extends PureComponent<Props> {
   public render() {
+    const {searchString, onSearch, onChange, numResults} = this.props
+
     return (
       <div className="logs-viewer--search-container">
         <div className="logs-viewer--search">
@@ -13,21 +18,23 @@ class LogsSearchBar extends PureComponent<Props> {
             <input
               type="text"
               placeholder="Search logs using Keywords or Regular Expressions..."
-              defaultValue=""
+              value={searchString}
+              onChange={onChange}
+              onKeyDown={this.handleInputKeyDown}
               className="form-control input-sm"
               spellCheck={false}
               autoComplete="off"
             />
             <span className="icon search" />
           </div>
-          <button className="btn btn-sm btn-primary">
+          <button className="btn btn-sm btn-primary" onClick={onSearch}>
             <span className="icon search" />
             Search
           </button>
         </div>
         <div className="logs-viewer--filters-container">
           <label className="logs-viewer--results-text">
-            Query returned <strong>2,401 Events</strong>
+            Query returned <strong>{numResults} Events</strong>
           </label>
           <ul className="logs-viewer--filters">
             <li className="logs-viewer--filter">
@@ -47,6 +54,12 @@ class LogsSearchBar extends PureComponent<Props> {
       </div>
     )
   }
+
+  private handleInputKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === 'Enter') {
+      return this.props.onSearch()
+    }
+  }
 }
 
 export default LogsSearchBar
diff --git a/ui/src/logs/components/LogsTableContainer.tsx b/ui/src/logs/components/LogsTableContainer.tsx
index 88f993a711..ef6d52efe5 100644
--- a/ui/src/logs/components/LogsTableContainer.tsx
+++ b/ui/src/logs/components/LogsTableContainer.tsx
@@ -1,5 +1,4 @@
 import React, {PureComponent} from 'react'
-import LogsSearchBar from 'src/logs/components/LogsSearchBar'
 
 interface Props {
   thing: string
@@ -8,12 +7,9 @@ interface Props {
 class LogsTableContainer extends PureComponent<Props> {
   public render() {
     return (
-      <>
-        <LogsSearchBar thing="thing" />
-        <div className="logs-viewer--table-container">
-          <p>{this.props.thing}</p>
-        </div>
-      </>
+      <div className="logs-viewer--table-container">
+        <p>{this.props.thing}</p>
+      </div>
     )
   }
 }
diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx
index fcba7a54cb..e6e633839b 100644
--- a/ui/src/logs/containers/LogsPage.tsx
+++ b/ui/src/logs/containers/LogsPage.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react'
+import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
 import {getSourceAsync, setTimeRange, setNamespace} from 'src/logs/actions'
 import {getSourcesAsync} from 'src/shared/actions/sources'
@@ -6,6 +6,7 @@ import {Source, Namespace, TimeRange} from 'src/types'
 import LogViewerHeader from 'src/logs/components/LogViewerHeader'
 import GraphContainer from 'src/logs/components/LogsGraphContainer'
 import TableContainer from 'src/logs/components/LogsTableContainer'
+import SearchContainer from 'src/logs/components/LogsSearchContainer'
 
 interface Props {
   sources: Source[]
@@ -19,7 +20,19 @@ interface Props {
   timeRange: TimeRange
 }
 
-class LogsPage extends PureComponent<Props> {
+interface State {
+  searchString: string
+}
+
+class LogsPage extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props)
+
+    this.state = {
+      searchString: '',
+    }
+  }
+
   public componentDidUpdate() {
     if (!this.props.currentSource) {
       this.props.getSource(this.props.sources[0].id)
@@ -31,11 +44,19 @@ class LogsPage extends PureComponent<Props> {
   }
 
   public render() {
+    const {searchString} = this.state
+
     return (
       <div className="page">
         {this.header}
         <div className="page-contents logs-viewer">
           <GraphContainer thing="wooo" />
+          <SearchContainer
+            searchString={searchString}
+            onChange={this.handleSearchInputChange}
+            onSearch={this.handleSubmitSearch}
+            numResults={300}
+          />
           <TableContainer thing="snooo" />
         </div>
       </div>
@@ -65,6 +86,16 @@ class LogsPage extends PureComponent<Props> {
     )
   }
 
+  private handleSearchInputChange = (
+    e: ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.setState({searchString: e.target.value})
+  }
+
+  private handleSubmitSearch = (): void => {
+    // do the thing
+  }
+
   private handleChooseTimerange = (timeRange: TimeRange) => {
     this.props.setTimeRange(timeRange)
   }