Merge branch 'main' into add-new-separator-for-action-composer

.github/PULL_REQUEST_TEMPLATE.md

@@ -79,6 +79,7 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
 - [ ] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
 - [ ] I followed proper code patterns (see [Reviewing the code](https://github.com/Expensify/App/blob/main/contributingGuides/PR_REVIEW_GUIDELINES.md#reviewing-the-code))
     - [ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. `toggleReport` and not `onIconClick`)
+    - [ ] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. `myBool && <MyComponent />`.
     - [ ] I verified that comments were added to code that is not self explanatory
     - [ ] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
     - [ ] I verified any copy / text shown in the product is localized by adding it to `src/languages/*` files and using the [translation method](https://github.com/Expensify/App/blob/4bd99402cebdf4d7394e0d1f260879ea238197eb/src/components/withLocalize.js#L60)

.github/scripts/createDocsRoutes.js

@@ -0,0 +1,92 @@
+const yaml = require('js-yaml');
+const fs = require('fs');
+const _ = require('underscore');
+
+const warn = 'Number of hubs in _routes.yml does not match number of hubs in docs/articles. Please update _routes.yml with hub info.';
+const disclaimer = '# This file is auto-generated. Do not edit it directly. Use npm run createDocsRoutes instead.\n';
+const docsDir = `${process.cwd()}/docs`;
+const routes = yaml.load(fs.readFileSync(`${docsDir}/_data/_routes.yml`, 'utf8'));
+
+/**
+ * @param {String} str - The string to convert to title case
+ * @returns {String}
+ */
+function toTitleCase(str) {
+    return str.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+}
+
+/**
+ * @param {String} filename - The name of the file
+ * @returns {Object}
+ */
+function getArticleObj(filename) {
+    const href = filename.replace('.md', '');
+    return {
+        href,
+        title: toTitleCase(href.replaceAll('-', ' ')),
+    };
+}
+
+/**
+ * If the articlea / sections exist in the hub, then push the entry to the array.
+ * Otherwise, create the array and push the entry to it.
+ * @param {*} hubs - The hubs array
+ * @param {*} hub - The hub we are iterating
+ * @param {*} key - If we want to push sections / articles
+ * @param {*} entry - The article / section to push
+ */
+function pushOrCreateEntry(hubs, hub, key, entry) {
+    const hubObj = _.find(hubs, obj => obj.href === hub);
+    if (hubObj[key]) {
+        hubObj[key].push(entry);
+    } else {
+        hubObj[key] = [entry];
+    }
+}
+
+function run() {
+    const hubs = fs.readdirSync(`${docsDir}/articles`);
+    if (hubs.length !== routes.hubs.length) {
+        // If new hubs have been added without metadata addition to _routes.yml
+        console.error(warn);
+        process.exit(1);
+    }
+    _.each(hubs, (hub) => {
+        // Iterate through each directory in articles
+        fs.readdirSync(`${docsDir}/articles/${hub}`).forEach((fileOrFolder) => {
+            // If the directory content is a markdown file, then it is an article
+            if (fileOrFolder.endsWith('.md')) {
+                const articleObj = getArticleObj(fileOrFolder);
+                pushOrCreateEntry(routes.hubs, hub, 'articles', articleObj);
+                return;
+            }
+
+            // For readability, we will use the term section to refer to subfolders
+            const section = fileOrFolder;
+            const articles = [];
+
+            // Each subfolder will be a section containing articles
+            fs.readdirSync(`${docsDir}/articles/${hub}/${section}`).forEach((subArticle) => {
+                articles.push(getArticleObj(subArticle));
+            });
+
+            pushOrCreateEntry(routes.hubs, hub, 'sections', {
+                href: section,
+                title: toTitleCase(section.replaceAll('-', ' ')),
+                articles,
+            });
+        });
+    });
+
+    // Convert the object to YAML and write it to the file
+    let yamlString = yaml.dump(routes);
+    yamlString = disclaimer + yamlString;
+    fs.writeFileSync(`${docsDir}/_data/routes.yml`, yamlString);
+}
+
+try {
+    run();
+} catch (error) {
+    console.error('A problem occurred while trying to read the directories.', error);
+    process.exit(1);
+}

.github/scripts/createDocsRoutes.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+#
+# Re-compiles the routes.yml required by the docs and verifies that there is no diff,
+# because that would indicate that the PR author forgot to run `npm run createDocsRoutes`
+# and commit the updated routes file.
+
+declare -r GREEN='\033[0;32m'
+declare -r NC='\033[0m'
+
+printf '\nRebuilding docs/routes.yml...\n'
+npm run createDocsRoutes
+SCRIPT_EXIT_CODE=$?
+
+if [[ SCRIPT_EXIT_CODE -eq 1 ]]; then
+    exit 1
+else
+    echo -e "${GREEN}The docs routes files is up to date!${NC}"
+    exit 0
+fi

.github/workflows/deployExpensifyHelp.yml

@@ -0,0 +1,58 @@
+# Deploying the ExpensifyHelp Jekyll site by dynamically generating routes file
+name: Deploy ExpensifyHelp
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+      - name: Setup NodeJS
+        uses: Expensify/App/.github/actions/composite/setupNode@main
+      - name: Setup Pages
+        uses: actions/configure-pages@f156874f8191504dae5b037505266ed5dda6c382
+      - name: Create docs routes file
+        run: ./.github/scripts/createDocsRoutes.sh
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@0143c158f4fa0c5dcd99499a5d00859d79f70b0e
+        with:
+          source: ./docs/
+          destination: ./docs/_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@64bcae551a7b18bcb9a09042ddf1960979799187
+        with:
+          path: ./docs/_site
+
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@af48cf94a42f2c634308b1c9dc0151830b6f190a

.github/workflows/validateDocsRoutes.yml

@@ -0,0 +1,23 @@
+name: Validate Docs Routes File
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - docs/**
+
+jobs:
+  verify:
+    if: github.actor != 'OSBotify'
+    runs-on: ubuntu-latest
+    steps:
+      # This action checks-out the repository, so the workflow can access it.
+      - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+        with:
+          fetch-depth: 0
+
+      - uses: Expensify/App/.github/actions/composite/setupNode@main
+
+      # Verify that no new hubs were created without adding their metadata to _routes.yml
+      - name: Validate Docs Routes File
+        run: ./.github/scripts/createDocsRoutes.sh

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001030600
-        versionName "1.3.6-0"
+        versionCode 1001030804
+        versionName "1.3.8-4"
     }
 
     splits {

contributingGuides/FORMS.md

@@ -302,7 +302,3 @@ In case there's a nested Picker in Form, we should pass the props below to Form,
 #### Enable ScrollContext
 
 Pass the `scrollContextEnabled` prop to enable scrolling up when Picker is pressed, making sure the Picker is always in view and doesn't get covered by virtual keyboards for example.
-
-#### Enable scrolling to overflow
-
-In addition to the `scrollContextEnabled` prop, we can also pass `scrollToOverflowEnabled` when the nested Picker is at the bottom of the Form to prevent the popup selector from covering Picker.

contributingGuides/REVIEWER_CHECKLIST.md

@@ -19,6 +19,7 @@
 - [ ] If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
 - [ ] I verified proper code patterns were followed (see [Reviewing the code](https://github.com/Expensify/App/blob/main/contributingGuides/PR_REVIEW_GUIDELINES.md#reviewing-the-code))
     - [ ] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. `toggleReport` and not `onIconClick`).
+    - [ ] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. `myBool && <MyComponent />`.
     - [ ] I verified that comments were added to code that is not self explanatory
     - [ ] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
     - [ ] I verified any copy / text shown in the product is localized by adding it to `src/languages/*` files and using the [translation method](https://github.com/Expensify/App/blob/4bd99402cebdf4d7394e0d1f260879ea238197eb/src/components/withLocalize.js#L60)

docs/.gitignore

@@ -3,3 +3,4 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
+_data/routes.yml

docs/README.md

@@ -68,7 +68,7 @@ More details about the Jekyll project structure can be found [here](https://jeky
 
 ## Add content
 
-Copy the [template](https://github.com/Expensify/App/blob/main/docs/TEMPLATE.md) file into the correct subdirectory of `/articles`. For example, if the article belongs in the `Send money` hub, then copy the template into `articles/send-money` directory. Next, rename the copy with the name of the article title, i.e. [The-Free-Plan.md](https://github.com/Expensify/App/blob/main/docs/articles/send-money/The-Free-Plan.md) (you can use dashes for spaces in the file name if it's needed) and put the new file inside of the respective hub folder or sub-folder. The title will be rendered automatically according to the filename (the dashes will be removed in the generated site page).
+Copy the [template](https://github.com/Expensify/App/blob/main/docs/TEMPLATE.md) file into the correct subdirectory of `/articles`. For example, if the article belongs in the `Send money` hub and `Workspaces` section, then copy the template into `articles/send-money/workspaces` directory. Next, rename the copy with the name of the article title, i.e. [The-Free-Plan.md](https://github.com/Expensify/App/blob/main/docs/articles/send-money/The-Free-Plan.md) (you can use dashes for spaces in the file name if it's needed) and put the new file inside of the respective hub folder or sub-folder. The title will be rendered automatically according to the filename (the dashes will be removed in the generated site page).
 
 The sections of the article will be filled and nested automatically in the LHN, just ensure to use the [heading markdown tags](https://www.markdownguide.org/cheat-sheet/) correctly.
 
@@ -88,7 +88,9 @@ Just update the content for each variable accordingly or remove it if the inform
 
 ## Add the new page to routes.yml
 
-Next, add the article to `_data/routes.yml`. Note that hubs contain one or more articles, which may or may not be grouped into sections with other related articles.
+Next, run the command `npm run createDocsRoutes` to add the article to `_data/routes.yml`. Note that hubs contain one or more articles, which may or may not be grouped into sections with other related articles. All articles grouped under a section will be under the same subfolder in the hub folder.
+
+If you have added a new hub, make sure to update the `_routes.yml` with the folder name, title, icon and description of the hub.
 
 # How the site is deployed
 This site is hosted on GitHub Pages. GitHub Pages has a built-in Jekyll integration, and we have it configured such that whenever code is merged to main, GitHub will automatically build the Jekyll site housed in the `/docs` directory and deploy it straight to production. The help site is publicly discoverable at https://help.expensify.com/

docs/_data/_routes.yml

@@ -0,0 +1,26 @@
+home:
+  href: home
+  title: Welcome to ExpensifyHelp!
+  description: Find the answers to all of your questions about receipts, expenses, corporate cards, or anything else in the spend management universe.
+
+# Hubs are comprised of sections and articles. Sections contain multiple related articles, but there can be standalone articles as well
+hubs:
+  - href: send-money
+    title: Send money
+    description: With only a couple of clicks, send money to your friends or coworkers.
+    icon: /assets/images/paper-airplane.svg
+
+  - href: request-money
+    title: Request money
+    icon: /assets/images/money-case.svg
+    description: Request money for work expenses, bills, or a night out with friends.
+
+  - href: playbooks
+    title: Playbooks
+    icon: /assets/images/playbook.svg
+    description: Best practices for how to best deploy Expensify for your business
+
+  - href: other
+    title: Other
+    description: Everything else you're looking for is right here.
+    icon: /assets/images/lightbulb.svg

docs/_includes/hub.html

@@ -17,7 +17,8 @@ <h2 id="{{ section.href }}">
 
         <div class="cards-group">
             {% for article in section.articles %}
-                {% include article-card.html hub=hub.href href=article.href title=article.title %}
+                {% assign article_href = section.href | append: '/' | append: article.href %}
+                {% include article-card.html hub=hub.href href=article_href title=article.title %}
             {% endfor %}
         </div>
     </section>

docs/_includes/lhn-template.html

@@ -23,7 +23,8 @@
                             <a href="#{{ section.href }}" class="link">{{ section.title }}</a>
                             <ul>
                                 {% for article in section.articles %}
-                                    {% include lhn-article-link.html hub=hub.href href=article.href title=article.title %}
+                                    {% assign article_href = section.href | append: '/' | append: article.href %}
+                                    {% include lhn-article-link.html hub=hub.href href=article_href title=article.title %}
                                 {% endfor %}
                             </ul>
                         </li>