Merge pull request #9 from Expensify/main

Even with expensify/main

.eslintrc.js

@@ -14,6 +14,11 @@ const restrictedImportPaths = [
         importNames: ['TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight'],
         message: "Please use 'PressableWithFeedback' and/or 'PressableWithoutFeedback' from 'src/components/Pressable' instead.",
     },
+    {
+        name: 'react-native-safe-area-context',
+        importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
+        message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [

.github/PULL_REQUEST_TEMPLATE.md

@@ -18,8 +18,8 @@ $ https://github.com/Expensify/App/issues/<issueID(comment)>
 
 Do NOT only link the issue number like this: $ #<issueID>
 --->
-$ 
-PROPOSAL: 
+$
+PROPOSAL:
 
 
 ### Tests
@@ -98,7 +98,7 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
     - [ ] 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](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/utils/index.ts) 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.

.github/actions/composite/setupGitForOSBotifyApp/action.yml

@@ -60,6 +60,11 @@ runs:
       if: runner.debug == '1'
       run: echo "GIT_TRACE=true" >> "$GITHUB_ENV"
 
+    - name: Sync clock
+      shell: bash
+      run: sudo sntp -sS time.windows.com
+      if: runner.os == 'macOS'
+
     - name: Generate a token
       id: generateToken
       uses: actions/create-github-app-token@9d97a4282b2c51a2f4f0465b9326399f53c890d4

.github/workflows/deployBlocker.yml

@@ -22,6 +22,13 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ github.token }}
 
+      - name: Escape html characters in GH issue title
+        env:
+          GH_ISSUE_TITLE: ${{ github.event.issue.title }}
+        run: |
+          escaped_title=$(echo "$GH_ISSUE_TITLE" | sed -e 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/"/\&quot;/g; s/'"'"'/\&#039;/g; s/|/\&verbar;/g')
+          echo "GH_ISSUE_TITLE=$escaped_title" >> "$GITHUB_ENV"
+
       - name: 'Post the issue in the #expensify-open-source slack room'
         if: ${{ success() }}
         uses: 8398a7/action-slack@v3
@@ -32,7 +39,7 @@ jobs:
               channel: '#expensify-open-source',
               attachments: [{
                 color: "#DB4545",
-                text: '💥 We have found a New Expensify Deploy Blocker, if you have any idea which PR could be causing this, please comment in the issue: <${{ github.event.issue.html_url }}|${{ github.event.issue.title }}>'.replace(/[&<>"'|]/g, function(m) { return {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;', '|': '&verbar;'}[m]; }),
+                text: '💥 We have found a New Expensify Deploy Blocker, if you have any idea which PR could be causing this, please comment in the issue: <${{ github.event.issue.html_url }}|${{ env.GH_ISSUE_TITLE }}>'
               }]
             }
         env:

.github/workflows/e2ePerformanceTests.yml

@@ -211,7 +211,9 @@ jobs:
           test_spec_file: tests/e2e/TestSpec.yml
           test_spec_type: APPIUM_NODE_TEST_SPEC
           remote_src: false
-          file_artifacts: Customer Artifacts.zip
+          file_artifacts: |
+            Customer Artifacts.zip
+            Test spec output.txt
           log_artifacts: debug.log
           cleanup: true
           timeout: 5400
@@ -220,6 +222,7 @@ jobs:
         if: failure()
         run: |
           echo ${{ steps.schedule-awsdf-main.outputs.data }}
+          cat "./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/Test spec output.txt"
           unzip "Customer Artifacts.zip" -d mainResults
           cat ./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/debug.log
 

.github/workflows/platformDeploy.yml

@@ -56,6 +56,12 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
 
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'oracle'
+          java-version: '17'
+
       - name: Setup Ruby
         uses: ruby/setup-ruby@a05e47355e80e57b9a67566a813648fa67d92011
         with:
@@ -341,6 +347,9 @@ jobs:
     if: ${{ failure() }}
     needs: [android, desktop, iOS, web]
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
       - name: Post Slack message on failure
         uses: ./.github/actions/composite/announceFailedWorkflowInSlack
         with:

.github/workflows/reassurePerformanceTests.yml

@@ -17,6 +17,11 @@ jobs:
       - name: Setup NodeJS
         uses: ./.github/actions/composite/setupNode
 
+      - name: Set dummy git credentials
+        run: |
+            git config --global user.email "[email protected]"
+            git config --global user.name "Test"
+
       - name: Run performance testing script
         shell: bash
         run: |
@@ -27,6 +32,7 @@ jobs:
           npm install --force
           npx reassure --baseline
           git switch --force --detach -
+          git merge --no-commit --allow-unrelated-histories "$BASELINE_BRANCH" -X ours
           npm install --force
           npx reassure --branch
 

.github/workflows/testBuild.yml

@@ -84,6 +84,12 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
 
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'oracle'
+          java-version: '17'
+
       - name: Setup Ruby
         uses: ruby/setup-ruby@a05e47355e80e57b9a67566a813648fa67d92011
         with:

.imgbotconfig

@@ -1,6 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade.png" // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/themeDependent/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/themeDependent/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"
 }

.storybook/public/index.css

@@ -24,5 +24,5 @@ a.sidebar-item[data-selected="true"], a.sidebar-item[data-selected="true"]:focus
 }
 
 .sidebar-container {
-    background: #07271f;
+    background: #072419;
 }

