[HOLD for payment 2024-10-16] [HOLD for payment 2024-10-14] [HOLD for payment 2024-10-11] [$250] Task - Long Task title is overlapped by task arrow #49086

IuliiaHerets · 2024-09-12T13:48:21Z

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.33-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4955214&group_by=cases:section_id&group_order=asc&group_id=291935
Email or phone of affected tester (no customers): gocemate+a2096@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

Go to Group chat> +> Assign Task
In title field enter long text> Finish the flow
Take a look at Task title in Group chat

Expected Result:

Task title should not be overlapped by arrow

Actual Result:

Task title is overlapped by task arrow

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6600811_1726147239222.Recording__3921.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021834296909071158877
Upwork Job ID: 1834296909071158877
Last Price Increase: 2024-09-19
Automatic offers:

rayane-djouah | Reviewer | 104113003

Issue Owner

Current Issue Owner: @Christinadobrzyn

melvin-bot · 2024-09-12T13:48:32Z

Triggered auto assignment to @Christinadobrzyn (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.

IuliiaHerets · 2024-09-12T13:48:46Z

@Christinadobrzyn FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

Krishna2323 · 2024-09-12T14:04:06Z

Proposal 

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

Task - Long Task title is overlapped by task arrow

What is the root cause of that problem?

styles.flex1 is not added to the container of RenderHTML.

App/src/components/ReportActionItem/TaskPreview.tsx

Lines 122 to 124 in 65a21fc

    
           <View style={[styles.alignSelfCenter]}> 
        
               <RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} /> 
        
           </View>

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

Add styles.flex1 to the container of RenderHTML.

OPTIONAL: Also add styles.flexRow, styles.alignItemsCenter, styles.breakWord, styles.preWrap & styles.renderHTML if needed.

OPTIONAL 2: We can move the ArrowRight in this container and wrap it with a view and also apply styles.alignSelfCenter to the view to centre the icon.

What alternative solutions did you explore? (Optional)

Result

ChavdaSachin · 2024-09-12T14:08:23Z

Edited by proposal-police: This proposal was edited at 2024-09-12 14:13:45 UTC.

Proposal

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

Task - Long Task title is overlapped by task arrow

What is the root cause of that problem?

styles.flex1 is missing from RenderHTML container. And icon is not justifiedCenter.

App/src/components/ReportActionItem/TaskPreview.tsx

Lines 97 to 129 in 4c424a2

    
           <View style={[styles.flex1, styles.flexRow, styles.alignItemsStart, styles.mt1]}> 
        
               <View style={[styles.taskCheckboxWrapper, styles.alignSelfCenter]}> 
        
                   <Checkbox 
        
                       style={[styles.mr2]} 
        
                       isChecked={isTaskCompleted} 
        
                       disabled={!Task.canModifyTask(taskReport, currentUserPersonalDetails.accountID)} 
        
                       onPress={Session.checkIfActionIsAllowed(() => { 
        
                           if (isTaskCompleted) { 
        
                               Task.reopenTask(taskReport); 
        
                           } else { 
        
                               Task.completeTask(taskReport); 
        
                           } 
        
                       })} 
        
                       accessibilityLabel={translate('task.task')} 
        
                   /> 
        
               </View> 
        
               {taskAssigneeAccountID > 0 && ( 
        
                   <Avatar 
        
                       containerStyles={[styles.mr2, styles.alignSelfCenter, isTaskCompleted ? styles.opacitySemiTransparent : undefined]} 
        
                       source={avatar} 
        
                       size={CONST.AVATAR_SIZE.SMALL} 
        
                       avatarID={taskAssigneeAccountID} 
        
                       type={CONST.ICON_TYPE_AVATAR} 
        
                   /> 
        
               )} 
        
               <View style={[styles.alignSelfCenter]}> 
        
                   <RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} /> 
        
               </View> 
        
           </View> 
        
           <Icon 
        
               src={Expensicons.ArrowRight} 
        
               fill={StyleUtils.getIconFillColor(getButtonState(isHovered))} 
        
           />

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

