text: import React, { Component } from 'react';
  import * as PropTypes from 'prop-types';
  import { Link } from 'react-router-dom';
  import { graphql, createFragmentContainer } from 'react-relay';
  import withStyles from '@mui/styles/withStyles';
  import ListItem from '@mui/material/ListItem';
  import ListItemIcon from '@mui/material/ListItemIcon';
  import ListItemText from '@mui/material/ListItemText';
  import { KeyboardArrowRightOutlined } from '@mui/icons-material';
  import { compose, pathOr, take } from 'ramda';
  import Skeleton from '@mui/material/Skeleton';
  import inject18n from '../../../../components/i18n';
  import ItemMarking from '../../../../components/ItemMarking';
  import StixCoreObjectLabels from '../stix_core_objects/StixCoreObjectLabels';
  import ItemIcon from '../../../../components/ItemIcon';
  import { resolveLink } from '../../../../utils/Entity';
  import { defaultValue } from '../../../../utils/Graph';
  import ItemStatus from '../../../../components/ItemStatus';
  
  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',
      paddingRight: 5,
    },
    goIcon: {
      position: 'absolute',
      right: -10,
    },
    itemIconDisabled: {
      color: theme.palette.grey[700],
    },
    placeholder: {
      display: 'inline-block',
      height: '1em',
      backgroundColor: theme.palette.grey[700],
    },
  });
  
  class StixCoreObjectOrStixCoreRelationshipContainerLineComponent extends Component {
    render() {
      const { fd, classes, node, dataColumns, onLabelClick } = this.props;
      return (
        <ListItem
          classes={{ root: classes.item }}
          divider={true}
          button={true}
          component={Link}
          to={`${resolveLink(node.entity_type)}/${node.id}`}
        >
          <ListItemIcon classes={{ root: classes.itemIcon }}>
            <ItemIcon type={node.entity_type} />
          </ListItemIcon>
          <ListItemText
            primary={
              <div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.name.width }}
                >
                  {defaultValue(node)}
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.createdBy.width }}
                >
                  {pathOr('', ['createdBy', 'name'], node)}
                </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.first_observed || node.published || node.created)}
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.x_opencti_workflow_id.width }}
                >
                  <ItemStatus
                    status={node.status}
                    variant="inList"
                    disabled={!node.workflowEnabled}
                  />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.objectMarking.width }}
                >
                  {take(1, pathOr([], ['objectMarking', 'edges'], node)).map(
                    (markingDefinition) => (
                      <ItemMarking
                        key={markingDefinition.node.id}
                        variant="inList"
                        label={markingDefinition.node.definition}
                        color={markingDefinition.node.x_opencti_color}
                      />
                    ),
                  )}
                </div>
              </div>
            }
          />
          <ListItemIcon classes={{ root: classes.goIcon }}>
            <KeyboardArrowRightOutlined />
          </ListItemIcon>
        </ListItem>
      );
    }
  }
  
  StixCoreObjectOrStixCoreRelationshipContainerLineComponent.propTypes = {
    dataColumns: PropTypes.object,
    node: PropTypes.object,
    classes: PropTypes.object,
    fd: PropTypes.func,
    t: PropTypes.func,
    onLabelClick: PropTypes.func,
  };
  
  const StixCoreObjectOrStixCoreRelationshipContainerLineFragment = createFragmentContainer(
    StixCoreObjectOrStixCoreRelationshipContainerLineComponent,
    {
      node: graphql`
          fragment StixCoreObjectOrStixCoreRelationshipContainerLine_node on Container {
            id
            workflowEnabled
            entity_type
            status {
              id
              order
              template {
                name
                color
              }
            }
            ... on Note {
              attribute_abstract
              content
              created
            }
            ... on Opinion {
              opinion
              created
            }
            ... on ObservedData {
              first_observed
              last_observed
            }
            ... on Report {
              name
              published
            }
            createdBy {
              ... on Identity {
                id
                name
                entity_type
              }
            }
            objectMarking {
              edges {
                node {
                  id
                  definition
                  x_opencti_color
                }
              }
            }
            objectLabel {
              edges {
                node {
                  id
                  value
                  color
                }
              }
            }
            ... on ObservedData {
              objects(first: 1) {
                edges {
                  node {
                    ... on StixCoreObject {
                      id
                      entity_type
                      parent_types
                      created_at
                      createdBy {
                        ... on Identity {
                          id
                          name
                          entity_type
                        }
                      }
                      objectMarking {
                        edges {
                          node {
                            id
                            definition
                          }
                        }
                      }
                    }
                    ... on AttackPattern {
                      name
                      description
                      x_mitre_id
                    }
                    ... on Campaign {
                      name
                      description
                      first_seen
                      last_seen
                    }
                    ... on Note {
                      attribute_abstract
                    }
                    ... on ObservedData {
                      first_observed
                      last_observed
                    }
                    ... on Opinion {
                      opinion
                    }
                    ... on Report {
                      name
                      description
                      published
                    }
                    ... on CourseOfAction {
                      name
                      description
                    }
                    ... on Individual {
                      name
                      description
                    }
                    ... on Organization {
                      name
                      description
                    }
                    ... on Sector {
                      name
                      description
                    }
                    ... on System {
                      name
                      description
                    }
                    ... on Indicator {
                      name
                      description
                      valid_from
                    }
                    ... on Infrastructure {
                      name
                      description
                    }
                    ... on IntrusionSet {
                      name
                      description
                      first_seen
                      last_seen
                    }
                    ... on Position {
                      name
                      description
                    }
                    ... on City {
                      name
                      description
                    }
                    ... on Country {
                      name
                      description
                    }
                    ... on Region {
                      name
                      description
                    }
                    ... on Malware {
                      name
                      description
                      first_seen
                      last_seen
                    }
                    ... on ThreatActor {
                      name
                      description
                      first_seen
                      last_seen
                    }
                    ... on Tool {
                      name
                      description
                    }
                    ... on Vulnerability {
                      name
                      description
                    }
                    ... on Incident {
                      name
                      description
                      first_seen
                      last_seen
                    }
                    ... on StixCyberObservable {
                      observable_value
                      x_opencti_description
                    }
                  }
                }
              }
            }
          }
        `,
    },
  );
  
  export const StixCoreObjectOrStixCoreRelationshipContainerLine = compose(
    inject18n,
    withStyles(styles),
  )(StixCoreObjectOrStixCoreRelationshipContainerLineFragment);
  
  class StixCoreObjectOrStixCoreRelationshipContainerLineDummyComponent extends Component {
    render() {
      const { classes, dataColumns } = this.props;
      return (
        <ListItem classes={{ root: classes.item }} divider={true}>
          <ListItemIcon classes={{ root: classes.itemIconDisabled }}>
            <Skeleton
              animation="wave"
              variant="circular"
              width={30}
              height={30}
            />
          </ListItemIcon>
          <ListItemText
            primary={
              <div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.name.width }}
                >
                  <Skeleton
                    animation="wave"
                    variant="rectangular"
                    width="90%"
                    height="100%"
                  />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.createdBy.width }}
                >
                  <Skeleton
                    animation="wave"
                    variant="rectangular"
                    width="90%"
                    height="100%"
                  />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.objectLabel.width }}
                >
                  <Skeleton
                    animation="wave"
                    variant="rectangular"
                    width="90%"
                    height="100%"
                  />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.created.width }}
                >
                  <Skeleton
                    animation="wave"
                    variant="rectangular"
                    width="90%"
                    height="100%"
                  />
                </div>
                <div
                  className={classes.bodyItem}
                  style={{ width: dataColumns.objectMarking.width }}
                >
                  <Skeleton
                    animation="wave"
                    variant="rectangular"
                    width={100}
                    height="100%"
                  />
                </div>
              </div>
            }
          />
          <ListItemIcon classes={{ root: classes.goIcon }}>
            <KeyboardArrowRightOutlined />
          </ListItemIcon>
        </ListItem>
      );
    }
  }
  
  StixCoreObjectOrStixCoreRelationshipContainerLineDummyComponent.propTypes = {
    classes: PropTypes.object,
    dataColumns: PropTypes.object,
  };
  
  export const StixCoreObjectOrStixCoreRelationshipContainerLineDummy = compose(
    inject18n,
    withStyles(styles),
  )(StixCoreObjectOrStixCoreRelationshipContainerLineDummyComponent);
  