From 9021924e46f96f50c06530efa2dee39ed576d939 Mon Sep 17 00:00:00 2001 From: Landry Trebon Date: Tue, 6 Jan 2026 17:58:32 +0100 Subject: [PATCH 1/2] wip headers --- .../src/components/Breadcrumbs.tsx | 31 +++- .../common/typography/TitleMainEntity.tsx | 23 +++ .../ExternalReferenceHeader.tsx | 81 ++++------- .../components/chatbox/ChatbotManager.ts | 7 + .../common/containers/ContainerHeader.jsx | 35 ++--- .../files/workbench/WorkbenchFileContent.jsx | 33 ++--- .../StixDomainObjectHeader.jsx | 14 +- .../components/data/connectors/Connector.tsx | 15 +- .../data/playbooks/PlaybookHeader.tsx | 135 +++++++++--------- .../StixSightingRelationshipHeader.tsx | 13 +- .../StixCyberObservableHeader.jsx | 13 +- .../src/private/components/pir/PirHeader.tsx | 13 +- .../components/settings/roles/Root.tsx | 83 +++++------ .../opencti-front/src/utils/props.ts | 5 + 14 files changed, 238 insertions(+), 263 deletions(-) create mode 100644 opencti-platform/opencti-front/src/components/common/typography/TitleMainEntity.tsx create mode 100644 opencti-platform/opencti-front/src/utils/props.ts diff --git a/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx b/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx index a6ad509c96bb..6e9df5b094d7 100644 --- a/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx +++ b/opencti-platform/opencti-front/src/components/Breadcrumbs.tsx @@ -22,23 +22,35 @@ const Breadcrumbs: FunctionComponent = ({ elements, noMargin = const theme = useTheme(); const SplitDiv = ({ show = true }) => ( -
/
+
/ +
); return (
{elements.map((element, index) => { if (element.current) { return ( - {truncate(element.label, 30, false)} + {truncate(element.label, 50, false)} {isSensitive && } @@ -48,14 +60,23 @@ const Breadcrumbs: FunctionComponent = ({ elements, noMargin = if (!element.link) { return ( - {truncate(element.label, 30, false)} + + {truncate(element.label, 30, false)} + ); } return ( - {truncate(element.label, 30, false)} + {truncate(element.label, 30, false)} + ); diff --git a/opencti-platform/opencti-front/src/components/common/typography/TitleMainEntity.tsx b/opencti-platform/opencti-front/src/components/common/typography/TitleMainEntity.tsx new file mode 100644 index 000000000000..5872bfa0bf2d --- /dev/null +++ b/opencti-platform/opencti-front/src/components/common/typography/TitleMainEntity.tsx @@ -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 ( + + {children} + + ); +}; + +export default TitleMainEntity; diff --git a/opencti-platform/opencti-front/src/private/components/analyses/external_references/ExternalReferenceHeader.tsx b/opencti-platform/opencti-front/src/private/components/analyses/external_references/ExternalReferenceHeader.tsx index dc7d0424f34d..1ae2e55cfdcb 100644 --- a/opencti-platform/opencti-front/src/private/components/analyses/external_references/ExternalReferenceHeader.tsx +++ b/opencti-platform/opencti-front/src/private/components/analyses/external_references/ExternalReferenceHeader.tsx @@ -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'; @@ -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; @@ -29,7 +20,6 @@ const ExternalReferenceHeaderComponent = ({ externalReference, EditComponent, }: ExternalReferenceHeaderComponentProps) => { - const classes = useStyles(); const canDelete = useGranted([KNOWLEDGE_KNUPDATE_KNDELETE]); const { t_i18n } = useFormatter(); const [openDelete, setOpenDelete] = useState(false); @@ -37,47 +27,36 @@ const ExternalReferenceHeaderComponent = ({ const handleCloseDelete = () => setOpenDelete(false); return ( -
+ + + {truncate(externalReference.source_name, 80)} +
- - {truncate(externalReference.source_name, 80)} - -
-
-
-
- {canDelete && ( - - {({ closeMenu }) => ( - - { - handleOpenDelete(); - closeMenu(); - }} - > - {t_i18n('Delete')} - - - )} - - )} - {EditComponent} - - - -
+ {canDelete && ( + + {({ closeMenu }) => ( + + { + handleOpenDelete(); + closeMenu(); + }} + > + {t_i18n('Delete')} + + + )} + + )} + {EditComponent} + + +
-
+ ); }; diff --git a/opencti-platform/opencti-front/src/private/components/chatbox/ChatbotManager.ts b/opencti-platform/opencti-front/src/private/components/chatbox/ChatbotManager.ts index 37c09aba63ac..e0a0c5328534 100644 --- a/opencti-platform/opencti-front/src/private/components/chatbox/ChatbotManager.ts +++ b/opencti-platform/opencti-front/src/private/components/chatbox/ChatbotManager.ts @@ -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, diff --git a/opencti-platform/opencti-front/src/private/components/common/containers/ContainerHeader.jsx b/opencti-platform/opencti-front/src/private/components/common/containers/ContainerHeader.jsx index 779fbeb617a9..ee7c8b582f57 100644 --- a/opencti-platform/opencti-front/src/private/components/common/containers/ContainerHeader.jsx +++ b/opencti-platform/opencti-front/src/private/components/common/containers/ContainerHeader.jsx @@ -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'; @@ -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!) { @@ -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) { @@ -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 (
}> {!knowledge && (
- - - {truncate( - container.name - || container.attribute_abstract - || container.content - || container.opinion - || `${fd(container.first_observed)} - ${fd( - container.last_observed, - )}`, - 80, - )} - + + + {truncate(title, 80)} + {container.draftVersion && ( diff --git a/opencti-platform/opencti-front/src/private/components/common/files/workbench/WorkbenchFileContent.jsx b/opencti-platform/opencti-front/src/private/components/common/files/workbench/WorkbenchFileContent.jsx index 346becf033f3..e9c214cee279 100644 --- a/opencti-platform/opencti-front/src/private/components/common/files/workbench/WorkbenchFileContent.jsx +++ b/opencti-platform/opencti-front/src/private/components/common/files/workbench/WorkbenchFileContent.jsx @@ -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'; @@ -66,6 +66,7 @@ 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. @@ -73,14 +74,6 @@ const useStyles = makeStyles((theme) => ({ container: { margin: 0, }, - title: { - float: 'left', - textTransform: 'uppercase', - }, - popover: { - float: 'left', - marginTop: '-13px', - }, createButton: { position: 'fixed', bottom: 30, @@ -4181,18 +4174,12 @@ const WorkbenchFileContentComponent = ({ { label: fileName, current: true }, ]} /> - - {fileName} - -
+ + + {fileName} + -
- -
+ -
- -
+ + + diff --git a/opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectHeader.jsx b/opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectHeader.jsx index 794d1ee6755b..8967f05368ea 100644 --- a/opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectHeader.jsx +++ b/opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectHeader.jsx @@ -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'; @@ -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( @@ -480,18 +480,12 @@ const StixDomainObjectHeader = (props) => { return ( }> -
+
- + {truncate(getMainRepresentative(stixDomainObject), 80)} - + {stixDomainObject.draftVersion && ( diff --git a/opencti-platform/opencti-front/src/private/components/data/connectors/Connector.tsx b/opencti-platform/opencti-front/src/private/components/data/connectors/Connector.tsx index 021b935a4e7b..1cd79e0929fd 100644 --- a/opencti-platform/opencti-front/src/private/components/data/connectors/Connector.tsx +++ b/opencti-platform/opencti-front/src/private/components/data/connectors/Connector.tsx @@ -50,6 +50,7 @@ import { ConnectorUpdateTriggerMutation, EditInput } from './__generated__/Conne import { ConnectorUpdateStatusMutation } from './__generated__/ConnectorUpdateStatusMutation.graphql'; import { ConnectorWorksQuery$data, ConnectorWorksQuery$variables } from './__generated__/ConnectorWorksQuery.graphql'; import Card from '../../../../components/common/card/Card'; +import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity'; // Type extension for organization node with authorized_authorities interface OrganizationNodeWithAuthorities { @@ -699,25 +700,21 @@ const ConnectorComponent: FunctionComponent = ({ connec display: 'flex', justifyContent: 'space-between', width: '100%', - marginBottom: theme.spacing(2), + marginBottom: theme.spacing(3), }} > - {connector.is_managed ? connector.manager_contract_excerpt?.title : connector.name}
- +
(null); const { t_i18n, nsdt, n } = useFormatter(); return ( -
-
- + + + + {playbook.name} + + + + setOpenLastExecutions(!openLastExecutions)} + style={{ margin: '0 4px 0 0' }} > - {playbook.name} - - +
+ +
+ + + + + + + + -
- setOpenLastExecutions(!openLastExecutions)} - style={{ margin: '0 4px 0 0' }} - > - -
- -
- - - - - - - - - + + setOpenLastExecutions(false)} @@ -239,7 +234,7 @@ const PlaybookHeaderComponent = ({ 
{rawData}
-
+ ); }; diff --git a/opencti-platform/opencti-front/src/private/components/events/stix_sighting_relationships/StixSightingRelationshipHeader.tsx b/opencti-platform/opencti-front/src/private/components/events/stix_sighting_relationships/StixSightingRelationshipHeader.tsx index 053629798faa..555cfdcf16fd 100644 --- a/opencti-platform/opencti-front/src/private/components/events/stix_sighting_relationships/StixSightingRelationshipHeader.tsx +++ b/opencti-platform/opencti-front/src/private/components/events/stix_sighting_relationships/StixSightingRelationshipHeader.tsx @@ -1,8 +1,6 @@ import Button from '@common/button/Button'; import { Box, Tooltip } from '@mui/material'; -import Typography from '@mui/material/Typography'; import MenuItem from '@mui/material/MenuItem'; -import React from 'react'; import { useTheme } from '@mui/material/styles'; import { truncate } from '../../../../utils/String'; import PopoverMenu from '../../../../components/PopoverMenu'; @@ -12,6 +10,7 @@ import type { Theme } from '../../../../components/Theme'; import { useFormatter } from '../../../../components/i18n'; import useDraftContext from '../../../../utils/hooks/useDraftContext'; import { useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers'; +import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity'; interface StixSightingRelationshipHeaderProps { headerName?: string; @@ -42,15 +41,9 @@ const StixSightingRelationshipHeader = ({ >
- + {truncate(headerName, 80)} - +
diff --git a/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableHeader.jsx b/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableHeader.jsx index 05476c6cbb26..d33f17895ac4 100644 --- a/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableHeader.jsx +++ b/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableHeader.jsx @@ -1,6 +1,5 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { createFragmentContainer, graphql } from 'react-relay'; -import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import MenuItem from '@mui/material/MenuItem'; import StixCoreObjectSharingList from '../../common/stix_core_objects/StixCoreObjectSharingList'; @@ -18,6 +17,8 @@ import StixCoreObjectMenuItemUnderEE from '../../common/stix_core_objects/StixCo import { useFormatter } from '../../../../components/i18n'; import useDraftContext from '../../../../utils/hooks/useDraftContext'; import { useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers'; +import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity'; +import { Stack } from '@mui/material'; const StixCyberObservableHeaderComponent = ({ stixCyberObservable, DeleteComponent }) => { const [openSharing, setOpenSharing] = useState(false); @@ -36,10 +37,10 @@ const StixCyberObservableHeaderComponent = ({ stixCyberObservable, DeleteCompone const handleCloseDelete = () => setOpenDelete(false); return ( -
- + + {truncate(stixCyberObservable.observable_value, 50)} - + {stixCyberObservable.draftVersion && } @@ -92,7 +93,7 @@ const StixCyberObservableHeaderComponent = ({ stixCyberObservable, DeleteCompone
-
+ ); }; diff --git a/opencti-platform/opencti-front/src/private/components/pir/PirHeader.tsx b/opencti-platform/opencti-front/src/private/components/pir/PirHeader.tsx index 0a60f83a3389..1fadbae60a52 100644 --- a/opencti-platform/opencti-front/src/private/components/pir/PirHeader.tsx +++ b/opencti-platform/opencti-front/src/private/components/pir/PirHeader.tsx @@ -14,8 +14,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */ import { graphql, useFragment } from 'react-relay'; -import React, { useState } from 'react'; -import { Box, Typography } from '@mui/material'; +import { useState } from 'react'; +import { Stack } from '@mui/material'; import Button from '@common/button/Button'; import FormAuthorizedMembersDialog from '@components/common/form/FormAuthorizedMembersDialog'; import PirPopover from './PirPopover'; @@ -27,6 +27,7 @@ import { PirEditionFragment$key } from './pir_form/__generated__/PirEditionFragm import { authorizedMembersToOptions, useGetCurrentUserAccessRight } from '../../../utils/authorizedMembers'; import { PIRAPI_PIRUPDATE, SETTINGS_SETACCESSES } from '../../../utils/hooks/useGranted'; import Security from '../../../utils/Security'; +import TitleMainEntity from '../../../components/common/typography/TitleMainEntity'; const headerFragment = graphql` fragment PirHeaderFragment on Pir { @@ -83,10 +84,10 @@ const PirHeader = ({ data, editionData }: PirHeaderProps) => { <> - - + + {name} - + <> @@ -116,7 +117,7 @@ const PirHeader = ({ data, editionData }: PirHeaderProps) => { - + = ({ queryRef }, ); - const RoleHeader = styled('div')({ - display: 'flex', - justifyContent: 'space-between', - marginBottom: 24, - }); - return ( <> @@ -93,51 +88,39 @@ const RootRoleComponent: FunctionComponent = ({ queryRef { label: role.name, current: true }, ]} /> - -
- - {role.name} - -
-
-
-
-
- {canDelete && ( - - {({ closeMenu }) => ( - - { - handleOpenDelete(); - closeMenu(); - }} - > - {t_i18n('Delete')} - - - )} - + + + {role.name} + +
+ {canDelete && ( + + {({ closeMenu }) => ( + + { + handleOpenDelete(); + closeMenu(); + }} + > + {t_i18n('Delete')} + + )} -
- - -
+ + )}
- -
+ + + <> {groupsQueryRef ? ( }> diff --git a/opencti-platform/opencti-front/src/utils/props.ts b/opencti-platform/opencti-front/src/utils/props.ts new file mode 100644 index 000000000000..989c6fe91193 --- /dev/null +++ b/opencti-platform/opencti-front/src/utils/props.ts @@ -0,0 +1,5 @@ +import { SxProps } from '@mui/material'; + +export interface PropsWithSx { + sx?: SxProps; +} From 72ce55bcac9ac10eb0eb69238453f4362917a7b3 Mon Sep 17 00:00:00 2001 From: Landry Trebon Date: Wed, 7 Jan 2026 11:15:45 +0100 Subject: [PATCH 2/2] finish headers --- .../case_templates/CaseTemplateTasks.tsx | 95 +++++++++---------- .../components/settings/decay/DecayRule.tsx | 10 +- .../email_template/EmailTemplateHeader.tsx | 36 ++++--- .../settings/fintel_design/FintelDesign.tsx | 77 ++++++--------- .../components/settings/groups/Root.tsx | 83 +++++++--------- .../organizations/SettingsOrganization.tsx | 31 +++--- .../SettingsOrganizationEdition.tsx | 1 - .../components/settings/roles/Root.tsx | 3 +- .../components/settings/sub_types/SubType.tsx | 6 +- .../components/settings/users/Root.jsx | 63 +++++------- 10 files changed, 177 insertions(+), 228 deletions(-) diff --git a/opencti-platform/opencti-front/src/private/components/settings/case_templates/CaseTemplateTasks.tsx b/opencti-platform/opencti-front/src/private/components/settings/case_templates/CaseTemplateTasks.tsx index 93b2cb385b5d..191fbe51ef3e 100644 --- a/opencti-platform/opencti-front/src/private/components/settings/case_templates/CaseTemplateTasks.tsx +++ b/opencti-platform/opencti-front/src/private/components/settings/case_templates/CaseTemplateTasks.tsx @@ -1,10 +1,9 @@ -import Typography from '@mui/material/Typography'; import makeStyles from '@mui/styles/makeStyles'; import React, { FunctionComponent, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import MenuItem from '@mui/material/MenuItem'; import { graphql, PreloadedQuery } from 'react-relay'; -import { Box, styled } from '@mui/material'; +import { Box, Stack } from '@mui/material'; import { useTheme } from '@mui/styles'; import ListLines from '../../../../components/list_lines/ListLines'; import Loader, { LoaderVariant } from '../../../../components/Loader'; @@ -28,6 +27,8 @@ import useDeletion from '../../../../utils/hooks/useDeletion'; import type { Theme } from '../../../../components/Theme'; import PopoverMenu from '../../../../components/PopoverMenu'; import useApiMutation from '../../../../utils/hooks/useApiMutation'; +import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity'; +import Breadcrumbs from '../../../../components/Breadcrumbs'; // Deprecated - https://mui.com/system/styles/basics/ // Do not use it for new code. @@ -36,9 +37,6 @@ const useStyles = makeStyles(() => ({ margin: 0, padding: '0 200px 50px 0', }, - title: { - float: 'left', - }, })); const caseTemplateTasksDeletionMutation = graphql` @@ -58,7 +56,6 @@ const CaseHeaderMenu: FunctionComponent = ({ caseTemplateId, paginationOptions, }) => { - const classes = useStyles(); const { t_i18n } = useFormatter(); const navigate = useNavigate(); const theme = useTheme(); @@ -105,56 +102,50 @@ const CaseHeaderMenu: FunctionComponent = ({ nodePath: 'caseTemplate', }); - const CaseTemplateHeader = styled('div')({ - display: 'flex', - justifyContent: 'space-between', - marginBottom: 24, - }); + const breadcrumb = [ + { label: t_i18n('Settings') }, + { label: t_i18n('Taxonomies') }, + { label: t_i18n('Case templates'), link: '/dashboard/settings/vocabularies/case_templates' }, + { label: caseTemplate.name, current: true }, + ]; return ( - -
- + <> + + + {caseTemplate.name} - -
-
-
-
- - {({ closeMenu }) => ( - - { - handleOpenDelete(); - closeMenu(); - }} - > - {t_i18n('Delete')} - - - )} - - - -
+ +
+ + {({ closeMenu }) => ( + + { + handleOpenDelete(); + closeMenu(); + }} + > + {t_i18n('Delete')} + + + )} + + +
-
- + + ); }; diff --git a/opencti-platform/opencti-front/src/private/components/settings/decay/DecayRule.tsx b/opencti-platform/opencti-front/src/private/components/settings/decay/DecayRule.tsx index 53f55b2f804d..da1ca637963d 100644 --- a/opencti-platform/opencti-front/src/private/components/settings/decay/DecayRule.tsx +++ b/opencti-platform/opencti-front/src/private/components/settings/decay/DecayRule.tsx @@ -22,6 +22,7 @@ import Loader, { LoaderVariant } from '../../../../components/Loader'; import Breadcrumbs from '../../../../components/Breadcrumbs'; import type { Theme } from '../../../../components/Theme'; import Card from '../../../../components/common/card/Card'; +import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity'; const decayRuleQuery = graphql` query DecayRuleQuery($id: String!) { @@ -93,13 +94,10 @@ const DecayRuleComponent = ({ queryRef }: DecayRuleComponentProps) => { />
-
- +
+ {decayRule.name} - + { { label: t_i18n('Settings') }, { label: t_i18n('Security') }, { label: t_i18n('Email templates'), link: emailTemplateLink }, - { label: template.name }, + { label: template.name, current: true }, ]; const onSubmit = () => { @@ -60,10 +60,18 @@ const EmailTemplateHeader = ({ data }: EmailTemplateHeaderProps) => { <> -
- +
+ {template.name} - + setFormOpen(true)} diff --git a/opencti-platform/opencti-front/src/private/components/settings/fintel_design/FintelDesign.tsx b/opencti-platform/opencti-front/src/private/components/settings/fintel_design/FintelDesign.tsx index ca71df5784a5..468eca9eda76 100644 --- a/opencti-platform/opencti-front/src/private/components/settings/fintel_design/FintelDesign.tsx +++ b/opencti-platform/opencti-front/src/private/components/settings/fintel_design/FintelDesign.tsx @@ -3,13 +3,12 @@ import { graphql, PreloadedQuery, useFragment, usePreloadedQuery } from 'react-r import { useParams } from 'react-router-dom'; import { FintelDesignQuery } from '@components/settings/fintel_design/__generated__/FintelDesignQuery.graphql'; import Grid from '@mui/material/Grid2'; -import Typography from '@mui/material/Typography'; import { useTheme } from '@mui/styles'; import { FintelDesign_fintelDesign$key } from '@components/settings/fintel_design/__generated__/FintelDesign_fintelDesign.graphql'; import CustomizationMenu from '@components/settings/CustomizationMenu'; import FintelDesignForm from '@components/settings/fintel_design/FintelDesignForm'; import FintelDesignEdition from '@components/settings/fintel_design/FintelDesignEdition'; -import { Box, styled } from '@mui/material'; +import { Box, Stack } from '@mui/material'; import MenuItem from '@mui/material/MenuItem'; import { useFormatter } from '../../../../components/i18n'; import type { Theme } from '../../../../components/Theme'; @@ -24,6 +23,7 @@ import PopoverMenu from '../../../../components/PopoverMenu'; import FintelDesignDeletion from './FintelDesignDeletion'; import useGranted, { KNOWLEDGE_KNUPDATE_KNDELETE } from '../../../../utils/hooks/useGranted'; import Card from '../../../../components/common/card/Card'; +import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity'; const fintelDesignQuery = graphql` query FintelDesignQuery($id: String!) { @@ -90,12 +90,6 @@ const FintelDesignComponent: FunctionComponent = ({ buildPreview(); }, [fintelDesign]); - const FintelDesignHeader = styled('div')({ - display: 'flex', - justifyContent: 'space-between', - marginBottom: 24, - }); - return ( <> @@ -108,46 +102,37 @@ const FintelDesignComponent: FunctionComponent = ({ { label: `${fintelDesign.name}`, current: true }, ]} /> - -
- - {fintelDesign.name} - -
-
-
-
- {canDelete && ( - - {({ closeMenu }) => ( - - { - handleOpenDelete(); - closeMenu(); - }} - > - {t_i18n('Delete')} - - - )} - + + + {fintelDesign.name} + +
+ {canDelete && ( + + {({ closeMenu }) => ( + + { + handleOpenDelete(); + closeMenu(); + }} + > + {t_i18n('Delete')} + + )} -
- - -
+ + )}
- + + + = ({ queryR const { isAllowed, isSensitive } = useSensitiveModifications('groups', group.standard_id); - const GroupHeader = styled('div')({ - display: 'flex', - justifyContent: 'space-between', - marginBottom: 24, - }); - return ( <> @@ -98,50 +92,39 @@ const RootGroupComponent: FunctionComponent = ({ queryR { label: group.name, current: true }, ]} /> - -
- - {group.name} - -
-
-
-
-
- {canDelete && ( - - {({ closeMenu }) => ( - - { - handleOpenDelete(); - closeMenu(); - }} - > - {t_i18n('Delete')} - - - )} - + + + {group.name} + +
+ {canDelete && ( + + {({ closeMenu }) => ( + + { + handleOpenDelete(); + closeMenu(); + }} + > + {t_i18n('Delete')} + + )} -
- - -
+ + )}
- + + + (() => ({ gridContainer: { marginBottom: 20, }, - title: { - float: 'left', - }, })); + const settingsOrganizationFragment = graphql` fragment SettingsOrganization_organization on Organization { id @@ -110,6 +109,7 @@ const settingsOrganizationFragment = graphql` ...SettingsOrganizationHiddenTypesChipList_organization } `; + const SettingsOrganization = ({ organizationData, }: { @@ -144,17 +144,18 @@ const SettingsOrganization = ({ return (
- - {organization.name} - - - - -
+ + + {organization.name} + + + + + ( ); diff --git a/opencti-platform/opencti-front/src/private/components/settings/roles/Root.tsx b/opencti-platform/opencti-front/src/private/components/settings/roles/Root.tsx index 4f7f89671b20..2f7c93e61f88 100644 --- a/opencti-platform/opencti-front/src/private/components/settings/roles/Root.tsx +++ b/opencti-platform/opencti-front/src/private/components/settings/roles/Root.tsx @@ -4,8 +4,7 @@ import React, { FunctionComponent, useState } from 'react'; import { Route, Routes, useParams } from 'react-router-dom'; import { graphql, PreloadedQuery, useLazyLoadQuery, usePreloadedQuery } from 'react-relay'; import AccessesMenu from '@components/settings/AccessesMenu'; -import Typography from '@mui/material/Typography'; -import { Box, Stack, styled } from '@mui/material'; +import { Box, Stack } from '@mui/material'; import MenuItem from '@mui/material/MenuItem'; import RoleDeletionDialog from '@components/settings/roles/RoleDeletionDialog'; import RoleEdition from '@components/settings/roles/RoleEdition'; diff --git a/opencti-platform/opencti-front/src/private/components/settings/sub_types/SubType.tsx b/opencti-platform/opencti-front/src/private/components/settings/sub_types/SubType.tsx index 0409fa0ce241..39d03c308d71 100644 --- a/opencti-platform/opencti-front/src/private/components/settings/sub_types/SubType.tsx +++ b/opencti-platform/opencti-front/src/private/components/settings/sub_types/SubType.tsx @@ -1,4 +1,3 @@ -import Typography from '@mui/material/Typography'; import React, { Suspense, useMemo } from 'react'; import { graphql, PreloadedQuery, usePreloadedQuery, useSubscription } from 'react-relay'; import Grid from '@mui/material/Grid'; @@ -23,6 +22,7 @@ import useQueryLoading from '../../../../utils/hooks/useQueryLoading'; import Loader from '../../../../components/Loader'; import useEnterpriseEdition from '../../../../utils/hooks/useEnterpriseEdition'; import Card from '../../../../components/common/card/Card'; +import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity'; const entitySettingSubscription = graphql` subscription SubTypeEntitySettingSubscription($id: ID!) { @@ -103,9 +103,9 @@ const SubTypeComponent: React.FC = ({ queryRef }) => { - + {t_i18n(`entity_${subType.label}`)} - + diff --git a/opencti-platform/opencti-front/src/private/components/settings/users/Root.jsx b/opencti-platform/opencti-front/src/private/components/settings/users/Root.jsx index 8166d2057cf8..2c35c6215aa9 100644 --- a/opencti-platform/opencti-front/src/private/components/settings/users/Root.jsx +++ b/opencti-platform/opencti-front/src/private/components/settings/users/Root.jsx @@ -2,11 +2,10 @@ import React, { useEffect, useMemo, useState } from 'react'; import * as PropTypes from 'prop-types'; import { Link, Route, Routes, useLocation, useParams } from 'react-router-dom'; import { graphql, useLazyLoadQuery, usePreloadedQuery, useQueryLoader, useSubscription } from 'react-relay'; -import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; -import { styled } from '@mui/material'; +import { Stack } from '@mui/material'; import MenuItem from '@mui/material/MenuItem'; import { useTheme } from '@mui/styles'; import ConvertUser from './ConvertUser'; @@ -24,6 +23,7 @@ import Breadcrumbs from '../../../../components/Breadcrumbs'; import UserEdition from './UserEdition'; import PopoverMenu from '../../../../components/PopoverMenu'; import UserHistoryTab from './UserHistoryTab'; +import TitleMainEntity from '../../../../components/common/typography/TitleMainEntity'; const userEditionQuery = graphql` query RootUserEditionQuery($id: String!) { @@ -109,12 +109,6 @@ const RootUserComponent = ({ queryRef, userId, refetch }) => { const handleOpenDelete = () => setOpenDelete(true); const handleCloseDelete = () => setOpenDelete(false); - const UserHeader = styled('div')({ - display: 'flex', - justifyContent: 'space-between', - marginBottom: 8, - }); - return ( {data ? ( @@ -127,36 +121,27 @@ const RootUserComponent = ({ queryRef, userId, refetch }) => { { label: data.name || data.user_email, current: true }, ]} /> - -
- - {data.name} - -
-
-
-
- - {canDelete && ( - - {({ closeMenu }) => ( - - { - handleOpenDelete(); - closeMenu(); - }} - > - {t_i18n('Delete')} - - - )} - - )} -
+ + + {data.name} + +
+ + {canDelete && ( + + {({ closeMenu }) => ( + + { + handleOpenDelete(); + closeMenu(); + }} + > + {t_i18n('Delete')} + + + )} + + )} { />
- +