Add closed report action optimistically when workspace is closed

[mountiny]

Details

When we delete a workspace, we need to add a closed report action to all its related chat rooms. Hence in this PR we are adding a helper method to create the closed report action (taken from what we are getting from backend right now).

There is one more change, where I am adding default empty object value when we are trying to get the last report action in a chat. I have discovered a bug in main as well where the chat reports right after being deleted got to state with no report actions locally and the lastReportAction has been undefined as a result, causing 404 page if you tried to navigate to that chat before it loaded the reportActions correctly. This simple change should make sure we do not get error if the actions are not loaded yet.

Fixed Issues

$ #14293

Tests

1. Create a new workspace
2. Verify the #admins, #announce and Workspace chat has been created
3. Navigate to Settings > Workspaces > Your workspace > Click the three dots in top right corner > Delete Workspace
4. Confirm you want to delete the workspace
5. Verify the three chats mentioned above are showing as (archived) and they are closed with message: This workspace chat is no longer active because %workspaceName% is no longer an active workspace.

Error message in dev:
0. Here in dev, overwrite the $policyID with some invalid value so error is thrown when we attempt to delete Workspace. for example $policyID = '1234123123123123123123123123';

1. Follow the steps above
2. When you attempt to delete the workspace, it shows RBR on the Workspace page:

3. Verify the associated chat rooms are not closed and you can send a message there
4. Clear the RBR on he workspace
5. You can still send messages in the workspace chats just fine

• Verify that no errors appear in the JS console

Offline tests

1. Create a new workspace
2. Verify all the three chats had been created correctly
3. Go Offline
4. Delete the workspace
5. Verify all the chats are showing as (archived)
6. Verify all the chats are closed and the message says This workspace chat is no longer active because %workspaceName% is no longer an active workspace.
7. Go online
8. Verify everything has synced correctly and no errors are shown

QA Steps

1. Create a new workspace
2. Verify the #admins, #announce and Workspace chat has been created
3. Navigate to Settings > Workspaces > Your workspace > Click the three dots in top right corner > Delete Workspace
4. Confirm you want to delete the workspace
5. Verify the three chats mentioned above are showing as (archived) and they are closed with message: This workspace chat is no longer active because %workspaceName% is no longer an active workspace.
6. Create a new workspace
7. Go offline
8. Follow the steps to delete this workspace
9. Verify the chat reports are archived and the closed report action is showing with This workspace chat is no longer active because %workspaceName% is no longer an active workspace. message.
10. Go online
11. Confirm no errors are shown

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • 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)
  • 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).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• 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)
• I followed proper code patterns (see Reviewing the code)
  • 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. toggleReport and not onIconClick)
  • I verified that comments were added to code that is not self explanatory
  • 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.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • 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:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • 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.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• 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 using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• 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
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • 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
• If any new file was added I verified that:
  • 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
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• 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 Avatar is modified, I verified that Avatar is working as expected in all cases)
• 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.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

deleteWorkspaceWeb.mp4

Mobile Web - Chrome

deleteWorkspacemWebChrome.mp4

Mobile Web - Safari

deleteWorkspacemWebSafari.mp4

Desktop

deleteWorkspaceiOS.mp4

Android

deleteWorkspaceAndroid.mp4

[melvin-bot]

@rushatgabhane @nkuoch One of you needs to 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]

[mountiny]

This change is fixing a different bug I discovered when working on this PR. When the workspace has been deleted, navigating to the archived chats threw error, because the this.props.sortedReportActions was an empty string resulting in lastReportAction being undefined. Hence next line threw error.

[nkuoch]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • 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)
  • 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)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop
• 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
• I verified proper code patterns were followed (see Reviewing the code)
  • 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. toggleReport and not onIconClick).
  • I verified that comments were added to code that is not self explanatory
  • 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.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • 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.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• 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 using Avatar have been tested & I retested again)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• 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
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • 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
• If any new file was added I verified that:
  • 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
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• 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 Avatar is modified, I verified that Avatar is working as expected in all cases)
• 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.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

