[frontend] update style of draft chip & top bar

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) => {
  </Typography>
  </Tooltip>
  {container.draftVersion && (
- <Chip
- style={{
- color: theme.palette.warning.main,
- borderColor: theme.palette.warning.main,
- textTransform: 'uppercase',
- borderRadius: theme.borderRadius,
- }}
- variant="outlined"
- label={t_i18n('Draft')}
- />
+ <DraftChip />
  )}
  </div>
  )}

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<string, React.CSSProperties>
+}
+
+const DraftBlock: FunctionComponent<DraftBlockProps> = ({ title, body, sx }) => {
+ const { t_i18n } = useFormatter();
+ const theme = useTheme<Theme>();
+ const draftColor = getDraftModeColor(theme);
+
+ return (
+ <div
+ style={{
+ border: `1px solid ${hexToRGB(draftColor, 0.5)}`,
+ color: draftColor,
+ display: 'flex',
+ flexDirection: 'column',
+ minHeight: theme.spacing(4),
+ padding: theme.spacing(1),
+ paddingTop: theme.spacing(0.5),
+ borderRadius: theme.spacing(0.5),
+ ...(sx?.root ?? {}),
+ }}
+ >
+ <Typography
+ variant="h4"
+ style={{
+ color: draftColor,
+ marginTop: theme.spacing(-1.1),
+ marginBottom: 0,
+ background: theme.palette.background.default,
+ paddingLeft: theme.spacing(1),
+ paddingRight: theme.spacing(1),
+ fontSize: 10,
+ height: 10,
+ textTransform: 'uppercase',
+ fontFamily: '"Geoligica", sans-serif',
+ fontWeight: 700,
+ width: 'fit-content',
+ ...(sx?.title ?? {}),
+ }}
+ >
+ {title ?? t_i18n('Draft Mode')}
+ </Typography>
+ {body}
+ </div>
+ );
+};
+
+export default DraftBlock;

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<Theme>();
+ const draftColor = getDraftModeColor(theme);
+ return (
+ <div
+ style={{
+ fontSize: 'xx-small',
+ textTransform: 'uppercase',
+ fontWeight: 500,
+ height: 14,
+ display: 'inline-flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginTop: theme.spacing(0.25),
+ marginLeft: theme.spacing(0.5),
+ padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+ borderRadius: theme.borderRadius,
+ border: `1px solid ${draftColor}`,
+ color: draftColor,
+ backgroundColor: 'transparent',
+ ...style,
+ }}
+ >
+ {t_i18n('Draft')}
+ </div>
+ );
+};

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 = () => {
  <div style={{ padding: '0 12px' }}>
  <div style={{ display: 'flex', width: '100%', alignItems: 'center' }}>
  <div style={{ padding: '0 12px' }}>
- <Chip
- style={{
- color: draftModeColor,
- borderColor: draftModeColor,
- textTransform: 'uppercase',
- borderRadius: theme.borderRadius,
- }}
- variant="outlined"
- label={`${t_i18n('Draft Mode')} - ${truncate(currentDraftContextName, 20)}`}
- />
+ <DraftBlock body={truncate(currentDraftContextName, 40)} />
  </div>
  <div>
  <Button
  variant="contained"
  color="primary"
- style={{ width: '100%', height: 32 }}
+ style={{ width: '100%' }}
  onClick={handleExitDraft}
  >
  {t_i18n('Approve draft')}
@@ -79,7 +62,8 @@ const DraftContextBanner = () => {
  <div style={{ padding: '0 12px' }}>
  <Button
  color="primary"
- style={{ width: '100%', height: 32 }}
+ variant="outlined"
+ style={{ width: '100%' }}
  onClick={handleExitDraft}
  >
  {t_i18n('Exit draft')}

opencti-platform/opencti-front/src/private/components/drafts/DraftCreation.tsx

@@ -60,7 +60,7 @@ const DraftCreationForm: React.FC<DraftFormProps> = ({ updater, onCompleted, onR
  },
  onError: (error) => {
  handleErrorInForm(error, setErrors);
- setErrors(error);
+ setSubmitting(false);
  },
  onCompleted: () => {
  setSubmitting(false);

opencti-platform/opencti-front/src/private/components/drafts/Drafts.tsx

@@ -98,14 +98,14 @@ const Drafts: React.FC = () => {
  filters,
  } = viewStorage;
 
- const contextFilters = useBuildEntityTypeBasedFilterContext('Draft', filters);
+ const contextFilters = useBuildEntityTypeBasedFilterContext('DraftWorkspace', filters);
  const queryPaginationOptions = {
  ...paginationOptions,
  filters: contextFilters,
  } as unknown as DraftsLinesPaginationQuery$variables;
  const queryRef = useQueryLoading<DraftsLinesPaginationQuery>(
  draftsLinesQuery,
- paginationOptions,
+ queryPaginationOptions,
  );
 
  const preloadedPaginationProps = {

opencti-platform/opencti-front/src/private/components/nav/TopBar.tsx

@@ -16,7 +16,8 @@ import { usePage } from 'use-analytics';
 import Popover from '@mui/material/Popover';
 import Box from '@mui/material/Box';
 import { OPEN_BAR_WIDTH, SMALL_BAR_WIDTH } from '@components/nav/LeftBar';
-import DraftContextBanner, { getDraftModeColor } from '@components/drafts/DraftContextBanner';
+import DraftContextBanner from '@components/drafts/DraftContextBanner';
+import { getDraftModeColor } from '@components/common/draft/DraftChip';
 import { useFormatter } from '../../../components/i18n';
 import SearchInput from '../../../components/SearchInput';
 import { APP_BASE_PATH, fileUri, MESSAGING$ } from '../../../relay/environment';