.storybook/theme.js

@@ -7,17 +7,17 @@ export default create({
     fontBase: 'ExpensifyNeue-Regular',
     fontCode: 'monospace',
     base: 'dark',
-    appBg: colors.darkHighlightBackground,
-    colorPrimary: colors.darkDefaultButton,
+    appBg: colors.productDark200,
+    colorPrimary: colors.productDark400,
     colorSecondary: colors.green,
-    appContentBg: colors.darkAppBackground,
-    textColor: colors.darkPrimaryText,
-    barTextColor: colors.darkPrimaryText,
+    appContentBg: colors.productDark100,
+    textColor: colors.productDark900,
+    barTextColor: colors.productDark900,
     barSelectedColor: colors.green,
-    barBg: colors.darkAppBackground,
-    appBorderColor: colors.darkBorders,
-    inputBg: colors.darkHighlightBackground,
-    inputBorder: colors.darkBorders,
+    barBg: colors.productDark100,
+    appBorderColor: colors.productDark400,
+    inputBg: colors.productDark200,
+    inputBorder: colors.productDark400,
     appBorderRadius: 8,
     inputBorderRadius: 8,
 });

__mocks__/@ua/react-native-airship.js

@@ -31,7 +31,7 @@ const Airship = {
     },
     contact: {
         identify: jest.fn(),
-        getNamedUserId: jest.fn(),
+        getNamedUserId: () => Promise.resolve(undefined),
         reset: jest.fn(),
     },
 };

android/app/build.gradle

@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040401
-        versionName "1.4.4-1"
+        versionCode 1001041124
+        versionName "1.4.11-24"
     }
 
     flavorDimensions "default"

android/app/src/main/res/values/styles.xml

@@ -11,7 +11,6 @@
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="popupTheme">@style/AppTheme.Popup</item>
         <item name="android:spinnerDropDownItemStyle">@style/TextViewSpinnerDropDownItem</item>
-        <item name="android:datePickerDialogTheme">@style/DatePickerDialogTheme</item>
         <item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
     </style>
 
@@ -28,18 +27,6 @@
         <item name="android:fontFamily">@font/expneuebold</item>
     </style>
 
-    <!-- Theme used by the DatePicker dialog -->
-    <style name="DatePickerDialogTheme" parent="Theme.AppCompat.Dialog">
-        <item name="android:windowBackground">@drawable/datepicker_background</item>
-        <item name="android:datePickerStyle">@style/DatePickerStyle</item>
-        <item name="android:fontFamily">@font/expneuebold</item>
-        <item name="colorAccent">@color/accent</item>
-    </style>
-
-    <style name="DatePickerStyle" parent="android:Widget.Material.DatePicker">
-        <item name="android:headerBackground">@color/card_highlight_bg</item> <!-- header background color -->
-    </style>
-
     <!-- Theme used by the Alert dialog -->
     <style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
         <item name="android:windowBackground">@drawable/alert_background</item>

config/webpack/webpack.common.js

@@ -66,7 +66,8 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             template: 'web/index.html',
             filename: 'index.html',
             splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(envFile)}.svg`), 'utf-8'),
-            usePolyfillIO: platform === 'web',
+            isWeb: platform === 'web',
+            isProduction: envFile === '.env.production',
             isStaging: envFile === '.env.staging',
         }),
         new FontPreloadPlugin({
@@ -210,7 +211,21 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
         // This is also why we have to use .website.js for our own web-specific files...
         // Because desktop also relies on "web-specific" module implementations
         // This also skips packing web only dependencies to desktop and vice versa
-        extensions: ['.web.js', platform === 'web' ? '.website.js' : '.desktop.js', '.js', '.jsx', '.web.ts', platform === 'web' ? '.website.ts' : '.desktop.ts', '.ts', '.web.tsx', '.tsx'],
+        extensions: [
+            '.web.js',
+            ...(platform === 'desktop' ? ['.desktop.js'] : []),
+            '.website.js',
+            '.js',
+            '.jsx',
+            '.web.ts',
+            ...(platform === 'desktop' ? ['.desktop.ts'] : []),
+            '.website.ts',
+            ...(platform === 'desktop' ? ['.desktop.tsx'] : []),
+            '.website.tsx',
+            '.ts',
+            '.web.tsx',
+            '.tsx',
+        ],
         fallback: {
             'process/browser': require.resolve('process/browser'),
         },

contributingGuides/NAVIGATION.md

@@ -1,6 +1,6 @@
 # Overview
 
-The navigation in the App consists of a top-level Stack Navigator (called `RootStack`) with each of its `Screen` components handling different high-level flow. All those flows can be seen in `AuthScreens.js` file.
+The navigation in the App consists of a top-level Stack Navigator (called `RootStack`) with each of its `Screen` components handling different high-level flow. All those flows can be seen in `AuthScreens.tsx` file.
 
 ## Terminology
 
@@ -20,11 +20,11 @@ Navigation Actions - User actions correspond to resulting navigation actions tha
 
 ## Adding RHP flows
 
-Most of the time, if you want to add some of the flows concerning one of your reports, e.g. `Money Request` from a user, you will most probably use `RightModalNavigator.js` and `ModalStackNavigators.js` file:
+Most of the time, if you want to add some of the flows concerning one of your reports, e.g. `Money Request` from a user, you will most probably use `RightModalNavigator.tsx` and `ModalStackNavigators.tsx` file:
 
-- Since each of those flows is kind of a modal stack, if you want to add a page to the existing flow, you should just add a page to the correct stack in `ModalStackNavigators.js`.
+- Since each of those flows is kind of a modal stack, if you want to add a page to the existing flow, you should just add a page to the correct stack in `ModalStackNavigators.tsx`.
 
-- If you want to create new flow, add a `Screen` in `RightModalNavigator.js` and make new modal in `ModalStackNavigators.js` with chosen pages.
+- If you want to create new flow, add a `Screen` in `RightModalNavigator.tsx` and make new modal in `ModalStackNavigators.tsx` with chosen pages.
 
 When creating RHP flows, you have to remember a couple things:
 
@@ -40,13 +40,36 @@ When creating RHP flows, you have to remember a couple things:
 
 An example of adding `Settings_Workspaces` page:
 
-1. Add path to `ROUTES.js`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/ROUTES.js#L36
+1. Add the page name to `SCREENS.ts` which will be reused throughout the app (linkingConfig, navigators, etc.):
+
+```ts
+const SCREENS = {
+    SETTINGS: {
+        WORKSPACES: 'Settings_Workspaces',
+    },
+} as const;
+```
+
+2. Add path to `ROUTES.ts`: https://github.com/Expensify/App/blob/main/src/ROUTES.ts
+
+```ts
+export const ROUTES = {
+    // static route
+    SETTINGS_WORKSPACES: 'settings/workspaces',
+    // dynamic route
+    SETTINGS_WORKSPACES: {
+        route: 'settings/:accountID',
+        getRoute: (accountID: number) => `settings/${accountID}` as const,
+    },
+};
+
+```
 
-2. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.js`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/linkingConfig.js#L40-L42
+3. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.ts`: https://github.com/Expensify/App/blob/fbc11ca729ffa4676fb3bc8cd110ac3890debff6/src/libs/Navigation/linkingConfig.ts#L47-L50
 
-3. Add your page to proper navigator (it should be aligned with where you've put it in the previous step) https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/AppNavigator/ModalStackNavigators.js#L334-L338
+4. Add your page to proper navigator (it should be aligned with where you've put it in the previous step) https://github.com/Expensify/App/blob/fbc11ca729ffa4676fb3bc8cd110ac3890debff6/src/libs/Navigation/AppNavigator/ModalStackNavigators.js#L141
 
-4. Make sure `HeaderWithBackButton` leads to the previous page in navigation flow of your page: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/pages/workspace/WorkspacesListPage.js#L186
+5. Make sure `HeaderWithBackButton` leads to the previous page in navigation flow of your page: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/pages/workspace/WorkspacesListPage.js#L186
 
 ## Performance solutions
 
@@ -183,4 +206,4 @@ The action for the first step created with  `getMinimalAction` looks like this:
 ```
 
 ### Deeplinking 
-There is no minimal action for deeplinking directly to the `Profile` screen. But because the `Settings_root` is not on the stack, pressing UP will reset the params for navigators to the correct ones.
+There is no minimal action for deeplinking directly to the `Profile` screen. But because the `Settings_root` is not on the stack, pressing UP will reset the params for navigators to the correct ones.