Add changes to properly open Explanation Modal and onboarding

.eslintignore

@@ -1,5 +1,11 @@
-**/node_modules/*
-**/dist/*
-android/**/build/*
-.github/actions/**/index.js"
+!.storybook
+!.github
+.github/actions/**/index.js
+*.config.js
+**/.eslintrc.js
+**/node_modules/**
+**/dist/**
+android/**/build/**
 docs/vendor/**
+docs/assets/**
+web/gtm.js

.github/.eslintrc.js

@@ -1,6 +1,10 @@
-// For all these Node.js scripts, we do not want to disable `console` statements
 module.exports = {
     rules: {
+        // For all these Node.js scripts, we do not want to disable `console` statements
         'no-console': 'off',
+
+        '@lwc/lwc/no-async-await': 'off',
+        'no-await-in-loop': 'off',
+        'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'],
     },
 };

.github/actions/javascript/awaitStagingDeploys/awaitStagingDeploys.ts

@@ -8,18 +8,10 @@ import {promiseDoWhile} from '@github/libs/promiseWhile';
 type CurrentStagingDeploys = Awaited<ReturnType<typeof GitHubUtils.octokit.actions.listWorkflowRuns>>['data']['workflow_runs'];
 
 function run() {
-    console.info('[awaitStagingDeploys] run()');
-    console.info('[awaitStagingDeploys] getStringInput', getStringInput);
-    console.info('[awaitStagingDeploys] GitHubUtils', GitHubUtils);
-    console.info('[awaitStagingDeploys] promiseDoWhile', promiseDoWhile);
-
     const tag = getStringInput('TAG', {required: false});
-    console.info('[awaitStagingDeploys] run() tag', tag);
 
     let currentStagingDeploys: CurrentStagingDeploys = [];
 
-    console.info('[awaitStagingDeploys] run()  _.throttle', lodashThrottle);
-
     const throttleFunc = () =>
         Promise.all([
             // These are active deploys
@@ -41,24 +33,20 @@ function run() {
                 }),
         ])
             .then((responses) => {
-                console.info('[awaitStagingDeploys] listWorkflowRuns responses', responses);
                 const workflowRuns = responses[0].data.workflow_runs;
                 if (!tag && typeof responses[1] === 'object') {
                     workflowRuns.push(...responses[1].data.workflow_runs);
                 }
-                console.info('[awaitStagingDeploys] workflowRuns', workflowRuns);
                 return workflowRuns;
             })
             .then((workflowRuns) => (currentStagingDeploys = workflowRuns.filter((workflowRun) => workflowRun.status !== 'completed')))
             .then(() => {
-                console.info('[awaitStagingDeploys] currentStagingDeploys', currentStagingDeploys);
                 console.log(
                     !currentStagingDeploys.length
                         ? 'No current staging deploys found'
                         : `Found ${currentStagingDeploys.length} staging deploy${currentStagingDeploys.length > 1 ? 's' : ''} still running...`,
                 );
             });
-    console.info('[awaitStagingDeploys] run() throttleFunc', throttleFunc);
 
     return promiseDoWhile(
         () => !!currentStagingDeploys.length,

.github/actions/javascript/awaitStagingDeploys/index.js

@@ -12131,14 +12131,8 @@ const CONST_1 = __importDefault(__nccwpck_require__(9873));
 const GithubUtils_1 = __importDefault(__nccwpck_require__(9296));
 const promiseWhile_1 = __nccwpck_require__(9438);
 function run() {
-    console.info('[awaitStagingDeploys] run()');
-    console.info('[awaitStagingDeploys] getStringInput', ActionUtils_1.getStringInput);
-    console.info('[awaitStagingDeploys] GitHubUtils', GithubUtils_1.default);
-    console.info('[awaitStagingDeploys] promiseDoWhile', promiseWhile_1.promiseDoWhile);
     const tag = (0, ActionUtils_1.getStringInput)('TAG', { required: false });
-    console.info('[awaitStagingDeploys] run() tag', tag);
     let currentStagingDeploys = [];
-    console.info('[awaitStagingDeploys] run()  _.throttle', throttle_1.default);
     const throttleFunc = () => Promise.all([
         // These are active deploys
         GithubUtils_1.default.octokit.actions.listWorkflowRuns({
@@ -12158,22 +12152,18 @@ function run() {
             }),
     ])
         .then((responses) => {
-        console.info('[awaitStagingDeploys] listWorkflowRuns responses', responses);
         const workflowRuns = responses[0].data.workflow_runs;
         if (!tag && typeof responses[1] === 'object') {
             workflowRuns.push(...responses[1].data.workflow_runs);
         }
-        console.info('[awaitStagingDeploys] workflowRuns', workflowRuns);
         return workflowRuns;
     })
         .then((workflowRuns) => (currentStagingDeploys = workflowRuns.filter((workflowRun) => workflowRun.status !== 'completed')))
         .then(() => {
-        console.info('[awaitStagingDeploys] currentStagingDeploys', currentStagingDeploys);
         console.log(!currentStagingDeploys.length
             ? 'No current staging deploys found'
             : `Found ${currentStagingDeploys.length} staging deploy${currentStagingDeploys.length > 1 ? 's' : ''} still running...`);
     });
-    console.info('[awaitStagingDeploys] run() throttleFunc', throttleFunc);
     return (0, promiseWhile_1.promiseDoWhile)(() => !!currentStagingDeploys.length, (0, throttle_1.default)(throttleFunc, 
     // Poll every 60 seconds instead of every 10 seconds
     CONST_1.default.POLL_RATE * 6));
@@ -12729,20 +12719,23 @@ exports.promiseDoWhile = exports.promiseWhile = void 0;
  * Simulates a while loop where the condition is determined by the result of a Promise.
  */
 function promiseWhile(condition, action) {
-    console.info('[promiseWhile] promiseWhile()');
     return new Promise((resolve, reject) => {
         const loop = function () {
             if (!condition()) {
                 resolve();
             }
             else {
                 const actionResult = action?.();
-                console.info('[promiseWhile] promiseWhile() actionResult', actionResult);
                 if (!actionResult) {
                     resolve();
                     return;
                 }
-                Promise.resolve(actionResult).then(loop).catch(reject);
+                Promise.resolve(actionResult)
+                    .then(() => {
+                    // Set a timeout to delay the next loop iteration
+                    setTimeout(loop, 1000); // 1000 ms delay
+                })
+                    .catch(reject);
             }
         };
         loop();
@@ -12753,11 +12746,8 @@ exports.promiseWhile = promiseWhile;
  * Simulates a do-while loop where the condition is determined by the result of a Promise.
  */
 function promiseDoWhile(condition, action) {
-    console.info('[promiseWhile] promiseDoWhile()');
     return new Promise((resolve, reject) => {
-        console.info('[promiseWhile] promiseDoWhile() condition', condition);
         const actionResult = action?.();
-        console.info('[promiseWhile] promiseDoWhile() actionResult', actionResult);
         if (!actionResult) {
             resolve();
             return;

.github/actions/javascript/bumpVersion/bumpVersion.ts

@@ -1,6 +1,7 @@
 import * as core from '@actions/core';
 import {exec as originalExec} from 'child_process';
 import fs from 'fs';
+import type {PackageJson} from 'type-fest';
 import {promisify} from 'util';
 import {generateAndroidVersionCode, updateAndroidVersion, updateiOSVersion} from '@github/libs/nativeVersionUpdater';
 import * as versionUpdater from '@github/libs/versionUpdater';
@@ -19,7 +20,7 @@ function updateNativeVersions(version: string) {
         .then(() => {
             console.log('Successfully updated Android!');
         })
-        .catch((err) => {
+        .catch((err: string | Error) => {
             console.error('Error updating Android');
             core.setFailed(err);
         });
@@ -47,8 +48,12 @@ if (!semanticVersionLevel || !Object.keys(versionUpdater.SEMANTIC_VERSION_LEVELS
     console.log(`Invalid input for 'SEMVER_LEVEL': ${semanticVersionLevel}`, `Defaulting to: ${semanticVersionLevel}`);
 }
 
-const {version: previousVersion} = JSON.parse(fs.readFileSync('./package.json').toString());
-const newVersion = versionUpdater.incrementVersion(previousVersion, semanticVersionLevel);
+const {version: previousVersion}: PackageJson = JSON.parse(fs.readFileSync('./package.json').toString());
+if (!previousVersion) {
+    core.setFailed('Error: Could not read package.json');
+}
+
+const newVersion = versionUpdater.incrementVersion(previousVersion ?? '', semanticVersionLevel);
 console.log(`Previous version: ${previousVersion}`, `New version: ${newVersion}`);
 
 updateNativeVersions(newVersion);

.github/actions/javascript/bumpVersion/index.js

@@ -3478,7 +3478,10 @@ if (!semanticVersionLevel || !Object.keys(versionUpdater.SEMANTIC_VERSION_LEVELS
     console.log(`Invalid input for 'SEMVER_LEVEL': ${semanticVersionLevel}`, `Defaulting to: ${semanticVersionLevel}`);
 }
 const { version: previousVersion } = JSON.parse(fs_1.default.readFileSync('./package.json').toString());
-const newVersion = versionUpdater.incrementVersion(previousVersion, semanticVersionLevel);
+if (!previousVersion) {
+    core.setFailed('Error: Could not read package.json');
+}
+const newVersion = versionUpdater.incrementVersion(previousVersion ?? '', semanticVersionLevel);
 console.log(`Previous version: ${previousVersion}`, `New version: ${newVersion}`);
 updateNativeVersions(newVersion);
 console.log(`Setting npm version to ${newVersion}`);

.github/actions/javascript/checkDeployBlockers/checkDeployBlockers.ts

@@ -60,7 +60,7 @@ const run = function (): Promise<void> {
                 core.setOutput('HAS_DEPLOY_BLOCKERS', false);
             }
         })
-        .catch((error) => {
+        .catch((error: string | Error) => {
             console.error('A problem occurred while trying to communicate with the GitHub API', error);
             core.setFailed(error);
         });

.github/actions/javascript/getGraphiteString/getGraphiteString.ts

@@ -14,6 +14,7 @@ const run = () => {
 
     // Initialize string to store Graphite metrics
     let graphiteString = '';
+    let timestamp: number;
 
     // Iterate over each entry
     regressionEntries.forEach((entry) => {
@@ -26,7 +27,9 @@ const run = () => {
             const current = JSON.parse(entry);
 
             // Extract timestamp, Graphite accepts timestamp in seconds
-            const timestamp = current.metadata?.creationDate ? Math.floor(new Date(current.metadata.creationDate).getTime() / 1000) : '';
+            if (current.metadata?.creationDate) {
+                timestamp = Math.floor(new Date(current.metadata.creationDate as string).getTime() / 1000);
+            }
 
             if (current.name && current.meanDuration && current.meanCount && timestamp) {
                 const formattedName = current.name.split(' ').join('-');

.github/actions/javascript/getGraphiteString/index.js

@@ -2735,6 +2735,7 @@ const run = () => {
     const regressionEntries = regressionFile.split('\n');
     // Initialize string to store Graphite metrics
     let graphiteString = '';
+    let timestamp;
     // Iterate over each entry
     regressionEntries.forEach((entry) => {
         // Skip empty lines
@@ -2744,7 +2745,9 @@ const run = () => {
         try {
             const current = JSON.parse(entry);
             // Extract timestamp, Graphite accepts timestamp in seconds
-            const timestamp = current.metadata?.creationDate ? Math.floor(new Date(current.metadata.creationDate).getTime() / 1000) : '';
+            if (current.metadata?.creationDate) {
+                timestamp = Math.floor(new Date(current.metadata.creationDate).getTime() / 1000);
+            }
             if (current.name && current.meanDuration && current.meanCount && timestamp) {
                 const formattedName = current.name.split(' ').join('-');
                 const renderDurationString = `${GRAPHITE_PATH}.${formattedName}.renderDuration ${current.meanDuration} ${timestamp}`;

.github/actions/javascript/getPreviousVersion/getPreviousVersion.ts

@@ -1,12 +1,17 @@
 import * as core from '@actions/core';
 import {readFileSync} from 'fs';
+import type {PackageJson} from 'type-fest';
 import * as versionUpdater from '@github/libs/versionUpdater';
 
 const semverLevel = core.getInput('SEMVER_LEVEL', {required: true});
 if (!semverLevel || !Object.values<string>(versionUpdater.SEMANTIC_VERSION_LEVELS).includes(semverLevel)) {
     core.setFailed(`'Error: Invalid input for 'SEMVER_LEVEL': ${semverLevel}`);
 }
 
-const {version: currentVersion} = JSON.parse(readFileSync('./package.json', 'utf8'));
-const previousVersion = versionUpdater.getPreviousVersion(currentVersion, semverLevel);
+const {version: currentVersion}: PackageJson = JSON.parse(readFileSync('./package.json', 'utf8'));
+if (!currentVersion) {
+    core.setFailed('Error: Could not read package.json');
+}
+
+const previousVersion = versionUpdater.getPreviousVersion(currentVersion ?? '', semverLevel);
 core.setOutput('PREVIOUS_VERSION', previousVersion);

.github/actions/javascript/getPreviousVersion/index.js

@@ -2728,7 +2728,10 @@ if (!semverLevel || !Object.values(versionUpdater.SEMANTIC_VERSION_LEVELS).inclu
     core.setFailed(`'Error: Invalid input for 'SEMVER_LEVEL': ${semverLevel}`);
 }
 const { version: currentVersion } = JSON.parse((0, fs_1.readFileSync)('./package.json', 'utf8'));
-const previousVersion = versionUpdater.getPreviousVersion(currentVersion, semverLevel);
+if (!currentVersion) {
+    core.setFailed('Error: Could not read package.json');
+}
+const previousVersion = versionUpdater.getPreviousVersion(currentVersion ?? '', semverLevel);
 core.setOutput('PREVIOUS_VERSION', previousVersion);
 
 

.github/actions/javascript/reviewerChecklist/reviewerChecklist.ts

@@ -90,7 +90,7 @@ function checkIssueForCompletedChecklist(numberOfChecklistItems: number) {
 
 getNumberOfItemsFromReviewerChecklist()
     .then(checkIssueForCompletedChecklist)
-    .catch((err) => {
+    .catch((err: string | Error) => {
         console.error(err);
         core.setFailed(err);
     });

.github/libs/promiseWhile.ts

@@ -4,22 +4,24 @@ import type {DebouncedFunc} from 'lodash';
  * Simulates a while loop where the condition is determined by the result of a Promise.
  */
 function promiseWhile(condition: () => boolean, action: (() => Promise<void>) | DebouncedFunc<() => Promise<void>> | undefined): Promise<void> {
-    console.info('[promiseWhile] promiseWhile()');
-
     return new Promise((resolve, reject) => {
         const loop = function () {
             if (!condition()) {
                 resolve();
             } else {
                 const actionResult = action?.();
-                console.info('[promiseWhile] promiseWhile() actionResult', actionResult);
 
                 if (!actionResult) {
                     resolve();
                     return;
                 }
 
-                Promise.resolve(actionResult).then(loop).catch(reject);
+                Promise.resolve(actionResult)
+                    .then(() => {
+                        // Set a timeout to delay the next loop iteration
+                        setTimeout(loop, 1000); // 1000 ms delay
+                    })
+                    .catch(reject);
             }
         };
         loop();
@@ -30,12 +32,9 @@ function promiseWhile(condition: () => boolean, action: (() => Promise<void>) |
  * Simulates a do-while loop where the condition is determined by the result of a Promise.
  */
 function promiseDoWhile(condition: () => boolean, action: (() => Promise<void>) | DebouncedFunc<() => Promise<void>> | undefined): Promise<void> {
-    console.info('[promiseWhile] promiseDoWhile()');
-
     return new Promise((resolve, reject) => {
-        console.info('[promiseWhile] promiseDoWhile() condition', condition);
         const actionResult = action?.();
-        console.info('[promiseWhile] promiseDoWhile() actionResult', actionResult);
+
         if (!actionResult) {
             resolve();
             return;

.github/libs/sanitizeStringForJSONParse.ts

@@ -16,7 +16,7 @@ const replacer = (str: string): string =>
  * Solution partly taken from SO user Gabriel Rodríguez Flores 🙇
  * https://stackoverflow.com/questions/52789718/how-to-remove-special-characters-before-json-parse-while-file-reading
  */
-const sanitizeStringForJSONParse = (inputString: string): string => {
+const sanitizeStringForJSONParse = (inputString: string | number | boolean | null | undefined): string => {
     if (typeof inputString !== 'string') {
         throw new TypeError('Input must me of type String');
     }

.github/scripts/detectRedirectCycle.ts

@@ -52,7 +52,7 @@ function detectCycle(): boolean {
 
 fs.createReadStream(`${process.cwd()}/docs/redirects.csv`)
     .pipe(parser)
-    .on('data', (row) => {
+    .on('data', (row: [string, string]) => {
         // Create a directed graph of sourceURL -> targetURL
         addEdge(row[0], row[1]);
     })

.github/workflows/deployExpensifyHelp.yml

@@ -26,6 +26,8 @@ concurrency:
 
 jobs:
   build:
+    env:
+      IS_PR_FROM_FORK: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -49,24 +51,26 @@ jobs:
       - name: Deploy to Cloudflare Pages
         uses: cloudflare/pages-action@f0a1cd58cd66095dee69bfa18fa5efd1dde93bca
         id: deploy
-        if: github.event_name != 'pull_request' || (github.event_name == 'pull_request' && !github.event.pull_request.head.repo.fork)
+        if: env.IS_PR_FROM_FORK != 'true'
         with:
           apiToken: ${{ secrets.CLOUDFLARE_PAGES_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           projectName: helpdot
           directory: ./docs/_site
 
       - name: Setup Cloudflare CLI
+        if: env.IS_PR_FROM_FORK != 'true'
         run: pip3 install cloudflare==2.19.0
 
       - name: Purge Cloudflare cache
+        if: env.IS_PR_FROM_FORK != 'true'
         run: /home/runner/.local/bin/cli4 --verbose --delete hosts=["help.expensify.com"] /zones/:9ee042e6cfc7fd45e74aa7d2f78d617b/purge_cache
         env:
           CF_API_KEY: ${{ secrets.CLOUDFLARE_TOKEN }}
 
       - name: Leave a comment on the PR
         uses: actions-cool/maintain-one-comment@de04bd2a3750d86b324829a3ff34d47e48e16f4b
-        if: ${{ github.event_name == 'pull_request' }}
+        if: ${{ github.event_name == 'pull_request' && env.IS_PR_FROM_FORK != 'true' }}
         with:
           token: ${{ secrets.OS_BOTIFY_TOKEN }}
           body: ${{ format('A preview of your ExpensifyHelp changes have been deployed to {0} ⚡️', steps.deploy.outputs.alias) }}

.github/workflows/e2ePerformanceTests.yml

@@ -15,6 +15,10 @@ on:
         type: string
         required: true
 
+concurrency:
+  group: ${{ github.ref == 'refs/heads/main' && format('{0}-{1}', github.ref, github.sha) || github.ref }}-e2e
+  cancel-in-progress: true
+
 jobs:
   buildBaseline:
     runs-on: ubuntu-latest-xl