porter/dashboard/src/components/ResourceTab.tsx

import React, { Component } from 'react';
import styled from 'styled-components';

import { kindToIcon } from '../shared/rosettaStone';

type PropsType = {
  label: string,
  name: string,
  handleClick?: () => void,
  selected?: boolean,
  isLast?: boolean,
  roundAllCorners?: boolean,
  status?: {
    label: string,
    available?: number,
    total?: number,
  } | null
  expanded?: boolean,
};

type StateType = {
  expanded: boolean,
  showTooltip: boolean,
};

export default class ResourceTab extends Component<PropsType, StateType> {
  state = {
    expanded: this.props.expanded || false,
    showTooltip: false,
  }

  renderDropdownIcon = () => {
    if (this.props.children) {
      return (
        <DropdownIcon expanded={this.state.expanded}>
          <i className="material-icons">arrow_right</i>
        </DropdownIcon>
      );
    }
  }

  renderIcon = (kind: string) => {
    let icon = 'tonality';
    if (Object.keys(kindToIcon).includes(kind)) {
      icon = kindToIcon[kind]; 
    }
    
    return (
      <IconWrapper>
        <i className="material-icons">{icon}</i>
      </IconWrapper>
    );
  }

  renderTooltip = (x: string): JSX.Element | undefined => {
    if (this.state.showTooltip) {
      return (
        <Tooltip>{x}</Tooltip>
      );
    }
  }

  getStatusText = () => {
    let { status } = this.props;
    if (status.available && status.total) {
      return `${status.available}/${status.total}`;
    } else if (status.label) {
      return status.label;
    }
  }

  renderStatus = () => {
    let { status } = this.props;
    if (status) {
      return (
        <Status>
          {this.getStatusText()}

          <StatusColor status={status.label} />
        </Status>
      );
    }
  }

  renderExpanded = () => {
    if (this.props.children && this.state.expanded) {
      return (
        <ExpandWrapper>
          {this.props.children}
        </ExpandWrapper>
      );
    }
  }

  render() {
    let { 
      label,
      name,
      children,
      isLast,
      handleClick,
      selected,
      status,
      roundAllCorners,
    } = this.props;
    return (
      <StyledResourceTab 
        isLast={isLast}
        onClick={() => handleClick && handleClick()}
        roundAllCorners={roundAllCorners}
      >
        <ResourceHeader
          hasChildren={children && true}
          expanded={this.state.expanded || selected}
          onClick={() => {
            if (children) {
              this.setState({ expanded: !this.state.expanded });
            }
          }}
        >
          <Info>
            {this.renderDropdownIcon()}
            <Metadata hasStatus={status && true}>
              {this.renderIcon(label)}
              {label}
              <ResourceName
                showKindLabels={true}
                onMouseOver={() => { this.setState({ showTooltip: true }) }}
                onMouseOut={() => { this.setState({ showTooltip: false }) }}
              >
                {name}
              </ResourceName>
              {this.renderTooltip(name)}
            </Metadata>
          </Info>
          {this.renderStatus()}
        </ResourceHeader>
        {this.renderExpanded()}
      </StyledResourceTab>
    );
  }
}

const StyledResourceTab = styled.div`
  width: 100%;
  margin-bottom: 2px;
  background: #ffffff11;
  border-bottom-left-radius: ${(props: { isLast: boolean, roundAllCorners: boolean }) => props.isLast ? '5px' : ''};
  border-bottom-right-radius: ${(props: { isLast: boolean, roundAllCorners: boolean }) => props.roundAllCorners && props.isLast ? '5px' : ''};
`;

const Tooltip = styled.div`
  position: absolute;
  right: 0px;
  top: 25px;
  white-space: nowrap;
  height: 18px;
  padding: 2px 5px;
  background: #383842dd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: white;
  text-transform: none;
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  outline: 1px solid #ffffff55;
  opacity: 0;
  animation: faded-in 0.2s 0.15s;
  animation-fill-mode: forwards;
  @keyframes faded-in {
    from { opacity: 0 }
    to { opacity: 1 }
  }
`;

const ExpandWrapper = styled.div`
  overflow: hidden;
`;

const ResourceHeader = styled.div`
  width: 100%;
  height: 50px;
  display: flex;
  font-size: 13px;
  align-items: center;
  justify-content: space-between;
  color: #ffffff66;
  user-select: none;
  padding: 8px 18px;
  padding-left: ${(props: { expanded: boolean, hasChildren: boolean }) => props.hasChildren ? '10px' : '22px'};
  cursor: pointer;
  background: ${(props: { expanded: boolean, hasChildren: boolean }) => props.expanded ? '#ffffff11' : ''};
  :hover {
    background: #ffffff18;

    > i {
      background: #ffffff22;
    }
  }
`;

const Info = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 80%;
  height: 100%;
`;

const Metadata = styled.div`
  display: flex;
  align-items: center;
  position: relative;
  max-width: ${(props: { hasStatus: boolean }) => props.hasStatus ? 'calc(100% - 50px)' : '100%'};
`;

const Status = styled.div`
  display: flex;
  width; 20%;
  font-size: 12px;
  text-transform: capitalize;
  justify-content: flex-end;
  align-items: center;
  font-family: 'Work Sans', sans-serif;
  color: #aaaabb;
  animation: fadeIn 0.5s;
  @keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
  }
`;

const StatusColor = styled.div`
  margin-left: 12px;
  width: 8px;
  min-width: 8px;
  height: 8px;
  background: ${(props: { status: string }) => (props.status === 'running' || props.status === 'Ready' || props.status === 'Completed' ? '#4797ff' : props.status === 'failed' || props.status === 'FailedValidation' ? "#ed5f85" : "#f5cb42")};
  border-radius: 20px;
`;

const ResourceName = styled.div`
  color: #ffffff;
  margin-left: ${(props: { showKindLabels: boolean }) => props.showKindLabels ? '10px' : ''};
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const IconWrapper = styled.div`
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;

  > i {
    font-size: 15px;
    color: #ffffff;
    margin-right: 14px;
  }
`;

const DropdownIcon = styled.div`
  > i {
    margin-top: 2px;
    margin-right: 11px;
    font-size: 20px;
    color: #ffffff66;
    cursor: pointer;
    border-radius: 20px;
    background: ${(props: { expanded: boolean }) => props.expanded ? '#ffffff18' : ''};
    transform: ${(props: { expanded: boolean }) => props.expanded ? 'rotate(180deg)' : ''};
    animation: ${(props: { expanded: boolean }) => props.expanded ? 'quarterTurn 0.3s' : ''};
    animation-fill-mode: forwards;

    @keyframes quarterTurn {
      from { transform: rotate(0deg) }
      to { transform: rotate(90deg) }
    }
  }
`;