[HOLD for payment 2024-12-17] [$250] mWeb - Category - Categories imported are disabled

[IuliiaHerets]

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: 9.0.61-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings
3. Tap category
4. Tap on 3 dots on top
5. Import the below file

Expected Result:

Categories imported must be shown as enabled.

Actual Result:

Categories imported are shown as disabled.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6663366_1731473053062!Applausecard_s_Workspace_categories.csv

Bug6663366_1731472895825.Screenrecorder-2024-11-13-10-07-27-196.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021858671038820315324
• Upwork Job ID: 1858671038820315324
• Last Price Increase: 2024-11-26
• Automatic offers:
• huult | Contributor | 105110019

Issue Owner

Current Issue Owner: @alexpensify

[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.

[NJ-2020]

Proposal

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

mWeb - Category - Categories imported are disabled

What is the root cause of that problem?

It's because after we upload the spreadsheet, the enabled value column return value boolean instead of string
So since we check if the enabled column is equal to true it will return false

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

Line 100 in 4d9be4e

enabled: categoriesEnabledColumn !== -1 ? categoriesEnabled?.[containsHeader ? index + 1 : index] === 'true' : true,

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

We should convert the enabled column value to string

return {
    name,
    // enabled: categoriesEnabledColumn !== -1 ? categoriesEnabled?.[containsHeader ? index + 1 : index] === 'true' : true,
    enabled: categoriesEnabledColumn !== -1 ? categoriesEnabled?.[containsHeader ? index + 1 : index]?.toString()  === 'true' : true,

Result

Screen.Recording.2024-11-13.at.04.35.23.mov

What alternative solutions did you explore? (Optional)

[huult]

Edited by proposal-police: This proposal was edited at 2024-11-13 14:32:39 UTC.

Proposal

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

Categories imported are disabled

What is the root cause of that problem?

After we read the CSV spreadsheet into JSON, the type of the 'enable' field is returned as boolean data

App/src/components/ImportSpreadsheet.tsx

Lines 94 to 97 in 8d3f1db

	const data = XLSX.utils.sheet_to_json(worksheet, {header: 1, blankrows: false});
	setSpreadsheetData(data as string[][])
	.then(() => {
	Navigation.navigate(goTo);

The condition check for enable will be false because we are checking for the string 'true', which is a boolean as a string

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

Line 100 in 1dd6f99

enabled: categoriesEnabledColumn !== -1 ? categoriesEnabled?.[containsHeader ? index + 1 : index] === 'true' : true,

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

To fix this issue, we should convert the data in the cell to a string type to match the expected type and the current logic check. We should use this approach to fix any mismatches, and for the rest of the fields, we should force the return to be of type string[][].

// src/components/ImportSpreadsheet.tsx#L96
            .then((arrayBuffer) => {
                const workbook = XLSX.read(new Uint8Array(arrayBuffer), {type: 'buffer'});
                const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                const data = XLSX.utils.sheet_to_json(worksheet, {header: 1, blankrows: false});
+                const convertedData = data.map((row) => row.map((cell) => (typeof cell === 'string' ? cell : String(cell))));

-                setSpreadsheetData(data as string[][])
+                setSpreadsheetData(convertedData as string[][])
                    .then(() => {
                        Navigation.navigate(goTo);
                    })
                    .catch(() => {
                        setUploadFileError(true, 'spreadsheet.importFailedTitle', 'spreadsheet.invalidFileMessage');
                    });
            })

POC

Screen.Recording.2024-11-13.at.21.24.41.mov

What alternative solutions did you explore? (Optional)

The main solution fixes the issue where the fields return the wrong data type for all entries. If we want to focus only on enable, it can be changed like this:

// src/pages/workspace/categories/ImportedCategoriesPage.tsx#L93
-      const categoriesEnabled = categoriesEnabledColumn !== -1 ? spreadsheet?.data[categoriesEnabledColumn].map((enabled) => enabled) : [];
+      const categoriesEnabled =
+                  categoriesEnabledColumn !== -1 ? spreadsheet?.data[categoriesEnabledColumn].map((enabled) => (typeof enabled === 'string' ? enabled : String(enabled))) : [];

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@getusha, when you get a chance, please review these proposals and identify whether one will fix the issue. Thank you!

[cretadn22]

Proposal

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

Category - Categories imported are disabled

What is the root cause of that problem?

It appears that the category file associated with this issue was exported from another source, resulting in the enable field being saved as a boolean type. Typically, when exporting categories on Expensify, all data in the file should be stored as string type.

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

Line 100 in f77087f

enabled: categoriesEnabledColumn !== -1 ? categoriesEnabled?.[containsHeader ? index + 1 : index] === 'true' : true,

This discrepancy causes the above condition to not match and the enable field is stored as false.

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

When importing a spreadsheet, we should ensure that all data is converted to string type exclude null or undefined values

App/src/components/ImportSpreadsheet.tsx

Lines 94 to 97 in 8d3f1db

	const data = XLSX.utils.sheet_to_json(worksheet, {header: 1, blankrows: false});
	setSpreadsheetData(data as string[][])
	.then(() => {
	Navigation.navigate(goTo);

 const stringData = data.map(row => row.map(cell => (cell !== null && cell !== undefined ? String(cell) : cell)));

Please note: If we don’t exclude null and undefined values, they will be saved as strings, such as 'null' and 'undefined'. This could potentially break the UI and result in unexpected behavior. My approach is largely similar to the proposal above; however, I believe it offers significant improvements and mitigates many risks, particularly because ImportSpreadsheet is utilized in several other places.

What alternative solutions did you explore? (Optional)

[getusha]

Why convert it to string if it's always a boolean, can't we just use that?

[cretadn22]

Typically, when exporting categories on Expensify, all data in the file should be stored as string type.

Therefore, when importing the category file, we handle all data to string type

cc @getusha

[NJ-2020]

Yes we can also check if the value is equal to boolean as well i.e ... === true but as you can see the type of spreadsheet data is number, string

[huult]

@getusha We can handle boolean, number, or other types. However, with the current logic, we are handling string[][]. To align the data with the expected type, we should convert it accordingly to minimize changes and updates in the component logic. Therefore, I believe converting the data is a better approach for this ticket.

App/src/components/ImportSpreadsheet.tsx

Line 97 in c18812a

setSpreadsheetData(data as string[][])

[melvin-bot]

@alexpensify, @getusha Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@alexpensify @getusha this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[alexpensify]

@getusha when you get a chance, can you please review the recent feedback? Thanks!

[melvin-bot]

@alexpensify, @getusha Still overdue 6 days?! Let's take care of this!

[getusha]

Reviewing

[getusha]

It makes sense to fix it in ImportSpreadsheet since there are other pages like ImportedTagsPage where the issue could possibly occur. @huult's proposal looks good to me
🎀 👀 🎀 C+ Reviewed.

[melvin-bot]

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

[huult]

@getusha Could you review the pull request?

[alexpensify]

@getusha keep us posted if you are unable to review this one. Thanks!

[huult]

@alexpensify This pull request for this ticket has already been merged into the main branch.

[alexpensify]

Whoops, waiting for this one to go into Production. Thanks for flagging!

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

• fix categories imported are disabled #53246

If no regressions arise, payment will be issued on 2024-12-17. 🎊

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

• @huult requires payment automatic offer (Contributor)
• @getusha requires payment through NewDot Manual Requests

[melvin-bot]

@getusha @alexpensify @getusha The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[alexpensify]

Payment Summary:

Contributor: @huult owed $250 via Upwork [LINK]
Contributor+: @getusha owed $250 via NewDot

Upwork Job: https://www.upwork.com/jobs/~021858671038820315324

[alexpensify]

Heads up, I will be offline until Wednesday, December 18, 2024, and will not actively watch over this GitHub during that period.

If this GitHub requires an urgent update, please ask for help in the #expensify-open-source Slack Room. If the inquiry can wait, I'll review it when I return online.

---

I will complete the Upwork payment process when I'm back online.

[alexpensify]

All set here, I've completed the payment process in Upwork for @huult.

@getusha - please submit a request via NewDot - thanks!

Payment Summary: #52466 (comment)

[garrettmknight]

$250 approved for @getusha