text: import React, { Component } from 'react';
  import * as PropTypes from 'prop-types';
  import { compose } from 'ramda';
  import { Link } from 'react-router-dom';
  import { createFragmentContainer } from 'react-relay';
  import graphql from 'babel-plugin-relay/macro';
  import { withStyles } from '@material-ui/core/styles';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemIcon from '@material-ui/core/ListItemIcon';
  import ListItemText from '@material-ui/core/ListItemText';
  import { KeyboardArrowRight } from '@material-ui/icons';
  import { Fire } from 'mdi-material-ui';
  import inject18n from '../../../../components/i18n';
  import StixObjectTags from '../../common/stix_object/StixObjectTags';
  
  const styles = (theme) => ({
    item: {
      paddingLeft: 10,
      height: 50,
    },
    itemIcon: {
      color: theme.palette.primary.main,
    },
    bodyItem: {
      height: 20,
      fontSize: 13,
      float: 'left',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    },
    goIcon: {
      position: 'absolute',
      right: -10,
    },
    itemIconDisabled: {
      color: theme.palette.grey[700],
    },
    placeholder: {
      display: 'inline-block',
      height: '1em',
      backgroundColor: theme.palette.grey[700],
    },
  });
  
  class IncidentLineComponent extends Component {
    render() {
      const {
        fd, classes, dataColumns, node, onTagClick,
      } = this.props;
      return (
        <ListItem
          classes={{ root: classes.item }}
          divider={true}
          button={true}
          component={Link}
          to={`/dashboard/threats/incidents/${node.id}`}
        >
          <ListItemIcon classes={{ root: classes.itemIcon }}>
            <Fire />
          </ListItemIcon>
          <ListItemText
            primary={
              <div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.name.width }}
                >
                  {node.name}
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.tags.width }}
                >
                  <StixObjectTags
                    variant="inList"
                    tags={node.tags}
                    onClick={onTagClick.bind(this)}
                  />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.created.width }}
                >
                  {fd(node.created)}
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.modified.width }}
                >
                  {fd(node.modified)}
                </div>
              </div>
            }
          />
          <ListItemIcon classes={{ root: classes.goIcon }}>
            <KeyboardArrowRight />
          </ListItemIcon>
        </ListItem>
      );
    }
  }
  
  IncidentLineComponent.propTypes = {
    dataColumns: PropTypes.object,
    node: PropTypes.object,
    classes: PropTypes.object,
    fd: PropTypes.func,
    onTagClick: PropTypes.func,
  };
  
  const IncidentLineFragment = createFragmentContainer(IncidentLineComponent, {
    node: graphql`
      fragment IncidentLine_node on Incident {
        id
        name
        created
        modified
        tags {
          edges {
            node {
              id
              tag_type
              value
              color
            }
            relation {
              id
            }
          }
        }
        markingDefinitions {
          edges {
            node {
              id
              definition
            }
          }
        }
      }
    `,
  });
  
  export const IncidentLine = compose(
    inject18n,
    withStyles(styles),
  )(IncidentLineFragment);
  
  class IncidentLineDummyComponent extends Component {
    render() {
      const { classes, dataColumns } = this.props;
      return (
        <ListItem classes={{ root: classes.item }} divider={true}>
          <ListItemIcon classes={{ root: classes.itemIconDisabled }}>
            <Fire />
          </ListItemIcon>
          <ListItemText
            primary={
              <div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.name.width }}
                >
                  <div className="fakeItem" style={{ width: '80%' }} />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.tags.width }}
                >
                  <div className="fakeItem" style={{ width: '90%' }} />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.created.width }}
                >
                  <div className="fakeItem" style={{ width: 140 }} />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.modified.width }}
                >
                  <div className="fakeItem" style={{ width: 140 }} />
                </div>
              </div>
            }
          />
          <ListItemIcon classes={{ root: classes.goIcon }}>
            <KeyboardArrowRight />
          </ListItemIcon>
        </ListItem>
      );
    }
  }
  
  IncidentLineDummyComponent.propTypes = {
    dataColumns: PropTypes.object,
    classes: PropTypes.object,
  };
  
  export const IncidentLineDummy = compose(
    inject18n,
    withStyles(styles),
  )(IncidentLineDummyComponent);
  