diff --git a/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/EntityStixCoreRelationshipsSelection.js b/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/EntityStixCoreRelationshipsSelection.js new file mode 100644 index 000000000000..0a1fc2dcb14c --- /dev/null +++ b/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/EntityStixCoreRelationshipsSelection.js @@ -0,0 +1,166 @@ +import React, { Component } from 'react'; +import { compose } from 'ramda'; +import { withStyles } from '@material-ui/core/styles'; +import * as PropTypes from 'prop-types'; +import Grid from '@material-ui/core/Grid'; +import Drawer from '@material-ui/core/Drawer'; +import Select from '@material-ui/core/Select'; +import Input from '@material-ui/core/Input'; +import Chip from '@material-ui/core/Chip'; +import MenuItem from '@material-ui/core/MenuItem'; +import inject18n from '../../../../components/i18n'; +import EntityStixCoreRelationships from './EntityStixCoreRelationships'; + +const styles = (theme) => ({ + container: { + marginTop: 15, + }, + bottomNav: { + zIndex: 1000, + padding: '10px 200px 10px 205px', + backgroundColor: theme.palette.navBottom.background, + display: 'flex', + }, + chips: { + display: 'flex', + flexWrap: 'wrap', + }, + chip: { + margin: theme.spacing(1) / 4, + }, +}); + +class EntityStixCoreRelationshipsSelection extends Component { + constructor(props) { + super(props); + + const { targetStixCoreRelationshipTypes } = props; + const defaultRelationshipType = targetStixCoreRelationshipTypes[0]; + + this.state = { + openToType: false, + selectedRelationshipType: defaultRelationshipType, + }; + } + + handleOpenToType() { + this.setState({ openToType: true }); + } + + handleCloseToType() { + this.setState({ openToType: false }); + } + + handleChangeRelationshipType(event) { + const { value } = event.target; + + return this.setState({ openToType: false, selectedRelationshipType: value }); + } + + renderMenuItems() { + const { targetStixCoreRelationshipTypes } = this.props; + + return targetStixCoreRelationshipTypes.map( + (relationshipType) => this.renderMenuItem(relationshipType), + ); + } + + renderMenuItem(relationshipType) { + return ( + + {this.getRelationshipTypeLabel(relationshipType)} + + ); + } + + getRelationshipTypeLabel(relationshipType) { + const { t } = this.props; + + return t(`relationship_${relationshipType}`); + } + + renderSelectedValue(relationshipType) { + const { classes } = this.props; + + return ( +
+ +
+ ); + } + + renderSelection() { + const { selectedRelationshipType, openToType } = this.state; + + return ( + + ); + } + + renderBottomMenu() { + const { classes } = this.props; + + return ( +
+ + + {this.renderSelection()} + + +
+ ); + } + + render() { + const { entityId, entityLink, targetStixDomainObjectTypes } = this.props; + const { selectedRelationshipType } = this.state; + + return ( +
+ +
{this.renderBottomMenu()}
+
+ ); + } +} + +EntityStixCoreRelationshipsSelection.propTypes = { + t: PropTypes.func, + classes: PropTypes.object, + entityId: PropTypes.string, + entityLink: PropTypes.string, + targetStixCoreRelationshipTypes: PropTypes.array, + targetStixDomainObjectTypes: PropTypes.array, +}; + +export default compose( + inject18n, + withStyles(styles, { withTheme: true }), +)(EntityStixCoreRelationshipsSelection); diff --git a/opencti-platform/opencti-front/src/private/components/entities/countries/CountryKnowledge.js b/opencti-platform/opencti-front/src/private/components/entities/countries/CountryKnowledge.js index 4bb9c7497110..be0dbbff71bc 100644 --- a/opencti-platform/opencti-front/src/private/components/entities/countries/CountryKnowledge.js +++ b/opencti-platform/opencti-front/src/private/components/entities/countries/CountryKnowledge.js @@ -14,6 +14,7 @@ import StixDomainObjectHeader from '../../common/stix_domain_objects/StixDomainO import StixCoreObjectKnowledgeBar from '../../common/stix_core_objects/StixCoreObjectKnowledgeBar'; import StixCoreObjectStixCyberObservables from '../../observations/stix_cyber_observables/StixCoreObjectStixCyberObservables'; import EntityStixSightingRelationships from '../../events/stix_sighting_relationships/EntityStixSightingRelationships'; +import EntityStixCoreRelationshipsSelection from '../../common/stix_core_relationships/EntityStixCoreRelationshipsSelection'; const styles = () => ({ container: { @@ -115,12 +116,11 @@ class CountryKnowledgeComponent extends Component { exact path="/dashboard/entities/countries/:countryId/knowledge/intrusion_sets" render={(routeProps) => ( - )}