[backend/frontend] mutations (#4333)

OpenCTI-Platform · Sep 30, 2024 · a133e06 · a133e06
1 parent a3d907c
commit a133e06
Show file tree

Hide file tree

Showing 19 changed files with 240 additions and 25 deletions.
diff --git a/opencti-platform/opencti-front/src/components/ItemAssignees.tsx b/opencti-platform/opencti-front/src/components/ItemAssignees.tsx
@@ -7,6 +7,8 @@ import useGranted, { KNOWLEDGE_KNUPDATE } from '../utils/hooks/useGranted';
 import { useTheme } from '@mui/styles';
 import type { Theme } from './Theme';
 import FieldOrEmpty from './FieldOrEmpty';
+import { commitMutation, defaultCommitMutation } from '../relay/environment';
+import { stixDomainObjectMutation } from '@components/common/stix_domain_objects/StixDomainObjectHeader';
 
 type Node = {
   readonly entity_type: string;
@@ -16,14 +18,26 @@ type Node = {
 
 type Props = {
   assignees: ReadonlyArray<Node>;
+  stixDomainObjectId: string;
 };
 
-const ItemAssignees: FunctionComponent<Props> = ({ assignees }) => {
+const ItemAssignees: FunctionComponent<Props> = ({ assignees, stixDomainObjectId }) => {
   const theme = useTheme<Theme>();
   const canUpdateKnowledge = useGranted([KNOWLEDGE_KNUPDATE]);
-  const handleRemoveAssignee = (assigneeId: string) => {
-    console.log(assigneeId);
-    // TODO : Mutation
+  const handleRemoveAssignee = (removedId: string) => {
+    const values = assignees.filter((assignee) => assignee.id !== removedId);
+    const valuesIds = values.map((value) => value.id);
+    commitMutation({
+      mutation: stixDomainObjectMutation,
+      variables: {
+        id: stixDomainObjectId,
+        input: {
+          key: 'objectAssignee',
+          value: valuesIds,
+        }
+      },
+      ...defaultCommitMutation,
+    });
   };
   return (
     <FieldOrEmpty source={assignees}>

diff --git a/opencti-platform/opencti-front/src/components/ItemParticipants.tsx b/opencti-platform/opencti-front/src/components/ItemParticipants.tsx
@@ -7,21 +7,35 @@ import { truncate } from '../utils/String';
 import { hexToRGB } from '../utils/Colors';
 import { CancelOutlined } from '@mui/icons-material';
 import Chip from '@mui/material/Chip';
+import { commitMutation, defaultCommitMutation } from '../relay/environment';
+import { stixDomainObjectMutation } from '@components/common/stix_domain_objects/StixDomainObjectHeader';
 
 interface ItemParticipantsProps {
   participants: {
     readonly entity_type: string
     readonly id: string
     readonly name: string
   }[];
+  stixDomainObjectId: string;
 }
 
-const ItemParticipants: FunctionComponent<ItemParticipantsProps> = ({ participants }) => {
+const ItemParticipants: FunctionComponent<ItemParticipantsProps> = ({ participants, stixDomainObjectId }) => {
   const theme = useTheme<Theme>();
   const canUpdateKnowledge = useGranted([KNOWLEDGE_KNUPDATE]);
-  const handleRemoveParticipant = (participantId: string) => {
-    console.log(participantId);
-    // TODO : Mutation
+  const handleRemoveParticipant = (removedId: string) => {
+    const values = participants.filter((participant) => participant.id !== removedId);
+    const valuesIds = values.map((value) => value.id);
+    commitMutation({
+      mutation: stixDomainObjectMutation,
+      variables: {
+        id: stixDomainObjectId,
+        input: {
+          key: 'objectParticipant',
+          value: valuesIds,
+        }
+      },
+      ...defaultCommitMutation,
+    });
   };
   return (
     <FieldOrEmpty source={participants}>

diff --git a/...pencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectHeader.jsx b/...pencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectHeader.jsx
@@ -75,6 +75,16 @@ export const stixDomainObjectMutation = graphql`
         references: $references
       ) {
         x_opencti_stix_ids
+        objectAssignee {
+          id
+          name
+          entity_type
+        }
+        objectParticipant {
+          id
+          name
+          entity_type
+        }
         ... on AttackPattern {
           aliases
         }

diff --git a/...ncti-front/src/private/components/common/stix_domain_objects/StixDomainObjectOverview.jsx b/...ncti-front/src/private/components/common/stix_domain_objects/StixDomainObjectOverview.jsx
@@ -42,6 +42,7 @@ import ObjectAssigneeField from '@components/common/form/ObjectAssigneeField';
 import { fieldSpacingContainerStyle } from '../../../../utils/field';
 import { convertAssignees, convertParticipants } from '../../../../utils/edition';
 import ObjectParticipantField from '@components/common/form/ObjectParticipantField';
+import { graphql } from 'react-relay';
 
 const styles = (theme) => ({
   paper: {
@@ -69,6 +70,24 @@ const styles = (theme) => ({
   },
 });
 
+const stixDomainObjectMutationRelationsAdd = graphql`
+  mutation StixDomainObjectOverviewRelationsAddMutation(
+    $id: ID!
+    $input: StixRefRelationshipsAddInput!
+  ) {
+    stixDomainObjectEdit(id: $id) {
+      relationsAdd(
+        input: $input
+      ) {
+        objectAssignee {
+          id
+          name
+        }
+      }
+    }
+  }
+`;
+
 class StixDomainObjectOverview extends Component {
   constructor(props) {
     super(props);
@@ -91,16 +110,42 @@ class StixDomainObjectOverview extends Component {
     this.setState({ openAddParticipant: !this.state.openAddParticipant });
   }
 
-  onSubmitAssignees(values) {
-    console.log(values);
-    // TODO : Mutation
-    this.handleToggleAddAssignee();
+  onSubmitAssignees(values, { setSubmitting }) {
+    const { stixDomainObject } = this.props;
+    const valuesIds = values.objectAssignee.map((assignee) => assignee.value);
+    commitMutation({
+      mutation: stixDomainObjectMutation,
+      variables: {
+        id: stixDomainObject.id,
+        input: {
+          key: 'objectAssignee',
+          value: valuesIds,
+        }
+      },
+      onCompleted: () => {
+        setSubmitting(false);
+        this.handleToggleAddAssignee();
+      }
+    });
   }
 
-  onSubmitParticipant(values) {
-    console.log(values);
-    // TODO : Mutation
-    this.handleToggleAddParticipant();
+  onSubmitParticipant(values, { setSubmitting }) {
+    const { stixDomainObject } = this.props;
+    const valuesIds = values.objectParticipant.map((participant) => participant.value);
+    commitMutation({
+      mutation: stixDomainObjectMutation,
+      variables: {
+        id: stixDomainObject.id,
+        input: {
+          key: 'objectParticipant',
+          value: valuesIds,
+        }
+      },
+      onCompleted: () => {
+        setSubmitting(false);
+        this.handleToggleAddParticipant();
+      }
+    });
   }
 
   deleteStixId(stixId) {
@@ -123,6 +168,11 @@ class StixDomainObjectOverview extends Component {
     });
   }
 
+  initialValues = {
+    objectAssignee: convertAssignees(this.props.stixDomainObject),
+    objectParticipant: convertParticipants(this.props.stixDomainObject),
+  };
+
   render() {
     const {
       t,
@@ -146,11 +196,6 @@ class StixDomainObjectOverview extends Component {
       ? stixDomainObject.createdBy?.x_opencti_reliability
       : stixDomainObject.x_opencti_reliability;
 
-    const initialValues = {
-      objectAssignee: convertAssignees(stixDomainObject),
-      objectParticipant: convertParticipants(stixDomainObject),
-    };
-
     return (
       <>
         <Typography variant="h4">
@@ -285,7 +330,7 @@ class StixDomainObjectOverview extends Component {
                       <Add fontSize="small" />
                     </IconButton>
                   </Typography>
-                  <ItemAssignees assignees={stixDomainObject.objectAssignee ?? []} />
+                  <ItemAssignees assignees={stixDomainObject.objectAssignee ?? []} stixDomainObjectId={stixDomainObject.id} />
                 </div>
               )}
               {displayParticipants && (
@@ -305,7 +350,7 @@ class StixDomainObjectOverview extends Component {
                       <Add fontSize="small" />
                     </IconButton>
                   </Typography>
-                  <ItemParticipants participants={stixDomainObject.objectParticipant ?? []}/>
+                  <ItemParticipants participants={stixDomainObject.objectParticipant ?? []} stixDomainObjectId={stixDomainObject.id} />
                 </div>
               )}
               <Typography
@@ -424,7 +469,7 @@ class StixDomainObjectOverview extends Component {
           </DialogActions>
         </Dialog>
         <Formik
-          initialValues={initialValues}
+          initialValues={this.initialValues}
           onSubmit={this.onSubmitAssignees.bind(this)}
           onReset={this.handleToggleAddAssignee.bind(this)}
         >
@@ -460,7 +505,7 @@ class StixDomainObjectOverview extends Component {
           )}
         </Formik>
         <Formik
-          initialValues={initialValues}
+          initialValues={this.initialValues}
           onSubmit={this.onSubmitParticipant.bind(this)}
           onReset={this.handleToggleAddParticipant.bind(this)}
         >