[HOLD for payment 2024-08-19] [$250] [Wave Control] Update the Report field list type creation flow

[mountiny]

When creating a list-type report field, we need to make sure the Initial value option comes after the list of values AND the List values option shows the created values as a comma-separated list, as shown below.

Note that the list values should not truncate but wrap to next line

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0124fe6a5dd4337910
• Upwork Job ID: 1815657257015158749
• Last Price Increase: 2024-07-23
• Automatic offers:
• shubham1206agra | Reviewer | 103272331
• Krishna2323 | Contributor | 103272333

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

Triggered auto assignment to @muttmuure (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[mountiny]

@Expensify/design @JmillsExpensify Can you please double check that is right?

[shawnborton]

Looks good to me!

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Initial value incorrectly appears above List values for report field configuration

What is the root cause of that problem?

The MenuItemWithTopDescription for initialValue is placed above lisvalues

App/src/pages/workspace/reportFields/ReportFieldsSettingsPage.tsx

Lines 83 to 98 in d739580

	<MenuItemWithTopDescription
	style={[styles.moneyRequestMenuItem]}
	titleStyle={styles.flex1}
	title={WorkspaceReportFieldUtils.getReportFieldInitialValue(reportField)}
	description={translate('common.initialValue')}
	shouldShowRightIcon={!isDateFieldType}
	interactive={!isDateFieldType}
	onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EDIT_REPORT_FIELDS_INITIAL_VALUE.getRoute(policyID, reportFieldID))}
	/>
	{isListFieldType && (
	<MenuItemWithTopDescription
	style={[styles.moneyRequestMenuItem]}
	titleStyle={styles.flex1}
	description={translate('workspace.reportFields.listValues')}
	shouldShowRightIcon
	onPress={() => Navigation.navigate(ROUTES.WORKSPACE_REPORT_FIELDS_LIST_VALUES.getRoute(policyID, reportFieldID))}

What changes do you think we should make in order to solve the problem?

• Place MenuItemWithTopDescription for initialValue after MenuItemWithTopDescription for lisvalues

• We should also do this in CreateReportFieldsPage.

• Then in ReportFieldsSettingsPage we need to get the list values. We can merge disabled values if needed.

    const listValues = Object.values(policy?.fieldList?.[reportFieldKey]?.values ?? {});
    const reportFieldDisabledValues = Object.values(policy?.fieldList?.[reportFieldKey]?.disabledOptions ?? {});
    
    // Pass title
    {isListFieldType && (
        <MenuItemWithTopDescription
            style={[styles.moneyRequestMenuItem]}
            titleStyle={styles.flex1}
            title={listValues.join(', ')}

• Same should be done in CreateReportFieldsPage but there we should get the list values from formDraft?.[INPUT_IDS.LIST_VALUES].

        {inputValues[INPUT_IDS.TYPE] === CONST.REPORT_FIELD_TYPES.LIST && (
            <MenuItemWithTopDescription
                description={translate('workspace.reportFields.listValues')}
                shouldShowRightIcon
                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_REPORT_FIELDS_LIST_VALUES.getRoute(policyID))}
                title={formDraft?.[INPUT_IDS.LIST_VALUES]?.join(', ')}
            />
        )}

• If we want to wrap the title in next line we can do that by using numberOfLinesTitle prop.
• Code can be refactored because we have the similar way of getting list values in ReportFieldsListValuesPage also.

What alternative solutions did you explore? (Optional)

• If we don't want to show disabled value then we can filter that out using disabledListValues in ReportFieldsSettingsPage and formDraft?.[INPUT_IDS.DISABLED_LIST_VALUES] in CreateReportFieldsPage page.

// In 'ReportFieldsSettingsPage'
title={listValues.filter((v, i) => !disabledListValues[i]).join(', ')}

// In 'CreateReportFieldsPage'
title={formDraft?.[INPUT_IDS.LIST_VALUES]?.filter((v, i) => !formDraft?.[INPUT_IDS.DISABLED_LIST_VALUES][i]).join(', ')}

Additionally we also might want to increase the number of lines for value field in ReportFieldsValueSettingsPage.
Note: This will be refactored

Result

field_list.mp4