[HOLD for payment 2024-08-01] [$250] Workspace - The tag and category lists lack consistent alphabetical order

[lanitochka17]

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.4-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): dave0123seife+stest@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to workspace/or create one > Categories
2. Click on Add category
3. Now add Categories. Make some categories start with Capital letter and others with Small letter
   Notice that categories are listed Alphabetically with Capital letters coming first and then small letters.
4. Repeat step 2 and 3 for Tags. (You might have to enable tags by going to more feature)
   Notice that tags are also listed the same way as Categories are listed.
5. Go to the workspace chat > start submitting an expense
   6.Before submitting the expense Click on the show more
6. Go to categories. Notice that here small letter comes first
7. Go to tags. Notice small letters are show last below all the capital letters

Expected Result:

Consistent alphabetical order

Actual Result:

Inconsistent alphabetical order

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

Bug6533980_1720177825699.Ex_Alphabetical_Order_issue.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013f0c5d89e0679c03
• Upwork Job ID: 1810477124215778147
• Last Price Increase: 2024-07-09
• Automatic offers:
• ishpaul777 | Reviewer | 103053435
• dominictb | Contributor | 103053437

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

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

[cretadn22]

Proposal

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

Workspace - The tag and category lists lack consistent alphabetical order

What is the root cause of that problem?

We using different sort in two places: WorkspaceCategoriesPage and CategoryPicker

App/src/libs/OptionsListUtils.ts

Line 992 in 1f0a462

const sortedCategories = Object.values(categories).sort((a, b) => a.name.localeCompare(b.name));

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

Line 86 in 1f0a462

.sort((a, b) => localeCompare(a.name, b.name))

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

If you want to display uppercase letters first, use this method

localeCompare(a.name, b.name)) 

If you want to display lowercase letters first, use this method

a.name.localeCompare(b.name))

What alternative solutions did you explore? (Optional)

Using lodashSortBy to ensure consistency with oldDot (display uppercase letters first)

Updated: Apply lodashSortBy to these places:

App/src/libs/OptionsListUtils.ts

Line 992 in 1f0a462

const sortedCategories = Object.values(categories).sort((a, b) => a.name.localeCompare(b.name));

App/src/libs/OptionsListUtils.ts

Line 1042 in 1f0a462

acc.push(...nestedCategories.sort((a, b) => a.name.localeCompare(b.name)));

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

Line 86 in 1f0a462

.sort((a, b) => localeCompare(a.name, b.name))

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

Line 72 in 1f0a462

.sort((tagA, tagB) => localeCompare(tagA.name, tagB.name))

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

Line 93 in 1f0a462

.sort((tagA, tagB) => localeCompare(tagA.name, tagB.name))

The places mentioned are specifically for tag and category pages. If we want to expand the use of lodashSortBy to cover all places, I can include more later.

[dominictb]

Proposal

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

• Inconsistent alphabetical order in tags and categories.

What is the root cause of that problem?

