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

@muttmuure

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

@muttmuure

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.

@JmillsExpensify

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

Looks good to me!

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

Proposal Updated

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

@rushatgabhane

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

@Krishna2323

This can be separate

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

I have been paid. 🙏🏻

@Krishna2323

@Krishna2323 has indeed been paid

@shubham1206agra

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

@rushatgabhane

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

@muttmuure

@muttmuure Offer accepted

Paid

@rushatgabhane

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

@rushatgabhane

$250 approved for @rushatgabhane based on this summary.

Navigation Menu

Repository navigation

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

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

Proposal Updated

43 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<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))}

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

Description

Activity

melvin-bot commented on Jul 23, 2024

mountiny commented on Jul 23, 2024

shawnborton commented on Jul 23, 2024

Krishna2323 commented on Jul 23, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

Krishna2323 commented on Jul 23, 2024

Proposal Updated

43 remaining items

melvin-bot commented on Aug 21, 2024

mountiny commented on Aug 21, 2024

Krishna2323 commented on Aug 21, 2024

muttmuure commented on Aug 22, 2024

muttmuure commented on Aug 22, 2024

muttmuure commented on Aug 22, 2024

shubham1206agra commented on Aug 22, 2024

muttmuure commented on Aug 22, 2024

muttmuure commented on Aug 22, 2024

garrettmknight commented on Sep 2, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions