[frontend] style & nav modifications

OpenCTI-Platform · Oct 14, 2024 · 47bb797 · 47bb797
1 parent deaf330
commit 47bb797
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/opencti-platform/opencti-front/src/private/Index.tsx b/opencti-platform/opencti-front/src/private/Index.tsx
@@ -81,9 +81,6 @@ const Index = ({ settings }: IndexProps) => {
       {(settings.platform_session_idle_timeout ?? 0) > 0 && <TimeoutLock />}
       <SettingsMessagesBanner />
       <PlatformCriticalAlertDialog alerts={settings.platform_critical_alerts}/>
-      {me.draft_context && (
-        <DraftContextBanner/>
-      )}
       <Box
         sx={{
           display: 'flex',

diff --git a/opencti-platform/opencti-front/src/private/components/drafts/DraftContextBanner.tsx b/opencti-platform/opencti-front/src/private/components/drafts/DraftContextBanner.tsx
@@ -3,9 +3,11 @@ import { Form, Formik } from 'formik';
 import DraftField from '@components/drafts/DraftContextField';
 import { graphql } from 'react-relay';
 import Button from '@mui/material/Button';
+import { useNavigate } from 'react-router-dom';
 import useApiMutation from '../../../utils/hooks/useApiMutation';
 import { useFormatter } from '../../../components/i18n';
 import useAuth from '../../../utils/hooks/useAuth';
+import { APP_BASE_PATH } from '../../../relay/environment';
 
 export const draftContextBannerMutation = graphql`
     mutation DraftContextBannerMutation(
@@ -22,6 +24,7 @@ const DraftContextBanner = () => {
   const { t_i18n } = useFormatter();
   const [commit] = useApiMutation(draftContextBannerMutation);
   const { me } = useAuth();
+  const navigate = useNavigate();
   const currentDraftContext = me.draft_context ?? '';
 
   const handleSubmitField = (
@@ -32,6 +35,9 @@ const DraftContextBanner = () => {
       variables: {
         input: { key: name, value, operation: 'replace' },
       },
+      onCompleted: () => {
+        navigate(`${APP_BASE_PATH}/drafts/${value}`);
+      },
     });
   };
 
@@ -40,6 +46,9 @@ const DraftContextBanner = () => {
       variables: {
         input: { key: 'draft_context', value: '' },
       },
+      onCompleted: () => {
+        navigate(`${APP_BASE_PATH}`);
+      },
     });
   };
 
@@ -49,8 +58,8 @@ const DraftContextBanner = () => {
         onSubmit={() => {}}
         initialValues={{ draft_context: currentDraftContext }}
       >
-        <Form style={{ display: 'flex', width: '100%', alignItems: 'center' }}>
-          <div style={{ flex: 1, marginRight: '10px' }}>
+        <Form style={{ display: 'flex', width: '100%', alignItems: 'left' }}>
+          <div style={{ flex: 2, marginRight: '10px' }}>
             <DraftField onChange={handleSubmitField}/>
           </div>
           <div style={{ flex: 1, alignItems: 'right' }}>

diff --git a/opencti-platform/opencti-front/src/private/components/drafts/DraftLine.tsx b/opencti-platform/opencti-front/src/private/components/drafts/DraftLine.tsx
@@ -10,6 +10,7 @@ import { MoreVert } from '@mui/icons-material';
 import DraftPopover from '@components/drafts/DraftPopover';
 import { DraftsLinesPaginationQuery$variables } from '@components/drafts/__generated__/DraftsLinesPaginationQuery.graphql';
 import { DraftLine_node$key } from '@components/drafts/__generated__/DraftLine_node.graphql';
+import { Link } from 'react-router-dom';
 import ItemIcon from '../../../components/ItemIcon';
 import { DataColumns } from '../../../components/list_lines';
 
@@ -37,6 +38,8 @@ export const DraftLine: React.FC<DraftLineProps> = ({
     <ListItem
       divider={true}
       style={{ paddingLeft: 10 }}
+      component={Link}
+      to={`/dashboard/drafts/${data.id}`}
     >
       <ListItemIcon>
         <ItemIcon type={data.entity_type} />

diff --git a/opencti-platform/opencti-front/src/private/components/drafts/Root.tsx b/opencti-platform/opencti-front/src/private/components/drafts/Root.tsx
@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import { boundaryWrapper } from '../Error';
 
 const Drafts = lazy(() => import('./Drafts'));
+const DraftEntities = lazy(() => import('./DraftEntities'));
 
 const Root = () => {
   return (
@@ -11,9 +12,12 @@ const Root = () => {
         path="/"
         element={boundaryWrapper(Drafts)}
       />
+      <Route
+        path="/:draftId/*"
+        element={boundaryWrapper(DraftEntities)}
+      />
     </Routes>
   );
-  // TODO add root for each draft boundaryWrapper(DraftEntities) :
 };
 
 export default Root;
diff --git a/opencti-platform/opencti-front/src/private/components/nav/TopBar.tsx b/opencti-platform/opencti-front/src/private/components/nav/TopBar.tsx
@@ -236,6 +236,7 @@ const TopBarComponent: FunctionComponent<TopBarProps> = ({
       {/* Header and Footer Banners containing classification level of system */}
       <Toolbar
         style={{
+          display: 'flex',
           alignItems: 'center',
           marginTop: bannerHeightNumber + settingsMessagesBannerHeight,
           padding: 0,
@@ -262,7 +263,9 @@ const TopBarComponent: FunctionComponent<TopBarProps> = ({
           </div>
         )}
         {isDraftFeatureEnabled && me.draft_context
-          && <DraftContextBanner/>
+          && <div style={{ flex: 1 }}>
+            <DraftContextBanner/>
+          </div>
         }
         <div className={classes.barRight}>
           <div className={classes.barRightContainer}>