From 7dc6fadd2bee3207d939a1691237a86c57bc7a98 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Fri, 28 May 2021 18:01:13 +0530
Subject: [PATCH] Tooltips for homepage actions

---
 frontend/src/HomePage/HomePage.jsx | 28 +++++++++++++++++++++-------
 frontend/src/_helpers/appUtils.js  |  8 ++++++++
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index e6c623541a..50bceb2f20 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -5,6 +5,8 @@ import { Pagination, Header } from '@/_components';
 import { Folders } from './Folders';
 import { AppMenu } from './AppMenu';
 import { BlankPage } from './BlankPage';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import { renderTooltip } from '@/_helpers/appUtils';
 
 class HomePage extends React.Component {
   constructor(props) {
@@ -81,6 +83,7 @@ class HomePage extends React.Component {
     } = this.state;
     return (
       <div className="wrapper home-page">
+
         <Header
 
         />
@@ -155,18 +158,29 @@ class HomePage extends React.Component {
                                 <small className="pt-2">created {app.created_at} ago by {app.user.first_name} {app.user.last_name} </small>
                               </td>
                               <td class="text-muted col-auto pt-4">
+                                <Link
+                                  to={`/apps/${app.id}`}
+                                >
+                                  <OverlayTrigger
+                                    placement="top"
+                                    overlay={(props) => renderTooltip({props, text: 'Open in app builder'})}
+                                  >
+                                    <span class="badge bg-green-lt">
+                                    Edit
+                                    </span>
+                                  </OverlayTrigger>
+                                </Link>
                                 <Link
                                   to={`/applications/${app.id}`}
                                   target="_blank"
                                 >
-                                  <span class="badge bg-blue-lt mx-2">launch</span>
-                                </Link>
-                            
-                                <Link
-                                  to={`/apps/${app.id}`}
-                                >
-                                  <span class="badge bg-green-lt">Edit</span>
+                                  <OverlayTrigger
+                                    placement="top"
+                                    overlay={(props) => renderTooltip({props, text: 'Open in app viewer'})}
+                                  >
+                                    <span class="badge bg-blue-lt mx-2">launch</span>
 
+                                  </OverlayTrigger>
                                 </Link>
 
                                 <AppMenu 
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 94f1d5a745..0bb88f81a6 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -1,8 +1,10 @@
+import React from 'react';
 import { toast } from 'react-toastify';
 import { getDynamicVariables, resolveReferences } from '@/_helpers/utils';
 import { dataqueryService } from '@/_services';
 import _ from 'lodash';
 import moment from 'moment';
+import Tooltip from 'react-bootstrap/Tooltip';
 
 function setStateAsync(_ref, state) {
   return new Promise((resolve) => {
@@ -340,3 +342,9 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined) {
     });
   });
 }
+
+export function renderTooltip({props, text}) {
+  return <Tooltip id="button-tooltip" {...props}>
+    {text}
+  </Tooltip>
+};