From 153570f145bdd885ae1e1725627bd2259f2c2914 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 28 Oct 2022 00:21:49 +0100
Subject: [PATCH] add custom tooltip to search

---
 .../search/src/lib/components/Find.tsx        | 103 +++++++++++-------
 .../src/lib/components/FindContainer.tsx      |  31 ++++--
 .../lib/components/results/ResultFileName.tsx |  17 ++-
 .../lib/components/results/ResultSummary.tsx  |  14 ++-
 4 files changed, 103 insertions(+), 62 deletions(-)

diff --git a/libs/remix-ui/search/src/lib/components/Find.tsx b/libs/remix-ui/search/src/lib/components/Find.tsx
index 284a2d07ba..529cb7667d 100644
--- a/libs/remix-ui/search/src/lib/components/Find.tsx
+++ b/libs/remix-ui/search/src/lib/components/Find.tsx
@@ -1,3 +1,4 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import { SearchContext } from '../context/context'
 
@@ -42,48 +43,66 @@ export const Find = () => {
             onKeyUp={handleKeypress}
           ></input>
           <div className="search_plugin_controls">
-            <div
-              data-id="search_case_sensitive"
-              title="Match Case"
-              className={`monaco-custom-checkbox codicon codicon-case-sensitive ${
-                state.casesensitive ? 'checked' : ''
-              }`}
-              role="checkbox"
-              aria-checked="false"
-              aria-label="Match Case"
-              aria-disabled="false"
-              onClick={() => {
-                toggleCaseSensitive()
-              }}
-            ></div>
-            <div
-              data-id="search_whole_word"
-              title="Match Whole Word"
-              className={`monaco-custom-checkbox codicon codicon-whole-word ${
-                state.matchWord ? 'checked' : ''
-              }`}
-              role="checkbox"
-              aria-checked="false"
-              aria-label="Match Whole Word"
-              aria-disabled="false"
-              onClick={() => {
-                toggleMatchWholeWord()
-              }}
-            ></div>
-            <div
-              data-id="search_use_regex"
-              title="Use Regular Expression"
-              className={`monaco-custom-checkbox codicon codicon-regex ${
-                state.useRegExp ? 'checked' : ''
-              }`}
-              role="checkbox"
-              aria-checked="false"
-              aria-label="Use Regular Expression"
-              aria-disabled="false"
-              onClick={() => {
-                toggleUseRegex()
-              }}
-            ></div>
+            <CustomTooltip
+              tooltipText="Match Case"
+              tooltipClasses="text-nowrap"
+              tooltipId="searchCaseSensitiveTooltip"
+              placement="top-start"
+            >
+              <div
+                data-id="search_case_sensitive"
+                className={`monaco-custom-checkbox codicon codicon-case-sensitive ${
+                  state.casesensitive ? 'checked' : ''
+                }`}
+                role="checkbox"
+                aria-checked="false"
+                aria-label="Match Case"
+                aria-disabled="false"
+                onClick={() => {
+                  toggleCaseSensitive()
+                }}
+              ></div>
+            </CustomTooltip>
+            <CustomTooltip
+              tooltipText="Match Whole Word"
+              tooltipClasses="text-nowrap"
+              tooltipId="searchWholeWordTooltip"
+              placement="top-start"
+            >
+              <div
+                data-id="search_whole_word"
+                className={`monaco-custom-checkbox codicon codicon-whole-word ${
+                  state.matchWord ? 'checked' : ''
+                }`}
+                role="checkbox"
+                aria-checked="false"
+                aria-label="Match Whole Word"
+                aria-disabled="false"
+                onClick={() => {
+                  toggleMatchWholeWord()
+                }}
+              ></div>
+            </CustomTooltip>
+            <CustomTooltip
+              tooltipText="Use Regular Expression"
+              tooltipClasses="text-nowrap"
+              tooltipId="useRegularExpressionTooltip"
+              placement="bottom-start"
+            >
+              <div
+                data-id="search_use_regex"
+                className={`monaco-custom-checkbox codicon codicon-regex ${
+                  state.useRegExp ? 'checked' : ''
+                }`}
+                role="checkbox"
+                aria-checked="false"
+                aria-label="Use Regular Expression"
+                aria-disabled="false"
+                onClick={() => {
+                  toggleUseRegex()
+                }}
+              ></div>
+            </CustomTooltip>
           </div>
         </div>
       </div>
diff --git a/libs/remix-ui/search/src/lib/components/FindContainer.tsx b/libs/remix-ui/search/src/lib/components/FindContainer.tsx
index 7bd5d5ba1c..ed52d893fd 100644
--- a/libs/remix-ui/search/src/lib/components/FindContainer.tsx
+++ b/libs/remix-ui/search/src/lib/components/FindContainer.tsx
@@ -1,3 +1,4 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useContext, useEffect, useState } from 'react'
 import { SearchContext } from '../context/context'
 import { Find } from './Find'
