First implementation of ResizableGrid and DockablePanel components

package.json

@@ -121,6 +121,7 @@
     "react-color": "2.11.3",
     "react-confirm-button": "0.0.2",
     "react-copy-to-clipboard": "4.1.0",
+    "react-data-grid": "2.0.41",
     "react-dnd": "2.2.3",
     "react-dnd-html5-backend": "2.2.3",
     "react-dock": "0.2.3",

web/client/components/buttons/GlobeViewSwitcherButton.jsx

@@ -82,7 +82,7 @@ const GlobeViewSwitcherButton = React.createClass({
          ].reduce((result, key) => { result[key] = this.props[key]; return result; }, {});
     },
     render() {
-        return <ToggleButton {...this.getButtonProperties()} pressed={this.props.active} tooltip={<Tooltip><Message msgId={this.props.active ? this.props.activeTooltip : this.props.notActiveTooltip}/></Tooltip>} />;
+        return <ToggleButton {...this.getButtonProperties()} pressed={this.props.active} tooltip={<Tooltip id="globeViewSwitcher-tooltip"><Message msgId={this.props.active ? this.props.activeTooltip : this.props.notActiveTooltip}/></Tooltip>} />;
     }
 });
 

web/client/components/data/featuregrid/FeatureGrid.jsx

@@ -188,7 +188,7 @@ const FeatureGrid = React.createClass({
                 flexDirection: "column",
                 height: "100%"
             }}>
-                <div fluid={false} style={this.props.style} className="ag-fresh">
+                <div style={this.props.style} className="ag-fresh">
                     <AgGridReact
                         virtualPaging={this.props.virtualPaging}
                         columnDefs={this.setColumnDefs()}

web/client/components/misc/DockablePanel.jsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright 2017, 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 Dock = require('react-dock');
+/**
+ * Component for rendering a dockablePanel panel.
+ * @memberof components.dockablePanel
+ * @class
+ * @prop {string} id. The <div> id value of the dockable panel
+ * @prop {string} dimMode. If none - content is not dimmed, if transparent - pointer events are disabled (so you can click through it), if opaque - click on dim area closes the dock. Default is none
+ * @prop {number} dockSize. Size of dock panel (width or height, depending on position). Is a % value [0~1]
+ * @prop {bool} isVisible. If true, dock is visible. Default is true.
+ * @prop {number} maxDockSize. The maximum extension in %. Default 1.0
+ * @prop {number} minDockSize. The minimum extension in %. Default 0.1
+ * @prop {string} position. Side to dock (left, right, top or bottom). Default is bottom.
+ * @prop {bool} fluid. If true, resize dock proportionally on window resize. Default is true.
+ * @prop {function} setDockSize. The metod called when the dockable panel is resized
+ * @prop {object} toolbar. it contains the toolbar
+ * @prop {object} toolbarHeight. the height of the toolbar in px. Default 40
+ * @prop {object} wrappedComponent. A connected Component to be rendered inside the dock panel
+ * @prop {number} zIndex. Positioned below dialogs, above left menu
+ *
+ */
+const DockablePanel = React.createClass({
+    propTypes: {
+        id: React.PropTypes.string,
+        dimMode: React.PropTypes.string,
+        dockSize: React.PropTypes.number,
+        isVisible: React.PropTypes.bool,
+        fluid: React.PropTypes.bool,
+        maxDockSize: React.PropTypes.number,
+        minDockSize: React.PropTypes.number,
+        position: React.PropTypes.string,
+        setDockSize: React.PropTypes.func,
+        toolbar: React.PropTypes.object,
+        toolbarHeight: React.PropTypes.number,
+        wrappedComponent: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.func]),
+        zIndex: React.PropTypes.number
+    },
+    contextTypes: {
+        messages: React.PropTypes.object
+    },
+    getDefaultProps() {
+        return {
+            dimMode: "none",
+            dockSize: 0.35,
+            fluid: true,
+            isVisible: true,
+            maxDockSize: 1.0,
+            minDockSize: 0.1,
+            position: "bottom",
+            setDockSize: () => {},
+            toolbar: null,
+            toolbarHeight: 40,
+            wrappedComponent: {},
+            zIndex: 1030
+        };
+    },
+    getHeight(pos) {
+        return pos === "top" || pos === "bottom" ? true : undefined;
+    },
+    getWidth(pos) {
+        return pos === "left" || pos === "right" ? true : undefined;
+    },
+    render() {
+        const WrappedComponent = this.props.wrappedComponent;
+        return (
+            <Dock
+                id={this.props.id}
+                zIndex={this.props.zIndex}
+                position={this.props.position}
+                size={this.props.dockSize}
+                dimMode={this.props.dimMode}
+                isVisible={this.props.isVisible}
+                onSizeChange={this.limitDockHeight}
+                fluid={this.props.fluid}
+                dimStyle={{ background: 'rgba(0, 0, 100, 0.2)' }}
+            >
+                <div className="dockpanel-wrapped-component" style={{height: "calc(100% - " + this.props.toolbarHeight + "px)"}}>
+                    {this.props.wrappedComponent !== null ? (<WrappedComponent
+                    size={{
+                        height: this.getHeight(this.props.position) && this.props.dockSize,
+                        width: this.getWidth(this.props.position) && this.props.dockSize
+                    }}
+                    />) : null }
+                </div>
+                {this.props.toolbar}
+            </Dock>
+        );
+    },
+    limitDockHeight(size) {
+        if (size >= this.props.maxDockSize) {
+            this.props.setDockSize(this.props.maxDockSize);
+        } else if (size <= this.props.minDockSize) {
+            this.props.setDockSize(this.props.minDockSize);
+        } else {
+            this.props.setDockSize(size);
+        }
+    }
+});
+
+module.exports = DockablePanel;

web/client/components/misc/ResizableGrid.jsx

@@ -0,0 +1,101 @@
+/*
+ * Copyright 2017, 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 ReactDataGrid = require('react-data-grid');
+/**
+ * Component for rendering a feature grid.
+ * @memberof components.ResizableGrid
+ * @class
+ * @prop {object[]} columns. The columns rendered in the header. Each object is composed by key,name,[reizable=true|false].
+ * @prop {number} headerRowHeight the height in pixels of the rows in the header. Default 55
+ * @prop {number} minHeight the min height of the grid container. Default 250
+ * @prop {number} minWidth the min width of the grid container.
+ * @prop {string} refGrid the reference to the react-data-grid-component
+ * @prop {number} rowHeight the height of the rows in the grid. Default 30
+ * @prop {string} rowKey the key used to distinguish rows.
+ * @prop {object} rowSelection The object used to handle selection of rows. It puts a column of check as the first row.
+ * @prop {object[]} rows. The features passed to the grid.
+ * @prop {number} size. The size of the dock panel wrapping this component.
+ *
+ */
+const ResizableGrid = React.createClass({
+    propTypes: {
+        columns: React.PropTypes.array.isRequired,
+        headerRowHeight: React.PropTypes.number,
+        minHeight: React.PropTypes.number.isRequired,
+        minWidth: React.PropTypes.number,
+        refGrid: React.PropTypes.string,
+        rowHeight: React.PropTypes.number.isRequired,
+        rowKey: React.PropTypes.string,
+        rowSelection: React.PropTypes.object,
+        rows: React.PropTypes.array.isRequired,
+        size: React.PropTypes.object
+    },
+    contextTypes: {
+        messages: React.PropTypes.object
+    },
+    getDefaultProps() {
+        return {
+            columns: [],
+            headerRowHeight: 55,
+            minHeight: 250,
+            minWidth: null,
+            refGrid: "grid",
+            rowHeight: 30,
+            rowKey: "id",
+            rowSelection: null,
+            rows: []
+        };
+    },
+    getInitialState() {
+        return {
+            minHeight: this.props.minHeight,
+            minWidth: this.props.minWidth
+        };
+    },
+    componentWillReceiveProps(newProps) {
+        if (this.props.size.width !== newProps.size.width ) {
+            this.setState({
+                minWidth: this.getWidth(this.refs.grid),
+                minHeight: this.getHeight(this.refs.grid)}
+            );
+        }
+        if (this.props.size.height !== newProps.size.height ) {
+            this.setState({
+                minHeight: this.getHeight(this.refs.grid)}
+            );
+        }
+    },
+    getHeight(element) {
+        return element && element.getDataGridDOMNode().clientHeight || this.props.minHeight;
+    },
+    getWidth(element) {
+        return element && element.getDataGridDOMNode().clientWidth || this.props.minWidth;
+    },
+    render() {
+        return (
+            <ReactDataGrid
+                columns={this.props.columns}
+                headerRowHeight={this.props.headerRowHeight}
+                minHeight={this.state.minHeight || this.props.minHeight}
+                minWidth={this.state.minWidth || this.props.minWidth}
+                ref={this.props.refGrid}
+                rowGetter={this.rowGetter}
+                rowHeight={this.props.rowHeight}
+                rowKey={this.props.rowKey}
+                rowSelection={this.props.rowSelection}
+                rowsCount={this.props.rows.length}
+            />
+        );
+    },
+    rowGetter(i) {
+        return this.props.rows[i];
+    }
+});
+
+module.exports = ResizableGrid;

web/client/components/misc/__tests__/DockablePanel-test.jsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2017, 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 expect = require('expect');
+const ReactDOM = require('react-dom');
+const DockablePanel = require('../DockablePanel');
+
+const defaultProps = {
+    dockSize: 0.35,
+    wrappedComponent: null,
+    position: "bottom",
+    maxDockSize: 1.0,
+    minDockSize: 0.1,
+    setDockSize: () => {}
+};
+describe("Test DockablePanel 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('Test DockablePanel rendering without tools', () => {
+        let comp = ReactDOM.render(
+            <DockablePanel {...defaultProps}/>, document.getElementById("container"));
+        expect(comp).toExist();
+
+    });
+
+
+});