PSP-4389, PSP-4409 Tech debt fixes

source/frontend/src/components/Table/Table.tsx

@@ -489,7 +489,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
         {props.canRowExpand ? <div className="th" style={{ width: '4.7rem' }}></div> : null}
         {filterable && (
           <div className={'th reset-filter svg-btn'}>
-            <TooltipWrapper toolTipId="properties-list-filter-reset-tooltip" toolTip="Reset Filter">
+            <TooltipWrapper tooltipId="properties-list-filter-reset-tooltip" tooltip="Reset Filter">
               <Button
                 onClick={() => {
                   const nextState: any = { ...props.filter };
@@ -568,8 +568,8 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
       return (
         props.detailsPanel && (
           <TooltipWrapper
-            toolTipId="expand-all-rows"
-            toolTip={open ? 'Collapse Row' : 'Expand Row'}
+            tooltipId="expand-all-rows"
+            tooltip={open ? 'Collapse Row' : 'Expand Row'}
           >
             <div className={className + ' svg-btn'} onClick={onClick}>
               {open ? detailsOpenedIcon : detailsClosedIcon}

source/frontend/src/components/common/OverflowTip.tsx

@@ -32,7 +32,7 @@ const OverflowTip: React.FunctionComponent<
   const [hoverStatus, setHover] = useState(false);
 
   return (
-    <TooltipWrapper toolTipId={`tooltip-title`} toolTip={hoverStatus ? fullText : ''}>
+    <TooltipWrapper tooltipId={`tooltip-title`} tooltip={hoverStatus ? fullText : ''}>
       <StyledOverflowDiv className={className} ref={textElementRef as any}>
         {fullText ?? ''}
       </StyledOverflowDiv>

source/frontend/src/components/common/TooltipWrapper.tsx

@@ -14,14 +14,14 @@ interface ITooltipWrapperProps extends Partial<OverlayTriggerProps> {
    * @type {string}
    * @memberof ITooltipWrapperProps
    */
-  toolTip?: string | React.ReactElement;
+  tooltip?: string | React.ReactElement;
   /**
    * The tooltip element 'id'.
    *
    * @type {string}
    * @memberof ITooltipWrapperProps
    */
-  toolTipId: string;
+  tooltipId: string;
   className?: string;
 }
 
@@ -38,11 +38,11 @@ export const TooltipWrapper: React.FunctionComponent<
         {...props}
         overlay={
           <Tooltip
-            style={{ visibility: !props.toolTip ? 'hidden' : 'visible' }}
-            id={props.toolTipId}
+            style={{ visibility: !props.tooltip ? 'hidden' : 'visible' }}
+            id={props.tooltipId}
             className={props.className}
           >
-            {props.toolTip}
+            {props.tooltip}
           </Tooltip>
         }
       >

source/frontend/src/components/common/buttons/PlusButton.tsx

@@ -22,7 +22,7 @@ export const PlusButton: React.FC<React.PropsWithChildren<IPlusButtonProps>> = (
   ...props
 }) => {
   return (
-    <TooltipWrapper toolTipId={toolId} toolTip={toolText}>
+    <TooltipWrapper tooltipId={toolId} tooltip={toolText}>
       <StyledAddButton className="primary" {...props} icon={<FaPlus size={20} />} />
     </TooltipWrapper>
   );

source/frontend/src/components/common/buttons/ResetButton.tsx

@@ -10,7 +10,7 @@ import { Button, ButtonProps } from '.';
  */
 export const ResetButton: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...props }) => {
   return (
-    <TooltipWrapper toolTipId="map-filter-reset-tooltip" toolTip="Reset Filter">
+    <TooltipWrapper tooltipId="map-filter-reset-tooltip" tooltip="Reset Filter">
       <Button
         data-testid="reset-button"
         title="reset-button"

source/frontend/src/components/common/buttons/SearchButton.tsx

@@ -10,7 +10,7 @@ import { Button, ButtonProps } from '.';
  */
 export const SearchButton: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...props }) => {
   return (
-    <TooltipWrapper toolTipId="map-filter-search-tooltip" toolTip="Search">
+    <TooltipWrapper tooltipId="map-filter-search-tooltip" tooltip="Search">
       <Button
         id="search-button"
         type={props.type ?? 'submit'}

source/frontend/src/components/common/form/AsyncTypeahead.tsx

@@ -115,7 +115,7 @@ function AsyncTypeaheadInner<T extends TypeaheadModel>(
     >
       {label && <Form.Label htmlFor={`typeahead-${field}`}>{label}</Form.Label>}
       {tooltip && <TooltipIcon toolTipId={`${field}-tooltip`} toolTip={tooltip} />}
-      <TooltipWrapper toolTipId={`${field}-error-tooltip}`} toolTip={errorTooltip}>
+      <TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
         <BaseAsyncTypeahead<T>
           ref={ref} // forward the ref to the inner typeahead control to be able to call its methods; e.g. typeahead.clear(), .blur() etc
           id={`typeahead-${field}`}

source/frontend/src/components/common/form/ContactInput.tsx

@@ -62,7 +62,7 @@ export const ContactInput: React.FC<React.PropsWithChildren<ContactInputProps>>
     >
       {!!label && <Form.Label>{label}</Form.Label>}
 
-      <TooltipWrapper toolTipId={`${field}-error-tooltip}`} toolTip={errorTooltip}>
+      <TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
         <Row>
           <Col>
             <StyledDiv className={!!error ? 'is-invalid' : ''}>

source/frontend/src/components/common/form/ContactInput/ContactInputView.tsx

@@ -57,7 +57,7 @@ const ContactInputView: React.FunctionComponent<IContactInputViewProps> = ({
       <Form.Group controlId={`input-${field}`}>
         {!!label && <Form.Label>{label}</Form.Label>}
 
-        <TooltipWrapper toolTipId={`${field}-error-tooltip}`} toolTip={errorTooltip}>
+        <TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
           <Row>
             <Col>
               <StyledDiv className={!!error && !!touch ? 'is-invalid' : ''}>

source/frontend/src/components/common/form/Input.tsx

@@ -123,7 +123,7 @@ export const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
       )}
       {!!tooltip && !label && <TooltipIcon toolTipId={`${field}-tooltip`} toolTip={tooltip} />}
 
-      <TooltipWrapper toolTipId={`${field}-error-tooltip`} toolTip={errorTooltip}>
+      <TooltipWrapper tooltipId={`${field}-error-tooltip`} tooltip={errorTooltip}>
         <Form.Control
           className={innerClassName}
           as={asElement}

source/frontend/src/components/common/form/Multiselect.tsx

@@ -107,7 +107,7 @@ export function MultiselectInner<T, U>(
       {label && <Form.Label htmlFor={`multiselect-${field}_input`}>{label}</Form.Label>}
       {tooltip && <TooltipIcon toolTipId={`${field}-tooltip`} toolTip={tooltip} />}
 
-      <TooltipWrapper toolTipId={`${field}-error-tooltip}`} toolTip={errorTooltip}>
+      <TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
         <MultiselectBase
           {...rest}
           ref={ref as any}

source/frontend/src/components/common/form/Typeahead.tsx

@@ -117,7 +117,7 @@ export function TypeaheadField<T extends TypeaheadModel>({
     <StyledFormGroup className={classNames(!!required ? 'required' : '', outerClassName)}>
       {!!label && <Form.Label>{label}</Form.Label>}
       {!!tooltip && <TooltipIcon toolTipId="typeAhead-tip" toolTip={tooltip} />}
-      <TooltipWrapper toolTipId={`${name}-error-tooltip}`} toolTip={errorTooltip}>
+      <TooltipWrapper tooltipId={`${name}-error-tooltip}`} tooltip={errorTooltip}>
         <Typeahead<T>
           {...rest}
           inputProps={{ ...rest.inputProps, name: name, id: `${name}-field` }}

source/frontend/src/components/common/form/TypeaheadSelect.tsx

@@ -90,7 +90,7 @@ export const TypeaheadSelect = React.forwardRef<Typeahead<SelectOption>, ITypeah
       >
         {label && <Form.Label htmlFor={`typeahead-select-${field}`}>{label}</Form.Label>}
         {tooltip && <TooltipIcon toolTipId={`${field}-tooltip`} toolTip={tooltip} />}
-        <TooltipWrapper toolTipId={`${field}-error-tooltip}`} toolTip={errorTooltip}>
+        <TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
           <Typeahead
             ref={ref}
             id={`typeahead-select-${field}`}

source/frontend/src/components/common/form/YesNoSelect.tsx

@@ -57,7 +57,7 @@ export const YesNoSelect: React.FC<React.PropsWithChildren<IYesNoSelectProps>> =
       {label && <Form.Label>{label}</Form.Label>}
       {tooltip && <TooltipIcon toolTipId={`${field}-tooltip`} toolTip={tooltip} />}
 
-      <TooltipWrapper toolTipId={`${field}-error-tooltip}`} toolTip={errorTooltip}>
+      <TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
         <Form.Control
           as="select"
           name={field}

source/frontend/src/components/layout/SideNavBar/NavIcon.tsx

@@ -32,7 +32,7 @@ export const NavIcon = ({ icon, text, showText, onClick, roles, claims }: INavIc
       data-testid={`nav-tooltip-${text.replaceAll(' ', '').toLowerCase()}`}
     >
       <StyledLink>
-        <TooltipWrapper toolTipId={`nav-tooltip-${text}`} toolTip={text}>
+        <TooltipWrapper tooltipId={`nav-tooltip-${text}`} tooltip={text}>
           {icon}
         </TooltipWrapper>
         <StyledLabel className={clsx({ show: showText })}>{text}</StyledLabel>

source/frontend/src/components/maps/leaflet/Control/AdvancedFilter/AdvancedFilterButton.tsx

@@ -21,7 +21,7 @@ const AdvancedFilterButton: React.FC<IAdvanceFilterButtonProps> = ({ open, onTog
   return (
     <Control position="topright">
       <div className="w-100">
-        <TooltipWrapper toolTipId="advanced-filter-button-id" toolTip="Advanced Map Filters">
+        <TooltipWrapper tooltipId="advanced-filter-button-id" tooltip="Advanced Map Filters">
           <ControlButton
             title="advanced-filter-button"
             variant="outline-secondary"

source/frontend/src/components/maps/leaflet/Control/LayersControl/LayersControl.tsx

@@ -109,7 +109,7 @@ const LayersControl: React.FC<React.PropsWithChildren<ILayersControl>> = ({ open
             <Title>Layers</Title>
           </LayersHeader>
         )}
-        <TooltipWrapper toolTipId="layer-control-id" toolTip="Layer Controls">
+        <TooltipWrapper tooltipId="layer-control-id" tooltip="Layer Controls">
           <ControlButton
             id="layersControlButton"
             variant="outline-secondary"

source/frontend/src/components/maps/leaflet/Control/Legend/LegendControl.tsx

@@ -33,8 +33,8 @@ export const LegendControl: React.FC<React.PropsWithChildren<unknown>> = () => {
       <ClickAwayListener onClickAway={() => setVisible(false)}>
         <div>
           <TooltipWrapper
-            toolTipId="marker-legendId"
-            toolTip={visible ? undefined : 'Marker legend'}
+            tooltipId="marker-legendId"
+            tooltip={visible ? undefined : 'Marker legend'}
           >
             <LegendButton ref={target} onClick={() => setVisible(!visible)}>
               <FiMapPin />

source/frontend/src/components/maps/leaflet/Control/ZoomOut/ZoomOutButton.tsx

@@ -30,7 +30,7 @@ export const ZoomOutButton: React.FC = () => {
   };
   return (
     <Control position="topleft">
-      <TooltipWrapper toolTipId="zoomout-id" toolTip="View entire province">
+      <TooltipWrapper tooltipId="zoomout-id" tooltip="View entire province">
         <ZoomButton onClick={zoomOut}>
           <FaExpandArrowsAlt />
         </ZoomButton>

source/frontend/src/features/acquisition/list/AcquisitionListView.tsx

@@ -1,6 +1,5 @@
 import { isEmpty } from 'lodash';
-import React, { useEffect } from 'react';
-import { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { FaFileExcel, FaPlus } from 'react-icons/fa';
 import { useHistory } from 'react-router';
@@ -109,7 +108,7 @@ export const AcquisitionListView: React.FunctionComponent<
               />
             </Col>
             <Col md="auto" className="px-0">
-              <TooltipWrapper toolTipId="export-to-excel" toolTip="Export to Excel">
+              <TooltipWrapper tooltipId="export-to-excel" tooltip="Export to Excel">
                 <StyledIconButton onClick={() => fetch('excel')}>
                   <FaFileExcel data-testid="excel-icon" size={36} />
                 </StyledIconButton>

source/frontend/src/features/admin/access-request/AccessRequestForm.tsx

@@ -87,8 +87,8 @@ export const AccessRequestForm: React.FunctionComponent<
         <SectionField label="Role" labelWidth="2" required>
           <Select field="roleId" options={selectRoles} placeholder="Select..." />
           <TooltipWrapper
-            toolTipId="role description tooltip icon"
-            toolTip={<RolesToolTip />}
+            tooltipId="role description tooltip icon"
+            tooltip={<RolesToolTip />}
             placement="auto"
             className="tooltip-light"
           >

source/frontend/src/features/admin/access/components/Filter.tsx

@@ -52,10 +52,10 @@ export const AccessRequestFilter = (props: IProps) => {
           />
         </Col>
         <Col className="actions d-flex" md={1}>
-          <TooltipWrapper toolTipId="access-filter-search-tooltip" toolTip="Search">
+          <TooltipWrapper tooltipId="access-filter-search-tooltip" tooltip="Search">
             <SearchButton type="submit" onClick={search} />
           </TooltipWrapper>
-          <TooltipWrapper toolTipId="access-filter-reset-tooltip" toolTip="Reset Filter">
+          <TooltipWrapper tooltipId="access-filter-reset-tooltip" tooltip="Reset Filter">
             <Button
               title="reset"
               variant="info"

source/frontend/src/features/admin/edit-user/EditUserForm.tsx

@@ -105,8 +105,8 @@ const EditUserForm: React.FunctionComponent<React.PropsWithChildren<IEditUserFor
           <SectionField label="Role(s)" required labelWidth="2">
             <Multiselect placeholder="" field="roles" options={roles} displayValue="name" />
             <TooltipWrapper
-              toolTipId="role description tooltip icon"
-              toolTip={<RolesToolTip />}
+              tooltipId="role description tooltip icon"
+              tooltip={<RolesToolTip />}
               placement="auto"
               className="tooltip-light"
             >
@@ -140,8 +140,8 @@ const EditUserForm: React.FunctionComponent<React.PropsWithChildren<IEditUserFor
 
           <SectionField className="d-flex" label="Disable account?" labelWidth="2">
             <TooltipWrapper
-              toolTipId="is-disabled-tooltip"
-              toolTip={'Click to change account status then click Save.'}
+              tooltipId="is-disabled-tooltip"
+              tooltip={'Click to change account status then click Save.'}
             >
               <Check data-testid="isDisabled" field="isDisabled" />
             </TooltipWrapper>

source/frontend/src/features/admin/users/ManageUsersPage.tsx

@@ -1,6 +1,6 @@
 import fileDownload from 'js-file-download';
 import isEmpty from 'lodash/isEmpty';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { FaFileExcel } from 'react-icons/fa';
 import styled from 'styled-components';
@@ -75,7 +75,7 @@ export const ManageUsersPage = () => {
           <UsersFilterBar values={filter} onChange={setFilter} />
         </Col>
         <Col md={4} className="align-items-center d-flex">
-          <TooltipWrapper toolTipId="export-to-excel" toolTip="Export to Excel">
+          <TooltipWrapper tooltipId="export-to-excel" tooltip="Export to Excel">
             <StyledIconButton onClick={() => fetch('excel')}>
               <FaFileExcel data-testid="excel-icon" size={36} />
             </StyledIconButton>

source/frontend/src/features/admin/users/components/UsersFilterBar.tsx

@@ -67,10 +67,10 @@ export const UsersFilterBar: React.FC<React.PropsWithChildren<IProps>> = ({ valu
             <Col className="actions" md={2} sm={2}>
               <Row>
                 <Col className="d-flex">
-                  <TooltipWrapper toolTipId="map-filter-search-tooltip" toolTip="Search">
+                  <TooltipWrapper tooltipId="map-filter-search-tooltip" tooltip="Search">
                     <SearchButton className="mr-2" />
                   </TooltipWrapper>
-                  <TooltipWrapper toolTipId="map-filter-reset-tooltip" toolTip="Reset Filter">
+                  <TooltipWrapper tooltipId="map-filter-reset-tooltip" tooltip="Reset Filter">
                     <ResetButton
                       type=""
                       disabled={false}

source/frontend/src/features/advancedFilterBar/AdvancedFilterBar.tsx

@@ -20,7 +20,7 @@ const AdvancedFilterBar: React.FC<React.PropsWithChildren<IAdvancedFilterBarProp
         <>
           <StyledHeader>
             <StyledTitle>Filter By:</StyledTitle>
-            <TooltipWrapper toolTipId="close-sidebar-tooltip" toolTip="Close Advanced Map Filters">
+            <TooltipWrapper tooltipId="close-sidebar-tooltip" tooltip="Close Advanced Map Filters">
               <CloseIcon title="close" onClick={toggle} />
             </TooltipWrapper>
           </StyledHeader>

source/frontend/src/features/help/containers/HelpContainer.tsx

@@ -22,7 +22,7 @@ export function HelpContainer() {
 
   return keycloak.obj.authenticated ? (
     <Nav.Item>
-      <TooltipWrapper toolTipId="help-tooltip" toolTip="Ask for Help">
+      <TooltipWrapper tooltipId="help-tooltip" tooltip="Ask for Help">
         <StyledContainer onClick={() => setShowHelp(true)}>
           <StyledHelpIcon size="24px" />
           <label>Help</label>

source/frontend/src/features/leases/list/LeaseListView.tsx

@@ -1,9 +1,7 @@
 import { isEmpty } from 'lodash';
-import { useEffect } from 'react';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { FaFileAlt, FaFileExcel } from 'react-icons/fa';
-import { FaPlus } from 'react-icons/fa';
+import { FaFileAlt, FaFileExcel, FaPlus } from 'react-icons/fa';
 import { useHistory } from 'react-router';
 import { toast } from 'react-toastify';
 import styled from 'styled-components';
@@ -90,14 +88,14 @@ export const LeaseListView: React.FunctionComponent<React.PropsWithChildren<unkn
               <LeaseFilter filter={filter} setFilter={changeFilter} />
             </Col>
             <Col md="auto" className="px-0">
-              <TooltipWrapper toolTipId="export-to-excel" toolTip="Export to Excel">
+              <TooltipWrapper tooltipId="export-to-excel" tooltip="Export to Excel">
                 <StyledIconButton onClick={() => fetch('excel')}>
                   <FaFileExcel data-testid="excel-icon" size={36} />
                 </StyledIconButton>
               </TooltipWrapper>
             </Col>
             <Col md="auto" className="px-0">
-              <TooltipWrapper toolTipId="export-to-excel" toolTip="Export to CSV">
+              <TooltipWrapper tooltipId="export-to-excel" tooltip="Export to CSV">
                 <StyledIconButton onClick={() => fetch('csv')}>
                   <FaFileAlt data-testid="csv-icon" size={36} />
                 </StyledIconButton>

source/frontend/src/features/leases/reports/aggregated/ExportAggregatedLeasesContainer.tsx

@@ -50,7 +50,7 @@ export const ExportAggregatedLeasesContainer: React.FunctionComponent<
                 field="fiscalYear"
                 options={fiscalYearOptions}
               ></InlineSelect>
-              <TooltipWrapper toolTipId="download-aggregated-lease-report" toolTip="Download">
+              <TooltipWrapper tooltipId="download-aggregated-lease-report" tooltip="Download">
                 <ClickableDownload title="Export Aggregated Report" onClick={() => submitForm()} />
               </TooltipWrapper>
             </FlexRowDiv>

source/frontend/src/features/leases/reports/payments/ExportLeasePaymentsContainer.tsx

@@ -49,7 +49,7 @@ export const ExportLeasePaymentsContainer: React.FunctionComponent<
                 field="fiscalYear"
                 options={fiscalYearOptions}
               ></InlineSelect>
-              <TooltipWrapper toolTipId="download-lease-payments-report" toolTip="Download">
+              <TooltipWrapper tooltipId="download-lease-payments-report" tooltip="Download">
                 <ClickableDownload title="Export Aggregated Report" onClick={() => submitForm()} />
               </TooltipWrapper>
             </FlexRowDiv>

source/frontend/src/features/mapSideBar/layout/MapSideBarLayout.tsx

@@ -40,7 +40,7 @@ const MapSideBarLayout: React.FunctionComponent<
 
               {showCloseButton && (
                 <Col xs="auto">
-                  <TooltipWrapper toolTipId="close-sidebar-tooltip" toolTip="Close Form">
+                  <TooltipWrapper tooltipId="close-sidebar-tooltip" tooltip="Close Form">
                     <CloseIcon title="close" onClick={props.onClose} />
                   </TooltipWrapper>
                 </Col>

source/frontend/src/features/mapSideBar/property/MotiInventoryHeader.tsx

@@ -65,7 +65,7 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
           </Row>
         </Col>
         <Col xs="auto" className="d-flex p-0 align-items-center justify-content-end">
-          <TooltipWrapper toolTipId="property-zoom-map" toolTip="Zoom Map">
+          <TooltipWrapper tooltipId="property-zoom-map" tooltip="Zoom Map">
             <StyledIconButton
               variant="info"
               disabled={!props.onZoom}

source/frontend/src/features/properties/components/GeocoderAutoComplete.tsx

@@ -118,7 +118,7 @@ export const GeocoderAutoComplete: React.FC<
           controlId={`input-${field}`}
           className={classNames(!!required ? 'required' : '', outerClassName)}
         >
-          <TooltipWrapper toolTipId={`${field}-error-tooltip}`} toolTip={errorTooltip}>
+          <TooltipWrapper tooltipId={`${field}-error-tooltip}`} tooltip={errorTooltip}>
             <InputControl
               data-testid="geocoder-input"
               autoComplete={autoSetting}