From 29a066fcc1929d40bad55b3cb2005a2a2f4a1601 Mon Sep 17 00:00:00 2001
From: Brijesh <brijesh.amin@gov.bc.ca>
Date: Thu, 13 Jun 2024 10:24:54 -0700
Subject: [PATCH] Add tooltips for filter check boxes

---
 .../selectRangeUsePlanPage/index.js           | 164 ++++++++++--------
 src/constants/strings.js                      |  14 +-
 2 files changed, 100 insertions(+), 78 deletions(-)

diff --git a/src/components/selectRangeUsePlanPage/index.js b/src/components/selectRangeUsePlanPage/index.js
index 32ff6e87..0bc462c3 100644
--- a/src/components/selectRangeUsePlanPage/index.js
+++ b/src/components/selectRangeUsePlanPage/index.js
@@ -1,36 +1,40 @@
-import React, { useState, useEffect } from 'react';
+import { Checkbox, FormControlLabel, Tooltip } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import React, { useEffect, useState } from 'react';
 import useSWR from 'swr';
+import {
+  BooleanParam,
+  StringParam,
+  decodeObject,
+  encodeObject,
+  useQueryParam,
+} from 'use-query-params';
 import * as API from '../../constants/api';
+import {
+  SELECT_RUP_BANNER_CONTENT,
+  SELECT_RUP_BANNER_HEADER,
+  TOOLTIP_TEXT_ACTIVE_RUP,
+  TOOLTIP_TEXT_ARCHIVED_PLANS,
+  TOOLTIP_TEXT_RANGE_AGREEMENT,
+  TOOLTIP_TEXT_RUP_CREATED,
+} from '../../constants/strings';
+import { useReferences } from '../../providers/ReferencesProvider';
+import { useToast } from '../../providers/ToastProvider';
+import { useUser } from '../../providers/UserProvider';
 import {
   axios,
   getAuthHeaderConfig,
-  isUserAgrologist,
-  isUserAdmin,
   getDataFromLocalStorage,
+  isUserAdmin,
+  isUserAgrologist,
   saveDataInLocalStorage,
 } from '../../utils';
 import useDebounce from '../../utils/hooks/useDebounce';
+import { Banner } from '../common';
 import Error from './Error';
-import { makeStyles } from '@material-ui/core/styles';
 import ZoneSelect, { ZoneSelectAll } from './ZoneSelect';
-import { Banner } from '../common';
-import {
-  SELECT_RUP_BANNER_HEADER,
-  SELECT_RUP_BANNER_CONTENT,
-} from '../../constants/strings';
-import { useToast } from '../../providers/ToastProvider';
-import {
-  useQueryParam,
-  StringParam,
-  encodeObject,
-  decodeObject,
-  BooleanParam,
-} from 'use-query-params';
-import { useReferences } from '../../providers/ReferencesProvider';
-import { useUser } from '../../providers/UserProvider';
 
 import SortableAgreementTable from './SortableAgreementTable';
-import { Checkbox, FormControlLabel } from '@material-ui/core';
 
 const keyValueSeparator = '-'; // default is "-"
 const entrySeparator = '~'; // default is "_"
