Merge pull request #32337 from wlegolas/bugfix/issue-31753

Show child tags indented on the Tag list
Expensify · Dec 4, 2023 · a4d9bc0 · a4d9bc0
2 parents 12998b8 + 3f5b024
commit a4d9bc0
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 19 deletions.
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
@@ -747,15 +747,15 @@ function sortTags(tags) {
 }
 
 /**
- * Builds the options for the category tree hierarchy via indents
+ * Builds the options for the tree hierarchy via indents
  *
  * @param {Object[]} options - an initial object array
  * @param {Boolean} options[].enabled - a flag to enable/disable option in a list
  * @param {String} options[].name - a name of an option
  * @param {Boolean} [isOneLine] - a flag to determine if text should be one line
  * @returns {Array<Object>}
  */
-function getCategoryOptionTree(options, isOneLine = false) {
+function getIndentedOptionTree(options, isOneLine = false) {
     const optionCollection = new Map();
 
     _.each(options, (option) => {
@@ -823,7 +823,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: '',
             shouldShow: false,
             indexOffset,
-            data: getCategoryOptionTree(selectedOptions, true),
+            data: getIndentedOptionTree(selectedOptions, true),
         });
 
         return categorySections;
@@ -837,7 +837,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: '',
             shouldShow: true,
             indexOffset,
-            data: getCategoryOptionTree(searchCategories, true),
+            data: getIndentedOptionTree(searchCategories, true),
         });
 
         return categorySections;
@@ -849,7 +849,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: '',
             shouldShow: false,
             indexOffset,
-            data: getCategoryOptionTree(enabledCategories),
+            data: getIndentedOptionTree(enabledCategories),
         });
 
         return categorySections;
@@ -861,7 +861,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: '',
             shouldShow: true,
             indexOffset,
-            data: getCategoryOptionTree(selectedOptions, true),
+            data: getIndentedOptionTree(selectedOptions, true),
         });
 
         indexOffset += selectedOptions.length;
@@ -884,7 +884,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: Localize.translateLocal('common.recent'),
             shouldShow: true,
             indexOffset,
-            data: getCategoryOptionTree(cutRecentlyUsedCategories, true),
+            data: getIndentedOptionTree(cutRecentlyUsedCategories, true),
         });
 
         indexOffset += filteredRecentlyUsedCategories.length;
@@ -897,7 +897,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
         title: Localize.translateLocal('common.all'),
         shouldShow: true,
         indexOffset,
-        data: getCategoryOptionTree(filteredCategories),
+        data: getIndentedOptionTree(filteredCategories),
     });
 
     return categorySections;
@@ -912,13 +912,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
  * @returns {Array<Object>}
  */
 function getTagsOptions(tags) {
-    return _.map(tags, (tag) => ({
-        text: tag.name,
-        keyForList: tag.name,
-        searchText: tag.name,
-        tooltipText: tag.name,
-        isDisabled: !tag.enabled,
-    }));
+    return getIndentedOptionTree(tags);
 }
 
 /**
@@ -1756,7 +1750,7 @@ export {
     getEnabledCategoriesCount,
     hasEnabledOptions,
     sortCategories,
-    getCategoryOptionTree,
+    getIndentedOptionTree,
     formatMemberForList,
     formatSectionsFromSearchTerm,
 };
diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js
@@ -1292,6 +1292,65 @@ describe('OptionsListUtils', () => {
             },
         ];
 
+        const smallTagsListWithParentChild = {
+            Movies: {
+                enabled: true,
+                name: 'Movies',
+            },
+            'Movies: Avengers: Endgame': {
+                enabled: true,
+                name: 'Movies: Avengers: Endgame',
+                unencodedName: 'Movies: Avengers: Endgame',
+            },
+            Places: {
+                enabled: false,
+                name: 'Places',
+            },
+            Task: {
+                enabled: true,
+                name: 'Task',
+            },
+        };
+
+        const smallResultListWithParentChild = [
+            {
+                title: '',
+                shouldShow: false,
+                indexOffset: 0,
+                // data sorted alphabetically by name
+                data: [
+                    {
+                        text: 'Movies',
+                        keyForList: 'Movies',
+                        searchText: 'Movies',
+                        tooltipText: 'Movies',
+                        isDisabled: false,
+                    },
+                    {
+                        text: '    Avengers',
+                        keyForList: 'Movies: Avengers',
+                        searchText: 'Movies: Avengers',
+                        tooltipText: 'Avengers',
+                        isDisabled: true,
+                    },
+                    {
+                        text: '        Endgame',
+                        keyForList: 'Movies: Avengers: Endgame',
+                        searchText: 'Movies: Avengers: Endgame',
+                        tooltipText: 'Endgame',
+                        isDisabled: false,
+                    },
+                    {
+                        text: 'Task',
+                        keyForList: 'Task',
+                        searchText: 'Task',
+                        tooltipText: 'Task',
+                        isDisabled: false,
+                    },
+                ],
+            },
+        ];
+
         const smallResult = OptionsListUtils.getFilteredOptions(REPORTS, PERSONAL_DETAILS, [], emptySearch, [], [], false, false, false, {}, [], true, smallTagsList);
         expect(smallResult.tagOptions).toStrictEqual(smallResultList);
 
@@ -1354,9 +1413,26 @@ describe('OptionsListUtils', () => {
             recentlyUsedTags,
         );
         expect(largeWrongSearchResult.tagOptions).toStrictEqual(largeWrongSearchResultList);
+
+        const smallResultWithParentChild = OptionsListUtils.getFilteredOptions(
+            REPORTS,
+            PERSONAL_DETAILS,
+            [],
+            emptySearch,
+            [],
+            [],
+            false,
+            false,
+            false,
+            {},
+            [],
+            true,
+            smallTagsListWithParentChild,
+        );
+        expect(smallResultWithParentChild.tagOptions).toStrictEqual(smallResultListWithParentChild);
     });
 
-    it('getCategoryOptionTree()', () => {
+    it('getIndentedOptionTree()', () => {
         const categories = {
             Meals: {
                 enabled: true,
@@ -1669,8 +1745,8 @@ describe('OptionsListUtils', () => {
             },
         ];
 
-        expect(OptionsListUtils.getCategoryOptionTree(categories)).toStrictEqual(result);
-        expect(OptionsListUtils.getCategoryOptionTree(categories, true)).toStrictEqual(resultOneLine);
+        expect(OptionsListUtils.getIndentedOptionTree(categories)).toStrictEqual(result);
+        expect(OptionsListUtils.getIndentedOptionTree(categories, true)).toStrictEqual(resultOneLine);
     });
 
     it('sortCategories', () => {