#26126: Tag picker sections

src/CONST.ts

@@ -2632,6 +2632,7 @@ const CONST = {
     INDENTS: '    ',
     PARENT_CHILD_SEPARATOR: ': ',
     CATEGORY_LIST_THRESHOLD: 8,
+    TAG_LIST_THRESHOLD: 8,
     DEMO_PAGES: {
         SAASTR: 'SaaStrDemoSetup',
         SBE: 'SbeDemoSetup',

src/components/MoneyRequestConfirmationList.js

@@ -201,6 +201,7 @@ function MoneyRequestConfirmationList(props) {
     const tagList = lodashGet(props.policyTags, [tagListKey, 'tags'], []);
     const tagListName = lodashGet(props.policyTags, [tagListKey, 'name'], '');
     const canUseTags = Permissions.canUseTags(props.betas);
+    const shouldShowTags = canUseTags && _.any(tagList, (tag) => tag.enabled);
 
     const hasRoute = TransactionUtils.hasRoute(transaction);
     const isDistanceRequestWithoutRoute = props.isDistanceRequest && !hasRoute;
@@ -526,7 +527,7 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly}
                         />
                     )}
-                    {canUseTags && !!tagList && (
+                    {shouldShowTags && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly}
                             title={props.iouTag}

src/components/TagPicker/index.js

@@ -1,62 +1,58 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, useState} from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
+import CONST from '../../CONST';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
 import useLocalize from '../../hooks/useLocalize';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import OptionsSelector from '../OptionsSelector';
 import {propTypes, defaultProps} from './tagPickerPropTypes';
 
-function TagPicker({policyTags, reportID, tag, iouType, iou}) {
+function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubmit}) {
     const {translate} = useLocalize();
+    const [searchValue, setSearchValue] = useState('');
+
+    const policyRecentlyUsedTagsList = lodashGet(policyRecentlyUsedTags, tag, []);
+    const policyTagList = lodashGet(policyTags, [tag, 'tags'], []);
+    const policyTagsCount = _.size(_.filter(policyTagList, (policyTag) => policyTag.enabled));
+    const isTagsCountBelowThreshold = policyTagsCount < CONST.TAG_LIST_THRESHOLD;
+
+    const shouldShowTextInput = !isTagsCountBelowThreshold;
 
     const selectedOptions = useMemo(() => {
-        if (!iou.tag) {
+        if (!selectedTag) {
             return [];
         }
 
         return [
             {
-                name: iou.tag,
+                name: selectedTag,
                 enabled: true,
+                accountID: null,
             },
         ];
-    }, [iou.tag]);
-
-    // Only shows one section, which will be the default behavior if there are
-    // less than 8 policy tags
-    // TODO: support sections with search
-    const sections = useMemo(() => {
-        const tagList = _.chain(lodashGet(policyTags, [tag, 'tags'], {}))
-            .values()
-            .map((t) => ({
-                text: t.name,
-                keyForList: t.name,
-                tooltipText: t.name,
-            }))
-            .value();
+    }, [selectedTag]);
 
-        return [
-            {
-                data: tagList,
-            },
-        ];
-    }, [policyTags, tag]);
+    const initialFocusedIndex = useMemo(() => {
+        if (isTagsCountBelowThreshold && selectedOptions.length > 0) {
+            return _.chain(policyTagList)
+                .values()
+                .findIndex((policyTag) => policyTag.name === selectedOptions[0].name, true)
+                .value();
+        }
 
-    const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, '');
+        return 0;
+    }, [policyTagList, selectedOptions, isTagsCountBelowThreshold]);
 
-    const navigateBack = () => {
-        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
-    };
+    const sections = useMemo(
+        () =>
+            OptionsListUtils.getNewChatOptions({}, {}, [], searchValue, selectedOptions, [], false, false, false, {}, [], true, policyTagList, policyRecentlyUsedTagsList, false).tagOptions,
+        [searchValue, selectedOptions, policyTagList, policyRecentlyUsedTagsList],
+    );
 