offlineworkspace.mp4

Mobile Web - Chrome

Mobile Web - Safari

Desktop

2023-01-24_13-53-00.mp4

iOS

Android

[nkuoch]

I can currently only test on web and desktop. Can someone else do the rest of the testing?

[mountiny]

Thank you @nkuoch 🙇

@rushatgabhane Will you be able to finish testing on iOS and Android platforms, please?

[mountiny]

@rushatgabhane Can you please fill in the checklist from @nkuoch? Otherwise the action wont work

[rushatgabhane]

@mountiny I can't edit @nkuoch's comment if that's what you mean😅

[rushatgabhane]

How about, I attach rest of the screenshots in a new comment? And you can check of the remaining items

[rushatgabhane]

### Android

Online

WhatsApp.Video.2023-01-24.at.23.47.02.mp4

Offline

WhatsApp.Video.2023-01-24.at.23.50.13.mp4

iOS

Online

Screen.Recording.2023-01-24.at.11.56.38.PM.mov

Offline

Screen.Recording.2023-01-24.at.11.58.24.PM.mov

### mWeb - iOS

Screen.Recording.2023-01-25.at.12.01.48.AM.mov

### mWeb - Android

Screen.Recording.2023-01-25.at.12.00.25.AM.mov

[mountiny]

@rushatgabhane Always forget about that 😓

Thank you very much!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
App start TTI	706.857 ms → 732.044 ms (+25.187 ms, +3.6%)
App start runJsBundle	199.125 ms → 199.903 ms (+0.778 ms, ±0.0%)
App start regularAppStart	0.022 ms → 0.017 ms (-0.005 ms, -24.1%) 🟢
App start nativeLaunch	19.938 ms → 19.533 ms (-0.404 ms, -2.0%)
Open Search Page TTI	616.677 ms → 613.551 ms (-3.126 ms, -0.5%)

Show details

