[$250] RHN throws error if tags are deleted by admin while member is selecting.

[carlosmiceli]

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:v9.0.30-19
**Reproducible in staging?:Y
**Reproducible in production?:Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
**Issue reported by:Carlos Miceli
Slack conversation:

Action Performed:

• Logged into NewDot as the admin of a workspace in one window and a member in another.
• Go to workspace settings as admin.
• Go to the tags section
• Make sure there are tags on the workspaces
• As a member, open a report's tags in that workspace.
• As an admin, delete all of the tags.

Expected Result:

There should be an "there are no tags yet" message.

Actual Result:

Workspace member sees an error view in the RHN instead.

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

tags.error.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021833231500737320464
• Upwork Job ID: 1833231500737320464
• Last Price Increase: 2024-09-16
• Automatic offers:
• FitseTLT | Contributor | 103987322

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

Triggered auto assignment to @abekkala (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]

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

[melvin-bot]

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

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-09-09 19:59:01 UTC.

Proposal

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

RHN throws error if tags are deleted by admin while member is selecting.

What is the root cause of that problem?

We show not found page when there are non enabled options here

App/src/pages/iou/request/step/IOURequestStepTag.tsx

Lines 80 to 81 in 1b479b0

	const shouldShowTag = ReportUtils.isReportInGroupPolicy(report) && (transactionTag || OptionsListUtils.hasEnabledTags(policyTagLists));

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

1. We should implement empty state component as we did for category step page here
   

   App/src/pages/iou/request/step/IOURequestStepCategory.tsx

   Lines 171 to 174 in 1b479b0

   	{shouldShowEmptyState && (
   	<View style={[styles.flex1]}>
   	<WorkspaceEmptyStateSection
   	shouldStyleAsCard={false}

   
   and display the empty section when shouldShowTag is false but we should remove !shouldShowTag condition from shouldShowNotFoundPage

const isLoading = !isOffline && policyTags === undefined;
const shouldShowEmptyState = !isLoading && !shouldShowTag;

(We might display not found page for non isReportInGroupPolicy instead of empty section as it might make more sense, we can apply the same change in category page too)
and display tag picker only when !shouldShowEmptyState && !isLoading and show loading indicator when isLoading
We should also use a new emptyTag title and subtitle copy

2. We should also set up edit tag button equivalent to edit category button (with the respective copy text and route to navigate to) here
   

   App/src/pages/iou/request/step/IOURequestStepCategory.tsx

   Lines 180 to 197 in 1b479b0

   	{PolicyUtils.isPolicyAdmin(policy) && (
   	<FixedFooter style={[styles.mtAuto, styles.pt5]}>
   	<Button
   	large
   	success
   	style={[styles.w100]}
   	onPress={() =>
   	Navigation.navigate(
   	ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(
   	policy?.id ?? '-1',
   	ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, report?.reportID ?? '-1', backTo, reportActionID),
   	),
   	)
   	}
   	text={translate('workspace.categories.editCategories')}
   	pressOnEnter
   	/>
   	</FixedFooter>

   
   The button will appear if the user is an admin

3. To allow the user to easily create tags and navigate back to money request flow, we can create a similar page to SETTINGS_CATEGORIES_ROOT with the WorkspaceTagsPage component (as we did for category by linking the same WorkspaceCategoriesPage in MoneyRequestModalStackNavigator here )

4. We will add tag root screen to SCREENS.RIGHT_MODAL.MONEY_REQUEST and link it to a route like settings/:policyID/tags and add the screen in MoneyRequestModalStackNavigator (WorkspaceTagsPage )

5. We will pass MONEY_REQUEST_STEP_TAG route to backTo to allow the user to come back to the money request tag edit flow ROUTES.MONEY_REQUEST_STEP_TAG

What alternative solutions did you explore? (Optional)

[cretadn22]

I provided a simple and correct proposal

Proposal

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

RHN throws error if tags are deleted by admin while member is selecting

What is the root cause of that problem?

We haven't added Empty View to IOURequestStepTag

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

Idea: We should show the empty view with the Edit button exclusively for admins, following the same approach we used for the category page

App/src/pages/iou/request/step/IOURequestStepCategory.tsx

Lines 171 to 199 in 968b610

	{shouldShowEmptyState && (
	<View style={[styles.flex1]}>
	<WorkspaceEmptyStateSection
	shouldStyleAsCard={false}
	icon={Illustrations.EmptyStateExpenses}
	title={translate('workspace.categories.emptyCategories.title')}
	subtitle={translate('workspace.categories.emptyCategories.subtitle')}
	containerStyle={[styles.flex1, styles.justifyContentCenter]}
	/>
	{PolicyUtils.isPolicyAdmin(policy) && (
	<FixedFooter style={[styles.mtAuto, styles.pt5]}>
	<Button
	large
	success
	style={[styles.w100]}
	onPress={() =>
	Navigation.navigate(
	ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(
	policy?.id ?? '-1',
	ROUTES.MONEY_REQUEST_STEP_CATEGORY.getRoute(action, iouType, transactionID, report?.reportID ?? '-1', backTo, reportActionID),
	),
	)
	}
	text={translate('workspace.categories.editCategories')}
	pressOnEnter
	/>
	</FixedFooter>
	)}
	</View>

Note: In IOURequestStepTag, the isLoading variable is unnecessary because we don't fetchData as we do in IOURequestStepCategory

Step to Implement:

1. Eliminate the shouldShowTag condition from the shouldShowNotFoundPage
2. Incorporate the following code into IOURequestStepTagStep

             {!shouldShowTag && (
                <View style={[styles.flex1]}>
                    <WorkspaceEmptyStateSection
                        ......
                    />
                    {PolicyUtils.isPolicyAdmin(policy) && (
                        <FixedFooter style={[styles.mtAuto, styles.pt5]}>
                           .....
                        </FixedFooter>
                    )}
                </View>
            )}
            {shouldShowTag && (
                Current Code
            )}

What alternative solutions did you explore? (Optional)

[FitseTLT]

Sorry forgot to notify Updated

But note that my last update is hours before the other proposal above

[parasharrajat]

Ok. thanks everyone for the proposal and suggestions. I am inclined to implement a similar page like category selection.

@FitseTLT Looks like you are suggesting a couple more changes and some of them are enhancements.

Could you please structure your proposal in parts and clean it a bit?