[frontend] uniformize Assignee Participant and Labels (#4333)

OpenCTI-Platform · Sep 27, 2024 · 7f4f88c · 7f4f88c
1 parent d450f45
commit 7f4f88c
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 113 deletions.
diff --git a/opencti-platform/opencti-front/src/components/ItemAssignees.tsx b/opencti-platform/opencti-front/src/components/ItemAssignees.tsx
@@ -9,6 +9,7 @@ import useGranted, { KNOWLEDGE_KNUPDATE } from '../utils/hooks/useGranted';
 import type { Theme } from './Theme';
 import FieldOrEmpty from './FieldOrEmpty';
 import { commitMutation, defaultCommitMutation } from '../relay/environment';
+import Tooltip from '@mui/material/Tooltip';
 
 type Node = {
   readonly entity_type: string;
@@ -42,24 +43,26 @@ const ItemAssignees: FunctionComponent<Props> = ({ assignees, stixDomainObjectId
   return (
     <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 }}
-            />
-          }
-        />
+        <Tooltip title={assignee.name}>
+          <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 }}
+              />
+            }
+          />
+        </Tooltip>
       ))}
     </FieldOrEmpty>
   );

diff --git a/opencti-platform/opencti-front/src/components/ItemParticipants.tsx b/opencti-platform/opencti-front/src/components/ItemParticipants.tsx
@@ -9,6 +9,7 @@ import useGranted, { KNOWLEDGE_KNUPDATE } from '../utils/hooks/useGranted';
 import { truncate } from '../utils/String';
 import { hexToRGB } from '../utils/Colors';
 import { commitMutation, defaultCommitMutation } from '../relay/environment';
+import Tooltip from '@mui/material/Tooltip';
 
 interface ItemParticipantsProps {
   participants: {
@@ -40,24 +41,26 @@ const ItemParticipants: FunctionComponent<ItemParticipantsProps> = ({ participan
   return (
     <FieldOrEmpty source={participants}>
       {participants.map((participant) => (
-        <Chip
-          key={participant.id}
-          variant="outlined"
-          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 }}
-            />
-          }
-        />
+        <Tooltip title={participant.name}>
+          <Chip
+            key={participant.id}
+            variant="outlined"
+            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 }}
+              />
+            }
+          />
+        </Tooltip>
       ))}
     </FieldOrEmpty>
   );

diff --git a/...mon/stix_core_objects_or_stix_relationships/StixCoreObjectOrCoreRelationshipLabelsView.js b/...mon/stix_core_objects_or_stix_relationships/StixCoreObjectOrCoreRelationshipLabelsView.js
@@ -26,6 +26,7 @@ import { truncate } from '../../../../utils/String';
 import useGranted, { KNOWLEDGE_KNUPDATE, SETTINGS_SETLABELS } from '../../../../utils/hooks/useGranted';
 import CommitMessage from '../form/CommitMessage';
 import Transition from '../../../../components/Transition';