@@ -13,18 +14,24 @@ export const FindContainer = props => {
   }, [expanded])
   return (
     <div className="search_plugin_find_container">
-      <div
-        title="Toggle Replace"
-        data-id="toggle_replace"
-        className={`codicon codicon-find-${
-          expanded ? 'expanded' : 'collapsed'
-        } search_plugin_find_container_arrow`}
-        role="button"
-        onClick={toggleExpand}
-        aria-label="Toggle Replace"
-        aria-expanded="true"
-        aria-disabled="false"
-      ></div>
+      <CustomTooltip
+        tooltipText="Toggle Replace"
+        tooltipClasses="text-nowrap"
+        tooltipId="toggleReplaceTooltip"
+        placement="left-start"
+      >
+        <div
+          data-id="toggle_replace"
+          className={`codicon codicon-find-${
+            expanded ? 'expanded' : 'collapsed'
+          } search_plugin_find_container_arrow`}
+          role="button"
+          onClick={toggleExpand}
+          aria-label="Toggle Replace"
+          aria-expanded="true"
+          aria-disabled="false"
+        ></div>
+      </CustomTooltip>
       <div className="search_plugin_find_container_internal">
         <Find></Find>
         {expanded ? 
diff --git a/libs/remix-ui/search/src/lib/components/results/ResultFileName.tsx b/libs/remix-ui/search/src/lib/components/results/ResultFileName.tsx
index 303e8da21e..333c608a9b 100644
--- a/libs/remix-ui/search/src/lib/components/results/ResultFileName.tsx
+++ b/libs/remix-ui/search/src/lib/components/results/ResultFileName.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { SearchResult } from '../../types'
-import { getPathIcon } from '@remix-ui/helper'
+import { CustomTooltip, getPathIcon } from '@remix-ui/helper'
 import * as path from 'path'
 interface ResultItemProps {
   file: SearchResult
@@ -18,10 +18,17 @@ export const ResultFileName = (props: ResultItemProps) => {
   return (
     <>
       {icon ? <div className={`${icon} caret caret_tv`}></div> : null}
-      <div title={props.file.filename} className="search_plugin_search_file_name ml-2">
-        {path.basename(props.file.path)}
-        <span className='pl-1 text-muted text-lowercase'>{path.dirname(props.file.path)}</span>
-      </div>
+      <CustomTooltip
+        tooltipText={props.file.filename}
+        tooltipClasses="text-nowrap"
+        tooltipId="resultFileNameTooltip"
+        placement="top-start"
+      >
+        <div title={props.file.filename} className="search_plugin_search_file_name ml-2">
+          {path.basename(props.file.path)}
+          <span className='pl-1 text-muted text-lowercase'>{path.dirname(props.file.path)}</span>
+        </div>
+      </CustomTooltip>
     </>
   )
 }
diff --git a/libs/remix-ui/search/src/lib/components/results/ResultSummary.tsx b/libs/remix-ui/search/src/lib/components/results/ResultSummary.tsx
index 0d4a640a04..ad6141ecbc 100644
--- a/libs/remix-ui/search/src/lib/components/results/ResultSummary.tsx
+++ b/libs/remix-ui/search/src/lib/components/results/ResultSummary.tsx
@@ -1,5 +1,6 @@
 
 import { useDialogDispatchers } from '@remix-ui/app'
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useContext } from 'react'
 import { SearchContext } from '../../context/context'
 import { SearchResult, SearchResultLine, SearchResultLineLine } from '../../types'
@@ -53,9 +54,16 @@ export const ResultSummary = (props: ResultSummaryProps) => {
         </div>
         {state.replaceEnabled?
         <div className='search_plugin_search_control'>
-        <div title="Replace" data-id={`replace-${props.searchResult.filename}-${lineItem.position.start.line}-${lineItem.position.start.column}`} onClick={async () => {
-            replace(lineItem)
-          }} className="codicon codicon-find-replace" role="button" aria-label="Replace" aria-disabled="false"></div>
+        <CustomTooltip
+          tooltipText="Replace"
+          tooltipClasses="text-nowrap"
+          tooltipId="replaceTooltip"
+          placement="top-start"
+        >
+          <div data-id={`replace-${props.searchResult.filename}-${lineItem.position.start.line}-${lineItem.position.start.column}`} onClick={async () => {
+              replace(lineItem)
+            }} className="codicon codicon-find-replace" role="button" aria-label="Replace" aria-disabled="false"></div>
+        </CustomTooltip>
         </div>:null}
         </div>
       ))}