stitch-ui/src/admin/components/RootAdminUserDisplay.js

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable import/prefer-default-export */
/* eslint-disable react/prefer-es6-class */
/* eslint-disable react/no-string-refs */
/* eslint-disable jsx-a11y/label-has-for */
/* eslint-disable jsx-a11y/href-no-hash */

import React from "react";
import { Link } from "react-router-dom";
import DropdownMenu from "react-dd-menu";
import { Button } from "../../core";
import { AlertContainer } from "../../alert";
import { User } from "../../user";

class RootAdminUserDisplay extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      dropdownOpen: false
    };

    this.revoke = this.revoke.bind(this);
    this.impersonate = this.impersonate.bind(this);
  }

  revoke() {
    this.props
      .revoke(this.props.user._id)
      .then(() => this.props.addAlert(this.props.alertKey, "Sessions revoked"));
  }

  impersonate() {
    this.props.impersonate(this.props.user._id);
  }

  render() {
    const menuOptions = {
      isOpen: this.state.dropdownOpen,
      close: () => this.setState({ dropdownOpen: false }),
      toggle: (
        <Button
          small
          className="dropdowntoggle"
          onClick={() =>
            this.setState({ dropdownOpen: !this.state.dropdownOpen })}
        >
          …
        </Button>
      ),
      align: "right"
    };

    // TODO use absolute position for alert containers here.
    const user = new User(this.props.user);
    return (
      <div className="users-list-item">
        <div className="users-list-item-column users-list-item-pic">
          {user.getImage()}
        </div>
        <div className="users-list-item-column users-list-item-name">
          {user.getDisplayName()}
        </div>
        <div className="users-list-item-column users-list-item-id">
          {" "}{user.getId()}
        </div>
        <div className="users-list-item-column users-list-item-type">
          {user.getType()}
        </div>
        <div className="users-list-item-column users-list-item-identities">
          <div>
            {user.getProviderDisplayName()}
          </div>
          <AlertContainer alertKey={this.props.alertKey} />
        </div>
        <DropdownMenu {...menuOptions}>
          <li>
            <Link to={`/admin/logs?user_id=${user.getId()}`}>
              View activity
            </Link>
          </li>
          <li>
            <a href="#" onClick={this.revoke}>
              Revoke all sessions
            </a>
          </li>
          <li>
            <a href="#" onClick={this.impersonate}>
              Impersonate
            </a>
          </li>
        </DropdownMenu>
      </div>
    );
  }
}

export default RootAdminUserDisplay;