[HOLD for payment 2024-10-29] [$250] Import categories - Dropdown button does not match the selection in the dropdown list

[IuliiaHerets]

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.45-2
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh0410009@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings > Categories.
3. Click 3-dot menu > Import spreadsheet.
4. Upload a csv containing two column data.
5. Click on the dropdown of the first item.

Expected Result:

The selection in the dropdown should match what is displayed on the dropdown button.

Actual Result:

The dropdown button shows "Enabled", but the selection in the dropdown is "Ignore".

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6626273_1728232032481.20241007_002106.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843456236485457533
• Upwork Job ID: 1843456236485457533
• Last Price Increase: 2024-10-08
• Automatic offers:
• ZhenjaHorbach | Reviewer | 104404493
• Nodebrute | Contributor | 104404495

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

[IuliiaHerets]

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

[IuliiaHerets]

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

[Nodebrute]

Edited by proposal-police: This proposal was edited at 2024-10-06 20:13:28 UTC.

Proposal

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

Dropdown button does not match the selection in the dropdown list

What is the root cause of that problem?

This issue occurs not only with categories but also with tags. In this case, the defaultSelectedIndex will return -1 if the index is not found.

App/src/components/ImportColumn.tsx

Line 165 in 6d8e739

const defaultSelectedIndex = columnRoles.findIndex((item) => item.value === colName);

And then we pass this defaultSelectedIndex here, which is incorrect we should pass index 0 which is index of ignore

App/src/components/ImportColumn.tsx

Line 204 in 6d8e739

defaultSelectedIndex={defaultSelectedIndex}

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

In cases where the defaultSelectedIndex is -1 we should pass 0 here

App/src/components/ImportColumn.tsx

Line 204 in 6d8e739

defaultSelectedIndex={defaultSelectedIndex}

We can do something like this (pseudo-code)

    const defaultSelectedIndex = columnRoles.findIndex((item) => item.value === colName);
    const finalIndex = defaultSelectedIndex !== -1 ? defaultSelectedIndex : 0;

and then we can pass this finalIndex here

App/src/components/ImportColumn.tsx

Line 204 in 6d8e739

defaultSelectedIndex={defaultSelectedIndex}

Some cleanup may be required, which we can address in the PR.
Result

Screen.Recording.2024-10-07.at.1.13.48.AM.mov

Note

There are multiple ways to achieve the same result, but I'm keeping the proposal simple by avoiding excessive options.

What alternative solutions did you explore? (Optional)

Even though the index of 'ignore' is consistently 0 across all pages, we can implement additional checks to make this more error-proof.

    const defaultSelectedIndex = columnRoles.findIndex((item) => item.value === colName);
    const finalIndex = defaultSelectedIndex !== -1 ? defaultSelectedIndex : columnRoles.findIndex(item => item.value === 'ignore');

[Nodebrute]

Proposal Updated
Added POC

[twilight2294]

Proposal

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

Dropdown button does not match the selection in the dropdown list

What is the root cause of that problem?

The dropdown button highlight is selected based on the isSelected prop:

App/src/components/ImportColumn.tsx

Lines 155 to 160 in 134bbd0

	const options: Array<DropdownOption<string>> = columnRoles.map((item) => ({
	text: item.text,
	value: item.value,
	description: item.description ?? (item.isRequired ? translate('common.required') : undefined),
	isSelected: spreadsheet?.columns?.[columnIndex] === item.value,
	}));

But when we get the defaultSelectedIndex, we are essentially comparing against the colName which is derived from column hence we always get -1 as the return value. This will display the last option in the list as the header value of the dropdown.

App/src/components/ImportColumn.tsx

Line 165 in 6d8e739

const defaultSelectedIndex = columnRoles.findIndex((item) => item.value === colName);

the reason this check fails is that the values of colName are:

Hence they will never match with the values of columnRoles:

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

