Merge pull request #41722 from nkdengineer/fix/41339

Go back to setting page after editing category/tag name

src/libs/actions/Policy.ts

@@ -3361,6 +3361,7 @@ function renamePolicyCategory(policyID: string, policyCategory: {oldName: string
                         pendingFields: {
                             name: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
                         },
+                        previousCategoryName: policyCategory.oldName,
                     },
                 },
             },
@@ -3673,6 +3674,7 @@ function renamePolicyTag(policyID: string, policyTag: {oldName: string; newName:
                                 pendingFields: {
                                     name: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
                                 },
+                                previousTagName: policyTag.oldName,
                             },
                         },
                     },

src/pages/workspace/categories/CategoryForm.tsx

@@ -60,7 +60,7 @@ function CategoryForm({onSubmit, policyCategories, categoryName, validateEdit}:
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>) => {
             onSubmit(values);
             Keyboard.dismiss();
-            Navigation.dismissModal();
+            Navigation.goBack();
         },
         [onSubmit],
     );

src/pages/workspace/categories/CategorySettingsPage.tsx

@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx, withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -34,14 +34,22 @@ type CategorySettingsPageOnyxProps = {
 
 type CategorySettingsPageProps = CategorySettingsPageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.CATEGORY_SETTINGS>;
 
-function CategorySettingsPage({route, policyCategories}: CategorySettingsPageProps) {
+function CategorySettingsPage({route, policyCategories, navigation}: CategorySettingsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {windowWidth} = useWindowDimensions();
     const [deleteCategoryConfirmModalVisible, setDeleteCategoryConfirmModalVisible] = useState(false);
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${route.params.policyID}`);
 
-    const policyCategory = policyCategories?.[route.params.categoryName];
+    const policyCategory =
+        policyCategories?.[route.params.categoryName] ?? Object.values(policyCategories ?? {}).find((category) => category.previousCategoryName === route.params.categoryName);
+
+    useEffect(() => {
+        if (policyCategory?.name === route.params.categoryName || !policyCategory) {
+            return;
+        }
+        navigation.setParams({categoryName: policyCategory?.name});
+    }, [route.params.categoryName, navigation, policyCategory]);
 
     if (!policyCategory) {
         return <NotFoundPage />;

src/pages/workspace/tags/EditTagPage.tsx

@@ -61,7 +61,7 @@ function EditTagPage({route, policyTags}: EditTagPageProps) {
                 Policy.renamePolicyTag(route.params.policyID, {oldName: currentTagName, newName: values.tagName.trim()});
             }
             Keyboard.dismiss();
-            Navigation.dismissModal();
+            Navigation.goBack();
         },
         [route.params.policyID, currentTagName],
     );

src/pages/workspace/tags/TagSettingsPage.tsx

@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import {useOnyx, withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -35,7 +35,7 @@ type TagSettingsPageOnyxProps = {
 
 type TagSettingsPageProps = TagSettingsPageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.TAG_SETTINGS>;
 
-function TagSettingsPage({route, policyTags}: TagSettingsPageProps) {
+function TagSettingsPage({route, policyTags, navigation}: TagSettingsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policyTag = useMemo(() => PolicyUtils.getTagList(policyTags, 0), [policyTags]);
@@ -45,7 +45,15 @@ function TagSettingsPage({route, policyTags}: TagSettingsPageProps) {
 
     const [isDeleteTagModalOpen, setIsDeleteTagModalOpen] = React.useState(false);
 
-    const currentPolicyTag = policyTag.tags[decodeURIComponent(route.params.tagName)];
+    const currentPolicyTag =
+        policyTag.tags[decodeURIComponent(route.params.tagName)] ?? Object.values(policyTag.tags ?? {}).find((tag) => tag.previousTagName === decodeURIComponent(route.params.tagName));
+
+    useEffect(() => {
+        if (currentPolicyTag?.name === route.params.tagName || !currentPolicyTag) {
+            return;
+        }
+        navigation.setParams({tagName: currentPolicyTag?.name});
+    }, [route.params.tagName, currentPolicyTag, navigation]);
 
     if (!currentPolicyTag) {
         return <NotFoundPage />;

src/types/onyx/PolicyCategory.ts

@@ -23,6 +23,9 @@ type PolicyCategory = OnyxCommon.OnyxValueWithOfflineFeedback<{
     /** The external accounting service that this category comes from */
     origin: string;
 
+    /** The old category name of the category when we edit the category name */
+    previousCategoryName?: string;
+
     /** A list of errors keyed by microtime */
     errors?: OnyxCommon.Errors | null;
 }>;

src/types/onyx/PolicyTag.ts

@@ -7,6 +7,9 @@ type PolicyTag = OnyxCommon.OnyxValueWithOfflineFeedback<{
     /** Flag that determines if a tag is active and able to be selected */
     enabled: boolean;
 
+    /** The old tag name of the tag when we edit the tag name */
+    previousTagName?: string;
+
     /** "General Ledger code" that corresponds to this tag in an accounting system. Similar to an ID. */
     // eslint-disable-next-line @typescript-eslint/naming-convention
     'GL Code'?: string;