Merge pull request #3005 from ethereum/custom-tooltips-ssa

Custom tooltips for Static Analysis

libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx

@@ -1,5 +1,8 @@
 import React, { CSSProperties } from 'react'  //eslint-disable-line
+import { OverlayProps, OverlayTrigger, OverlayTriggerProps, Tooltip } from 'react-bootstrap'// eslint-disable-line
 import './remix-ui-checkbox.css'
+type Placement = import('react-overlays/usePopper').Placement;
+
 
 /* eslint-disable-next-line */
 export interface RemixUiCheckboxProps {
@@ -15,6 +18,7 @@ export interface RemixUiCheckboxProps {
   title?: string
   visibility?: string
   display?: string
+  tooltipPlacement?: Placement
 }
 
 export const RemixUiCheckbox = ({
@@ -29,24 +33,34 @@ export const RemixUiCheckbox = ({
   categoryId,
   title,
   visibility,
-  display = 'flex'
+  display = 'flex',
+  tooltipPlacement = 'right-start'
 }: RemixUiCheckboxProps) => {
   return (
-    <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" title={title} style={{ display: display, alignItems: 'center', visibility: visibility } as CSSProperties } onClick={onClick}>
-      <input
-        id={id}
-        type={inputType}
-        onChange={onChange}
-        style={{ verticalAlign: 'bottom' }}
-        name={name}
-        className="custom-control-input"
-        checked={checked}
-      />
-      <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
-        {name ? <div className="font-weight-bold">{itemName}</div> : ''}
-        {label}
-      </label>
-    </div>
+    <OverlayTrigger
+      placement={tooltipPlacement}
+      overlay={
+        <Tooltip id={`${name}Tooltip`}>
+          <span>{title}</span>
+        </Tooltip>
+      }
+    >
+      <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: display, alignItems: 'center', visibility: visibility } as CSSProperties } onClick={onClick}>
+        <input
+          id={id}
+          type={inputType}
+          onChange={onChange}
+          style={{ verticalAlign: 'bottom' }}
+          name={name}
+          className="custom-control-input"
+          checked={checked}
+        />
+        <label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
+          {name ? <div className="font-weight-bold">{itemName}</div> : ''}
+          {label}
+        </label>
+      </div>
+    </OverlayTrigger>
   )
 }
 

libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react'  //eslint-disable-line
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 interface StaticAnalyserButtonProps {
   onClick: (event) => void
@@ -14,10 +15,21 @@ const StaticAnalyserButton = ({
   title
 }: StaticAnalyserButtonProps) => {
   let classList = "btn btn-sm w-25 btn-primary"
-  classList += disabled ? " disabled" : "" 
+  classList += disabled ? " disabled" : ""
   return (
-    <button className={classList} disabled={disabled} title={title} onClick={onClick}>
-      {buttonText}
+    <button className={classList} disabled={disabled} onClick={onClick}>
+      <OverlayTrigger
+        placement="bottom-start"
+        overlay={
+          <Tooltip id="ssaRunButtonTooltip" className="text-nowrap">
+            <span>{title}</span>
+          </Tooltip>
+        }
+      >
+        <span>
+          {buttonText}
+        </span>
+      </OverlayTrigger>
     </button>
   )
 }

libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx

@@ -255,7 +255,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
             if(fileName !== currentFile) {
               const {file, provider} = await props.analysisModule.call('fileManager', 'getPathFromUrl', fileName)
               if (file.startsWith('.deps') || (provider.type === 'localhost' && file.startsWith('localhost/node_modules'))) isLibrary = true
-            } 
+            }
             const msg = message(result.name, item.warning, item.more, fileName, locationString)
             const options = {
               type: 'warning',
@@ -321,7 +321,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
                 if(fileName !== currentFile) {
                   const {file, provider} = await props.analysisModule.call('fileManager', 'getPathFromUrl', fileName)
                   if (file.startsWith('.deps') || (provider.type === 'localhost' && file.startsWith('localhost/node_modules'))) isLibrary = true
-                } 
+                }
                 const msg = message(item.title, item.description, item.more, fileName, locationString)
                 const options = {
                   type: 'warning',
@@ -490,6 +490,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
             label="Select all"
             onClick={() => handleCheckAllModules(groupedModules)}
             onChange={() => {}}
+            tooltipPlacement={'top-start'}
           />
           <RemixUiCheckbox
             id="autorunstaticanalysis"
@@ -499,6 +500,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
             checked={autoRun}
             label="Autorun"
             onChange={() => {}}
+            tooltipPlacement={'bottom-start'}
           />
           <Button
             buttonText="Run"