Add minimal contextual help in Mobile

[githubbob42]

Mingle Card: 2717
Narrative

As a Field Engineer, I can click a help icon within Mobile, so that I can access the online FieldFx User Guide.

Analysis

Due to limitations of running the app in different environments (e.g. iOS Web Clip, Windows CEF client, others?), we can't just open a new window/tab to view the User Guide.  We need to open the User Guide as a modal window within the Mobile app.  We should also hide the help icon if we are offline since we can't get to it anyway.

Technical Analysis

We can't use iFrames because of:

I tried using jQuery ajax as well as CORS but got the following error:

Refused to display 'https://fieldfx.cloudforce.com/?ec=302&startURL=%2Fsetup%2Fsecur%2FRemoteAc…G_H5qrQKKFkmbarep7Rj4gvx.VVnSwLv6TE_VoiNu9Zwz2foOJuLoV48PX9NjH.nPqnLk%253D' in a frame because it set 'X-Frame-Options' to 'DENY'.

OR

XMLHttpRequest cannot load https://fieldfxdocs.herokuapp.com/FieldFXUserGuide/Using_FieldFX_Mobile/FieldFX_Mobile_Basics.htm. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://bananapeak.herokuapp.com' is therefore not allowed access.

XMLHttpRequest cannot load http://docs.releasenotes.salesforce.com/en-gb/winter14/release-notes/rn\_186\_forcecom\_cruc\_setup\_pages.htm. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
$.get('https://fieldfxdocs.herokuapp.com/FieldFXUserGuide/Using\_FieldFX\_Mobile/FieldFX\_Mobile\_Basics.htm', {}).then( function(data) { JSON.stringify(data); })

Based on the above issues, I'm thinking that the next steps are to try to setup subdomains for the docs site within the fieldfx site.  We may need to do the same for the sandbox env.  Of course, if it still tries to load the fieldfx.cloudforce.com site, we may be hosed either way.  However, I setup up the docs site to run locally, (fieldfx: localhost: 3000 and fieldfxdocs: localhost:3001) and it appears to work, so maybe it'll work after all.

salesforce and cloudforce headers:

https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options 

Acceptance Criteria

• Put the help icon on the left nav (unless Yusuke says otherwise)
• Hide the help icon if the user is offline
• Open the Guide in a modal window.
• Depending on whether the user in on the Sync screen, the Job details (or Job search or any Job child page), or the Ticket details (or Ticket search or any Ticket child page), open the online FieldFx User Guide for:
  • Mobile Basics (sync screen), 
  • Managing Jobs (any Job page)
  • Managing Tickets (any Ticket page)​
• Add a MixPanel event for every time the user clicks the help icon.

Related Stories

Tasks

{{table query: SELECT Number, Name, Owner, 'Task Status' WHERE Type = Task and Story = THIS CARD}}

Defects

{{table query: SELECT Number, Name, Owner, 'Defect Status' WHERE Type = Defect and 'Related Story' = THIS CARD}}

Test Plan

Verify that the Help button takes you to the right help topic:

• Mobile Basics (sync screen), 
• Managing Jobs (any Job page)
• Managing Tickets (any Ticket page)​

Need to test on

• iPad (both in browser and as Web Clip app),
• Windows CEF client,
• Android (both in browser and installed as app - like a "web clip")

Need to test online/offline:

• $(window).trigger('offline')
• $(window).trigger('online')