Improve default workspace naming

[arosiclair]

Details

Fixes an issue with deleted policies not being cleared from memory and uses natural numbering for default workspace names

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/229801

Tests

1. Delete any existing workspaces
2. Create a new workspace
3. Verify it's named "{domain}'s Workspace"
4. Create another workspace
5. Verify it's named "{domain}'s Workspace 2"
6. Create another new workspace
7. Verify it's named "{domain}'s Workspace 3"
8. Delete "{domain}'s Workspace 3"
9. Create a new workspace
10. Verify it's named "{domain}'s Workspace 3" again

• Verify that no errors appear in the JS console

PR Review Checklist

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 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 included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • iOS / native
  • Android / native
  • iOS / Safari
  • Android / Chrome
  • MacOS / Chrome
  • 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 was added in all src/languages/* files
  • 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
• 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 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.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

PR Reviewer Checklist

The reviewer will copy/paste it into a new comment and complete it after the author checklist is completed

• 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:
  • iOS / native
  • Android / native
  • iOS / Safari
  • Android / Chrome
  • MacOS / Chrome
  • 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 was added in all src/languages/* files
  • I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team 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 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.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

QA Steps

Same as Tests

• Verify that no errors appear in the JS console

Screenshots

Web

Screen.Recording.2022-10-14.at.5.38.52.PM.mov

Mobile Web - Chrome

Screen.Recording.2022-10-14.at.6.56.28.PM.mov

Mobile Web - Safari

Screen.Recording.2022-10-14.at.7.02.48.PM.mov

Desktop

Screen.Recording.2022-10-14.at.5.49.11.PM.mov

iOS

Screen.Recording.2022-10-14.at.6.16.56.PM.mov

Android

Screen.Recording.2022-10-14.at.6.45.08.PM.mov

[Santhosh-Sellavel]

Reviewing this now, missed it since didn't receive a notification for renaming the Title from WIP

[Santhosh-Sellavel]

@arosiclair If I deleted Workspace 2 instead there are two workspace with same name seems like bug, is this okay?

[arosiclair]

Ready for another review

[francoisl]

Ah sorry I also missed this one. As a rule of thumb, it's always a good idea to leave a "ready for review" comment when you remove [WIP] from the title :)

[francoisl]

👍 LGTM and works well

[francoisl]

Sorry, I wasn't able to complete the reviewer checklist and I'm going to be OOO next week. Feel free to add another reviewer if needed!

[arosiclair]

Ready for re-review. @Santhosh-Sellavel can you complete the check list? @puneetlath Francois is out, you mind reviewing?

[Santhosh-Sellavel]

Reviewing this now

[Santhosh-Sellavel]

@arosiclair I'm running into something weird, check out here.

Simulator.Screen.Recording.-.iPhone.13.-.2022-10-26.at.23.57.34.mp4

Is this a separate bug or part of this? After deleting the workspace reappears.

I am kind of stuck with it until I log out and log in back again.

[Santhosh-Sellavel]

Screenshots

Web

Screen.Recording.2022-10-27.at.2.42.19.AM.mov

Mobile Web - Chrome

Screen.Recording.2022-10-27.at.2.49.14.AM.mov

Mobile Web - Safari

Simulator.Screen.Recording.-.iPhone.13.-.2022-10-26.at.23.59.32.mp4

Desktop

Screen.Recording.2022-10-27.at.2.44.00.AM.mov

iOS

Simulator.Screen.Recording.-.iPhone.13.-.2022-10-26.at.23.54.15.mp4

Android

Screen.Recording.2022-10-26.at.11.52.55.PM.mov

PR Reviewer Checklist

The reviewer will copy/paste it into a new comment and complete it after the author checklist is completed

• 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:
  • iOS / native
  • Android / native
  • iOS / Safari
  • Android / Chrome
  • MacOS / Chrome
  • 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 was added in all src/languages/* files
  • 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 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.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

[Santhosh-Sellavel]

@arosiclair

Is this valid and working as expected?

Created three workspaces, S , S2, S3. Now went offline and deleted S3, creating a new workspace should the name should be S3 or S4.

Screen.Recording.2022-10-27.at.3.29.14.AM.mov

[Santhosh-Sellavel]

Looks good, few doubts.
#11875 (comment)
#11875 (comment)

[arosiclair]

Is this a separate bug or part of this? After deleting the workspace reappears.

I ran into this in dev as well. This looks to be a separate issue with the OpenApp command not correctly removing policies that were deleted. We can ignore that issue for this PR

Created three workspaces, S , S2, S3. Now went offline and deleted S3, creating a new workspace should the name should be S3 or S4.

Since the delete on S3 is only pending while offline, the new workspace should be S4

[Santhosh-Sellavel]

Found this Issue it has some console errors. Since this is a separate issue confirmed here, ignoring this one for this review and will raise this in slack!

So Approving, Looks good, and tests well!
C+ Reviewed
Checklist: #11875 (comment)

All you @puneetlath

[melvin-bot]

@arosiclair looks like this was merged without the checklist test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

[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.

[OSBotify]

🚀 Deployed to staging by @arosiclair in version: 1.2.22-0 🚀

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

[OSBotify]

🚀 Deployed to production by @Julesssss in version: 1.2.22-3 🚀

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

[Santhosh-Sellavel]

@arosiclair

For all PRs that are linked to E/E issues, C+ comments and tags any assigned Expensify engineers in the PR asking them to check the E/E issue.

• If the E/E issue is a bug, a BZ is already assigned, internal engineer cc's the BZ in a comment on the PR so C+ knows who is paying.
• If the E/E isn't a bug, internal engineers add the Bug label to assign one, then engineer comments on the PR tagging the BZ who's assigned to issue payment.

Can you mention the BZ here?

[arosiclair]

This bug was reported and fixed internally so no contributor payment should be necessary

[puneetlath]

Ah actually, we need to pay out @Santhosh-Sellavel for his C+ review. I'll tag the issue.

[sonialiap]

@Santhosh-Sellavel sorry about the delay with the payment, I was pinging you in the wrong repo 😅 Could you apply for this job so that I can issue a payment for your review? Let me know once you do that

[Santhosh-Sellavel]

Done @sonialiap !

[rushatgabhane]

Hi, this PR missed an edge case when deleting the policy Onyx

• [HOLD for payment 2023-01-30] [$1000] Pencil icon does not disappear for the archived room if the WS is deleted from another device #14260

Why was it happening?

When deleting a policy, we didn't remove any draft comments and the draft indicator icon.