Using SearchInput in PodLogSearch

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/pod-log-search.scss

@@ -0,0 +1,12 @@
+.PodLogsSearch {
+  .SearchInput {
+    min-width: 150px;
+
+    label {
+      background: none;
+      border: none;
+      border-radius: $radius;
+      box-shadow: 0 0 0 1px $halfGray;
+    }
+  }
+}

src/renderer/components/dock/pod-log-search.tsx

@@ -1,7 +1,8 @@
+import "./pod-log-search.scss";
+
 import React from "react";
 import { observer } from "mobx-react";
-import { cssNames } from "../../utils";
-import { Input } from "../input";
+import { SearchInput } from "../input";
 import { Button } from "@material-ui/core";
 import { searchStore } from "./search.store";
 
@@ -14,7 +15,7 @@ export interface PodLogSearchProps {
 
 export const PodLogSearch = observer((props: PodLogSearchProps) => {
   const { logs, onSearch, toPrevOverlay, toNextOverlay } = props;
-  const { setNextOverlayActive, setPrevOverlayActive } = searchStore;
+  const { setNextOverlayActive, setPrevOverlayActive, searchQuery } = searchStore;
 
   const setSearch = (query: string) => {
     searchStore.onSearch(logs, query);
@@ -33,10 +34,10 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => {
 
   return (
     <div className="PodLogsSearch">
-      <Input
-        className={cssNames("SearchInput")}
-        value={searchStore.searchQuery}
+      <SearchInput
+        value={searchQuery}
         onChange={setSearch}
+        updateUrl={false}
       />
       {/* <span>{activeOverlay} / {totalOverlays}</span> */}
       <Button onClick={onPrevOverlay}>prev</Button>

src/renderer/components/input/search-input.tsx

@@ -13,10 +13,12 @@ import { _i18n } from '../../i18n';
 
 interface Props extends InputProps {
   compact?: boolean; // show only search-icon when not focused
+  updateUrl?: boolean;
 }
 
 const defaultProps: Partial<Props> = {
   autoFocus: true,
+  updateUrl: true,
   get placeholder() {
     return _i18n._(t`Search...`)
   },
@@ -26,20 +28,26 @@ const defaultProps: Partial<Props> = {
 export class SearchInput extends React.Component<Props> {
   static defaultProps = defaultProps as object;
 
-  @observable inputVal = ""; // fix: use empty string to avoid react warnings
+  @observable inputVal = this.props.value || ""; // fix: use empty string to avoid react warnings
 
   @disposeOnUnmount
-  updateInput = autorun(() => this.inputVal = getSearch())
+  updateInput = autorun(() => {
+    if (this.props.updateUrl) this.inputVal = getSearch();
+  })
   updateUrl = debounce((val: string) => setSearch(val), 250)
 
   setValue = (value: string) => {
     this.inputVal = value;
-    this.updateUrl(value);
+    if (this.props.updateUrl) {
+      this.updateUrl(value);
+    }
   }
 
   clear = () => {
     this.setValue("");
-    this.updateUrl.flush();
+    if (this.props.updateUrl) {
+      this.updateUrl.flush();
+    }
   }
 
   onChange = (val: string, evt: React.ChangeEvent<any>) => {
@@ -63,7 +71,7 @@ export class SearchInput extends React.Component<Props> {
 
   render() {
     const { inputVal } = this;
-    const { className, compact, ...inputProps } = this.props;
+    const { className, compact, updateUrl, ...inputProps } = this.props;
     const icon = inputVal
       ? <Icon small material="close" onClick={this.clear}/>
       : <Icon small material="search"/>