Skip to content

Commit 321e16c

Browse files
offtherailzofftherailz
committed
Add back buttons to dashboard and map widgets
1 parent 7bdff39 commit 321e16c

28 files changed

Lines changed: 291 additions & 48 deletions

‎web/client/components/widgets/builder/wizard/ChartWizard.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,13 @@ module.exports = enhanceWizard(({ onChange = () => { }, onFinish = () => { }, se
8282
step={step}
8383
setPage={setPage}
8484
onFinish={onFinish}
85-
isStepValid={n => n === 1 ? isChartOptionsValid(data.options) : true} hideButtons>
85+
isStepValid={n =>
86+
n === 0
87+
? data.chartType
88+
: n === 1
89+
? isChartOptionsValid(data.options)
90+
: true
91+
} hideButtons>
8692
<ChartType
8793
key="type"
8894
type={data.type}

‎web/client/components/widgets/builder/wizard/chart/Toolbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ module.exports = ({
5959
tooltipId: "widgets.builder.setupFilter"
6060
}, {
6161
onClick: () => setPage(Math.min(step + 1, 2)),
62-
visible: !!(step === 0 && (!editorData.type || editorData.type.indexOf("WI") !== 0)) || step === 1,
62+
visible: !!( step === 1 ),
6363
disabled: step === 1 && !valid,
6464
glyph: "arrow-right",
6565
tooltipId: getNextTooltipId(step)

‎web/client/components/widgets/builder/wizard/chart/__tests__/Toolbar-test.jsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
* Copyright 2018, GeoSolutions Sas.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
const React = require('react');
10+
const ReactDOM = require('react-dom');
11+
12+
const expect = require('expect');
13+
const Toolbar = require('../Toolbar');
14+
describe('CounterWizard Toolbar component', () => {
15+
beforeEach((done) => {
16+
document.body.innerHTML = '<div id="container"></div>';
17+
setTimeout(done);
18+
});
19+
afterEach((done) => {
20+
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
21+
document.body.innerHTML = '';
22+
setTimeout(done);
23+
});
24+
it('rendering with defaults', () => {
25+
ReactDOM.render(<Toolbar />, document.getElementById("container"));
26+
const container = document.getElementById('container');
27+
const el = container.querySelector('.btn-group');
28+
expect(el).toExist();
29+
});
30+
it('step 0', () => {
31+
ReactDOM.render(<Toolbar step={0} valid={false} />, document.getElementById("container"));
32+
const container = document.getElementById('container');
33+
const el = container.querySelector('.btn-group');
34+
expect(el).toExist();
35+
const buttons = container.querySelectorAll('button');
36+
expect(buttons.length).toBe(0);
37+
});
38+
it('step 1', () => {
39+
ReactDOM.render(<Toolbar step={1} valid />, document.getElementById("container"));
40+
const container = document.getElementById('container');
41+
const el = container.querySelector('.btn-group');
42+
expect(el).toExist();
43+
const buttons = container.querySelectorAll('button');
44+
expect(buttons.length).toBe(3);
45+
expect(buttons[0].querySelector('.glyphicon-arrow-left')).toExist();
46+
expect(buttons[1].querySelector('.glyphicon-filter')).toExist();
47+
});
48+
it('step 2', () => {
49+
ReactDOM.render(<Toolbar step={1} valid />, document.getElementById("container"));
50+
const container = document.getElementById('container');
51+
const el = container.querySelector('.btn-group');
52+
expect(el).toExist();
53+
const buttons = container.querySelectorAll('button');
54+
expect(buttons.length).toBe(3);
55+
expect(buttons[0].querySelector('.glyphicon-arrow-left')).toExist();
56+
expect(buttons[1].querySelector('.glyphicon-filter')).toExist();
57+
expect(buttons[2].querySelector('.glyphicon-arrow-right')).toExist();
58+
});
59+
it('step buttons', () => {
60+
ReactDOM.render(<Toolbar stepButtons={[{ text: "text", glyph: 'test', id: "test-button" }]} step={0} valid={false} />, document.getElementById("container"));
61+
const container = document.getElementById('container');
62+
const el = container.querySelector('.btn-group');
63+
expect(el).toExist();
64+
const buttons = container.querySelectorAll('button');
65+
expect(buttons.length).toBe(1);
66+
expect(buttons[0].querySelector('.glyphicon-test')).toExist();
67+
});
68+
});

‎web/client/components/widgets/builder/wizard/common/layerselector/Toolbar.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ const React = require('react');
1010

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

13-
module.exports = ({canProceed, selected, onProceed = () => {}} = {}) => (<Toolbar btnDefaultProps={{
13+
module.exports = ({ canProceed, selected, stepButtons = [], onProceed = () => {}} = {}) => (<Toolbar btnDefaultProps={{
1414
className: "square-button-md",
1515
bsStyle: "primary",
1616
bsSize: "sm"
1717
}}
18-
buttons={[{
19-
onClick: onProceed,
20-
disabled: !canProceed,
21-
tooltipId: "widgets.builder.wizard.useTheSelectedLayer",
22-
visible: selected,
23-
glyph: "arrow-right"
18+
buttons={[...stepButtons, {
19+
onClick: onProceed,
20+
disabled: !canProceed,
21+
tooltipId: "widgets.builder.wizard.useTheSelectedLayer",
22+
visible: selected,
23+
glyph: "arrow-right"
2424
}]} />);

‎web/client/components/widgets/builder/wizard/counter/__tests__/Toolbar-test.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,18 @@ describe('CounterWizard Toolbar component', () => {
5050
expect(buttons[0].querySelector('.glyphicon-arrow-left')).toExist();
5151
expect(buttons[1].querySelector('.glyphicon-floppy-disk')).toExist();
5252
});
53+
it('step buttons', () => {
54+
ReactDOM.render(<Toolbar stepButtons={[{text: "text", glyph: 'test', id: "test-button"}]} step={0} valid={false} />, document.getElementById("container"));
55+
const container = document.getElementById('container');
56+
const el = container.querySelector('.btn-group');
57+
expect(el).toExist();
58+
const buttons = container.querySelectorAll('button');
59+
expect(buttons.length).toBe(3);
60+
expect(buttons[0].querySelector('.glyphicon-test')).toExist();
61+
expect(buttons[1].querySelector('.glyphicon-filter')).toExist();
62+
expect(buttons[2].querySelector('.glyphicon-arrow-right')).toExist();
63+
expect(buttons[2].disabled).toBe(true);
64+
ReactDOM.render(<Toolbar step={0} valid />, document.getElementById("container"));
65+
expect(container.querySelectorAll('button')[1].disabled).toBeFalsy();
66+
});
5367
});

‎web/client/components/widgets/builder/wizard/map/MapSelector.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ module.exports = compose(
5353
})
5454
)
5555
)
56-
)(({ onClose = () => { }, setSelected = () => { }, onMapChoice = () => { }, selected } = {}) =>
56+
)(({ onClose = () => { }, setSelected = () => { }, onMapChoice = () => { }, stepButtons = [], selected } = {}) =>
5757
(<BorderLayout
5858
className="bg-body layer-selector"
5959
header={<BuilderHeader onClose={onClose}>
@@ -62,7 +62,7 @@ module.exports = compose(
6262
bsStyle: "primary",
6363
bsSize: "sm"
6464
}}
65-
buttons={[{
65+
buttons={[...stepButtons, {
6666
tooltipId: "widgets.builder.wizard.useThisMap",
6767
onClick: () => onMapChoice(selected),
6868
visible: true,

‎web/client/components/widgets/builder/wizard/map/Toolbar.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,16 @@ module.exports = ({ step = 0, buttons, tocButtons = [], stepButtons = [], editor
2222
bsSize: "sm"
2323
}}
2424
buttons={buttons || [...(step === 0 ? tocButtons : []), {
25+
onClick: () => setPage(Math.max(step - 1, 0)),
26+
visible: step === 1,
27+
glyph: "arrow-left",
28+
tooltipId: "widgets.builder.wizard.configureMapOptions"
29+
}, ...stepButtons, {
2530
onClick: () => toggleLayerSelector(true),
2631
visible: step === 0,
2732
glyph: "plus",
2833
tooltipId: "widgets.builder.wizard.addLayer"
2934
}, {
30-
onClick: () => setPage(Math.max(step - 1, 0)),
31-
visible: step === 1,
32-
glyph: "arrow-left",
33-
tooltipId: "widgets.builder.wizard.configureMapOptions"
34-
}, ...stepButtons, {
3535
onClick: () => setPage(Math.min(step + 1, 2)),
3636
visible: step === 0,
3737
glyph: "arrow-right",

‎web/client/components/widgets/builder/wizard/text/Toolbar.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ const getSaveTooltipId = (step, {id} = {}) => {
1717
return "widgets.builder.wizard.addToTheMap";
1818
};
1919

20-
module.exports = ({step = 0, editorData = {}, onFinish = () => {}} = {}) => (<Toolbar btnDefaultProps={{
20+
module.exports = ({ step = 0, editorData = {}, stepButtons = [], onFinish = () => {}} = {}) => (<Toolbar btnDefaultProps={{
2121
bsStyle: "primary",
2222
bsSize: "sm"
2323
}}
24-
buttons={[{
24+
buttons={[...stepButtons, {
2525
onClick: () => onFinish(Math.min(step + 1, 1)),
2626
visible: step === 0,
2727
glyph: "floppy-disk",

‎web/client/plugins/DashboardEditor.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@ const {dashboardSelector} = require('./widgetbuilder/commons');
1717
const { createWidget, toggleConnection } = require('../actions/widgets');
1818
const { triggerShowConnections } = require('../actions/dashboard');
1919
const { showConnectionsSelector } = require('../selectors/dashboard');
20+
const withDashboardExitButton = require('./widgetbuilder/enhancers/withDashboardExitButton');
2021
const Builder =
2122
compose(
2223
connect(dashboardSelector, { toggleConnection, triggerShowConnections}),
2324
withProps(({ availableDependencies = []}) => ({
2425
availableDependencies: availableDependencies.filter(d => d !== "map")
2526
})),
27+
withDashboardExitButton
2628
)(require('./widgetbuilder/WidgetTypeBuilder'));
2729

2830
const Toolbar = compose(

‎web/client/plugins/WidgetsBuilder.jsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,24 @@ const Dock = require('react-dock').default;
1313

1414
const {connect} = require('react-redux');
1515
const {createSelector} = require('reselect');
16+
const { compose } = require('recompose');
1617

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

1920
const {mapLayoutValuesSelector} = require('../selectors/maplayout');
2021
const {widgetBuilderSelector} = require('../selectors/controls');
2122
const { dependenciesSelector, availableDependenciesSelector} = require('../selectors/widgets');
2223
const { toggleConnection } = require('../actions/widgets');
23-
const Builder = connect(
24-
createSelector(
25-
dependenciesSelector,
26-
availableDependenciesSelector,
27-
(dependencies, availableDependenciesProps) => ({ dependencies, ...availableDependenciesProps}))
28-
, { toggleConnection })(require('./widgetbuilder/WidgetTypeBuilder'));
24+
const withMapExitButton = require('./widgetbuilder/enhancers/withMapExitButton');
25+
const Builder = compose(
26+
connect(
27+
createSelector(
28+
dependenciesSelector,
29+
availableDependenciesSelector,
30+
(dependencies, availableDependenciesProps) => ({ dependencies, ...availableDependenciesProps }))
31+
, { toggleConnection }),
32+
withMapExitButton
33+
)(require('./widgetbuilder/WidgetTypeBuilder'));
2934

3035
class SideBarComponent extends React.Component {
3136
static propTypes = {

0 commit comments

Comments
 (0)