From 57a81feec8d35d31c02ad213f22a9785248daf23 Mon Sep 17 00:00:00 2001
From: linoe97 <nicola.pace97@gmail.com>
Date: Thu, 16 Jun 2022 02:25:41 +0200
Subject: [PATCH] fixed tooltip behavior + minor

---
 frontend/src/components/AddNewRegex.tsx      |  4 +--
 frontend/src/components/Header/index.tsx     | 23 ++++++++++----
 frontend/src/components/RegexView/index.tsx  |  9 ++++--
 frontend/src/components/ServiceRow/index.tsx | 14 ++++++---
 frontend/src/pages/HomePage.tsx              | 10 ++++--
 frontend/src/pages/ServiceDetails.tsx        | 32 ++++++++++++++------
 6 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/AddNewRegex.tsx b/frontend/src/components/AddNewRegex.tsx
index 784582f..b91942b 100755
--- a/frontend/src/components/AddNewRegex.tsx
+++ b/frontend/src/components/AddNewRegex.tsx
@@ -89,8 +89,8 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
                 {...form.getInputProps('regex')}
             />
             <Space h="md" />
-            <Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-left" openDelay={1500} transitionDuration={250} transitionTimingFunction="ease"  
-                    color="gray" wrapLines width={220} withArrow position='right'>      
+            <Tooltip label="To represent binary data use URL encoding. Example: %01" transition="slide-right" openDelay={500} transitionDuration={500} transitionTimingFunction="ease"  
+                    color="gray" wrapLines width={220} withArrow position='right' gutter={20}>      
                 <Switch
                     label="Use percentage encoding for binary values"
                     {...form.getInputProps('percentage_encoding', { type: 'checkbox' })}
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index 90fd6d8..f34ef2f 100755
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -52,6 +52,8 @@ function Header() {
   const [loadingBtn, setLoadingBtn] = useState(false)
   const [error, setError] = useState<null|string>(null)
   const [changePasswordModal, setChangePasswordModal] = useState(false);
+  const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
+  const [tooltipHomeOpened, setTooltipHomeOpened] = useState(false);
 
   const submitRequest = async (values:ChangePassword) => {
     setLoadingBtn(true)
@@ -110,20 +112,29 @@ function Header() {
         </Menu>
         <div style={{marginLeft:"20px"}}></div>
         { location.pathname !== "/"?
-          <Tooltip zIndex={0} label="Home" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
+          <Tooltip zIndex={0} label="Home" position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal" opened={tooltipHomeOpened} tooltipId="tooltip-home-id">
             <ActionIcon color="teal" style={{marginRight:"10px"}}
               size="xl" radius="md" variant="filled"
-              onClick={()=>navigator("/")}>
+              onClick={()=>navigator("/")}
+              aria-describedby="tooltip-home-id"
+              onFocus={() => setTooltipHomeOpened(false)} onBlur={() => setTooltipHomeOpened(false)}
+              onMouseEnter={() => setTooltipHomeOpened(true)} onMouseLeave={() => setTooltipHomeOpened(false)}>
               <AiFillHome size="25px" />
             </ActionIcon>
           </Tooltip>
         :null}
         { srv_id?
-          <Tooltip label="Add a new regex" zIndex={0} position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
-            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+          <Tooltip label="Add a new regex" zIndex={0} position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened} tooltipId="tooltip-add-id">
+            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
+             aria-describedby="tooltip-add-id"
+             onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
+             onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
           </Tooltip>
-        : <Tooltip label="Add a new service" zIndex={0} position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
-            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+        : <Tooltip label="Add a new service" zIndex={0} position='bottom' transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddOpened} tooltipId="tooltip-add-id">
+            <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
+             aria-describedby="tooltip-add-id"
+             onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
+             onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
           </Tooltip>
       }
         
diff --git a/frontend/src/components/RegexView/index.tsx b/frontend/src/components/RegexView/index.tsx
index 000157a..5be2f2f 100755
--- a/frontend/src/components/RegexView/index.tsx
+++ b/frontend/src/components/RegexView/index.tsx
@@ -23,6 +23,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
   }
 
   const [deleteModal, setDeleteModal] = useState(false);
