apply custom tooltip to solidity unit testing

libs/remix-ui/solidity-unit-testing/src/lib/solidity-unit-testing.tsx

@@ -2,12 +2,12 @@ import React, { useState, useRef, useEffect, ReactElement } from 'react' // esli
 import * as semver from 'semver'
 import { eachOfSeries } from 'async' // eslint-disable-line
 import type Web3 from 'web3'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { canUseWorker, urlFromVersion } from '@remix-project/remix-solidity'
 import { Renderer } from '@remix-ui/renderer' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 import { format } from 'util'
 import './css/style.css'
+import { CustomTooltip } from '@remix-ui/helper'
 
 const _paq = (window as any)._paq = (window as any)._paq || [] // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -297,26 +297,21 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
     let label
     if (index > -1) {
       const className = "alert-danger d-inline-block mb-1 mr-1 p-1 failed_" + runningTestFileName
-      label = (<OverlayTrigger placement={'right'} overlay={
+      label = (<CustomTooltip
-              <Tooltip className="text-nowrap" id="info-recorder">
+                placement={'right'}
-                <span>At least one contract test failed</span>
+                tooltipClasses="text-nowrap"
-              </Tooltip>
+                tooltipId="info-recorder"
-            }><div
+                tooltipText="At least one contract test failed"
-      className={className}
+              >
-    >
+                <div className={className}>FAIL</div>
-      FAIL
+              </CustomTooltip>)
-    </div></OverlayTrigger>)
     } else {
       const className = "alert-success d-inline-block mb-1 mr-1 p-1 passed_" + runningTestFileName
-      label = (<OverlayTrigger placement={'top-end'} overlay={
+      label = (<CustomTooltip placement={'top-end'} tooltipClasses="text-nowrap" tooltipId="info-recorder"
-              <Tooltip className="text-nowrap" id="info-recorder">
+                tooltipText="All contract tests passed"
-                <span>All contract tests passed</span>
+              >
-              </Tooltip>
+                <div className={className}>PASS</div>
-            }><div
+              </CustomTooltip>)
-      className={className}
-    >
-      PASS
-    </div></OverlayTrigger>)
     }
     // show contract and file name with label
     const ContractCard: ReactElement = (
@@ -343,11 +338,14 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
           const { web3, debugTxHash } = test
           debugBtn = (
             <div id={test.value.replaceAll(' ', '_')} className="btn border btn btn-sm ml-1" style={{ cursor: 'pointer' }} onClick={() => startDebug(debugTxHash, web3)}>
-              <OverlayTrigger placement={'top-start'} overlay={
+              <CustomTooltip
-              <Tooltip className="text-nowrap" id="info-recorder">
+                placement={'top-start'}
-                <span>Start debugging</span>
+                tooltipClasses="text-nowrap"
-              </Tooltip>
+                tooltipId="info-recorder"
-            }><i className="fas fa-bug"></i></OverlayTrigger>
+                tooltipText="Start debugging"
+              >
+                <i className="fas fa-bug"></i>
+              </CustomTooltip>
             </div>
           )
         }
@@ -674,13 +672,11 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
               })
             }
             </datalist>
-            <OverlayTrigger
+            <CustomTooltip
               placement="top-end"
-              overlay={
+              tooltipClasses="text-nowrap"
-                <Tooltip className="text-nowrap" id="uiPathInputtooltip">
+              tooltipId="uiPathInputtooltip"
-                  <span>{"Press 'Enter' to change the path for test files."}</span>
+              tooltipText={"Press 'Enter' to change the path for test files."}
-                </Tooltip>
-              }
             >
               <input
                 list="utPathList"
@@ -694,14 +690,12 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
                 onChange={handleTestDirInput}
                 onClick = {() => { if (inputPathValue === '/') setInputPathValue('')} }
               />
-            </OverlayTrigger>
+            </CustomTooltip>
-            <OverlayTrigger
+            <CustomTooltip
               placement="top-end"
