text:
Page is skewed when dragging Scan content to the right

Details

Fixed Issues

$ https://github.com/Expensify/App/issues/28689
PROPOSAL: https://github.com/Expensify/App/issues/28689#issuecomment-1745614671
Tests

Go to staging.new.expensify.com
Go to + > Request money > Scan.
Drag the content to the right in the text area

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

Offline tests

Go to staging.new.expensify.com
Go to + > Request money > Scan.
Drag the content to the right in the text area

QA Steps

Go to staging.new.expensify.com
Go to + > Request money > Scan.
Drag the content to the right in the text area

[x] 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: mWeb Chrome
[x] iOS: Native
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

[x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
[x] I followed proper code patterns (see Reviewing the code)

[x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. 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

Android: Native
Uploading Screen Recording 2023-10-13 at 21.54.04.mov…

Android: mWeb Chrome

https://github.com/Expensify/App/assets/68128028/73d94877-5485-452b-affa-8018cdd5ee86

iOS: Native
https://github.com/Expensify/App/assets/68128028/d4185098-a5d8-4ee2-b916-22f568c0ffbf

iOS: mWeb Safari
https://github.com/Expensify/App/assets/68128028/ad0cae69-acc7-4317-a606-775cfc63c3a9

MacOS: Chrome / Safari

https://github.com/Expensify/App/assets/68128028/48baff2f-54b6-4c00-ac00-2da275634408

MacOS: Desktop
https://github.com/Expensify/App/assets/68128028/aadb492a-5cda-48e8-aa0f-49d73bf3f536

hey @ZhenjaHorbach can you please update video for android native:

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 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 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/28352309/7e77fdb1-6bb6-49ee-ab8b-729263daa69e

Mobile Web - Chrome
https://github.com/Expensify/App/assets/28352309/77c54105-7721-4f0c-9d41-e5537986a6df

Mobile Web - Safari
https://github.com/Expensify/App/assets/28352309/b516ad6b-e671-4681-bbc0-42cb69279942

Desktop
https://github.com/Expensify/App/assets/28352309/b38c9cd0-2fa5-4bb9-b9c2-67c459e7ecd5

iOS
https://github.com/Expensify/App/assets/28352309/c83db687-9453-4b64-9c66-6d7ae9b84d1c

Android
https://github.com/Expensify/App/assets/28352309/4f37bf7e-2d9f-4e64-87d4-94905a36e1d6

: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/marcochavezf in version: 1.3.85-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/francoisl in version: 1.3.85-4 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

🚀 Deployed to staging by https://github.com/marcochavezf in version: 1.3.86-0 🚀

platform
result

🤖 android 🤖
failure ❌

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/francoisl in version: 1.3.86-5 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

authors: OSBotify ZhenjaHorbach narefyev91


text:
Delete docs/articles/expensify-classic/expensify-card/Expensify-Card-…

…Perks.md
https://github.com/Expensify/Expensify/issues/337744
Delete this resource bc this info is on UseDot

Details

Fixed Issues

$
PROPOSAL:
Tests

[ ] Verify that no errors appear in the JS console

Offline tests

QA Steps

[ ] 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] 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/Videosundefined

A preview of your ExpensifyHelp changes have been deployed to https://4dcac615.helpdot.pages.dev ⚡

🚀 Deployed to staging by https://github.com/bondydaa in version: 1.4.24-4 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
cancelled 🔪

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/mountiny in version: 1.4.24-8 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

source: gharchive/pull-request

authors: OSBotify maddylewis

repo: Expensify/App

license: MIT

license_type: permissive

license_source: github-api


text:
[Update Account Settings] Restyle Wallet Page

Details

This PR radjusts Wallet Page to current designs.
Fixed Issues

$ #35722
$ #35604
PROPOSAL: N/A
Tests

[x] Verify that no errors appear in the JS console
[x] Go to Wallet Page and verify that everything matches desings.
- [x] Have few cards that are Exepensify cards
- [x] Have few cards that are not from expensify
- [x] Have few bank accounts linked

Offline tests

N/A
QA Steps

Same as tests
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: mWeb Chrome
[x] iOS: Native
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

[x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
[x] I followed proper code patterns (see Reviewing the code)

[x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. 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 any new file was added I verified that:

[x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[x] If a new CSS style is added I verified that:

[x] A similar style doesn't already exist
[x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))

[x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like 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 the PR modifies the form input styles:

[x] I verified that all the inputs inside a form are aligned with each other.
[x] I added Design label so the design team can review the changes.

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

Screenshots/Videos

Android: Native

https://github.com/Expensify/App/assets/88395093/bc213ce5-d72c-4d6f-bee1-654a477c8edc

Android: mWeb Chrome
https://github.com/Expensify/App/assets/88395093/c4c1f9e8-aaaa-41fe-8ee8-f8485130c900

iOS: Native

https://github.com/Expensify/App/assets/88395093/5754f41e-8e42-4d6c-b725-a32905040406

iOS: mWeb Safari
https://github.com/Expensify/App/assets/88395093/0c7e97f1-3d54-4f34-a7f3-f05b2d2c2681

MacOS: Chrome / Safari
https://github.com/Expensify/App/assets/88395093/b8af05fd-3f10-451c-b4d7-140d26084e4f

MacOS: Desktop
https://github.com/Expensify/App/assets/88395093/a3406624-5302-479e-add9-9b8854e3a1ae

@mountiny is this ready to merge or do I need some more approves 😀

Seems like reviewer checklist is missing here

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: mWeb Chrome
[ ] iOS: Native
[ ] iOS: mWeb 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(theme.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 the PR modifies the form input styles:

[ ] I verified that all the inputs inside a form are aligned with each other.
[ ] I added Design label so the design team can review the changes.

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

Please hold on with the merge.
I will add here a small fix: empty workspace list state is missing the background.

I fixed here the background color in WS list empty state.

@SzymczakJ @kosmydel Just one small thing. The popover menu is cut off at the bottom of the window when the bottom account is not the default account resulting in two menu items. I'm guessing this should not be happening as the popover menu should open in the other direction if the space at the bottom is not enough to display it completely.
https://github.com/Expensify/App/assets/4160319/e3051f18-6b4b-40f8-bd1a-3f2657ddf40b

@akinwale @kosmydel @SzymczakJ I dont think we have to block on this, but we should fix this in a follow up at least

I've also noticed that the top margin is wrong (should be 12px)
cc @SzymczakJ

I've also noticed that the top margin is wrong (should be 12px) cc @SzymczakJ

fixed

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

@mountiny @akinwale could you share the new design screenshots?

Go to Wallet Page and verify that everything matches desings.

@kavimuru added

🚀 Deployed to production by https://github.com/thienlnam in version: 1.4.41-12 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

authors: OSBotify SzymczakJ akinwale kavimuru kosmydel mountiny situchan


text:
Blinking on chat switching

Details

Fixed Issues

$ https://github.com/Expensify/App/issues/38909 https://github.com/Expensify/App/issues/38838
PROPOSAL:
Tests

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

Offline tests

QA Steps

Test 1

Open a report screen.
Randomly select and open five different reports, ensuring each is viewed at least once to fetch data.
After opening all reports, cycle through them to check for any visual disruptions, such as blinking avatars or elements on the page.

Test 2

Go to FAB> +> Distance> Complete the IOU flow
Navigate to created Distance request
Go to details page and go back to Distance card page
Repeat the step 4 and take a not of map behavior

[x] 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: mWeb Chrome
[x] iOS: Native
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

[x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
[x] I followed proper code patterns (see Reviewing the code)

[x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. 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 either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
[x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[x] I verified the JSDocs style guidelines (in STYLE.md) were followed

[x] 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 any new file was added I verified that:

[x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[x] If a new CSS style is added I verified that:

[x] A similar style doesn't already exist
[x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))

[x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like 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 the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:

[x] I verified that all the inputs inside a form are aligned with each other.
[x] I added Design label and/or tagged @Expensify/design so the design team can review the changes.

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

Screenshots/Videos

Android: Native
https://github.com/Expensify/App/assets/48593211/e62e3aef-45e7-4263-86e3-f3e8050b8345

Android: mWeb Chrome
https://github.com/Expensify/App/assets/48593211/c4a31c30-29e2-4c86-b9f9-3a32f2f75f16

iOS: Native
https://github.com/Expensify/App/assets/48593211/4963a12a-abc2-47ca-8bf6-9a845bf0f6ef

iOS: mWeb Safari
https://github.com/Expensify/App/assets/48593211/e7fca83e-e62d-4997-8bc7-ae03025de8c7

MacOS: Chrome / Safari
https://github.com/Expensify/App/assets/48593211/4f2bac1d-02a6-4a3c-b404-81e84f947f15

MacOS: Desktop
https://github.com/Expensify/App/assets/48593211/d20300c0-a6af-4dcb-be74-193f1928ece1

hey @perunt , can you please add the QA and Tests steps? Thank you 😄

Does this also resolve this one: https://github.com/Expensify/App/issues/38838?
cc @paultsimura

Does this also resolve this one: #38838? cc @paultsimura

Based on the contributors' RCA, this PR should fix it as well. Please link it in the fixed issues.

Do you wanna take this one? Since you followed this one from start?

: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/NikkiWines in version: 1.4.58-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/Beamanator in version: 1.4.58-8 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: OSBotify hungvu193 perunt


text:
Delete docs/articles/expensify-classic/connect-credit-cards/Global-Reimbursements

…imbursements.md
https://github.com/Expensify/Expensify/issues/381301
this resource was moved to a new category -- deleting

Details

Fixed Issues

$
PROPOSAL:
Tests

[ ] Verify that no errors appear in the JS console

Offline tests

QA Steps

[ ] 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] 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/Videosundefined

A preview of your ExpensifyHelp changes have been deployed to https://885ac9f0.helpdot.pages.dev ⚡

🚀 Cherry-picked to staging by https://github.com/francoisl in version: 1.4.67-7 🚀

platform
result

🤖 android 🤖
failure ❌

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

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

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
failure ❌

🕸 web 🕸
success ✅

🚀 Cherry-picked to staging by https://github.com/francoisl in version: 1.4.67-7 🚀

platform
result

🤖 android 🤖
failure ❌

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

🚀 Deployed to production by https://github.com/francoisl in version: 1.4.68-3 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅


text:
Map upwork data

Details
This is the script I use to complete this accounting chore: https://github.com/Expensify/Insiders/issues/11053
I'd like to merge it so that others can easily complete the chore as well.
Fixed Issues
$ n/a
Tests
Has been tested over the last couple years.

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

Offline tests
n/a
QA Steps
n/a

[x] 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: mWeb Chrome
[x] iOS: Native
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

[x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
[x] I followed proper code patterns (see Reviewing the code)

[x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. 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 either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
[x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[x] I verified the JSDocs style guidelines (in STYLE.md) were followed

[x] 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 any new file was added I verified that:

[x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[x] If a new CSS style is added I verified that:

[x] A similar style doesn't already exist
[x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))

[x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like 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 the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:

[x] I verified that all the inputs inside a form are aligned with each other.
[x] I added Design label and/or tagged @Expensify/design so the design team can review the changes.

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

I started a discussion here to check if adding manual scripts related to chores to newdot is okay, but since there hasn’t been much feedback, I assume it’s fine. I’ll go ahead and approve the PR—feel free to merge it. Sorry for the delay!

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

authors: OSBotify roryabraham techievivek


text:
fix: use KeyboardAvoidingView from react-native-keyboard-controller

Details
All possible solutions I listed in:
https://github.com/Expensify/App/issues/44514#issuecomment-2258226920
In this PR we are using 3rd approach. Before we already merged PR https://github.com/Expensify/App/pull/46513 but it caused some issues. This PR is a very similar to previous one, but in this PR I fixed some issues in react-native-keyboard-controller upstream and use version from main. If we agree to merge this PR (i. e. we don't find any new issues) then I can prepare a new release to npm and we will not use a version from GitHub directly.
This PR will help in implementation for https://github.com/Expensify/App/pull/42143
Fixed Issues

$ https://github.com/Expensify/App/issues/44514
PROPOSAL: https://github.com/Expensify/App/issues/44514#issuecomment-2258226920
Tests

Submit a couple of expenses in a workspace chat
Open the expense report
Tap on the first expense
Navigate back to the expense report
Be sure there is no layout jump/glitches
Test all other places in the application where we use a keyboard
Verify that https://github.com/Expensify/App/issues/46743 https://github.com/Expensify/App/issues/46744 https://github.com/Expensify/App/issues/46745 are not reproducible as well

Offline tests

N/A
QA Steps

Submit a couple of expenses in a workspace chat
Open the expense report
Tap on the first expense
Navigate back to the expense report
Be sure there is no layout jump/glitches
Test all other places in the application where we use a keyboard
Verify that https://github.com/Expensify/App/issues/46743 https://github.com/Expensify/App/issues/46744 https://github.com/Expensify/App/issues/46745 are not reproducible as well

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: mWeb Chrome
[x] iOS: Native
[x] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[x] MacOS: Desktop

[x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
[x] I followed proper code patterns (see Reviewing the code)

[x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. 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 either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
[x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
[x] I verified the JSDocs style guidelines (in STYLE.md) were followed

[x] 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 any new file was added I verified that:

[x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory

[x] If a new CSS style is added I verified that:

[x] A similar style doesn't already exist
[x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))

[x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
[x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like 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 the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:

[x] I verified that all the inputs inside a form are aligned with each other.
[x] I added Design label and/or tagged @Expensify/design so the design team can review the changes.

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

Screenshots/Videos

Android: Native
Only native iOS affected.

Android: mWeb Chrome
Only native iOS affected.

iOS: Native
https://github.com/user-attachments/assets/30ac5fbe-46c0-4363-a5df-9d74fbf62090

iOS: mWeb Safari
Only native iOS affected.

MacOS: Chrome / Safari
Only native iOS affected.

MacOS: Desktop
Only native iOS affected.

@ishpaul777 did you compare debug and release variant? Basically yes, right now there will be some wobbling in debug builds and it should be less noticeable in release builds. Also after reanimated 3.15.0 there shouldn't be wobbling at all, because they optimized ShadowTree traverse algorithm a lot 👀

feel free to prepare a upstream release of package.

@ishpaul777 doing it now!

@ishpaul777 done, now using version from npm!

: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/marcochavezf in version: 9.0.22-0 🚀

platform
result

🤖 android 🤖
failure ❌

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to staging by https://github.com/marcochavezf in version: 9.0.22-1 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

This PR is failing for iOS app because of issue #47656

This PR is failing for iOS app because of issue https://github.com/Expensify/App/issues/47656

Okay, I think it's the same issue as https://github.com/Expensify/App/issues/44514
It seems like release iOS works faster and there could be a chance, that we switch enable variable faster, than needed and because of that we can see such micro-jump.
In development it wasn't the case, so I missed that 🙈

Hi, @kirillzyusko @ishpaul777  Could this PR be the reason for the ios bug on older OS versions here https://github.com/Expensify/App/issues/47679, can you please take a look into it?

🚀 Deployed to production by https://github.com/chiragsalian in version: 9.0.22-9 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to staging by https://github.com/marcochavezf in version: 9.0.23-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by https://github.com/chiragsalian in version: 9.0.23-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: IuliiaHerets OSBotify kirillzyusko techievivek


text:
Navigate to correct report on push notification tap

Details

Tweaks the navigation for push notifications to navigate to the correct report when a push notification is tapped.
Fixed Issues

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

Run iOS build
Send yourself a message via a different account on a different device
Verify that tapping the notification in these different instances open the correct report:

Open to the current report with your testing account, background app, confirm report still opens
Open to a different report than with your testing account, background app, confirm correct report opens
Open to the chat screen, background app, confirm correct report opens
Open to any page (e.g. settings), background app, confirm report opens
Kill app, confirm report opens

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

PR Review Checklist

Contributor (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 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)
[ ] 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 included screenshots or videos for tests on all platforms
[ ] I ran the tests on all platforms & verified they passed on:

[x] iOS / native
[ ] Android / native
[ ] iOS / Safari
[ ] Android / Chrome
[ ] MacOS / Chrome
[ ] 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 was added in all src/languages/* files
[x] I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
[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
[ ] 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 */
[ ] Any functional components have the displayName property
[ ] 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

[ ] 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)

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

PR Reviewer Checklist

[ ] 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 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 (if there’s a console error not related to the PR, report it or open an issue for it to be fixed)
[ ] I verified proper code patterns were followed (see Reviewing the code)

[ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
[ ] I verified that comments were added to code that is not self explanatory
[ ] I verified that any new or modified comments were clear, correct English, and explained “why” the code was doing something instead of only explaining “what” the code was doing.
[ ] I verified any copy / text shown in the product was added in all src/languages/* files
[ ] I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
[ ] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named “index.js”. All platform-specific files are named for the platform the code supports as outlined in the README.
[ ] I verified the JSDocs style guidelines (in STYLE.md) were followed

[ ] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
[ ] I verified that this PR follows the guidelines as stated in the Review Guidelines
[ ] I verified 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 */
[ ] Any functional components have the displayName property
[ ] The file is named correctly
[ ] The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
[ ] The only data being stored in the state is data necessary for rendering and nothing else
[ ] For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
[ ] Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
[ ] All JSX used for rendering exists in the render method
[ ] The component has the minimum amount of code necessary for its purpose and it is broken down into smaller components in order to separate concerns and functions

[ ] If a new CSS style is added I verified that:

[ ] A similar style doesn’t already exist
[ ] The style can’t be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)

[ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
[ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.

QA Steps

Run iOS build
Send yourself a message via a different account on a different device
Verify that tapping the notification in these different instances open the correct report:

Open to the current report with your testing account, background app, confirm report still opens
Open to a different report than with your testing account, background app, confirm correct report opens
Open to the chat screen, background app, confirm correct report opens
Open to any page (e.g. settings), background app, confirm report opens
Kill app, confirm report opens

[ ] Verify that no errors appear in the JS console

Screenshots
iOS

https://user-images.githubusercontent.com/2838819/161128832-5ce619fa-b684-409d-a79a-ef5cf624b06f.MP4

Bump @roryabraham or @marcaaron for a review please!

I didn't have time to test this but don't want to block. Code LGTM so I'm merging.

: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 @roryabraham in version: 1.1.52-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

🚀 Deployed to production by @roryabraham in version: 1.1.52-0 🚀

platform
result

🤖 android 🤖
success ✅

🖥 desktop 🖥
success ✅

🍎 iOS 🍎
success ✅

🕸 web 🕸
success ✅

authors: AndrewGable OSBotify roryabraham


text:
[FEATURE] Expose state without overwriting existing css classes

Is your feature request related to a problem? Please describe.
I would like to expose the state of an entity to svg/css without interfering with existing css classes.
Describe the solution you'd like
To avoid having to deal with removing, replacing etc css classes, I think it would be easiest to use data attributes.
Example yaml:
      state_action:
        - action: call-service
          service: floorplan.attr_set
          service_data:
            state: ${entity.state}
            foo: bar

Result would be:
<tag data-state="$state" data-foo="bar">

Describe alternatives you've considered
Using class_set:
      state_action:
        - action: call-service
          service: floorplan.class_set
          service_data:
            class: ha-state-${entity.state}

The issue with this solution is that it overwrites all existing css classes - and I already have css classes in my svg.
Another possibility would be to have a new class function that remembers which css classes were in the original svg and doesn't touch those:
      state_action:
        - action: call-service
          service: floorplan.class_set
          service_data:
            class: ha-state-${entity.state}
            keep_original_classes: true

This should remove classes which were added by ha-floorplan but keep the classes from the initial svg file.

Just to educate me as I am not a CSS guru by any stretch. Where you say The issue with this solution is that it overwrites all existing css classes do you mean just for the entity/element you are targetting? If so I am not sure why this is an issue. Can you give a real world example?

@OzGav yes, I mean for the element i am targeting.
For example:
<g id="light.test" class="class1 class2">

now i want to have the state as well, e.g.:

```
i wouldn't know how to do this currently

Hi,
Is the attribute the best way? Have you considered the use of global CSS variables?
It would be nice to have a real use-case.
With that said, I totally see why the attr-thing could be useful, for sure... It's so much more logical, than changing styles (for simple things, like the state)...
Maybe even on a more global level, for all elements... 🤔

Did you find a bit of time to think about my input?

hi @exetico - i would really love the attr thing. I didn't had much time to invest into home automatisations so I also never looked into the code if I would be able to fix it myself. I am backend developer and would not say "i am well known in JS/TS" :sweat_smile: but I get around .. but really no idea when :see_no_evil:

You're more than welcome to give it a try. It things break, you at least learne a bit in the process :smile: !

Checkout https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.33, I think that fits your needs 😄 !

source: gharchive/issue

authors: FlorianLudwig OzGav exetico

repo: ExperienceLovelace/ha-floorplan


text:
handle non-us language environments properly

If used on a machine with non-us or C language settings the used git command fails to parse since it does not output the desired strings.
Added a LANG=C environment making the git command output predictable.

Thanks for this, and sorry for being slow to reply - have been on holiday abroad for two weeks and only just saw it.
Will review tonight and merge as long as I can understand it!

Are you sure this is actually necessary? Looking at https://github.com/git/git/blob/d67f9d5e8fd2c165304153a87fd96054d2b74981/builtin/clean.c#L31 it seems that this message is not localized, and I can't reproduce it being different by changing my system language to e.g. Turkish, Russian or German.

Using OS X and ArchLinux on multiple boxes the message was found to be localized.
Using LANG=C has no negative side effects, it just ensures english language messages.

Good enough for me. Thanks for the contribution and sorry it took me so long to get around to merging it.

authors: ExplodingCabbage lenucksi

repo: ExplodingCabbage/sublime-gitignorer

license: WTFPL


text:
Fix Emojis on NPMJS

Info: This PR was derived from the work done by @ChenYingChou at https://github.com/ChenYingChou/markserv/tree/master on PR #48
The Problem
Emojis are rendering like this on NPMJS.org:

Pull Request Test Coverage Report for Build 133

0 of 0   changed or added relevant lines in 0 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage remained the same at 65.97%

Totals

Change from base Build 130:
0.0%

Covered Lines:
187

Relevant Lines:
271

💛  - Coveralls

license: mit

license_source: bigquery


text:
Add command reference to the website

Feature Request
There are docs for the config file format, but there aren't docs for the CLI commands on the website.
Use Case:
In order to see which options exist you need to actually run the application, and that's not always convenient.
Proposed Change:
Generate docs or write minimal docs for each command including which flags exist etc.
Who Benefits From The Change(s)?
Everyone
Alternative Approaches

Added in v1.18.0
Cheers ✌🏻


text:
Problems with design

Problems with design, after open a grouped details of an debug report.

Please describe the exact issue you're seeing, e.g. with a screenshot.


text:
Removing the Pre-Installed Template Sets Removes All Template Sets

Environment

FAST RPM Version: 1.11.0
BIG-IP Version: 15.1.3.1

Summary
All FAST templates disappear after trying to remove the pre-installed "examples" or "bigip-fast-templates" templates. We were trying to remove the pre-installed templates, leaving only our custom/user-installed templates loaded.
Steps To Reproduce
Click the "Remove" button for either the "examples" or "bigip-fast-templates" template sets.
Expected Behavior
The expected behavior is that only the desired set of templates would be removed, and not all of them.
Actual Behavior
All template sets are deleted.

I was able to get the template sets back by following the process to re-install the base template sets found here

Thanks for your input. This is being fixed in the next release coming in late September.


text:
Add support for BIG-IP 13.0.x

@mattgreene @jputrino
What issues does this address?
Fixes #206
What's this change do?
Added 13.0.x support and removed 12.0.x
Where should the reviewer start?
Any background context?
We need to document our support for 13.0.x BIG-IP versions.

@pjbreaux - this PR needs to go into Kilo. I will take care of it.

authors: jputrino pjbreaux


text:
error with CustomData

When i try to deploy example i receive this message:
│ Error: Code="VMExtensionProvisioningError" Message="VM has reported a failure when processing extension 'tf-azure-bigip-3nic-bc4e-vmext1'. Error message: "Script returned an error.\n---stdout---\n\n---errout---\n/var/lib/waagent/CustomData: line 2: $'\r': command not found\n/var/lib/waagent/CustomData: line 5: $'\r': command not found\n/var/lib/waagent/CustomData: line 6: $'\r': command not found\n/var/lib/waagent/CustomData: line 8: $'\r': command not found\n/var/lib/waagent/CustomData: line 9: $'\r': command not found\n/var/lib/waagent/CustomData: line 102: warning: here-document at line 28 delimited by end-of-file (wanted `EOF')\n/var/lib/waagent/CustomData: line 103: syntax error: unexpected end of file\n\n"\r\n\r\nMore information on troubleshooting is available at https://aka.ms/vmextensionlinuxtroubleshoot "
│
│   with module.bigip[0].azurerm_virtual_machine_extension.vmext,
│   on ....\main.tf line 533, in resource "azurerm_virtual_machine_extension" "vmext":
│  533: resource "azurerm_virtual_machine_extension" "vmext" {

@RequinBleu  - Please share the TF manifest you are trying. We can validate and help you.

I don't have modify the TF I use the bigip_azure_3nic_deploy. I just add for f5_product_name, f5_image_name and f5_version
like that:
module "bigip" {
count                       = var.instance_count
source                      = "../../"
prefix                      = format("%s-3nic", var.prefix)
resource_group_name         = azurerm_resource_group.rg.name
f5_ssh_publickey            = azurerm_ssh_public_key.f5_key.public_key
mgmt_subnet_ids             = [{ "subnet_id" = data.azurerm_subnet.mgmt.id, "public_ip" = true, "private_ip_primary" = "" }]
mgmt_securitygroup_ids      = [module.mgmt-network-security-group.network_security_group_id]
external_subnet_ids         = [{ "subnet_id" = data.azurerm_subnet.external-public.id, "public_ip" = true, "private_ip_primary" = "", "private_ip_secondary" = "" }]
external_securitygroup_ids  = [module.external-network-security-group-public.network_security_group_id]
internal_subnet_ids         = [{ "subnet_id" = data.azurerm_subnet.internal.id, "public_ip" = false, "private_ip_primary" = "" }]
internal_securitygroup_ids  = [module.internal-network-security-group.network_security_group_id]
availabilityZones           = var.availabilityZones
availabilityZones_public_ip = var.availabilityZones_public_ip
f5_product_name             = var.f5_product_name
f5_image_name               = var.f5_image_name
f5_version                  = var.f5_version
}
and in variables.tf i have that:
variable f5_product_name {
default = "f5-big-ip-byol"
}
variable f5_image_name {
default = "f5-big-all-2slot-byol"
}
variable f5_version {
default = "16.1.201000"
}

i have that in /var/log/waagent.log:
2022-04-13T14:37:48.373638Z INFO Daemon Daemon Azure Linux Agent Version:2.2.48.1
2022-04-13T14:37:48.475435Z INFO Daemon Daemon OS: big-ip 14.1.4.5
2022-04-13T14:37:48.476442Z INFO Daemon Daemon Python: 2.7.5
2022-04-13T14:37:48.490857Z INFO Daemon Daemon Run daemon
2022-04-13T14:37:48.709559Z INFO Daemon Daemon No RDMA handler exists for distro='F5-BIG-IP' version='14.1.4.5'
2022-04-13T14:37:48.711926Z INFO Daemon Daemon Clean protocol and wireserver endpoint
2022-04-13T14:37:48.712156Z INFO Daemon Daemon Running default provisioning handler
2022-04-13T14:37:48.712255Z INFO Daemon Daemon Copying ovf-env.xml
2022-04-13T14:37:48.876351Z INFO Daemon Daemon Successfully mounted dvd
2022-04-13T14:37:48.929075Z INFO Daemon Daemon F5 BIG-IP doesn't support the eject command
2022-04-13T14:37:48.930712Z INFO Daemon Daemon Detect protocol endpoint
2022-04-13T14:37:48.930938Z INFO Daemon Daemon Clean protocol and wireserver endpoint
2022-04-13T14:37:48.931889Z INFO Daemon Daemon WireServer endpoint is not found. Rerun dhcp handler
2022-04-13T14:37:48.932297Z INFO Daemon Daemon Test for route to 168.63.129.16
2022-04-13T14:37:48.933074Z INFO Daemon Daemon Route to 168.63.129.16 exists
2022-04-13T14:37:48.933318Z INFO Daemon Daemon Wire server endpoint:168.63.129.16
2022-04-13T14:37:48.939387Z INFO Daemon Daemon Fabric preferred wire protocol version:2015-04-05
2022-04-13T14:37:48.940024Z INFO Daemon Daemon Wire protocol version:2012-11-30
2022-04-13T14:37:48.940181Z INFO Daemon Daemon Server preferred version:2015-04-05
2022-04-13T14:37:48.982504Z INFO Daemon Daemon Initializing goal state during protocol detection
2022-04-13T14:37:48.991261Z INFO Daemon Daemon Fetching new goal state [incarnation 1 (force update)]
2022-04-13T14:37:49.238841Z INFO Daemon Daemon Certificate with thumbprint xxx has no matching private key.
2022-04-13T14:37:49.249484Z INFO Daemon Daemon Fetch goal state completed
2022-04-13T14:37:49.258273Z INFO Daemon Daemon Starting provisioning
2022-04-13T14:37:49.260415Z INFO Daemon Daemon Handle ovf-env.xml.
2022-04-13T14:37:49.264741Z INFO Daemon Daemon Set hostname [tf-azure-bigip-3nic-da8f-f5vm01]
2022-04-13T14:37:49.267067Z INFO Daemon Daemon F5 BIG-IP doesn't allow setting the hostname
2022-04-13T14:37:49.268144Z INFO Daemon Daemon Publish hostname [tf-azure-bigip-3nic-da8f-f5vm01]
2022-04-13T14:37:49.269062Z INFO Daemon Daemon F5 BIG-IP doesn't allow publishing the hostname via DHCP
2022-04-13T14:37:49.269919Z INFO Daemon Daemon Create user account if not exists
2022-04-13T14:37:49.270379Z INFO Daemon Daemon Configure sudoer
2022-04-13T14:37:49.270846Z INFO Daemon Daemon F5 BIG-IP doesn't allow sudo for the user 'bigipuser'
2022-04-13T14:37:49.271700Z INFO Daemon Daemon Configure sshd
2022-04-13T14:37:49.272596Z INFO Daemon Daemon F5 BIG-IP doesn't allow modifying the sshd_config file
2022-04-13T14:37:49.273521Z INFO Daemon Daemon Deploy ssh public key.
2022-04-13T14:37:49.725555Z INFO Daemon Daemon Setting the user 'bigipuser' in the background
2022-04-13T14:37:49.727914Z INFO Daemon Daemon Decode custom data
2022-04-13T14:37:49.731300Z INFO Daemon Daemon Save custom data
2022-04-13T14:37:49.731898Z INFO Daemon Daemon F5 BIG-IP has deleted the root password
2022-04-13T14:37:51.117766Z INFO Daemon Daemon Provisioning complete
2022-04-13T14:37:51.136402Z WARNING Daemon Daemon Could not mount cgroup controller cpu,cpuacct: [Errno 30] Read-only file system: '/sys/fs/cgroup/cpu,cpuacct'
2022-04-13T14:37:51.137818Z WARNING Daemon Daemon Could not mount cgroups: [Errno 30] Read-only file system: '/sys/fs/cgroup/memory'
2022-04-13T14:37:51.138202Z INFO Daemon Daemon CGroups Status: [Errno 30] Read-only file system: '/sys/fs/cgroup/memory'
2022-04-13T14:37:51.139656Z INFO Daemon Daemon RDMA capabilities are not enabled, skipping
2022-04-13T14:37:51.140934Z INFO Daemon Daemon Installed Agent WALinuxAgent-2.2.48.1 is the most current agent
2022-04-13T14:37:51.307412Z INFO ExtHandler ExtHandler Agent WALinuxAgent-2.2.48.1 is running as the goal state agent
2022-04-13T14:37:51.309365Z INFO ExtHandler ExtHandler WireServer endpoint 168.63.129.16 read from file
2022-04-13T14:37:51.309771Z INFO ExtHandler ExtHandler Wire server endpoint:168.63.129.16
2022-04-13T14:37:51.316227Z INFO ExtHandler ExtHandler Fetching new goal state [incarnation 1 (force update)]
2022-04-13T14:37:51.492172Z INFO ExtHandler ExtHandler Certificate with thumbprint xxx has no matching private key.
2022-04-13T14:37:51.503033Z INFO ExtHandler ExtHandler Fetch goal state completed
2022-04-13T14:37:51.515016Z INFO ExtHandler ExtHandler Distro: big-ip-14.1.4.5; OSUtil: F5BigipOSUtil; AgentService: waagent; Python: 2.7.5
2022-04-13T14:37:51.530109Z INFO ExtHandler ExtHandler Start env monitor service.
2022-04-13T14:37:51.530432Z INFO MonitorHandler ExtHandler WireServer endpoint 168.63.129.16 read from file
2022-04-13T14:37:51.532776Z INFO ExtHandler ExtHandler Configure routes
2022-04-13T14:37:51.536498Z INFO MonitorHandler ExtHandler Wire server endpoint:168.63.129.16
2022-04-13T14:37:51.537589Z INFO ExtHandler ExtHandler Gateway:None
2022-04-13T14:37:51.544419Z INFO ExtHandler ExtHandler Routes:None
2022-04-13T14:37:51.546148Z INFO ExtHandler ExtHandler Hostname record does not exist, creating [/var/lib/waagent/published_hostname] with hostname [localhost.localdomain]
2022-04-13T14:37:51.573273Z INFO EnvHandler ExtHandler WireServer endpoint 168.63.129.16 read from file
2022-04-13T14:37:51.574947Z INFO EnvHandler ExtHandler Wire server endpoint:168.63.129.16
2022-04-13T14:37:51.576139Z INFO EnvHandler ExtHandler Set block dev timeout: sda with timeout: 300
2022-04-13T14:37:51.576417Z INFO EnvHandler ExtHandler Set block dev timeout: sdb with timeout: 300
2022-04-13T14:37:51.585981Z INFO ExtHandler ExtHandler WALinuxAgent-2.2.48.1 running as process 5277
2022-04-13T14:37:51.592443Z WARNING ExtHandler ExtHandler Could not mount cgroup controller cpu,cpuacct: [Errno 30] Read-only file system: '/sys/fs/cgroup/cpu,cpuacct'
2022-04-13T14:37:51.594130Z WARNING ExtHandler ExtHandler Could not mount cgroups: [Errno 30] Read-only file system: '/sys/fs/cgroup/memory'
2022-04-13T14:37:51.595850Z INFO ExtHandler ExtHandler CGroups Status: [Errno 30] Read-only file system: '/sys/fs/cgroup/memory'
2022-04-13T14:37:51.627314Z INFO MonitorHandler ExtHandler Route table: [{"Iface": "mgmt", "Destination": "0.0.0.0", "Gateway": "10.2.1.1", "Mask": "0.0.0.0", "Flags": "0x0003", "Metric": "0"},{"Iface": "mgmt", "Destination": "10.2.1.0", "Gateway": "0.0.0.0", "Mask": "255.255.255.0", "Flags": "0x0001", "Metric": "0"},{"Iface": "mgmt", "Destination": "168.63.129.16", "Gateway": "10.2.1.1", "Mask": "255.255.255.255", "Flags": "0x0007", "Metric": "0"}]

The problem is the default file CustomData in the f5 image is encode with 1252 ANSI conversion in the CustomData come with the image in azure to be encode in UTF-8 in the vm and run bash /var/lib/waagent/CustomData and it work. The script pass without error... I donÉ't know where the default script come but it is the problem. So i can try to setup my own CustomData script to see if it work (i need it to add my f5 key anyway...).

Hey,
Is there anyone looking into this issue?
What @RequinBleu did is a workaround, not a solution. Thanks for that btw!
I am facing the same issue here with same kind of deployment.

@krzkal91 The problem come from terraform run on windows and they convert to ANSI-1252 before push on vm. Last try i do is run from linux. I don't finished the troubleshoot.

@RequinBleu jepp. I confirm the same scenario. One must either convert the coding to utf8 and rerun the script or run apply from a non-win based platform in the first place

Hi, please reach out if you are still facing the issue.

Hi, closing this request now.
Please re-open if required or send an email to automation_ecosystem@f5.com. Thanks!

authors: KrithikaChidambaram RequinBleu krzkal91 trinaths


text:
refactor: Reformat codes with prettier

You can run npx prettier --write "./**/*.js" to reformat your codes

idk what the hell is this, but seems legit
#LGTM!