text: import React, { Component } from 'react';
  import * as PropTypes from 'prop-types';
  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 {
    KeyboardArrowRightOutlined,
    AccountBalanceOutlined,
  } from '@material-ui/icons';
  import { compose } from 'ramda';
  import inject18n from '../../../../components/i18n';
  import StixCoreObjectLabels from '../../common/stix_core_objects/StixCoreObjectLabels';
  
  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 OrganizationLineComponent extends Component {
    render() {
      const {
        t, fd, classes, dataColumns, node, onLabelClick,
      } = this.props;
      return (
        <ListItem
          classes={{ root: classes.item }}
          divider={true}
          button={true}
          component={Link}
          to={`/dashboard/entities/organizations/${node.id}`}
        >
          <ListItemIcon classes={{ root: classes.itemIcon }}>
            <AccountBalanceOutlined />
          </ListItemIcon>
          <ListItemText
            primary={
              <div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.name.width }}
                >
                  {node.name}
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.x_opencti_organization_type.width }}
                >
                  {node.x_opencti_organization_type
                    ? t(`organization_${node.x_opencti_organization_type}`)
                    : ''}
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.objectLabel.width }}
                >
                  <StixCoreObjectLabels
                    variant="inList"
                    labels={node.objectLabel}
                    onClick={onLabelClick.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 }}>
            <KeyboardArrowRightOutlined />
          </ListItemIcon>
        </ListItem>
      );
    }
  }
  
  OrganizationLineComponent.propTypes = {
    dataColumns: PropTypes.object,
    node: PropTypes.object,
    classes: PropTypes.object,
    fd: PropTypes.func,
    onLabelClick: PropTypes.func,
  };
  
  const OrganizationLineFragment = createFragmentContainer(
    OrganizationLineComponent,
    {
      node: graphql`
        fragment OrganizationLine_node on Organization {
          id
          x_opencti_organization_type
          name
          created
          modified
          objectLabel {
            edges {
              node {
                id
                value
                color
              }
            }
          }
        }
      `,
    },
  );
  
  export const OrganizationLine = compose(
    inject18n,
    withStyles(styles),
  )(OrganizationLineFragment);
  
  class OrganizationLineDummyComponent extends Component {
    render() {
      const { classes, dataColumns } = this.props;
      return (
        <ListItem classes={{ root: classes.item }} divider={true}>
          <ListItemIcon classes={{ root: classes.itemIconDisabled }}>
            <AccountBalanceOutlined />
          </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.x_opencti_organization_type.width }}
                >
                  <div className="fakeItem" style={{ width: '80%' }} />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.objectLabel.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 }}>
            <KeyboardArrowRightOutlined />
          </ListItemIcon>
        </ListItem>
      );
    }
  }
  
  OrganizationLineDummyComponent.propTypes = {
    dataColumns: PropTypes.object,
    classes: PropTypes.object,
  };
  
  export const OrganizationLineDummy = compose(
    inject18n,
    withStyles(styles),
  )(OrganizationLineDummyComponent);
  