-              overlay={
+              tooltipClasses="text-nowrap"
-                <Tooltip className="text-nowrap" id="uiPathInputButtontooltip">
+              tooltipId="uiPathInputButtontooltip"
-                  <span>Create a test folder</span>
+              tooltipText="Create a test folder"
-                </Tooltip>
-              }
             >
               <button
                 className="btn border ml-2"
@@ -711,17 +705,18 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
               >
                 Create
               </button>
-            </OverlayTrigger>
+            </CustomTooltip>
           </div>
         </div>
       </div>
       <div>
         <div className="d-flex p-2">
-          <OverlayTrigger overlay={
+          <CustomTooltip
-            <Tooltip id="generateTestsButtontooltip" className="text-nowrap">
+            tooltipId="generateTestsButtontooltip"
-              <span>Generate a sample test file</span>
+            tooltipClasses="text-nowrap"
-            </Tooltip>
+            tooltipText="Generate a sample test file"
-          } placement={'bottom-start'}>
+            placement={'bottom-start'}
+          >
             <button
               className="btn border w-50"
               data-id="testTabGenerateTestFile"
@@ -733,43 +728,42 @@ export const SolidityUnitTesting = (props: Record<string, any>) => { // eslint-d
             >
               Generate
             </button>
-          </OverlayTrigger>
+          </CustomTooltip>
-          <OverlayTrigger overlay={
+          <CustomTooltip
-            <Tooltip id="generateTestsLinktooltip" className="text-nowrap">
+            tooltipId="generateTestsLinktooltip"
-              <span>Check out documentation.</span>
+            tooltipClasses="text-nowrap"
-            </Tooltip>
+            tooltipText="Check out documentation."
-          } placement={'bottom-start'}>
+            placement={'bottom-start'}
-          <a className="btn border text-decoration-none pr-0 d-flex w-50 ml-2" target="__blank" href="https://remix-ide.readthedocs.io/en/latest/unittesting.html#test-directory">
+          >
+            <a className="btn border text-decoration-none pr-0 d-flex w-50 ml-2" target="__blank" href="https://remix-ide.readthedocs.io/ en/latest/unittesting.html#test-directory">
             <label className="btn p-1 ml-2 m-0">How to use...</label>
-          </a>
+            </a>
-        </OverlayTrigger>
+        </CustomTooltip>
         </div>
         <div className="d-flex p-2">
-          <OverlayTrigger placement={'top-start'} overlay={
+          <CustomTooltip
-              <Tooltip className="text-nowrap" id="info-recorder">
+            placement={'top-start'}
-                <span>
+              tooltipClasses="text-nowrap"
-                  {runButtonTitle}
+              tooltipId="info-recorder"
-                </span>
+              tooltipText={runButtonTitle}
-              </Tooltip>
+              >
-            }>
             <button id="runTestsTabRunAction"data-id="testTabRunTestsTabRunAction" className="w-50 btn btn-primary" disabled={disableRunButton} onClick={runTests}>
               <span className="fas fa-play ml-2"></span>
               <label className="labelOnBtn btn btn-primary p-1 ml-2 m-0">Run</label>
             </button>
-          </OverlayTrigger>
+          </CustomTooltip>
           <button id="runTestsTabStopAction" data-id="testTabRunTestsTabStopAction" className="w-50 pl-2 ml-2 btn btn-secondary" disabled={disableStopButton} onClick={stopTests}>
-            <OverlayTrigger placement={'top-start'} overlay={
+            <CustomTooltip
-                <Tooltip className="text-nowrap" id="info-recorder">
+              placement={'top-start'}
-                  <span>
+              tooltipClasses="text-nowrap"
-                    Stop running tests
+              tooltipId="info-recorder"
-                  </span>
+              tooltipText="Stop running tests"
-                </Tooltip>
+            >
-              }>
               <span>
                 <span className="fas fa-stop ml-2"></span>
                 <label className="labelOnBtn btn btn-secondary p-1 ml-2 m-0" id="runTestsTabStopActionLabel">{stopButtonLabel}</label>
               </span>
-            </OverlayTrigger>
+            </CustomTooltip>
           </button>
         </div>
         <div className="d-flex align-items-center mx-3 pb-2 mt-2 border-bottom">