stitch-ui
Version:
298 lines (283 loc) • 9.64 kB
JavaScript
// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react";
import PropTypes from "prop-types";
import FontAwesome from "react-fontawesome";
import { connect } from "react-redux";
import * as svg from "../../svg";
import { servicesByType, isMongoService } from "../../services/registry";
import { NavItem } from "../../core";
import AddServiceModal from "../../app/components/AddServiceModal";
const DOCS_LINK = "https://docs.mongodb.com/stitch";
const TUTORIAL_LINK = "https://docs.mongodb.com/stitch/tutorials";
class SideNav extends React.Component {
constructor(props) {
super(props);
this.state = { modalOpen: false };
this.openNewServiceModal = this.openNewServiceModal.bind(this);
this.closeNewServiceModal = this.closeNewServiceModal.bind(this);
}
openNewServiceModal() {
this.setState({ modalOpen: true });
}
closeNewServiceModal() {
this.setState({ modalOpen: false });
}
render() {
const { services, app, match } = this.props;
const svcKeys = Object.keys(services);
const consoleNavItems = [
{
to: `${match.url}/gettingstarted`,
iconComponent: (
<FontAwesome name="terminal" className="left-nav-item-icon" />
),
text: "Getting Started"
},
{
to: `${match.url}/clients`,
iconComponent: (
<FontAwesome name="cubes" className="left-nav-item-icon" />
),
text: "Clients"
}
];
const controlNavItems = [
{
to: `${match.url}/auth`,
iconComponent: (
<FontAwesome name="address-book-o" className="left-nav-item-icon" />
),
text: "Authentication"
},
{
to: `${match.url}/values`,
iconComponent: <svg.Vars />,
text: "Values"
},
{
to: `${match.url}/namedpipelines`,
iconComponent: <svg.Pipelines />,
text: "Pipelines"
},
{
to: `${match.url}/logs`,
iconComponent: (
<FontAwesome name="list" className="left-nav-item-icon" />
),
text: "Logs"
},
{
to: `${match.url}/debug`,
iconComponent: (
<FontAwesome name="bug" className="left-nav-item-icon" />
),
text: "Debug Console"
}
];
return (
<div className="sidenav sidenav-stitch">
<div className="list list-secondary">
<ul className="list-items">
<NavItem
to="/"
className="list-item list-item-has-icon list-item-is-primary"
linkClassName="list-item-link"
activeLinkClassName="list-item-link-is-primary-is-active"
activeClassName="list-item-is-primary-is-active"
>
<span className="list-item-link-icon">
<i className="mms-icon-back left-nav-item-icon" />
</span>
Stitch Apps
</NavItem>
</ul>
</div>
<div className="list list-secondary">
<ul className="list-items">
<li className="list-header list-item">Application</li>
<li className="list-item">
<h3>
{app.name}
</h3>
</li>
</ul>
</div>
<div className="list list-secondary">
<ul className="list-items">
<li className="list-header list-item">Stitch Console</li>
{consoleNavItems.map(({ to, iconComponent, text }) =>
<NavItem
key={text}
to={to}
className="list-item list-item-has-icon"
linkClassName="list-item-link"
activeLinkClassName="list-item-link-is-active"
activeClassName="list-item-is-active"
>
<span className="list-item-link-icon">
{iconComponent}
</span>
{text}
</NavItem>
)}
</ul>
</div>
{svcKeys.map(k => {
if (!isMongoService(services[k].type)) {
return null;
}
return (
<div className="list list-one" key={k}>
<ul className="list-items">
<li className="list-header list-item">Atlas Clusters</li>
<NavItem
to={`${match.url}/services/${k}`}
className="list-item list-item-has-icon"
linkClassName="list-item-link"
activeLinkClassName="list-item-link-is-active"
activeClassName="list-item-is-active"
>
<span className="list-item-link-icon">
<i className="mms-icon-leaf left-nav-item-icon" />
</span>
{k}
<span className="list-item-link-subtitle">
{servicesByType.get(services[k].type).displayName}
</span>
</NavItem>
</ul>
</div>
);
})}
<div className="list list-one">
<ul className="list-items">
<li className="list-header list-item">Services</li>
{svcKeys
.filter(k => !servicesByType.get(services[k].type).hideSidebar)
.map(k => {
const service = servicesByType.get(services[k].type);
return (
<NavItem
key={k}
to={`${match.url}/services/${k}`}
className="list-item list-item-has-icon"
linkClassName="list-item-link"
activeLinkClassName="list-item-link-is-active"
activeClassName="list-item-is-active"
>
<span className="list-item-link-icon">
{React.createElement(service.icon)}
</span>
{k}
<span className="list-item-link-subtitle">
{service.displayName}
</span>
</NavItem>
);
})}
<NavItem
to={`${match.url}/push`}
className="list-item list-item-has-icon"
linkClassName="list-item-link"
activeLinkClassName="list-item-link-is-active"
activeClassName="list-item-is-active"
>
<span className="list-item-link-icon">
<svg.IncomingWebhooks />
</span>
Push Notifications
</NavItem>
<li className="list-item">
<button
className="button button-is-small"
onClick={this.openNewServiceModal}
>
Add Service
</button>
</li>
</ul>
</div>
<div className="list list-secondary">
<ul className="list-items">
<li className="list-header list-item">Control</li>
{controlNavItems.map(({ to, iconComponent, text }) =>
<NavItem
key={text}
to={to}
className="list-item list-item-has-icon"
linkClassName="list-item-link"
activeLinkClassName="list-item-link-is-active"
activeClassName="list-item-is-active"
>
<span className="list-item-link-icon">
{iconComponent}
</span>
{text}
</NavItem>
)}
</ul>
</div>
<div className="list list-secondary">
<ul className="list-items">
<li className="list-item list-item-has-icon">
<a
className="list-item-link"
href={DOCS_LINK}
rel="noopener noreferrer"
target="_blank"
>
<span className="list-item-link-icon">
<i className="fa fa-book left-nav-item-icon" />
</span>
Documentation
<span className="list-item-link-icon-external">
<i className="fa fa-external-link" />
</span>
</a>
</li>
<li className="list-item list-item-has-icon">
<a
className="list-item-link"
href={TUTORIAL_LINK}
rel="noopener noreferrer"
target="_blank"
>
<span className="list-item-link-icon">
<i className="mms-icon-laptop left-nav-item-icon" />
</span>
Tutorials
<span className="list-item-link-icon-external">
<i className="fa fa-external-link" />
</span>
</a>
</li>
</ul>
</div>
<AddServiceModal
open={this.state.modalOpen}
onClose={this.closeNewServiceModal}
app={this.props.app}
/>
</div>
);
}
}
SideNav.contextTypes = {
router: PropTypes.object,
match: PropTypes.object // eslint-disable-line react/forbid-prop-types
};
SideNav.PropTypes = {
app: PropTypes.object,
services: PropTypes.object
};
const mapStateToProps = (state, ownProps) => {
const { app, services } = state.app.root;
const { match } = ownProps;
const { apps } = state.home;
return { app, services, apps, match };
};
SideNav.defaultProps = {
match: null
};
export default connect(mapStateToProps)(SideNav);