Add toggle for enable/disable to each category row in `Categories` page of workspace settings

[jamesdeanexpensify]

Problem This has been brought up pretty regularly (most recently here), but many members are getting confused with the current design of the Categories page in NewDot. More specifically, they think that checking the box to the left of each category = "enabling" the category, when in fact it does nothing at all.

Solution Make it super clear as to whether a category is enabled/disabled and also make it super clear how to take that action if you want to change it. We'll do that by adding a toggle in the Status column - if toggled to the left, the category is disabled. If right, enabled.

Screenshot

[melvin-bot[bot]]

Triggered auto assignment to @CortneyOfstad (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot[bot]]

:warning: It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time :warning:

[melvin-bot[bot]]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[github-actions[bot]]

zoeb Your proposal will be dismissed because you did not follow the proposal template.

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-12-13 14:31:53 UTC.

Proposal

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

Add a toggle to enable/disable each category row in the Categories page of workspace settings.

What is the root cause of that problem?

This is a new feature request.

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

To enhance the Categories page and ensure consistency across related pages:

1. Update the Categories Page

Modify the rightElement here

With this switch also we need to add this function that triggers the on press effect

Code Changes

const updateWorkspaceRequiresCategory = useCallback(
    (value: boolean, categoryName: string) => {
        Category.setWorkspaceCategoryEnabled(policyId, {[categoryName]: {name: categoryName, enabled: value}});
    },
    [policyId],
);

const categoryList = useMemo(
    () =>
        lodashSortBy(Object.values(policyCategories ?? {}), 'name', localeCompare).map((value) => {
            const isDisabled = value.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
            return {
                text: value.name,
                keyForList: value.name,
                isSelected: !!selectedCategories[value.name] && canSelectMultiple,
                isDisabled,
                pendingAction: value.pendingAction,
                errors: value.errors ?? undefined,
                rightElement: (
                    <Switch
                        isOn={value.enabled}
                        accessibilityLabel={translate('workspace.categories.enableCategory')}
                        onToggle={(newValue) => updateWorkspaceRequiresCategory(newValue, value.name)}
                    />
                ),
            };
        }),
    [policyCategories, selectedCategories, canSelectMultiple, translate, updateWorkspaceRequiresCategory],
);

2. Update the Tags Page

• Modify the rightElement here to use this switch Additionally, copy the updateWorkspaceTagEnabled function for the on toggle effect.
• for mutlilevel tags we should update the workspace tags page here to use this switch additionally we need to update the WorkspaceViewTagsPage here to use the switch as well

3. Update the Taxes Page

• Apply the same toggle functionality to the Taxes page here for consistency across all related pages.

4. Update the Distance rates Page

• Apply the same toggle functionality to the Taxes page here with this switch and the same on toggle function

5. Update the List values Page

• Optional: we can also do the same in the ReportFieldsListValuesPage

6. also as mentioned in the other proposal, we may need to add the isDisabled prop in case the pendingAction is delete. this can be tested in the offline tests in the PR
7. for code optimization we can move the shared on toggle code to a util function and call it when needed

POC

https://github.com/user-attachments/assets/c80c73d6-f158-423b-ad6d-6781f603277f

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

None.

[dannymcclain]

@CortneyOfstad / @jamesdeanexpensify can we label this external?

[melvin-bot[bot]]

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

[jamesdeanexpensify]

Done!

[melvin-bot[bot]]

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

[akinwale]

@abzokhattab's proposal is adequate here.

🎀👀🎀 C+ reviewed.

[melvin-bot[bot]]

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

[shubham1206agra]

Edited by proposal-police: This proposal was edited at 2024-12-13 15:09:42 UTC.

Proposal

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

Add toggle for enable/disable to each category row in Categories page (Maybe Tags too) of workspace settings

What is the root cause of that problem?

Feature Request

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

Replace rightElement

