text:
15211: search pronouns

Details

Now the PronounsPage is a class component and will show a search input to filter the pronouns.
Fixed Issues

$ https://github.com/Expensify/App/issues/15211
PROPOSAL: https://github.com/Expensify/App/issues/15211#issuecomment-1436578720
Tests

Open the Pronouns page

You should see an input and no options

Open the Pronouns page

Write some letters to start seeing some options

Click on one and it should be applied to your profile

[ ] Verify that no errors appear in the JS console

Offline tests

Open the Pronouns page
Write some letters to start seeing some options
Click on one and it should be applied to your profile only locally, you won't see it applied to other devices
Connect to the internet, it will sync with the server and you will see the selected pronouns on your other devices

QA Steps

Same as above

[ ] Verify that no errors appear in the JS console

PR Author Checklist

[x] I linked the correct issue in the ### Fixed Issues section above
[x] I wrote clear testing steps that cover the changes made in this PR

[x] I added steps for local testing in the Tests section
[x] I added steps for the expected offline behavior in the Offline steps section
[x] I added steps for Staging and/or Production testing in the QA steps section
[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 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 / Chrome
[x] iOS / native
[x] iOS / 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. toggleReport and not onIconClick)
[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 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.
[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] 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 using Avatar are 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 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 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)
[x] 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)
[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(themeColors.componentBG)

[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 Avatar is modified, I verified that Avatar is 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 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.
[x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[x] I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

https://user-images.githubusercontent.com/1676818/220338744-bd3fea6b-6be6-4478-b1c4-5347c46a264d.mp4

Mobile Web - Chrome

https://user-images.githubusercontent.com/1676818/220338815-3e6118cd-51d8-40d0-a95e-7992e2cc463a.mp4

Mobile Web - Safari

https://user-images.githubusercontent.com/1676818/220338920-aa918ea4-bd10-4dbd-b3aa-bb5e6386ae92.mp4

Desktop

https://user-images.githubusercontent.com/1676818/220338988-848230b9-1487-4a02-89f3-b026e0e2ccf1.mp4

iOS

https://user-images.githubusercontent.com/1676818/220339195-6fd72d7d-1ba4-4535-9052-619913704046.mp4

Android

https://user-images.githubusercontent.com/1676818/220339312-44df8e69-4720-4da6-8e8b-3c84a189a5f8.mp4

@puneetlath @mollfpr 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]

@gedu are you ready for us to review? If so, I'll let @mollfpr take the first pass.

@gedu are you ready for us to review? If so, I'll let @mollfpr take the first pass.

Yes, should be ready

Missing JSDoc on onChangeText function.

What should I add? I follow Avoid descriptions that don't add any additional information
it doesn't receive a param and doesn't return a value.  I looked at SearchPage, NewChatPage, WorkspaceInvitePage and didn't have JSDoc.
Could you help me what would be the best way to Document a function like onChangeText?

Yeah, you’re right! Since we have a default value for the parameter, we’re good without the JSDoc.

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 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.
[ ] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[ ] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

Good question. Maybe we should do it similar to the Timezone page. Where the input is filled with your current choice, but the text is selected so that if you start typing it is overwritten. What do you think?
https://user-images.githubusercontent.com/1371996/220680871-c72ead61-cf16-4c04-bf29-ab28c88b1bdb.mov

Also, we should allow selection via arrow keys. Like we do on the New Chat page.

Good question. Maybe we should do it similar to the Timezone page. Where the input is filled with your current choice, but the text is selected so that if you start typing it is overwritten. What do you think?

I Think this is easy to add.

Also, we should allow selection via arrow keys. Like we do on the New Chat page.

For this one I will have to look a bit more

@puneetlath for the input filled seems that there is a bug on iOS, it isn't selecting the text (this error happens on Timezone Page too)
https://user-images.githubusercontent.com/1676818/220884035-6dd05737-741b-4a4b-a95c-45c54c0be626.mov
what should I do?

@gedu Is the issue you mentioned need to be fixed separately on TimezonePage and PronounsPage? Or it can be in one fix?

@gedu Is the issue you mentioned need to be fixed separately on TimezonePage and PronounsPage? Or it can be in one fix?

It can be fixed together, I rollback and won't submit it

All should be ok now, is behaving the same way as the videos in the description

ok cool. @mollfpr can you give it the first review?

The code changes look good.
@puneetlath Do you think the bottom margin of the title and the selection is too far?

Before
After

We have extra 12px vertical padding on the text input; we can add new props for the text input wrapper to eliminate the top padding.
Here's how it looks like before/after adding 0 top padding on the text input wrapper.

Before
After

I like the after shot where you remove some of that padding.
Also, can we make the search results look like the list selection used to look like, with the horizontal separators between results?

Also, I agree with having the current pronoun look exactly like the timezone does. Ideally that should be a reusable push-to-page component we can use.

Ok cool. So to summarize @gedu we want to:

Update the padding
Style it exactly like the timezone page, with separators

Looks like that just means we need to pass the shouldHaveOptionSeparator prop on the OptionsSelector.

Ok cool. So to summarize @gedu we want to:

Update the padding
Style it exactly like the timezone page, with separators

Cool, I will take a look at it

@mollfpr Hey, I saw that the text Your pronouns are shown on your profile. had an extra 6px vertical margin, removing it the screen looks like this

What do you think? or should I add a new prop to override the style for the input?
Note: if I add a new prop I think is better to pass a style and let you override, because playing with just setting the padding to 0px could make the component confusing, because you can place the input at the bottom and the vertical padding, in that case, is different @puneetlath

Hmm I'm not sure what the standard is here or if we are being consistent throughout the app, but I think 12px of top padding in these views (where you have a page header followed by text or a UI component) typically looks nice:

I think we removed the top padding on views that start with an avatar though, so maybe we don't have a consistent pattern here yet.

@gedu @shawnborton Yeah, we don't have a consistent pattern yet. I'm okay if we go with the current looks until we have the correct margin between the title and the component.

@gedu @shawnborton Yeah, we don't have a consistent pattern yet. I'm okay if we go with the current looks until we have the correct margin between the title and the component.

So, should I remove the extra margin from the title? styles.mb6

For that change, can we see what it looks like when the input focused? We probably want 20px of margin under the text and above the input.

@shawnborton Here you go.

Cool, that works for me.

@gedu I found a bug after refreshing the pronouns page; then selecting a pronoun. The selected pronoun is not checked, and the input value is not cleared.
https://user-images.githubusercontent.com/25520267/221626386-6b6aa5af-b02f-48d0-8962-214c6bd430b2.mov

@gedu I found a bug after refreshing the pronouns page; then selecting a pronoun. The selected pronoun is not checked, and the input value is not cleared.

I will take a look

@gedu I found a bug after refreshing the pronouns page; then selecting a pronoun. The selected pronoun is not checked, and the input value is not cleared.

I'm still looking at this, this bug is happening on TimezonePage too. Seems that after refreshing the page, the lifecycle of the component breaks.
@mountiny should I keep looking into this? or we can create a follow-up PR given that happens on other pages?

@gedu On the timezone select page, it's fixed on this PR. Maybe you can find something there?

@gedu Lets have a look at the other PR @mollfpr linked if we can see how it was fixed there. Would be ideal to do it here too.

@gedu Lets have a look at the other PR @mollfpr linked if we can see how it was fixed there. Would be ideal to do it here too.

Yes, I just found a similar solution and is working, thanks for the input, will upload the fix soon

https://user-images.githubusercontent.com/1676818/221840672-b4d1d851-a690-462a-b1d2-371d12117e03.mp4
@mollfpr

Thanks, @gedu for the updates! @mountiny Yup, I’ll review it again within an hour.

🚀 Deployed to staging by https://github.com/puneetlath in version: 1.2.78-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/mountiny in version: 1.2.78-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: MelvinBot OSBotify gedu mollfpr mountiny puneetlath shawnborton


text:
Modify emojiHeaderContainer style with a -1 top, only on non-native devices

Details
As per the discussion on #15282 there is a browser specific bug leading to a small gab between the emoji category header and the header in the emoji list as you scroll. This is leading to a flickering effect as the emojis scroll behind the header and into this gap.
As the chrome team has opted not to fix this for a number of years the agreed upon interim solution is to apply a top:-1 space on non-native device.
Fixed Issues

$ https://github.com/Expensify/App/issues/15282
$ https://github.com/Expensify/App/issues/15282#issuecomment-1441902504
Tests

[X] Verify that no errors appear in the JS console
[X] Validate manual test in Chrome 110, iOS 16.3 Safari, iOS Latest Chrome Mobile, iOS 16.3 Native, MacOS Desktop

Load app
Click on emoji icon in bottom right of message bar
Scroll through list of emojis, confirming no emoji flickering is experienced

Offline tests

[X] Complete same tests as above while in network was set to offline in chrome dev tools

QA Steps

[X] Verify that no errors appear in the JS console

Load app and login
Click on emoji icon in bottom right of message bar
Scroll through list of emojis, confirming no emoji flickering is experienced

PR Author Checklist

[X] I linked the correct issue in the ### Fixed Issues section above
[X] I wrote clear testing steps that cover the changes made in this PR

[X] I added steps for local testing in the Tests section
[x] I added steps for the expected offline behavior in the Offline steps section
[x] I added steps for Staging and/or Production testing in the QA steps section
[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).

[ ] I included screenshots or videos for tests on all platforms
[ ] I ran the tests on all platforms & verified they passed on:

[ ] Android / native
[x] Android / Chrome
[ ] iOS / native
[x] iOS / 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. toggleReport and not onIconClick)
[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 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.
[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] 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 using Avatar are 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 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 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)
[x] 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)
[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(themeColors.componentBG)

[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 Avatar is modified, I verified that Avatar is 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 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.
[x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[ ] I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Mobile Web - Chrome
https://user-images.githubusercontent.com/8822656/222041828-1041ab6c-3c70-44cc-bb5f-7d8b5c4bcc16.MP4

Mobile Web - Safari
https://user-images.githubusercontent.com/8822656/222041854-f71f4b6d-b704-43fd-a4ab-06525dc5882b.MP4

Desktop
https://user-images.githubusercontent.com/8822656/222042237-26986498-4336-466a-82c6-d46a76fab9cf.mp4

iOS

Android

I have read the CLA Document and I hereby sign the CLA

recheck

recheck

@s77rt Thanks for your help with the comments on the Issue, i think the changes in this PR reflect what you were thinking. I am wondering if you could give any tips before continuing through the submission process.
I also have not been able to get android or iOS versions working locally. I noticed some links to stack overflow articles on how to get iOS and android working, but im not able to access them unfortunately since i dont have an @expensify.com email address.
Is there some other way to verify that this change does not affect iOS or Android native versions?

@thienlnam @s77rt 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]

I have read the CLA Document and I hereby sign the CLA

@patrickcze Thanks for the quick PR. I have few notes regarding the PR template:

Do not alter the PR template (it could break automation)

"Verify that no errors appear in the JS console" checkbox is after the test steps
"Validate manual test in Chrome..." why did you add this?

The tests are not clear enough, you have to be explicit, as a rule of thumb over-explain (Login, Go to any chat, etc.)

You missed the go to any chat step which is critical otherwise it's confusing.
The last step "no emoji flickering is experienced" is not correct, we are fixing the gap issue here not flicker effects.

Do not include offline tests if they are not applicable i.e. there is no difference in the expected behaviour compared with "Tests". Just write n/a.

Running Android and iOS should work out of the box, just confirm you have the required dev env (Android Studio, Xcode, etc.)

Android:

npm run android

iOS:

cd ios; pod install; cd ..
npm run ios

I will start review once you complete the author checklist, please tag me once you do.

Thanks for the feedback @s77rt, i have updated the template. Ill give android and iOS another shot

@s77rt Check list is complete, and Ready for Review. Do I need to wait for my proposal in UpWork being approved first?
Thanks again for your assistance on this one.

Hey @patrickcze just an FYI, all PRs go through a review process from on of our C+ and then a final review from an Expensify employee before it can be merged

@thienlnam thanks for the heads up, just for clarity whats a C+ i have not heard that term before

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 Issues section 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 Tests section
[X] I verified the steps for Staging and/or Production testing are in the QA steps section
[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 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 / Chrome
[X] iOS / native
[X] iOS / 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. toggleReport and not onIconClick).
[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 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.
[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] 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 using Avatar have 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.js 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 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)
[X] 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)
[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(themeColors.componentBG)

[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 Avatar is modified, I verified that Avatar is 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 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.
[X] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[X] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web
https://user-images.githubusercontent.com/16493223/222258120-c7dca5ef-b169-42d6-82b2-064e93887570.mp4

Mobile Web - Chrome
https://user-images.githubusercontent.com/16493223/222258103-3c339e41-a797-4dd5-b695-8e779e529ae5.mp4

Mobile Web - Safari
https://user-images.githubusercontent.com/16493223/222258087-481c8626-287e-4c94-964e-3a8973660ef4.mp4

Desktop
https://user-images.githubusercontent.com/16493223/222257631-8b9e218d-b68a-4623-9aad-95f5fdc4eb81.mp4

iOS
https://user-images.githubusercontent.com/16493223/222257606-ec26fe90-263b-44d4-9eec-1ee7571f54f5.mp4

Android
https://user-images.githubusercontent.com/16493223/222257587-8711da8c-0138-4c5a-9e57-860ecc8a4619.mp4

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

Jest test 3 was taking multiple hours to run / the other two passed already

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

🚀 Deployed to staging by https://github.com/thienlnam in version: 1.2.78-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/mountiny in version: 1.2.78-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

source: gharchive/pull-request

authors: MelvinBot OSBotify patrickcze s77rt thienlnam

repo: Expensify/App

license: MIT

license_type: permissive

license_source: github-api


text:
Clear validate error on refresh

Details

Validate error is cleared on refresh and navigating away and back.
Fixed Issues

$ https://github.com/Expensify/App/issues/23813
PROPOSAL: https://github.com/Expensify/App/issues/23813#issuecomment-1665676235
Tests

Go to setting > profile > contact method
Click on add contact method
Add a new contact method
Click on this contact method to verify
Enter a random magic code to make the error appear
Reload the page and notice that the error has cleared, on native click back and on the contact method again and notice the error has cleared.

[x] Verify that no errors appear in the JS console

Offline tests

N/A
QA Steps

Same as Test Steps
PR Author Checklist

[x] I linked the correct issue in the ### Fixed Issues section above
[x] I wrote clear testing steps that cover the changes made in this PR

[x] I added steps for local testing in the Tests section
[x] I added steps for the expected offline behavior in the Offline steps section
[x] I added steps for Staging and/or Production testing in the QA steps section
[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 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 / Chrome
[x] iOS / native
[x] iOS / 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. toggleReport and not onIconClick)
[x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[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 approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[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] 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 using Avatar are 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 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] If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
[x] 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)
[x] 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)
[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(themeColors.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 Avatar is modified, I verified that Avatar is 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 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.
[x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[x] I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web
https://github.com/Expensify/App/assets/41372145/c4e2d028-e86a-493f-9e24-3188ed3e463d

Mobile Web - Chrome
https://github.com/Expensify/App/assets/41372145/d71e4b50-a513-4d2b-bb2f-d12e954db688

Mobile Web - Safari

https://github.com/Expensify/App/assets/41372145/a6a9daee-6b26-4858-9375-e3a73853c80f

Desktop

https://github.com/Expensify/App/assets/41372145/5547ab1a-6109-41f4-8b94-04fbd992dd2b

iOS
https://github.com/Expensify/App/assets/41372145/b1a7abd0-6e04-4c3e-9877-472e5152f81a

Android
https://github.com/Expensify/App/assets/41372145/589122ef-5c72-4f3c-9002-222a0f666348
<!--
<p>add screenshots or videos here -->

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 Issues section 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 Tests section
[x] I verified the steps for Staging and/or Production testing are in the QA steps section
[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 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:

[ ] Android / native
[x] Android / Chrome
[x] iOS / native
[x] iOS / 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. toggleReport and not onIconClick).
[x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[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 approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[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] 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 using Avatar have 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.js 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 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)
[x] 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)
[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(themeColors.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 Avatar is modified, I verified that Avatar is 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 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.
[x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[x] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web
https://github.com/Expensify/App/assets/3069065/2e7de49a-db31-4681-8321-b49eae90736d

Mobile Web - Chrome
https://github.com/Expensify/App/assets/3069065/af5c2d99-3da9-4ee9-aa11-fa736cf03493

Mobile Web - Safari
https://github.com/Expensify/App/assets/3069065/28574a74-aec7-4076-8b2a-9b2ca17ee62a

Desktop
https://github.com/Expensify/App/assets/3069065/4c5f22fc-6c3e-4b4c-b2a4-3160815cce13

iOS
https://github.com/Expensify/App/assets/3069065/b3964b68-6d69-4013-a39b-60ab62fb6713

Android

@mananjadhav

did you review on Android native? It's blocking the reviewer checklist 😄

@johnmlee101 Yes I did 🤦 . I added the screenshot but I didn't mark the item. Done now.

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

🚀 Deployed to staging by https://github.com/johnmlee101 in version: 1.3.56-0 🚀

platform
result

🤖 android 🤖
failure ❌

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

https://github.com/Expensify/App/pull/24513 - failing https://github.com/Expensify/App/issues/23813.

@mvtglobally Applause reported this issue as a QA fail. It's not a deploy blocker but can you provide some more details?

🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.56-24 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

authors: OSBotify WikusKriek johnmlee101 mananjadhav roryabraham


text:
Display "Receipt missing details" title when needed

Details

Fixed Issues

https://github.com/Expensify/App/issues/26832
PROPOSAL:
Tests
Tests

Set up Smartscan if you haven't yet. I'd recommend clearing any existing receipts in there to make this easier.
Run bwm.sh
Create a new receipt money request from newDot by going to + -> Request Money -> Scan and sending a random image. A  "Smartscanning" transaction should be created.
Wait for a bit for bwm to do its thing (you are waiting for SmartScan?receiptID=XXX).
Log into expensify.com.dev/expensiworks/
Find the receipt you just uploaded (if you cleared up the other ones, it'll be the only one!) and populate all fields except for the merchant.
Wait for another bit for bwm to do its thing
Fields should be populates in App, and the merchant set to "Unknown merchant" and with a visible error:

Confirm the Money Request title is now "Receipt missing details":

[x] Verify that no errors appear in the JS console

Offline tests
None
QA Steps

Create a new receipt money request from newDot by going to + -> Request Money -> receipt and sending a receipt with a non-visible merchant image. A "Smartscanning" transaction should be created.
Wait for the receipt to smartscan. Ideally, the merchant will be missing.
Fields should be populates in App, and the merchant set to "Unknown merchant" and with a visible error.
Confirm the Money Request title is now "Receipt missing details":

[ ] Verify that no errors appear in the JS console

PR Author Checklist

[x] I linked the correct issue in the ### Fixed Issues section above
[x] I wrote clear testing steps that cover the changes made in this PR

[x] I added steps for local testing in the Tests section
[x] I added steps for the expected offline behavior in the Offline steps section
[x] I added steps for Staging and/or Production testing in the QA steps section
[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 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 / Chrome
[x] iOS / native
[x] iOS / 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. toggleReport and not onIconClick)
[x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[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 approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
[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] 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 using Avatar are 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 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] If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
[x] 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)
[x] 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)
[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(themeColors.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 Avatar is modified, I verified that Avatar is 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 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.
[x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[x] I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

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 the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
[ ] 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 grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is 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 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.
[ ] 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 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.
[ ] 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.
[ ] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
[ ] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

Mobile Web - Chrome

Mobile Web - Safari

Desktop

iOS

Android

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

🚀 Deployed to staging by https://github.com/MonilBhavsar in version: 1.3.69-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/mountiny in version: 1.3.69-2 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

🚀 Deployed to staging by https://github.com/MonilBhavsar in version: 1.3.70-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/thienlnam in version: 1.3.70-8 🚀

platform
result

🤖 android 🤖
failure ❌

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

authors: Gonals MonilBhavsar OSBotify


text:
Add workspace name as subtitle in individual modal screens

Details

Adding workspace name that get from props withFullPolicy hoc and call the this.props.policy.name and pass it to HeaderWithCloseButton component.
Update workspace page included:

Invite page - workspace/${policyID}/invite
Settings page - workspace/${policyID}/settings
Card page - workspace/${policyID}/card
Reimburse page - workspace/${policyID}/reimburse
Bills page - workspace/${policyID}/bills
Invoices page - workspace/${policyID}/invoices
Travel page - workspace/${policyID}/travel
Bank account page - workspace/${policyID}/bank-account

Fixed Issues

$ https://github.com/Expensify/App/issues/7840
Tests

Open workspace page, open the page below, and verify that the workspace name is shown in the modal header.

Invite page - workspace/${policyID}/invite
Settings page - workspace/${policyID}/settings
Card page - workspace/${policyID}/card
Reimburse page - workspace/${policyID}/reimburse
Bills page - workspace/${policyID}/bills
Invoices page - workspace/${policyID}/invoices
Travel page - workspace/${policyID}/travel
Bank account page - workspace/${policyID}/bank-account

[x] Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

[x] I verified the PR has a small number of commits behind main
[x] I linked the correct issue in the ### Fixed Issues section above
[x] I wrote clear testing steps that cover the changes made in this PR

[x] I clearly indicated the environment tests should be run in (Staging vs Production)

[x] I wrote testing steps that cover success & fail scenarios (if applicable)
[x] I included screenshots or videos for tests on all platforms
[x] I ran the tests & veryfy they passed on:

[x] iOS / native
[x] Android / native
[x] iOS / Safari
[x] Android / Chrome
[x] MacOS / Chrome
[x] MacOS / Desktop

[x] I verified there are no console errors related to changes in this PR
[x] I followed proper code patterns (see Reviewing the code)

[x] I added comments when the code was not self explanatory
[x] I put all copy / text shown in the product in all src/languages/* files (if applicable)
[x] I followed proper naming convention for platform-specific files (if applicable)
[x] I followed style guidelines (in Styling.md) for all style edits I made
[x] I followed the JSDocs style guidelines (in STYLE.md)

[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 using Avatar are working as expected)
[x] I corroborated the UI performance was not affected (the performance is the same than main branch)
[x] If I created a new component I verified that a similar component doesn't exist in the codebase

PR Reviewer Checklist

[ ] I verified the PR has a small number of commits behind main
[ ] 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 testing environment is mentioned in the test steps

[ ] I verified testing steps cover success & fail scenarios (if applicable)
[ ] I checked that screenshots or videos are included 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

[ ] I verified there are no console errors related to changes in this PR
[ ] I verified proper code patterns were followed (see Reviewing the code)

[ ] I verified comments were added when the code was not self explanatory
[ ] I verified any copy / text shown in the product was added in all src/languages/* files (if applicable)
[ ] I verified proper naming convention for platform-specific files was followed (if applicable)
[ ] I verified style guidelines were followed
[ ] I verified the JSDocs style guidelines (in STYLE.md) were followed

[ ] I verified that this PR follows the guidelines as stated in the Review Guidelines
[ ] I verified other components are not impacted by changes in this PR (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 the UI performance was not affected (the performance is the same than main branch)
[ ] If a new component is created I verified that a similar component doesn't exist in the codebase

QA Steps

Open workspace page, open the page below, and verify that the workspace name is shown in the modal header.

Invite page - workspace/${policyID}/invite
Settings page - workspace/${policyID}/settings
Card page - workspace/${policyID}/card
Reimburse page - workspace/${policyID}/reimburse
Bills page - workspace/${policyID}/bills
Invoices page - workspace/${policyID}/invoices
Travel page - workspace/${policyID}/travel
Bank account page - workspace/${policyID}/bank-account

[x] Verify that no errors appear in the JS console

Screenshots

Web

https://user-images.githubusercontent.com/25520267/157229371-009ad8f6-1e00-4016-aad4-b9b20594efaf.mov
Mobile Web

https://user-images.githubusercontent.com/25520267/157229775-9976012a-431d-4306-9c43-75f817909272.mov
Desktop

https://user-images.githubusercontent.com/25520267/157229898-4fd3c8bd-82cd-424e-b47a-020f7ef01aa3.mov
iOS

https://user-images.githubusercontent.com/25520267/157230027-b42de577-3b9c-4385-9ee6-891d56f7c570.mov
Android

https://user-images.githubusercontent.com/25520267/157230070-87adfa4b-188e-416b-9f2b-22cf4706e706.mov

re-create from https://github.com/Expensify/App/pull/8038

@mollfpr could you please merge main from upstream into your branch, thanks!

@rushatgabhane There's infinite loop render happen in hoc withFullPolicy. I think it's because useNavigationState keeps re-render.
https://github.com/Expensify/App/blob/c26e41573c6b6ea91abef85afc173ba6ecc4cd2c/src/pages/workspace/withFullPolicy.js#L89
I have 2 solutions for the problem

using navigation getState() instead of useNavigationState hook. This will keep the component from re-render.

- const currentRoute = _.last(useNavigationState(state => state.routes || []));
+ const currentRoute = _.last(navigationRef.current.getState().routes);

All this happens because when we try to redirect to workspace/:policyID/bank-account but we don't have any bank account yet so the WorkspaceBankAccountPage will redirect us to /bank-account/BankAccountStep with a function before rendering the page component. We can fix this with move the function call inside componentDidMount and the infinite loop will disappear.
https://github.com/Expensify/App/blob/c26e41573c6b6ea91abef85afc173ba6ecc4cd2c/src/pages/workspace/WorkspaceBankAccountPage.js#L85-L88

    componentDidMount() {
        this.unsubscribe = this.props.navigation.addListener('focus', this.onScreenFocus);

        if (!this.getShouldShowPage()) {
            this.navigateToBankAccountRoute();
        }
    }

@mollfpr fantastic work finding the solutions!
The problem with solution 1 is that path is undefined, i.e. it doesn't re-render when we actually want it to. The cause of infinite loop still exists, it just breaks the loop because we don't re-render.

All this happens because when we try to redirect to workspace/:policyID/bank-account but we don't have any bank account yet so the WorkspaceBankAccountPage will redirect us to /bank-account/BankAccountStep with a function before rendering the page component. We can fix this with move the function call inside componentDidMount and the infinite loop will disappear

I agree. This is the root cause, and it won't cause an infinite loop anymore.
Let's get this done!

@rushatgabhane @Luke9389 It's all set, ready for another review.

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

🚀 Deployed to staging by @Luke9389 in version: 1.1.43-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by @roryabraham in version: 1.1.43-2 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: OSBotify mollfpr rushatgabhane


text:
fixed modal animations

Please review.
Details
Details can be read https://github.com/Expensify/Expensify.cash/issues/2335#issuecomment-820618607
Fixed Issues

Fixes #2335
Tests / QA Steps

Click the search icon to open the Search Modal.
Open all the available models from the FAB button.
Open the User Details / Group participants modal.
Open the User Settings Modal.
For all the modals enter and exit animation should be smooth and consistent.

Tested On

[x] Web
[x] Mobile Web
[x] Desktop
[x] iOS
[x] Android

Screenshots

Web

https://user-images.githubusercontent.com/24370807/117487785-29b46280-af89-11eb-9cd5-48aa160493e8.mp4
Mobile Web

https://user-images.githubusercontent.com/24370807/116024431-cf073680-a66b-11eb-93c0-a452dbd8fdff.mp4
Desktop

https://user-images.githubusercontent.com/24370807/116080015-2af6ad00-a6b6-11eb-9960-4e2fef0b2232.mp4
iOS

Not able to record it as I have MAC VM but the animation on IOS works smoothly.
Android

https://user-images.githubusercontent.com/24370807/117493077-1c4ea680-af90-11eb-94eb-4000638bf4c6.mp4

Requesting reviews from those who reviewed the original PR as they will have additional context!

I have excluded the changes for the Emoji Picker as my changes caused a regression and i think its better to work on Emoji Picker separately as there couple of things that need to be fixed on it.
@marcaaron Initially I was suggesting to update the react-native-modal to latest minor as they have made few tweaks such as settings Interactions before animations but it won't be helpful on the web as InteractionManager does not work there.
So sticking to navigation event is fine. but the lib could be updated as there are no breaking changes.

@parasharrajat can we maybe figure out how to apply this solution to the IOU pages? The animations there are still inconsistent.
https://user-images.githubusercontent.com/32969087/117064498-fab89b00-acc1-11eb-998b-6f699827edba.mp4
Also, note there is still some lag when opening the search, new chat, new group pages. Which is probably something in addition to waiting for the text input. Could we maybe wait until the transition is done to do some extra work being done on those pages?
I'm also curious if we can incorporate this into the ScreenWrapper component so the logic is not repeated many times. Here's what I'm thinking...

Add the this.props.navigation.addListener logic to ScreenWrapper and inside set up the logic if we have passed an onTransitionEnd prop
Next figure out which expensive things interfere with the layout transition in each screen and perform that logic after the onTransitionEnd callback is done.

Lmk if that makes sense? I think it will give us a more sustainable way to handle similar issues in the future.

@marcaaron I noticed  the same In our case rendering the optionList is very expensive. I would try to see what can be done to minimize the load.
And good Idea in moving the logic to ScreenWraper.

As marc mentioned that we can just move this logic up to ScreenWrapper which is already used in all screens thus this hook would be unnecessary at times.

So I profiled the pages and found that the fps is pretty low for the app. We have a lot of long tasks and some microtasks take a long time to finish. I was not really able to pinpoint that to the source in our app as performance tools are not pointing it correctly on chrome but efforts are still continued on it.
Few things I noticed.

OptionSelector component's first render is too expensive. if we delay its render until the SearchPage animation has complete, the animation is smooth.
React-navigation 's navigation to any screen is very expensive on the web. When we click on the Search Icon it takes an enormous(blocking the thread) 200ms to naviagte. On Native, it performs well due to react-native-screens.
I also noticed that React native's Image module uses JS to download images that were seen consuming the thread while the search page was opening.
This punch in a question, Are we allowing the browser to reuse the cache for the same images? I think we pass a new hash in the URL for each instance of an image.

Any help in how can I correctly pinpoint the source code while profiling will be great. Browser points to the low lever lib code instead.

OptionSelector component's first render is too expensive. if we delay its render until the SearchPage animation has complete, the animation is smooth.

Nice! That might be a good place to start as it is easy to delay the rendering and replace with a loading spinner.

React-navigation 's navigation to any screen is very expensive on the web. When we click on the Search Icon it takes an enormous(blocking the thread) 200ms to naviagte

Not sure how to get around this one. Maybe a custom animation for the drawer content. It seems like an issue that has been reported before.

Are we allowing the browser to reuse the cache for the same images? I think we pass a new hash in the URL for each instance of an image.

We should be. At least for avatars, once they load they are not loaded again.
https://user-images.githubusercontent.com/32969087/117339347-58bcbe00-ae3b-11eb-8ffd-879074d755f6.mp4

@jasperhuangg Updated.

🚀 Deployed to staging in version: 1.0.42-2🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

This PR may have caused a regression. The weird thing is it's very inconsistent: sometimes the transitionEnd event handler is executed, and sometimes it's not. I have not been able to find a pattern.

On the revert branch I am unable to reproduce the regression, so I think we should revert this PR and try again.

Thanks. I was going to point that in the slack. It seems that transitionEnd is not reliable on IOS. We have to find another alternative to it. Damn.

🚀 Deployed to production in version: 1.0.44-0🚀

platform
result

🤖 android 🤖
failure ❌

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

Paying now! Apologies for the delay @parasharrajat, nice job!

Wait we have revert the PR. New PR is in WIP. @MitchExpensify

My mistake. Can you point me to the new PR or does that exist yet?

Here it is https://github.com/Expensify/Expensify.cash/pull/2956. We faced one regression on IOS for which there is no strong reason why it is happening on IOS but let me just ask Marc what does he think about it?

Awesome, thanks. I'll keep an eye on that and end the contract once its merged and no issues after 7 days.

authors: MariaHCD MitchExpensify OSBotify marcaaron parasharrajat roryabraham


text:
Kanallar

Overview
Replace this paragraph with a description of your changes and reasoning. Provide links to external references/discussions if appropriate.

Resolves #NN.
Nature of This Change

[ ] 🐛 Fixes a bug

[ ] 🚀 Implements a new feature

[ ] 🛁 Rewrites existing documentation

[ ] 💅 Fixes coding style

[ ] 🔥 Removes unused files / code

Related Application Change

Application Pull Request: https://github.com/ExpressionEngine/ExpressionEngine/pulls/NNN

Hi @darklife77, I'm not sure if this was an accident but this PR doesn't look like it was supposed to be submitted as it only contains a change to the template example to use a language specific tag of yours. I'm closing this PR but let me know if there's a different reason you submitted it.


text:
An error while loading MagicStorageExtra

Hello. I can not seem to get the mod to work at all on my server. Even having it as the only mod, it will load the world let me in and have 0 mods activated. When I go and look my JSON file will go from:
[
"MagicStorageExtra"
]
to:
[
]
If anyone knows how to fix this it would be greatly appreciated. I've been paying for a server for 2 months trying to get this to work. (I'm bad at procrastination)
There is an error but the console deletes it for some reason when I try and copy it. I was able to get this screen shot though.

I am unable to replicate this.
Could you try deleting then reinstalling MSE and, if you have it, RecursiveCraft?

So just a little bit more context I am trying this on my server.  Single player works fine.  Regardless I did what you asked and deleted my MSE file and redownloaded it.  It is the only mod on the server.  I still get this error.

Ok. I was talking to my friend about this and was wondering why you were asking about RecursiveCraft as I have never had that mod.  I found it in the mod browser and put it on the server with MSE and recipebrowser (just so i could quickly make sure it was there) and it works.  No error.  So I'm not sure why I needed it but I guess that fixed it.

You're not supposed to need it. It's supposed to be an optional dependency.
This is definitely a bug.
Am I right to assume this is a Linux server?
On Mon, Aug 23, 2021, 10:29 TacoStamp @.***> wrote:

Ok. I was talking to my friend about this and was wondering why you were
asking about RecursiveCraft as I have never had that mod. I found it in the
mod browser and put it on the server with MSE and recipebrowser (just so i
could quickly make sure it was there) and it works. No error. So I'm not
sure why I needed it but I guess that fixed it.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ExterminatorX99/MagicStorageExtra/issues/46#issuecomment-903554151,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AD3LUHVREYHOOB3N6HHIVITT6IBFDANCNFSM5CRGLNPQ
.
Triage notifications on the go with GitHub Mobile for iOS
https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675
or Android
https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email
.

No it shouldn't be as far as I know.  I am renting it through Bisect Hosting.

Bisect hosts Terraria servers on Linux

Yes, they replied to me as well.  Is this why I needed RecursiveCraft?

I did and got this error below.  It is causing Fargo's Mutant mod to error out as well now.

Does it load without Fargo's?

i put recursive craft on and both mods are working fine again

no i lied

this is my magic storage now

You didn't enable MSE

nope lol just realized it too.  It was but i guess if there is any error it takes it off the enable.json file and i forgot this fact.

but regardless i still seem to need recursive craft to run MSE

If you disable everything except MSE does it load?

no

Could you send the error that happens?

I get the same error (recursive craft integration) even with RecursiveCraft added. I'm also on Linux and using 64bit tModLoader.

Fixed in newest version

source: gharchive/issue

authors: ASterle ExterminatorX99 TacoStamp


text:
Bluetooth Keyboard Considerations on iPhone in iOS 15

Hardware

iPhone 12 Pro Max MG953LL/A
MAGIC KEYBOARD WITH NUM KEYPAD SG-USA
MRMH2LL/A

1. Unexpected response to Bluetooth Keyboard Inputs 1
https://user-images.githubusercontent.com/43663476/125501119-c26b2d5c-cd18-4256-a6f6-4e49289d17a2.mov
With the cursor in a text entry field, the keyboard switches to a mode in which unmodified inputs respond as though they are modified with ⌘. I have not yet been able to determine the trigger for this error to reproduce it but I will update this document if/when I do.

Possible resolution?

For apps compiled against the iOS 15 beta SDK, key commands no longer intercept text input and text editing commands while typing into text views and text fields. For example, pressing the Delete key always deletes a character and doesn’t trigger a Delete key command if one is present. To have a key command intercept text input, set the wantsPriorityOverSystemBehavior property to true on the key command. This is also required to have key commands take priority over focus keyboard navigation commands, such as arrow and tab key presses. (55118263)

Beta 5

(For iPad only, I think.)

repo: ExtraKeys/keys


text:
Credit

I look into things other people program for Friday Night Funkin', it's a long story. Basically, its partly the reason why I made my own engine, I was just not satisfied with using anyone else's projects at the time, and still am not. I'll spare you the details, as its best to just get to the point.

Please properly credit people in your projects, I'm not a fan of Kade at all whatsoever, in fact, I think his engine is hard to work with, but that doesn't matter because he still deserves credit given the fact you're using his code.
If you don't want to credit someone, don't use their code, it's kind of that simple. You can always reach out to other people, the FNF community has a lot of artists and programmers willing to collaborate who could help you make your own original engine.
Please properly credit people, and good luck with your future projects!

There's a reason why it's open-source? Although you are in the world of Friday Night Funkin' we're allowed to do anything we want with it.
Although I will look into that.

Open Source means you can use the code, not steal it, you still have to credit the authors, just like how you wouldn't steal Friday Night Funkin' and claim its yours because its ninjamuffin's game.

authors: EyeDaleHim Yoshubs

repo: EyeDaleHim/Platinum-Engine


text:
When using custom endpoints and poller reporting to Statsd, the hostname for the report is always base-bigip-com

Environment

Telemetry Streaming Version: "version":"1.14.0"
BIG-IP Version: 14.1.2.7

Summary
When defining custom endpoints and custom poller, there is not the correct hostname in the report sent to data consumer (noticed and tested with Statsd+grahpite). Hostname is base-bigip-com, instead of real hostname. This causes stats report to be sorted under hostname base-bigip-com, and rendering aggregation of statistics over multiple BIGIP's impossible.
This issue is reproducible.
Steps To Reproduce
Steps to reproduce the behavior:

Submit the following declaration:

{
	"cgnatPBAStats": {
		"class": "Telemetry_Endpoints",
		"items": {
			"PBAStats": {
				"name": "pbaStats",
				"path": "/mgmt/tm/security/nat/source-translation/stats"
			}
		}
	},
	"cgnatPoller": {
		"class": "Telemetry_System_Poller",
		"interval": 60,
		"enable": true,
		"endpointList": "cgnatPBAStats"
	},
	"customEndpointsSystem": {
		"class": "Telemetry_System",
		"enable": true,
		"systemPoller": [
			"cgnatPoller",
			{
				"interval": 60
			}
		]
	},
	"MyConsumer": {
		"class": "Telemetry_Consumer",
		"type": "Statsd",
		"host": "192.168.2.8",
		"protocol": "udp",
		"port": "8125"
	}
}

TCPDUMP of the packets sent to statsd consumer, shows the hostname field has value base-bigip-com, instead of the correct hostname of the device sending the report from the custom poller.

Compare that to the packet sent by the default system poller, which has the correct hostname set.
Also, visualizing the data sent to statsd using graphite-web, shows that the custom endpoints statistics end up under the host base-bigip-com, while the stats reported by the default system poller ends up under correct hostname(s).
Expected Behavior
Expected behaviour is that also customized statistics would be reported up under the hostname that sent the statistics.
Actual Behavior
This is the data-field of packet sent to statsd consumer,  obtained by a custom poller (pbaStats):
0000  66 35 74 65 6c 65 6d 65 74 72 79 2e 62 61 73 65   f5telemetry.base
0010  2d 62 69 67 69 70 2d 63 6f 6d 2e 70 62 61 53 74   -bigip-com.pbaSt
0020  61 74 73 2e 2d 56 4e 46 2d 41 50 4e 30 31 2d 70   ats.-VNF-APN01-p
0030  62 61 2d 73 74 61 74 73 2e 70 63 70 2d 6d 61 70   ba-stats.pcp-map
0040  52 65 73 70 6f 6e 73 65 73 3a 30 7c 67 0a 66 35   Responses:0|g.f5
0050  74 65 6c 65 6d 65 74 72 79 2e 62 61 73 65 2d 62   telemetry.base-b
0060  69 67 69 70 2d 63 6f 6d 2e 70 62 61 53 74 61 74   igip-com.pbaStat
0070  73 2e 2d 56 4e 46 2d 41 50 4e 30 31 2d 70 62 61   s.-VNF-APN01-pba
0080  2d 73 74 61 74 73 2e 70 63 70 2d 70 65 65 72 52   -stats.pcp-peerR
0090  65 71 75 65 73 74 73 3a 30 7c 67 0a 66 35 74 65   equests:0|g.f5te
00a0  6c 65 6d 65 74 72 79 2e 62 61 73 65 2d 62 69 67   lemetry.base-big
00b0  69 70 2d 63 6f 6d 2e 70 62 61 53 74 61 74 73 2e   ip-com.pbaStats.
00c0  2d 56 4e 46 2d 41 50 4e 30 31 2d 70 62 61 2d 73   -VNF-APN01-pba-s
00d0  74 61 74 73 2e 70 63 70 2d 70 65 65 72 52 65 73   tats.pcp-peerRes
00e0  70 6f 6e 73 65 73 3a 30 7c 67 0a 66 35 74 65 6c   ponses:0|g.f5tel
00f0  65 6d 65 74 72 79 2e 62 61 73 65 2d 62 69 67 69   emetry.base-bigi
0100  70 2d 63 6f 6d 2e 74 65 6c 65 6d 65 74 72 79 53   p-com.telemetryS
0110  65 72 76 69 63 65 49 6e 66 6f 2e 70 6f 6c 6c 69   erviceInfo.polli
0120  6e 67 49 6e 74 65 72 76 61 6c 3a 36 30 7c 67      ngInterval:60|g
This is corresponding data-field from same VE, but collect by the default system poller, with correct hostname:
0000  66 35 74 65 6c 65 6d 65 74 72 79 2e 73 6a 6f 73   f5telemetry.sjos
0010  74 72 6f 6d 2d 76 6e 66 30 31 2d 6c 6f 63 61 6c   trom-vnf01-local
0020  2e 76 69 72 74 75 61 6c 53 65 72 76 65 72 73 2e   .virtualServers.
0030  2d 56 4e 46 2d 41 50 4e 30 31 2d 76 73 48 54 54   -VNF-APN01-vsHTT
0040  50 5f 6f 75 74 2e 63 6c 69 65 6e 74 73 69 64 65   P_out.clientside
0050  2d 62 69 74 73 49 6e 3a 33 33 32 39 34 39 36 32   -bitsIn:33294962
0060  34 7c 67 0a 66 35 74 65 6c 65 6d 65 74 72 79 2e   4|g.f5telemetry.
0070  73 6a 6f 73 74 72 6f 6d 2d 76 6e 66 30 31 2d 6c   sjostrom-vnf01-l
0080  6f 63 61 6c 2e 76 69 72 74 75 61 6c 53 65 72 76   ocal.virtualServ
0090  65 72 73 2e 2d 56 4e 46 2d 41 50 4e 30 31 2d 76   ers.-VNF-APN01-v
00a0  73 48 54 54 50 5f 6f 75 74 2e 63 6c 69 65 6e 74   sHTTP_out.client
00b0  73 69 64 65 2d 62 69 74 73 4f 75 74 3a 38 38 30   side-bitsOut:880
00c0  33 33 38 34 39 36 7c 67 0a 66 35 74 65 6c 65 6d   338496|g.f5telem
00d0  65 74 72 79 2e 73 6a 6f 73 74 72 6f 6d 2d 76 6e   etry.sjostrom-vn
00e0  66 30 31 2d 6c 6f 63 61 6c 2e 76 69 72 74 75 61   f01-local.virtua
00f0  6c 53 65 72 76 65 72 73 2e 2d 56 4e 46 2d 41 50   lServers.-VNF-AP
0100  4e 30 31 2d 76 73 48 54 54 50 5f 6f 75 74 2e 63   N01-vsHTTP_out.c
0110  6c 69 65 6e 74 73 69 64 65 2d 63 75 72 43 6f 6e   lientside-curCon
0120  6e 73 3a 30 7c 67 0a 66 35 74 65 6c 65 6d 65 74   ns:0|g.f5telemet
0130  72 79 2e 73 6a 6f 73 74 72 6f 6d 2d 76 6e 66 30   ry.sjostrom-vnf0
0140  31 2d 6c 6f 63 61 6c 2e 76 69 72 74 75 61 6c 53   1-local.virtualS
0150  65 72 76 65 72 73 2e 2d 56 4e 46 2d 41 50 4e 30   ervers.-VNF-APN0
0160  31 2d 76 73 54 43 50 5f 70 38 30 30 30 5f 6f 75   1-vsTCP_p8000_ou
0170  74 2e 63 6c 69 65 6e 74 73 69 64 65 2d 62 69 74   t.clientside-bit
0180  73 49 6e 3a 30 7c 67 0a 66 35 74 65 6c 65 6d 65   sIn:0|g.f5teleme
0190  74 72 79 2e 73 6a 6f 73 74 72 6f 6d 2d 76 6e 66   try.sjostrom-vnf
01a0  30 31 2d 6c 6f 63 61 6c 2e 76 69 72 74 75 61 6c   01-local.virtual
01b0  53 65 72 76 65 72 73 2e 2d 56 4e 46 2d 41 50 4e   Servers.-VNF-APN
01c0  30 31 2d 76 73 54 43 50 5f 70 38 30 30 30 5f 6f   01-vsTCP_p8000_o
01d0  75 74 2e 63 6c 69 65 6e 74 73 69 64 65 2d 62 69   ut.clientside-bi
01e0  74 73 4f 75 74 3a 30 7c 67 0a 66 35 74 65 6c 65   tsOut:0|g.f5tele
01f0  6d 65 74 72 79 2e 73 6a 6f 73 74 72 6f 6d 2d 76   metry.sjostrom-v
0200  6e 66 30 31 2d 6c 6f 63 61 6c 2e 76 69 72 74 75   nf01-local.virtu
0210  61 6c 53 65 72 76 65 72 73 2e 2d 56 4e 46 2d 41   alServers.-VNF-A
0220  50 4e 30 31 2d 76 73 54 43 50 5f 70 38 30 30 30   PN01-vsTCP_p8000
0230  5f 6f 75 74 2e 63 6c 69 65 6e 74 73 69 64 65 2d   _out.clientside-
0240  63 75 72 43 6f 6e 6e 73 3a 30 7c 67 0a 66 35 74   curConns:0|g.f5t
0250  65 6c 65 6d 65 74 72 79 2e 73 6a 6f 73 74 72 6f   elemetry.sjostro
0260  6d 2d 76 6e 66 30 31 2d 6c 6f 63 61 6c 2e 74 65   m-vnf01-local.te
0270  6c 65 6d 65 74 72 79 53 65 72 76 69 63 65 49 6e   lemetryServiceIn
0280  66 6f 2e 70 6f 6c 6c 69 6e 67 49 6e 74 65 72 76   fo.pollingInterv
0290  61 6c 3a 36 30 7c 67                              al:60|g

One workaround seems to be to include system.hostname field in the same list of endpoints:

	"cgnatPBAStats": {
		"class": "Telemetry_Endpoints",
		"items": {
			"PBAStats": {
				"name": "pbaStats",
				"path": "/mgmt/tm/security/nat/source-translation/stats"
			},
			"systemHostname": {
				"name": "system",
				"path": "/mgmt/tm/sys/global-settings"

			}
		}
	},

So, the systemHostname endpoint needs to be added as item to each custom endpoints declaration, to have the hostname set correctly in stats reports sent to statds.
Ok, so maybe this is not a bug, but a enhancement would be nice, in that the hostname is set correctly also for customized pollers without this additional endpoint,  to get stats under correct host...

It looks like the statsd consumer falls back to a hostname of "base.bigip.com" if no hostname exists in the gathered data. I suspect you are also seeing an error in the log messages about not finding the hostname in the gathered data.
I agree that this behavior is undesirable, I have added AUTOTOOL-1893 to our internal product backlog to try and clean up this behavior.

We have tried to provide users more warnings about this behavior in v.15.0: https://clouddocs.f5.com/products/extensions/f5-telemetry-streaming/latest/setting-up-consumer.html#statsd-ref
Closing this issue.
Additional note, the internal issue number is actually AUTOTOOL-1894.


text:
Add InChiKey - International Chemical Identifier - to PIDMR Backend

Provider to Add:
InChiKey - International Chemical Identifier

Done.
Resolution mode implemented: landingpage
Check and close please with the following InChiKey:
RYYVLZVUVIJVGH-UHFFFAOYSA-N