Adding find counters

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

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

@@ -1,6 +1,7 @@
 .PodLogsSearch {
   .SearchInput {
     min-width: 150px;
+    width: 150px;
 
     label {
       background: none;
@@ -8,5 +9,9 @@
       border-radius: $radius;
       box-shadow: 0 0 0 1px $halfGray;
     }
+
+    .find-count {
+      margin-left: 2px;
+    }
   }
 }

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

@@ -17,8 +17,13 @@ export interface PodLogSearchProps {
 
 export const PodLogSearch = observer((props: PodLogSearchProps) => {
   const { logs, onSearch, toPrevOverlay, toNextOverlay } = props;
-  const { setNextOverlayActive, setPrevOverlayActive, searchQuery, occurrences } = searchStore;
+  const { setNextOverlayActive, setPrevOverlayActive, searchQuery, occurrences, activeFind, totalFinds } = searchStore;
   const jumpDisabled = !searchQuery || !occurrences.length;
+  const findCounts = (
+    <div className="find-count">
+      {activeFind}/{totalFinds}
+    </div>
+  );
 
   const setSearch = (query: string) => {
     searchStore.onSearch(logs, query);
@@ -40,9 +45,9 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => {
       <SearchInput
         value={searchQuery}
         onChange={setSearch}
-        updateUrl={false}
+        closeIcon={false}
+        contentRight={totalFinds > 0 && findCounts}
       />
-      {/* <span>{activeOverlay} / {totalOverlays}</span> */}
       <Icon
         material="keyboard_arrow_up"
         tooltip={_i18n._(t`Previous`)}
@@ -55,6 +60,11 @@ export const PodLogSearch = observer((props: PodLogSearchProps) => {
         onClick={onNextOverlay}
         disabled={jumpDisabled}
       />
+      <Icon
+        material="close"
+        tooltip={_i18n._(t`Clear`)}
+        onClick={() => setSearch("")}
+      />
     </div>
   );
 });

src/renderer/components/dock/search.store.ts

@@ -87,6 +87,14 @@ export class SearchStore {
     return this.occurrences[this.activeOverlayIndex];
   }
 
+  @computed get activeFind(): number {
+    return this.activeOverlayIndex + 1;
+  }
+
+  @computed get totalFinds(): number {
+    return this.occurrences.length;
+  }
+
   /**
    * Checks if overlay is active (to highlight it with orange background usually)
    * @param line Index of the line where overlay is located
@@ -110,6 +118,7 @@ export class SearchStore {
   reset() {
     this.searchQuery = "";
     this.activeOverlayIndex = -1;
+    this.occurrences = [];
   }
 }