following code perfectly aligns with the expectations

    <View style={[styles.flex1, styles.flexRow, styles.mt1]}>
        <View style={[styles.taskCheckboxWrapper,taskAssigneeAccountID > 0 && styles.mt1]}>
            <Checkbox
                style={[styles.mr2, styles.alignSelfEnd]}
                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>
        {taskAssigneeAccountID > 0 && (
            <Avatar
                containerStyles={[styles.mr2,styles.alignSelfStart, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
                source={avatar}
                size={CONST.AVATAR_SIZE.SMALL}
                avatarID={taskAssigneeAccountID}
                type={CONST.ICON_TYPE_AVATAR}
            />
        )}
        <View style={[taskAssigneeAccountID > 0 ? styles.alignSelfStart:styles.alignSelfCenter, styles.flex1 ]}>
            <RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} />
        </View>
        <Icon
            additionalStyles={[styles.alignSelfStart,taskAssigneeAccountID > 0 && styles.mt1]}
            src={Expensicons.ArrowRight}
            fill={StyleUtils.getIconFillColor(getButtonState(isHovered))}
        />
    </View>

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.

Krishna2323 · 2024-09-12T14:19:03Z

Proposal Updated

Added optional 2

melvin-bot · 2024-09-12T18:23:59Z

Job added to Upwork: https://www.upwork.com/jobs/~021834296909071158877

melvin-bot · 2024-09-12T18:24:04Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (External)

melvin-bot · 2024-09-12T18:24:09Z

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

Christinadobrzyn · 2024-09-12T18:24:26Z

I can reproduce this. I think it can be external and I also think we need design to review this to see what would be best for the layout of the arrow.

dannymcclain · 2024-09-12T18:28:22Z

I'm pretty sure this is a regression. Not sure from where but this definitely used to not happen. We just need to wrap the text to multiple lines like we used to.

Maybe from the recent Tasks updates we did to display the user's avatar instead of an @mention?

Christinadobrzyn · 2024-09-12T19:21:37Z

Ah thanks @dannymcclain - let me dig into any PRs that might relate...

There are a lot of task GHS - asking QA if they can help me narrow this down - https://expensify.slack.com/archives/C9YU7BX5M/p1726169064112539

Christinadobrzyn · 2024-09-12T21:30:17Z

Hey @thienlnam this is a regression that was found when executing this GH. Do you happen to know which PR this might relate to?

thienlnam · 2024-09-12T22:24:09Z

I'm not sure, maybe this one? #48552

EDIT: Nvm, that one isn't even deployed yet. Yeah I'm not sure, probably has been like this for a while

Christinadobrzyn · 2024-09-13T17:43:00Z

@rayane-djouah would you be able to help us look into what this might be a regression of? Or, I think if we can't find the original PR we should consider just fixing this as a new job. @rayane-djouah let me know your thoughts

bernhardoj · 2024-09-13T18:04:59Z

Reverting #48552 locally does fix the issue for me.

Inspecting the element on prod shows that the element structure matches the changes from the PR.

A View (div) with an align self: center and a children of the RenderHTML.

Gajendra-Gupta · 2024-09-16T09:09:56Z

Proposal

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

Task - Long Task title is overlapped by task arrow

What is the root cause of that problem?

App/src/components/ReportActionItem/TaskPreview.tsx

Lines 122 to 124 in 65a21fc

<View style={[styles.alignSelfCenter]}> 
         <RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} /> 
     </View>

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

We need to replace this code

<View style={[styles.alignSelfCenter]}> 
         <RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} /> 
     </View>

by

<RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} />

Also If you want arrow in center then need to add style styles.alignItemsCenter on this

App/src/components/ReportActionItem/TaskPreview.tsx

Line 87 in 65a21fc

<PressableWithoutFeedback

so code will be

<PressableWithoutFeedback
                onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(taskReportID))}
                onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                onPressOut={() => ControlSelection.unblock()}
                onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
                shouldUseHapticsOnLongPress
                style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}
                role={CONST.ROLE.BUTTON}
                accessibilityLabel={translate('task.task')}
            >

