diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 820339ebc6c4..5fed34cc8180 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -747,7 +747,7 @@ 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 @@ -755,7 +755,7 @@ function sortTags(tags) { * @param {Boolean} [isOneLine] - a flag to determine if text should be one line * @returns {Array} */ -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} */ 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 index dff19baabd3d..2f4294e53c73 100644 --- 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', () => {