[$500] [Wave Collect] [Ideal Nav] Make the header of the workspace list fixed

[hayata-suenaga]

On the Workspace List page (URL: https://new.expensify.com/settings/workspaces), make the header of the list fixed.

The ideas was suggested in this internal Slack thread.

This is a potential pattern that we could adopt across the app wherever we have a list. As we will add another list on the Money page, that new list can also adopt this pettern.

Creating this issue for now so that we can track this in our backlog.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b868d550d02a9a9a
• Upwork Job ID: 1755628933789016064
• Last Price Increase: 2024-02-08
• Automatic offers:
• bernhardoj | Contributor | 0

[melvin-bot]

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

[melvin-bot]

Current assignee @mallenexpensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Proposal

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

We want to make the workspace list header fixed.

What is the root cause of that problem?

A design change request.

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

To make the header position fixed, we can add stickyHeaderIndices={[0]} to the list

App/src/pages/workspace/WorkspacesListPage.tsx

Lines 376 to 380 in b2a305a

	<FlatList
	data={workspaces}
	renderItem={getMenuItem}
	ListHeaderComponent={listHeaderComponent}
	/>

Then, we will update the header list style to have a bg color and use padding instead of margin.

App/src/pages/workspace/WorkspacesListPage.tsx

Lines 210 to 211 in b2a305a

	return (
	<View style={[styles.flexRow, styles.gap5, styles.mh5, styles.mv5, styles.pl5]}>

<View style={[styles.flexRow, styles.gap5, styles.p5, styles.pl10, styles.appBG]}>

Result:

Screen.Recording.2024-02-09.at.00.35.31.mov

[ghost]

Can't access Slack Thread

[hayata-suenaga]

@godofoutcasts94 you don't need access to the Slack thread to understand the requirements of this issue 👍

[thesahindia]

@bernhardoj's proposal looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @hayata-suenaga is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

PR is ready

cc: @thesahindia

[mallenexpensify]

Merged yesterday

[trjExpensify]

What's going on here? Does it need paying?

[bernhardoj]

@trjExpensify yes, it needs paying

[mallenexpensify]

Contributor: @bernhardoj paid $500 via Upwork
Contributor+: @thesahindia owed $500 via NewDot

Issue didn't update when PR was merged, was stuck with the Reviewing label. Apologies for the delay.

@thesahindia since this is a new feature, I assume we want to create a testrail case. (even if it's design related and we only want to check once a month). Can you propose the test steps? Thx

[thesahindia]

Here are the steps -

1. On Web/ Desktop click on the wrench icon to open the workspace list page
2. Scroll down and up on the workspace list
3. Verify the list header (workspace name, owner, workspace type) sticks at the top

[hayata-suenaga]

maybe we can added another step saying that the tester should shrink the screen vertically or ensure they have enough workspaces to scroll the list

[mallenexpensify]

Thanks @thesahindia and @hayata-suenaga , TestRail issue created
https://github.com/Expensify/Expensify/issues/377270

[JmillsExpensify]

$500 approved for @thesahindia