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 4b90c27dc3b8f..be5ccbd7f8e62 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 @@ -22,7 +22,7 @@ import Select from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem'; import CircularProgress from '@mui/material/CircularProgress'; import { makeStyles, useTheme } from '@mui/styles'; -import Chip from '@mui/material/Chip'; +import { DraftChip } from '../draft/DraftChip'; import { stixCoreObjectQuickSubscriptionContentQuery } from '../stix_core_objects/stixCoreObjectTriggersUtils'; import StixCoreObjectAskAI from '../stix_core_objects/StixCoreObjectAskAI'; import { useSettingsMessagesBannerHeight } from '../../settings/settings_messages/SettingsMessagesBanner'; @@ -800,16 +800,7 @@ const ContainerHeader = (props) => { {container.draftVersion && ( - + )} )} diff --git a/opencti-platform/opencti-front/src/private/components/common/draft/DraftBlock.tsx b/opencti-platform/opencti-front/src/private/components/common/draft/DraftBlock.tsx new file mode 100644 index 0000000000000..aec2925fb7d4e --- /dev/null +++ b/opencti-platform/opencti-front/src/private/components/common/draft/DraftBlock.tsx @@ -0,0 +1,59 @@ +import { useTheme } from '@mui/styles'; +import Typography from '@mui/material/Typography'; +import React, { FunctionComponent, ReactNode } from 'react'; +import { getDraftModeColor } from './DraftChip'; +import type { Theme } from '../../../../components/Theme'; +import { hexToRGB } from '../../../../utils/Colors'; +import { useFormatter } from '../../../../components/i18n'; + +interface DraftBlockProps { + title?: string + body?: ReactNode + sx?: Record +} + +const DraftBlock: FunctionComponent = ({ title, body, sx }) => { + const { t_i18n } = useFormatter(); + const theme = useTheme(); + const draftColor = getDraftModeColor(theme); + + return ( +
+ + {title ?? t_i18n('Draft Mode')} + + {body} +
+ ); +}; + +export default DraftBlock; diff --git a/opencti-platform/opencti-front/src/private/components/common/draft/DraftChip.tsx b/opencti-platform/opencti-front/src/private/components/common/draft/DraftChip.tsx new file mode 100644 index 0000000000000..7ecb3a3d22c44 --- /dev/null +++ b/opencti-platform/opencti-front/src/private/components/common/draft/DraftChip.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { useTheme } from '@mui/styles'; +import Tooltip from '@mui/material/Tooltip'; +import { SimplePaletteColorOptions } from '@mui/material'; +import type { Theme } from '../../../../components/Theme'; +import { useFormatter } from '../../../../components/i18n'; + +export const getDraftModeColor = (theme: Theme) => { + const draftModeColor = (theme.palette.warning as SimplePaletteColorOptions)?.main ?? theme.palette.primary.main; + return draftModeColor; +}; + +export const DraftChip = ({ style }: { style?: React.CSSProperties }) => { + const { t_i18n } = useFormatter(); + const theme = useTheme(); + const draftColor = getDraftModeColor(theme); + return ( +
+ {t_i18n('Draft')} +
+ ); +}; diff --git a/opencti-platform/opencti-front/src/private/components/drafts/DraftContextBanner.tsx b/opencti-platform/opencti-front/src/private/components/drafts/DraftContextBanner.tsx index 245eb9cbd203d..28192537d5bd8 100644 --- a/opencti-platform/opencti-front/src/private/components/drafts/DraftContextBanner.tsx +++ b/opencti-platform/opencti-front/src/private/components/drafts/DraftContextBanner.tsx @@ -2,9 +2,8 @@ import React from 'react'; import { graphql } from 'react-relay'; import { useNavigate } from 'react-router-dom'; import Button from '@mui/material/Button'; -import Chip from '@mui/material/Chip'; -import { SimplePaletteColorOptions } from '@mui/material'; import { useTheme } from '@mui/styles'; +import DraftBlock from '@components/common/draft/DraftBlock'; import { useFormatter } from '../../../components/i18n'; import type { Theme } from '../../../components/Theme'; import useApiMutation from '../../../utils/hooks/useApiMutation'; @@ -25,11 +24,6 @@ export const draftContextBannerMutation = graphql` } `; -export const getDraftModeColor = (theme: Theme) => { - const draftModeColor = (theme.palette.warning as SimplePaletteColorOptions)?.main ?? theme.palette.primary.main; - return draftModeColor; -}; - const DraftContextBanner = () => { const { t_i18n } = useFormatter(); const [commit] = useApiMutation(draftContextBannerMutation); @@ -38,8 +32,6 @@ const DraftContextBanner = () => { const navigate = useNavigate(); const currentDraftContextName = me.draftContext ? me.draftContext.name : ''; - const draftModeColor = getDraftModeColor(theme); - const handleExitDraft = () => { commit({ variables: { @@ -55,22 +47,13 @@ const DraftContextBanner = () => {
- +