What alternative solutions did you explore? (Optional)

rayane-djouah · 2024-09-16T09:45:38Z

Will review today!

Christinadobrzyn · 2024-09-17T20:43:01Z

Thanks @rayane-djouah and @bernhardoj - if this is a regression of #48552 should someone on the PR provide a proposal (I'm not sure)

rayane-djouah · 2024-10-06T17:02:54Z

@bernhardoj Thanks for the RCA

rayane-djouah · 2024-10-06T22:14:29Z

Update: PR #50281 in review

melvin-bot · 2024-10-07T22:39:09Z

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

melvin-bot · 2024-10-07T22:39:14Z

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. 🎊

For reference, here are some details about the assignees on this issue:

@bernhardoj requires payment through NewDot Manual Requests
@rayane-djouah requires payment automatic offer (Reviewer)

melvin-bot · 2024-10-09T20:31:19Z

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

#2 - Fix task title is overflown and align the checkbox and arrow correctly #50281

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

For reference, here are some details about the assignees on this issue:

@bernhardoj requires payment through NewDot Manual Requests
@rayane-djouah requires payment automatic offer (Reviewer)

melvin-bot · 2024-10-09T20:31:22Z

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:

[@rayane-djouah] The PR that introduced the bug has been identified. Link to the PR:
[@rayane-djouah] 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:
[@rayane-djouah] 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:
[@rayane-djouah] Determine if we should create a regression test for this bug.
[@rayane-djouah] 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.
[@Christinadobrzyn] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/436505

rayane-djouah · 2024-10-11T00:53:27Z

BugZero Checklist

The PR that introduced the bug has been identified. Link to the PR: chore: update task preview UI #48552
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: https://github.com/Expensify/App/pull/48552/files#r1790970146
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: N/A
Determine if we should create a regression test for this bug. Yes
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.

Regression Test Proposal

Create a task with a very long title and assign it to yourself.
Verify that the task title does not overflow.
Verify that the checkbox, green dot, and arrow are vertically centered relative to the avatar.

Do we agree 👍 or 👎

Christinadobrzyn · 2024-10-14T01:51:45Z

A few more days until payment but creating a summary in preparation

Payouts due:

