Skip to content

[Frontend] Improve consistency in entities headers (#13454) #13924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lndrtrbn merged 2 commits into from
Jan 7, 2026
Merged

[Frontend] Improve consistency in entities headers (#13454) #13924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9021924
wip headers
lndrtrbn Jan 6, 2026
72ce55b
finish headers
lndrtrbn Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 26 additions & 5 deletions opencti-platform/opencti-front/src/components/Breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,35 @@ const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, noMargin =
const theme = useTheme<Theme>();

const SplitDiv = ({ show = true }) => (
<div style={{ display: show ? 'none' : 'unset', marginLeft: theme.spacing(1), marginRight: theme.spacing(1) }}>/</div>
<div
style={{
display: show ? 'none' : 'unset',
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
}}
>/
</div>
);

return (
<div
id="page-breadcrumb"
data-testid="navigation"
style={{ marginBottom: noMargin ? undefined : theme.spacing(2), display: 'flex' }}
style={{
marginBottom: noMargin ? undefined : theme.spacing(1),
display: 'flex',
alignItems: 'center',
}}
>
{elements.map((element, index) => {
if (element.current) {
return (
<span key={element.label} style={{ display: 'flex', alignItems: 'center' }}>
<Typography
sx={{ fontSize: 12, fontWeight: 700 }}
color="text.primary"
>
{truncate(element.label, 30, false)}
{truncate(element.label, 50, false)}
</Typography>
<SplitDiv show={index === elements.length - 1} />
{isSensitive && <DangerZoneChip />}
Expand All @@ -48,14 +60,23 @@ const Breadcrumbs: FunctionComponent<BreadcrumbsProps> = ({ elements, noMargin =
if (!element.link) {
return (
<Fragment key={element.label}>
<Typography color="common.lightGrey">{truncate(element.label, 30, false)}</Typography>
<Typography
sx={{ fontSize: 12 }}
color="common.lightGrey"
>
{truncate(element.label, 30, false)}
</Typography>
<SplitDiv show={index === elements.length - 1} />
</Fragment>
);
}
return (
<Fragment key={element.label}>
<Link to={element.link}>{truncate(element.label, 30, false)}</Link>
<Link
style={{ fontSize: 12 }}
to={element.link}
>{truncate(element.label, 30, false)}
</Link>
<SplitDiv show={index === elements.length - 1} />
</Fragment>
);
Expand Down
23 changes: 23 additions & 0 deletions opencti-platform/opencti-front/src/components/common/typography/TitleMainEntity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { PropsWithChildren } from 'react';
import { Typography } from '@mui/material';
import { PropsWithSx } from '../../../utils/props';

type TitleMainEntityProps = PropsWithChildren & PropsWithSx;

const TitleMainEntity = ({ children, sx }: TitleMainEntityProps) => {
return (
<Typography
variant="h1"
sx={{
marginBottom: 0,
lineHeight: '36px',
fontSize: 28,
...sx,
}}
>
{children}
</Typography>
);
};

export default TitleMainEntity;
81 changes: 30 additions & 51 deletions ...cti-front/src/private/components/analyses/external_references/ExternalReferenceHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React, { useState } from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import Typography from '@mui/material/Typography';
import makeStyles from '@mui/styles/makeStyles';
import { Box } from '@mui/material';
import { Box, Stack } from '@mui/material';
import MenuItem from '@mui/material/MenuItem';
import ExternalReferenceDeletion from '@components/analyses/external_references/ExternalReferenceDeletion';
import { truncate } from '../../../../utils/String';
Expand All @@ -11,14 +9,7 @@ import PopoverMenu from '../../../../components/PopoverMenu';
import { useFormatter } from '../../../../components/i18n';
import useGranted, { KNOWLEDGE_KNUPDATE_KNDELETE } from '../../../../utils/hooks/useGranted';
import Security from '../../../../utils/Security';

// Deprecated - https://mui.com/system/styles/basics/
// Do not use it for new code.
const useStyles = makeStyles(() => ({
title: {
float: 'left',
},
}));
import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity';

interface ExternalReferenceHeaderComponentProps {
externalReference: ExternalReferenceHeader_externalReference$data;
Expand All @@ -29,55 +20,43 @@ const ExternalReferenceHeaderComponent = ({
externalReference,
EditComponent,
}: ExternalReferenceHeaderComponentProps) => {
const classes = useStyles();
const canDelete = useGranted([KNOWLEDGE_KNUPDATE_KNDELETE]);
const { t_i18n } = useFormatter();
const [openDelete, setOpenDelete] = useState(false);
const handleOpenDelete = () => setOpenDelete(true);
const handleCloseDelete = () => setOpenDelete(false);

return (
<div
style={{
display: 'inline-flex',
justifyContent: 'space-between',
width: '100%',
}}
>
<Stack direction="row" justifyContent="space-between" marginBottom={3}>
<TitleMainEntity>
{truncate(externalReference.source_name, 80)}
</TitleMainEntity>
<div>
<Typography
variant="h1"
gutterBottom={true}
classes={{ root: classes.title }}
>
{truncate(externalReference.source_name, 80)}
</Typography>
<div className="clearfix" />
</div>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ display: 'flex' }}>
{canDelete && (
<PopoverMenu>
{({ closeMenu }) => (
<Box>
<MenuItem onClick={() => {
handleOpenDelete();
closeMenu();
}}
>
{t_i18n('Delete')}
</MenuItem>
</Box>
)}
</PopoverMenu>
)}
{EditComponent}
<Security needs={[KNOWLEDGE_KNUPDATE_KNDELETE]}>
<ExternalReferenceDeletion id={externalReference.id} isOpen={openDelete} handleClose={handleCloseDelete} />
</Security>
</div>
{canDelete && (
<PopoverMenu>
{({ closeMenu }) => (
<Box>
<MenuItem onClick={() => {
handleOpenDelete();
closeMenu();
}}
>
{t_i18n('Delete')}
</MenuItem>
</Box>
)}
</PopoverMenu>
)}
{EditComponent}
<Security needs={[KNOWLEDGE_KNUPDATE_KNDELETE]}>
<ExternalReferenceDeletion
id={externalReference.id}
isOpen={openDelete}
handleClose={handleCloseDelete}
/>
</Security>
</div>
</div>
</Stack>
);
};

Expand Down
7 changes: 7 additions & 0 deletions opencti-platform/opencti-front/src/private/components/chatbox/ChatbotManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,13 @@ class ChatbotManager {
div[part="bot"] > div > div > div > div > div {
border: 0 !important;
}
div[part="bot"] > div > div > div > figure {
width: 24px !important;
height: 24px !important;
}
div[part="bot"] > div > div > div:first-child > div:first-child {
width: 5px !important;
}
`,
chatWindow: {
showTitle: true,
Expand Down
35 changes: 12 additions & 23 deletions opencti-platform/opencti-front/src/private/components/common/containers/ContainerHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { createFragmentContainer, graphql, useLazyLoadQuery } from 'react-relay';
import Typography from '@mui/material/Typography';
import { Link, useNavigate } from 'react-router-dom';
import Tooltip from '@mui/material/Tooltip';
import { ChartTimeline, VectorLink, VectorPolygon } from 'mdi-material-ui';
Expand Down Expand Up @@ -43,6 +42,7 @@ import PopoverMenu from '../../../../components/PopoverMenu';
import useAuth from '../../../../utils/hooks/useAuth';
import useDraftContext from '../../../../utils/hooks/useDraftContext';
import { useSettingsMessagesBannerHeight } from '../../settings/settings_messages/SettingsMessagesBanner';
import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity';

export const containerHeaderObjectsQuery = graphql`
query ContainerHeaderObjectsQuery($id: String!) {
Expand Down Expand Up @@ -499,7 +499,7 @@ const ContainerHeader = (props) => {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: theme.spacing(1),
marginBottom: theme.spacing(3),
};
const overrideContainerStyle = knowledge || currentMode === 'graph' || currentMode === 'correlation';
if (overrideContainerStyle) {
Expand Down Expand Up @@ -557,32 +557,21 @@ const ContainerHeader = (props) => {
|| (displayAuthorizedMembers && !displayAuthorizedMembersButton)
|| (displayEnrollPlaybook && !displayEnrollPlaybookButton) || (!knowledge && canDelete);

const title = container.name
|| container.attribute_abstract
|| container.content
|| container.opinion
|| `${fd(container.first_observed)} - ${fd(container.last_observed)}`;

return (
<div style={containerStyle}>
<React.Suspense fallback={<span />}>
{!knowledge && (
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<Tooltip
title={
container.name
|| container.attribute_abstract
|| container.content
|| container.opinion
|| `${fd(container.first_observed)} - ${fd(container.last_observed)}`
}
>
<Typography variant="h1" sx={{ margin: 0, lineHeight: 'unset' }}>
{truncate(
container.name
|| container.attribute_abstract
|| container.content
|| container.opinion
|| `${fd(container.first_observed)} - ${fd(
container.last_observed,
)}`,
80,
)}
</Typography>
<Tooltip title={title}>
<TitleMainEntity>
{truncate(title, 80)}
</TitleMainEntity>
</Tooltip>
{container.draftVersion && (
<DraftChip />
Expand Down
33 changes: 10 additions & 23 deletions ...form/opencti-front/src/private/components/common/files/workbench/WorkbenchFileContent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { useNavigate } from 'react-router-dom';
import { v4 as uuid } from 'uuid';
import * as Yup from 'yup';
import Alert from '@mui/material/Alert';
import { ListItemButton } from '@mui/material';
import { ListItemButton, Stack } from '@mui/material';
import ListItem from '@mui/material/ListItem';
import DateTimePickerField from '../../../../../components/DateTimePickerField';
import { useFormatter } from '../../../../../components/i18n';
Expand Down Expand Up @@ -66,21 +66,14 @@ import Security from '../../../../../utils/Security';
import DeleteDialog from '../../../../../components/DeleteDialog';
import useDeletion from '../../../../../utils/hooks/useDeletion';
import Breadcrumbs from '../../../../../components/Breadcrumbs';
import TitleMainEntity from '../../../../../components/common/typography/TitleMainEntity';

// Deprecated - https://mui.com/system/styles/basics/
// Do not use it for new code.
const useStyles = makeStyles((theme) => ({
container: {
margin: 0,
},
title: {
float: 'left',
textTransform: 'uppercase',
},
popover: {
float: 'left',
marginTop: '-13px',
},
createButton: {
position: 'fixed',
bottom: 30,
Expand Down Expand Up @@ -4181,18 +4174,12 @@ const WorkbenchFileContentComponent = ({
{ label: fileName, current: true },
]}
/>
<Typography
variant="h1"
gutterBottom={true}
classes={{ root: classes.title }}
>
{fileName}
</Typography>
<div className={classes.popover}>
<Stack direction="row" alignItems="center" gap={1} marginBottom={3}>
<TitleMainEntity sx={{ flex: 1 }}>
{fileName}
</TitleMainEntity>
<WorkbenchFilePopover file={file} />
</div>
<Security needs={[KNOWLEDGE_KNUPDATE]}>
<div style={{ float: 'right', display: 'flex', gap: 10 }}>
<Security needs={[KNOWLEDGE_KNUPDATE]}>
<Button
variant="secondary"
onClick={handleOpenConvertToDraft}
Expand All @@ -4206,9 +4193,9 @@ const WorkbenchFileContentComponent = ({
>
{t_i18n('Validate this workbench')}
</Button>
</div>
</Security>
<div className="clearfix" />
</Security>
</Stack>

<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={currentTab} onChange={handleChangeTab}>
<Tab label={`${t_i18n('Entities')} (${stixDomainObjects.length})`} />
Expand Down
14 changes: 4 additions & 10 deletions ...pencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useState } from 'react';
import { Field, Form, Formik } from 'formik';
import { graphql, useLazyLoadQuery } from 'react-relay';
import Chip from '@mui/material/Chip';
import Typography from '@mui/material/Typography';
import IconButton from '@common/button/IconButton';
import Slide from '@mui/material/Slide';
import Tooltip from '@mui/material/Tooltip';
Expand Down Expand Up @@ -61,6 +60,7 @@ import PopoverMenu from '../../../../components/PopoverMenu';
import { resolveLink } from '../../../../utils/Entity';
import { authorizedMembersToOptions, CAN_USE_ENTITY_TYPES, useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers';
import useDraftContext from '../../../../utils/hooks/useDraftContext';
import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity';

export const stixDomainObjectMutation = graphql`
mutation StixDomainObjectHeaderFieldMutation(
Expand Down Expand Up @@ -480,18 +480,12 @@ const StixDomainObjectHeader = (props) => {

return (
<React.Suspense fallback={<span />}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: theme.spacing(1) }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: theme.spacing(3) }}>
<div style={{ display: 'flex', alignItems: 'center', gap: theme.spacing(1) }}>
<Tooltip title={getMainRepresentative(stixDomainObject)}>
<Typography
variant="h1"
sx={{
margin: 0,
lineHeight: 'unset',
}}
>
<TitleMainEntity>
{truncate(getMainRepresentative(stixDomainObject), 80)}
</Typography>
</TitleMainEntity>
</Tooltip>
{stixDomainObject.draftVersion && (
<DraftChip />
Expand Down
Loading