Merge pull request #42381 from bernhardoj/fix/41083-escape-colon-from…

…-tag-name Fix opening tag with colon shows not found page while opening for the first time
Expensify · May 29, 2024 · 1029cd3 · 1029cd3
2 parents e5ec7be + 6e97610
commit 1029cd3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
@@ -241,6 +241,13 @@ function getCleanedTagName(tag: string) {
     return tag?.replace(/\\{1,2}:/g, CONST.COLON);
 }
 
+/**
+ * Escape colon from tag name
+ */
+function escapeTagName(tag: string) {
+    return tag?.replaceAll(CONST.COLON, '\\:');
+}
+
 /**
  * Gets a count of enabled tags of a policy
  */
@@ -411,6 +418,7 @@ function getCurrentXeroOrganizationName(policy: Policy | undefined): string | un
 export {
     canEditTaxRate,
     extractPolicyIDFromPath,
+    escapeTagName,
     getActivePolicies,
     getAdminEmployees,
     getCleanedTagName,

diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
@@ -3170,6 +3170,7 @@ function createWorkspaceFromIOUPayment(iouReport: Report | EmptyObject): string
 
 function createPolicyTag(policyID: string, tagName: string) {
     const policyTag = PolicyUtils.getTagLists(allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {})?.[0] ?? {};
+    const newTagName = PolicyUtils.escapeTagName(tagName);
 
     const onyxData: OnyxData = {
         optimisticData: [
@@ -3179,8 +3180,8 @@ function createPolicyTag(policyID: string, tagName: string) {
                 value: {
                     [policyTag.name]: {
                         tags: {
-                            [tagName]: {
-                                name: tagName,
+                            [newTagName]: {
+                                name: newTagName,
                                 enabled: true,
                                 errors: null,
                                 pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
@@ -3197,7 +3198,7 @@ function createPolicyTag(policyID: string, tagName: string) {
                 value: {
                     [policyTag.name]: {
                         tags: {
-                            [tagName]: {
+                            [newTagName]: {
                                 errors: null,
                                 pendingAction: null,
                             },
@@ -3213,7 +3214,7 @@ function createPolicyTag(policyID: string, tagName: string) {
                 value: {
                     [policyTag.name]: {
                         tags: {
-                            [tagName]: {
+                            [newTagName]: {
                                 errors: ErrorUtils.getMicroSecondOnyxError('workspace.tags.genericFailureMessage'),
                             },
                         },
@@ -3225,7 +3226,7 @@ function createPolicyTag(policyID: string, tagName: string) {
 
     const parameters = {
         policyID,
-        tags: JSON.stringify([{name: tagName}]),
+        tags: JSON.stringify([{name: newTagName}]),
     };
 
     API.write(WRITE_COMMANDS.CREATE_POLICY_TAG, parameters, onyxData);
@@ -3414,7 +3415,9 @@ function clearPolicyTagErrors(policyID: string, tagName: string) {
 
 function renamePolicyTag(policyID: string, policyTag: {oldName: string; newName: string}) {
     const tagListName = Object.keys(allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {})[0];
-    const oldTag = allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`]?.[tagListName]?.tags?.[policyTag.oldName] ?? {};
+    const oldTagName = policyTag.oldName;
+    const newTagName = PolicyUtils.escapeTagName(policyTag.newName);
+    const oldTag = allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`]?.[tagListName]?.tags?.[oldTagName] ?? {};
     const onyxData: OnyxData = {
         optimisticData: [
             {
@@ -3423,15 +3426,15 @@ function renamePolicyTag(policyID: string, policyTag: {oldName: string; newName:
                 value: {
                     [tagListName]: {
                         tags: {
-                            [policyTag.oldName]: null,
-                            [policyTag.newName]: {
+                            [oldTagName]: null,
+                            [newTagName]: {
                                 ...oldTag,
-                                name: policyTag.newName,
+                                name: newTagName,
                                 pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
                                 pendingFields: {
                                     name: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
                                 },
-                                previousTagName: policyTag.oldName,
+                                previousTagName: oldTagName,
                             },
                         },
                     },
@@ -3445,7 +3448,7 @@ function renamePolicyTag(policyID: string, policyTag: {oldName: string; newName:
                 value: {
                     [tagListName]: {
                         tags: {
-                            [policyTag.newName]: {
+                            [newTagName]: {
                                 errors: null,
                                 pendingAction: null,
                                 pendingFields: {
@@ -3464,8 +3467,8 @@ function renamePolicyTag(policyID: string, policyTag: {oldName: string; newName:
                 value: {
                     [tagListName]: {
                         tags: {
-                            [policyTag.newName]: null,
-                            [policyTag.oldName]: {
+                            [newTagName]: null,
+                            [oldTagName]: {
                                 ...oldTag,
                                 errors: ErrorUtils.getMicroSecondOnyxError('workspace.tags.genericFailureMessage'),
                             },
@@ -3478,8 +3481,8 @@ function renamePolicyTag(policyID: string, policyTag: {oldName: string; newName:
 
     const parameters = {
         policyID,
-        oldName: policyTag.oldName,
-        newName: policyTag.newName,
+        oldName: oldTagName,
+        newName: newTagName,
     };
 
     API.write(WRITE_COMMANDS.RENAME_POLICY_TAG, parameters, onyxData);

diff --git a/src/pages/workspace/tags/EditTagPage.tsx b/src/pages/workspace/tags/EditTagPage.tsx
@@ -58,12 +58,12 @@ function EditTagPage({route, policyTags}: EditTagPageProps) {
             const tagName = values.tagName.trim();
             // Do not call the API if the edited tag name is the same as the current tag name
             if (currentTagName !== tagName) {
-                Policy.renamePolicyTag(route.params.policyID, {oldName: currentTagName, newName: values.tagName.trim()});
+                Policy.renamePolicyTag(route.params.policyID, {oldName: route.params.tagName, newName: values.tagName.trim()});
             }
             Keyboard.dismiss();
             Navigation.goBack();
         },
-        [route.params.policyID, currentTagName],
+        [route.params.policyID, route.params.tagName, currentTagName],
     );
 
     return (