Fix/37847 - Show the tags in the first policyTagLists

src/pages/workspace/tags/EditTagPage.tsx

@@ -37,7 +37,7 @@ function EditTagPage({route, policyTags}: EditTagPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
-    const currentTagName = route.params.tagName;
+    const currentTagName = PolicyUtils.getCleanedTagName(route.params.tagName);
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAG_FORM>) => {

src/pages/workspace/tags/TagSettingsPage.tsx

@@ -79,7 +79,7 @@ function TagSettingsPage({route, policyTags}: TagSettingsPageProps) {
                         testID={TagSettingsPage.displayName}
                     >
                         <HeaderWithBackButton
-                            title={route.params.tagName}
+                            title={PolicyUtils.getCleanedTagName(route.params.tagName)}
                             shouldShowThreeDotsButton
                             shouldSetModalVisibility={false}
                             threeDotsAnchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
@@ -122,7 +122,7 @@ function TagSettingsPage({route, policyTags}: TagSettingsPageProps) {
                             </OfflineWithFeedback>
                             <OfflineWithFeedback pendingAction={currentPolicyTag.pendingFields?.name}>
                                 <MenuItemWithTopDescription
-                                    title={currentPolicyTag.name}
+                                    title={PolicyUtils.getCleanedTagName(currentPolicyTag.name)}
                                     description={translate(`workspace.tags.tagName`)}
                                     onPress={navigateToEditTag}
                                     shouldShowRightIcon

src/pages/workspace/tags/WorkspaceEditTagsPage.tsx

@@ -48,7 +48,9 @@ function WorkspaceEditTagsPage({route, policyTags}: WorkspaceEditTagsPageProps)
 
     const updateTaglistName = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.POLICY_TAG_NAME_FORM>) => {
-            Policy.renamePolicyTaglist(route.params.policyID, {oldName: taglistName, newName: values[INPUT_IDS.POLICY_TAGS_NAME]}, policyTags);
+            if (values[INPUT_IDS.POLICY_TAGS_NAME] !== taglistName) {
+                Policy.renamePolicyTaglist(route.params.policyID, {oldName: taglistName, newName: values[INPUT_IDS.POLICY_TAGS_NAME]}, policyTags);
+            }
             Navigation.goBack();
         },
         [policyTags, route.params.policyID, taglistName],
@@ -81,7 +83,7 @@ function WorkspaceEditTagsPage({route, policyTags}: WorkspaceEditTagsPageProps)
                                     inputID={INPUT_IDS.POLICY_TAGS_NAME}
                                     label={translate(`workspace.tags.customTagName`)}
                                     accessibilityLabel={translate(`workspace.tags.customTagName`)}
-                                    defaultValue={taglistName}
+                                    defaultValue={PolicyUtils.getCleanedTagName(taglistName)}
                                     role={CONST.ROLE.PRESENTATION}
                                     ref={inputCallbackRef}
                                 />

src/pages/workspace/tags/WorkspaceTagsPage.tsx

@@ -91,7 +91,8 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
         setSelectedTags({});
     }, [isFocused]);
 
-    const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags), [policyTags]);
+    // We currently don't support multi level tags, so let's only get the first level tags.
+    const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags).slice(0, 1), [policyTags]);
     const tagList = useMemo<PolicyForList[]>(
         () =>
             policyTagLists
@@ -101,7 +102,7 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
                         const isDisabled = tag.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
                         return {
                             value: tag.name,
-                            text: tag.name,
+                            text: PolicyUtils.getCleanedTagName(tag.name),
                             keyForList: tag.name,
                             isSelected: !!selectedTags[tag.name],
                             pendingAction: tag.pendingAction,