[Code] fix setup page (#32179)

Author: spacedragon

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

@@ -15,8 +15,10 @@ import {
 } from '@elastic/eui';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { RootState } from '../../reducers';
 
 const Root = styled.div`
   padding: ${theme.euiSizeXxl} 0;
@@ -93,20 +95,20 @@ const steps = [
   },
 ];
 
-export const SetupGuide = (props: { setupFailed?: boolean }) => {
+const SetupGuidePage = (props: { setupOk?: boolean }) => {
   let setup = null;
-  if (props.setupFailed !== undefined) {
+  if (props.setupOk !== undefined) {
     setup = (
       <React.Fragment>
-        {props.setupFailed && (
+        {props.setupOk === false && (
           <EuiCallOut title="Code instance not found." color="danger" iconType="cross">
             <p>
               Please follow the guide below to configure your Kibana instance and then refresh this
               page.
             </p>
           </EuiCallOut>
         )}
-        {props.setupFailed === false && (
+        {props.setupOk === true && (
           <EuiButton iconType="sortLeft">
             <Link to="/admin">Back To Project Dashboard</Link>
           </EuiButton>
@@ -124,3 +126,8 @@ export const SetupGuide = (props: { setupFailed?: boolean }) => {
 
   return <Root>{setup}</Root>;
 };
+const mapStateToProps = (state: RootState) => ({
+  setupOk: state.setup.ok,
+});
+
+export const SetupGuide = connect(mapStateToProps)(SetupGuidePage);

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

@@ -20,7 +20,7 @@ import { Search } from './search_page/search';
 
 const Empty = () => null;
 
-const RooComponent = (props: { setupOk: boolean }) => {
+const RooComponent = (props: { setupOk?: boolean }) => {
   if (props.setupOk) {
     return <Redirect to={'/admin'} />;
   }
@@ -44,7 +44,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 setupFailed={false} />} exact={true} />
+        <Route path={ROUTES.SETUP} component={SetupGuide} exact={true} />
         <Route path="*" component={NotFound} />
       </Switch>
     </Router>

x-pack/plugins/code/public/components/routes.ts

@@ -7,6 +7,7 @@
 import { PathTypes } from '../common/types';
 
 export const ROOT = '/';
+export const SETUP = '/setup-guide';
 const pathTypes = `:pathType(${PathTypes.blob}|${PathTypes.tree}|${PathTypes.blame}|${
   PathTypes.commits
 })`;

x-pack/plugins/code/public/reducers/setup.ts

@@ -10,12 +10,10 @@ import { handleActions } from 'redux-actions';
 import { checkSetupFailed, checkSetupSuccess } from '../actions';
 
 export interface SetupState {
-  ok: boolean;
+  ok?: boolean;
 }
 
-const initialState: SetupState = {
-  ok: false,
-};
+const initialState: SetupState = {};
 
 export const setup = handleActions(
   {

x-pack/plugins/code/public/sagas/patterns.ts

@@ -11,6 +11,7 @@ import * as ROUTES from '../components/routes';
 export const generatePattern = (path: string) => (action: Action<Match>) =>
   action.type === String(routeChange) && action.payload!.path === path;
 export const rootRoutePattern = generatePattern(ROUTES.ROOT);
+export const setupRoutePattern = generatePattern(ROUTES.SETUP);
 export const adminRoutePattern = generatePattern(ROUTES.ADMIN);
 export const repoRoutePattern = generatePattern(ROUTES.REPO);
 export const mainRoutePattern = (action: Action<Match>) =>

x-pack/plugins/code/public/sagas/setup.ts

@@ -7,7 +7,7 @@
 import { call, put, takeEvery } from 'redux-saga/effects';
 import { kfetch } from 'ui/kfetch';
 import { checkSetupFailed, checkSetupSuccess } from '../actions';
-import { rootRoutePattern } from './patterns';
+import { rootRoutePattern, setupRoutePattern } from './patterns';
 
 function* handleRootRoute() {
   try {
@@ -24,4 +24,5 @@ function requestSetup() {
 
 export function* watchRootRoute() {
   yield takeEvery(rootRoutePattern, handleRootRoute);
+  yield takeEvery(setupRoutePattern, handleRootRoute);
 }