[frontend] update draft context top bar

opencti-platform/opencti-front/lang/front/de.json

@@ -183,6 +183,7 @@
  "Apply on indicator observable types (none = ALL)": "Auf Indikator beobachtbare Typen anwenden (keine = ALLE)",
  "APPLY RULE": "REGEL ANWENDEN",
  "Applying this rule on the existing data": "Anwenden dieser Regel auf die vorhandenen Daten",
+ "Approve draft": "Entwurf genehmigen",
  "Architecture execution env.": "Architektur Ausführung env.",
  "Architecture mode": "Architekturmodus",
  "are updating...": "aktualisieren sich...",
@@ -975,6 +976,7 @@
  "entity_DeleteOperation": "Operation löschen",
  "entity_Directory": "Verzeichnis",
  "entity_Domain-Name": "Domänenname",
+ "entity_DraftWorkspace": "Entwurf Arbeitsbereich",
  "entity_Email-Addr": "E-Mail Adresse",
  "entity_Email-Message": "E-Mail-Nachricht",
  "entity_Email-Mime-Part-Type": "E-Mail-Nachricht - MIME-Teil",

opencti-platform/opencti-front/lang/front/en.json

@@ -183,6 +183,7 @@
  "Apply on indicator observable types (none = ALL)": "Apply on indicator observable types (none = ALL)",
  "APPLY RULE": "APPLY RULE",
  "Applying this rule on the existing data": "Applying this rule on the existing data",
+ "Approve draft": "Approve draft",
  "Architecture execution env.": "Architecture execution env.",
  "Architecture mode": "Architecture mode",
  "are updating...": "are updating...",
@@ -975,6 +976,7 @@
  "entity_DeleteOperation": "Delete Operation",
  "entity_Directory": "Directory",
  "entity_Domain-Name": "Domain name",
+ "entity_DraftWorkspace": "Draft Workspace",
  "entity_Email-Addr": "Email address",
  "entity_Email-Message": "Email message",
  "entity_Email-Mime-Part-Type": "Email message - MIME Part",

opencti-platform/opencti-front/lang/front/es.json

@@ -183,6 +183,7 @@
  "Apply on indicator observable types (none = ALL)": "Aplicar sobre tipos observables de indicadores (nada = TODOS)",
  "APPLY RULE": "APLICAR REGLA",
  "Applying this rule on the existing data": "Aplicando esta regla a los datos existentes",
+ "Approve draft": "Aprobar proyecto",
  "Architecture execution env.": "Arquitectura de ejecución",
  "Architecture mode": "Modo arquitectura",
  "are updating...": "se están modificando...",
@@ -975,6 +976,7 @@
  "entity_DeleteOperation": "Borrar operación",
  "entity_Directory": "Directorio",
  "entity_Domain-Name": "Nombre de dominio",
+ "entity_DraftWorkspace": "Borrador Espacio de trabajo",
  "entity_Email-Addr": "Dirección de correo electrónico",
  "entity_Email-Message": "Correo electrónico",
  "entity_Email-Mime-Part-Type": "Correo electrónico - MIME Part",

opencti-platform/opencti-front/lang/front/fr.json

@@ -183,6 +183,7 @@
  "Apply on indicator observable types (none = ALL)": "Appliquer sur les types d'observable des indicateurs (aucun = TOUS)",
  "APPLY RULE": "APPLIQUER LA RÈGLE",
  "Applying this rule on the existing data": "En cours d'application de cette règle sur les données de la plateforme",
+ "Approve draft": "Approuver le brouillon",
  "Architecture execution env.": "Env. d'éxécution",
  "Architecture mode": "Mode d'architecture",
  "are updating...": "modifient actuellement...",
@@ -975,6 +976,7 @@
  "entity_DeleteOperation": "Opération de suppression",
  "entity_Directory": "Dossier",
  "entity_Domain-Name": "Nom de domaine",
+ "entity_DraftWorkspace": "Brouillon",
  "entity_Email-Addr": "Adresse email",
  "entity_Email-Message": "Mail",
  "entity_Email-Mime-Part-Type": "Mail - Partie MIME",

opencti-platform/opencti-front/lang/front/ja.json

