From a5fa7653fa8614a64a8d241f2b55848f77b050fb Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriks@matrix.org>
Date: Tue, 13 Aug 2019 11:10:32 +0100
Subject: [PATCH] Cardify Database

---
 .../view/webui/js/components/Database.jsx     | 34 +++++++++++--------
 .../view/webui/js/containers/Database.js      |  3 +-
 .../webui/js/reducers/setup-ui-reducer.js     |  4 +--
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/synapse_topology/view/webui/js/components/Database.jsx b/synapse_topology/view/webui/js/components/Database.jsx
index b1a05cf9e8..49ca2f314e 100644
--- a/synapse_topology/view/webui/js/components/Database.jsx
+++ b/synapse_topology/view/webui/js/components/Database.jsx
@@ -1,28 +1,34 @@
 import React, { useState } from 'react';
 
-import ContentWrapper from '../containers/ContentWrapper';
+import Accordion from 'react-bootstrap/Accordion';
+import Card from 'react-bootstrap/Card';
 
 import {
   DATABASE_TYPES
 } from '../actions/constants'
-import ButtonDisplay from './ButtonDisplay';
+
+import { DATABASE_UI } from '../reducers/ui_constants';
 
 export default ({
   onClick,
 }) => {
   const defaultDatabase = DATABASE_TYPES.POSTGRES;
   const [database, setDatabase] = useState(defaultDatabase)
-  return <ContentWrapper>
-    <h1>Database</h1>
-    <p>Synapse can use either SQLite3 or Postgres as it's databse.</p>
-    <p>If you don't have one of those two installed Postgres is the recommended database to use.</p>
+  return <Card>
+    <Accordion.Toggle as={Card.Header} eventKey={DATABASE_UI}>
+      Database
+    </Accordion.Toggle>
+    <Accordion.Collapse eventKey={DATABASE_UI}>
+      <Card.Body>
+        <p>Synapse can use either SQLite3 or Postgres as it's database.</p>
+        <p>Postgres is recommended</p>
 
-    <select defaultValue={defaultDatabase} onChange={event => setDatabase(event.target.value)}>
-      <option value={DATABASE_TYPES.POSTGRES}>PostgreSQL</option>
-      <option value={DATABASE_TYPES.SQLITE3}>SQLite3</option>
-    </select>
-    <ButtonDisplay>
-      <button onClick={() => onClick(database)}>Continue</button>
-    </ButtonDisplay>
-  </ContentWrapper>
+        <select defaultValue={defaultDatabase} onChange={event => setDatabase(event.target.value)}>
+          <option value={DATABASE_TYPES.POSTGRES}>PostgreSQL</option>
+          <option value={DATABASE_TYPES.SQLITE3}>SQLite3</option>
+        </select>
+        <button onClick={() => onClick(database)}>Next</button>
+      </Card.Body>
+    </Accordion.Collapse>
+  </Card>
 }
diff --git a/synapse_topology/view/webui/js/containers/Database.js b/synapse_topology/view/webui/js/containers/Database.js
index a3462bd070..e590831405 100644
--- a/synapse_topology/view/webui/js/containers/Database.js
+++ b/synapse_topology/view/webui/js/containers/Database.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
 import Database from '../components/Database';
-import { set_database, advance_ui, write_config } from '../actions';
+import { set_database, advance_ui } from '../actions';
 
 const mapStateToProps = (state) => {
 }
@@ -11,7 +11,6 @@ const mapDispatchToProps = (dispatch) => ({
   onClick: database => {
     dispatch(set_database(database));
     dispatch(advance_ui());
-    dispatch(write_config())
   }
 });
 
diff --git a/synapse_topology/view/webui/js/reducers/setup-ui-reducer.js b/synapse_topology/view/webui/js/reducers/setup-ui-reducer.js
index d40a79edff..eb44d4e0ee 100644
--- a/synapse_topology/view/webui/js/reducers/setup-ui-reducer.js
+++ b/synapse_topology/view/webui/js/reducers/setup-ui-reducer.js
@@ -57,6 +57,8 @@ const forward_mapping = (current_ui, action, base_config) => {
     case TLS_UI:
       return PORT_SELECTION_UI;
     case PORT_SELECTION_UI:
+      return DATABASE_UI;
+    case DATABASE_UI:
       return base_config.tls == TLS_TYPES.REVERSE_PROXY ?
         REVERSE_PROXY_TEMPLATE_UI :
         base_config.delegation_type != DELEGATION_TYPES.LOCAL ?
@@ -66,8 +68,6 @@ const forward_mapping = (current_ui, action, base_config) => {
       return base_config.delegation_type != DELEGATION_TYPES.LOCAL ?
         DELEGATION_TEMPLATE_UI :
         DATABASE_UI;
-    case DELEGATION_TEMPLATE_UI:
-      return DATABASE_UI;
     default:
       return SETUP_INTRO_UI;
   }