[$250] [hold for payment 2024-10-04] Members - Dropdown button is not full width #49749

IuliiaHerets · 2024-09-25T21:10:40Z

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

Version Number: 9.0.40-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Launch New Expensify app.
Go to workspace settings > Members.
Invite a member if there is no other member.
Long tap on the member.

Expected Result:

The dropdown button should be full width.

Actual Result:

The dropdown button is not full width.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6615247_1727295516935.ScreenRecording_09-26-2024_04-17-03_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021841837363965759666
Upwork Job ID: 1841837363965759666
Last Price Increase: 2024-10-03

Issue Owner

Current Issue Owner: @

melvin-bot · 2024-09-25T21:10:50Z

Triggered auto assignment to @aldo-expensify (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

melvin-bot · 2024-09-25T21:10:50Z

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

github-actions · 2024-09-25T21:10:59Z

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

IuliiaHerets · 2024-09-25T21:11:19Z

Production

IuliiaHerets · 2024-09-25T21:11:41Z

We think that this bug might be related to #wave-control

Nodebrute · 2024-09-25T21:29:04Z

Edited by proposal-police: This proposal was edited at 2024-09-25 21:30:48 UTC.

Proposal

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

Dropdown button is not full width

What is the root cause of that problem?

We are adding these extra styles here we don't need them

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 540 in a4a344b

    
           <View style={[styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>

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

We can remove these styles from here, this will fix the issue

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 540 in a4a344b

    
           <View style={[styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>

Other minor styling can be adjusted in the PR

What alternative solutions did you explore? (Optional)

We can remove this VIEW from here

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 540 in a4a344b

    
           <View style={[styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>

  <>
                {(shouldUseNarrowLayout ? canSelectMultiple : selectedEmployees.length > 0) ? (
                    <ButtonWithDropdownMenu<WorkspaceMemberBulkActionType>
                        shouldAlwaysShowDropdownMenu
                        pressOnEnter
                        customText={translate('workspace.common.selected', {selectedNumber: selectedEmployees.length})}
                        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
                        onPress={() => null}
                        options={getBulkActionsButtonOptions()}
                        isSplitButton={false}
                        style={[shouldUseNarrowLayout && styles.flexGrow1, shouldUseNarrowLayout && styles.mb3]}
                        isDisabled={!selectedEmployees.length}
                    />
                ) : (
                    <Button
                        success
                        onPress={inviteUser}
                        text={translate('workspace.invite.member')}
                        icon={Expensicons.Plus}
                        innerStyles={[shouldUseNarrowLayout && styles.alignItemsCenter]}
                        style={[shouldUseNarrowLayout && styles.flexGrow1, shouldUseNarrowLayout && styles.mb3]}
                    />
                )}
            </>

ishpaul777 · 2024-09-25T21:36:15Z

offending PR #48876

daledah · 2024-09-25T21:36:53Z

Proposal

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

The dropdown button is not full width.

What is the root cause of that problem?

We have some styles here that don't have effect

App/src/pages/workspace/WorkspaceMembersPage.tsx

Line 540 in a4a344b

    
           <View style={[styles.flexRow, styles.gap2, shouldUseNarrowLayout && styles.mb3]}>

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

We should remove useless style styles.flexRow, styles.gap2 and add styles.w100 like we did here

            <View style={[shouldUseNarrowLayout && styles.mb3, styles.w100]}>

What alternative solutions did you explore? (Optional)

aldo-expensify · 2024-09-25T23:13:10Z

Both of the existing proposals end up with the 3-vertical-dot getting cut on the right side:

Nodebrute · 2024-09-25T23:16:27Z

@aldo-expensify have you tested my proposal?

aldo-expensify · 2024-09-25T23:17:32Z

@Nodebrute now I tested removing the View as your alternative solution suggest and that seems to work. I'll test a bit more and prepare the PR.

Krishna2323 · 2024-09-25T23:23:21Z

@aldo-expensify, The issue occurs because we missed to add wrapperStyle={styles.w100} to the ButtonWithDropdownMenu.

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 542 to 552 in b6db72d

    
           <ButtonWithDropdownMenu<WorkspaceMemberBulkActionType> 
        
               shouldAlwaysShowDropdownMenu 
        
               pressOnEnter 
        
               customText={translate('workspace.common.selected', {selectedNumber: selectedEmployees.length})} 
        
               buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM} 
        
               onPress={() => null} 
        
               options={getBulkActionsButtonOptions()} 
        
               isSplitButton={false} 
        
               style={[shouldUseNarrowLayout && styles.flexGrow1, shouldUseNarrowLayout && styles.mb3]} 
        
               isDisabled={!selectedEmployees.length} 
        
           />

The same id done in PolicyDistanceRatesPage.

App/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

Lines 258 to 269 in b6db72d

    
           <ButtonWithDropdownMenu<WorkspaceDistanceRatesBulkActionType> 
        
               shouldAlwaysShowDropdownMenu 
        
               pressOnEnter 
        
               customText={translate('workspace.common.selected', {selectedNumber: selectedDistanceRates.length})} 
        
               buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM} 
        
               onPress={() => null} 
        
               options={getBulkActionsButtonOptions()} 
        
               style={[shouldUseNarrowLayout && styles.flexGrow1]} 
        
               wrapperStyle={styles.w100} 
        
               isSplitButton={false} 
        
               isDisabled={!selectedDistanceRates.length} 
        
           />

aldo-expensify · 2024-09-25T23:29:34Z

Thanks @Krishna2323 , but if removing the View works the same, I think I prefer that since the simpler the code, the easier to maintain.

Nodebrute · 2024-09-25T23:32:27Z

@Krishna2323, We are not adding wrapperStyle={styles.w100} in Categories Page and it's working fine there. Also, notice here the dropdown button is not wrapped in extra styles

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Lines 237 to 248 in b6db72d

    
           return ( 
        
               <ButtonWithDropdownMenu 
        
                   onPress={() => null} 
        
                   shouldAlwaysShowDropdownMenu 
        
                   pressOnEnter 
        
                   buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM} 
        
                   customText={translate('workspace.common.selected', {selectedNumber: selectedCategoriesArray.length})} 
        
                   options={options} 
        
                   isSplitButton={false} 
        
                   style={[shouldUseNarrowLayout && styles.flexGrow1, shouldUseNarrowLayout && styles.mb3]} 
        
                   isDisabled={!selectedCategoriesArray.length} 
        
               />

cc: @aldo-expensify

aldo-expensify · 2024-09-25T23:44:56Z

@rayane-djouah is C+
#49760 implements @Nodebrute 's alternative proposal

aldo-expensify · 2024-09-26T18:15:36Z

Tested well in staging: #49760 (comment)

rayane-djouah · 2024-09-28T16:07:52Z

Note

The production deploy automation failed: This should be on [HOLD for Payment 2024-10-04] according to #49662 production deploy checklist, confirmed in #49760 (comment)

cc @joekaufmanexpensify

joekaufmanexpensify · 2024-09-30T14:29:30Z

Done!

melvin-bot · 2024-10-03T13:47:03Z

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

melvin-bot · 2024-10-03T13:47:08Z

Current assignee @rayane-djouah is eligible for the External assigner, not assigning anyone new.

joekaufmanexpensify · 2024-10-03T13:58:28Z

Discussing payment here

joekaufmanexpensify · 2024-10-03T21:18:41Z

Payment due here:

@Nodebrute - $125 for proposal via Upwork. No payment is required here given proposal offered with no help wanted label, but we appreciate your assistance in getting this deploy blocker done!
@rayane-djouah - $250 for C+ review via Upwork.

joekaufmanexpensify · 2024-10-03T21:21:05Z

Offer sent to both of you in Upwork! Payment due tomorrow

Nodebrute · 2024-10-03T21:22:17Z

@joekaufmanexpensify Thank You. Accepted🙏.

joekaufmanexpensify · 2024-10-03T21:51:44Z

Payment sent to both of you!

joekaufmanexpensify · 2024-10-03T21:51:48Z

Upwork job closed.

joekaufmanexpensify · 2024-10-03T21:51:52Z

All set

IuliiaHerets added DeployBlockerCash This issue or pull request should block deployment Bug Something is broken. Auto assigns a BugZero manager. labels Sep 25, 2024

melvin-bot bot assigned aldo-expensify and joekaufmanexpensify Sep 25, 2024

melvin-bot bot added the Daily KSv2 label Sep 25, 2024

github-actions bot added Engineering Hourly KSv2 and removed Daily KSv2 labels Sep 25, 2024

github-actions bot mentioned this issue Sep 25, 2024

Deploy Checklist: New Expensify 2024-09-24 #49662

Closed

67 tasks

melvin-bot bot mentioned this issue Sep 25, 2024

[Support CSV] Create import flow for members #47869

Closed

aldo-expensify mentioned this issue Sep 25, 2024

Add import and export CSV flow for Members #48876

Merged

50 tasks

aldo-expensify mentioned this issue Sep 25, 2024

[CP Staging] Fix style change #49760

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Hourly KSv2 labels Sep 25, 2024

aldo-expensify assigned rayane-djouah Sep 25, 2024

aldo-expensify assigned Nodebrute Sep 25, 2024

aldo-expensify added Awaiting Payment Auto-added when associated PR is deployed to production and removed DeployBlockerCash This issue or pull request should block deployment Reviewing Has a PR in review labels Sep 26, 2024

joekaufmanexpensify added the Reviewing Has a PR in review label Sep 27, 2024

joekaufmanexpensify changed the title ~~Members - Dropdown button is not full width~~ [hold for payment 2024-10-04] Members - Dropdown button is not full width Sep 30, 2024

joekaufmanexpensify added the External Added to denote the issue can be worked on by a contributor label Oct 3, 2024

melvin-bot bot changed the title ~~[hold for payment 2024-10-04] Members - Dropdown button is not full width~~ [$250] [hold for payment 2024-10-04] Members - Dropdown button is not full width Oct 3, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 3, 2024

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Oct 3, 2024

joekaufmanexpensify added Weekly KSv2 and removed Daily KSv2 Help Wanted Apply this label when an issue is open to proposals by contributors labels Oct 3, 2024

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Oct 3, 2024

joekaufmanexpensify closed this as completed Oct 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$250] [hold for payment 2024-10-04] Members - Dropdown button is not full width #49749

[$250] [hold for payment 2024-10-04] Members - Dropdown button is not full width #49749

IuliiaHerets commented Sep 25, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Sep 25, 2024

melvin-bot bot commented Sep 25, 2024

github-actions bot commented Sep 25, 2024

IuliiaHerets commented Sep 25, 2024

IuliiaHerets commented Sep 25, 2024

Nodebrute commented Sep 25, 2024 •

edited by github-actions bot

Loading

ishpaul777 commented Sep 25, 2024

daledah commented Sep 25, 2024

aldo-expensify commented Sep 25, 2024

Nodebrute commented Sep 25, 2024 •

edited

Loading

aldo-expensify commented Sep 25, 2024

Krishna2323 commented Sep 25, 2024 •

edited

Loading

aldo-expensify commented Sep 25, 2024

Nodebrute commented Sep 25, 2024

aldo-expensify commented Sep 25, 2024

aldo-expensify commented Sep 26, 2024

rayane-djouah commented Sep 28, 2024 •

edited

Loading

joekaufmanexpensify commented Sep 30, 2024

melvin-bot bot commented Oct 3, 2024

melvin-bot bot commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

Nodebrute commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

[$250] [hold for payment 2024-10-04] Members - Dropdown button is not full width #49749

[$250] [hold for payment 2024-10-04] Members - Dropdown button is not full width #49749

Comments

IuliiaHerets commented Sep 25, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Sep 25, 2024

melvin-bot bot commented Sep 25, 2024

github-actions bot commented Sep 25, 2024

IuliiaHerets commented Sep 25, 2024

IuliiaHerets commented Sep 25, 2024

Nodebrute commented Sep 25, 2024 • edited by github-actions bot Loading

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)

ishpaul777 commented Sep 25, 2024

daledah commented Sep 25, 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)

aldo-expensify commented Sep 25, 2024

Nodebrute commented Sep 25, 2024 • edited Loading

aldo-expensify commented Sep 25, 2024

Krishna2323 commented Sep 25, 2024 • edited Loading

aldo-expensify commented Sep 25, 2024

Nodebrute commented Sep 25, 2024

aldo-expensify commented Sep 25, 2024

aldo-expensify commented Sep 26, 2024

rayane-djouah commented Sep 28, 2024 • edited Loading

joekaufmanexpensify commented Sep 30, 2024

melvin-bot bot commented Oct 3, 2024

melvin-bot bot commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

Nodebrute commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

joekaufmanexpensify commented Oct 3, 2024

IuliiaHerets commented Sep 25, 2024 •

edited by melvin-bot bot

Loading

Nodebrute commented Sep 25, 2024 •

edited by github-actions bot

Loading

Nodebrute commented Sep 25, 2024 •

edited

Loading

Krishna2323 commented Sep 25, 2024 •

edited

Loading

rayane-djouah commented Sep 28, 2024 •

edited

Loading