@@ -204,62 +208,70 @@ const SelectRangeUsePlanPage = ({ match, history }) => {
       />
       <div className={classes.searchFilterContainer}>
         <div className={classes.checkboxBorder}>
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={planCheck}
-                onChange={() => {
-                  setPlanCheck(!planCheck);
-                  setSaveFilterInfo('planCheck', !planCheck);
-                }}
-                name="planCheck"
-                color="primary"
-              />
-            }
-            label="RUP Created"
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={agreementCheck}
-                onChange={() => {
-                  setAgreementCheck(!agreementCheck);
-                  setSaveFilterInfo('agreementCheck', !agreementCheck);
-                }}
-                name="agreementCheck"
-                color="primary"
-              />
-            }
-            label="Range Agreement"
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={activeCheck}
-                onChange={() => {
-                  setActiveCheck(!activeCheck);
-                  setSaveFilterInfo('activeCheck', !activeCheck);
-                }}
-                name="activeCheck"
-                color="primary"
-              />
-            }
-            label="Active RUP"
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={showReplacedPlans}
-                onChange={() => {
-                  setShowReplacedPlans(!showReplacedPlans);
-                  setSaveFilterInfo('showReplacedPlans', !showReplacedPlans);
-                }}
-                name="shwoReplacedPlans"
-                color="primary"
-              />
-            }
-            label="Replaced Plans"
-          />
+          <Tooltip title={TOOLTIP_TEXT_RUP_CREATED}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={planCheck}
+                  onChange={() => {
+                    setPlanCheck(!planCheck);
+                    setSaveFilterInfo('planCheck', !planCheck);
+                  }}
+                  name="planCheck"
+                  color="primary"
+                />
+              }
+              label="RUP Created"
+            />
+          </Tooltip>
+          <Tooltip title={TOOLTIP_TEXT_RANGE_AGREEMENT}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={agreementCheck}
+                  onChange={() => {
+                    setAgreementCheck(!agreementCheck);
+                    setSaveFilterInfo('agreementCheck', !agreementCheck);
+                  }}
+                  name="agreementCheck"
+                  color="primary"
+                />
+              }
+              label="Range Agreement"
+            />
+          </Tooltip>
+          <Tooltip title={TOOLTIP_TEXT_ACTIVE_RUP}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={activeCheck}
+                  onChange={() => {
+                    setActiveCheck(!activeCheck);
+                    setSaveFilterInfo('activeCheck', !activeCheck);
+                  }}
+                  name="activeCheck"
+                  color="primary"
+                />
+              }
+              label="Active RUP"
+            />
+          </Tooltip>
+          <Tooltip title={TOOLTIP_TEXT_ARCHIVED_PLANS}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={showReplacedPlans}
+                  onChange={() => {
+                    setShowReplacedPlans(!showReplacedPlans);
+                    setSaveFilterInfo('showReplacedPlans', !showReplacedPlans);
+                  }}
+                  name="shwoReplacedPlans"
+                  color="primary"
+                />
+              }
+              label="Replaced Plans"
+            />
+          </Tooltip>
         </div>
         {isUserAgrologist(user) && (
           <ZoneSelect
diff --git a/src/constants/strings.js b/src/constants/strings.js
index ede65c33..e8f5c7b9 100644
--- a/src/constants/strings.js
+++ b/src/constants/strings.js
@@ -119,6 +119,16 @@ export const DAYS = 'Days';
 export const PLD = 'PLD';
 export const CROWN_AUMS = 'Crown AUMs';
 
+//TOOLTIPS
+export const TOOLTIP_TEXT_RUP_CREATED =
+  'Check box to only view Range Agreements that have had a Range Use Plan started';
+export const TOOLTIP_TEXT_RANGE_AGREEMENT =
+  'Check box to only view only ACTIVE Range Act Agreements';
+export const TOOLTIP_TEXT_ACTIVE_RUP =
+  'Check box to view Range Use Plans that have been APPROVED, includes RUPs that are being amended.  Does not include draft plans';
+export const TOOLTIP_TEXT_ARCHIVED_PLANS =
+  'Check box to be able to see ARCHIVED plans that have been replaced with a new plan';
+
 // RUP minister issues
 export const CONTACT_NO_EXIST = "Contact doesn't exist";
 export const ACTION_NOTE =
@@ -277,9 +287,9 @@ export const MERGE_ACCOUNT_BANNER_CONTENT_LINE1 =
   'If an agreement holder has logged in to MyRange with multiple BCEIDS, it is advisable to merge these accounts into their most current BCEID user account.  This will make sure they see all the correct agreements on sign in, and all signatures will be marked as their own.';
 export const MERGE_ACCOUNT_BANNER_CONTENT_LINE2 =
   'Note that you can filter using the table below by hitting the 3 dots in each column, you may also select multiple FROM accounts in step 1, and one TO account in step 2.';
-  export const ASSIGN_ROLES_AND_DISTRICTS_BANNER_HEADER = 
+export const ASSIGN_ROLES_AND_DISTRICTS_BANNER_HEADER =
   'Assign Role and Districts';
-export const ASSIGN_ROLES_AND_DISTRICTS_BANNER_CONTENT = 
+export const ASSIGN_ROLES_AND_DISTRICTS_BANNER_CONTENT =
   'Assign role and districts to user account';
 // tips
 export const CONDITIONS_TIP =