merge main into form-migration/workspace-rate-and-unit-page

Author: cdOut

.eslintrc.js

@@ -174,6 +174,7 @@ module.exports = {
                 'rulesdir/prefer-underscore-method': 'off',
                 'rulesdir/prefer-import-module-contents': 'off',
                 'react/require-default-props': 'off',
+                'react/prop-types': 'off',
                 'no-restricted-syntax': [
                     'error',
                     {

.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(theme.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/createNewVersion.yml

@@ -32,12 +32,6 @@ on:
       OS_BOTIFY_COMMIT_TOKEN:
         description: OSBotify personal access token, used to workaround committing to protected branch
         required: true
-      OS_BOTIFY_APP_ID:
-        description: Application ID for OS Botify App
-        required: true
-      OS_BOTIFY_PRIVATE_KEY:
-        description: OSBotify private key
-        required: true
 
 jobs:
   validateActor:
@@ -76,18 +70,16 @@ jobs:
           token: ${{ secrets.OS_BOTIFY_COMMIT_TOKEN }}
 
       - name: Setup git for OSBotify
-        uses: ./.github/actions/composite/setupGitForOSBotifyApp
+        uses: ./.github/actions/composite/setupGitForOSBotify
         id: setupGitForOSBotify
         with:
           GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }}
-          OS_BOTIFY_APP_ID: ${{ secrets.OS_BOTIFY_APP_ID }}
-          OS_BOTIFY_PRIVATE_KEY: ${{ secrets.OS_BOTIFY_PRIVATE_KEY }}
 
       - name: Generate version
         id: bumpVersion
         uses: ./.github/actions/javascript/bumpVersion
         with:
-          GITHUB_TOKEN: ${{ steps.setupGitForOSBotify.outputs.OS_BOTIFY_API_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_COMMIT_TOKEN }}
           SEMVER_LEVEL: ${{ inputs.SEMVER_LEVEL }}
 
       - name: Commit new version

.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 "test@test.com"
+            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
 

.imgbotconfig

@@ -1,7 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
-        "assets/images/empty-state_background-fade-light.png"
+        "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,
 });

android/app/build.gradle

@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040902
-        versionName "1.4.9-2"
+        versionCode 1001041200
+        versionName "1.4.12-0"
     }
 
     flavorDimensions "default"

assets/images/empty-state_background-fade-dark.png

@@ -211,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'),
         },

assets/images/empty-state_background-fade-light.png

@@ -40,7 +40,17 @@ When creating RHP flows, you have to remember a couple things:
 
 An example of adding `Settings_Workspaces` page:
 
-1. Add path to `ROUTES.ts`: https://github.com/Expensify/App/blob/main/src/ROUTES.ts
+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 = {
@@ -55,11 +65,11 @@ export const ROUTES = {
 
 ```
 
-2. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.ts`: 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
 

assets/images/example-check-image-en.png

@@ -46,7 +46,7 @@
     - [ ] 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(theme.componentBG`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/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.

assets/images/example-check-image-es.png

@@ -7,7 +7,7 @@
     "electron-context-menu": "^2.3.0",
     "electron-log": "^4.4.7",
     "electron-serve": "^1.0.0",
-    "electron-updater": "^6.1.4",
+    "electron-updater": "^6.1.6",
     "node-machine-id": "^1.1.12"
   },
   "author": "Expensify, Inc.",

assets/images/home-background--android.svg

@@ -111,6 +111,8 @@ <h3>Get Started</h3>
             </div>
         </div>
 
+        <p class="page-footer__fine-print">The Expensify Visa® Commercial Card is issued by The Bancorp Bank, N.A., Member FDIC, pursuant to a license from Visa U.S.A. Inc. and may not be used at all merchants that accept Visa cards. Apple® and the Apple logo® are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc. Google Play and the Google Play logo are trademarks of Google LLC.</p>
+
         <div class="page-footer__logo">
             <img src="/assets/images/expensify-footer-logo.svg" alt="Expensify" />
         </div>

assets/images/home-background--mobile.svg

@@ -10,9 +10,4 @@ <h1 class="title">{{ platform.hub-title }}</h1>
             {% include hub-card.html hub=hub platform=selectedPlatform %}
         {% endfor %}
     </div>
-
-    <div class="cards-group">
-        <!-- Concierge button anchored globally (rendered on narrow screens) -->
-        {% include floating-concierge-button.html id="floating-concierge-button-global" %}
-    </div>
 </div>

assets/images/home-fade-gradient--mobile.svg

@@ -57,9 +57,6 @@
                 <div class="article-toc"></div>
             {% endif %}
         </div>
-
-        <!-- Concierge button anchored at the bottom of the LHN (rendered on wider screens) -->
-        {% include floating-concierge-button.html id="floating-concierge-button-lhn" %}
     </div>
 
     <div id="content-area">