diff --git a/synapse_topology/view/webui/js/components/AccordionToggle.jsx b/synapse_topology/view/webui/js/components/AccordionToggle.jsx
new file mode 100644
index 0000000000..af240ffde8
--- /dev/null
+++ b/synapse_topology/view/webui/js/components/AccordionToggle.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import useAccordionToggle from 'react-bootstrap/useAccordionToggle';
+
+export default ({ active, children, eventKey, as }) => {
+ const decoratedOnClick = active ? useAccordionToggle(eventKey) : undefined;
+ const As = as;
+ return <As onClick={decoratedOnClick} > {children}</As>
+}
diff --git a/synapse_topology/view/webui/js/components/CompleteSetup.jsx b/synapse_topology/view/webui/js/components/CompleteSetup.jsx
index a3a7ecccf6..6dfb172b81 100644
--- a/synapse_topology/view/webui/js/components/CompleteSetup.jsx
+++ b/synapse_topology/view/webui/js/components/CompleteSetup.jsx
@@ -5,6 +5,7 @@ import Card from 'react-bootstrap/Card';
import ReverseProxySampleConfig from '../containers/ReverseProxySampleConfig'
import DelegationSampleConfig from '../containers/DelegationSampleConfig';
+import AccordionToggle from '../containers/AccordionToggle';
import { TLS_TYPES, DELEGATION_TYPES } from '../actions/constants';
import { COMPLETE_UI } from '../reducers/ui_constants';
@@ -52,9 +53,9 @@ export default ({
}
return <Card>
- <Accordion.Toggle as={Card.Header} eventKey={COMPLETE_UI}>
+ <AccordionToggle as={Card.Header} eventKey={COMPLETE_UI}>
Setup Complete
- </Accordion.Toggle>
+ </AccordionToggle>
<Accordion.Collapse eventKey={COMPLETE_UI}>
{body}
</Accordion.Collapse>
diff --git a/synapse_topology/view/webui/js/components/Database.jsx b/synapse_topology/view/webui/js/components/Database.jsx
index 49ca2f314e..8ed3018cae 100644
--- a/synapse_topology/view/webui/js/components/Database.jsx
+++ b/synapse_topology/view/webui/js/components/Database.jsx
@@ -8,6 +8,7 @@ import {
} from '../actions/constants'
import { DATABASE_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
export default ({
onClick,
@@ -15,9 +16,9 @@ export default ({
const defaultDatabase = DATABASE_TYPES.POSTGRES;
const [database, setDatabase] = useState(defaultDatabase)
return <Card>
- <Accordion.Toggle as={Card.Header} eventKey={DATABASE_UI}>
+ <AccordionToggle as={Card.Header} eventKey={DATABASE_UI}>
Database
- </Accordion.Toggle>
+ </AccordionToggle>
<Accordion.Collapse eventKey={DATABASE_UI}>
<Card.Body>
<p>Synapse can use either SQLite3 or Postgres as it's database.</p>
diff --git a/synapse_topology/view/webui/js/components/DelegationOptions.jsx b/synapse_topology/view/webui/js/components/DelegationOptions.jsx
index ee735c32cc..354a414da8 100644
--- a/synapse_topology/view/webui/js/components/DelegationOptions.jsx
+++ b/synapse_topology/view/webui/js/components/DelegationOptions.jsx
@@ -9,6 +9,7 @@ import Tab from 'react-bootstrap/Tab';
import { DELEGATION_TYPES } from '../actions/constants';
import { DELEGATION_OPTIONS_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
export default ({ servername, skip, onClick }) => {
const defaultType = DELEGATION_TYPES.DNS;
@@ -39,12 +40,12 @@ export default ({ servername, skip, onClick }) => {
}
return <Card>
- <Accordion.Toggle as={Card.Header} eventKey={DELEGATION_OPTIONS_UI}>
+ <AccordionToggle as={Card.Header} eventKey={DELEGATION_OPTIONS_UI}>
Delegation (optional)
<button onClick={skip}>
Skip
</button>
- </Accordion.Toggle>
+ </AccordionToggle>
<Accordion.Collapse eventKey={DELEGATION_OPTIONS_UI}>
<Card.Body>
<p>
diff --git a/synapse_topology/view/webui/js/components/ExportKeys.jsx b/synapse_topology/view/webui/js/components/ExportKeys.jsx
index 1186b05fba..96176a15eb 100644
--- a/synapse_topology/view/webui/js/components/ExportKeys.jsx
+++ b/synapse_topology/view/webui/js/components/ExportKeys.jsx
@@ -7,6 +7,7 @@ import ButtonDisplay from './ButtonDisplay';
import DownloadOrCopy from './DownloadOrCopy';
import { KEY_EXPORT_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
export default ({ secret_key_loaded, secret_key, onClick }) => {
@@ -28,9 +29,9 @@ export default ({ secret_key_loaded, secret_key, onClick }) => {
}
return <Card>
- <Accordion.Toggle as={Card.Header} eventKey={KEY_EXPORT_UI}>
+ <AccordionToggle as={Card.Header} eventKey={KEY_EXPORT_UI}>
Secret Key
- </Accordion.Toggle>
+ </AccordionToggle>
<Accordion.Collapse eventKey={KEY_EXPORT_UI}>
{body}
</Accordion.Collapse>
diff --git a/synapse_topology/view/webui/js/components/PortSelection.jsx b/synapse_topology/view/webui/js/components/PortSelection.jsx
index b40f1ccb78..6cfcaa5b35 100644
--- a/synapse_topology/view/webui/js/components/PortSelection.jsx
+++ b/synapse_topology/view/webui/js/components/PortSelection.jsx
@@ -5,6 +5,7 @@ import ContentWrapper from '../containers/ContentWrapper';
import Accordion from 'react-bootstrap/Accordion';
import Card from 'react-bootstrap/Card';
import { PORT_SELECTION_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
export default ({
servername,
@@ -50,9 +51,9 @@ export default ({
}
return <Card>
- <Accordion.Toggle as={Card.Header} eventKey={PORT_SELECTION_UI}>
+ <AccordionToggle as={Card.Header} eventKey={PORT_SELECTION_UI}>
{servername}'s ports
- </Accordion.Toggle>
+ </AccordionToggle>
<Accordion.Collapse eventKey={PORT_SELECTION_UI}>
<Card.Body>
diff --git a/synapse_topology/view/webui/js/components/ServerName.jsx b/synapse_topology/view/webui/js/components/ServerName.jsx
index f3ee11dfe4..29bb52404a 100644
--- a/synapse_topology/view/webui/js/components/ServerName.jsx
+++ b/synapse_topology/view/webui/js/components/ServerName.jsx
@@ -3,6 +3,9 @@ import React, { useState } from 'react';
import Accordion from 'react-bootstrap/Accordion';
import Card from 'react-bootstrap/Card';
import { SERVER_NAME_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
+import useAccordionToggle from 'react-bootstrap/useAccordionToggle';
+import { next_ui } from '../reducers/setup-ui-reducer';
export default ({ onClick }) => {
const [servername, setServerName] = useState("");
@@ -11,10 +14,15 @@ export default ({ onClick }) => {
setServerName(event.target.value);
}
+ const decoratedOnClick = () => {
+ useAccordionToggle(SERVER_NAME_UI);
+ onClick(servername);
+ }
+
return <Card>
- <Accordion.Toggle as={Card.Header} eventKey={SERVER_NAME_UI}>
+ <AccordionToggle as={Card.Header} eventKey={SERVER_NAME_UI} >
Name your server
- </Accordion.Toggle>
+ </AccordionToggle>
<Accordion.Collapse eventKey={SERVER_NAME_UI}>
<Card.Body>
<p>
@@ -27,7 +35,7 @@ export default ({ onClick }) => {
</p>
<input type="text" onChange={onChange} autoFocus placeholder="Enter server name"></input>
<div>
- <button disabled={servername ? undefined : true} onClick={() => onClick(servername)}>Next</button>
+ <button disabled={servername ? undefined : true} onClick={decoratedOnClick}>Next</button>
</div>
</Card.Body>
</Accordion.Collapse>
diff --git a/synapse_topology/view/webui/js/components/StatsReporter.jsx b/synapse_topology/view/webui/js/components/StatsReporter.jsx
index 48bd03ab5a..8db033a1e5 100644
--- a/synapse_topology/view/webui/js/components/StatsReporter.jsx
+++ b/synapse_topology/view/webui/js/components/StatsReporter.jsx
@@ -4,15 +4,16 @@ import Accordion from 'react-bootstrap/Accordion';
import Card from 'react-bootstrap/Card';
import { STATS_REPORT_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
export default ({ onClick }) => {
const [consent, setConsent] = useState(true);
return <Card>
- <Accordion.Toggle as={Card.Header} eventKey={STATS_REPORT_UI}>
+ <AccordionToggle as={Card.Header} eventKey={STATS_REPORT_UI}>
Anonymous Statistics
- </Accordion.Toggle>
+ </AccordionToggle>
<Accordion.Collapse eventKey={STATS_REPORT_UI}>
<Card.Body>
<p>
diff --git a/synapse_topology/view/webui/js/components/TLS.jsx b/synapse_topology/view/webui/js/components/TLS.jsx
index 467bb37bc3..56ca3890e8 100644
--- a/synapse_topology/view/webui/js/components/TLS.jsx
+++ b/synapse_topology/view/webui/js/components/TLS.jsx
@@ -9,6 +9,7 @@ import Tab from 'react-bootstrap/Tab';
import { TLS_UI } from '../reducers/ui_constants';
import { TLS_TYPES, REVERSE_PROXY_TYPES } from '../actions/constants';
+import AccordionToggle from '../containers/AccordionToggle';
const tlsLink = "https://en.wikipedia.org/wiki/Transport_Layer_Security";
const apacheLink = "http://httpd.apache.org/";
@@ -31,9 +32,9 @@ export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPath
const [reverseProxy, setReverseProxy] = useState(defaultValue);
return <Card>
- <Accordion.Toggle as={Card.Header} eventKey={TLS_UI}>
+ <AccordionToggle as={Card.Header} eventKey={TLS_UI}>
TLS
- </Accordion.Toggle>
+ </AccordionToggle>
<Accordion.Collapse eventKey={TLS_UI}>
<Card.Body>
<p>
diff --git a/synapse_topology/view/webui/js/components/UI.jsx b/synapse_topology/view/webui/js/components/UI.jsx
index 1d727726e1..8e42d86c7b 100644
--- a/synapse_topology/view/webui/js/components/UI.jsx
+++ b/synapse_topology/view/webui/js/components/UI.jsx
@@ -19,6 +19,7 @@ import {
DELEGATION_TEMPLATE_UI,
DATABASE_UI,
COMPLETE_UI,
+ SETUP_ORDER,
} from '../reducers/ui_constants';
import Error from './Error';
@@ -85,7 +86,7 @@ export default ({ setup_ui, config_ui, base_config }) => {
if (!base_config.setup_done) {
console.log(setup_ui);
return <Accordion defaultActiveKey="0">
- {setup_ui.active_blocks.map(block_mapping)}
+ {SETUP_ORDER.map(block_mapping)}
</Accordion >
}
}
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/containers/AccordionToggle.js b/synapse_topology/view/webui/js/containers/AccordionToggle.js
new file mode 100644
index 0000000000..95816f2679
--- /dev/null
+++ b/synapse_topology/view/webui/js/containers/AccordionToggle.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+
+import AccordionToggle from '../components/AccordionToggle';
+
+const mapStateToProps = (state, { eventKey, as, children }) => ({
+ active: state.setup_ui.active_blocks.includes(eventKey),
+ eventKey,
+ as,
+ children,
+});
+
+const mapDispathToProps = (dispatch) => ({
+});
+
+export default connect(
+ mapStateToProps,
+ mapDispathToProps
+)(AccordionToggle);
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/reducers/index.js b/synapse_topology/view/webui/js/reducers/index.js
index 39a120e1d2..4c31d3931b 100644
--- a/synapse_topology/view/webui/js/reducers/index.js
+++ b/synapse_topology/view/webui/js/reducers/index.js
@@ -3,12 +3,12 @@ import base_config_reducer from './base-config-reducer';
import config_ui_reducer from './config-ui-reducer';
import setup_ui_reducer from './setup-ui-reducer';
-import { SETUP_INTRO_UI } from './ui_constants';
+import { SETUP_INTRO_UI, SERVER_NAME_UI } from './ui_constants';
export default (state = {
setup_ui: {
- active_blocks: [SETUP_INTRO_UI],
+ active_blocks: [SETUP_INTRO_UI, SERVER_NAME_UI],
},
config_ui: {
},
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 bec1f0d8ca..720f85ebed 100644
--- a/synapse_topology/view/webui/js/reducers/setup-ui-reducer.js
+++ b/synapse_topology/view/webui/js/reducers/setup-ui-reducer.js
@@ -1,22 +1,13 @@
import { ADVANCE_UI, BACK_UI, BASE_CONFIG_CHECKED } from '../actions/types';
-
+import useAccordionToggle from 'react-bootstrap/useAccordionToggle'
import {
- SETUP_INTRO_UI,
- SERVER_NAME_UI,
- STATS_REPORT_UI,
- KEY_EXPORT_UI,
- DELEGATION_OPTIONS_UI,
- TLS_UI,
- PORT_SELECTION_UI,
- REVERSE_PROXY_TEMPLATE_UI,
- DELEGATION_TEMPLATE_UI,
- DATABASE_UI,
- COMPLETE_UI,
+ SETUP_ORDER,
} from './ui_constants';
-import {
- DELEGATION_TYPES, TLS_TYPES
-} from '../actions/constants';
+
+const new_active_blocks = active_blocks => {
+ return SETUP_ORDER.slice(0, active_blocks.length + 1)
+}
export default ({ setup_ui, base_config }, action) => {
if (!base_config.base_config_checked) {
@@ -28,14 +19,7 @@ export default ({ setup_ui, base_config }, action) => {
switch (action.type) {
case ADVANCE_UI:
return {
- active_blocks: [
- ...setup_ui.active_blocks,
- forward_mapping(
- setup_ui.active_blocks[setup_ui.active_blocks.length - 1],
- action,
- base_config,
- ),
- ]
+ active_blocks: new_active_blocks(setup_ui.active_blocks),
}
case BACK_UI:
default:
@@ -43,34 +27,4 @@ export default ({ setup_ui, base_config }, action) => {
}
}
-const forward_mapping = (current_ui, action, base_config) => {
- switch (current_ui) {
- case SETUP_INTRO_UI:
- return SERVER_NAME_UI;
- case SERVER_NAME_UI:
- return STATS_REPORT_UI;
- case STATS_REPORT_UI:
- return KEY_EXPORT_UI;
- case KEY_EXPORT_UI:
- return DELEGATION_OPTIONS_UI;
- case DELEGATION_OPTIONS_UI:
- return TLS_UI;
- case TLS_UI:
- return PORT_SELECTION_UI;
- case PORT_SELECTION_UI:
- return DATABASE_UI;
- case DATABASE_UI:
- return COMPLETE_UI;
- return base_config.tls == TLS_TYPES.REVERSE_PROXY ?
- REVERSE_PROXY_TEMPLATE_UI :
- base_config.delegation_type != DELEGATION_TYPES.LOCAL ?
- DELEGATION_TEMPLATE_UI :
- DATABASE_UI;
- case REVERSE_PROXY_TEMPLATE_UI:
- return base_config.delegation_type != DELEGATION_TYPES.LOCAL ?
- DELEGATION_TEMPLATE_UI :
- DATABASE_UI;
- default:
- return SETUP_INTRO_UI;
- }
-}
+export const next_ui = current => SETUP_ORDER[SETUP_ORDER.lastIndexOf(current) + 1]
\ No newline at end of file
diff --git a/synapse_topology/view/webui/js/reducers/ui_constants.js b/synapse_topology/view/webui/js/reducers/ui_constants.js
index f888fcb7d6..911ff5769e 100644
--- a/synapse_topology/view/webui/js/reducers/ui_constants.js
+++ b/synapse_topology/view/webui/js/reducers/ui_constants.js
@@ -11,6 +11,20 @@ export const DELEGATION_TEMPLATE_UI = "delegation_tamplate_ui";
export const DATABASE_UI = "database_ui";
export const COMPLETE_UI = "complete_ui";
+// Setup order
+export const SETUP_ORDER = [
+ SETUP_INTRO_UI,
+ SERVER_NAME_UI,
+ STATS_REPORT_UI,
+ KEY_EXPORT_UI,
+ DELEGATION_OPTIONS_UI,
+ TLS_UI,
+ PORT_SELECTION_UI,
+ DATABASE_UI,
+ COMPLETE_UI
+];
+
+
// Config
export const CONFIG_SELECTION_UI = "config_selection_ui";
@@ -18,4 +32,4 @@ export const CONFIG_SELECTION_UI = "config_selection_ui";
export const LOADING_UI = "loading_ui";
// Error screen:
-export const ERROR_UI = "error_ui";
\ No newline at end of file
+export const ERROR_UI = "error_ui";
|
