Display Quick Action Button #38669
Display Quick Action Button #38669
Conversation
| personalDetails: { | ||
| key: ONYXKEYS.PERSONAL_DETAILS_LIST, | ||
| }, |
There was a problem hiding this comment.
Let's use the hook for this.
There was a problem hiding this comment.
Oh, my bad. This is fine. I thought that this is current user's details which has a hook.
|
@shawnborton @dannymcclain @dubielzyk-expensify anyoneee wanna' take the quick action button for a spin? |
|
Looks good to me! Can you confirm why we have different avatars for the workspace requests though? |
|
Also, why isn't the truncation here using an ellipsis? Or is the username just "a"? |
The username is |
Yep: 
|
|
Right, I'm saying, why is that avatar where it's just the workspace icon different from how it is displayed in the "Send to" field as well as the LHN item for it? |
I'm not quite sure I'm following. It looks like the mockups in the design (I think), and, as far as I can tell, it looks like the workspace avatar in the LHN (minus the user's own avatar as a subscript) |
Yes, this is the exact point I am trying to make. Why are we choosing a different avatar for the quick action button? I would think that we should use the identical icon that we use for sending something to a workspace chat, which happens to include the subscript avatar. @trjExpensify do you agree? |
I'm fine with that 🤷 |
|
Cool, I think it makes sense to be consistent here - basically if we are choosing to show that kind of avatar when you send an expense, we should reuse the same exact one from the shortcut menu too. So that looks good to me given we use that icon style everywhere else. |
|
Neat. All yours @rlinoz! |
|
Are we good to merge @shawnborton? |
|
I think so, yup |
| case CONST.QUICK_ACTIONS.ASSIGN_TASK: | ||
| return 'quickAction.assignTask'; | ||
| default: | ||
| return ''; |
There was a problem hiding this comment.
To avoid crashes (even if we've missed some action type), we should have added some default fallback key here instead of an empty string. This caused #38972
| return avatars.length <= 1 || ReportUtils.isPolicyExpenseChat(quickActionReport) ? avatars : _.filter(avatars, (avatar) => avatar.id !== props.session.accountID); | ||
| } | ||
| return []; | ||
| }, [props.personalDetails, props.session.accountID, quickActionReport]); |
There was a problem hiding this comment.
We were missing policy in the dependencies here, which caused #39045 where the avatar was not kept in sync if the workspace's avatar changed.
| @@ -80,6 +144,47 @@ function FloatingActionButtonAndPopover(props) { | |||
|
|
|||
| const prevIsFocused = usePrevious(props.isFocused); | |||
|
|
|||
| const quickActionReport = useMemo(() => (props.quickAction ? ReportUtils.getReport(props.quickAction.chatReportID) : 0), [props.quickAction]); | |||
There was a problem hiding this comment.
This line created a bug where the icon and group name is not updated correctly. More details here #40536
Details
Fixed Issues
$ #38050
PROPOSAL:
Tests
Let's do this!
Offline tests
Same, but offline
QA Steps
Same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop