[$250] [HOLD for payment 2024-03-29] Newly added tag is not arranged in alphabetical order

[m-natarajan]

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

---

Version Number: 1.4.52-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:
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:

Precondition:

• User is an admin of Collect workspace.

1. Go to staging.new.expensify.com.
2. Go to Settings > Workspaces > Collect workspace.
3. Go to Tags.
4. Click Add tag.
5. Add a tag.

Expected Result:

The new tag will be arranged in alphabetical order.

Actual Result:

The new tag is not arranged in alphabetical order. It only follows the order after refreshing the page.

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

Add any screenshot/video evidence

Bug6412861_1710369790458.bandicam_2024-03-14_04-16-06-302.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01820a70bf08232dfa
• Upwork Job ID: 1778526852557000704
• Last Price Increase: 2024-04-11

Issue Owner

Current Issue Owner: @kevinksullivan

[melvin-bot]

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

[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 @marcaaron (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[m-natarajan]

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

[m-natarajan]

We think that this bug might be related to #wave-control
cc @JmillsExpensify

[marcaaron]

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

It's a deploy blocker so it should really be fixed by whoever broke this.

[marcaaron]

Seems related to #37870 cc @luacmartins

[luacmartins]

I can take this over! Thanks for the ping!

[nkdengineer]

Proposal

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

• Newly added tag is not arranged in alphabetical order

What is the root cause of that problem?

• After creating tag, we just add a new tag to the policyTags without sorting in alphabet order. Refreshing the page will display data correctly because BE returns the correct tags's order

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

• We need to create a sort function on FE side to sync with BE side, and then use it to update the optimistic data when creating a new tag.

1. Create a sort function, named getOrderedTags
2. In here, use the above function to set the correct policy tags

• We also need to consider the category page

What alternative solutions did you explore? (Optional)

• Or, we can use the getOrderedTag in main solution when displaying the tags, do not need to know how it is stored. For example, we can use the getOrderTag in here

[mountiny]

I think this does not have to be a blocker

[allgandalf]

Proposal

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

Newly added tag is not arranged in alphabetical order

What is the root cause of that problem?

Currently we don't sort the tags before mapping

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Lines 65 to 70 in 206d293

	const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags), [policyTags]);
	const tagList = useMemo<PolicyForList[]>(
	() =>
	policyTagLists
	.map((policyTagList) =>

We display these tags as the BE sends us, and when we add new tags, we directly show them at the end of the list.

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

Don't rely on the BE, sort them on the frontend as well, update the tagList as follows:

const tagList = useMemo<PolicyForList[]>(
        () =>
            policyTagLists
-               .map((policyTagList) =>
-                    Object.values(policyTagList.tags || []).map((value) => ({
+               .flatMap((policyTagList) =>
+                    Object.values(policyTagList.tags || []).sort((a, b) => a.name.localeCompare(b.name)).map((value) => ({
                        value: value.name,
                        text: value.name,
                        keyForList: value.name,
                        isSelected: !!selectedTags[value.name],
                        rightElement: (
                            <View style={styles.flexRow}>
                                <Text style={[styles.textSupporting, styles.alignSelfCenter, styles.pl2, styles.label]}>
                                    {value.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')}
                                </Text>
                                <View style={[styles.p1, styles.pl2]}>
                                    <Icon
                                        src={Expensicons.ArrowRight}
                                        fill={theme.icon}
                                    />
                                </View>
                            </View>
                        ),
                    })),
                )
-                .flat(),
        [policyTagLists, selectedTags, styles.alignSelfCenter, styles.flexRow, styles.label, styles.p1, styles.pl2, styles.textSupporting, theme.icon, translate],
    );

Note:

This behavior would be consistent with categories page as well, because we sort the list there too:

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Lines 73 to 77 in aa46730

	const categoryList = useMemo<PolicyOption[]>(
	() =>
	Object.values(policyCategories ?? {})
	.sort((a, b) => localeCompare(a.name, b.name))
	.map((value) => {

[luacmartins]

This is not a blocker since the feature is still WIP. PR to fix it here

[luacmartins]

Just pending payment

[luacmartins]

Bump for payment @kevinksullivan

[luacmartins]

Bump for payment @kevinksullivan

[melvin-bot]

@luacmartins, @kevinksullivan, @situchan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[luacmartins]

Bump @kevinksullivan for payment

[kevinksullivan]

Same as other issue, waiting for @situchan to accept.

[kevinksullivan]

Still waiting on @situchan

[situchan]

@kevinksullivan sorry I am back from vacay. Can you please send new offer? Old one was expired.

[kevinksullivan]

All good!

[kevinksullivan]

@situchan fresh offer here

https://www.upwork.com/jobs/~01820a70bf08232dfa

[kevinksullivan]

all set