feature(code/frontend): setup guide (#28223)

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

@@ -12,6 +12,8 @@ import { EuiTab, EuiTabs } from '@elastic/eui';
 
 import styled from 'styled-components';
 
+import { parse as parseQuery } from 'querystring';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { Repository } from '../../../model';
 import { RootState } from '../../reducers';
 import { EmptyProject } from './empty_project';
@@ -33,10 +35,10 @@ const Root = styled.div`
 enum AdminTabs {
   projects = 'Projects',
   roles = 'Roles',
-  languageServers = 'Language Servers',
+  languageServers = 'LanguageServers',
 }
 
-interface Props {
+interface Props extends RouteComponentProps {
   repositories: Repository[];
   repositoryLoading: boolean;
   isAdmin: boolean;
@@ -47,10 +49,6 @@ interface State {
 }
 
 class AdminPage extends React.PureComponent<Props, State> {
-  public state = {
-    tab: AdminTabs.projects,
-  };
-
   public tabs = [
     {
       id: AdminTabs.projects,
@@ -64,13 +62,28 @@ class AdminPage extends React.PureComponent<Props, State> {
     },
     {
       id: AdminTabs.languageServers,
-      name: AdminTabs.languageServers,
+      name: 'Language Servers',
       disabled: false,
     },
   ];
+  constructor(props: Props) {
+    super(props);
+    const getTab = () => {
+      const { search } = props.location;
+      let qs = search;
+      if (search.charAt(0) === '?') {
+        qs = search.substr(1);
+      }
+      return parseQuery(qs).tab || AdminTabs.projects;
+    };
+    this.state = {
+      tab: getTab() as AdminTabs,
+    };
+  }
 
   public getAdminTabClickHandler = (tab: AdminTabs) => () => {
     this.setState({ tab });
+    this.props.history.push(`/admin?tab=${tab}`);
   };
 
   public renderTabs() {
@@ -126,4 +139,4 @@ const mapStateToProps = (state: RootState) => ({
   isAdmin: state.userConfig.isAdmin,
 });
 
-export const Admin = connect(mapStateToProps)(AdminPage);
+export const Admin = withRouter(connect(mapStateToProps)(AdminPage));

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

@@ -6,6 +6,7 @@
 
 import { EuiButton, EuiFlexGroup, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { ImportProject } from './import_project';
 
 export const EmptyProject = () => (
@@ -22,7 +23,9 @@ export const EmptyProject = () => (
     <ImportProject />
     <EuiSpacer />
     <EuiFlexGroup justifyContent="center">
-      <EuiButton>View the Setup Guide</EuiButton>
+      <EuiButton>
+        <Link to="/setup-guide">View the Setup Guide</Link>
+      </EuiButton>
     </EuiFlexGroup>
   </div>
 );

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

@@ -0,0 +1,106 @@
+/*
+ * 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 { EuiButton, EuiPanel, EuiSpacer, EuiSteps, EuiText, EuiTitle } from '@elastic/eui';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+const Root = styled.div`
+  padding: 40px 0;
+  margin: 0 auto;
+  &>div {
+    margin-top: 24px;
+    width: 784px;
+  }
+`
+
+const steps = [
+  {
+    title: 'Configure Kibana Code Instance',
+    children: (
+      <EuiText>
+        <p>
+        If you are running a single instance of Kibana, skip this step.
+        </p>
+        <p></p>
+        <p>
+        If you are running multiple instances of Kibana, 
+        you will need to add the following lines of code into your 
+        kibana.yml file for all the instances except the one you want to use as your Code instance:
+        </p>
+        <h5>XPACK.CODE</h5>
+        <pre>
+          <code>
+          redirectToNode: http://localhost:5601/{'{baseUrl}'}
+          </code>
+          <code>
+          enableGlobalReference: false
+          </code>
+      </pre>
+    </EuiText>
+    ),
+  },
+  {
+    title: 'Download and install language servers',
+    children: <EuiText>
+      <p>
+        If you need code intelligence support for your repos, 
+        you need to install the language server for the programming languages.
+      </p>
+      <p></p>
+      <h5>PRE-INSTALLED LANGUAGE SERVERS:</h5>
+      <p></p>
+      Typescript
+      <p></p>
+      <h5>AVAILABLE LANGUAGE SERVERS:</h5>
+      <p></p>
+      Java
+      <p></p>
+      <Link to="/admin?tab=LanguageServers">Manage language server installation</Link>
+      </EuiText>,
+  },
+  {
+    title: 'Import a repository from a git address',
+    children: (
+      <EuiText>
+        <p>
+          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&nbsp;
+          <Link to="">here</Link>.
+        </p>
+      </EuiText>
+    ),
+  },
+  {
+    title: 'Verify that your repo has been successfully imported',
+    children: (
+      <EuiText>
+        <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>.
+        </p>
+      </EuiText>
+    ),
+  },
+];
+
+export const SetupGuide = () => {
+  return (
+    <Root>
+      <EuiButton iconType="sortLeft"><Link to="/admin">Back To Project Dashboard</Link></EuiButton>
+      <EuiPanel>
+        <EuiTitle>
+          <h3>Getting started in Elastic Code</h3>
+        </EuiTitle>
+        <EuiSpacer />
+        <EuiSteps steps={steps}/>
+      </EuiPanel>
+    </Root>
+  );
+};

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

@@ -8,6 +8,7 @@ import React from 'react';
 import { HashRouter as Router, Redirect, Switch } from 'react-router-dom';
 
 import { Admin } from './admin_page/admin';
+import { SetupGuide } from './admin_page/setup_guide';
 import { Diff } from './diff_page/diff';
 import { Main } from './main/main';
 import { NotFound } from './main/not_found';
@@ -29,6 +30,7 @@ export const App = () => {
         <Route path={ROUTES.ADMIN} component={Admin} />
         <Route path={ROUTES.SEARCH} component={Search} />
         <Route path={ROUTES.REPO} render={Empty} exact={true} />
+        <Route path="/setup-guide" render={SetupGuide} exact={true} />
         <Route path="*" component={NotFound} />
       </Switch>
     </Router>