[HOLD for payment 2023-10-09] [$500] Dev: Web - Save button is positioned incorrectly for Private Notes Page

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Login to ND
2. Go to any workspace chat (#admins, #announce etc)
3. Click on header > Private Notes > My Notes > Notes

Expected Result:

Save button is positioned just below the input

Actual Result:

Inconsistent with how we have positioned "Save" Button in Welcome Message, Room Name and other pages

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: Dev 1.3.50.7
Reproducible in staging?: n
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @aman-atg
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694786159995799

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0125eda6d35113e0f4
• Upwork Job ID: 1703120056641490944
• Last Price Increase: 2023-09-16
• Automatic offers:
• hungvu193 | Contributor | 26810705
• aman-atg | Reporter | 26810706

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0125eda6d35113e0f4

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @burczu (External)

[kbecciv]

Proposal by: @aman-atg
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694786159995799

Proposal

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

Save button is positioned incorrectly for Private Notes Page

What is the root cause of that problem?

We didn't use styles.flexGrow1 for the Form component

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

To fix this, we can just pass styles.flexGrow1 as styles here

App/src/pages/PrivateNotes/PrivateNotesEditPage.js

Line 105 in 1862aff

<Form

[hungvu193]

Proposal

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

Dev: Web - Save button is positioned incorrectly for Private Notes Page, it should be at the bottom for consistency

What is the root cause of that problem?

In current PrivateNotesEditPage, we're using a View to wrap Form and a TextInPut, however we didn't define a style for our Form, which caused the issue.

App/src/pages/PrivateNotes/PrivateNotesEditPage.js

Lines 95 to 110 in c77814f

	<View style={[styles.flexGrow1, styles.ph5]}>
	<View style={[styles.mb5]}>
	<Text>
	{translate(
	Str.extractEmailDomain(lodashGet(personalDetailsList, [route.params.accountID, 'login'], '')) === CONST.EMAIL.GUIDES_DOMAIN
	? 'privateNotes.sharedNoteMessage'
	: 'privateNotes.personalNoteMessage',
	)}
	</Text>
	</View>
	<Form
	formID={ONYXKEYS.FORMS.PRIVATE_NOTES_FORM}
	onSubmit={savePrivateNote}
	submitButtonText={translate('common.save')}
	enabledWhenOffline
	>

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

Wrap an extra View for the Form is redundant, we should remove the View and bring its style to our Form component, also bring the Text inside the Form component as well.

<HeaderComponent />
 <Form
    style={[styles.flexGorw1, styles.ph5]}
    formID={ONYXKEYS.FORMS.PRIVATE_NOTES_FORM}
    onSubmit={savePrivateNote}
    submitButtonText={translate('common.save')}
    enabledWhenOffline
>
    <Text style={[styles.mb5]}>
        {translate(
            Str.extractEmailDomain(lodashGet(personalDetailsList, [route.params.accountID, 'login'], '')) === CONST.EMAIL.GUIDES_DOMAIN
                ? 'privateNotes.sharedNoteMessage'
                : 'privateNotes.personalNoteMessage',
        )}
    </Text>
  <OfflineFeedback.../>
<Form />

What alternative solutions did you explore? (Optional)

N/A

Result

Screen.Recording.2023-09-17.at.09.28.08.mov

[PiyushChandra17]

Proposal

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

Web - Save button is placed just below input text, it should be at the bottom just to maintain consistency

What is the root cause of that problem?

In PrivateNotesEditPage, we are not using any style for Form component.

App/src/pages/PrivateNotes/PrivateNotesEditPage.js

Lines 105 to 110 in c77814f

	<Form
	formID={ONYXKEYS.FORMS.PRIVATE_NOTES_FORM}
	onSubmit={savePrivateNote}
	submitButtonText={translate('common.save')}
	enabledWhenOffline
	>

Hence this is the root cause.

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

We need to add styles.flexGrow1 in Form styles. Also we need to keep our code "DRY" so instead of wrapping Form in View, we need to remove View and use the styles in Form instead, plus add the Text inside the form.

                <Form
                    style={[styles.flexGrow1, styles.ph5]}
                    formID={ONYXKEYS.FORMS.PRIVATE_NOTES_FORM}
                    onSubmit={savePrivateNote}
                    submitButtonText={translate('common.save')}
                    enabledWhenOffline
                >
                    <View style={[styles.mb5]}>
                        <Text>
                            {translate(
                                Str.extractEmailDomain(lodashGet(personalDetailsList, [route.params.accountID, 'login'], '')) === CONST.EMAIL.GUIDES_DOMAIN
                                    ? 'privateNotes.sharedNoteMessage'
                                    : 'privateNotes.personalNoteMessage',
                            )}
                        </Text>
                    </View>
                    <OfflineWithFeedback

What alternative solutions did you explore? (Optional)

NA

Result:

[burczu]

I've checked all the proposals and in my opinion the one from @hungvu193 solves the issue in the most comprehensive way - I agree that both View components that wraps the Form and the Text components are unnecessary and it's ok to remove them and style the form and the text directly + moving the Text component inside the form is correct.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @NikkiWines, see https://stackoverflow.com/c/expensify/questions/7972 for more details.