[HOLD for payment 2024-07-17][$500] Move "Troubleshoot" out of About and into Settings as its own nav item

[shawnborton]

We want to take the Troubleshoot page:

And move it into the Settings navigation as it's own nav item, right above the Sign Out option at the bottom. When doing this, the Troubleshoot UI should look like the About page, where we use the card style and a nice header with an illustration + h2:

cc @TMisiukiewicz since I think you originally implemented this? This would just be a follow up to that.

cc @muttmuure @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01928d4373947e3fe3
• Upwork Job ID: 1770771675763638272
• Last Price Increase: 2024-03-28
• Automatic offers:
• alitoshmatov | Reviewer | 0
• tienifr | Contributor | 0

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

Triggered auto assignment to @muttmuure (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[allgandalf]

Can this be opened to external contributors as this is a relatively simple feature to implement :)

Proposal

Please re-state the problem that we are trying to solve in this issue.

Move "Troubleshoot" out of About and into Settings as its own nav item

What is the root cause of that problem?

This is the a New Feature

The Troubleshoot is inside About Page i.e. here :

App/src/pages/settings/AboutPage/AboutPage.tsx

Lines 90 to 94 in 71e3aa4

	{
	translationKey: 'initialSettingsPage.aboutPage.troubleshoot',
	icon: Expensicons.Lightbulb,
	action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_TROUBLESHOOT)),
	},

What changes do you think we should make in order to solve the problem?

We need to move it into InitialPage, just above Signout button here :

App/src/pages/settings/InitialSettingsPage.tsx

Lines 250 to 256 in 71e3aa4

	{
	translationKey: signOutTranslationKey,
	icon: Expensicons.Exit,
	action: () => {
	signOut(false);
	},
	},

Also, we need to modify the Troubleshoot completely to look like About Us Page
https://github.com/Expensify/App/blob/860cca67cd3ee3309af766dee54b97a14df19556/src/pages/settings/AboutPage/TroubleshootPage.tsx

What alternative solutions did you explore? (Optional)

N/A

Result :

ADDED TEST BRANCH - https://github.com/godofoutcasts94/App/tree/moving-troubleshoot-page

Need Illustration to be added.

Updated Proposal

Upated Proposal, will add updated screenshot in sometime

[muttmuure]

I think we should actually make this an External issue, since Tomasz is working on a higher value performance project

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01928d4373947e3fe3