[$500] Workflows - Offline indicator is not at the bottom of the page

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Found when validating PR : #37391

Version Number: 1.4.47-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team

Action Performed:

Precondition:

• User is the owner of Collect workspace.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Collect workspace.
3. Go to Workflows.
4. Go offline.

Expected Result:

The offline indicator locates at the bottom of the page.

Actual Result:

The offline indicator locates below the workflow card.

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f79caf6c04f732a8
• Upwork Job ID: 1765150505634082816
• Last Price Increase: 2024-04-25

[melvin-bot]

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

[izarutskaya]

@johncschuster 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.

[izarutskaya]

We think that this bug might be related to #wave8-collect-admins.
CC @zanyrenney

[Krishna2323]

Proposal

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

Workflows - Offline indicator is not at the bottom of the page

What is the root cause of that problem?

The content doesn't take the full height available because we haven't wrapped with a View which has styles.w100, styles.flex1 applied to it.

We don't pass shouldUseScrollView to WorkspacePageWithSections from WorkspaceWorkflowsPage.

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Line 171 in 9c49ab6

shouldShowNotFoundPage={!isPaidGroupPolicy || !isPolicyAdmin}

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

Wrap content with a View element and apply styles.w100, styles.flex1, so it takes all the height/width available.

App/src/pages/workspace/WorkspacePageWithSections.tsx

Line 180 in 9c49ab6

content

<View style={[styles.w100, styles.flex1]}>{content}</View>

There might be more instances of similar issue, we will check fix all of those.

Alternatively

1. We can directly apply styles.mtAuto to OfflineIndicator inside ScreenWrapper.
2. Pass offlineIndicatorStyle={styles.mtAuto} to ScreenWrapper from WorkspacePageWithSections
3. Pass shouldUseScrollView to WorkspacePageWithSections from WorkspaceWorkflowsPage### Result

[Krishna2323]

Proposal Updated

• Added alternatives
• Updated root cause

[rushatgabhane]

This is not a bug. It's expected result. cc: @luacmartins

[luacmartins]

@Expensify/design is the offline indicator supposed to be where it is in the image above?

[dannymcclain]

I would expect it to be at the bottom like on similar screens:

[dubielzyk-expensify]

Yep that looks good to me too. Fixed to the bottom of the "current" view.

[melvin-bot]

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

[luacmartins]

Thanks for confirming! Adding external label

[melvin-bot]

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

[allgandalf]

Proposal

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

Offline indicator is not at the bottom of the page

What is the root cause of that problem?

We miss the should shouldUseScrollView prop:

App/src/pages/workspace/workflows/WorkspaceWorkflowsPage.tsx

Lines 165 to 172 in ec64dc1

	<WorkspacePageWithSections
	headerText={translate('workspace.common.workflows')}
	icon={Illustrations.Workflows}
	route={route}
	guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_WORKFLOWS}
	shouldShowOfflineIndicatorInWideScreen
	shouldShowNotFoundPage={!isPaidGroupPolicy || !isPolicyAdmin}
	>

And hence we are not able to wrap the whole component

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

We need to pass the shouldUseScrollView prop in the component

We already do this in a bunch of places where WorkspacePageWithSections.tsx is used:

App/src/pages/workspace/WorkspaceProfilePage.tsx

Lines 78 to 83 in ec64dc1

	<WorkspacePageWithSections
	headerText={translate('workspace.common.profile')}
	route={route}
	guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_PROFILE}
	shouldShowLoading={false}
	shouldUseScrollView

App/src/pages/workspace/bills/WorkspaceBillsPage.tsx

Lines 22 to 23 in ec64dc1

	<WorkspacePageWithSections
	shouldUseScrollView

App/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx

Lines 21 to 22 in ec64dc1

	<WorkspacePageWithSections
	shouldUseScrollView

What alternative solutions did you explore? (Optional)

N/A

[mkhutornyi]

Dupe of #37403

[shawnborton]

Yup, I agree with the designers.

[eh2077]

Dupe of #37403

@mkhutornyi Yeah, they very likely share the same root cause. Both of them have solid discussions - this one is about the design part, and the other one covers the coding part.

@luacmartins I saw you commented on both. Should we put this one on hold for the other one #37403 created earlier?

[luacmartins]

Sure, let's put it on hold in favor of #37403

[melvin-bot]

@johncschuster, @eh2077 Eep! 4 days overdue now. Issues have feelings too...

[johncschuster]

This is on hold. Downgrading to Weekly while we wait on the above linked issue.

[johncschuster]

Still holding

[johncschuster]

Same

[johncschuster]

Looks like #37403 is now closed. Taking this off hold!

[eh2077]

@johncschuster I think we can close it as it's been fixed by #37403

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[eh2077]

@johncschuster Friendly bump! I think it's good to close this issue.

[luacmartins]

Nice! Thanks for testing again!