app/addons/documents/components/header-docs-left.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 Helpers from "../helpers";
import FauxtonAPI from '../../../core/api';
import { Dropdown } from "react-bootstrap";

function getModififyDbLinks (dbName) {
  return Helpers.getModifyDatabaseLinks(dbName);
}

function getAllDatabaseModalLinks (dbName, partitionKey) {
  const dropdownMenuLinks = Helpers.getNewButtonLinks(dbName, partitionKey);
  return getModififyDbLinks(dbName).concat(dropdownMenuLinks);
}


function getDropdownItems (items) {
  return items.map((el, i) => {

    if (el.title && el.links) {
      const items = el.links.map((subel) => {
        return <Item key={subel.title} onClick={subel.onClick} icon={subel.icon} url={subel.url}>{subel.title}</Item>;
      });

      return ([
        <li key={el.title} className="header-label">{el.title}</li>,
        items
      ]);
    }

    return (
      <Item icon={el.icon} url={el.url} onClick={el.onClick} key={i}>{el.title}</Item>
    );
  });
}


const Item = ({url, icon, onClick, children}) => {
  return (
    <li role="presentation">
      <a className="faux-header__doc-header-dropdown-item" onClick={onClick} href={url}>
        <i className={icon}></i> {children}
      </a>
    </li>
  );
};

const HeaderDocsLeft = ({dbName, partitionKey}) => {
  const items = getAllDatabaseModalLinks(dbName, partitionKey);
  const dropdownItems = getDropdownItems(items);

  return (
    <div className="faux-header__doc-header-left">
      <button type="button" className="faux-header__doc-header-backlink" onClick={() => { FauxtonAPI.navigate('#/_all_dbs'); }}>
        <i className="faux-header__doc-header-backlink__icon fonticon fonticon-left-open" />
      </button>
      <div className="faux-header__doc-header-title flex-fill" title={dbName}>
        {dbName}
      </div>
      <Dropdown id="faux-header__doc-header-left-1">
        <Dropdown.Toggle noCaret className="faux-header__doc-header-dropdown-toggle">
          <i className="faux-header__doc-header-dropdown-toggle-icon fonticon-vertical-ellipsis"></i>
        </Dropdown.Toggle>
        <Dropdown.Menu className="faux-header__doc-header-dropdown-itemwrapper">
          {dropdownItems}
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
};

HeaderDocsLeft.propTypes = {
  dbName: PropTypes.string.isRequired,
  partitionKey: PropTypes.string
};

export default HeaderDocsLeft;