From 62e45eebbf5e4c8b7570577dffd2b88de903bc2e Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Tue, 13 Aug 2019 15:21:02 +0100 Subject: Toggle a bit better. --- .../view/webui/js/components/AccordionToggle.jsx | 8 +++ .../view/webui/js/components/CompleteSetup.jsx | 5 +- .../view/webui/js/components/Database.jsx | 5 +- .../view/webui/js/components/DelegationOptions.jsx | 5 +- .../view/webui/js/components/ExportKeys.jsx | 5 +- .../view/webui/js/components/PortSelection.jsx | 5 +- .../view/webui/js/components/ServerName.jsx | 14 +++-- .../view/webui/js/components/StatsReporter.jsx | 5 +- synapse_topology/view/webui/js/components/TLS.jsx | 5 +- synapse_topology/view/webui/js/components/UI.jsx | 3 +- .../view/webui/js/containers/AccordionToggle.js | 18 +++++++ synapse_topology/view/webui/js/reducers/index.js | 4 +- .../view/webui/js/reducers/setup-ui-reducer.js | 62 +++------------------- .../view/webui/js/reducers/ui_constants.js | 16 +++++- 14 files changed, 85 insertions(+), 75 deletions(-) create mode 100644 synapse_topology/view/webui/js/components/AccordionToggle.jsx create mode 100644 synapse_topology/view/webui/js/containers/AccordionToggle.js 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 {children} +} 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 - + Setup Complete - + {body} 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 - + Database - +

Synapse can use either SQLite3 or Postgres as it's database.

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 - + Delegation (optional) - +

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 - + Secret Key - + {body} 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 - + {servername}'s ports - + 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 - + Name your server - +

@@ -27,7 +35,7 @@ export default ({ onClick }) => {

- +
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 - + Anonymous Statistics - +

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 - + TLS - +

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 - {setup_ui.active_blocks.map(block_mapping)} + {SETUP_ORDER.map(block_mapping)} } } \ 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"; -- cgit 1.5.1