app/addons/documents/index-editor/components/DesignDocSelector.js

// Licensed 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 PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Form } from 'react-bootstrap';
import FauxtonAPI from '../../../../core/api';


export default class DesignDocSelector extends Component {

  constructor(props) {
    super(props);
    this.onTogglePartitioned = this.onTogglePartitioned.bind(this);
  }

  validate() {
    if (this.props.selectedDesignDocName === 'new-doc' && this.props.newDesignDocName === '') {
      FauxtonAPI.addNotification({
        msg: 'Please name your design doc.',
        type: 'error'
      });
      this.newDesignDocInput.focus();
      return false;
    }
    return true;
  }

  getDocList() {
    if (this.props.designDocList) {
      return this.props.designDocList.map ((designDoc) => {
        return (<option key={designDoc} value={designDoc}>{designDoc}</option>);
      });
    }
    return [];

  }

  selectDesignDoc(e) {
    this.props.onSelectDesignDoc(e.target.value);
  }

  updateDesignDocName(e) {
    this.props.onChangeNewDesignDocName(e.target.value);
  }

  getNewDDocField() {
    if (this.props.selectedDesignDocName !== 'new-doc') {
      return;
    }
    return (
      <div id="new-ddoc-section" className={this.props.className}>
        <label className="control-label" htmlFor="new-ddoc">_design/</label>
        <Form.Control type="text"
          id="new-ddoc"
          placeholder="newDesignDoc"
          ref={(el) => { this.newDesignDocInput = el; }}
          onChange={this.updateDesignDocName.bind(this)} />
      </div>
    );
  }

  getDocLink() {
    if (!this.props.docLink) {
      return null;
    }
    return (
      <a className="help-link" data-bypass="true" href={this.props.docLink} target="_blank" rel="noopener noreferrer">
        <i className="fonticon-help-circled" />
      </a>
    );
  }

  onTogglePartitioned() {
    this.props.onChangeNewDesignDocPartitioned(!this.props.newDesignDocPartitioned);
  }

  getPartitionedCheckbox() {
    if (!this.props.isDbPartitioned) {
      return null;
    }
    const isExistingDDoc = this.props.selectedDesignDocName !== 'new-doc';
    const checked = isExistingDDoc ?
      this.props.selectedDesignDocPartitioned :
      this.props.newDesignDocPartitioned;
    const inputTitle = isExistingDDoc ?
      (this.props.selectedDesignDocPartitioned ? 'Design document is partitioned' : 'Design document is not partitioned') :
      (this.props.newDesignDocPartitioned ? 'New document will be partitioned' : 'New document will not be partitioned');
    return (
      <div className="row">
        <div className={"ddoc-selector-partitioned " + this.props.className}>
          <Form.Check type="checkbox"
            id="js-ddoc-selector-partitioned"
            title={inputTitle}
            label="Partitioned"
            checked={checked}
            onChange={this.onTogglePartitioned}
            disabled={isExistingDDoc} />
        </div>
      </div>
    );
  }

  render() {
    const selectContent =
      <optgroup label="Select a document">
        <option value="new-doc">New document</option>
        {this.getDocList()}
      </optgroup>;

    return (
      <>
        <div className="row">
          <div className={this.props.className}>
            <label htmlFor="ddoc">{this.props.designDocLabel}
              {this.getDocLink()}
            </label>
            <Form.Select
              onChange={this.selectDesignDoc.bind(this)}
              value={this.props.selectedDesignDocName}
              id="faux__edit-view__design-doc"
            >
              {selectContent}
            </Form.Select>
          </div>


          {this.getNewDDocField()}
        </div>
        {this.getPartitionedCheckbox()}
      </>
    );
  }
}

DesignDocSelector.defaultProps = {
  designDocLabel: 'Design Document',
  selectedDesignDocName: '',
  newDesignDocName: '',
  className: 'mb-3 col-12 col-lg-6 col-xxl-4'
};

DesignDocSelector.propTypes = {
  designDocList: PropTypes.array.isRequired,
  onSelectDesignDoc: PropTypes.func.isRequired,
  onChangeNewDesignDocName: PropTypes.func.isRequired,
  selectedDesignDocName: PropTypes.string.isRequired,
  selectedDesignDocPartitioned: PropTypes.bool.isRequired,
  newDesignDocName: PropTypes.string.isRequired,
  newDesignDocPartitioned: PropTypes.bool.isRequired,
  designDocLabel: PropTypes.string,
  docURL: PropTypes.string
};