Merge branch 'main' into fix/47946

Expensify · Sep 3, 2024 · d15a5f4 · d15a5f4
2 parents 5b3bb78 + 2c04129
commit d15a5f4
Show file tree

Hide file tree

Showing 114 changed files with 1,342 additions and 2,099 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@
 * [Contributing to Expensify](contributingGuides/CONTRIBUTING.md)
 * [Expensify Code of Conduct](CODE_OF_CONDUCT.md)
 * [Contributor License Agreement](contributingGuides/CLA.md)
+* [React StrictMode](contributingGuides/STRICT_MODE.md)
 
 ----
 

diff --git a/__mocks__/react-native-document-picker.ts b/__mocks__/react-native-document-picker.ts
@@ -18,6 +18,7 @@ const reactNativeDocumentPickerMock: ReactNativeDocumentPickerMock = {
         doc: 'com.microsoft.word.doc',
         docx: 'org.openxmlformats.wordprocessingml.document',
         images: 'public.image',
+        json: 'public.json',
         pdf: 'com.adobe.pdf',
         plainText: 'public.plain-text',
         ppt: 'com.microsoft.powerpoint.ppt',

diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -110,8 +110,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1009002700
-        versionName "9.0.27-0"
+        versionCode 1009002800
+        versionName "9.0.28-0"
         // Supported language variants must be declared here to avoid from being removed during the compilation.
         // This also helps us to not include unnecessary language variants in the APK.
         resConfigs "en", "es"

diff --git a/assets/images/turtle-in-shell.svg b/assets/images/turtle-in-shell.svg
diff --git a/contributingGuides/STRICT_MODE.md b/contributingGuides/STRICT_MODE.md
@@ -0,0 +1,44 @@
+# Usage of react concurrent mode and StrictMode
+## Concurrent react
+This App is rendered using react concurrent mode, which is the direction that React seems to be moving.
+
+Concurrent mode enables a lot of new behaviours in react, most importantly renders can be interrupted by React, re-run or run more than once. This is supposed to make react more performant and webapps more responsive to user actions.
+
+Further reading:
+ - [What is Concurrent React](https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react)
+
+## StrictMode
+Because the previously described concurrent mode could potentially introduce new bugs in the code (related to parallel rendering) we are using `<StrictMode />`.
+This is a recommendation from React team as per react official docs.
+
+`<StrictMode>` is a component that wraps the whole App in (or parts of App) and it runs extra checks and extra behaviors only in dev. So in essence this is a developer tool.
+
+### Temporarily disabling StrictMode for dev
+Strict mode *by default always* wraps entire Expensify App component tree. This happens in `src/App.tsx`.
+
+However, it might happen you want to temporarily disable `StrictMode` when developing, to verify that your code behaves properly.
+
+To do that:
+ - go to `src/CONFIG.ts`
+ - set `USE_REACT_STRICT_MODE_IN_DEV` flag to `false`
+
+_Important note_: this ☝️flag is strictly for developers. It does not affect production builds of React.  
+StrictMode is supposed to always wrap your App regardless of environment, and it will simply do nothing when run on production react build.
+Only use this flag for local development and testing, but do not make it depending on `NODE_ENV` or any other env vars.
+
+### Common StrictMode pitfalls
+ - every component will go through: `mount -> unmount -> mount` on first app render
+ - any code running inside `useEffect(() => {...}, [])` that would be expected to run once on initial render, will run twice, this might include initial api calls
+
+#### Example: How StrictMode Affects AuthScreen
+In AuthScreen, we have a typical pattern where certain logic is executed during mounting and unmounting, this is what happen after a refresh:
+- Mounting: it runs `ReconnectApp`.
+- Unmounting: AuthScreen cleans up data.
+- Re-mounting Due to StrictMode: This behavior will cause `OpenApp` to be executed on the new mount.
+
+Impact: This double execution could lead to unnecessary API calls or unexpected states.
+
+Sources:
+ - [StrictMode docs](https://react.dev/reference/react/StrictMode)
+ - [StrictMode recommended usage](https://react.dev/reference/react/StrictMode)
+ - [Original PR introducing this feature](https://github.com/Expensify/App/pull/42592)
diff --git a/docs/articles/expensify-classic/reports/Set-default-report-title.md b/docs/articles/expensify-classic/reports/Set-default-report-title.md
@@ -11,7 +11,7 @@ Workspace Admins can set a default report title for all reports created under a
 3. Click the **Reports** tab on the left.
 4. Scroll down to the Default Report Title section. 
 5. Configure the formula. You can use the example provided on the page as a guide or choose from more [report formula options](https://help.expensify.com/articles/expensify-classic/spending-insights/Custom-Templates).
-   - Some formulas will automatically update the report title as changes are made to the report. For example, any formula related to dates, total amounts, workspace name, would adjust the title before the report is submitted for approval. Changes will not retroactively update report titles for reports which have been Approved or Reimbursed.
+   - Some formulas will automatically update the report title as changes are made to the report. For example, any formula related to dates, total amounts, and workspace name would adjust the title before the report is submitted for approval. Note that changes to Report Field values reflected in the Report Title (i.e., `{field:Customer}`) will not be reflected in the title of Open reports until submission. Between submission and approval, changes will update the title immediately. Changes will **not** retroactively update report titles for reports that have been Approved or Reimbursed.
 6. If desired, enable the Enforce Default Report Title toggle. This will prevent employees from editing the default title.  
 
 </div>
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
@@ -165,6 +165,8 @@ window.addEventListener('load', () => {
     insertElementAfter(searchInput, searchLabel);
 });
 
+const FIXED_HEADER_HEIGHT = 80;
+
 const tocbotOptions = {
     // Where to render the table of contents.
     tocSelector: '.article-toc',
@@ -188,14 +190,51 @@ const tocbotOptions = {
     activeLinkClass: 'selected-article',
 
     // Headings offset between the headings and the top of the document (requires scrollSmooth enabled)
-    headingsOffset: 80,
-    scrollSmoothOffset: -80,
+    headingsOffset: FIXED_HEADER_HEIGHT,
+    scrollSmoothOffset: -FIXED_HEADER_HEIGHT,
     scrollSmooth: true,
 
     // If there is a fixed article scroll container, set to calculate titles' offset
     scrollContainer: 'content-area',
+
+    onClick: (e) => {
+        e.preventDefault();
+        const hashText = e.target.href.split('#').pop();
+        // Append hashText to the current URL without saving to history
+        const newUrl = `${window.location.pathname}#${hashText}`;
+        history.replaceState(null, '', newUrl);
+    },
 };
 
+// Define the media query string for the mobile breakpoint
+const mobileBreakpoint = window.matchMedia('(max-width: 799px)');
+
+// Function to update tocbot options and refresh
+function updateTocbotOptions(headingsOffset, scrollSmoothOffset) {
+    tocbotOptions.headingsOffset = headingsOffset;
+    tocbotOptions.scrollSmoothOffset = scrollSmoothOffset;
+    window.tocbot.refresh({
+        ...tocbotOptions,
+    });
+}
+
+function handleBreakpointChange() {
+    const isMobile = mobileBreakpoint.matches;
+    const headingsOffset = isMobile ? FIXED_HEADER_HEIGHT : 0;
+    const scrollSmoothOffset = isMobile ? -FIXED_HEADER_HEIGHT : 0;
+
+    // Update tocbot options only if there is a change in offsets
+    if (tocbotOptions.headingsOffset !== headingsOffset || tocbotOptions.scrollSmoothOffset !== scrollSmoothOffset) {
+        updateTocbotOptions(headingsOffset, scrollSmoothOffset);
+    }
+}
+
+// Add listener for changes to the media query status using addEventListener
+mobileBreakpoint.addEventListener('change', handleBreakpointChange);
+
+// Initial check
+handleBreakpointChange();
+
 function selectNewExpensify(newExpensifyTab, newExpensifyContent, expensifyClassicTab, expensifyClassicContent) {
     newExpensifyTab.classList.add('active');
     newExpensifyContent.classList.remove('hidden');

diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>9.0.27</string>
+	<string>9.0.28</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>9.0.27.0</string>
+	<string>9.0.28.0</string>
 	<key>FullStory</key>
 	<dict>
 		<key>OrgId</key>

diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>9.0.27</string>
+	<string>9.0.28</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>9.0.27.0</string>
+	<string>9.0.28.0</string>
 </dict>
 </plist>
diff --git a/ios/NotificationServiceExtension/Info.plist b/ios/NotificationServiceExtension/Info.plist
@@ -11,9 +11,9 @@
 	<key>CFBundleName</key>
 	<string>$(PRODUCT_NAME)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>9.0.27</string>
+	<string>9.0.28</string>
 	<key>CFBundleVersion</key>
-	<string>9.0.27.0</string>
+	<string>9.0.28.0</string>
 	<key>NSExtension</key>
 	<dict>
 		<key>NSExtensionPointIdentifier</key>

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1618,7 +1618,7 @@ PODS:
     - React-Codegen
     - React-RCTFabric
     - ReactCommon/turbomodule/core
-  - react-native-document-picker (9.1.1):
+  - react-native-document-picker (9.3.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2315,7 +2315,7 @@ PODS:
     - Firebase/Performance (= 8.8.0)
     - React-Core
     - RNFBApp
-  - RNFlashList (1.6.3):
+  - RNFlashList (1.7.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -3180,7 +3180,7 @@ SPEC CHECKSUMS:
   react-native-blob-util: 221c61c98ae507b758472ac4d2d489119d1a6c44
   react-native-cameraroll: 478a0c1fcdd39f08f6ac272b7ed06e92b2c7c129
   react-native-config: 5ce986133b07fc258828b20b9506de0e683efc1c
-  react-native-document-picker: 2789e41dc92aa3256455aa54639a42f4dc4ee824
+  react-native-document-picker: e9d83c149bdd72dc01cf8dcb8df0389c6bd5fddb
   react-native-geolocation: b9bd12beaf0ebca61a01514517ca8455bd26fa06
   react-native-image-picker: f8a13ff106bcc7eb00c71ce11fdc36aac2a44440
   react-native-key-command: aae312752fcdfaa2240be9a015fc41ce54087546
@@ -3231,7 +3231,7 @@ SPEC CHECKSUMS:
   RNFBApp: 729c0666395b1953198dc4a1ec6deb8fbe1c302e
   RNFBCrashlytics: 2061ca863e8e2fa1aae9b12477d7dfa8e88ca0f9
   RNFBPerf: 389914cda4000fe0d996a752532a591132cbf3f9
-  RNFlashList: 65349fc4f2c270ae3feca9769dfb5065dffd1210
+  RNFlashList: 6f169ad83e52579b7754cbbcec1b004c27d82c93
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 8781e2529230a1bc3ea8d75e5c3cd071b6c6aed7
   RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0