• We are using the difference sorting method in tag picker, category picker, workspace tag list and workspace category list:
  

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

  Line 93 in a7429bc

  .sort((tagA, tagB) => localeCompare(tagA.name, tagB.name))

  
  

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

  Line 86 in a7429bc

  .sort((a, b) => localeCompare(a.name, b.name))

  
  

  App/src/libs/OptionsListUtils.ts

  Lines 990 to 992 in a7429bc

  	function sortCategories(categories: Record<string, Category>): Category[] {
  	// Sorts categories alphabetically by name.
  	const sortedCategories = Object.values(categories).sort((a, b) => a.name.localeCompare(b.name));

  
  

  App/src/libs/OptionsListUtils.ts

  Lines 1054 to 1058 in a7429bc

  	function sortTags(tags: Record<string, PolicyTag | SelectedTagOption> | Array<PolicyTag | SelectedTagOption>) {
  	const sortedTags = Array.isArray(tags) ? tags : Object.values(tags);
  	// Use lodash's sortBy to ensure consistency with oldDot.
  	return lodashSortBy(sortedTags, 'name', localeCompare);

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

• We need to find the proper sorting method and use it in the above positions. I think the sorting method:
  

  App/src/libs/OptionsListUtils.ts

  Lines 1054 to 1059 in a7429bc

  	function sortTags(tags: Record<string, PolicyTag | SelectedTagOption> | Array<PolicyTag | SelectedTagOption>) {
  	const sortedTags = Array.isArray(tags) ? tags : Object.values(tags);
  	// Use lodash's sortBy to ensure consistency with oldDot.
  	return lodashSortBy(sortedTags, 'name', localeCompare);
  	}

  is the best because it was handled to match this requirement.
• Based on the above choice, below is the implement steps:

1. Update:
   

   App/src/libs/OptionsListUtils.ts

   Line 992 in a7429bc

   const sortedCategories = Object.values(categories).sort((a, b) => a.name.localeCompare(b.name));

   
   to:

    const sortedCategories = lodashSortBy(Object.values(categories), 'name', localeCompare);

2. Update:
   

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

   Lines 85 to 86 in a7429bc

   	Object.values(policyCategories ?? {})
   	.sort((a, b) => localeCompare(a.name, b.name))

   
   to:

            lodashSortBy(Object.values(policyCategories ?? {}), 'name', localeCompare).map((value) => {

3. Update:
   

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

   Lines 92 to 93 in a7429bc

   	return Object.values(policyTagLists[0]?.tags ?? {})
   	.sort((tagA, tagB) => localeCompare(tagA.name, tagB.name))

   
   to:

        return lodashSortBy(Object.values(policyTagLists[0]?.tags ?? {}), 'name', localeCompare).map((tag) => ({

[VictoriaExpensify]

I agree this is a bug that should be fixed, but I want to chat with the team about the desired behaviour here. I think Expensify Classic default everything to be capitalised and I have never come across anyone who wasn't happy with this, so I wonder if that is the best way to resolve the issue.

[VictoriaExpensify]

Alright, tested this in OldDot and it is inconsistent there, too 😅

I think we should get some design input on this one.

[VictoriaExpensify]

Personally, I can't think of any reason why you would have a need for upper and lower case categories and tags. I kind of think we should default these all to be capitalised and, that way, you won't end up with two with the same name.

[VictoriaExpensify]

Hmm actually, I would sorry this would break something with our integrations since Tags and Categories can be imported from there.

Generally, when listed alphabetically, the word with the capital letter comes first. So let's keep the platform consistent with that standard

[melvin-bot]

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

[melvin-bot]

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

[ishpaul777]

We have standardized on using the native Array instance methods instead of lodash methods for objects and collections. As the vast majority of code is written in TypeScript, we can safely use the native methods.

Quoting TS style guide we should prefer native Array instance methods instead of lodash

if we are ok with using lodash for sorting to maintain consistency with olddot, then we can assign @dominictb as they proposed it first

---

otherwhise nothing wrong with @cretadn22's proposal and use localeCompare(a.name, b.name)) in sortCategories and sortTags that should be enough.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @chiragsalian, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[dominictb]

@chiragsalian This bug is about "The tag and category lists lack consistent alphabetical order", so I think we need to fix the tags list as well, not just category

[ishpaul777]

thanks for pointing that out @dominictb, you are correct! I have updated my recomendation 👍

[dominictb]

@ishpaul777 This proposal was updated since 11hrs ago with the change that apply to tags list, that did not exist before.

Can you help check again?

[ishpaul777]

yes, i did check that i recommended @cretadn22 as they are the only one that propose to use localeCompare(a.name, b.name)) since you are the first that mention to update tag sorting (more important) i'll give you the first dibs 👍

[chiragsalian]

Thanks for the discussion, let's go with @dominictb's proposal and use lodashSortBy. When using it can you add a comment explaining why we are using lodash with a link to this so that its not forgotten. Feel free to create a PR.

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @dominictb 🎉 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 📖

[dominictb]

PR #45236 is ready

[melvin-bot]

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

[melvin-bot]

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

• fix The tag and category lists lack consistent alphabetical order #45236

If no regressions arise, payment will be issued on 2024-08-01. 🎊

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

• @ishpaul777 requires payment automatic offer (Reviewer)
• @dominictb requires payment automatic offer (Contributor)

[melvin-bot]

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:

• [@ishpaul777] The PR that introduced the bug has been identified. Link to the PR:
• [@ishpaul777] 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:
• [@ishpaul777] 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:
• [@ishpaul777] Determine if we should create a regression test for this bug.
• [@ishpaul777] 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.
• [@VictoriaExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[chiragsalian]

Not overdue melvin, on hold for payment

[VictoriaExpensify]

@ishpaul777 - I'll organise payment once you have complete the checklist

[ishpaul777]

[@ishpaul777] The PR that introduced the bug has been identified. Link to the PR: #37704
[@ishpaul777] 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/37704/files#r1704192128
[@ishpaul777] 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: Not required
[@ishpaul777] Determine if we should create a regression test for this bug. - No need
[@ishpaul777] 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. N/A

[melvin-bot]

@chiragsalian, @VictoriaExpensify, @ishpaul777, @dominictb Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[VictoriaExpensify]

Payment Summary:

Contributor: @dominictb paid $250 [via Upwork](Upwork job)
Contributor+: @ishpaul777 paid $250 [via Upwork](Upwork job)

Thanks for your work on this bug!