+import FieldOrEmpty from '../../../../components/FieldOrEmpty';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -151,51 +152,54 @@ const StixCoreObjectOrCoreRelationshipLabelsView = (props) => {
   const onReset = () => setOpenAdd(false);
 
   return (
-    <div style={{ marginTop: marginTop || 0 }}>
-      <Typography variant="h3" gutterBottom={true} style={{ float: 'left' }}>
-        {t_i18n('Labels')}
-      </Typography>
-      <Security needs={[KNOWLEDGE_KNUPDATE]}>
-        <IconButton
-          color="primary"
-          aria-label={t_i18n('Add new labels')}
-          title={t_i18n('Add new labels')}
-          onClick={handleOpenAdd}
-          style={{ float: 'left', margin: '-15px 0 0 -2px' }}
-          size="large"
-        >
-          <Add fontSize="small" />
-        </IconButton>
-      </Security>
-      <div className="clearfix" />
+    <>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <Typography variant="h3" gutterBottom={true} style={{ marginTop: 20 }}>
+          {t_i18n('Labels')}
+        </Typography>
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
+          <IconButton
+            color="primary"
+            aria-label={t_i18n('Add new labels')}
+            title={t_i18n('Add new labels')}
+            onClick={handleOpenAdd}
+            style={{ margin: '0 0 -14px 0' }}
+            size="large"
+          >
+            <Add fontSize="small" />
+          </IconButton>
+        </Security>
+      </div>
       <div className={classes.objectLabel}>
-        {map(
-          (label) => (
-            <Tooltip title={label.value}>
-              <Chip
-                key={label.id}
-                variant="outlined"
-                classes={{ root: classes.label }}
-                label={truncate(label.value, 25)}
-                style={{
-                  color: label.color,
-                  borderColor: label.color,
-                  backgroundColor: hexToRGB(label.color),
-                }}
-                onDelete={canUpdateKnowledge ? () => (enableReferences
-                  ? handleOpenCommitDelete(label)
-                  : handleRemoveLabel(label.id)) : undefined}
-                deleteIcon={
-                  <CancelOutlined
-                    className={classes.deleteIcon}
-                    style={{ color: label.color }}
-                  />
-                }
-              />
-            </Tooltip>
-          ),
-          (labels ?? []),
-        )}
+        <FieldOrEmpty source={labels}>
+          {map(
+            (label) => (
+              <Tooltip title={label.value}>
+                <Chip
+                  key={label.id}
+                  variant="outlined"
+                  classes={{ root: classes.label }}
+                  label={truncate(label.value, 25)}
+                  style={{
+                    color: label.color,
+                    borderColor: label.color,
+                    backgroundColor: hexToRGB(label.color),
+                  }}
+                  onDelete={canUpdateKnowledge ? () => (enableReferences
+                    ? handleOpenCommitDelete(label)
+                    : handleRemoveLabel(label.id)) : undefined}
+                  deleteIcon={
+                    <CancelOutlined
+                      className={classes.deleteIcon}
+                      style={{ color: label.color }}
+                    />
+                  }
+                />
+              </Tooltip>
+            ),
+            (labels ?? []),
+          )}
+        </FieldOrEmpty>
         {enableReferences && (
           <Formik initialValues={{}} onSubmit={onSubmitDeleteLabel}>
             {({ submitForm, isSubmitting, setFieldValue, values }) => (
@@ -303,7 +307,7 @@ const StixCoreObjectOrCoreRelationshipLabelsView = (props) => {
           </Dialog>
         )}
       </Formik>
-    </div>
+    </>
   );
 };
 

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
@@ -300,44 +300,56 @@ class StixDomainObjectOverview extends Component {
                 disabled={!stixDomainObject.workflowEnabled}
               />
               {displayAssignees && (
-                <div>
-                  <Typography
-                    variant="h3"
-                    gutterBottom={true}
-                    style={{ marginTop: 20 }}
-                  >
-                    {t('Assignees')}
-                    <IconButton
-                      color="primary"
-                      aria-label={t('Add new assignees')}
-                      title={t('Add new assignees')}
-                      onClick={this.handleToggleAddAssignee.bind(this)}
+                <>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <Typography
+                      variant="h3"
+                      gutterBottom={true}
+                      style={{ marginTop: 20 }}
                     >
-                      <Add fontSize="small" />
-                    </IconButton>
-                  </Typography>
+                      {t('Assignees')}
+                    </Typography>
+                    <Security needs={[KNOWLEDGE_KNUPDATE]}>
+                      <IconButton
+                        color="primary"
+                        aria-label={t('Add new assignees')}
+                        title={t('Add new assignees')}
+                        onClick={this.handleToggleAddAssignee.bind(this)}
+                        style={{ margin: '0 0 -14px 0' }}
+                        size="large"
+                      >
+                        <Add fontSize="small" />
+                      </IconButton>
+                    </Security>
+                  </div>
                   <ItemAssignees assignees={stixDomainObject.objectAssignee ?? []} stixDomainObjectId={stixDomainObject.id} />
-                </div>
+                </>
               )}
               {displayParticipants && (
-                <div>
-                  <Typography
-                    variant="h3"
-                    gutterBottom={true}
-                    style={{ marginTop: 20 }}
-                  >
-                    {t('Participants')}
-                    <IconButton
-                      color="primary"
-                      aria-label={t('Add new participant')}
-                      title={t('Add new participant')}
-                      onClick={this.handleToggleAddParticipant.bind(this)}
+                <>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <Typography
+                      variant="h3"
+                      gutterBottom={true}
+                      style={{ marginTop: 20 }}
                     >
-                      <Add fontSize="small" />
-                    </IconButton>
-                  </Typography>
+                      {t('Participants')}
+                    </Typography>
+                    <Security needs={[KNOWLEDGE_KNUPDATE]}>
+                      <IconButton
+                        color="primary"
+                        aria-label={t('Add new participant')}
+                        title={t('Add new participant')}
+                        onClick={this.handleToggleAddParticipant.bind(this)}
+                        style={{ margin: '0 0 -14px 0' }}
+                        size="large"
+                      >
+                        <Add fontSize="small" />
+                      </IconButton>
+                    </Security>
+                  </div>
                   <ItemParticipants participants={stixDomainObject.objectParticipant ?? []} stixDomainObjectId={stixDomainObject.id} />
-                </div>
+                </>
               )}
               <Typography
                 variant="h3"