app/addons/documents/sidebar/components/DesignDoc.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 from 'react';
import { Collapse } from 'react-bootstrap';
import ReactDOM from 'react-dom';
import FauxtonAPI from '../../../../core/api';
import Components from '../../../components/react-components';
import IndexEditorActions from '../../index-editor/actions';
import IndexSection from './IndexSection';

const { MenuDropDown } = Components;

export default class DesignDoc extends React.Component {
  static propTypes = {
    database: PropTypes.object.isRequired,
    sidebarListTypes: PropTypes.array.isRequired,
    isExpanded: PropTypes.bool.isRequired,
    selectedNavInfo: PropTypes.object.isRequired,
    toggledSections: PropTypes.object.isRequired,
    designDocName:  PropTypes.string.isRequired,
    showDeleteIndexModal: PropTypes.func.isRequired,
    showCloneIndexModal: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      updatedSidebarListTypes: this.props.sidebarListTypes
    };
    if (_.isEmpty(this.state.updatedSidebarListTypes) ||
      (_.has(this.state.updatedSidebarListTypes[0], 'selector') && this.state.updatedSidebarListTypes[0].selector !== 'views')) {

      const newList = this.state.updatedSidebarListTypes;
      newList.unshift({
        selector: 'views',
        name: 'Views',
        urlNamespace: 'view',
        indexLabel: 'view',
        onDelete: IndexEditorActions.deleteView,
        onClone: IndexEditorActions.cloneView,
        onEdit: IndexEditorActions.gotoEditViewPage
      });
      this.state = { updatedSidebarListTypes: newList };
    }
  }

  indexList = () => {
    return _.map(this.state.updatedSidebarListTypes, (index, key) => {
      const expanded = _.has(this.props.toggledSections, index.name) && this.props.toggledSections[index.name];

      // if an index in this list is selected, pass that down
      let selectedIndex = '';
      if (this.props.selectedNavInfo.designDocSection === index.name) {
        selectedIndex = this.props.selectedNavInfo.indexName;
      }

      return (
        <IndexSection
          icon={index.icon}
          isExpanded={expanded}
          urlNamespace={index.urlNamespace}
          indexLabel={index.indexLabel}
          onEdit={index.onEdit}
          onDelete={index.onDelete}
          onClone={index.onClone}
          selectedIndex={selectedIndex}
          toggle={this.props.toggle}
          database={this.props.database}
          designDocName={this.props.designDocName}
          key={key}
          title={index.name}
          selector={index.selector}
          items={_.keys(this.props.designDoc[index.selector])}
          showDeleteIndexModal={this.props.showDeleteIndexModal}
          showCloneIndexModal={this.props.showCloneIndexModal} />
      );
    });
  };

  toggle = (e) => {
    e.preventDefault();
    this.props.toggle(this.props.designDocName);
  };

  getNewButtonLinks = () => {
    const newUrlPrefix = FauxtonAPI.urls('databaseBaseURL', 'app', encodeURIComponent(this.props.database.id));
    const designDocName = this.props.designDocName;

    const addNewLinks = _.reduce(FauxtonAPI.getExtensions('sidebar:links'), function (menuLinks, link) {
      menuLinks.push({
        title: link.title,
        url: '#' + newUrlPrefix + '/' + link.url + '/' + encodeURIComponent(designDocName),
        icon: 'fonticon-plus-circled'
      });
      return menuLinks;
    }, [{
      title: 'New View',
      url: '#' + FauxtonAPI.urls('new', 'addView', encodeURIComponent(this.props.database.id), encodeURIComponent(designDocName)),
      icon: 'fonticon-plus-circled'
    }]);

    return [{
      title: 'Add New',
      links: addNewLinks
    }];
  };

  render () {
    const buttonLinks = this.getNewButtonLinks();
    let toggleClassNames = 'design-doc-section accordion-header';
    let toggleBodyClassNames = 'design-doc-body accordion-body collapse';

    if (this.props.isExpanded) {
      toggleClassNames += ' down';
      toggleBodyClassNames += ' in';
    }
    const designDocName = this.props.designDocName;
    const designDocMetaUrl = FauxtonAPI.urls('designDocs', 'app', encodeURIComponent(this.props.database.id), designDocName);
    const metadataRowClass = (this.props.selectedNavInfo.designDocSection === 'metadata') ? 'active' : '';

    return (
      <li className="nav-header">
        <div id={"sidebar-tab-" + designDocName} className={toggleClassNames}>
          <div id={"nav-header-" + designDocName} onClick={this.toggle} className='accordion-list-item'>
            <div className="fonticon-play"></div>
            <p className='design-doc-name'>
              <span title={'_design/' + designDocName}>{designDocName}</span>
            </p>
          </div>
          <div className='new-button add-dropdown'>
            <MenuDropDown links={buttonLinks} />
          </div>
        </div>
        <Collapse in={this.props.isExpanded}>
          <ul className={toggleBodyClassNames} id={this.props.designDocName}>
            <li className={metadataRowClass}>
              <a href={"#/" + designDocMetaUrl} className="toggle-view accordion-header">
                Metadata
              </a>
            </li>
            {this.indexList()}
          </ul>
        </Collapse>
      </li>
    );
  }
}