Mock out search state and interactions

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

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>
     )
   }
 }

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)
   }