+  const [tooltipOpened, setTooltipOpened] = useState(false);
 
   const deleteRegex = () => {
     deleteregex(regexInfo.id).then(res => {
@@ -44,8 +45,12 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
             <Text className={style.regex_text}> {regex_expr}</Text>
           </Grid.Col>
           <Grid.Col span={2}>
-            <Tooltip label="Delete regex" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
-              <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
+            <Tooltip label="Delete regex" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={tooltipOpened} tooltipId="tooltip-id">
+              <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"
+               aria-describedby="tooltip-id"
+               onFocus={() => setTooltipOpened(false)} onBlur={() => setTooltipOpened(false)}
+               onMouseEnter={() => setTooltipOpened(true)} onMouseLeave={() => setTooltipOpened(false)}
+              ><BsTrashFill size={22} /></ActionIcon>
             </Tooltip>
             </Grid.Col>
           <Grid.Col span={2} />
diff --git a/frontend/src/components/ServiceRow/index.tsx b/frontend/src/components/ServiceRow/index.tsx
index 02c388c..e88e68c 100755
--- a/frontend/src/components/ServiceRow/index.tsx
+++ b/frontend/src/components/ServiceRow/index.tsx
@@ -20,6 +20,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
 
     const [stopModal, setStopModal] = useState(false);
     const [buttonLoading, setButtonLoading] = useState(false)
+    const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
 
     const stopService = async () => {
         setButtonLoading(true)
@@ -112,14 +113,17 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
                     {additional_buttons}
                     {["pause","wait"].includes(service.status)?
                         
-                        <Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="orange">
+                        <Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="orange" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
                             <ActionIcon color="yellow" loading={buttonLoading}
                             onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
-                            disabled={service.status === "stop"}>
+                            disabled={service.status === "stop"}
+                            aria-describedby="tooltip-stop-id"
+                            onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
+                            onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
                                 <FaStop size="20px" />
                             </ActionIcon>
                         </Tooltip>:
-                        <Tooltip label="Pause service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
+                        <Tooltip label="Pause service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red">
                             <ActionIcon color="red" loading={buttonLoading}
                                     onClick={pauseService} size="xl" radius="md" variant="filled"
                                     disabled={service.status === "stop"}>
@@ -129,7 +133,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
                     }
                     
                     <Space w="md"/>
-                    <Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
+                    <Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal">
                         <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
                                     variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
                             <FaPlay size="20px" />
@@ -149,7 +153,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
         </Grid>
         <YesNoModal
             title='Are you sure to stop this service?'
-            description={`You are going to delete the service '${service.id}', causing the firewall to stop. This will cause the shutdown of your service ⚠️!`}
+            description={`You are going to delete the service '${service.id}', causing the firewall to stop. This will cause the shutdown of your service! ⚠️`}
             onClose={()=>{setStopModal(false);}}
             action={stopService}
             opened={stopModal}
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index a893da6..f7950c5 100755
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -15,6 +15,7 @@ function HomePage() {
     const [loader, setLoader] = useState(true);
     const navigator = useNavigate()
     const [open, setOpen] = useState(false);
+    const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
     
     const updateInfo = async () => {
         await servicelist().then(res => {
@@ -35,10 +36,13 @@ function HomePage() {
         {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
             navigator("/"+srv.id)
         }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
-            <Space h="xl" /> <Space h="xl" /> 
+            <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
             <div className='center-flex'>
-                <Tooltip label="Add a new service" transition="pop" transitionDuration={200} openDelay={500} zIndex={0} transitionTimingFunction="ease" color="blue">
-                    <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+                <Tooltip label="Add a new service" transition="pop" transitionDuration={200} /*openDelay={500}*/ zIndex={0} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened} tooltipId="tooltip-addServ-id">
+                    <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
+                        aria-describedby="tooltip-addSrv-id"
+                        onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
+                        onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
                 </Tooltip>
             </div>
         </>}
diff --git a/frontend/src/pages/ServiceDetails.tsx b/frontend/src/pages/ServiceDetails.tsx
index bfcbb9d..23bef0a 100755
--- a/frontend/src/pages/ServiceDetails.tsx
+++ b/frontend/src/pages/ServiceDetails.tsx
@@ -56,6 +56,9 @@ function ServiceDetails() {
 
     const [deleteModal, setDeleteModal] = useState(false)
     const [changePortModal, setChangePortModal] = useState(false)
+    const [tooltipDeleteOpened, setTooltipDeleteOpened] = useState(false);
+    const [tooltipChangeOpened, setTooltipChangeOpened] = useState(false);
+    const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
     
     const deleteService = () => {
         deleteservice(serviceInfo.id).then(res => {
@@ -85,12 +88,20 @@ function ServiceDetails() {
     return <div>
         <LoadingOverlay visible={loader} />
         <ServiceRow service={serviceInfo} additional_buttons={<>
-            <Tooltip label="Delete service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">           
-                <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
+            <Tooltip label="Delete service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={tooltipDeleteOpened} tooltipId="tooltip-delete-id">           
+                <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"
+                 aria-describedby="tooltip-delete-id"
+                 onFocus={() => setTooltipDeleteOpened(false)} onBlur={() => setTooltipDeleteOpened(false)}
+                 onMouseEnter={() => setTooltipDeleteOpened(true)} onMouseLeave={() => setTooltipDeleteOpened(false)}
+                 ><BsTrashFill size={22} /></ActionIcon>
             </Tooltip>
             <Space w="md"/>
-            <Tooltip label="Change proxy port" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">           
-                <ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon>
+            <Tooltip label="Change proxy port" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipChangeOpened} tooltipId="tooltip-change-id">           
+                <ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"
+                aria-describedby="tooltip-change-id"
+                onFocus={() => setTooltipChangeOpened(false)} onBlur={() => setTooltipChangeOpened(false)}
+                onMouseEnter={() => setTooltipChangeOpened(true)} onMouseLeave={() => setTooltipChangeOpened(false)}
+                ><BsArrowRepeat size={28} /></ActionIcon>
             </Tooltip>
             <Space w="md"/>
         </>}></ServiceRow>
@@ -98,10 +109,13 @@ function ServiceDetails() {
         {regexesList.length === 0?<>
                 <Space h="xl" />
                 <Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
-                <Space h="xl" /> <Space h="xl" />
+                <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
                 <div className='center-flex'>
-                    <Tooltip label="Add a new regex" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
-                        <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
+                    <Tooltip label="Add a new regex" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="blue" opened={tooltipAddRegexOpened} tooltipId="tooltip-AddRegex-id">
+                        <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
+                         aria-describedby="tooltip-AddRegex-id"
+                         onFocus={() => setTooltipAddRegexOpened(false)} onBlur={() => setTooltipAddRegexOpened(false)}
+                         onMouseEnter={() => setTooltipAddRegexOpened(true)} onMouseLeave={() => setTooltipAddRegexOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
                     </Tooltip>
                 </div>
             </>:
@@ -114,14 +128,14 @@ function ServiceDetails() {
 
         <YesNoModal
             title='Are you sure to delete this service?'
-            description={`You are going to delete the service '${serviceInfo.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service ⚠️!`}
+            description={`You are going to delete the service '${serviceInfo.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
             onClose={()=>setDeleteModal(false) }
             action={deleteService}
             opened={deleteModal}
         />
         <YesNoModal
             title='Are you sure to change the proxy internal port?'
-            description={`You are going to change the proxy port '${serviceInfo.internal_port}'. This will cause the shutdown of your service temporarily ⚠️!`}
+            description={`You are going to change the proxy port '${serviceInfo.internal_port}'. This will cause the shutdown of your service temporarily! ⚠️`}
             onClose={()=>setChangePortModal(false)}
             action={changePort}
             opened={changePortModal}