[frontend] new assign/participant chip design (#4333)

OpenCTI-Platform · Sep 26, 2024 · 01bcf73 · 01bcf73
1 parent 7d5533d
commit 01bcf73
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 26 deletions.
diff --git a/opencti-platform/opencti-front/src/components/ItemAssignees.tsx b/opencti-platform/opencti-front/src/components/ItemAssignees.tsx
@@ -1,5 +1,12 @@
 import React, { FunctionComponent } from 'react';
-import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import { truncate } from '../utils/String';
+import { hexToRGB } from '../utils/Colors';
+import { CancelOutlined } from '@mui/icons-material';
+import useGranted, { KNOWLEDGE_KNUPDATE } from '../utils/hooks/useGranted';
+import { useTheme } from '@mui/styles';
+import type { Theme } from './Theme';
+import FieldOrEmpty from './FieldOrEmpty';
 
 type Node = {
   readonly entity_type: string;
@@ -12,22 +19,35 @@ type Props = {
 };
 
 const ItemAssignees: FunctionComponent<Props> = ({ assignees }) => {
+  const theme = useTheme<Theme>();
+  const canUpdateKnowledge = useGranted([KNOWLEDGE_KNUPDATE]);
+  const handleRemoveAssignee = (assigneeId: string) => {
+    console.log(assigneeId);
+    // TODO : Mutation
+  };
   return (
-    <div>
-      {assignees.length > 0
-        ? assignees.map((assignee) => (
-          <Button
-            key={assignee.id}
-            variant="outlined"
-            color="primary"
-            size="small"
-            style={{ margin: '0 7px 7px 0', cursor: 'default' }}
-          >
-            {assignee.name}
-          </Button>
-        ))
-        : '-'}
-    </div>
+    <FieldOrEmpty source={assignees}>
+      {assignees.map((assignee) => (
+        <Chip
+          key={assignee.id}
+          variant="outlined"
+          label={truncate(assignee.name, 25)}
+          style={{
+            color: theme.palette.primary.main,
+            borderColor: theme.palette.primary.main,
+            backgroundColor: hexToRGB(theme.palette.primary.main),
+            margin: '0 7px 7px 0',
+            borderRadius: theme.borderRadius,
+          }}
+          onDelete={canUpdateKnowledge ? () => (handleRemoveAssignee(assignee.id)) : undefined}
+          deleteIcon={
+            <CancelOutlined
+              style={{ color: theme.palette.primary.main }}
+            />
+          }
+        />
+      ))}
+    </FieldOrEmpty>
   );
 };
 

diff --git a/opencti-platform/opencti-front/src/components/ItemParticipants.tsx b/opencti-platform/opencti-front/src/components/ItemParticipants.tsx
@@ -1,6 +1,12 @@
 import React, { FunctionComponent } from 'react';
-import Button from '@mui/material/Button';
 import FieldOrEmpty from './FieldOrEmpty';
+import { useTheme } from '@mui/styles';
+import type { Theme } from './Theme';
+import useGranted, { KNOWLEDGE_KNUPDATE } from '../utils/hooks/useGranted';
+import { truncate } from '../utils/String';
+import { hexToRGB } from '../utils/Colors';
+import { CancelOutlined } from '@mui/icons-material';
+import Chip from '@mui/material/Chip';
 
 interface ItemParticipantsProps {
   participants: {
@@ -11,18 +17,33 @@ interface ItemParticipantsProps {
 }
 
 const ItemParticipants: FunctionComponent<ItemParticipantsProps> = ({ participants }) => {
+  const theme = useTheme<Theme>();
+  const canUpdateKnowledge = useGranted([KNOWLEDGE_KNUPDATE]);
+  const handleRemoveParticipant = (participantId: string) => {
+    console.log(participantId);
+    // TODO : Mutation
+  };
   return (
     <FieldOrEmpty source={participants}>
       {participants.map((participant) => (
-        <Button
+        <Chip
           key={participant.id}
           variant="outlined"
-          color="primary"
-          size="small"
-          style={{ margin: '0 7px 7px 0', cursor: 'default' }}
-        >
-          {participant.name}
-        </Button>
+          label={truncate(participant.name, 25)}
+          style={{
+            color: theme.palette.primary.main,
+            borderColor: theme.palette.primary.main,
+            backgroundColor: hexToRGB(theme.palette.primary.main),
+            margin: '0 7px 7px 0',
+            borderRadius: theme.borderRadius,
+          }}
+          onDelete={canUpdateKnowledge ? () => (handleRemoveParticipant(participant.id)) : undefined}
+          deleteIcon={
+            <CancelOutlined
+              style={{ color: theme.palette.primary.main }}
+            />
+          }
+        />
       ))}
     </FieldOrEmpty>
   );

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
@@ -15,7 +15,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import IconButton from '@mui/material/IconButton';
-import { BrushOutlined, Delete } from '@mui/icons-material';
+import { Add, BrushOutlined, Delete } from '@mui/icons-material';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import StixCoreObjectOpinions from '../../analyses/opinions/StixCoreObjectOpinions';
@@ -37,6 +37,11 @@ import ItemAssignees from '../../../../components/ItemAssignees';
 import ItemOpenVocab from '../../../../components/ItemOpenVocab';
 import ItemParticipants from '../../../../components/ItemParticipants';
 import Transition from '../../../../components/Transition';
+import { Formik } from 'formik';
+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';
 
 const styles = (theme) => ({
   paper: {
@@ -69,13 +74,35 @@ class StixDomainObjectOverview extends Component {
     super(props);
     this.state = {
       openStixIds: false,
+      openAddAssignee: false,
+      openAddParticipant: false,
     };
   }
 
   handleToggleOpenStixIds() {
     this.setState({ openStixIds: !this.state.openStixIds });
   }
 
+  handleToggleAddAssignee() {
+    this.setState({ openAddAssignee: !this.state.openAddAssignee });
+  }
+
+  handleToggleAddParticipant() {
+    this.setState({ openAddParticipant: !this.state.openAddParticipant });
+  }
+
+  onSubmitAssignees(values) {
+    console.log(values);
+    // TODO : Mutation
+    this.handleToggleAddAssignee();
+  }
+
+  onSubmitParticipant(values) {
+    console.log(values);
+    // TODO : Mutation
+    this.handleToggleAddParticipant();
+  }
+
   deleteStixId(stixId) {
     const { stixDomainObject } = this.props;
     const otherStixIds = stixDomainObject.x_opencti_stix_ids || [];
@@ -118,6 +145,12 @@ class StixDomainObjectOverview extends Component {
     const reliability = isReliabilityOfSource
       ? stixDomainObject.createdBy?.x_opencti_reliability
       : stixDomainObject.x_opencti_reliability;
+
+    const initialValues = {
+      objectAssignee: convertAssignees(stixDomainObject),
+      objectParticipant: convertParticipants(stixDomainObject),
+    };
+
     return (
       <>
         <Typography variant="h4">
@@ -243,8 +276,16 @@ class StixDomainObjectOverview extends Component {
                     style={{ marginTop: 20 }}
                   >
                     {t('Assignees')}
+                    <IconButton
+                      color="primary"
+                      aria-label={t('Add new assignees')}
+                      title={t('Add new assignees')}
+                      onClick={this.handleToggleAddAssignee.bind(this)}
+                    >
+                      <Add fontSize="small" />
+                    </IconButton>
                   </Typography>
-                  <ItemAssignees assignees={stixDomainObject.objectAssignee ?? []}/>
+                  <ItemAssignees assignees={stixDomainObject.objectAssignee ?? []} />
                 </div>
               )}
               {displayParticipants && (
@@ -255,6 +296,14 @@ class StixDomainObjectOverview extends Component {
                     style={{ marginTop: 20 }}
                   >
                     {t('Participants')}
+                    <IconButton
+                      color="primary"
+                      aria-label={t('Add new participant')}
+                      title={t('Add new participant')}
+                      onClick={this.handleToggleAddParticipant.bind(this)}
+                    >
+                      <Add fontSize="small" />
+                    </IconButton>
                   </Typography>
                   <ItemParticipants participants={stixDomainObject.objectParticipant ?? []}/>
                 </div>
@@ -374,6 +423,78 @@ class StixDomainObjectOverview extends Component {
             </Button>
           </DialogActions>
         </Dialog>
+        <Formik
+          initialValues={initialValues}
+          onSubmit={this.onSubmitAssignees.bind(this)}
+          onReset={this.handleToggleAddAssignee.bind(this)}
+        >
+          {({ submitForm }) => (
+            <Dialog
+              PaperProps={{ elevation: 1 }}
+              open={this.state.openAddAssignee}
+              TransitionComponent={Transition}
+              onClose={this.handleToggleAddAssignee.bind(this)}
+              fullWidth={true}
+            >
+              <DialogTitle>{t('Add new Assignees')}</DialogTitle>
+              <DialogContent>
+                <ObjectAssigneeField
+                  name="objectAssignee"
+                  style={fieldSpacingContainerStyle}
+                />
+              </DialogContent>
+              <DialogActions>
+                <Button
+                  onClick={this.handleToggleAddAssignee.bind(this)}
+                >
+                  {t('Close')}
+                </Button>
+                <Button
+                  onClick={submitForm}
+                  color="secondary"
+                >
+                  {t('Add')}
+                </Button>
+              </DialogActions>
+            </Dialog>
+          )}
+        </Formik>
+        <Formik
+          initialValues={initialValues}
+          onSubmit={this.onSubmitParticipant.bind(this)}
+          onReset={this.handleToggleAddParticipant.bind(this)}
+        >
+          {({ submitForm }) => (
+            <Dialog
+              PaperProps={{ elevation: 1 }}
+              open={this.state.openAddParticipant}
+              TransitionComponent={Transition}
+              onClose={this.handleToggleAddParticipant.bind(this)}
+              fullWidth={true}
+            >
+              <DialogTitle>{t('Add new Participant')}</DialogTitle>
+              <DialogContent>
+                <ObjectParticipantField
+                  name="objectParticipant"
+                  style={fieldSpacingContainerStyle}
+                />
+              </DialogContent>
+              <DialogActions>
+                <Button
+                  onClick={this.handleToggleAddParticipant.bind(this)}
+                >
+                  {t('Close')}
+                </Button>
+                <Button
+                  onClick={submitForm}
+                  color="secondary"
+                >
+                  {t('Add')}
+                </Button>
+              </DialogActions>
+            </Dialog>
+          )}
+        </Formik>
       </>
     );
   }