Skip to content

[No QA] Update help docs for Release 1: Stand up a baseline Insights page - #102832

Merged
stephanieelliott merged 53 commits into
mainfrom
claude-insightsRelease1HelpDocs
Oct 21, 2026
Merged

stephanieelliott merged 53 commits into
mainfrom
claude-insightsRelease1HelpDocs

Conversation

@MelvinBot

@MelvinBot MelvinBot commented Oct 2, 2026 •

Copy link
Copy Markdown
Contributor

Explanation of Change

Release 1 of the Insights project adds a top-level Insights page between Spend and Workspaces. It also moves the Spend-page insights there and moves Account on mobile. The current help docs still send members to Spend > Insights, so this PR updates them for the new page.

Important

Release 1 is behind the insightsPage beta. Keep this PR unmerged until the beta lifts, because the current docs on main still match what non-beta users see.

Insights articles (docs/articles/new-expensify/insights/)

  • How-to-Use-Insights-in-Expensify.md: rewritten as the Learn about Insights topic article. The URL is unchanged. It explains what Insights are, which four charts the page shows, who can see each chart, and how Insights relates to Spend.
  • Use-Insights.md (new task article): where to find the Insights tab, the Date, Workspace, and Group currency filters, how to open the expenses behind a chart (View on Spend or select a data point), and FAQs for the common support questions.
  • Understand-Spend-over-time.md (new topic article): what the headline chart shows, how its totals are calculated, the Group by options (Week, Month, Quarter, Year), and how to read changes in it.
  • View-the-Top-Spenders-report.md, View-the-Top-Merchants-report.md, View-the-Top-Categories-report.md: rewritten as chart articles. The URLs are unchanged. The old Spend > Insights steps, the previous-month and suggested-search wording, the View switcher steps, and the outdated screenshots are removed. Top spenders and Top categories now state their access requirements.

Other articles

  • Navigating-New-Expensify.md: adds Insights to the tab list, adds a section on what the Insights tab is used for, and adds Insights to the Search destinations. It explains that Account is now your profile picture in the top-right corner on mobile, and adds a "Where did Account go on mobile?" FAQ. It also fixes the old Settings > Help steps.
  • Account-Settings.md: explains how to open Account on web and on mobile, and removes the "In the navigation tabs" wording from its steps.
  • Getting-Started-with-the-Spend-Page.md: adds a "Where did the Insights on the Spend page go?" FAQ.
  • Expensify-Home-Overview.md: View now opens the Insights page, and the section is visible to anyone on a paid workspace.
  • Accounting-Search-Shortcuts.md: fixes a link to an Insights anchor that this PR removes.

Checked against the current App code on main

  • Ranking charts show the top 5 results, not 10. This follows [No QA][Insights] Switch the graphs/tables to top 5 instead of top 10.
  • Filter labels are Date, Workspace, and Group currency. The chart menu item is View on Spend. Workspace only shows for members of more than one workspace.
  • Account only moves on narrow (mobile) layouts. On desktop it stays in the left navigation tabs, so the docs keep the desktop steps.
  • Release 2 adds Compare, so it isn't documented here.

Not in this PR

  • About 36 other articles still tell mobile users to select Account in the bottom navigation tabs. For example: "In the navigation tabs (on the left on web, on the bottom on mobile), select Account > Wallet." Those steps need one agreed sentence for the new mobile location. That's better done as a separate find-and-replace PR, so this one stays reviewable and doesn't conflict with other doc PRs while it waits for the beta.
  • Docs updates for E/A#102524 Insights reports now show top 5 results also edits the three Top chart articles. Merge whichever PR is second after resolving conflicts in those files.

Fixed Issues

https://github.com/Expensify/Expensify/issues/687965
PROPOSAL:

PR checklist so the test stops failing

Explanation of Change

Fixed Issues

$
PROPOSAL:

Tests

  • Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

Same as tests.

  • Verify that no errors appear in the JS console

