[Code]: add setup guide link in help menu and pre-define document links

x-pack/plugins/code/public/app.tsx

@@ -13,6 +13,7 @@ import chrome from 'ui/chrome';
 // @ts-ignore
 import { uiModules } from 'ui/modules';
 import { App } from './components/app';
+import { HelpMenu } from './components/help_menu';
 import { store } from './stores';
 
 const app = uiModules.get('apps/code');
@@ -50,3 +51,10 @@ chrome.breadcrumbs.set([
     href: '#/',
   },
 ]);
+
+chrome.helpExtension.set(domNode => {
+  render(<HelpMenu />, domNode);
+  return () => {
+    unmountComponentAtNode(domNode);
+  };
+});

x-pack/plugins/code/public/components/admin_page/setup_guide.tsx

@@ -19,6 +19,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { documentationLinks } from '../../lib/documentation_links';
 import { RootState } from '../../reducers';
 
 const Root = styled.div`
@@ -76,7 +77,7 @@ const steps = [
           You can add a repo to Code by simply putting in the git address of the repo. Usually this
           is the same git address you use to run the git clone command, you can find more details
           about the formats of git addresses that Code accepts 
-          <Link to="">here</Link>.
+          <a href={documentationLinks.gitFormat}>here</a>.
         </p>
       </EuiText>
     ),
@@ -88,7 +89,8 @@ const steps = [
         <p>
           Once the repo is added and indexed successfully, you can verify that the repo is
           searchable and the code intelligence is available. You can find more details of how the
-          search and code intelligence work in <Link to="">our docs</Link>.
+          search and code intelligence work in{' '}
+          <a href={documentationLinks.codeIntelligence}>our docs</a>.
         </p>
       </EuiText>
     ),
@@ -102,7 +104,9 @@ const toastMessage = (
       We’ve made some changes to roles and permissions in Kibana. Read more about what these changes
       mean for you below.{' '}
     </p>
-    <EuiButton size="s" href="">Learn More</EuiButton>
+    <EuiButton size="s" href="">
+      Learn More
+    </EuiButton>
   </div>
 );
 

x-pack/plugins/code/public/components/help_menu/help_menu.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import chrome from 'ui/chrome';
+import { EuiButton, EuiHorizontalRule, EuiText, EuiSpacer, EuiPortal } from '@elastic/eui';
+import { documentationLinks } from '../../lib/documentation_links';
+
+export class HelpMenu extends React.PureComponent {
+  state = { isFlyoutVisible: false };
+
+  showFlyout = () => {
+    this.setState({ isFlyoutVisible: true });
+  };
+
+  hideFlyout = () => {
+    this.setState({ isFlyoutVisible: false });
+  };
+
+  public render() {
+    return (
+      <React.Fragment>
+        <EuiHorizontalRule margin="none" />
+        <EuiSpacer />
+        <EuiText size="s">
+          <p>For Code specific information</p>
+        </EuiText>
+        <EuiSpacer />
+        <EuiButton fill iconType="popout" href={chrome.addBasePath('/app/code#/setup-guide')}>
+          Setup Guide
+        </EuiButton>
+        <EuiSpacer />
+        <EuiButton fill iconType="popout" href={documentationLinks.code} target="_blank">
+          Code documentation
+        </EuiButton>
+
+        {
+          // TODO: add shortcut information
+          /*
+          <EuiSpacer />
+          <EuiButton onClick={this.showFlyout} target="_blank">
+            Keyboard shortcuts
+          </EuiButton>
+          {this.state.isFlyoutVisible && (
+          <EuiPortal>
+            <ShortcutsProvider onClose={this.hideFlyout} />
+          </EuiPortal>
+        )} */
+        }
+      </React.Fragment>
+    );
+  }
+}

x-pack/plugins/code/public/components/help_menu/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { HelpMenu } from './help_menu';

x-pack/plugins/code/public/lib/documentation_links.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
+
+// TODO make sure document links are right
+export const documentationLinks = {
+  code: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/code.html`,
+  codeIntelligence: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/code.html`,
+  gitFormat: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/code.html`,
+};