[C+ Checklist Needs Completion] [$500] Android - Task - Background image in task report appears cropped after cancelling the task

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: 1.4.21-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Go to 1:1 DM > + > Assign task
Create a task
Open the task report
Tap 3-dot menu > Cancel
Cancel the task

Expected Result:

The background image in task report will not appear cropped after cancelling the task

Actual Result:

The background image in task report appears cropped after cancelling the task

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

Bug6331783_1704328677391.Screen_Recording_20240103_170106_New_Expensify__1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01f32de82628d0256b
Upwork Job ID: 1742715497820069888
Last Price Increase: 2024-01-25
Automatic offers:

aimane-chnaif | Contributor | 28124230
aswin-s | Contributor | 28143615

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

@greg-schroeder

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

@alitoshmatov

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

Withdrawing my first proposal as it seems to break on web.

Proposal

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

The EmptyStateBackground image on deleted task page looks clipped

What is the root cause of that problem?

Animated background image used to be an SVG image. Recently that was replaced with a PNG. Earlier we used to set the container width to 200% to make the SVG image appear covering the screen on small screens.

App/src/styles/utils/index.ts

Line 704 in d4c3e63

width: '200%',

Now this is not required as PNG images properly apply the resizeMode within the container.

The PNG image height is set to 300px for small screen devices and it is positioned 'absolutely' with in it's parent container. Parent container of the AnimatedBackground image has a much smaller height. Being the first item in the inverted Flatlist the absolutely positioned image goes out of the contentContainer bounds. On Android anything outside the content container of Flatlist gets clipped even if we provide overflow:'visible'. That's why the image gets clipped only on Android.

Below image shows contentContainer with red border applied around it on iOS and Android.

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

Set BackgroundImage container width to 100%

if (isSmallScreenWidth) {
        return {
            height: emptyStateBackground.SMALL_SCREEN.IMAGE_HEIGHT,
            width: '100%',
            position: 'absolute',
        };
}

Now the image translation logic needs to be adjusted as width is now set to 100%

App/src/pages/home/report/AnimatedEmptyStateBackground.tsx

Line 16 in d4c3e63

const IMAGE_OFFSET_X = windowWidth / 2;

to

const IMAGE_OFFSET_X = 0;

Also replace the fragment wrapper here with a View

App/src/pages/home/report/ReportActionItem.js

Lines 586 to 598 in d4c3e63

    
           <> 
        
               <AnimatedEmptyStateBackground /> 
        
               <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}> 
        
                   <ReportActionItemSingle 
        
                       action={parentReportAction} 
        
                       showHeader={_.isUndefined(props.draftMessage)} 
        
                       report={props.report} 
        
                   > 
        
                       <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} /> 
        
                   </ReportActionItemSingle> 
        
                   <View style={styles.reportHorizontalRule} /> 
        
               </View> 
        
           </>

<View >
  <AnimatedEmptyStateBackground />
  <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
    <ReportActionItemSingle
      action={parentReportAction}
      showHeader={_.isUndefined(props.draftMessage)}
      report={props.report}
    >
        <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
    </ReportActionItemSingle>
    <View style={styles.reportHorizontalRule} />
  </View>
</View

Result

Before	After

What alternative solutions did you explore? (Optional)

None (edited)

Proposal

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

The report background image is cut off on a canceled task report.

What is the root cause of that problem?

In short, the view container height is smaller than the background height.

The image height is defined by IMAGE_HEIGHT.

App/src/CONST.ts

Lines 134 to 143 in d800d60

    
           SMALL_SCREEN: { 
        
               IMAGE_HEIGHT: 300, 
        
               CONTAINER_MINHEIGHT: 200, 
        
               VIEW_HEIGHT: 185, 
        
           }, 
        
           WIDE_SCREEN: { 
        
               IMAGE_HEIGHT: 450, 
        
               CONTAINER_MINHEIGHT: 500, 
        
               VIEW_HEIGHT: 275, 
        
           },

On a small screen, the height is 300. When the task is canceled, we render a simple [Deleted task] message.

App/src/pages/home/report/ReportActionItem.js

Lines 584 to 599 in d800d60

    
           if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) { 
        
               return ( 
        
                   <> 
        
                       <AnimatedEmptyStateBackground /> 
        
                       <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}> 
        
                           <ReportActionItemSingle 
        
                               action={parentReportAction} 
        
                               showHeader={_.isUndefined(props.draftMessage)} 
        
                               report={props.report} 
        
                           > 
        
                               <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} /> 
        
                           </ReportActionItemSingle> 
        
                           <View style={styles.reportHorizontalRule} /> 
        
                       </View> 
        
                   </> 
        
               );

The height is around 70 and we have a margin-top style from getReportWelcomeTopMarginStyle. It's defined by VIEW_HEIGHT above and the value is 185. So, the total height is around 255 and it's smaller than 300.

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

Update the min-height (defined by CONTAINER_MINHEIGHT) at least to 300.

Then, we will update the task view in ReportActionItem by wrapping it with a View following the same pattern in ReportActionItemParentAction