PR Author Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for the expected offline behavior in the Offline steps section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
    • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android: Native
    • Android: mWeb Chrome
    • iOS: Native
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
  • 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)
    • 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 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
      • If any non-english text was added/modified, I used JaimeGPT to get English > Spanish translation. I then posted it in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
  • I verified that if a function's arguments changed that all usages have also been updated correctly
  • If any new file was added I verified that:
    • 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 function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
  • If new assets were added or existing ones were modified, I verified that:
    • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
    • The assets load correctly across all supported platforms.
  • 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.
  • If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
  • If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
    • I verified that all the inputs inside a form are aligned with each other.
    • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
  • If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

@MelvinBot
MelvinBot requested a review from a team October 2, 2026 03:47
@github-actions github-actions Bot changed the title Update help docs for Release 1: Stand up a baseline Insights page [No QA] Update help docs for Release 1: Stand up a baseline Insights page Oct 2, 2026
@OSBotify

This comment has been minimized.

@stephanieelliott

Copy link
Copy Markdown
Contributor

@MelvinBot can you please make changes based on the following feedback:

  1. Account does not live in the navigation tabs. Navigation instructions should instead say "Select Account".
  • Correct: Select Account
  • Incorrect" In the navigation tabs (on the left on web, on the bottom on mobile), select Account.
  1. compare all articles updated in this PR against the new help site authoring rules in [No QA] Update HelpDot naming, navigation, and capitalization conventions #103116, and apply any relevant changes. EXCEPTION: "Account" navigation instructions should follow the rule above and use "Select Account"
  2. Do not refer to the old UI EXCEPT when answering the questions "where did Account go" or "Where did the insights on the Spend page go?".

@MelvinBot

Copy link
Copy Markdown
Contributor Author

⚠️ A setup step failed before I could start. This is usually a temporary issue — try again in a few minutes, and if it persists post in #melvinbot-ai.

Run details

@stephanieelliott

Copy link
Copy Markdown
Contributor

@MelvinBot can you please make changes based on the following feedback:

  1. Account does not live in the navigation tabs. Navigation instructions should instead say "Select Account".
    • Correct: Select Account
    • Incorrect: In the navigation tabs (on the left on web, on the bottom on mobile), select Account.
  2. Compare all articles updated in this PR against the new help site authoring rules in [No QA] Update HelpDot naming, navigation, and capitalization conventions #103116, and apply any relevant changes.
    • EXCEPTION: "Account" navigation instructions should follow the rule above and use "Select Account"
  3. Do not refer to the old UI EXCEPT when answering the questions "where did Account go" or "Where did the insights on the Spend page go?".

@MelvinBot

Copy link
Copy Markdown
Contributor Author

⚠️ A setup step failed before I could start. This is usually a temporary issue — try again in a few minutes, and if it persists post in #melvinbot-ai.

Run details

@stephanieelliott stephanieelliott added the HelpDot Apply this label if the issue relates to ExpensifyHelp label Oct 7, 2026
@stephanieelliott stephanieelliott changed the title [No QA] Update help docs for Release 1: Stand up a baseline Insights page [No QA] [Hold on feature] Update help docs for Release 1: Stand up a baseline Insights page Oct 7, 2026
@stephanieelliott

Copy link
Copy Markdown
Contributor

@MelvinBot can you please make changes based on the following feedback:

  1. Account does not live in the navigation tabs. Navigation instructions should instead say "Select Account".
    • Correct: Select Account
    • Incorrect: In the navigation tabs (on the left on web, on the bottom on mobile), select Account.
  2. Compare all articles updated in this PR against the new help site authoring rules in [No QA] Update HelpDot naming, navigation, and capitalization conventions #103116, and apply any relevant changes.
    • EXCEPTION: "Account" navigation instructions should follow the rule above and use "Select Account"
  3. Do not refer to the old UI EXCEPT when answering the questions "where did Account go" or "Where did the insights on the Spend page go?".

