Skip to content

Commit

Permalink
Add back buttons to dashboard and map widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
offtherailz committed Apr 6, 2018
1 parent 7bdff39 commit 321e16c
Show file tree
Hide file tree
Showing 28 changed files with 291 additions and 48 deletions.
8 changes: 7 additions & 1 deletion web/client/components/widgets/builder/wizard/ChartWizard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,13 @@ module.exports = enhanceWizard(({ onChange = () => { }, onFinish = () => { }, se
step={step}
setPage={setPage}
onFinish={onFinish}
isStepValid={n => n === 1 ? isChartOptionsValid(data.options) : true} hideButtons>
isStepValid={n =>
n === 0
? data.chartType
: n === 1
? isChartOptionsValid(data.options)
: true
} hideButtons>
<ChartType
key="type"
type={data.type}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ module.exports = ({
tooltipId: "widgets.builder.setupFilter"
}, {
onClick: () => setPage(Math.min(step + 1, 2)),
visible: !!(step === 0 && (!editorData.type || editorData.type.indexOf("WI") !== 0)) || step === 1,
visible: !!( step === 1 ),
disabled: step === 1 && !valid,
glyph: "arrow-right",
tooltipId: getNextTooltipId(step)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
/*
* Copyright 2018, GeoSolutions Sas.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/

const React = require('react');
const ReactDOM = require('react-dom');

const expect = require('expect');
const Toolbar = require('../Toolbar');
describe('CounterWizard Toolbar component', () => {
beforeEach((done) => {
document.body.innerHTML = '<div id="container"></div>';
setTimeout(done);
});
afterEach((done) => {
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
document.body.innerHTML = '';
setTimeout(done);
});
it('rendering with defaults', () => {
ReactDOM.render(<Toolbar />, document.getElementById("container"));
const container = document.getElementById('container');
const el = container.querySelector('.btn-group');
expect(el).toExist();
});
it('step 0', () => {
ReactDOM.render(<Toolbar step={0} valid={false} />, document.getElementById("container"));
const container = document.getElementById('container');
const el = container.querySelector('.btn-group');
expect(el).toExist();
const buttons = container.querySelectorAll('button');
expect(buttons.length).toBe(0);
});
it('step 1', () => {
ReactDOM.render(<Toolbar step={1} valid />, document.getElementById("container"));
const container = document.getElementById('container');
const el = container.querySelector('.btn-group');
expect(el).toExist();
const buttons = container.querySelectorAll('button');
expect(buttons.length).toBe(3);
expect(buttons[0].querySelector('.glyphicon-arrow-left')).toExist();
expect(buttons[1].querySelector('.glyphicon-filter')).toExist();
});
it('step 2', () => {
ReactDOM.render(<Toolbar step={1} valid />, document.getElementById("container"));
const container = document.getElementById('container');
const el = container.querySelector('.btn-group');
expect(el).toExist();
const buttons = container.querySelectorAll('button');
expect(buttons.length).toBe(3);
expect(buttons[0].querySelector('.glyphicon-arrow-left')).toExist();
expect(buttons[1].querySelector('.glyphicon-filter')).toExist();
expect(buttons[2].querySelector('.glyphicon-arrow-right')).toExist();
});
it('step buttons', () => {
ReactDOM.render(<Toolbar stepButtons={[{ text: "text", glyph: 'test', id: "test-button" }]} step={0} valid={false} />, document.getElementById("container"));
const container = document.getElementById('container');
const el = container.querySelector('.btn-group');
expect(el).toExist();
const buttons = container.querySelectorAll('button');
expect(buttons.length).toBe(1);
expect(buttons[0].querySelector('.glyphicon-test')).toExist();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ const React = require('react');

const Toolbar = require('../../../../../misc/toolbar/Toolbar');

module.exports = ({canProceed, selected, onProceed = () => {}} = {}) => (<Toolbar btnDefaultProps={{
module.exports = ({ canProceed, selected, stepButtons = [], onProceed = () => {}} = {}) => (<Toolbar btnDefaultProps={{
className: "square-button-md",
bsStyle: "primary",
bsSize: "sm"
}}
buttons={[{
onClick: onProceed,
disabled: !canProceed,
tooltipId: "widgets.builder.wizard.useTheSelectedLayer",
visible: selected,
glyph: "arrow-right"
buttons={[...stepButtons, {
onClick: onProceed,
disabled: !canProceed,
tooltipId: "widgets.builder.wizard.useTheSelectedLayer",
visible: selected,
glyph: "arrow-right"
}]} />);
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,18 @@ describe('CounterWizard Toolbar component', () => {
expect(buttons[0].querySelector('.glyphicon-arrow-left')).toExist();
expect(buttons[1].querySelector('.glyphicon-floppy-disk')).toExist();
});
it('step buttons', () => {
ReactDOM.render(<Toolbar stepButtons={[{text: "text", glyph: 'test', id: "test-button"}]} step={0} valid={false} />, document.getElementById("container"));
const container = document.getElementById('container');
const el = container.querySelector('.btn-group');
expect(el).toExist();
const buttons = container.querySelectorAll('button');
expect(buttons.length).toBe(3);
expect(buttons[0].querySelector('.glyphicon-test')).toExist();
expect(buttons[1].querySelector('.glyphicon-filter')).toExist();
expect(buttons[2].querySelector('.glyphicon-arrow-right')).toExist();
expect(buttons[2].disabled).toBe(true);
ReactDOM.render(<Toolbar step={0} valid />, document.getElementById("container"));
expect(container.querySelectorAll('button')[1].disabled).toBeFalsy();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ module.exports = compose(
})
)
)
)(({ onClose = () => { }, setSelected = () => { }, onMapChoice = () => { }, selected } = {}) =>
)(({ onClose = () => { }, setSelected = () => { }, onMapChoice = () => { }, stepButtons = [], selected } = {}) =>
(<BorderLayout
className="bg-body layer-selector"
header={<BuilderHeader onClose={onClose}>
Expand All @@ -62,7 +62,7 @@ module.exports = compose(
bsStyle: "primary",
bsSize: "sm"
}}
buttons={[{
buttons={[...stepButtons, {
tooltipId: "widgets.builder.wizard.useThisMap",
onClick: () => onMapChoice(selected),
visible: true,
Expand Down
10 changes: 5 additions & 5 deletions web/client/components/widgets/builder/wizard/map/Toolbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,16 @@ module.exports = ({ step = 0, buttons, tocButtons = [], stepButtons = [], editor
bsSize: "sm"
}}
buttons={buttons || [...(step === 0 ? tocButtons : []), {
onClick: () => setPage(Math.max(step - 1, 0)),
visible: step === 1,
glyph: "arrow-left",
tooltipId: "widgets.builder.wizard.configureMapOptions"
}, ...stepButtons, {
onClick: () => toggleLayerSelector(true),
visible: step === 0,
glyph: "plus",
tooltipId: "widgets.builder.wizard.addLayer"
}, {
onClick: () => setPage(Math.max(step - 1, 0)),
visible: step === 1,
glyph: "arrow-left",
tooltipId: "widgets.builder.wizard.configureMapOptions"
}, ...stepButtons, {
onClick: () => setPage(Math.min(step + 1, 2)),
visible: step === 0,
glyph: "arrow-right",
Expand Down
4 changes: 2 additions & 2 deletions web/client/components/widgets/builder/wizard/text/Toolbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ const getSaveTooltipId = (step, {id} = {}) => {
return "widgets.builder.wizard.addToTheMap";
};

module.exports = ({step = 0, editorData = {}, onFinish = () => {}} = {}) => (<Toolbar btnDefaultProps={{
module.exports = ({ step = 0, editorData = {}, stepButtons = [], onFinish = () => {}} = {}) => (<Toolbar btnDefaultProps={{
bsStyle: "primary",
bsSize: "sm"
}}
buttons={[{
buttons={[...stepButtons, {
onClick: () => onFinish(Math.min(step + 1, 1)),
visible: step === 0,
glyph: "floppy-disk",
Expand Down
2 changes: 2 additions & 0 deletions web/client/plugins/DashboardEditor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@ const {dashboardSelector} = require('./widgetbuilder/commons');
const { createWidget, toggleConnection } = require('../actions/widgets');
const { triggerShowConnections } = require('../actions/dashboard');
const { showConnectionsSelector } = require('../selectors/dashboard');
const withDashboardExitButton = require('./widgetbuilder/enhancers/withDashboardExitButton');
const Builder =
compose(
connect(dashboardSelector, { toggleConnection, triggerShowConnections}),
withProps(({ availableDependencies = []}) => ({
availableDependencies: availableDependencies.filter(d => d !== "map")
})),
withDashboardExitButton
)(require('./widgetbuilder/WidgetTypeBuilder'));

const Toolbar = compose(
Expand Down
17 changes: 11 additions & 6 deletions web/client/plugins/WidgetsBuilder.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,24 @@ const Dock = require('react-dock').default;

const {connect} = require('react-redux');
const {createSelector} = require('reselect');
const { compose } = require('recompose');

const {setControlProperty} = require('../actions/controls');

const {mapLayoutValuesSelector} = require('../selectors/maplayout');
const {widgetBuilderSelector} = require('../selectors/controls');
const { dependenciesSelector, availableDependenciesSelector} = require('../selectors/widgets');
const { toggleConnection } = require('../actions/widgets');
const Builder = connect(
createSelector(
dependenciesSelector,
availableDependenciesSelector,
(dependencies, availableDependenciesProps) => ({ dependencies, ...availableDependenciesProps}))
, { toggleConnection })(require('./widgetbuilder/WidgetTypeBuilder'));
const withMapExitButton = require('./widgetbuilder/enhancers/withMapExitButton');
const Builder = compose(
connect(
createSelector(
dependenciesSelector,
availableDependenciesSelector,
(dependencies, availableDependenciesProps) => ({ dependencies, ...availableDependenciesProps }))
, { toggleConnection }),
withMapExitButton
)(require('./widgetbuilder/WidgetTypeBuilder'));

class SideBarComponent extends React.Component {
static propTypes = {
Expand Down
5 changes: 4 additions & 1 deletion web/client/plugins/widgetbuilder/ChartBuilder.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const builderConfiguration = require('../../components/widgets/enhancers/builder
const chartLayerSelector = require('./enhancers/chartLayerSelector');
const viewportBuilderConnect = require('./enhancers/connection/viewportBuilderConnect');
const viewportBuilderConnectMask = require('./enhancers/connection/viewportBuilderConnectMask');
const withExitButton = require('./enhancers/withExitButton');
const withConnectButton = require('./enhancers/connection/withConnectButton');
const {
wizardStateToProps,
Expand Down Expand Up @@ -53,6 +54,7 @@ const Toolbar = compose(
wizardStateToProps
),
viewportBuilderConnect,
withExitButton(),
withConnectButton(({step}) => step === 1)

)(require('../../components/widgets/builder/wizard/chart/Toolbar'));
Expand All @@ -71,11 +73,12 @@ const chooseLayerEnhancer = compose(

);

module.exports = chooseLayerEnhancer(({ enabled, onClose = () => { }, editorData, toggleConnection, availableDependencies = [], dependencies, ...props} = {}) =>
module.exports = chooseLayerEnhancer(({ enabled, onClose = () => { }, exitButton, editorData, toggleConnection, availableDependencies = [], dependencies, ...props} = {}) =>

(<BorderLayout
header={<BuilderHeader onClose={onClose}>
<Toolbar
exitButton={exitButton}
editorData={editorData}
toggleConnection={toggleConnection}
availableDependencies={availableDependencies}
Expand Down
5 changes: 4 additions & 1 deletion web/client/plugins/widgetbuilder/CounterBuilder.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const chartLayerSelector = require('./enhancers/chartLayerSelector');
const viewportBuilderConnect = require('./enhancers/connection/viewportBuilderConnect');
const viewportBuilderConnectMask = require('./enhancers/connection/viewportBuilderConnectMask');

const withExitButton = require('./enhancers/withExitButton');
const withConnectButton = require('./enhancers/connection/withConnectButton');

const {
Expand Down Expand Up @@ -56,6 +57,7 @@ const Toolbar = compose(
wizardStateToProps
),
viewportBuilderConnect,
withExitButton(),
withConnectButton(({ step }) => step === 0)
)(require('../../components/widgets/builder/wizard/counter/Toolbar'));

Expand All @@ -72,10 +74,11 @@ const chooseLayerEnhancer = compose(
)
);

module.exports = chooseLayerEnhancer(({ enabled, onClose = () => { }, editorData, toggleConnection, availableDependencies=[], dependencies, ...props } = {}) =>
module.exports = chooseLayerEnhancer(({ enabled, onClose = () => { }, exitButton, editorData, toggleConnection, availableDependencies=[], dependencies, ...props } = {}) =>

(<BorderLayout
header={<BuilderHeader onClose={onClose}><Toolbar
exitButton={exitButton}
editorData={editorData}
toggleConnection={toggleConnection}
availableDependencies={availableDependencies}
Expand Down
4 changes: 2 additions & 2 deletions web/client/plugins/widgetbuilder/LayerSelector.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ const Catalog = compose(
* Builder page that allows layer's selection
* @prop {function} [layerValidationStream]
*/
module.exports = ({ onClose = () => { }, setSelected = () => { }, onLayerChoice = () => { }, selected, error, canProceed, layer, catalog, catalogServices} = {}) =>
module.exports = ({ onClose = () => { }, setSelected = () => { }, onLayerChoice = () => { }, stepButtons, selected, error, canProceed, layer, catalog, catalogServices} = {}) =>
(<BorderLayout
className="bg-body layer-selector"
header={<BuilderHeader onClose={onClose}>
<Toolbar canProceed={canProceed} onProceed={() => onLayerChoice(layer)} />
<Toolbar stepButtons={stepButtons} canProceed={canProceed} onProceed={() => onLayerChoice(layer)} />
{selected && !canProceed && error ? <InfoPopover
trigger={false}
glyph="warning-sign"
Expand Down
21 changes: 17 additions & 4 deletions web/client/plugins/widgetbuilder/MapBuilder.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ const Toolbar = mapToolbar(require('../../components/widgets/builder/wizard/map/
* Prompts Map Selection or Layer selector (to add layers)
*/
const chooseMapEnhancer = compose(
connect(wizardSelector),
connect(wizardSelector, {
onResetChange: onEditorChange
}),
// map selector
branch(
({ editorData = {} } = {}) => !editorData.map,
Expand All @@ -46,10 +48,20 @@ const chooseMapEnhancer = compose(
toggleLayerSelector(false);
}
}),
layerSelector
layerSelector,
)(require('./MapLayerSelector'))
)
)
),
// add button to back to map selection
withProps(({ onResetChange = () => { } }) => ({
exitButton: {
glyph: 'arrow-left',
onClick: () => {
// options will not be valid anymore in case of layer change
onResetChange("map", undefined);
}
}
}))
);
const Builder = connect(
wizardSelector,
Expand All @@ -74,13 +86,14 @@ module.exports = mapBuilder(({
enabled, onClose = () => {},
toggleLayerSelector = () => {},
editorData = {},
editNode, setEditNode, closeNodeEditor, selectedGroups=[], selectedLayers=[], selectedNodes, onNodeSelect = () => {},
editNode, setEditNode, closeNodeEditor, selectedGroups=[], exitButton, selectedLayers=[], selectedNodes, onNodeSelect = () => {},
availableDependencies = [], toggleConnection = () => {}
} = {}) =>
(<BorderLayout
className = "map-selector"
header={(<BuilderHeader onClose={onClose}>
<Toolbar
exitButton={exitButton}
editorData={editorData}
availableDependencies={availableDependencies}
toggleConnection={toggleConnection}
Expand Down
24 changes: 19 additions & 5 deletions web/client/plugins/widgetbuilder/MapSelector.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,28 @@
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
const { compose, withProps } = require('recompose');
const {connect} = require('react-redux');
const { onEditorChange } = require('../../actions/widgets');
const { normalizeMap } = require('../../utils/LayersUtils');

module.exports = connect(
() => ({}), {
onMapSelected: ({ map }) => onEditorChange("map", normalizeMap(map))

}
module.exports = compose(
connect(
() => ({}), {
onMapSelected: ({ map }) => onEditorChange("map", normalizeMap(map)),
onResetChange: onEditorChange

}),
// add button to back to widget type selection
withProps(({ onResetChange = () => { } }) => ({
stepButtons: [{
glyph: 'arrow-left',
tooltipId: 'widgets.builder.wizard.backToWidgetTypeSelection',
onClick: () => {
// options will not be valid anymore in case of layer change
onResetChange("map", undefined);
onResetChange("widgetType", undefined);
}
}]
}))
)(require('../../components/widgets/builder/wizard/map/MapSelector'));
Loading

0 comments on commit 321e16c

Please sign in to comment.