-    const updateTag = () => {
-        // TODO: add logic to save the selected tag
-        navigateBack();
-    };
+    const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, '');
 
     return (
         <OptionsSelector
@@ -66,9 +62,13 @@ function TagPicker({policyTags, reportID, tag, iouType, iou}) {
             headerMessage={headerMessage}
             textInputLabel={translate('common.search')}
             boldStyle
-            value=""
-            onSelectRow={updateTag}
-            shouldShowTextInput={false}
+            highlightSelectedOptions
+            isRowMultilineSupported
+            shouldShowTextInput={shouldShowTextInput}
+            value={searchValue}
+            initialFocusedIndex={initialFocusedIndex}
+            onChangeText={setSearchValue}
+            onSelectRow={onSubmit}
         />
     );
 }
@@ -84,7 +84,4 @@ export default withOnyx({
     policyRecentlyUsedTags: {
         key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`,
     },
-    iou: {
-        key: ONYXKEYS.IOU,
-    },
 })(TagPicker);

src/components/TagPicker/tagPickerPropTypes.js

@@ -1,22 +1,18 @@
 import PropTypes from 'prop-types';
 import tagPropTypes from '../tagPropTypes';
-import {iouPropTypes, iouDefaultProps} from '../../pages/iou/propTypes';
 
 const propTypes = {
-    /** The report ID of the IOU */
-    reportID: PropTypes.string.isRequired,
-
     /** The policyID we are getting tags for */
     policyID: PropTypes.string.isRequired,
 
+    /** The selected tag of the money request */
+    selectedTag: PropTypes.string.isRequired,
+
     /** The name of tag list we are getting tags for */
     tag: PropTypes.string.isRequired,
 
-    /** The type of IOU report, i.e. bill, request, send */
-    iouType: PropTypes.string.isRequired,
-
     /** Callback to submit the selected tag */
-    onSubmit: PropTypes.func,
+    onSubmit: PropTypes.func.isRequired,
 
     /* Onyx Props */
     /** Collection of tags attached to a policy */
@@ -29,15 +25,11 @@ const propTypes = {
 
     /** List of recently used tags */
     policyRecentlyUsedTags: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
-
-    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: iouPropTypes,
 };
 
 const defaultProps = {
     policyTags: {},
     policyRecentlyUsedTags: {},
-    iou: iouDefaultProps,
 };
 
 export {propTypes, defaultProps};

src/libs/OptionsListUtils.js

@@ -599,7 +599,7 @@ function isCurrentUser(userDetails) {
 /**
  * Build the options for the category tree hierarchy via indents
  *
- * @param {Object[]} options - an initial strings array
+ * @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
@@ -736,6 +736,124 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
     return categorySections;
 }
 
+/**
+ * Transforms the provided tags into objects with a specific structure.
+ *
+ * @param {Object[]} tags - an initial tag array
+ * @param {Boolean} tags[].enabled - a flag to enable/disable option in a list
+ * @param {String} tags[].name - a name of an option
+ * @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,
+    }));
+}
+
+/**
+ * Build the section list for tags
+ *
+ * @param {Object[]} tags
+ * @param {String} tags[].name
+ * @param {Boolean} tags[].enabled
+ * @param {String[]} recentlyUsedTags
+ * @param {Object[]} selectedOptions
+ * @param {String} selectedOptions[].name
+ * @param {String} searchInputValue
+ * @param {Number} maxRecentReportsToShow
+ * @returns {Array<Object>}
+ */
+function getTagListSections(tags, recentlyUsedTags, selectedOptions, searchInputValue, maxRecentReportsToShow) {
+    const tagSections = [];
+    const enabledTags = _.filter(tags, (tag) => tag.enabled);
+    const numberOfTags = _.size(enabledTags);
+    let indexOffset = 0;
+
+    if (!_.isEmpty(searchInputValue)) {
+        const searchTags = _.filter(enabledTags, (tag) => tag.name.toLowerCase().includes(searchInputValue.toLowerCase()));
+
+        tagSections.push({
+            // "Search" section
+            title: '',
+            shouldShow: false,
+            indexOffset,
+            data: getTagsOptions(searchTags),
+        });
+
+        return tagSections;
+    }
+
+    if (numberOfTags < CONST.TAG_LIST_THRESHOLD) {
+        tagSections.push({
+            // "All" section when items amount less than the threshold
+            title: '',
+            shouldShow: false,
+            indexOffset,
+            data: getTagsOptions(enabledTags),
+        });
+
+        return tagSections;
+    }
+
+    const selectedOptionNames = _.map(selectedOptions, (selectedOption) => selectedOption.name);
+    const filteredRecentlyUsedTags = _.map(
+        _.filter(recentlyUsedTags, (tag) => {
+            const tagObject = _.find(tags, (t) => t.name === tag);
+            return Boolean(tagObject && tagObject.enabled) && !_.includes(selectedOptionNames, tag);
+        }),
+        (tag) => ({name: tag, enabled: true}),
+    );
+    const filteredTags = _.filter(enabledTags, (tag) => !_.includes(selectedOptionNames, tag.name));
+
+    if (!_.isEmpty(selectedOptions)) {
+        const selectedTagOptions = _.map(selectedOptions, (option) => {
+            const tagObject = _.find(tags, (t) => t.name === option.name);
+            return {
+                name: option.name,
+                enabled: Boolean(tagObject && tagObject.enabled),
+            };
+        });
+
+        tagSections.push({
+            // "Selected" section
+            title: '',
+            shouldShow: false,
+            indexOffset,
+            data: getTagsOptions(selectedTagOptions),
+        });
+
+        indexOffset += selectedOptions.length;
+    }
+
+    if (!_.isEmpty(filteredRecentlyUsedTags)) {
+        const cutRecentlyUsedTags = filteredRecentlyUsedTags.slice(0, maxRecentReportsToShow);
+
+        tagSections.push({
+            // "Recent" section
+            title: Localize.translateLocal('common.recent'),
+            shouldShow: true,
+            indexOffset,
+            data: getTagsOptions(cutRecentlyUsedTags),
+        });
+
+        indexOffset += filteredRecentlyUsedTags.length;
+    }
+
+    tagSections.push({
+        // "All" section when items amount more than the threshold
+        title: Localize.translateLocal('common.all'),
+        shouldShow: true,
+        indexOffset,
+        data: getTagsOptions(filteredTags),
+    });
+
+    return tagSections;
+}
+
 /**
  * Build the options
  *
@@ -772,6 +890,9 @@ function getOptions(
         includeCategories = false,
         categories = {},
         recentlyUsedCategories = [],
+        includeTags = false,
+        tags = {},
+        recentlyUsedTags = [],
         canInviteUser = true,
     },
 ) {
@@ -784,6 +905,20 @@ function getOptions(
             userToInvite: null,
             currentUserOption: null,
             categoryOptions,
+            tagOptions: [],
+        };
+    }
+
+    if (includeTags) {
+        const tagOptions = getTagListSections(_.values(tags), recentlyUsedTags, selectedOptions, searchInputValue, maxRecentReportsToShow);
+
+        return {
+            recentReports: [],
+            personalDetails: [],
+            userToInvite: null,
+            currentUserOption: null,
+            categoryOptions: [],
+            tagOptions,
         };
     }
 
@@ -794,6 +929,7 @@ function getOptions(
             userToInvite: null,
             currentUserOption: null,
             categoryOptions: [],
+            tagOptions: [],
         };
     }
 
@@ -1044,6 +1180,7 @@ function getOptions(
         userToInvite: canInviteUser ? userToInvite : null,
         currentUserOption,
         categoryOptions: [],
+        tagOptions: [],
     };
 }
 
@@ -1128,6 +1265,9 @@ function getIOUConfirmationOptionsFromParticipants(participants, amountText) {
  * @param {boolean} [includeCategories]
  * @param {Object} [categories]
  * @param {Array<String>} [recentlyUsedCategories]
+ * @param {boolean} [includeTags]
+ * @param {Object} [tags]
+ * @param {Array<String>} [recentlyUsedTags]
  * @param {boolean} [canInviteUser]
  * @returns {Object}
  */
@@ -1143,6 +1283,9 @@ function getNewChatOptions(
     includeCategories = false,
     categories = {},
     recentlyUsedCategories = [],
+    includeTags = false,
+    tags = {},
+    recentlyUsedTags = [],
     canInviteUser = true,
 ) {
     return getOptions(reports, personalDetails, {
@@ -1158,6 +1301,9 @@ function getNewChatOptions(
         includeCategories,
         categories,
         recentlyUsedCategories,
+        includeTags,
+        tags,
+        recentlyUsedTags,
         canInviteUser,
     });
 }