Include a done screen

7 files changed, 84 insertions, 2 deletions

diff --git a/synapse_topology/webui/src/js/components/CompleteSetup.jsx b/synapse_topology/webui/src/js/components/CompleteSetup.jsx
index 33512e902b..a3c805b103 100644
--- a/synapse_topology/webui/src/js/components/CompleteSetup.jsx
+++ b/synapse_topology/webui/src/js/components/CompleteSetup.jsx
@@ -2,19 +2,30 @@ import React, { useState } from 'react';
 
 import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
+import useAccordionToggle from 'react-bootstrap/useAccordionToggle';
 
 import ReverseProxySampleConfig from '../containers/ReverseProxySampleConfig'
 import DelegationSampleConfig from '../containers/DelegationSampleConfig';
 import AccordionToggle from '../containers/AccordionToggle';
+import InlineError from '../components/InlineError';
 
 import { TLS_TYPES, DELEGATION_TYPES } from '../actions/constants';
 import { COMPLETE_UI } from '../reducers/ui-constants';
+import { nextUI } from '../reducers/setup-ui-reducer';
 
 export default ({
     tlsType,
     delegationType,
+    synapseStartFailed,
+    configDir,
     onClick,
 }) => {
+    const toggle = useAccordionToggle(nextUI(COMPLETE_UI));
+
+    const decoratedOnClick = () => {
+        toggle();
+        onClick();
+    }
 
     const [revProxyDownloaded, setRevProxyDownloaded] = useState(false);
     const [delegationDownloaded, setDelegationDownloaded] = useState(false);
@@ -35,9 +46,23 @@ export default ({
         >Next</button>
     </Card.Body>
 
+
     const finishedBody = <Card.Body>
-        <p>You done</p>
-        <button onClick={onClick}>Start Synapse</button>
+        <InlineError error={synapseStartFailed ? "Couldn't start synapse." : undefined}>
+            <button onClick={decoratedOnClick}>Start Synapse</button>
+        </InlineError>
+        <hr />
+        <p>
+            In future use <a href="https://manpages.debian.org/testing/matrix-synapse/synctl.1.en.html">
+                synctl</a> to start and stop synapse. Use the following to start synapse again:
+
+        </p>
+
+        <pre>
+            <code>
+                synctl start {configDir}
+            </code>
+        </pre>
     </Card.Body>
 
     const show = [];
diff --git a/synapse_topology/webui/src/js/components/Done.jsx b/synapse_topology/webui/src/js/components/Done.jsx
new file mode 100644
index 0000000000..9a56174719
--- /dev/null
+++ b/synapse_topology/webui/src/js/components/Done.jsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+import Accordion from 'react-bootstrap/Accordion';
+import Card from 'react-bootstrap/Card';
+import AccordionToggle from '../containers/AccordionToggle';
+import { DONE_UI } from '../reducers/ui-constants';
+
+export default ({ configDir }) => {
+
+
+    return <Card>
+        <AccordionToggle as={Card.Header} eventKey={DONE_UI} >
+            Done
+        </AccordionToggle>
+        <Accordion.Collapse eventKey={DONE_UI}>
+            <Card.Body>
+                <p>
+                    Synapse is running!
+                </p>
+                <p>
+                    There are many settings to play with in the yaml files in <code>{configDir}</code>.
+                </p>
+            </Card.Body>
+        </Accordion.Collapse>
+    </Card>;
+
+}
\ No newline at end of file
diff --git a/synapse_topology/webui/src/js/components/UI.jsx b/synapse_topology/webui/src/js/components/UI.jsx
index ea74d68373..2decaf382b 100644
--- a/synapse_topology/webui/src/js/components/UI.jsx
+++ b/synapse_topology/webui/src/js/components/UI.jsx
@@ -19,6 +19,7 @@ import {
     DATABASE_UI,
     COMPLETE_UI,
     SETUP_ORDER,
+    DONE_UI,
 } from '../reducers/ui-constants';
 
 import Error from './Error';
@@ -37,6 +38,7 @@ import Database from '../containers/Database';
 import ConfigSelector from './ConfigSelector';
 import CompleteSetup from '../containers/CompleteSetup';
 import ContentWrapper from '../containers/ContentWrapper';
+import Done from '../containers/Done';
 
 const blockMapping = uiBlock => {
 
@@ -66,6 +68,8 @@ const blockMapping = uiBlock => {
             return <Database key={uiBlock} />
         case COMPLETE_UI:
             return <CompleteSetup key={uiBlock} />
+        case DONE_UI:
+            return <Done key={uiBlock} />
         default:
             return <h1>how did i get here?</h1>
 
diff --git a/synapse_topology/webui/src/js/containers/CompleteSetup.js b/synapse_topology/webui/src/js/containers/CompleteSetup.js
index 483522dd93..aec5ef23d1 100644
--- a/synapse_topology/webui/src/js/containers/CompleteSetup.js
+++ b/synapse_topology/webui/src/js/containers/CompleteSetup.js
@@ -5,7 +5,9 @@ import { writeConfig } from '../actions';
 
 const mapStateToProps = (state) => ({
     tlsType: state.baseConfig.tls,
+    synapseStartFailed: state.baseConfig.synapseStartFailed,
     delegationType: state.baseConfig.delegationType,
+    configDir: state.baseConfig.configDir,
 });
 
 
diff --git a/synapse_topology/webui/src/js/containers/Done.js b/synapse_topology/webui/src/js/containers/Done.js
new file mode 100644
index 0000000000..a4ad62569d
--- /dev/null
+++ b/synapse_topology/webui/src/js/containers/Done.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+
+import Done from '../components/Done';
+
+
+const mapStateToProps = (state, ownProps) => ({
+    configDir: state.baseConfig.configDir,
+});
+
+const mapDispathToProps = (dispatch) => ({
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispathToProps,
+)(Done);
\ No newline at end of file
diff --git a/synapse_topology/webui/src/js/reducers/base-config-reducer.js b/synapse_topology/webui/src/js/reducers/base-config-reducer.js
index 4ed635f25c..6dbd8c1a40 100644
--- a/synapse_topology/webui/src/js/reducers/base-config-reducer.js
+++ b/synapse_topology/webui/src/js/reducers/base-config-reducer.js
@@ -19,6 +19,7 @@ import {
     SET_DATABASE,
     SET_CONFIG_DIR,
     BASE_CONFIG_CHECKED,
+    SYNAPSE_START,
 } from "../actions/types";
 
 export default (state, action) => {
@@ -133,6 +134,11 @@ export default (state, action) => {
                 ...state,
                 configDir: action.configDir,
             }
+        case SYNAPSE_START:
+            return {
+                ...state,
+                synapseStartedFailed: true,
+            }
         default:
             return state;
 
diff --git a/synapse_topology/webui/src/js/reducers/ui-constants.js b/synapse_topology/webui/src/js/reducers/ui-constants.js
index e366f879ff..51ea55a82b 100644
--- a/synapse_topology/webui/src/js/reducers/ui-constants.js
+++ b/synapse_topology/webui/src/js/reducers/ui-constants.js
@@ -9,6 +9,7 @@ export const REVERSE_PROXY_TEMPLATE_UI = "reverse_proxy_tamplate_ui";
 export const DELEGATION_TEMPLATE_UI = "delegation_tamplate_ui";
 export const DATABASE_UI = "database_ui";
 export const COMPLETE_UI = "complete_ui";
+export const DONE_UI = "done_ui";
 
 // Setup order
 export const SETUP_ORDER = [
@@ -20,6 +21,7 @@ export const SETUP_ORDER = [
     PORT_SELECTION_UI,
     DATABASE_UI,
     COMPLETE_UI,
+    DONE_UI,
 ];