Contributor: $250 @bernhardoj (NewDot - please submit a request for payment)
Reviewer: $250 @rayane-djouah (Upwork offer - https://www.upwork.com/nx/wm/offer/104113003)

bernhardoj · 2024-10-14T03:14:32Z

Requested in ND.

olya-ivanochko · 2024-10-14T05:17:51Z

There was regression

melvin-bot · 2024-10-14T05:17:55Z

📣 @olya-ivanochko! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

Christinadobrzyn · 2024-10-15T05:54:30Z

Hum, @rayane-djouah @bernhardoj can you confirm if this is a regression? #50209

Or what needs to be resolved before payment?

bernhardoj · 2024-10-15T06:16:41Z

I wouldn't call it a regression since the root cause of the issue exists before #50209 which I explained here.

cc: @arosiclair

JmillsExpensify · 2024-10-15T11:50:02Z

$250 approved for @bernhardoj (agree with the comment above)

arosiclair · 2024-10-15T13:21:49Z

Agree as well

Christinadobrzyn · 2024-10-16T03:50:46Z

okay thanks @bernhardoj and @arosiclair!

Paid out based on this payment summary - #49086 (comment)
Regression test - https://github.com/Expensify/Expensify/issues/436505

Closing as complete!

IuliiaHerets added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 12, 2024

melvin-bot bot assigned Christinadobrzyn Sep 12, 2024

Christinadobrzyn added the External Added to denote the issue can be worked on by a contributor label Sep 12, 2024

melvin-bot bot changed the title ~~Task - Long Task title is overlapped by task arrow~~ [$250] Task - Long Task title is overlapped by task arrow Sep 12, 2024

Christinadobrzyn added the Design label Sep 12, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 12, 2024

melvin-bot bot assigned rayane-djouah Sep 12, 2024

melvin-bot bot assigned dannymcclain Sep 12, 2024

Christinadobrzyn added this to [#whatsnext] #expense Sep 12, 2024

melvin-bot bot added the Overdue label Sep 16, 2024

melvin-bot bot removed the Overdue label Sep 16, 2024

rayane-djouah mentioned this issue Oct 6, 2024

[$250] Task - Task name not updated in chat when it got changed offline #50209

Closed

6 tasks

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Oct 7, 2024

melvin-bot bot changed the title ~~[HOLD for payment 2024-10-11] [$250] Task - Long Task title is overlapped by task arrow~~ [HOLD for payment 2024-10-14] [HOLD for payment 2024-10-11] [$250] Task - Long Task title is overlapped by task arrow Oct 7, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Oct 7, 2024

This comment was marked as duplicate.

Sign in to view

rayane-djouah mentioned this issue Oct 7, 2024

chore: update task preview UI #48552

Merged

50 tasks

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Oct 9, 2024

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Oct 11, 2024

Christinadobrzyn closed this as completed Oct 16, 2024

github-project-automation bot moved this to Done in [#whatsnext] #expense Oct 16, 2024

[HOLD for payment 2024-10-16] [HOLD for payment 2024-10-14] [HOLD for payment 2024-10-11] [$250] Task - Long Task title is overlapped by task arrow #49086

[HOLD for payment 2024-10-16] [HOLD for payment 2024-10-14] [HOLD for payment 2024-10-11] [$250] Task - Long Task title is overlapped by task arrow #49086

Comments

IuliiaHerets commented Sep 12, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Sep 12, 2024

IuliiaHerets commented Sep 12, 2024

Krishna2323 commented Sep 12, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

ChavdaSachin commented Sep 12, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Krishna2323 commented Sep 12, 2024

Proposal Updated

melvin-bot bot commented Sep 12, 2024

melvin-bot bot commented Sep 12, 2024

melvin-bot bot commented Sep 12, 2024

Christinadobrzyn commented Sep 12, 2024

dannymcclain commented Sep 12, 2024 • edited Loading

Christinadobrzyn commented Sep 12, 2024 • edited Loading

Christinadobrzyn commented Sep 12, 2024

thienlnam commented Sep 12, 2024 • edited Loading

Christinadobrzyn commented Sep 13, 2024

bernhardoj commented Sep 13, 2024

Gajendra-Gupta commented Sep 16, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

rayane-djouah commented Sep 16, 2024

Christinadobrzyn commented Sep 17, 2024

rayane-djouah commented Oct 6, 2024

rayane-djouah commented Oct 6, 2024

melvin-bot bot commented Oct 7, 2024

melvin-bot bot commented Oct 7, 2024

This comment was marked as duplicate.

melvin-bot bot commented Oct 9, 2024

melvin-bot bot commented Oct 9, 2024 • edited by Christinadobrzyn Loading

rayane-djouah commented Oct 11, 2024

BugZero Checklist

Christinadobrzyn commented Oct 14, 2024 • edited Loading

bernhardoj commented Oct 14, 2024

olya-ivanochko commented Oct 14, 2024

melvin-bot bot commented Oct 14, 2024

Christinadobrzyn commented Oct 15, 2024

bernhardoj commented Oct 15, 2024

JmillsExpensify commented Oct 15, 2024

arosiclair commented Oct 15, 2024

Christinadobrzyn commented Oct 16, 2024

IuliiaHerets commented Sep 12, 2024 •

edited by melvin-bot bot

Loading

Krishna2323 commented Sep 12, 2024 •

edited

Loading

Proposal 

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

ChavdaSachin commented Sep 12, 2024 •

edited

Loading

dannymcclain commented Sep 12, 2024 •

edited

Loading

Christinadobrzyn commented Sep 12, 2024 •

edited

Loading

thienlnam commented Sep 12, 2024 •

edited

Loading

melvin-bot bot commented Oct 9, 2024 •

edited by Christinadobrzyn

Loading

Christinadobrzyn commented Oct 14, 2024 •

edited

Loading