From a26e54860bac9a17ae9eb68612355b71896577a7 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Fri, 16 Aug 2019 14:13:56 +0100 Subject: Smoothing out the UI intro --- synapse_topology/webui/src/js/components/BaseIntro.jsx | 17 ++++++++++++----- synapse_topology/webui/src/js/components/UI.jsx | 17 ++++++++++------- synapse_topology/webui/src/js/containers/BaseIntro.js | 5 +++-- .../webui/src/js/containers/ContentWrapper.js | 1 - synapse_topology/webui/src/js/reducers/index.js | 3 +-- synapse_topology/webui/src/js/reducers/ui-constants.js | 2 -- 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 }) => - + const prompt = servername ? "Configuring " + servername : "Let's configure your Synapse server." + + return
@@ -14,7 +16,12 @@ export default ({ onClick }) =>

Setting up Synapse

-

Let's configure your Synapse server.

- +

{prompt}

+ { + !started ? + + : undefined + }
+} 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 case ERROR_UI: return - case SETUP_INTRO_UI: - return case SERVER_NAME_UI: return case STATS_REPORT_UI: @@ -92,10 +90,15 @@ export default ({ setupUI, configUI, baseConfig }) => { if (!baseConfig.setupDone) { - console.log(setupUI); - return + const accordion = setupUI.activeBlocks.length ? {SETUP_ORDER.map(blockMapping)} - + : undefined + + + return + + {accordion} + } 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, -- cgit 1.5.1