Skip to content

Commit

Permalink
Merge pull request #2708 from OneCommunityGlobal/vedant-fix-assign-te…
Browse files Browse the repository at this point in the history 
…am-button-hover-at-smaller-resolutions

Vedant Fix assign team button hover at smaller resolutions
  • Loading branch information
@one-community
one-community authored Jan 12, 2025
2 parents a2d97ee + 60ea212 commit 3fbded5
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 68 deletions.
32 changes: 16 additions & 16 deletions src/components/UserProfile/TeamsAndProjects/UserTeamsTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 hasPermission from '../../../utils/permissions';
import styles from './UserTeamsTable.css';
Expand All @@ -21,9 +21,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);

Expand All @@ -50,7 +47,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) {
Expand Down Expand Up @@ -110,7 +107,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);
Expand Down Expand Up @@ -220,19 +216,23 @@ const UserTeamsTable = props => {
<Col md="12" style={{ padding: '0' }}>
{canAssignTeamToUsers ? (
props.disabled ? (
<Button className="btn-addteam" color="primary" style={boxStyle} disabled>

<Button id="teamCodeAssign" className="btn-addteam" color="primary" style={boxStyle} disabled>
Assign Team
</Button>
) : (
<Button
className="btn-addteam"
color="primary"
onClick={() => {
props.onButtonClick();
}}
>
Assign Team
</Button>
<>
<Button
id="teamCodeAssign"
className="btn-addteam"
color="primary"
onClick={() => {
props.onButtonClick();
}}
>
Assign Team
</Button>
</>
)
) : (
<></>
Expand Down
24 changes: 24 additions & 0 deletions src/components/UserProfile/ToolTips/TeamsTabTips.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { useState } from 'react';
import { Tooltip } from 'reactstrap';

function TeamsTabTips() {
const [teamCodeExplainTooltip, setTeamCodeExplainTooltip] = useState(false);
const toggleTeamCodeExplainTooltip = () => setTeamCodeExplainTooltip(!teamCodeExplainTooltip);
return (
<div data-testid="test-teamstabtips">

<Tooltip
placement="top"
modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
isOpen={teamCodeExplainTooltip}
target="teamCodeAssign"
toggle={toggleTeamCodeExplainTooltip}
data-testid="teamstabtiptest-1"
>
This team code should only be used by admin/owner, and has nothing to do with
the team data model.
</Tooltip>
</div>
)
}
export default TeamsTabTips
101 changes: 49 additions & 52 deletions src/components/UserProfile/UserProfile.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -176,9 +177,9 @@ function UserProfile(props) {

useEffect(() => {
checkIsProjectsEqual();
setUserProfile({ ...userProfile, projects });
setUserProfile({ ...userProfile, projects });
setOriginalUserProfile({ ...originalUserProfile, projects });
}, [ projects]);
}, [projects]);

useEffect(() => {
setShowLoading(true);
Expand Down Expand Up @@ -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 });
Expand Down Expand Up @@ -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');
}
};
Expand Down Expand Up @@ -796,8 +797,8 @@ function UserProfile(props) {
const canEditUserProfile = targetIsDevAdminUneditable
? false
: userProfile.role === 'Owner'
? canAddDeleteEditOwners
: canPutUserProfile;
? canAddDeleteEditOwners
: canPutUserProfile;

const canEdit = canEditUserProfile || isUserSelf;

Expand Down Expand Up @@ -832,7 +833,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;
Expand Down Expand Up @@ -877,6 +878,7 @@ function UserProfile(props) {
</Modal>
<TabToolTips />
<BasicToolTips />

<Container
className={`py-5 ${darkMode ? 'bg-yinmn-blue text-light' : ''}`}
style={{
Expand Down Expand Up @@ -914,21 +916,21 @@ function UserProfile(props) {
</div>
) : null}
</div>
<QuickSetupModal
setSaved={setSaved}
handleSubmit={handleSubmit}
setUserProfile={setUserProfile}
userProfile={userProfile}
userTeams={teams || []}
teamsData={props?.allTeams?.allTeamsData || []}
projectsData={props?.allProjects?.projects || []}
/>
<QuickSetupModal
setSaved={setSaved}
handleSubmit={handleSubmit}
setUserProfile={setUserProfile}
userProfile={userProfile}
userTeams={teams || []}
teamsData={props?.allTeams?.allTeamsData || []}
projectsData={props?.allProjects?.projects || []}
/>

</Col>
<Col md="8">
{!isProfileEqual ||
!isTasksEqual ||
!isProjectsEqual ? (
!isTasksEqual ||
!isProjectsEqual ? (
<Alert color="warning">
Please click on &quot;Save changes&quot; to save the changes you have made.{' '}
</Alert>
Expand Down Expand Up @@ -1096,7 +1098,7 @@ function UserProfile(props) {
canEdit={canEdit || canManageAdminLinks}
darkMode={darkMode}
/>
<BlueSquareLayout
<BlueSquareLayout
userProfile={userProfile}
handleUserProfile={handleUserProfile}
handleSaveError={props.handleSaveError}
Expand Down Expand Up @@ -1223,6 +1225,7 @@ function UserProfile(props) {
/>
</TabPane>
<TabPane tabId="3">
<TeamsTabTips />
<TeamsTab
userTeams={teams || []}
teamsData={props?.allTeams?.allTeamsData || []}
Expand All @@ -1239,7 +1242,7 @@ function UserProfile(props) {
!formValid.lastName ||
!formValid.email ||
!(isProfileEqual && isTasksEqual && isProjectsEqual)

}
canEditTeamCode={canEditTeamCode}
setUserProfile={setUserProfile}
Expand Down Expand Up @@ -1301,8 +1304,8 @@ function UserProfile(props) {
if (targetIsDevAdminUneditable) {
alert(
'STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS PASSWORD. ' +
'You shouldn’t even be using this account except to create your own accounts to use. ' +
'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
'You shouldn’t even be using this account except to create your own accounts to use. ' +
'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
);
return `#`;
}
Expand Down Expand Up @@ -1342,9 +1345,8 @@ function UserProfile(props) {
setTasks(originalTasks);
setProjects(resetProjects);
}}
className={`btn mr-1 btn-bottom ${
darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
className={`btn mr-1 btn-bottom ${darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
style={darkMode ? boxStyleDark : boxStyle}
>
Cancel
Expand Down Expand Up @@ -1376,9 +1378,8 @@ function UserProfile(props) {
Confirm Status Change
</ModalHeader>
<ModalBody className={darkMode ? 'bg-yinmn-blue' : ''}>
{`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'
}?`}
</ModalBody>
<ModalFooter className={darkMode ? 'bg-yinmn-blue' : ''}>
<Button color="primary" onClick={handleConfirmChange}>
Expand Down Expand Up @@ -1433,8 +1434,8 @@ function UserProfile(props) {
if (targetIsDevAdminUneditable) {
alert(
'STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS PASSWORD. ' +
'You shouldn’t even be using this account except to create your own accounts to use. ' +
'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
'You shouldn’t even be using this account except to create your own accounts to use. ' +
'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
);
return `#`;
}
Expand All @@ -1460,7 +1461,7 @@ function UserProfile(props) {
!formValid.lastName ||
!formValid.email ||
!codeValid ||
(isProfileEqual && isTasksEqual && isProjectsEqual)
(isProfileEqual && isTasksEqual && isProjectsEqual)
}
userProfile={userProfile}
setSaved={() => setSaved(true)}
Expand All @@ -1472,9 +1473,8 @@ function UserProfile(props) {
setTasks(originalTasks);
setProjects(resetProjects);
}}
className={`btn mr-1 btn-bottom ${
darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
className={`btn mr-1 btn-bottom ${darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
style={darkMode ? boxStyleDark : boxStyle}
>
X
Expand Down Expand Up @@ -1537,7 +1537,7 @@ function UserProfile(props) {
!formValid.lastName ||
!formValid.email ||
!codeValid ||
(isProfileEqual && isTasksEqual && isProjectsEqual)
(isProfileEqual && isTasksEqual && isProjectsEqual)
}
userProfile={userProfile}
setSaved={() => setSaved(true)}
Expand All @@ -1549,9 +1549,8 @@ function UserProfile(props) {
setTasks(originalTasks);
setProjects(resetProjects);
}}
className={`btn mr-1 btn-bottom ${
darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
className={`btn mr-1 btn-bottom ${darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
style={darkMode ? boxStyleDark : boxStyle}
>
X
Expand Down Expand Up @@ -1589,6 +1588,7 @@ function UserProfile(props) {
Teams
</ModalHeader>
<ModalBody className={darkMode ? 'bg-yinmn-blue text-light' : ''}>
<TeamsTabTips />
<TeamsTab
userTeams={userProfile?.teams || []}
teamsData={props?.allTeams?.allTeamsData || []}
Expand All @@ -1604,7 +1604,7 @@ function UserProfile(props) {
!formValid.firstName ||
!formValid.lastName ||
!formValid.email ||
!(isProfileEqual && isTasksEqual && isProjectsEqual)
!(isProfileEqual && isTasksEqual && isProjectsEqual)
}
canEditTeamCode={canEditTeamCode}
setUserProfile={setUserProfile}
Expand Down Expand Up @@ -1643,9 +1643,8 @@ function UserProfile(props) {
setTasks(originalTasks);
setProjects(resetProjects);
}}
className={`btn mr-1 btn-bottom ${
darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
className={`btn mr-1 btn-bottom ${darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
style={darkMode ? boxStyleDark : boxStyle}
>
X
Expand Down Expand Up @@ -1728,9 +1727,8 @@ function UserProfile(props) {
setTasks(originalTasks);
setProjects(resetProjects);
}}
className={`btn mr-1 btn-bottom ${
darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
className={`btn mr-1 btn-bottom ${darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
style={darkMode ? boxStyleDark : boxStyle}
>
X
Expand Down Expand Up @@ -1788,7 +1786,7 @@ function UserProfile(props) {
!formValid.lastName ||
!formValid.email ||
!codeValid ||
(isProfileEqual && isTasksEqual && isProjectsEqual)
(isProfileEqual && isTasksEqual && isProjectsEqual)
}
userProfile={userProfile}
setSaved={() => setSaved(true)}
Expand All @@ -1800,9 +1798,8 @@ function UserProfile(props) {
setTasks(originalTasks);
setProjects(resetProjects);
}}
className={`btn mr-1 btn-bottom ${
darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
className={`btn mr-1 btn-bottom ${darkMode ? 'btn-danger' : 'btn-outline-danger '
}`}
style={darkMode ? boxStyleDark : boxStyle}
>
X
Expand Down

0 comments on commit 3fbded5

Please sign in to comment.