@stephanieelliott stephanieelliott changed the title [No QA] [Hold on feature] Update help docs for Release 1: Stand up a baseline Insights page [No QA] [Hold E/A #100658] Update help docs for Release 1: Stand up a baseline Insights page Oct 13, 2026
@MelvinBot

Copy link
Copy Markdown
Contributor Author

I applied your feedback to all 11 articles in c94a8c6.

  1. Account steps now say "Select Account". I also took Account out of the navigation tabs list.
  2. The rules from the merged authoring PR are applied. That covers select instead of click or tap, More (⋮), the Search icon, lowercase roles, enable and disable for toggles, the selection bar, search fields, title-case titles, and bolded navigation paths.
  3. The old UI is gone except in the two allowed FAQs. I removed the "Why Insights moved out of Spend" section from Learn About Insights. I also renamed the Account FAQ to "Where did Account go?"

I also fixed a Home overview FAQ that still limited the chart to admins, auditors, and approvers. The section above it says anyone on a paid workspace, which matches InsightsSection/index.tsx:19-21.

⚠️ Please confirm one thing. On web, the code still shows Account in the left navigation tabs. See NavigationTabBar/index.tsx:136-140. It only moves to the profile picture on mobile. I followed your rule anyway. The Navigating New Expensify article still says that on mobile, Account is your profile picture.

Not changed

I didn't restructure Getting Started with the Spend Page. It already had several # headings and ### headings before this PR. I only applied the naming fixes there.

I didn't run the spell check because this environment blocked it.

@OSBotify

This comment has been minimized.

@OSBotify

This comment has been minimized.

@OSBotify

This comment has been minimized.

@MelvinBot

Copy link
Copy Markdown
Contributor Author

Fixed the failing spellcheck check in cd7715b1.

The image alt text in How-to-Use-Insights-in-Expensify.md had a typo, ![ nsights page…. I changed it to ![Insights page…. I also added a blank line between the image and the --- below it. Without that line, kramdown renders the image line as a heading.

Check independent approval also fails. That check needs a reviewer, not a code change.

Heads up: the image points to /assets/images/insights_charts.png, which isn't in this branch yet. Upload it before merging, or the image will appear broken.


view run

@OSBotify

This comment has been minimized.

@OSBotify

This comment has been minimized.

@OSBotify

This comment has been minimized.

@stephanieelliott

Copy link
Copy Markdown
Contributor

Hey @JmillsExpensify this is ready for you! This PR is mainly to align the Insights hub with the new LHN item, correct any references to Insights on the Spend page, and catch the biggest updates needed for the nav change.

I plan to raise a separate PR to go through and update all the mobile references to Account.

@JmillsExpensify JmillsExpensify left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall looks good, though I noticed that on https://93ae12ed.helpdot.pages.dev/articles/new-expensify/getting-started/Expensify-Home-Overview the screenshot is still outdated. Are we going to update that after setting these updates live?

@stephanieelliott

Copy link
Copy Markdown
Contributor

@MelvinBot Review the files changed in this PR and list every image referenced in them.

Images are added with Markdown syntax like this:
![alt text]({{site.url}}/assets/images/image-name.png){:width="100%"}

For each image, please include:

  • File name (the article/Markdown file where the image appears)
  • Image name (e.g.image-name.png)
  • Alt text

Only include images in files changed in this PR. Group results by article, and output them as a Markdown table. If an article has no images, omit it.

@MelvinBot

Copy link
Copy Markdown
Contributor Author

I found 10 images across 8 changed articles. One image, home2.png, has no alt text.

docs/Hidden/View-the-Violations-by-submitter-report.md

File name Image name Alt text
View-the-Violations-by-submitter-report.md violations_by_submitter.png Violations by submitter report showing expanded row

docs/articles/new-expensify/getting-started/Expensify-Home-Overview.md

File name Image name Alt text
Expensify-Home-Overview.md home.png Home on New Expensify
Expensify-Home-Overview.md home2.png (none) ⚠️

docs/articles/new-expensify/insights/Explore-the-Spend-Over-Time-Insight.md

File name Image name Alt text
Explore-the-Spend-Over-Time-Insight.md insights-spend-over-time.png Spend over time insight showing monthly spending trends

docs/articles/new-expensify/insights/Explore-the-Top-Categories-Insight.md

File name Image name Alt text
Explore-the-Top-Categories-Insight.md insights-top-categories.png Insights with Top categories highlighted

docs/articles/new-expensify/insights/Explore-the-Top-Merchants-Insight.md

File name Image name Alt text
Explore-the-Top-Merchants-Insight.md insights-top-merchant.png Insights with Top merchants highlighted

docs/articles/new-expensify/insights/Explore-the-Top-Spenders-Insight.md

File name Image name Alt text
Explore-the-Top-Spenders-Insight.md insights-top-spender.png Insights with Top spenders highlighted

docs/articles/new-expensify/insights/How-to-Use-Insights.md

File name Image name Alt text
How-to-Use-Insights.md insights-filters.png Insights page with Date, Workspace, and Group currency filters highlighted
How-to-Use-Insights.md insight-view-on-spend.png Insight with View on Spend highlighted

docs/articles/new-expensify/insights/Learn-About-Insights.md

File name Image name Alt text
Learn-About-Insights.md insights-page.png Insights page showing the Spend over time, Top spenders and Top merchant visualizations together.
Scope notes
  • I checked each article as it exists at the PR head commit (e620f54).
  • These changed articles have no images, so I left them out: Navigating-New-Expensify.md, Accounting-Search-Shortcuts.md, Getting-Started-with-the-Spend-Page.md, and Account-Settings.md.
  • These articles no longer exist at the PR head because the PR removes or renames them: How-to-Use-Insights-in-Expensify.md, View-the-Top-Categories-report.md, View-the-Top-Merchants-report.md, and View-the-Top-Spenders-report.md.

view run

@stephanieelliott

Copy link
Copy Markdown
Contributor

Updated! Confirmed just the 2 image files on Expensify-Home-Overview.md were outdated, I've added updated images in this PR.

@OSBotify

This comment has been minimized.

@OSBotify

This comment has been minimized.

@stephanieelliott stephanieelliott changed the title [No QA] [Hold E/A #100658] Update help docs for Release 1: Stand up a baseline Insights page [No QA] Update help docs for Release 1: Stand up a baseline Insights page Oct 21, 2026
@OSBotify

This comment has been minimized.

@stephanieelliott

stephanieelliott commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Reviewer Checklist

  • I have verified the author checklist is complete (all boxes are checked off).
  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the steps for local testing are in the Tests section
    • I verified the steps for Staging and/or Production testing are in the QA steps section
    • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I checked that screenshots or videos are included for tests on all platforms
  • I included screenshots or videos for tests on all platforms
  • I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
  • I verified tests pass on all platforms & I tested again on:
    • Android: HybridApp
    • Android: mWeb Chrome
    • iOS: HybridApp
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
    • MacOS: Desktop
  • 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 there are no new alerts related to the canBeMissing param for useOnyx
  • I verified proper code patterns were followed (see 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 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
    • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
    • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
  • If any new file was added I verified that:
    • 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 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.
  • If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
  • If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
    • I verified that all the inputs inside a form are aligned with each other.
    • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
  • If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
  • For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
  • If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
  • I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp
Android: mWeb Chrome
iOS: HybridApp
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop

@OSBotify

This comment has been minimized.

@OSBotify

This comment has been minimized.

@OSBotify

This comment has been minimized.

@JmillsExpensify JmillsExpensify left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updates LGTM

@stephanieelliott
stephanieelliott merged commit 6333d13 into main Oct 21, 2026
17 of 19 checks passed
@stephanieelliott
stephanieelliott deleted the claude-insightsRelease1HelpDocs branch October 21, 2026 22:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

HelpDot Apply this label if the issue relates to ExpensifyHelp

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants