lens-ui/app/components/QueryParamsComponent.js

/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';
import { Button, Input } from 'react-bootstrap';
import _ from 'lodash';

import QueryParamRow from './QueryParamRowComponent';

class QueryParams extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      paramChanges: [],
      runImmediately: false,
      description: props.description
    };

    this.close = this.close.bind(this);
    this.save = this.save.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleCheck = this.handleCheck.bind(this);
    this.saveParamChanges = this.saveParamChanges.bind(this);
  }

  componentWillReceiveProps (props) {
    this.setState({description: props.description, paramChanges: []});
  }

  render () {
    let propParams = this.props.params;
    if (!propParams) return null;

    let changedParams = this.state.paramChanges;
    let params = this.mergeParamChanges(propParams, changedParams)
      .map(param => {
        return (
          <QueryParamRow key={param.name} param={param}
            saveParamChanges={this.saveParamChanges} />
        );
      });

    return (
      <form onSubmit={this.save} style={{padding: '10px', boxShadow: '2px 2px 2px 2px grey',
        marginTop: '6px', backgroundColor: 'rgba(255, 255, 0, 0.1)'}}>
        <h3>
          Query Parameters
        </h3>
        <table className='table table-striped'>
          <thead>
            <tr>
              <th>Parameter</th>
              <th>Display Name</th>
              <th>Data Type</th>
              <th>Collection Type</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            {params}
          </tbody>
        </table>
        <div className='form-group'>
          <label className='sr-only' htmlFor='queryDescription'>Description</label>
          <input type='text' className='form-control' style={{fontWeight: 'normal'}}
            onChange={this.handleChange} id='queryDescription' value={this.state.description}
            placeholder='(Optional description) e.g. This awesome query does magic along with its job.'
          />
        </div>
        <div>
            <Input type='checkbox' label='Run after saving'
              onChange={this.handleCheck} />

        </div>
        <Button bsStyle='primary' type='submit'>Save</Button>
        <Button onClick={this.close} style={{marginLeft: '4px'}}>Cancel</Button>
      </form>
    );
  }

  close () {
    this.props.close();
  }

  save (e) {
    e.preventDefault();
    // merges the initial props and the delta changes done by child components
    var parameters = this.mergeParamChanges(this.props.params, this.state.paramChanges);
    this.props.saveParams({
      parameters: parameters,
      description: this.state.description,
      runImmediately: this.state.runImmediately
    });
  }

  handleChange (e) {
    this.setState({ description: e.target.value });
  }

  handleCheck (e) {
    this.setState({ runImmediately: e.target.checked });
  }

  mergeParamChanges (original = [], changes = []) {
    return original.map(originalParam => {
      let change = changes.filter(changedParam => {
        return changedParam.name === originalParam.name;
      });
      return _.assign({}, originalParam, change[0]);
    });
  }

  saveParamChanges (changedParam) {
    // getting the param from the paramChanges state.
    var param = this.state.paramChanges.filter(param => {
      return param.name === changedParam.name;
    })[0];

    // apply the changedParam over the above param.
    var newParam = _.assign({}, param, changedParam);

    // getting all the other changes except the current as
    // we want to over-write it
    var newChangedParams = this.state.paramChanges.filter(param => {
      return param.name !== newParam.name;
    });

    this.setState({paramChanges: [...newChangedParams, newParam]});
  }
}

QueryParams.propTypes = {
  params: React.PropTypes.array.isRequired,
  close: React.PropTypes.func.isRequired,
  saveParams: React.PropTypes.func.isRequired
};

export default QueryParams;