[HOLD for payment 2024-10-14] Task - Green dot is not on the same line as the caret

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.44-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+kh011001@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to DM.
3. Assign a task to yourself.

Expected Result:

The green dot should be on the same line as the caret (production behavior).

Actual Result:

The green dot is not on the same line as the caret.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6623234_1727962473551.task.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

Triggered auto assignment to @abekkala (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @rlinoz (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[Nodebrute]

Edited by proposal-police: This proposal was edited at 2024-10-03 14:48:44 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Green dot is not on the same line as the caret

What is the root cause of that problem?

We see this error only when task has assignee because we are not adding iconWrapperStyle to this

App/src/components/ReportActionItem/TaskPreview.tsx

Lines 130 to 136 in 9e72084

	{shouldShowGreenDotIndicator && (
	<View style={styles.ml2}>
	<Icon
	src={Expensicons.DotIndicator}
	fill={theme.success}
	/>
	</View>

What changes do you think we should make in order to solve the problem?

We should pass iconWrapperStyle in styles here

App/src/components/ReportActionItem/TaskPreview.tsx

Lines 130 to 136 in 9e72084

	{shouldShowGreenDotIndicator && (
	<View style={styles.ml2}>
	<Icon
	src={Expensicons.DotIndicator}
	fill={theme.success}
	/>
	</View>

    <View style={[styles.ml2,iconWrapperStyle]}>
                        <Icon
                            src={Expensicons.DotIndicator}
                            fill={theme.success}
                        />
                    </View>

Other minor styling can be adjusted in the pr

What alternative solutions did you explore? (Optional)

Or we can remove iconWrapperStyle from here to fix this

App/src/components/ReportActionItem/TaskPreview.tsx

Line 141 in 9e72084

additionalStyles={iconWrapperStyle}

[rlinoz]

This PR introduced the issue: #49686, although it fixes worst ones 😄

cc: @bernhardoj @rayane-djouah

[rlinoz]

Also I don't think it needs to be a blocker, as it is a minor style issue.

[bernhardoj]

PR is up

[rayane-djouah]

Thanks @bernhardoj !

[ChavdaSachin]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Task - Green dot is not on the same line as the caret

What is the root cause of that problem?

We are using dynamic styles for surrounding elements, while not for greenDot.

What changes do you think we should make in order to solve the problem?

Option 1.

• Move GreenDotIndicator element inside this view, This way We take advantage of styles.mr2 in this view for better spacing between greendot and arrow icon.
  

  App/src/components/ReportActionItem/TaskPreview.tsx

  Lines 103 to 129 in e9d445e

  	<View style={[styles.flex1, styles.flexRow, styles.alignItemsStart, styles.mr2]}>
  	<View style={iconWrapperStyle}>
  	<Checkbox
  	style={[styles.mr2]}
  	isChecked={isTaskCompleted}
  	disabled={!Task.canModifyTask(taskReport, currentUserPersonalDetails.accountID) || !Task.canActionTask(taskReport, currentUserPersonalDetails.accountID)}
  	onPress={Session.checkIfActionIsAllowed(() => {
  	if (isTaskCompleted) {
  	Task.reopenTask(taskReport);
  	} else {
  	Task.completeTask(taskReport);
  	}
  	})}
  	accessibilityLabel={translate('task.task')}
  	/>
  	</View>
  	{hasAssignee && (
  	<Avatar
  	containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
  	source={avatar}
  	size={avatarSize}
  	avatarID={taskAssigneeAccountID}
  	type={CONST.ICON_TYPE_AVATAR}
  	/>
  	)}
  	<Text style={titleStyle}>{taskTitle}</Text>
  	</View>

  
  

  App/src/components/ReportActionItem/TaskPreview.tsx

  Lines 130 to 137 in e9d445e

  	{shouldShowGreenDotIndicator && (
  	<View style={styles.ml2}>
  	<Icon
  	src={Expensicons.DotIndicator}
  	fill={theme.success}
  	/>
  	</View>
  	)}

• Additionally apply iconWrapperStyle to greenDot indicator icon.

    <Icon
        src={Expensicons.DotIndicator}
        fill={theme.success}
        additionalStyles={iconWrapperStyle}
    />

App/src/components/ReportActionItem/TaskPreview.tsx

Lines 132 to 135 in e9d445e

	<Icon
	src={Expensicons.DotIndicator}
	fill={theme.success}
	/>

Option 2.
If we don't want to move greenDot inside view as I suggested, then we should remove styles.ml2 style and hence wrapping view for greenDot icon. (We have ml2 for greenDot and mr2 for task title due which task title is shrinking too much without need)

• remove this view container and add iconWrapperStyle as additional style to greenDot icon.
  

  App/src/components/ReportActionItem/TaskPreview.tsx

  Lines 131 to 136 in e9d445e

  	<View style={styles.ml2}>
  	<Icon
  	src={Expensicons.DotIndicator}
  	fill={theme.success}
  	/>
  	</View>

Just centering greenDot	option 1 (even space on both side)	option 2 (consuming less space from task title)

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[rayane-djouah]

PR #50165 ready to be merged

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.45-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix task preview green dot is not aligned with the arrow #50165

If no regressions arise, payment will be issued on 2024-10-14. 🎊

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rlinoz] The PR that introduced the bug has been identified. Link to the PR:
• [@rlinoz] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@rlinoz] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@rlinoz] Determine if we should create a regression test for this bug.
• [@rlinoz] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@abekkala] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[rayane-djouah]

No payment is due. We can close this issue.

[rlinoz]

Nice, thanks!

This is fixed by #50281