[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

[Krishna2323]

Proposal Updated

• Minor change in main solution
• Added result video
• Added alternative/optional solution

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0124fe6a5dd4337910

[melvin-bot]

Current assignees @rushatgabhane and @shubham1206agra are eligible for the External assigner, not assigning anyone new.

[mountiny]

@rushatgabhane @shubham1206agra can you please review the proposal?

I think the main problem here is to make sure the list values nicely wrap even if the list is very long

[shubham1206agra]

@Krishna2323 Your proposal looks good. Can you just show the screenshot with 20 values and one super-long list value?

Thanks

[nkdengineer]

Proposal

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

The list values are displayed incorrectly

What is the root cause of that problem?

This is a new feature request

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

1. We should move the initial value item to below the list value

2. Get the values of the report field and pass the title prop as the joined list value. Add styles.preWrap style to titleStyle prop so the list value can be displayed in multiline and add styles.breakAll so the long value can be displayed fully.

OPTIONAL: If we only want to display some lines of list values, we can pass numberOfLines prop to control the number of lines that we want to display.

const reportFieldValues = policy?.fieldList?.[reportFieldKey].values ?? [];
{isListFieldType && (
    <MenuItemWithTopDescription
        style={[styles.moneyRequestMenuItem]}
        titleStyle={{...styles.flex1, ...styles.preWrap, ...styles.breakAll}}
        description={translate('workspace.reportFields.listValues')}
        shouldShowRightIcon
        title={reportFieldValues.join(', ')}
        onPress={() => Navigation.navigate(ROUTES.WORKSPACE_REPORT_FIELDS_LIST_VALUES.getRoute(policyID, reportFieldID))}
    />
)}

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

Lines 97 to 98 in bf4bc6f

	{isListFieldType && (
	<MenuItemWithTopDescription

3. We also need to wrap the ScrollView here so that if the list value is too long, we can scroll to the initial value

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

Line 72 in bf4bc6f

<MenuItemWithTopDescription

We should do the same for the creation flow in CreateReportFieldsPage.

We can see the test branch here for more details https://github.com/nkdengineer/App/tree/fix/45990.

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2024-07-23.at.17.02.09.mov

[Krishna2323]

@shubham1206agra, I think we should allow only 4-5 lines. @shawnborton what's you opinion?

Note: numberOfLinesTitle={0} can be used for not setting any limits on number of lines.

One super long value l	20 values

[shawnborton]

Cc @Expensify/design @JmillsExpensify @trjExpensify - do we have strong feelings here? Part of me thinks that trimming to 4-5 lines makes sense here in case the list is insanely long.

[trjExpensify]

I definitely think we should cap it, these imported lists of customers/projects can be very long.

[melvin-bot]

📣 @rafaykr! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.18-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: [Wave Control] Update the Report field list type creation flow. #46382

If no regressions arise, payment will be issued on 2024-08-19. 🎊

For reference, here are some details about the assignees on this issue:

• @rushatgabhane requires payment through NewDot Manual Requests
• @shubham1206agra requires payment automatic offer (Reviewer)
• @Krishna2323 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@rushatgabhane / @shubham1206agra] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@muttmuure] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[Krishna2323]

@muttmuure, this is ready for payments :)

[shubham1206agra]

@mountiny For this issue, my payment will be separate from the project or in the project?

[melvin-bot]

@rushatgabhane, @mountiny, @muttmuure, @shubham1206agra, @Krishna2323 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mountiny]

This can be separate

$250 to @Krishna2323 and to @shubham1206agra please @muttmuure

[Krishna2323]

I have been paid. 🙏🏻

[muttmuure]

@Krishna2323 has indeed been paid

[muttmuure]

@shubham1206agra I need you to accept the offer https://www.upwork.com/nx/wm/offer/103272331

[muttmuure]

@rushatgabhane - $250 C+
@Krishna2323 - $250
@shubham1206agra - $250

[shubham1206agra]

@muttmuure Offer accepted

[muttmuure]

Paid

[muttmuure]

@rushatgabhane can request in ND using the summary above #45990 (comment)

[garrettmknight]

$250 approved for @rushatgabhane based on this summary.