Skip to content

Commit 1555b53

Browse files
lndrtrbnlndrtrbn
authored
[Frontend] Improve consistency in entities headers (#13454)
1 parent a268299 commit 1555b53

File tree

23 files changed

+414
-490
lines changed

23 files changed

+414
-490
lines changed

‎opencti-platform/opencti-front/src/components/Breadcrumbs.tsx‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,35 @@ const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, noMargin =
2222
const theme = useTheme<Theme>();
2323

2424
const SplitDiv = ({ show = true }) => (
25-
<div style={{ display: show ? 'none' : 'unset', marginLeft: theme.spacing(1), marginRight: theme.spacing(1) }}>/</div>
25+
<div
26+
style={{
27+
display: show ? 'none' : 'unset',
28+
marginLeft: theme.spacing(1),
29+
marginRight: theme.spacing(1),
30+
}}
31+
>/
32+
</div>
2633
);
2734

2835
return (
2936
<div
3037
id="page-breadcrumb"
3138
data-testid="navigation"
32-
style={{ marginBottom: noMargin ? undefined : theme.spacing(2), display: 'flex' }}
39+
style={{
40+
marginBottom: noMargin ? undefined : theme.spacing(1),
41+
display: 'flex',
42+
alignItems: 'center',
43+
}}
3344
>
3445
{elements.map((element, index) => {
3546
if (element.current) {
3647
return (
3748
<span key={element.label} style={{ display: 'flex', alignItems: 'center' }}>
3849
<Typography
50+
sx={{ fontSize: 12, fontWeight: 700 }}
3951
color="text.primary"
4052
>
41-
{truncate(element.label, 30, false)}
53+
{truncate(element.label, 50, false)}
4254
</Typography>
4355
<SplitDiv show={index === elements.length - 1} />
4456
{isSensitive && <DangerZoneChip />}
@@ -48,14 +60,23 @@ const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, noMargin =
4860
if (!element.link) {
4961
return (
5062
<Fragment key={element.label}>
51-
<Typography color="common.lightGrey">{truncate(element.label, 30, false)}</Typography>
63+
<Typography
64+
sx={{ fontSize: 12 }}
65+
color="common.lightGrey"
66+
>
67+
{truncate(element.label, 30, false)}
68+
</Typography>
5269
<SplitDiv show={index === elements.length - 1} />
5370
</Fragment>
5471
);
5572
}
5673
return (
5774
<Fragment key={element.label}>
58-
<Link to={element.link}>{truncate(element.label, 30, false)}</Link>
75+
<Link
76+
style={{ fontSize: 12 }}
77+
to={element.link}
78+
>{truncate(element.label, 30, false)}
79+
</Link>
5980
<SplitDiv show={index === elements.length - 1} />
6081
</Fragment>
6182
);

‎opencti-platform/opencti-front/src/components/common/typography/TitleMainEntity.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { PropsWithChildren } from 'react';
2+
import { Typography } from '@mui/material';
3+
import { PropsWithSx } from '../../../utils/props';
4+
5+
type TitleMainEntityProps = PropsWithChildren & PropsWithSx;
6+
7+
const TitleMainEntity = ({ children, sx }: TitleMainEntityProps) => {
8+
return (
9+
<Typography
10+
variant="h1"
11+
sx={{
12+
marginBottom: 0,
13+
lineHeight: '36px',
14+
fontSize: 28,
15+
...sx,
16+
}}
17+
>
18+
{children}
19+
</Typography>
20+
);
21+
};
22+
23+
export default TitleMainEntity;

‎opencti-platform/opencti-front/src/private/components/analyses/external_references/ExternalReferenceHeader.tsx‎

Lines changed: 30 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React, { useState } from 'react';
22
import { createFragmentContainer, graphql } from 'react-relay';
3-
import Typography from '@mui/material/Typography';
4-
import makeStyles from '@mui/styles/makeStyles';
5-
import { Box } from '@mui/material';
3+
import { Box, Stack } from '@mui/material';
64
import MenuItem from '@mui/material/MenuItem';
75
import ExternalReferenceDeletion from '@components/analyses/external_references/ExternalReferenceDeletion';
86
import { truncate } from '../../../../utils/String';
@@ -11,14 +9,7 @@ import PopoverMenu from '../../../../components/PopoverMenu';
119
import { useFormatter } from '../../../../components/i18n';
1210
import useGranted, { KNOWLEDGE_KNUPDATE_KNDELETE } from '../../../../utils/hooks/useGranted';
1311
import Security from '../../../../utils/Security';
14-
15-
// Deprecated - https://mui.com/system/styles/basics/
16-
// Do not use it for new code.
17-
const useStyles = makeStyles(() => ({
18-
title: {
19-
float: 'left',
20-
},
21-
}));
12+
import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity';
2213

2314
interface ExternalReferenceHeaderComponentProps {
2415
externalReference: ExternalReferenceHeader_externalReference$data;
@@ -29,55 +20,43 @@ const ExternalReferenceHeaderComponent = ({
2920
externalReference,
3021
EditComponent,
3122
}: ExternalReferenceHeaderComponentProps) => {
32-
const classes = useStyles();
3323
const canDelete = useGranted([KNOWLEDGE_KNUPDATE_KNDELETE]);
3424
const { t_i18n } = useFormatter();
3525
const [openDelete, setOpenDelete] = useState(false);
3626
const handleOpenDelete = () => setOpenDelete(true);
3727
const handleCloseDelete = () => setOpenDelete(false);
3828

3929
return (
40-
<div
41-
style={{
42-
display: 'inline-flex',
43-
justifyContent: 'space-between',
44-
width: '100%',
45-
}}
46-
>
30+
<Stack direction="row" justifyContent="space-between" marginBottom={3}>
31+
<TitleMainEntity>
32+
{truncate(externalReference.source_name, 80)}
33+
</TitleMainEntity>
4734
<div>
48-
<Typography
49-
variant="h1"
50-
gutterBottom={true}
51-
classes={{ root: classes.title }}
52-
>
53-
{truncate(externalReference.source_name, 80)}
54-
</Typography>
55-
<div className="clearfix" />
56-
</div>
57-
<div style={{ display: 'flex', alignItems: 'center' }}>
58-
<div style={{ display: 'flex' }}>
59-
{canDelete && (
60-
<PopoverMenu>
61-
{({ closeMenu }) => (
62-
<Box>
63-
<MenuItem onClick={() => {
64-
handleOpenDelete();
65-
closeMenu();
66-
}}
67-
>
68-
{t_i18n('Delete')}
69-
</MenuItem>
70-
</Box>
71-
)}
72-
</PopoverMenu>
73-
)}
74-
{EditComponent}
75-
<Security needs={[KNOWLEDGE_KNUPDATE_KNDELETE]}>
76-
<ExternalReferenceDeletion id={externalReference.id} isOpen={openDelete} handleClose={handleCloseDelete} />
77-
</Security>
78-
</div>
35+
{canDelete && (
36+
<PopoverMenu>
37+
{({ closeMenu }) => (
38+
<Box>
39+
<MenuItem onClick={() => {
40+
handleOpenDelete();
41+
closeMenu();
42+
}}
43+
>
44+
{t_i18n('Delete')}
45+
</MenuItem>
46+
</Box>
47+
)}
48+
</PopoverMenu>
49+
)}
50+
{EditComponent}
51+
<Security needs={[KNOWLEDGE_KNUPDATE_KNDELETE]}>
52+
<ExternalReferenceDeletion
53+
id={externalReference.id}
54+
isOpen={openDelete}
55+
handleClose={handleCloseDelete}
56+
/>
57+
</Security>
7958
</div>
80-
</div>
59+
</Stack>
8160
);
8261
};
8362

‎opencti-platform/opencti-front/src/private/components/chatbox/ChatbotManager.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,13 @@ class ChatbotManager {
7272
div[part="bot"] > div > div > div > div > div {
7373
border: 0 !important;
7474
}
75+
div[part="bot"] > div > div > div > figure {
76+
width: 24px !important;
77+
height: 24px !important;
78+
}
79+
div[part="bot"] > div > div > div:first-child > div:first-child {
80+
width: 5px !important;
81+
}
7582
`,
7683
chatWindow: {
7784
showTitle: true,

‎opencti-platform/opencti-front/src/private/components/common/containers/ContainerHeader.jsx‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState } from 'react';
22
import { createFragmentContainer, graphql, useLazyLoadQuery } from 'react-relay';
3-
import Typography from '@mui/material/Typography';
43
import { Link, useNavigate } from 'react-router-dom';
54
import Tooltip from '@mui/material/Tooltip';
65
import { ChartTimeline, VectorLink, VectorPolygon } from 'mdi-material-ui';
@@ -43,6 +42,7 @@ import PopoverMenu from '../../../../components/PopoverMenu';
4342
import useAuth from '../../../../utils/hooks/useAuth';
4443
import useDraftContext from '../../../../utils/hooks/useDraftContext';
4544
import { useSettingsMessagesBannerHeight } from '../../settings/settings_messages/SettingsMessagesBanner';
45+
import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity';
4646

4747
export const containerHeaderObjectsQuery = graphql`
4848
query ContainerHeaderObjectsQuery($id: String!) {
@@ -499,7 +499,7 @@ const ContainerHeader = (props) => {
499499
display: 'flex',
500500
justifyContent: 'space-between',
501501
alignItems: 'center',
502-
marginBottom: theme.spacing(1),
502+
marginBottom: theme.spacing(3),
503503
};
504504
const overrideContainerStyle = knowledge || currentMode === 'graph' || currentMode === 'correlation';
505505
if (overrideContainerStyle) {
@@ -557,32 +557,21 @@ const ContainerHeader = (props) => {
557557
|| (displayAuthorizedMembers && !displayAuthorizedMembersButton)
558558
|| (displayEnrollPlaybook && !displayEnrollPlaybookButton) || (!knowledge && canDelete);
559559

560+
const title = container.name
561+
|| container.attribute_abstract
562+
|| container.content
563+
|| container.opinion
564+
|| `${fd(container.first_observed)} - ${fd(container.last_observed)}`;
565+
560566
return (
561567
<div style={containerStyle}>
562568
<React.Suspense fallback={<span />}>
563569
{!knowledge && (
564570
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
565-
<Tooltip
566-
title={
567-
container.name
568-
|| container.attribute_abstract
569-
|| container.content
570-
|| container.opinion
571-
|| `${fd(container.first_observed)} - ${fd(container.last_observed)}`
572-
}
573-
>
574-
<Typography variant="h1" sx={{ margin: 0, lineHeight: 'unset' }}>
575-
{truncate(
576-
container.name
577-
|| container.attribute_abstract
578-
|| container.content
579-
|| container.opinion
580-
|| `${fd(container.first_observed)} - ${fd(
581-
container.last_observed,
582-
)}`,
583-
80,
584-
)}
585-
</Typography>
571+
<Tooltip title={title}>
572+
<TitleMainEntity>
573+
{truncate(title, 80)}
574+
</TitleMainEntity>
586575
</Tooltip>
587576
{container.draftVersion && (
588577
<DraftChip />

‎opencti-platform/opencti-front/src/private/components/common/files/workbench/WorkbenchFileContent.jsx‎

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { useNavigate } from 'react-router-dom';
2626
import { v4 as uuid } from 'uuid';
2727
import * as Yup from 'yup';
2828
import Alert from '@mui/material/Alert';
29-
import { ListItemButton } from '@mui/material';
29+
import { ListItemButton, Stack } from '@mui/material';
3030
import ListItem from '@mui/material/ListItem';
3131
import DateTimePickerField from '../../../../../components/DateTimePickerField';
3232
import { useFormatter } from '../../../../../components/i18n';
@@ -66,21 +66,14 @@ import Security from '../../../../../utils/Security';
6666
import DeleteDialog from '../../../../../components/DeleteDialog';
6767
import useDeletion from '../../../../../utils/hooks/useDeletion';
6868
import Breadcrumbs from '../../../../../components/Breadcrumbs';
69+
import TitleMainEntity from '../../../../../components/common/typography/TitleMainEntity';
6970

7071
// Deprecated - https://mui.com/system/styles/basics/
7172
// Do not use it for new code.
7273
const useStyles = makeStyles((theme) => ({
7374
container: {
7475
margin: 0,
7576
},
76-
title: {
77-
float: 'left',
78-
textTransform: 'uppercase',
79-
},
80-
popover: {
81-
float: 'left',
82-
marginTop: '-13px',
83-
},
8477
createButton: {
8578
position: 'fixed',
8679
bottom: 30,
@@ -4181,18 +4174,12 @@ const WorkbenchFileContentComponent = ({
41814174
{ label: fileName, current: true },
41824175
]}
41834176
/>
4184-
<Typography
4185-
variant="h1"
4186-
gutterBottom={true}
4187-
classes={{ root: classes.title }}
4188-
>
4189-
{fileName}
4190-
</Typography>
4191-
<div className={classes.popover}>
4177+
<Stack direction="row" alignItems="center" gap={1} marginBottom={3}>
4178+
<TitleMainEntity sx={{ flex: 1 }}>
4179+
{fileName}
4180+
</TitleMainEntity>
41924181
<WorkbenchFilePopover file={file} />
4193-
</div>
4194-
<Security needs={[KNOWLEDGE_KNUPDATE]}>
4195-
<div style={{ float: 'right', display: 'flex', gap: 10 }}>
4182+
<Security needs={[KNOWLEDGE_KNUPDATE]}>
41964183
<Button
41974184
variant="secondary"
41984185
onClick={handleOpenConvertToDraft}
@@ -4206,9 +4193,9 @@ const WorkbenchFileContentComponent = ({
42064193
>
42074194
{t_i18n('Validate this workbench')}
42084195
</Button>
4209-
</div>
4210-
</Security>
4211-
<div className="clearfix" />
4196+
</Security>
4197+
</Stack>
4198+
42124199
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
42134200
<Tabs value={currentTab} onChange={handleChangeTab}>
42144201
<Tab label={`${t_i18n('Entities')} (${stixDomainObjects.length})`} />

‎opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectHeader.jsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
22
import { Field, Form, Formik } from 'formik';
33
import { graphql, useLazyLoadQuery } from 'react-relay';
44
import Chip from '@mui/material/Chip';
5-
import Typography from '@mui/material/Typography';
65
import IconButton from '@common/button/IconButton';
76
import Slide from '@mui/material/Slide';
87
import Tooltip from '@mui/material/Tooltip';
@@ -61,6 +60,7 @@ import PopoverMenu from '../../../../components/PopoverMenu';
6160
import { resolveLink } from '../../../../utils/Entity';
6261
import { authorizedMembersToOptions, CAN_USE_ENTITY_TYPES, useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers';
6362
import useDraftContext from '../../../../utils/hooks/useDraftContext';
63+
import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity';
6464

6565
export const stixDomainObjectMutation = graphql`
6666
mutation StixDomainObjectHeaderFieldMutation(
@@ -480,18 +480,12 @@ const StixDomainObjectHeader = (props) => {
480480

481481
return (
482482
<React.Suspense fallback={<span />}>
483-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: theme.spacing(1) }}>
483+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: theme.spacing(3) }}>
484484
<div style={{ display: 'flex', alignItems: 'center', gap: theme.spacing(1) }}>
485485
<Tooltip title={getMainRepresentative(stixDomainObject)}>
486-
<Typography
487-
variant="h1"
488-
sx={{
489-
margin: 0,
490-
lineHeight: 'unset',
491-
}}
492-
>
486+
<TitleMainEntity>
493487
{truncate(getMainRepresentative(stixDomainObject), 80)}
494-
</Typography>
488+
</TitleMainEntity>
495489
</Tooltip>
496490
{stixDomainObject.draftVersion && (
497491
<DraftChip />

0 commit comments

Comments
 (0)