@@ -183,6 +183,7 @@
  "Apply on indicator observable types (none = ALL)": "指標の観測可能なタイプに適用する (なし = すべて)",
  "APPLY RULE": "ルールを適用する",
  "Applying this rule on the existing data": "既存のデータにルールを適用しています",
+ "Approve draft": "承認案",
  "Architecture execution env.": "CPUアーキテクチャ",
  "Architecture mode": "アーキテクチャモード",
  "are updating...": "がアップデート中",
@@ -975,6 +976,7 @@
  "entity_DeleteOperation": "削除操作",
  "entity_Directory": "ディレクトリ",
  "entity_Domain-Name": "ドメイン名",
+ "entity_DraftWorkspace": "ワークスペース",
  "entity_Email-Addr": "Eメールアドレス",
  "entity_Email-Message": "Eメールメッセージ",
  "entity_Email-Mime-Part-Type": "Eメールメッセージ - MIMEマルチパート",

opencti-platform/opencti-front/lang/front/ko.json

@@ -183,6 +183,7 @@
  "Apply on indicator observable types (none = ALL)": "지표 관찰 가능 항목 유형에 적용 (없음 = 모든 유형)",
  "APPLY RULE": "규칙 적용",
  "Applying this rule on the existing data": "기존 데이터에 이 규칙 적용",
+ "Approve draft": "초안 승인",
  "Architecture execution env.": "아키텍처 실행 환경",
  "Architecture mode": "아키텍처 모드",
  "are updating...": "업데이트 중...",
@@ -975,6 +976,7 @@
  "entity_DeleteOperation": "삭제 작업",
  "entity_Directory": "디렉토리",
  "entity_Domain-Name": "도메인 이름",
+ "entity_DraftWorkspace": "초안 작업 공간",
  "entity_Email-Addr": "이메일 주소",
  "entity_Email-Message": "이메일 메시지",
  "entity_Email-Mime-Part-Type": "이메일 메시지 - MIME 부분",

opencti-platform/opencti-front/lang/front/zh.json

@@ -183,6 +183,7 @@
  "Apply on indicator observable types (none = ALL)": "适用于指标观测类型 (无 = 全部)",
  "APPLY RULE": "应用规则",
  "Applying this rule on the existing data": "对现有数据应用此规则",
+ "Approve draft": "批准草案",
  "Architecture execution env.": "架构执行环境",
  "Architecture mode": "架构模式",
  "are updating...": "正在更新...",
@@ -975,6 +976,7 @@
  "entity_DeleteOperation": "删除操作",
  "entity_Directory": "目录",
  "entity_Domain-Name": "域名",
+ "entity_DraftWorkspace": "草案工作区",
  "entity_Email-Addr": "电子邮件地址",
  "entity_Email-Message": "电子邮件消息",
  "entity_Email-Mime-Part-Type": "电子邮件扩充部分类型",

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

@@ -1,16 +1,15 @@
 import React from 'react';
-import { Form, Formik } from 'formik';
-import DraftContextField from '@components/drafts/DraftContextField';
 import { graphql } from 'react-relay';
-import Button from '@mui/material/Button';
 import { useNavigate } from 'react-router-dom';
+import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
-import { useTheme } from '@mui/styles';
 import { SimplePaletteColorOptions } from '@mui/material';
-import useApiMutation from '../../../utils/hooks/useApiMutation';
+import { useTheme } from '@mui/styles';
 import { useFormatter } from '../../../components/i18n';
 import type { Theme } from '../../../components/Theme';
+import useApiMutation from '../../../utils/hooks/useApiMutation';
 import useAuth from '../../../utils/hooks/useAuth';
