Update correct next approver with category/tag rules
Explanation of Change
- [x] Update
getApprovalChainto include category/tag rule approvers - [x]
getNextApproverAccountIDalready works as expected
Fixed Issues
$ https://github.com/Expensify/App/issues/52458 PROPOSAL:
Tests
Precondition:
- The workspace's rules are enabled, and the approval mode is
ADVANCE - Has 4 approvers and 1 submitter
- Setting two category approver rules (CAT1 and CAT2) for two approvers (approver 1 and approver 2) and two tag approver rules (TAG1 and TAG2) for two approvers (approver 3 and approver 4)
- [Submitter]: Submit 4 expenses that include categories
CAT1andCAT2, tagsTAG1andTAG2 - [Submitter]: Submit the expense report and verify that the next approver is the approver 1
- [Approver1]: Approve the expense and verify that the next approver is the approver 2
- [Approver2]: Approve the expense and verify that the next approver is the approver 3
- [Approver3]: Approve the expense and verify that the next approver is the approver 4
- [Approver4]: Approve the expense and verify that the next step is waiting admin for payment
- [x] Verify that no errors appear in the JS console
Offline tests
Same as above
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]." Precondition:
- The workspace's rules are enabled, and the approval mode is
ADVANCE - Has 4 approvers and 1 submitter
- Setting two category approver rules (CAT1 and CAT2) for two approvers (approver 1 and approver 2) and two tag approver rules (TAG1 and TAG2) for two approvers (approver 3 and approver 4)
- [Submitter]: Submit 4 expenses that include categories
CAT1andCAT2, tagsTAG1andTAG2 - [Submitter]: Submit the expense report and verify that the next approver is the approver 1
- [Approver1]: Approve the expense and verify that the next approver is the approver 2
- [Approver2]: Approve the expense and verify that the next approver is the approver 3
- [Approver3]: Approve the expense and verify that the next approver is the approver 4
- [Approver4]: Approve the expense and verify that the next step is waiting admin for payment
- [x] Verify that no errors appear in the JS console
PR Author Checklist
- [x] I linked the correct issue in the
### Fixed Issuessection above - [x] I wrote clear testing steps that cover the changes made in this PR
- [x] I added steps for local testing in the
Testssection - [x] I added steps for the expected offline behavior in the
Offline stepssection - [x] I added steps for Staging and/or Production testing in the
QA stepssection - [x] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- [x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
- [x] I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
- [x] I added steps for local testing in the
- [x] I included screenshots or videos for tests on all platforms
- [x] I ran the tests on all platforms & verified they passed on:
- [x] Android: Native
- [x] Android: mWeb Chrome
- [x] iOS: Native
- [x] iOS: mWeb Safari
- [x] MacOS: Chrome / Safari
- [x] MacOS: Desktop
- [x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
- [x] I followed proper code patterns (see Reviewing the code)
- [x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
toggleReportand notonIconClick) - [x] I verified that comments were added to code that is not self explanatory
- [x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- [x] I verified any copy / text shown in the product is localized by adding it to
src/languages/*files and using the translation method- [x] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
- [x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- [x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- [x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- [x] I verified the JSDocs style guidelines (in
STYLE.md) were followed
- [x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
- [x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
- [x] I followed the guidelines as stated in the Review Guidelines
- [x] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like
Avatar, I verified the components usingAvatarare working as expected) - [x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
- [x] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
- [x] I verified that if a function's arguments changed that all usages have also been updated correctly
- [x] If any new file was added I verified that:
- [x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
- [x] If a new CSS style is added I verified that:
- [x] A similar style doesn't already exist
- [x] The style can't be created with an existing StyleUtils function (i.e.
StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
- [x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
- [x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like
Avataris modified, I verified thatAvataris working as expected in all cases) - [x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
- [x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
- [x] If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- [x] I verified that all the inputs inside a form are aligned with each other.
- [x] I added
Designlabel and/or tagged@Expensify/designso the design team can review the changes.
- [x] If a new page is added, I verified it's using the
ScrollViewcomponent to make it scrollable when more elements are added to the page. - [x] If the
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
https://github.com/user-attachments/assets/34fb2353-655f-40ce-88db-d2b3d4a550c6
Android: mWeb Chrome
https://github.com/user-attachments/assets/85d22fd8-4b5f-4750-8d75-7a9a4d2104d5
iOS: Native
https://github.com/user-attachments/assets/de64e02e-8921-4d0a-9b1a-3ae96e063746
iOS: mWeb Safari
https://github.com/user-attachments/assets/24f24600-7e31-45fa-b7f9-28ffaebe3fc2
MacOS: Chrome / Safari
https://github.com/user-attachments/assets/25921685-eebc-4104-b3ab-ce9940fbb6b7
https://github.com/user-attachments/assets/a5408778-9fe9-4717-af2c-a1a8c2586197
https://github.com/user-attachments/assets/16c60d7e-1388-4b03-a514-66e09f65ad07
https://github.com/user-attachments/assets/21eace33-6a23-416f-9a66-c149ba0cfe28
https://github.com/user-attachments/assets/a0c3e98f-e97f-4464-bc6d-79b012edbf94
MacOS: Desktop
https://github.com/user-attachments/assets/f43bc32e-1db7-4c3a-a9ef-4a6e9ce08e9e
I spent a lot of time today fixing the backend, PR is up - but I didn't get to test your front end changes, sorry - if you can't find a bug with the correct approver when there's multiple category approvers, that's great! I will try to reproduce the issue i found on Monday π
Got it, no problem.
@ntdiary Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]
Reviewer Checklist
- [x] I have verified the author checklist is complete (all boxes are checked off).
- [x] I verified the correct issue is linked in the
### Fixed Issuessection above - [x] I verified testing steps are clear and they cover the changes made in this PR
- [x] I verified the steps for local testing are in the
Testssection - [x] I verified the steps for Staging and/or Production testing are in the
QA stepssection - [x] I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- [x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
- [x] I verified the steps for local testing are in the
- [x] I checked that screenshots or videos are included for tests on all platforms
- [x] I included screenshots or videos for tests on all platforms
- [x] I verified tests pass on all platforms & I tested again on:
- [x] Android: Native
- [x] Android: mWeb Chrome
- [x] iOS: Native
- [x] iOS: mWeb Safari
- [x] MacOS: Chrome / Safari
- [x] MacOS: Desktop
- [x] If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
- [x] I verified proper code patterns were followed (see Reviewing the code)
- [x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
toggleReportand notonIconClick). - [x] I verified that comments were added to code that is not self explanatory
- [x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- [x] I verified any copy / text shown in the product is localized by adding it to
src/languages/*files and using the translation method - [x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- [x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- [x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- [x] I verified the JSDocs style guidelines (in
STYLE.md) were followed
- [x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e.
- [x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
- [x] I verified that this PR follows the guidelines as stated in the Review Guidelines
- [x] I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like
Avatar, I verified the components usingAvatarhave been tested & I retested again) - [x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
- [x] I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
- [x] If a new component is created I verified that:
- [x] A similar component doesn't exist in the codebase
- [x] All props are defined accurately and each prop has a
/** comment above it */ - [x] The file is named correctly
- [x] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- [x] The only data being stored in the state is data necessary for rendering and nothing else
- [x] For Class Components, any internal methods passed to components event handlers are bound to
thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor) - [x] Any internal methods bound to
thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick) - [x] All JSX used for rendering exists in the render method
- [x] The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
- [x] If any new file was added I verified that:
- [x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
- [x] If a new CSS style is added I verified that:
- [x] A similar style doesn't already exist
- [x] The style can't be created with an existing StyleUtils function (i.e.
StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
- [x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
- [x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like
Avataris modified, I verified thatAvataris working as expected in all cases) - [x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
- [x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
- [x] If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- [x] I verified that all the inputs inside a form are aligned with each other.
- [x] I added
Designlabel and/or tagged@Expensify/designso the design team can review the changes.
- [x] If a new page is added, I verified it's using the
ScrollViewcomponent to make it scrollable when more elements are added to the page. - [x] For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
- [x] If the
mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps. - [x] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.
Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
https://github.com/user-attachments/assets/7f967232-a287-4b09-b9c1-5bc41b387a46
https://github.com/user-attachments/assets/9ea6c1ac-3220-4f8e-8368-3bb3432640b2
https://github.com/user-attachments/assets/493f3dd0-e65f-4fad-8c2d-90aae08d465b
https://github.com/user-attachments/assets/61b3f05d-6e1b-4a1f-bebd-accede6d2844
https://github.com/user-attachments/assets/97797ebf-af45-4bb7-a93d-f8fcd935d5b3
MacOS: Desktop
https://github.com/user-attachments/assets/b6da794c-a4f7-4a4f-9c0e-3f071a541609
Maybe this should be fixed as a frontend bug: When no.4 approves, the frontend optimistic message shows no further action required!, but the correct backend data is waiting for no.25 to approve. (no.25 is policy owner)
What do you think? cc @nkdengineer @Beamanator
@ntdiary Is this reproducible on the latest main? If yes, I think we should fix it as a separate issue.
@ntdiary Is this reproducible on the latest main? If yes, I think we should fix it as a separate issue.
The reason I'm asking here, is if we don't fix it, we can't achieve the expected behavior in the OP (step 12 offline):
[1] Expected Result:
- Confirm the second approver is Approver B (both offline & online)
- As Approver B, approve the report
- Confirm the third approver is workspace owner (both offline & online)
- As WS owner, approve and confirm that the report is final approved.
Additionally, this problem is introduced by PR #51196, the execution chain is:
approveMoneyRequest β getApprovalChain β getSubmitToEmail β getSubmitToAccountID. When approving, if there is a category approver in the chain, the first item in the chain was always the category approver, which caused the optimisticNextStep calculation to be incorrect.
BTW, when building the approval chain, I think Set may be more appropriate and simple than Array, as the elements are unique and ordered. If we don't want to make many changes, we can still return Array, since the conv is also quite simple:
const chain = new Set<String>()
approvers.forEach(el => chain.add(el))
chain.delete(submitterEmail)
a = new Set([1,3,2,4,3,2])
return [...a]
Finally, if needed, maybe we could increase the bounty for this issue, since it really involves quite multiple cases that need to be considered. :)
I definitely think it's fair to bump the bounty on this one, it's a pretty complicated issue that we're trying to get perfect π
@ntdiary are you waiting on me or @nkdengineer to look at your latest message?
BTW I'm making sure a transaction inserted date gets back to Onyx, that should be ready in staging tomorrow at some point π
@ntdiary are you waiting on me or @nkdengineer to look at your latest message?
@Beamanator, Iβm waiting for the new sorting implementation,
and to see if this bug should be fixed. I personally think it should be fixed, because the expected behavior was mentioned in the OP, and in our case, the frontend didn't correctly add the owner to the full approval chain(i.e., rule approval chain +
submitsTo/owner/forwards). π
Cool, yeah @nkdengineer can now implement the correct sorting (with transaction inserted date - b/c that was just deployed yesterday)
and to see if https://github.com/Expensify/App/pull/52537#issuecomment-2504308501 should be fixed. I personally think it should be fixed, because the expected behavior was mentioned in the OP, and in our case, the frontend didn't correctly add the owner to the full approval chain(i.e., rule approval chain + submitsTo/owner/forwards). π
I think this makes sense too, to fix here π i believe it should be a relatively quick fix π
Sure will give an update soon.
BTW, it would be great if we can add some unit tests for this feature, since we've recently started prioritizing unit test. :)
slack conv:
https://expensify.slack.com/archives/C01GTK53T8Q/p1733148961659549
https://expensify.slack.com/archives/C05LX9D6E07/p1733164389303049
Ooh definitely agreed about tests π though i wouldn't mind if that's in a follow-up just so we can get this out the door quicker π€·
Maybe this should be fixed as a frontend bug: When no.4 approves, the frontend optimistic message shows no further action required!, but the correct backend data is waiting for no.25 to approve. (no.25 is policy owner)
@Beamanator For this bug, I see it's expected here that will show the No further action required! if the approver isn't the payer.
Ok IDK bout y'all, but I think y'all need to be suuuuuper clear on the setup you're using to confirm / deny if the policy owner is expected to be the "final approver" in your cases.
@nkdengineer the PR you linked doesn't have anything to do with category/tag approvers, it looks like a super simple setup - does that apply here?
Do you both understand each other's setups or should you both lay out the setup (policy type, autoReportingFrequency, approval mode (basic vs advanced), members list / who approves to who, category & tag approvers, order of expense creation w/ their category/tags)
Do you both understand each other's setups or should you both lay out the setup (policy type,
autoReportingFrequency, approval mode (basic vs advanced), members list / who approves to who, category & tag approvers, order of expense creation w/ their category/tags)
I think we both have a clear understanding of each other's setups, it's just that we haven't reached an agreement on what should be displayed after the last tag rule approver has approved. π
I have the following setup:
- Control policy, Advanced Approval, the final approver is policy owner (
no.25) - the
cat_1approver isno.1, thecat_2approver isno.2, thetag_3approver isno.3, thetag_4approver isno.4. - submitter (
no.24) creates 4 expenses in this order:tag_3,tag_4,cat_1,cat_2. - In my tests, both the frontend and backend are able to correctly move from
no.1tono.2, then tono.3, and then tono.4. But after the approval byno.4, the frontend only showsno further action required!, and the backend can correctly returnwaiting for no.25 to approve(i.e., the policy owner):
Thanks @ntdiary that's very helpful! Can you also please show what the approval workflow looks like? I see you mention "the final approver is policy owner (no.25)" but I would love to see how that's set up in your employeeList just to confirm π everything else makes complete sense!
@Beamanator, this employeeList?
For easier testing, my account name matches the email number. e.g., no.1 corresponds to [email protected]. :)
approval flow: submitter(no.24) -> no.1 -> no.2 -> no.3 -> no.4 -> policy owner(no.25)
https://github.com/user-attachments/assets/da6a936c-d3c2-49b3-bc75-8a92a7bd70c0
https://github.com/user-attachments/assets/3785f6c8-3405-4528-a860-1539211e2ae5
Thanks @ntdiary ! π
Ok ya so it IS expected that, in your case, the policy owner is the final approver - this is because the submitter's submitsTo is the policy owner, not because we want to always end with policy owner π
@Beamanator So it's not a bug, right?
Right, in @ntdiary 's case at least, it's not a backend bug, it is expected for the submitsTo to approve (in advanced approval case) AFTER all of the rule approvers
Right, in @ntdiary 's case at least, it's not a backend bug, it is expected for the
submitsToto approve (in advanced approval case) AFTER all of the rule approvers
@Beamanator, yeah, as I mentioned earlier, the backend works well, it's just that the frontend didn't correctly add the policy owner to the approval chain, I will continue testing soon. If you also feel this isnβt a blocker, we can ignore it here, just hope it won't be treated as a regression or bug in future QA tests. :)
Ya thanks for getting us full circle π I honestly do think this is something we need to fix in this issue - agreed we donβt want this to be counted as a regression later
On Mon, Dec 9, 2024 at 5:44β―PM wentao @.***> wrote:
Right, in @ntdiary https://github.com/ntdiary 's case at least, it's not a backend bug, it is expected for the submitsTo to approve (in advanced approval case) AFTER all of the rule approvers
@Beamanator https://github.com/Beamanator, yeah, as I mentioned earlier, the backend works well, it's just that the frontend didn't correctly add the policy owner to the approval chain, I will continue testing soon. If you also feel this isnβt a blocker, we can ignore it here, just hope it won't be treated as a regression or bug in future QA tests. :)
β Reply to this email directly, view it on GitHub https://github.com/Expensify/App/pull/52537#issuecomment-2529927984, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA5UTPZDNMPK5NODB2IK3KD2EY2PDAVCNFSM6AAAAABRYPSOSOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMRZHEZDOOJYGQ . You are receiving this because you were mentioned.Message ID: @.***>
BTW, @Beamanator, curious, can we have multiple tag approvers for 1 single expense? So far, Iβve only seen that a regular tag can have just one approver. Although we have multi-level tags, it seems like approvers canβt be assigned to them yet?
@ntdiary yikes, yeah in OldDot I'm struggling to even get multi-level tags set up in a policy π
I guess NewDot doesn't support multiple tags even at the moment, so probably won't support multiple tag approvers for a bit, so I would say we can skip that part of tests / sorting & add it in later whenever that's added to the app
So what's the status of this PR? @nkdengineer are you waiting on anyone for anything?
Ya thanks for getting us full circle π I honestly do think this is something we need to fix in this issue - agreed we donβt want this to be counted as a regression later
I think this is the last major problem that needs to be addressed. :D cc @nkdengineer
Bump @ntdiary did you have any chance to test today?
Bump @ntdiary did you have any chance to test today?
@Beamanator, yeah, Iβm reviewing it now. I was delayed during the day because I had to go to the hospital. :)
Oof!!! Feel free to rest & pick this up tomorrow!