We should instead get the value from options/ columnRoles itself by checking if isSelected is set to true and if yes them we should show that option as the header:

    const defaultSelectedIndex = options.findIndex((item) => item.isSelected === true)

We should fix this in other places where csv import is used, for cases where none is selected we shouldn't display any value for the header, we should consult with design team for the exact behaviour for this case

Screen.Recording.2024-10-07.at.3.07.18.AM.mov

What alternative solutions did you explore? (Optional)

[mkzie2]

Proposal

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

Import categories - Dropdown button does not match the selection in the dropdown list

What is the root cause of that problem?

This bug happens with the column that returns the columnName as empty in the default case here

It leads the defaultSelectedIndex to be -1 which causes the display text in the dropdown button to be different from the selected option in the drop-down menu

App/src/components/ImportColumn.tsx

Line 165 in 7981265

const defaultSelectedIndex = columnRoles.findIndex((item) => item.value === colName);

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

For the default case, we should return CONST.CSV_IMPORT_COLUMNS.IGNORE here instead of an empty string.

default:
    attribute = CONST.CSV_IMPORT_COLUMNS.IGNORE;
    break;

App/src/components/ImportColumn.tsx

Lines 114 to 116 in 7981265

	default:
	break;
	}

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[trjExpensify]

This is a wave-control project, moving.

[ZhenjaHorbach]

I will check proposals today or tomorrow !

[ZhenjaHorbach]

@Nodebrute @twilight294 @mkzie2
Thanks for proposals !

@Nodebrute @mkzie2
Your proposals look similar (Have the same result)
But I'm not sure that we should stick to a specific value
Because if this value will be missing in a list, issue will be reproduced
I know that now we have Ignore on every Options list at the moment (But I won't be surprised if something changes in the future)
So I would prefer some more flexible solution

@twilight294
Your proposal looks promising
But unfortunately it doesn't work for me
Could you please provide more code?

[Nodebrute]

@ZhenjaHorbach, @mkzie2's solution will not work. You can try importing this file in the tags import section, and you'll see that the error will still be reproducible with the GL code value.
Categories-2024-09-10 17_10_20.413.csv

[Nodebrute]

@mkzie2's solution will not work because, in this case, the colName will return glcode.

App/src/components/ImportColumn.tsx

Line 34 in d6d3007

attribute = CONST.CSV_IMPORT_COLUMNS.GL_CODE;

And in this case, when we don't pass 'glcode' in the tags, it will return -1, thus reproducing the error.

App/src/components/ImportColumn.tsx

Line 165 in d6d3007

const defaultSelectedIndex = columnRoles.findIndex((item) => item.value === colName);

@ZhenjaHorbach I have proposed two solutions. The first is to fallback to the 0 index. Let’s assume we don’t have ignore in the future, which I believe will never happen😅, but at the very least, we will have a default value at the 0 index. So, instead of falling back to ignore, we can always fallback to the 0 index.

My second solution, where we can find the index of ignore instead of falling back to 0, is quite reliable. When we set the spreadsheet data, we use ignore, so ignore will remain our default for a long time.

App/src/libs/actions/ImportSpreadsheet.ts

Line 13 in d6d3007

acc[colIndex] = CONST.CSV_IMPORT_COLUMNS.IGNORE;

[Nodebrute]

@ZhenjaHorbach Sorry for the message overload! I just checked OD as well, and it seems ignore is the default for everything there too. Let me know what you think about the points above.

[mkzie2]

@ZhenjaHorbach Here is why I propose adding the ignore as a fallback in the findColumnName function.

When we import a CSV file, we save the spreadsheet data, and all column names are ignore by default. Then the column name will be updated based on the value in findColumnName function.

App/src/libs/actions/ImportSpreadsheet.ts

Lines 12 to 15 in f0be8a7

	data.at(0)?.reduce((acc: Record<number, string>, _, colIndex) => {
	acc[colIndex] = CONST.CSV_IMPORT_COLUMNS.IGNORE;
	return acc;
	}, {}) ?? {};

It will not update in the case empty string is returned because we already have the check here. But the defaultSelectedIndex is also used to focus and display the correct column value then it makes sense to return ignore by default

App/src/components/ImportColumn.tsx

Lines 167 to 174 in f0be8a7

	useEffect(() => {
	if (defaultSelectedIndex === -1) {
	return;
	}
	setColumnName(columnIndex, colName);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- we don't want this effect to run again
	}, []);

[twilight2294]

@twilight294
Your proposal looks promising
But unfortunately it doesn't work for me
Could you please provide more code?

oh my bad, actually we have to add extra type prop to DropdownOption here, Below is the test branch and a test csv with categories, do let me know if you have any more doubts:

CSV: Categories-2024-10-10 05_30_44.389.csv

Test PR: - #50542

[Nodebrute]

@twilight294 in your test branch you are using 0 as fallback, similar to my proposal.

Cc: @ZhenjaHorbach

[ZhenjaHorbach]

@mkzie2's solution will not work because, in this case, the colName will return glcode.

App/src/components/ImportColumn.tsx

Line 34 in d6d3007

attribute = CONST.CSV_IMPORT_COLUMNS.GL_CODE;

And in this case, when we don't pass 'glcode' in the tags, it will return -1, thus reproducing the error.

App/src/components/ImportColumn.tsx

Line 165 in d6d3007

const defaultSelectedIndex = columnRoles.findIndex((item) => item.value === colName);

@ZhenjaHorbach I have proposed two solutions. The first is to fallback to the 0 index. Let’s assume we don’t have ignore in the future, which I believe will never happen😅, but at the very least, we will have a default value at the 0 index. So, instead of falling back to ignore, we can always fallback to the 0 index.

My second solution, where we can find the index of ignore instead of falling back to 0, is quite reliable. When we set the spreadsheet data, we use ignore, so ignore will remain our default for a long time.

App/src/libs/actions/ImportSpreadsheet.ts

Line 13 in d6d3007

acc[colIndex] = CONST.CSV_IMPORT_COLUMNS.IGNORE;

Hmmmm
Yes
Your alternative solution looks interesting
And I think it makes sense to use ignore as the default value in case of something

[ZhenjaHorbach]

I think this proposal make sense in which many details are taken into account

So I'm happy to go with this proposal
🎀👀🎀 C+ reviewed

[melvin-bot]

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

[twilight2294]

@ZhenjaHorbach we should always compare with options and not columnRoles, as outlined in my proposal here.

c.c. @mjasikowski

[melvin-bot]

📣 @ZhenjaHorbach 🎉 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]

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

[mkzie2]

@ZhenjaHorbach Can you please check again? We should update findColumnName function by returning the default value correctly instead of having a fallback like the selected proposal, it doesn't fix the RCA. I also have an explanation here

const defaultSelectedIndex = columnRoles.findIndex((item) => item.value === colName);
const finalIndex = defaultSelectedIndex !== -1 ? defaultSelectedIndex : columnRoles.findIndex(item => item.value === 'ignore');

[Nodebrute]

@mkzie2, your proposal didn't work.

@ZhenjaHorbach, @mkzie2's solution will not work. You can try importing this file in the tags import section, and you'll see that the error will still be reproducible with the GL code value. Categories-2024-09-10 17_10_20.413.csv

Here are the steps to test your proposal. You'll see that it doesn't fix the problem.

[Nodebrute]

Pr will be ready in few hours

[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.51-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix import dropdown #50726

If no regressions arise, payment will be issued on 2024-10-29. 🎊

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

• @ZhenjaHorbach requires payment automatic offer (Reviewer)
• @Nodebrute 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:

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

[kadiealexander]

Reassigning for someone to handle payment as I'm OOO for the next two weeks.

[melvin-bot]

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