Skip to content

Fix for one Flexi-talent UI bug noted #2028

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jmgasper merged 2 commits into from
Jul 9, 2026
Merged

Fix for one Flexi-talent UI bug noted #2028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ed2f93
Minor UI updates
jmgasper Jul 9, 2026
9b4f1aa
Merge pull request #2027 from topcoder-platform/flexi-talent
jmgasper Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion src/apps/customer-portal/src/pages/flexi-talent/FlexiTalentPage/FlexiTalentPage.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,6 +542,10 @@
}
}

.descriptionFrame {
position: relative;
}

.descriptionRichText {
color: $black-80;
font-size: 14px;
Expand Down Expand Up @@ -614,7 +618,7 @@

.descriptionRichTextCollapsed {
overflow: hidden;
max-height: 147px;
max-height: 126px;
}

.descriptionToggleButton {
Expand All @@ -627,13 +631,35 @@
font-size: 13px;
font-weight: 700;
line-height: 18px;
margin-top: 4px;
padding: 2px 0;

&:hover {
text-decoration: underline;
}
}

.descriptionToggleButtonCollapsed {
position: absolute;
right: 0;
bottom: 0;
min-height: 21px;
background: $tc-white;
line-height: 21px;
margin-top: 0;
padding: 0 0 0 28px;

&::before {
content: '';
position: absolute;
top: 0;
right: 100%;
bottom: 0;
width: 28px;
background: linear-gradient(90deg, rgba($tc-white, 0), $tc-white);
}
}

.skillList,
.workLinks {
display: flex;
Expand Down Expand Up @@ -667,6 +693,11 @@
}
}

.detailHeaderWorkLinks {
border-bottom: 0;
padding-bottom: 0;
}

.assignmentRow {
display: flex;
flex-direction: column;
Expand Down
70 changes: 44 additions & 26 deletions ...pps/customer-portal/src/pages/flexi-talent/components/EngagementsView/EngagementsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import styles from '../../FlexiTalentPage/FlexiTalentPage.module.scss'

const ENGAGEMENTS_PER_PAGE = 10
const SEARCH_DEBOUNCE_MS = 300
const DESCRIPTION_COLLAPSED_HEIGHT_PX = 147
const DESCRIPTION_COLLAPSED_HEIGHT_PX = 126
const DESCRIPTION_OVERFLOW_TOLERANCE_PX = 1

type DetailState = 'loading' | 'empty' | 'error' | 'ready'
Expand Down Expand Up @@ -141,7 +141,17 @@ function renderEngagementDescriptionHtml(description?: string | null): string {
}

/**
* Checks whether the rendered description is taller than the default collapsed region.
* Checks whether engagement detail includes any Work Manager links.
*
* @param workLinks Normalized Work Manager links from the engagement detail service.
* @returns Whether any Work Manager URL is available.
*/
function hasWorkLinks(workLinks: FlexiEngagementDetail['workLinks']): boolean {
return Boolean(workLinks.projectUrl || workLinks.engagementUrl || workLinks.assigneeDetailsUrl)
}

/**
* Checks whether the rendered description is taller than the six-line collapsed region.
*
* @param element Rendered rich-text description container.
* @returns True when the container needs a See More / See Less toggle.
Expand Down Expand Up @@ -707,6 +717,32 @@ export const EngagementsView: FC = () => {
<div className={styles.detailHeader}>
<span className={styles.statusPill}>{formatStatusLabel(detailData.status)}</span>
<h3>{detailData.engagementTitle}</h3>
{hasWorkLinks(detailData.workLinks) && (
<div className={classNames(styles.workLinks, styles.detailHeaderWorkLinks)}>
{detailData.workLinks.projectUrl && (
<a href={detailData.workLinks.projectUrl} rel='noreferrer' target='_blank'>
Project
<IconOutline.ExternalLinkIcon />
</a>
)}
{detailData.workLinks.engagementUrl && (
<a href={detailData.workLinks.engagementUrl} rel='noreferrer' target='_blank'>
Engagement
<IconOutline.ExternalLinkIcon />
</a>
)}
{detailData.workLinks.assigneeDetailsUrl && (
<a
href={detailData.workLinks.assigneeDetailsUrl}
rel='noreferrer'
target='_blank'
>
Assignee Details
<IconOutline.ExternalLinkIcon />
</a>
)}
</div>
)}
<p>{detailData.projectName || 'Project name unavailable'}</p>
<span className={styles.detailCapacity}>
{formatMemberCount(detailData.assignedMemberCount, detailData.requiredMemberCount)}
Expand All @@ -716,7 +752,7 @@ export const EngagementsView: FC = () => {
<div className={styles.detailSection}>
<h4>Description</h4>
{sanitizedDescriptionHtml ? (
<>
<div className={styles.descriptionFrame}>
<div
className={classNames(
styles.descriptionRichText,
Expand All @@ -728,14 +764,17 @@ export const EngagementsView: FC = () => {
{isDescriptionCollapsible && (
<button
aria-expanded={isDescriptionExpanded}
className={styles.descriptionToggleButton}
className={classNames(
styles.descriptionToggleButton,
!isDescriptionExpanded && styles.descriptionToggleButtonCollapsed,
)}
onClick={handleDescriptionToggle}
type='button'
>
{isDescriptionExpanded ? 'See Less' : 'See More'}
</button>
)}
</>
</div>
) : (
<p>No description provided.</p>
)}
Expand All @@ -754,27 +793,6 @@ export const EngagementsView: FC = () => {
)}
</div>

<div className={styles.workLinks}>
{detailData.workLinks.projectUrl && (
<a href={detailData.workLinks.projectUrl} rel='noreferrer' target='_blank'>
Project
<IconOutline.ExternalLinkIcon />
</a>
)}
{detailData.workLinks.engagementUrl && (
<a href={detailData.workLinks.engagementUrl} rel='noreferrer' target='_blank'>
Engagement
<IconOutline.ExternalLinkIcon />
</a>
)}
{detailData.workLinks.assigneeDetailsUrl && (
<a href={detailData.workLinks.assigneeDetailsUrl} rel='noreferrer' target='_blank'>
Assignee Details
<IconOutline.ExternalLinkIcon />
</a>
)}
</div>

<div className={styles.detailSection}>
<h4>Assignments</h4>
{detailData.assignments.length > 0 ? (
Expand Down
Loading