Add help page

[tiffon]

Per feedback on this PR, help for the keyboard shortcuts is added via a modal triggered from a ⌘ button.

Edit — Info below this header is outdated

Add help documentation to the UI.

Currently, it has a few links and covers the keyboard shortcuts for the trace timeline.

One of the issues I ran into with this change was loading markdown files. It's not well supported in create-react-app. The recommended approach is to fetch the markdown at runtime and parse it in the browser (which is absurd):

There's no longer a way to directly import Markdown files. In case anyone finds their way here through Google, you could always use fetch() to accomplish this asynchronously:

// return the URL, e.g. /static/media/changelog.1fb9caf0.md
import myMarkdownFile from '../../../changelog.md';

fetch(myMarkdownFile)
 .then(response => response.text())
 .then(text => {
   // logs a string of Markdown content
   console.log(text);
 });

However, outside the scope of condoned approaches is inline webpack loader configuration:

facebook/create-react-app#1944 (comment)

[...]

/* eslint import/no-webpack-loader-syntax: off */
import QuickStart from '!raw-loader!./Sections/QuickStart.md';

Inline webpack loader configuration is considered "not permitted" in create-react-app.

But, it gets the job done and can be changed to some other approach, in the future, if that becomes necessary.

IMO, even with these trade-offs, it is still preferable to use markdown over regular HTML for docs.

Definitely open to feedback on this approach.

[yurishkuro]

how is this help page going to be invoked? I don't think we want to start keeping real documentation in the UI project, that's what readthedocs is for. For the key bindings I was thinking some help button in the Trace View that shows a popup - markdown might be an overkill for that.

[saminzadeh]

However, outside the scope of condoned approaches is inline webpack loader configuration:

I'm a bit impartial of getting into the webpack internals through CRA. I think it might be better to wait and see what they do with static assets like markdown.

Personally, I don't think its too crazy to fetch the help file when requested (think of it as code splitting which reduces the bundle size anyways). Some alternatives would be using a JS file and export markdown directly.

[saminzadeh]

I think this should go in a modal for the Trace page, since its specific to that. A little tooltip can open it up

[tiffon]

I prefer the help button and the page, but a modal sounds fine.

@saminzadeh, @yurishkuro - any suggestions on what invokes the modal?

To answer your question, @yurishkuro, I added a "Help" button to the top menu (which I'll now take out).

[saminzadeh]

I was thinking a little Question mark icon on the view trace page. Something similar to codepen:

[tiffon]

Great. I was thinking something similar, but with the consensus approach being so far removed from my initial approach, seemed prudent to invite input, preemptively.

[coveralls]

Coverage decreased (-0.07%) to 68.948% when pulling 3ad7935 on add-help-page into df12ead on master.

[coveralls]

Coverage decreased (-0.07%) to 68.948% when pulling 3ad7935 on add-help-page into df12ead on master.

[saminzadeh]

Nice, the screenshot looks great