Expensify
[HOLD for payment 2024-12-17] [$250] mWeb - Category - Categories imported are disabled
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:
- Go to https://staging.new.expensify.com/home
- Go to workspace settings
- Tap category
- Tap on 3 dots on top
- 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
- [x] Android: mWeb Chrome
- [ ] iOS: Standalone
- [ ] iOS: HybridApp
- [ ] iOS: mWeb Safari
- [ ] MacOS: Chrome / Safari
- [ ] MacOS: Desktop
Screenshots/Videos
Bug6663366_1731473053062!Applausecard_s_Workspace_categories.csv
https://github.com/user-attachments/assets/cd7f6572-3e6e-46f9-b9c1-50cb5a47f6c5
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
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.
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
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
https://github.com/Expensify/App/blob/4d9be4eb2537b49fa6cf35135770cf3c6d62a1cd/src/pages/workspace/categories/ImportedCategoriesPage.tsx#L100
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
https://github.com/user-attachments/assets/bd361d44-aab6-4ce9-af2d-5ec9fe57f46c
What alternative solutions did you explore? (Optional)
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 https://github.com/Expensify/App/blob/8d3f1db0ef1b28c5ef9c03f251d9b9dc2adaed4e/src/components/ImportSpreadsheet.tsx#L94-L97
The condition check for enable will be false because we are checking for the string 'true', which is a boolean as a string https://github.com/Expensify/App/blob/1dd6f993f1e479d4eac6dd3de355510ed8257093/src/pages/workspace/categories/ImportedCategoriesPage.tsx#L100
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
https://github.com/user-attachments/assets/e8dda71f-57c0-4846-9f2a-3f52254bf97a
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))) : [];
Job added to Upwork: https://www.upwork.com/jobs/~021858671038820315324
Triggered auto assignment to Contributor-plus team member for initial proposal review - @getusha (External)
@getusha, when you get a chance, please review these proposals and identify whether one will fix the issue. Thank you!
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.
https://github.com/Expensify/App/blob/f77087f02a42e17e7da7420528cc51b54003ca61/src/pages/workspace/categories/ImportedCategoriesPage.tsx#L100
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
https://github.com/Expensify/App/blob/8d3f1db0ef1b28c5ef9c03f251d9b9dc2adaed4e/src/components/ImportSpreadsheet.tsx#L94-L97
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)
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
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
@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.
https://github.com/Expensify/App/blob/c18812ae3cac59025da0f6c8657750dfcb779a65/src/components/ImportSpreadsheet.tsx#L97
@alexpensify, @getusha Eep! 4 days overdue now. Issues have feelings too...
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@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!
@getusha when you get a chance, can you please review the recent feedback? Thanks!
@alexpensify, @getusha Still overdue 6 days?! Let's take care of this!
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.
Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.
📣 @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 📖
@alexpensify This pull request for this ticket has already been merged into the main branch.
Whoops, waiting for this one to go into Production. Thanks for flagging!
Reviewing label has been removed, please complete the "BugZero Checklist".
The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.73-8 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:
- https://github.com/Expensify/App/pull/53246
If no regressions arise, payment will be issued on 2024-12-17. :confetti_ball:
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
@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]
Payment Summary:
Contributor: @huult owed $250 via Upwork [LINK] Contributor+: @getusha owed $250 via NewDot
Upwork Job: https://www.upwork.com/jobs/~021858671038820315324
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.
All set here, I've completed the payment process in Upwork for @huult.
@getusha - please submit a request via NewDot - thanks!
Payment Summary: https://github.com/Expensify/App/issues/52466#issuecomment-2543451441