Add network diagnostic tool to Help Box

[jmlee337]

This should make it easier for users and support volunteers to debug some network issues

screenshots: https://imgur.com/a/4iNsmec

In the future, I intend to hook up the port mapping test to a slippi dolphin port mapping option (IE. press a button to turn on slippi dolphin port mapping if port mapping is available)

[NikhilNarayana]

i'm still in the process of testing functionality, but i got what i expected with no changes to my network

i would like the diagnostic option moved into the Help section since this doesn't really feel like an Advanced App Setting

[NikhilNarayana]

let's move the Diagnostic component from Advanced App Settings to Help. put it right underneath <SupportBox> on line 21

[jmlee337]

let's move the Diagnostic component from Advanced App Settings to Help. put it right underneath <SupportBox> on line 21

done: https://imgur.com/a/bqCTVMB

[jmlee337]

looks nice! updated screenshot https://imgur.com/a/aab8SU0

[vinceau]

Thanks for this PR. There are some changes I'd like to see before this gets merged.

[jmlee337]

Thanks for this PR. There are some changes I'd like to see before this gets merged.

done!

[vinceau]

Getting there!

I've noticed a few common things:

1. Prefer returning a <div> over returning react fragments, unless the structure of the DOM is important enough to require you to.
2. Prefer returning null over an empty react fragment <></>.
3. Prefer inline text content <div>text</div> over wrapping in a string literal <div>{"text"}</div>

[jmlee337]

Getting there!

I've noticed a few common things:

1. Prefer returning a <div> over returning react fragments, unless the structure of the DOM is important enough to require you to.
2. Prefer returning null over an empty react fragment <></>.
3. Prefer inline text content <div>text</div> over wrapping in a string literal <div>{"text"}</div>

all comments addressed!

stale