Merge pull request #4446 from Expensify/update-staging-from-main

.env.example

@@ -8,3 +8,4 @@ SECURE_NGROK_URL=https://secure-expensify-user.ngrok.io/
 NGROK_URL=https://expensify-user.ngrok.io/
 USE_NGROK=false
 USE_WEB_PROXY=false
+USE_WDYR=false

.github/workflows/warnCPLabel.yml

@@ -1,7 +1,7 @@
 name: Explain Cherry-Pick label via OSBotify comment
 
 on:
-  pull_request:
+  pull_request_target:
     types:
       - labeled
 
@@ -14,7 +14,7 @@ jobs:
       - name: Comment on PR to explain the CP Staging label
         uses: actions-ecosystem/action-create-comment@cd098164398331c50e7dfdd0dfa1b564a1873fac
         with:
-          github_token: ${{ secrets.OS_BOTIFY_TOKEN }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           body: |
             :warning: :warning: **Heads up! This pull request has the `CP Staging` label.** :warning: :warning:
             Merging it will cause it to be immediately deployed to staging, _even if the [open `StagingDeployCash` deploy checklist](https://github.com/Expensify/Expensify.cash/issues?q=is%3Aopen+is%3Aissue+label%3AStagingDeployCash) is locked._

CONTRIBUTING.md

@@ -63,6 +63,7 @@ In this scenario, it’s possible that you found a bug or enhancement that we ha
 
 #### Propose a solution for the job
 4. After you reproduce the issue, make a proposal for your solution and post it as a comment in the corresponding GitHub issue (linked in the Upwork job). Your solution proposal should include a brief technical explanation of the changes you will make.
+    - Note: If you post a proposed solution in an issue that has not been tagged with the `External` label, Expensify has the right to use your proposal to fix said issue, without providing compensation for your solution.
 5. Pause at this step until Expensify provides feedback on your proposal (do not begin coding or creating a pull request yet).
 6. If your solution proposal is accepted, Expensify will hire you on Upwork and assign the GitHub issue to you.
 

PERFORMANCE.md

@@ -24,6 +24,15 @@
 
 **Suggested:** [Deep Dive with the React DevTools creator](https://www.youtube.com/watch?v=nySib7ipZdk)
 
+### Why Did You Render?
+- Why Did You Render (WDYR) sends console notifications about potentially avoidable component re-renders.
+- It can also help to simply track when and why a certain component re-renders.
+- To enable it, set `USE_WDYR=true` in your `.env` file. 
+- You can add or exclude tracked components by their `displayName` in `wdyr.js`.
+- Open the browser console to see WDYR notifications.
+
+**Suggested** [Why Did You Render docs](https://github.com/welldone-software/why-did-you-render)
+
 ## Reconciliation
 
 React is pretty smart and in many cases is able to tell if something needs to update. The process by which React goes about updating the "tree" or view heirarchy is called reconciliation. If React thinks something needs to update it will render it again. React also assumes that if a parent component rendered then it's child should also re-render.

android/app/build.gradle

@@ -150,8 +150,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001008207
-        versionName "1.0.82-7"
+        versionCode 1001008208
+        versionName "1.0.82-8"
     }
     splits {
         abi {

desktop/main.js

@@ -77,16 +77,13 @@ const quitAndInstallWithUpdate = () => {
     if (!downloadedVersion) {
         return;
     }
-    app.relaunch({
-        args: [`${EXPECTED_UPDATE_VERSION_FLAG}=${downloadedVersion}`],
-    });
     hasUpdate = true;
     autoUpdater.quitAndInstall();
 };
 
 // Defines the system-level menu item for manually triggering an update after
 const updateAppMenuItem = new MenuItem({
-    label: 'Update Expensify.cash',
+    label: 'Update New Expensify',
     enabled: false,
     click: quitAndInstallWithUpdate,
 });
@@ -120,7 +117,7 @@ const mainWindow = (() => {
     // Prod and staging set the icon in the electron-builder config, so only update it here for dev
     if (isDev) {
         app.dock.setIcon(`${__dirname}/icon-dev.png`);
-        app.setName('Expensify.cash');
+        app.setName('New Expensify');
     }
 
     return app.whenReady()
@@ -137,7 +134,7 @@ const mainWindow = (() => {
 
             // Prod and staging overwrite the app name in the electron-builder config, so only update it here for dev
             if (isDev) {
-                browserWindow.setTitle('Expensify.cash');
+                browserWindow.setTitle('New Expensify');
             }
 
             // List the Expensify Chat instance under the Window menu, even when it's hidden
@@ -172,7 +169,7 @@ const mainWindow = (() => {
             const windowMenu = systemMenu.items.find(item => item.role === 'windowmenu');
             windowMenu.submenu.append(new MenuItem({type: 'separator'}));
             windowMenu.submenu.append(new MenuItem({
-                label: 'Expensify.cash',
+                label: 'New Expensify',
                 accelerator: 'CmdOrCtrl+1',
                 click: () => browserWindow.show(),
             }));

ios/ExpensifyCash/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.0.82.7</string>
+	<string>1.0.82.8</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/ExpensifyCashTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.0.82.7</string>
+	<string>1.0.82.8</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "expensify.cash",
-  "version": "1.0.82-7",
+  "version": "1.0.82-8",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "Expensify.cash is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -60,7 +60,7 @@
     "electron-log": "^4.3.5",
     "electron-serve": "^1.0.0",
     "electron-updater": "^4.3.4",
-    "expensify-common": "git://github.com/Expensify/expensify-common.git#e83c6998dac6837098745139cb2bdd4e18bf7134",
+    "expensify-common": "git://github.com/Expensify/expensify-common.git#4016a786d66ff38ed76a191edef31ebd737a0190",
     "expo-haptics": "^10.0.0",
     "file-loader": "^6.0.0",
     "html-entities": "^1.3.1",
@@ -124,6 +124,7 @@
     "@testing-library/jest-native": "^3.4.2",
     "@testing-library/react-native": "^7.0.2",
     "@vercel/ncc": "^0.27.0",
+    "@welldone-software/why-did-you-render": "^6.2.0",
     "ajv-cli": "^5.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.2.2",

src/App.js

@@ -1,10 +1,13 @@
+import '../wdyr';
 import React from 'react';
 import {LogBox} from 'react-native';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import CustomStatusBar from './components/CustomStatusBar';
 import ErrorBoundary from './components/ErrorBoundary';
 import Expensify from './Expensify';
 import {LocaleContextProvider} from './components/withLocalize';
+import OnyxProvider from './components/OnyxProvider';
+import ComposeProviders from './components/ComposeProviders';
 
 LogBox.ignoreLogs([
     // Basically it means that if the app goes in the background and back to foreground on Android,
@@ -17,14 +20,18 @@ LogBox.ignoreLogs([
 ]);
 
 const App = () => (
-    <SafeAreaProvider>
-        <LocaleContextProvider>
-            <CustomStatusBar />
-            <ErrorBoundary errorMessage="E.cash crash caught by error boundary">
-                <Expensify />
-            </ErrorBoundary>
-        </LocaleContextProvider>
-    </SafeAreaProvider>
+    <ComposeProviders
+        components={[
+            OnyxProvider,
+            SafeAreaProvider,
+            LocaleContextProvider,
+        ]}
+    >
+        <CustomStatusBar />
+        <ErrorBoundary errorMessage="E.cash crash caught by error boundary">
+            <Expensify />
+        </ErrorBoundary>
+    </ComposeProviders>
 );
 
 App.displayName = 'App';

src/CONFIG.js

@@ -55,7 +55,7 @@ export default {
         APP_KEY: lodashGet(Config, 'PUSHER_APP_KEY', '268df511a204fbb60884'),
         CLUSTER: 'mt1',
     },
-    SITE_TITLE: 'Expensify.cash',
+    SITE_TITLE: 'New Expensify',
     FAVICON: {
         DEFAULT: '/favicon.png',
         UNREAD: '/favicon-unread.png',

src/Expensify.js

@@ -2,16 +2,13 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import {View, AppState} from 'react-native';
-import Onyx, {withOnyx} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 
 import BootSplash from './libs/BootSplash';
-import listenToStorageEvents from './libs/listenToStorageEvents';
 import * as ActiveClientManager from './libs/ActiveClientManager';
 import ONYXKEYS from './ONYXKEYS';
-import CONST from './CONST';
 import NavigationRoot from './libs/Navigation/NavigationRoot';
-import Log from './libs/Log';
 import migrateOnyx from './libs/migrateOnyx';
 import styles from './styles/styles';
 import PushNotification from './libs/Notification/PushNotification';
@@ -24,33 +21,6 @@ import ROUTES from './ROUTES';
 import StartupTimer from './libs/StartupTimer';
 import {setRedirectToWorkspaceNewAfterSignIn} from './libs/actions/Session';
 
-// Initialize the store when the app loads for the first time
-Onyx.init({
-    keys: ONYXKEYS,
-    safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
-    initialKeyStates: {
-
-        // Clear any loading and error messages so they do not appear on app startup
-        [ONYXKEYS.SESSION]: {loading: false, shouldShowComposeInput: true},
-        [ONYXKEYS.ACCOUNT]: CONST.DEFAULT_ACCOUNT_DATA,
-        [ONYXKEYS.NETWORK]: {isOffline: false},
-        [ONYXKEYS.IOU]: {
-            loading: false, error: false, creatingIOUTransaction: false, isRetrievingCurrency: false,
-        },
-        [ONYXKEYS.IS_SIDEBAR_LOADED]: false,
-    },
-    registerStorageEventListener: (onStorageEvent) => {
-        listenToStorageEvents(onStorageEvent);
-    },
-});
-Onyx.registerLogger(({level, message}) => {
-    if (level === 'alert') {
-        Log.alert(message, 0, {}, false);
-    } else {
-        Log.client(message);
-    }
-});
-
 const propTypes = {
     /* Onyx Props */
 

src/ROUTES.js

@@ -55,12 +55,14 @@ export default {
     SEARCH: 'search',
     SET_PASSWORD_WITH_VALIDATE_CODE: 'setpassword/:accountID/:validateCode',
     DETAILS: 'details',
-    DETAILS_WITH_LOGIN: 'details/:login',
-    getDetailsRoute: login => `details/${login}`,
+    getDetailsRoute: login => `details?login=${encodeURIComponent(login)}`,
     REPORT_PARTICIPANTS: 'r/:reportID/participants',
     getReportParticipantsRoute: reportID => `r/${reportID}/participants`,
-    REPORT_PARTICIPANT: 'r/:reportID/participants/:login',
-    getReportParticipantRoute: (reportID, login) => `r/${reportID}/participants/${login}`,
+    REPORT_PARTICIPANT: 'r/:reportID/participants/details',
+    getReportParticipantRoute: (
+        reportID,
+        login,
+    ) => `r/${reportID}/participants/details?login=${encodeURIComponent(login)}`,
     REPORT_WITH_ID_DETAILS: 'r/:reportID/details',
     getReportDetailsRoute: reportID => `r/${reportID}/details`,
     VALIDATE_LOGIN: 'v',
@@ -80,6 +82,8 @@ export default {
     getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`,
     WORKSPACE_INVITE: 'workspace/:policyID/invite',
     REQUEST_CALL: 'request-call',
+    getWorkspaceEditorRoute: policyID => `workspace/${policyID}/edit`,
+    WORKSPACE_EDITOR: 'workspace/:policyID/edit',
     VALIDATE_CODE_URL: (accountID, validateCode, exitTo = '') => {
         const exitToURL = exitTo ? `?exitTo=${exitTo}` : '';
         return `v/${accountID}/${validateCode}${exitToURL}`;

src/components/AvatarWithImagePicker.js

@@ -12,6 +12,7 @@ import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import AttachmentPicker from './AttachmentPicker';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import variables from '../styles/variables';
 
 const propTypes = {
     /** Avatar URL to display */
@@ -114,10 +115,15 @@ class AvatarWithImagePicker extends React.Component {
                         {({openPicker}) => (
                             <>
                                 <Pressable
-                                    style={[styles.smallEditIcon]}
+                                    style={[styles.smallEditIcon, styles.smallAvatarEditIcon]}
                                     onPress={() => this.setState({isMenuVisible: true})}
                                 >
-                                    <Icon src={Pencil} fill={themeColors.iconReversed} />
+                                    <Icon
+                                        src={Pencil}
+                                        width={variables.iconSizeSmall}
+                                        height={variables.iconSizeSmall}
+                                        fill={themeColors.iconReversed}
+                                    />
                                 </Pressable>
                                 <PopoverMenu
                                     isVisible={this.state.isMenuVisible}

src/components/ComposeProviders.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Provider components go here */
+    components: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.func])).isRequired,
+
+    /** Rendered child component */
+    children: PropTypes.node.isRequired,
+};
+
+const ComposeProviders = props => (
+    <>
+        {props.components.reduceRight((memo, Component) => (
+            <Component>{memo}</Component>
+        ), props.children)}
+    </>
+);
+
+ComposeProviders.propTypes = propTypes;
+ComposeProviders.displayName = 'ComposeProviders';
+export default ComposeProviders;