diff --git a/src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx b/src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx index 265e716aa2..137cb6eea1 100644 --- a/src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx +++ b/src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx @@ -1,5 +1,5 @@ import { React, useState, useEffect, useRef } from 'react'; -import { Button, Col, Tooltip, Input } from 'reactstrap'; +import { Button, Col, Input } from 'reactstrap'; import './TeamsAndProjects.css'; import ToggleSwitch from '../UserProfileEdit/ToggleSwitch'; import hasPermission from '../../../utils/permissions'; @@ -16,9 +16,6 @@ import { toast } from 'react-toastify'; const UserTeamsTable = props => { const { darkMode } = props; - const [tooltipOpen, setTooltip] = useState(false); - - const [teamCodeExplainTooltip, setTeamCodeExplainTooltip] = useState(false); const [showDropdown, setShowDropdown] = useState(false); @@ -45,7 +42,7 @@ const UserTeamsTable = props => { const canAssignTeamToUsers = props.hasPermission('assignTeamToUsers'); const fullCodeRegex = /^(|([a-zA-Z0-9]-[a-zA-Z0-9]{3,5}|[a-zA-Z0-9]{5,7}|.-[a-zA-Z0-9]{3}))$/; - const toggleTooltip = () => setTooltip(!tooltipOpen); + useEffect(() => { if (props.userProfile?.teamCode) { @@ -105,7 +102,6 @@ const UserTeamsTable = props => { opacity: !props.canEditTeamCode ? 0.6 : 0.9, }; - const toggleTeamCodeExplainTooltip = () => setTeamCodeExplainTooltip(!teamCodeExplainTooltip); const fetchTeamSelected = async (teamId, teamName, isUpdate) => { const urlTeamData = ENDPOINTS.TEAM_BY_ID(teamId); @@ -216,19 +212,23 @@ const UserTeamsTable = props => { {canAssignTeamToUsers ? ( props.disabled ? ( - ) : ( - + <> + + ) ) : ( <> diff --git a/src/components/UserProfile/ToolTips/TeamsTabTips.jsx b/src/components/UserProfile/ToolTips/TeamsTabTips.jsx new file mode 100644 index 0000000000..1079d4d0e3 --- /dev/null +++ b/src/components/UserProfile/ToolTips/TeamsTabTips.jsx @@ -0,0 +1,24 @@ +import { useState } from 'react'; +import { Tooltip } from 'reactstrap'; + +function TeamsTabTips() { + const [teamCodeExplainTooltip, setTeamCodeExplainTooltip] = useState(false); + const toggleTeamCodeExplainTooltip = () => setTeamCodeExplainTooltip(!teamCodeExplainTooltip); + return ( +
+ + + This team code should only be used by admin/owner, and has nothing to do with + the team data model. + +
+ ) +} +export default TeamsTabTips diff --git a/src/components/UserProfile/UserProfile.jsx b/src/components/UserProfile/UserProfile.jsx index f80c72c324..32152b38a6 100644 --- a/src/components/UserProfile/UserProfile.jsx +++ b/src/components/UserProfile/UserProfile.jsx @@ -41,6 +41,7 @@ import SaveButton from './UserProfileEdit/SaveButton'; import UserLinkLayout from './UserLinkLayout'; import TabToolTips from './ToolTips/TabToolTips'; import BasicToolTips from './ToolTips/BasicTabTips'; +import TeamsTabTips from './ToolTips/TeamsTabTips'; import ResetPasswordButton from '../UserManagement/ResetPasswordButton'; import Badges from './Badges'; import { getAllTeamCode } from '../../actions/allTeamsAction'; @@ -175,9 +176,9 @@ function UserProfile(props) { useEffect(() => { checkIsProjectsEqual(); - setUserProfile({ ...userProfile, projects }); + setUserProfile({ ...userProfile, projects }); setOriginalUserProfile({ ...originalUserProfile, projects }); - }, [ projects]); + }, [projects]); useEffect(() => { setShowLoading(true); @@ -550,9 +551,9 @@ function UserProfile(props) { if (newInfringements.length !== 0) { newInfringements = newInfringements.filter(infringement => infringement._id !== id); await axios.delete(ENDPOINTS.MODIFY_BLUE_SQUARE(userProfile._id, id)) - .catch(error => { - toast.error('Failed to delete Blue Square!'); - }); + .catch(error => { + toast.error('Failed to delete Blue Square!'); + }); toast.success('Blue Square Deleted!'); setUserProfile({ ...userProfile, infringements: newInfringements }); setOriginalUserProfile({ ...userProfile, infringements: newInfringements }); @@ -672,12 +673,12 @@ function UserProfile(props) { ...userProfile, isRehireable: pendingRehireableStatus, }; - try{ + try { await dispatch(updateRehireableStatus(updatedUserProfile, pendingRehireableStatus)); setIsRehireable(pendingRehireableStatus); setUserProfile(updatedUserProfile); setOriginalUserProfile(updatedUserProfile); - }catch(error){ + } catch (error) { toast.error('Unable change rehireable status'); } }; @@ -782,8 +783,8 @@ function UserProfile(props) { const canEditUserProfile = targetIsDevAdminUneditable ? false : userProfile.role === 'Owner' - ? canAddDeleteEditOwners - : canPutUserProfile; + ? canAddDeleteEditOwners + : canPutUserProfile; const canEdit = canEditUserProfile || isUserSelf; @@ -818,7 +819,7 @@ function UserProfile(props) { // console.log("userProfile:createdDate, startDate", createdDate, startDate === '' ? "EMPTY" : startDate); return startDate === '' ? false : (createdDate < CREATED_DATE_CRITERIA || createdDate <= startDate); }; - + const endDateValidation = (startDate, endDate) => { // console.log("userProfile:startDate, endDate", startDate === '' ? "EMPTY" : startDate, endDate === '' ? "EMPTY" : endDate ); return endDate ? (startDate <= endDate) : true; @@ -853,6 +854,7 @@ function UserProfile(props) { )} + ) : null} - + {!isProfileEqual || - !isTasksEqual || - !isProjectsEqual ? ( + !isTasksEqual || + !isProjectsEqual ? ( Please click on "Save changes" to save the changes you have made.{' '} @@ -1072,7 +1074,7 @@ function UserProfile(props) { canEdit={canEdit || canManageAdminLinks} darkMode={darkMode} /> - + Cancel @@ -1352,9 +1354,8 @@ function UserProfile(props) { Confirm Status Change - {`Are you sure you want to change the user status to ${ - pendingRehireableStatus ? 'Rehireable' : 'Unrehireable' - }?`} + {`Are you sure you want to change the user status to ${pendingRehireableStatus ? 'Rehireable' : 'Unrehireable' + }?`}