Name	Duration
App start TTI	Baseline Mean: 706.857 ms Stdev: 29.667 ms (4.2%) Runs: 661.3351559999865 672.1089679999277 672.9121779999696 674.3501750000287 677.2287679999135 680.2303939999547 680.4876580000855 680.6545659999829 682.0476180000696 683.981279999949 684.2394220000133 685.7277589999139 686.9676139999647 687.8577870000154 688.2588210001122 689.9795919999015 700.7943899999373 707.3207749999128 715.3228889999446 723.8094389999751 725.1998519999906 726.8677900000475 729.6418719999492 732.7957979999483 734.4307399999816 734.8640600000508 735.9501839999575 736.1054229999427 737.5689809999894 757.9904680000618 761.1768189999275 771.2140639999416 Current Mean: 732.044 ms Stdev: 30.288 ms (4.1%) Runs: 683.8290599999018 686.9729710000101 693.6425149999559 697.7228019998875 701.0379200000316 704.25192900002 704.8054820001125 707.4961830000393 707.57296400005 711.747555000009 715.1800170000643 716.5767429999541 716.900038999971 717.4175549999345 719.0848419999238 723.4810740000103 727.4997060000896 731.0384810001124 737.0786929999013 743.9840339999646 744.931123000104 746.5953349999618 748.2993189999834 752.5677489999216 754.1104019999038 756.2205419999082 759.6209980000276 766.7971139999572 769.7962170001119 786.8043410000391 788.8742720000446 803.4777559998911
App start runJsBundle	Baseline Mean: 199.125 ms Stdev: 23.645 ms (11.9%) Runs: 159 174 176 176 179 179 180 181 182 183 184 185 186 190 191 192 193 194 195 196 205 206 213 214 215 221 221 225 229 230 248 270 Current Mean: 199.903 ms Stdev: 17.730 ms (8.9%) Runs: 173 174 180 181 182 183 183 183 187 189 190 192 193 193 194 197 198 198 200 201 203 211 212 214 221 222 222 223 225 230 243
App start regularAppStart	Baseline Mean: 0.022 ms Stdev: 0.002 ms (8.1%) Runs: 0.018839000025764108 0.019286999944597483 0.01961200009100139 0.019694000016897917 0.020060000009834766 0.020264000166207552 0.020304000005126 0.02050799992866814 0.020549000008031726 0.02059000008739531 0.020671000005677342 0.020751999923959374 0.02083300007507205 0.02115899999625981 0.021280999993905425 0.021320999832823873 0.021769999992102385 0.021850999910384417 0.022053999826312065 0.02225799998268485 0.022299000062048435 0.022745999973267317 0.022745999973267317 0.022867999970912933 0.023111999966204166 0.0233559999614954 0.0233559999614954 0.023803999880328774 0.02498399978503585 0.025350000010803342 0.026203999994322658 Current Mean: 0.017 ms Stdev: 0.001 ms (3.6%) Runs: 0.015300000086426735 0.01566500007174909 0.01570700015872717 0.015868999995291233 0.016032000072300434 0.016112999990582466 0.01619499991647899 0.016234999988228083 0.016234999988228083 0.016234999988228083 0.016316999914124608 0.0163569999858737 0.016357999993488193 0.01639799983240664 0.01652099983766675 0.01656099990941584 0.016600999981164932 0.016641999827697873 0.01664300006814301 0.01684599998407066 0.0168869998306036 0.016887000063434243 0.016887000063434243 0.017497000051662326 0.0176189998164773 0.017659000121057034 0.017660000128671527
App start nativeLaunch	Baseline Mean: 19.938 ms Stdev: 2.106 ms (10.6%) Runs: 17 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 19 19 20 20 20 20 21 21 21 22 22 22 23 24 24 26 Current Mean: 19.533 ms Stdev: 1.522 ms (7.8%) Runs: 17 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 19 20 20 20 20 20 21 21 21 21 21 22 23 23
Open Search Page TTI	Baseline Mean: 616.677 ms Stdev: 24.814 ms (4.0%) Runs: 579.9540610001422 586.9970699998084 587.7502030001488 589.8536789999343 592.1612150000874 593.0602620001882 593.8187259999104 594.1586099998094 596.2501219999976 598.3650309999939 601.6474210000597 603.1023760000244 603.1890460001305 604.1031899999361 605.6895759999752 607.9678960000165 608.0513919999357 614.3545330001507 615.8492839999963 616.9638269999996 625.397299000062 625.7066659999546 628.3723150000442 632.6324879999738 632.8143719998188 634.5625 637.6507980001625 640.628703000024 643.9676510000136 645.974650000222 654.4875080001075 675.5900889998302 679.2836919999681 Current Mean: 613.551 ms Stdev: 16.690 ms (2.7%) Runs: 583.8271079999395 589.7777909999713 590.7499180000741 591.3868810001295 592.1068520001136 597.6712650000118 597.9582930000033 598.0005700001493 599.7041829999071 603.1007079998963 603.5096839999314 606.2673339999747 606.5712079999503 610.1245120000094 610.551635999931 612.1541350001935 612.4491779999807 614.8750819999259 615.4947510000784 615.6540940001141 615.776123000076 618.6516529999208 620.8561609999742 623.0775560000911 625.7557789999992 626.3997400000226 626.8202309999615 630.9422200000845 635.4010420001578 637.7390950000845 637.7484140000306 646.9555659999605 649.1335050000343

[OSBotify]

🚀 Deployed to staging by https://github.com/mountiny in version: 1.2.59-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/luacmartins in version: 1.2.59-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

[namhihi237]

@mountiny Can you explain why we need to use created here.

[mountiny]

as any report action, this indicated when the action took place, ie when the chat was archived