[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>

[rafaykr]

contributor details
expensify account email:kamham56@gmail.com
upwork account : https://www.upwork.com/freelancers/~01510f6bfd2680dd92

Dear Hiring Manager,

I am excited to submit my proposal for the React Native developer position to assist with the migration project at Expensify. As a seasoned full-stack developer with a strong focus on mobile application development and user experience, I am confident in my ability to address the challenges outlined in GitHub issue #45990.

Expensify’s commitment to maintaining a reliable and secure system for processing financial transactions is commendable, and the goal of unifying the front-end across platforms using React Native is a strategic move towards enhancing user experience and operational efficiency. I am eager to contribute to this mission and help ensure that your platform remains at the forefront of innovation in the financial sector.

Addressing Your Needs:
Ensuring Accurate Field Order:

I will modify the React component responsible for rendering the list-type report field to ensure the Initial value option appears after the List values. This will involve a careful restructuring of the JSX to guarantee the desired order is achieved.
Improving List Values Display:

To ensure that the List values are displayed correctly as a comma-separated list without truncation, I will update the CSS/styling. This will involve implementing a wrapping mechanism that maintains readability and presentation integrity, even when the values exceed the container width.
Proposed Technical Solution:
Component Restructuring:
Locate and adjust the relevant component file to place the Initial value option after the List values. This ensures logical and user-friendly field arrangement.
Styling Adjustments:
Update the CSS to prevent truncation and enable wrapping of List values. The goal is to enhance readability and ensure that the comma-separated values are clearly displayed across all device sizes.
Implementation Plan:
Component File Update:

Adjust the JSX structure in the React component.

Apply CSS to ensure proper wrapping.

..list-values {
white-space: normal;
word-wrap: break-word;
}

Testing:

Conduct comprehensive unit and visual tests across all platforms to verify the correctness and usability of the changes.
Provide detailed screenshots and test cases to demonstrate the solution’s effectiveness.

Why I am the Right Fit:

Experience: With a strong background in React Native and UI/UX design, I have successfully delivered numerous projects that required meticulous attention to detail and robust cross-platform compatibility.
Commitment to Quality: I am dedicated to ensuring that my contributions meet the highest standards of quality and reliability, aligning with Expensify’s reputation for excellence.
Collaborative Approach: I value clear communication and collaboration, ensuring that I work seamlessly with your team to integrate the solution efficiently.
I have reviewed the Expensify Contributor Guidelines and am fully prepared to adhere to all standards and practices outlined. My proposal is detailed on the GitHub issue as requested, and I am eager to discuss how my skills and experience align with your needs further.

Thank you for considering my application. I look forward to the possibility of contributing to Expensify's continued success and helping to advance your migration project.

Best regards,
Muhammad Rafay khan

[dannymcclain]

Part of me thinks that trimming to 4-5 lines makes sense here in case the list is insanely long.

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

Yeah I agree. After seeing the super mega long one, I don't really see a whole lot of value gained by NEVER truncating. At a certain point the huge push input list is just not helpful. I think capping at 4-5 lines is good.

[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.