labo-components/app/components/shared/ToolHeader.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';

import IDUtil from '../../util/IDUtil';
import Project from '../../model/Project';
import classNames from 'classnames';
import ProjectList from "../workspace/projects/ProjectList";

export default class ToolHeader extends React.PureComponent {

    constructor(props) {
        super(props);
        this.CLASS_PREFIX = 'th';
    }

    selectProject = project => {
        if(this.props.onOutput) {
            this.props.onOutput(this.constructor.name, project);
        }
    };

    renderProjectSelector = (activeProject, userProjects, user, onSelectFunc) => {
        if(!user || user.id == 'ANONYMOUS') return null; //anonymous users cannot use projects
        return (
            <div
                className={classNames(
                    IDUtil.cssClassName("project", this.CLASS_PREFIX),
                    { active: activeProject }
                )}
                title={activeProject ? "Current user project. Click to change." : ""}
            >
                <ProjectList
                    key={userProjects ? 'p1' : 'p2'}
                    buttonText="Set active project"
                    user={user}
                    activeProject={activeProject}
                    projects={userProjects}
                    onSelect={onSelectFunc}
                    projectIcon={false}
                />
            </div>
        );
    };

    render() {
        const title = (
            <h1 className={IDUtil.cssClassName('title', this.CLASS_PREFIX)}>
                {this.props.name}
            </h1>
        );

		//only render when the project list is populated, since the ProjectList component does not handle updated props yet! (FIXME)
		//&& this.props.projects.length > 0
		const projectBtn = this.renderProjectSelector(
			this.props.activeProject,
            this.props.projects,
            this.props.user,
            this.selectProject
		);

        const projectLink = this.props.activeProject ? (
            <a
                href={'/workspace/projects/' + this.props.activeProject.id}
                className={IDUtil.cssClassName(
                    'project-link',
                    this.CLASS_PREFIX
                )}
                title="Open project in new window"
                target="_blank"
            />
        ) : null;

        return (
            <div className={IDUtil.cssClassName('tool-header')}>
                {title}
                {projectLink}
                {projectBtn}
            </div>
        );
    }
}

ToolHeader.propTypes = {
    name: PropTypes.string.isRequired, //recipe name
    projects: PropTypes.array,
    onOutput: PropTypes.func,
    activeProject: Project.getPropTypes(false),
    user: PropTypes.shape({
        id: PropTypes.string,
        name: PropTypes.string,
        attributes: PropTypes.shape({
            allowPersonalCollections: PropTypes.bool
        })
    })
};