https://github.com/Expensify/App/blob/e7efb7238544a3b44ad1fa18d9f5185d0b344267/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L119

with

<Switch
    isOn={value.enabled}
    accessibilityLabel={translate('workspace.categories.enableCategory')}
    onToggle={(newValue: boolean) => updateWorkspaceRequiresCategory(newValue, value.name)}
    disabled={isDisabled}
/>

And copy definition of updateWorkspaceRequiresCategory from https://github.com/Expensify/App/blob/faa48b605d708d7e8814e54fbf2b88a883c9c0c0/src/pages/workspace/categories/CategorySettingsPage.tsx#L112-L114

We can do the similar thing in Tags page. @Expensify/design can tell us whether we should do this for tags too.

Edit: As per https://github.com/Expensify/App/issues/53798#issuecomment-2541536630, we are going to cover Categories, Tags, Distance Rates, and Taxes and maybe Report Field List View.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A since this is a UI change

What alternative solutions did you explore? (Optional)

NA

Result

Testing the offline view since above proposal did not account for that.

[akinwale]

The most recent proposal posted after I selected the initial proposal points out an issue with offline handling of the toggles, so I'll leave this for the internal engineer to decide which one is best to move forward with.

cc @grgia

[abzokhattab]

Another issue i found:

User is able to navigate back to deleted workspace when offline so i think this can be fixed in the same PR as well:

https://github.com/user-attachments/assets/a917715c-b51a-41bf-a5be-31f4a79e696b

[shubham1206agra]

@abzokhattab Thanks for the bug report. Let me report this in bugs channel. This should be solved separately.

[abzokhattab]

I think the fix is straight forward thats why i was referring to be fixed here. but sure as the reviewers decide

[shawnborton]

@jamesdeanexpensify I assume we want this done for the Tags page too?

[abzokhattab]

• @shawnborton I think that's a valid point we should keep both pages consistent i updated the proposal to cover this point.
• with that said, i think we should do the same in the taxes page as well .
• also what about theList values page, i think we should update it as well?

[abzokhattab]

Proposal updated

Updated my proposal with a detailed implementation to cover the 5 cases discussed here and here (Categories, Tags, Distance Rates, Taxes and list values)

[shawnborton]

Yeah, that all makes sense to me - again, let's see what @Expensify/design and @jamesdeanexpensify thinks but it seems reasonable to change this everywhere for consistency.

[shawnborton]

You probably need to also consider the case of multi-level tags too, right?

[grgia]

The most recent proposal posted after I selected the initial proposal points out an issue with offline handling of the toggles, so I'll leave this for the internal engineer to decide which one is best to move forward with.

@akinwale could you please take a look at the cases and updates since your review and give me an updated C+ review

[dannymcclain]

I initially thought the plan was to just implement it for Categories and see if it helped the problem, and then update the pattern for all the other pages that use a similar enable/disable pattern. But I'm not against just updating all of them in one go.

Edit: If we go that route, we need to consider: Categories, Tags, Distance Rates, and Taxes (let me know if I left any out!)

[shubham1206agra]

@akinwale I think these all flows will have similar change. We can take care of this in PR at once.

[jamesdeanexpensify]

Asking about updating to toggles elsewhere in Slack.

[melvin-bot[bot]]

@akinwale, @dannymcclain, @CortneyOfstad, @grgia Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[dannymcclain]

Alright we've decided in this thread to go ahead and make the this toggle change everywhere that follows this same pattern:

• Categories
• Tags
• Distance Rates
• Taxes

Any others that I forgot?

[abzokhattab]

I think List Values Page as well, no?

https://github.com/Expensify/App/issues/53798#issuecomment-2541498614

and i think also the WorkspaceViewTagsPage this page is enabled when we have dependant tags

[grgia]

Thank you @dannymcclain, could you take a look at the proposals @akinwale

[jamesdeanexpensify]

@akinwale let us know about the proposals when you can, thanks!