App/src/pages/home/report/ReportActionItemParentAction.js

Lines 65 to 69 in 6e5a5a2

    
           <View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}> 
        
               <AnimatedEmptyStateBackground /> 
        
               <View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]} /> 
        
               {parentReportAction && ( 
        
                   <ReportActionItem

<View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
    <AnimatedEmptyStateBackground />
    <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}/>
    <View>
        <ReportActionItemSingle
            action={parentReportAction}
            showHeader={_.isUndefined(props.draftMessage)}
            report={props.report}
        >
            <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
        </ReportActionItemSingle>
        <View style={styles.reportHorizontalRule} />
    </View>
</View>

(do the same for non-canceled task)

Proposal

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

For android, an empty state image in the task report clipped and doesn't looks correct

What is the root cause of that problem?

Currently, Parent of the absolute image have flex-direction: column-reverse; and due to that absolute position starting points will be incorrect. Due to that it overflows in the empty area which will be the unalloted area and in android it clipped to the boundary which creates this issue.

Problem arises after this PR where the parent View gets removed which we had earlier here.
https://github.com/Expensify/App/pull/30815/files#diff-e6bee90bf18ae0cad1bb445ed9a9c0d989476874f1005810c0f8e93f1f39b99cL635

Issue

Screen.Recording.2024-01-04.at.23.51.59.mp4

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

We should re-add parent by replacing fragment with View below places which corrects the starting position of an absolute image.

App/src/pages/home/report/ReportActionItem.js

Lines 586 to 587 in 1752bc5

    
           <> 
        
               <AnimatedEmptyStateBackground />

App/src/pages/home/report/ReportActionItem.js

Lines 602 to 603 in 1752bc5

    
           <> 
        
               <AnimatedEmptyStateBackground />

@aimane-chnaif

Bump @aimane-chnaif

@aimane-chnaif

Friendly bump to get this checklist done @aimane-chnaif!

@aimane-chnaif

@aimane-chnaif any chance we can knock this out?

@aimane-chnaif

@aimane-chnaif please jump on this one so we can close it, thank you!

@aswin-s

Oh, Aimane is OOO. @aswin-s any chance you could step in for the checklist?

@aimane-chnaif

Bump @aimane-chnaif or @aswin-s

Sorry I am back.

This bug happened after we add background image in cancelled task report. No specific PR which caused regression.

Regression Test Proposal

Navigate to one of the reports below:

regular chat
workspace
money request
transaction detail
thread
task
cancelled task

Verify that the image in report background is not clipped at the top

@aimane-chnaif

No sweat! Thanks @aimane-chnaif

Navigation Menu

Repository navigation

[C+ Checklist Needs Completion] [$500] Android - Task - Background image in task report appears cropped after cancelling the task #33922

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Bug0 Triage Checklist (Main S/O)

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)

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?

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?

81 remaining items

Regression Test Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<>
	<AnimatedEmptyStateBackground />
	<View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
	<ReportActionItemSingle
	action={parentReportAction}
	showHeader={_.isUndefined(props.draftMessage)}
	report={props.report}
	>
	<RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
	</ReportActionItemSingle>
	<View style={styles.reportHorizontalRule} />
	</View>
	</>

	SMALL_SCREEN: {
	IMAGE_HEIGHT: 300,
	CONTAINER_MINHEIGHT: 200,
	VIEW_HEIGHT: 185,
	},
	WIDE_SCREEN: {
	IMAGE_HEIGHT: 450,
	CONTAINER_MINHEIGHT: 500,
	VIEW_HEIGHT: 275,
	},

	if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
	return (
	<>
	<AnimatedEmptyStateBackground />
	<View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
	<ReportActionItemSingle
	action={parentReportAction}
	showHeader={_.isUndefined(props.draftMessage)}
	report={props.report}
	>
	<RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
	</ReportActionItemSingle>
	<View style={styles.reportHorizontalRule} />
	</View>
	</>
	);

	<View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
	<AnimatedEmptyStateBackground />
	<View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]} />
	{parentReportAction && (
	<ReportActionItem

[C+ Checklist Needs Completion] [$500] Android - Task - Background image in task report appears cropped after cancelling the task #33922

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 4, 2024

melvin-bot commented on Jan 4, 2024

melvin-bot commented on Jan 4, 2024

Bug0 Triage Checklist (Main S/O)

melvin-bot commented on Jan 4, 2024

aswin-s commented on Jan 4, 2024

aswin-s commented on Jan 4, 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)

bernhardoj commented on Jan 4, 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?

Pujan92 commented on Jan 4, 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?

81 remaining items

deetergp commented on Apr 15, 2024

greg-schroeder commented on Apr 18, 2024

greg-schroeder commented on Apr 26, 2024

greg-schroeder commented on May 7, 2024

greg-schroeder commented on May 9, 2024

greg-schroeder commented on May 15, 2024

aimane-chnaif commented on May 21, 2024

aimane-chnaif commented on May 21, 2024

Regression Test Proposal

greg-schroeder commented on May 22, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions