Smoothing out the UI intro

6 files changed, 26 insertions, 19 deletions

diff --git a/synapse_topology/webui/src/js/components/BaseIntro.jsx b/synapse_topology/webui/src/js/components/BaseIntro.jsx
index 395acbd85a..f11f078f64 100644
--- a/synapse_topology/webui/src/js/components/BaseIntro.jsx
+++ b/synapse_topology/webui/src/js/components/BaseIntro.jsx
@@ -1,12 +1,14 @@
+/* eslint-disable max-len */
 import React from 'react';
 
 import ContentWrapper from '../containers/ContentWrapper';
 import ButtonDisplay from './ButtonDisplay';
 
-import style from '../../scss/main.scss';
+export default ({ started, servername, onClick }) => {
 
-export default ({ onClick }) =>
-    <ContentWrapper>
+    const prompt = servername ? "Configuring " + servername : "Let's configure your Synapse server."
+
+    return <ContentWrapper>
         <div className='baseintro'>
             <svg width="113" height="48" xmlns="http://www.w3.org/2000/svg">
                 <g fill="#2D2D2D" fillRule="nonzero">
@@ -14,7 +16,12 @@ export default ({ onClick }) =>
                 </g>
             </svg>
             <h1>Setting up Synapse</h1>
-            <p>Let&apos;s configure your Synapse server.</p>
-            <ButtonDisplay><button onClick={onClick}>Get Started</button></ButtonDisplay>
+            <p>{prompt}</p>
+            {
+                !started ?
+                    <ButtonDisplay><button onClick={onClick}>Get Started</button></ButtonDisplay>
+                    : undefined
+            }
         </div>
     </ContentWrapper>
+}
diff --git a/synapse_topology/webui/src/js/components/UI.jsx b/synapse_topology/webui/src/js/components/UI.jsx
index 86bdda4f6b..f04a8aded4 100644
--- a/synapse_topology/webui/src/js/components/UI.jsx
+++ b/synapse_topology/webui/src/js/components/UI.jsx
@@ -6,7 +6,6 @@ import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
 
 import {
-    SETUP_INTRO_UI,
     SERVER_NAME_UI,
     STATS_REPORT_UI,
     KEY_EXPORT_UI,
@@ -25,7 +24,7 @@ import {
 import Error from './Error';
 import Loading from './Loading';
 
-import IntroUi from '../containers/BaseIntro';
+import BaseIntro from '../containers/BaseIntro';
 import ServerName from '../containers/ServerName';
 import StatsReporter from '../containers/StatsReporter';
 import ExportKeys from '../containers/ExportKeys';
@@ -37,6 +36,7 @@ import DelegationSampleConfig from '../containers/DelegationSampleConfig';
 import Database from '../containers/Database';
 import ConfigSelector from './ConfigSelector';
 import CompleteSetup from '../containers/CompleteSetup';
+import ContentWrapper from '../containers/ContentWrapper';
 
 const blockMapping = uiBlock => {
 
@@ -46,8 +46,6 @@ const blockMapping = uiBlock => {
             return <Loading key={uiBlock} />
         case ERROR_UI:
             return <Error key={uiBlock} />
-        case SETUP_INTRO_UI:
-            return <IntroUi key={uiBlock} />
         case SERVER_NAME_UI:
             return <ServerName key={uiBlock} />
         case STATS_REPORT_UI:
@@ -92,10 +90,15 @@ export default ({ setupUI, configUI, baseConfig }) => {
 
     if (!baseConfig.setupDone) {
 
-        console.log(setupUI);
-        return <Accordion defaultActiveKey="0">
+        const accordion = setupUI.activeBlocks.length ? <Accordion defaultActiveKey="0">
             {SETUP_ORDER.map(blockMapping)}
-        </Accordion >
+        </Accordion > : undefined
+
+
+        return <ContentWrapper>
+            <BaseIntro />
+            {accordion}
+        </ContentWrapper>
 
     }
 
diff --git a/synapse_topology/webui/src/js/containers/BaseIntro.js b/synapse_topology/webui/src/js/containers/BaseIntro.js
index 6d0a9b437f..d1cdab0bda 100644
--- a/synapse_topology/webui/src/js/containers/BaseIntro.js
+++ b/synapse_topology/webui/src/js/containers/BaseIntro.js
@@ -5,7 +5,8 @@ import BaseIntro from '../components/BaseIntro';
 import { advanceUI } from '../actions';
 
 const mapStateToProps = (state, ownProps) => ({
-
+    started: Boolean(state.setupUI.activeBlocks.length),
+    servername: state.baseConfig.servername,
 });
 
 const mapDispathToProps = (dispatch) => ({
@@ -13,6 +14,6 @@ const mapDispathToProps = (dispatch) => ({
 });
 
 export default connect(
-    null,
+    mapStateToProps,
     mapDispathToProps,
 )(BaseIntro);
\ No newline at end of file
diff --git a/synapse_topology/webui/src/js/containers/ContentWrapper.js b/synapse_topology/webui/src/js/containers/ContentWrapper.js
index dc1b0a3f28..91ba4f9778 100644
--- a/synapse_topology/webui/src/js/containers/ContentWrapper.js
+++ b/synapse_topology/webui/src/js/containers/ContentWrapper.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import ContentWrapper from '../components/ContentWrapper';
 
 const mapStateToProps = (state, { children }) => ({
-    servername: state.baseConfig.servername,
     children,
 });
 
diff --git a/synapse_topology/webui/src/js/reducers/index.js b/synapse_topology/webui/src/js/reducers/index.js
index 4009b2154d..30f91031ee 100644
--- a/synapse_topology/webui/src/js/reducers/index.js
+++ b/synapse_topology/webui/src/js/reducers/index.js
@@ -3,14 +3,13 @@ import baseConfigReducer from './base-config-reducer';
 import configUIReducer from './config-ui-reducer';
 import setupUIReducer from './setup-ui-reducer';
 
-import { SETUP_INTRO_UI, SERVER_NAME_UI } from './ui-constants';
 
 import { uiStateMapping } from './state';
 import { BACK_UI } from '../actions/types';
 
 export default (state = {
     setupUI: {
-        activeBlocks: [SETUP_INTRO_UI, SERVER_NAME_UI],
+        activeBlocks: [],
     },
     configUI: {
     },
diff --git a/synapse_topology/webui/src/js/reducers/ui-constants.js b/synapse_topology/webui/src/js/reducers/ui-constants.js
index 8675654f3a..e366f879ff 100644
--- a/synapse_topology/webui/src/js/reducers/ui-constants.js
+++ b/synapse_topology/webui/src/js/reducers/ui-constants.js
@@ -1,5 +1,4 @@
 // Setup
-export const SETUP_INTRO_UI = "setup_intro_ui";
 export const SERVER_NAME_UI = "server_name_ui";
 export const STATS_REPORT_UI = "stats_report_ui";
 export const KEY_EXPORT_UI = "key_export_ui";
@@ -13,7 +12,6 @@ export const COMPLETE_UI = "complete_ui";
 
 // Setup order
 export const SETUP_ORDER = [
-    SETUP_INTRO_UI,
     SERVER_NAME_UI,
     STATS_REPORT_UI,
     KEY_EXPORT_UI,