From 7ac13f50044ae736e92adcb0f07e206ae2830333 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 21 Oct 2020 14:49:41 +0300
Subject: [PATCH] Using Prev/Next icons for search

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/dock/pod-log-controls.tsx      |  2 +-
 .../components/dock/pod-log-search.tsx        | 23 +++++++++++++++----
 .../components/input/search-input.tsx         |  3 +++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/dock/pod-log-controls.tsx b/src/renderer/components/dock/pod-log-controls.tsx
index 21e76f028d..f73e3a50cb 100644
--- a/src/renderer/components/dock/pod-log-controls.tsx
+++ b/src/renderer/components/dock/pod-log-controls.tsx
@@ -95,7 +95,7 @@ export const PodLogControls = observer((props: Props) => {
           </>
         )}
       </div>
-      <div className="flex gaps">
+      <div className="flex box grow gaps align-center">
         <Icon
           material="av_timer"
           onClick={toggleTimestamps}
diff --git a/src/renderer/components/dock/pod-log-search.tsx b/src/renderer/components/dock/pod-log-search.tsx
index f67d6d9816..35b6010bba 100644
--- a/src/renderer/components/dock/pod-log-search.tsx
+++ b/src/renderer/components/dock/pod-log-search.tsx
@@ -3,8 +3,10 @@ import "./pod-log-search.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { SearchInput } from "../input";
-import { Button } from "@material-ui/core";
 import { searchStore } from "./search.store";
+import { Icon } from "../icon";
+import { _i18n } from "../../i18n";
+import { t } from "@lingui/macro";
 
 export interface PodLogSearchProps {
   onSearch: (query: string) => void
@@ -15,7 +17,8 @@ export interface PodLogSearchProps {
 
 export const PodLogSearch = observer((props: PodLogSearchProps) => {
   const { logs, onSearch, toPrevOverlay, toNextOverlay } = props;
-  const { setNextOverlayActive, setPrevOverlayActive, searchQuery } = searchStore;
+  const { setNextOverlayActive, setPrevOverlayActive, searchQuery, occurrences } = searchStore;
+  const jumpDisabled = !searchQuery || !occurrences.length;
 
   const setSearch = (query: string) => {
     searchStore.onSearch(logs, query);
@@ -33,15 +36,25 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => {
   }
 
   return (
-    <div className="PodLogsSearch">
+    <div className="PodLogsSearch flex box grow justify-flex-end gaps align-center">
       <SearchInput
         value={searchQuery}
         onChange={setSearch}
         updateUrl={false}
       />
       {/* <span>{activeOverlay} / {totalOverlays}</span> */}
-      <Button onClick={onPrevOverlay}>prev</Button>
-      <Button onClick={onNextOverlay}>next</Button>
+      <Icon
+        material="keyboard_arrow_up"
+        tooltip={_i18n._(t`Previous`)}
+        onClick={onPrevOverlay}
+        disabled={jumpDisabled}
+      />
+      <Icon
+        material="keyboard_arrow_down"
+        tooltip={_i18n._(t`Next`)}
+        onClick={onNextOverlay}
+        disabled={jumpDisabled}
+      />
     </div>
   );
 });
\ No newline at end of file
diff --git a/src/renderer/components/input/search-input.tsx b/src/renderer/components/input/search-input.tsx
index f04fbf5eed..bc26d858ee 100644
--- a/src/renderer/components/input/search-input.tsx
+++ b/src/renderer/components/input/search-input.tsx
@@ -48,6 +48,9 @@ export class SearchInput extends React.Component<Props> {
     if (this.props.updateUrl) {
       this.updateUrl.flush();
     }
+    if (this.props.onChange) {
+      this.props.onChange("", null);
+    }
   }
 
   onChange = (val: string, evt: React.ChangeEvent<any>) => {