[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