[HOLD for payment 2024-08-19] [$250] Report fields - List values are not arranged in 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.14-2
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
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Report fields
3. Click Add field
4. Select List from Type
5. Go to List values and add a few list values

Expected Result:

The list values will be arranged in alphabetical order

Actual Result:

The list values are arranged in the order of time added

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

Bug6557073_1722326131653.20240730_155335.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a0087963c0b045ee
• Upwork Job ID: 1819053827579434361
• Last Price Increase: 2024-08-01
• Automatic offers:
• paultsimura | Reviewer | 103375714
• cretadn22 | Contributor | 103375715

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

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

[lanitochka17]

@isabelastisser 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

[lanitochka17]

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

[cretadn22]

Proposal

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

List values are not arranged in alphabetical order

What is the root cause of that problem?

App/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx

Line 87 in d4104a7

const data = listValues.map<ValueListItem>((value, index) => ({

We don't add sort function for listValues

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

Add sort function in alphabetical order

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

The same problem also happen in report field page

We also need to add sort function

App/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

Line 102 in d4104a7

data: Object.values(filteredPolicyFieldList).map((reportField) => ({

App/src/pages/workspace/reportFields/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx

Lines 20 to 34 in 3722b22

	const listValueSections = useMemo(
	() => [
	{
	data: Object.values(listValues ?? {})
	.filter((listValue, index) => !disabledOptions[index])
	.map((listValue) => ({
	keyForList: listValue,
	value: listValue,
	isSelected: value === listValue,
	text: listValue,
	})),
	},
	],
	[value, listValues, disabledOptions],
	);

And other places (we need to find out while implementing PR)

What alternative solutions did you explore? (Optional)

[FitseTLT]

Proposal

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

Report fields - List values are not arranged in alphabetical order

What is the root cause of that problem?

We haven't sorted the list based on the name here

App/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx

Lines 82 to 96 in 3722b22

	const data = listValues.map<ValueListItem>((value, index) => ({
	value,
	index,
	text: value,
	keyForList: value,
	isSelected: selectedValues[value],
	enabled: !disabledListValues[index] ?? true,
	pendingAction: reportFieldID ? policy?.fieldList?.[ReportUtils.getReportFieldKey(reportFieldID)]?.pendingAction : null,
	rightElement: (
	<ListItemRightCaretWithLabel
	shouldShowCaret={false}
	labelText={disabledListValues[index] ? translate('workspace.common.disabled') : translate('workspace.common.enabled')}
	/>
	),
	}));

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

We need to sort it as

const data = listValues
            .sort((a, b) => localeCompare(a.toLocaleLowerCase, b.toLocaleLowerCase()))
            .map<ValueListItem>((value, index) => ({
                value,
                index,
                text: value,
                keyForList: value,
                isSelected: selectedValues[value],
                enabled: !disabledListValues[index] ?? true,
                pendingAction: reportFieldID ? policy?.fieldList?.[ReportUtils.getReportFieldKey(reportFieldID)]?.pendingAction : null,
                rightElement: (
                    <ListItemRightCaretWithLabel
                        shouldShowCaret={false}
                        labelText={disabledListValues[index] ? translate('workspace.common.disabled') : translate('workspace.common.enabled')}
                    />
                ),
            }));

We need to apply sorting on other places we use list field like here

App/src/pages/workspace/reportFields/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx

Lines 20 to 34 in 3722b22

	const listValueSections = useMemo(
	() => [
	{
	data: Object.values(listValues ?? {})
	.filter((listValue, index) => !disabledOptions[index])
	.map((listValue) => ({
	keyForList: listValue,
	value: listValue,
	isSelected: value === listValue,
	text: listValue,
	})),
	},
	],
	[value, listValues, disabledOptions],
	);

In EditDropdownFieldpage

What alternative solutions did you explore? (Optional)

[FitseTLT]

Updated to add other places we need to apply the sorting

[cretadn22]

Update proposal to cover other similar bug

[melvin-bot]

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