+import { truncate } from '../../../utils/String';
 
 export const draftContextBannerMutation = graphql`
  mutation DraftContextBannerMutation(
@@ -26,34 +25,22 @@ 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);
  const theme = useTheme<Theme>();
  const { me } = useAuth();
  const navigate = useNavigate();
- const currentDraftContext = me.draftContext ? { label: me.draftContext.name, value: me.draftContext.id } : {};
-
- const initialValues = { draft_context: currentDraftContext };
- const draftModeColor = (theme.palette.warning as SimplePaletteColorOptions)?.main ?? theme.palette.primary.main;
+ const currentDraftContextName = me.draftContext ? me.draftContext.name : '';
 
- const handleSubmitField = (
- name: string,
- value: string | null,
- ) => {
- if (value) {
- commit({
- variables: {
- input: { key: name, value, operation: 'replace' },
- },
- onCompleted: () => {
- navigate(`/dashboard/drafts/${value}`);
- },
- });
- }
- };
+ const draftModeColor = getDraftModeColor(theme);
 
- const handleSwitchToLive = () => {
+ const handleExitDraft = () => {
  commit({
  variables: {
  input: { key: 'draft_context', value: '' },
@@ -66,39 +53,39 @@ const DraftContextBanner = () => {
 
  return (
  <div style={{ padding: '0 12px' }}>
- <Formik
- onSubmit={() => {}}
- enableReinitialize={true}
- initialValues={initialValues}
- >
- <Form 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')}
- />
- </div>
- <div style={{ marginRight: '10px', minWidth: 160 }}>
-  <DraftContextField onChange={handleSubmitField}/>
- </div>
- <div>
-  <Button
-  variant="contained"
-  color="primary"
-  style={{ width: '100%' }}
-  onClick={handleSwitchToLive}
- >
-  {t_i18n('Exit draft')}
- </Button>
- </div>
- </Form>
- </Formik>
+ <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)}`}
+ />
+ </div>
+ <div>
+ <Button
+ variant="contained"
+ color="primary"
+  style={{ width: '100%', height: 32 }}
+  onClick={handleExitDraft}
+ >
+  {t_i18n('Approve draft')}
+ </Button>
+ </div>
+ <div style={{ padding: '0 12px' }}>
+ <Button
+ color="primary"
+ style={{ width: '100%', height: 32 }}
+ onClick={handleExitDraft}
+ >
+ {t_i18n('Exit draft')}
+ </Button>
+ </div>
+ </div>
  </div>
  );
 };

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

@@ -16,7 +16,7 @@ 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 from '@components/drafts/DraftContextBanner';
+import DraftContextBanner, { getDraftModeColor } from '@components/drafts/DraftContextBanner';
 import { useFormatter } from '../../../components/i18n';
 import SearchInput from '../../../components/SearchInput';
 import { APP_BASE_PATH, fileUri, MESSAGING$ } from '../../../relay/environment';
@@ -74,7 +74,7 @@ const useStyles = makeStyles<Theme>((theme) => ({
  width: '30%',
  },
  barRight: {
- right: theme.spacing(2),
+ marginRight: theme.spacing(2),
  height: '100%',
  display: 'flex',
  alignItems: 'center',
@@ -226,6 +226,9 @@ const TopBarComponent: FunctionComponent<TopBarProps> = ({
  };
  // global search keyword
  const keyword = decodeSearchKeyword(location.pathname.match(/(?:\/dashboard\/search\/(?:knowledge|files)\/(.*))/)?.[1] ?? '');
+ // draft
+ const draftModeEnabled = isDraftFeatureEnabled && me.draftContext;
+ const draftModeColor = getDraftModeColor(theme);
  return (
  <AppBar
  position="fixed"
@@ -240,6 +243,7 @@ const TopBarComponent: FunctionComponent<TopBarProps> = ({
  alignItems: 'center',
  marginTop: bannerHeightNumber + settingsMessagesBannerHeight,
  padding: 0,
+ borderBottom: draftModeEnabled ? `1px solid ${draftModeColor}` : 'initial',
  }}
  >
  <div className={classes.logoContainer} style={navOpen ? { width: OPEN_BAR_WIDTH } : {}}>
@@ -262,11 +266,12 @@ const TopBarComponent: FunctionComponent<TopBarProps> = ({
  />
  </div>
  )}
- {isDraftFeatureEnabled && me.draftContext && (
+ {draftModeEnabled && (
  <DraftContextBanner/>
  )}
  <div className={classes.barRight}>
  <div className={classes.barRightContainer}>
+ {!draftModeEnabled && (
  <Security needs={[KNOWLEDGE]}>
  <>
  <Tooltip title={t_i18n('Notifications')}>
@@ -299,6 +304,7 @@ const TopBarComponent: FunctionComponent<TopBarProps> = ({
  </Tooltip>
  </>
  </Security>
+ )}
  <IconButton
  color="inherit"
  size="medium"