[#1049] approver tree info icon added and title changed

frontend/src/lib/__test__/__snapshots__/ui-text.test.js.snap

@@ -44,18 +44,7 @@ Object {
     "approvalsTab3": "Approved",
     "approvalsTitle": "Approvals",
     "approversDescription": <React.Fragment>
-      This is where you manage data validation for each Questionnaire. You can:
-      <ul>
-        <li>
-          Add data validator
-        </li>
-        <li>
-          Modify data validator
-        </li>
-        <li>
-          Delete data validator
-        </li>
-      </ul>
+      This is where you can see the approvers for each submitted form across different administrative areas:
     </React.Fragment>,
     "attrConfirmDelete": "Are you sure you want to delete this attribute?",
     "attrErrDeleteTitle": "Unable to delete the attribute",
@@ -330,7 +319,7 @@ Object {
       </ul>
     </React.Fragment>,
     "manageDataTitle": "Manage Data",
-    "manageDataValidationSetup": "Manage Data Validation Setup",
+    "manageDataValidationSetup": "Validation Tree",
     "manageEntities": "Manage Entities",
     "manageEntitiesText": <React.Fragment>
       This is where you manage entitys based on their fields. You can :

frontend/src/lib/ui-text.js

@@ -147,7 +147,7 @@ const uiText = {
     // Charts
     showEmpty: "Show empty values",
     // User Management
-    manageDataValidationSetup: "Manage Data Validation Setup",
+    manageDataValidationSetup: "Validation Tree",
     manageUsers: "Manage Users",
     addUser: "Add User",
     addNewUser: "Add new user",
@@ -309,13 +309,8 @@ const uiText = {
     questionnaireText: "Questionnaire",
     approversDescription: (
       <Fragment>
-        This is where you manage data validation for each Questionnaire. You
-        can:
-        <ul>
-          <li>Add data validator</li>
-          <li>Modify data validator</li>
-          <li>Delete data validator</li>
-        </ul>
+        This is where you can see the approvers for each submitted form across
+        different administrative areas:
       </Fragment>
     ),
     // Misc

frontend/src/pages/approvers-tree/ApproversTree.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useMemo } from "react";
 import "./style.scss";
-import { Row, Col, Divider, Space } from "antd";
+import { Row, Col, Divider, Space, Popover } from "antd";
 import { Breadcrumbs, DescriptionPanel } from "../../components";
 import { api, store, uiText } from "../../lib";
 import ApproverFilters from "../../components/filters/ApproverFilters";
 import { SteppedLineTo } from "react-lineto";
 import { take, takeRight } from "lodash";
 import { useNotification } from "../../util/hooks";
+import { InfoCircleOutlined } from "@ant-design/icons";
 
 const ApproversTree = () => {
   const {
@@ -218,6 +219,13 @@ const ApproversTree = () => {
                         }
                       }}
                     >
+                      {approver && (
+                        <div className="info-icon">
+                          <Popover title={`Email: ${approver?.email}`}>
+                            <InfoCircleOutlined />
+                          </Popover>
+                        </div>
+                      )}
                       <Space direction="vertical">
                         <div>{childItem.name}</div>
                         <h3 className={approver ? "" : "not-assigned"}>

frontend/src/pages/approvers-tree/style.scss

@@ -140,6 +140,10 @@
               h3 {
                 color: #fff;
               }
+              .info-icon {
+                position: absolute;
+                right: 10px;
+              }
             }
           }
         }