[frontend] Replaced Creation Floating Action Buttons for Events

fbicyber · Jul 17, 2024 · 568baed · 568baed
1 parent 692a675
commit 568baed
Show file tree

Hide file tree

Showing 20 changed files with 264 additions and 116 deletions.
diff --git a/opencti-platform/opencti-front/lang/front/de.json b/opencti-platform/opencti-front/lang/front/de.json
@@ -410,6 +410,7 @@
   "Courses of action": "Handlungsabläufe",
   "Courses of action view": "Ansicht der Handlungsabläufe",
   "Create": "Erstellen",
+  "Create ...": "{entity_type} erstellen",
   "create": "Erstellungsereignisse",
   "CREATE": "CREATE",
   "Create / Update dashboards": "Erstellen / Aktualisieren von Dashboards",

diff --git a/opencti-platform/opencti-front/lang/front/en.json b/opencti-platform/opencti-front/lang/front/en.json
@@ -411,6 +411,7 @@
   "Courses of action view": "Courses of action view",
   "CREATE": "CREATE",
   "Create": "Create",
+  "Create ...": "Create {entity_type}",
   "create": "create",
   "Create / Update dashboards": "Create / Update dashboards",
   "Create / Update investigations": "Create / Update investigations",

diff --git a/opencti-platform/opencti-front/lang/front/es.json b/opencti-platform/opencti-front/lang/front/es.json
@@ -410,6 +410,7 @@
   "Courses of action": "Contramedidas",
   "Courses of action view": "Vista de las contramedidas",
   "Create": "Crear",
+  "Create ...": "Crear {entity_type}",
   "CREATE": "CREAR",
   "create": "crear",
   "Create / Update dashboards": "Crear / Actualizar paneles",

diff --git a/opencti-platform/opencti-front/lang/front/fr.json b/opencti-platform/opencti-front/lang/front/fr.json
@@ -410,6 +410,7 @@
   "Courses of action": "Conduites à suivre",
   "Courses of action view": "Vue conduites à suivre",
   "Create": "Créer",
+  "Create ...": "Créer {entity_type}",
   "CREATE": "CREER",
   "create": "créer",
   "Create / Update dashboards": "Créer / Mettre à jour des tableaux de bord",

diff --git a/opencti-platform/opencti-front/lang/front/ja.json b/opencti-platform/opencti-front/lang/front/ja.json
@@ -410,6 +410,7 @@
   "Courses of action": "行動指針",
   "Courses of action view": "行動指針の表示",
   "Create": "作成",
+  "Create ...": "{entity_type} 作成",
   "CREATE": "作成",
   "create": "作成する",
   "Create / Update dashboards": "ダッシュボードの作成/更新",

diff --git a/opencti-platform/opencti-front/lang/front/zh.json b/opencti-platform/opencti-front/lang/front/zh.json
@@ -410,6 +410,7 @@
   "Courses of action": "应对措施",
   "Courses of action view": "应对措施视图",
   "Create": "创建",
+  "Create ...": "创建 {entity_type}",
   "CREATE": "创建",
   "create": "创建",
   "Create / Update dashboards": "创建/更新仪表板",

diff --git a/opencti-platform/opencti-front/src/components/CreateEntityControlledDial.tsx b/opencti-platform/opencti-front/src/components/CreateEntityControlledDial.tsx
@@ -0,0 +1,47 @@
+import { Button } from '@mui/material';
+import React, { FunctionComponent } from 'react';
+import { DrawerControlledDialProps } from '../private/components/common/drawer/Drawer';
+import { useFormatter } from './i18n';
+
+interface CreateEntityControlledDialProps extends DrawerControlledDialProps {
+  entityType: string;
+  color?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
+  size?: 'small' | 'medium' | 'large';
+  variant?: 'text' | 'contained' | 'outlined';
+  style?: React.CSSProperties;
+}
+
+const CreateEntityControlledDial: FunctionComponent<CreateEntityControlledDialProps> = ({
+  onOpen,
+  entityType,
+  color = 'primary',
+  size = 'small',
+  variant = 'contained',
+  style,
+}) => {
+  const { t_i18n } = useFormatter();
+  const buttonValue = t_i18n('', {
+    id: 'Create ...',
+    values: { entity_type: t_i18n(`entity_${entityType}`) },
+  });
+  return (
+    <Button
+      onClick={onOpen}
+      color={color}
+      size={size}
+      variant={variant}
+      aria-label={buttonValue}
+      title={buttonValue}
+      sx={style ?? {
+        marginLeft: '10px',
+        padding: '7px 10px',
+      }}
+    >
+      <div style={{ display: 'flex' }}>
+        {buttonValue}
+      </div>
+    </Button>
+  );
+};
+
+export default CreateEntityControlledDial;
diff --git a/...i-front/src/private/components/analyses/external_references/ExternalReferenceCreation.tsx b/...i-front/src/private/components/analyses/external_references/ExternalReferenceCreation.tsx
@@ -13,9 +13,8 @@ import { Add } from '@mui/icons-material';
 import makeStyles from '@mui/styles/makeStyles';
 import { RecordSourceSelectorProxy } from 'relay-runtime';
 import { FormikConfig } from 'formik/dist/types';
-import Drawer, { DrawerVariant } from '@components/common/drawer/Drawer';
+import Drawer, { DrawerControlledDialProps, DrawerVariant } from '@components/common/drawer/Drawer';
 import useHelper from 'src/utils/hooks/useHelper';
-import CreateEntityControlledDial from '@components/common/menus/CreateEntityControlledDial';
 import useApiMutation from 'src/utils/hooks/useApiMutation';
 import { handleErrorInForm } from '../../../../relay/environment';
 import { useFormatter } from '../../../../components/i18n';
@@ -26,6 +25,7 @@ import { ExternalReferencesLinesPaginationQuery$variables } from './__generated_
 import type { Theme } from '../../../../components/Theme';
 import { ExternalReferenceAddInput, ExternalReferenceCreationMutation, ExternalReferenceCreationMutation$data } from './__generated__/ExternalReferenceCreationMutation.graphql';
 import CustomFileUploader from '../../common/files/CustomFileUploader';
+import CreateEntityControlledDial from '../../../../components/CreateEntityControlledDial';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -207,12 +207,15 @@ const ExternalReferenceCreation: FunctionComponent<ExternalReferenceCreationProp
   };
 
   const isEmbeddedInExternalReferenceCreation = true;
+  const CreateExternalReferenceControlledDial = (props: DrawerControlledDialProps) => (
+    <CreateEntityControlledDial entityType='External-Reference' {...props} />
+  );
   const renderClassic = () => {
     return (
       <Drawer
         title={t_i18n('Create an external reference')}
         variant={isFABReplaced ? undefined : DrawerVariant.create}
-        controlledDial={isFABReplaced ? CreateEntityControlledDial('entity_External-Reference') : undefined}
+        controlledDial={isFABReplaced ? CreateExternalReferenceControlledDial : undefined}
       >
         {({ onClose }) => (
           <Formik

diff --git a/...cti-platform/opencti-front/src/private/components/analyses/groupings/GroupingCreation.tsx b/...cti-platform/opencti-front/src/private/components/analyses/groupings/GroupingCreation.tsx
@@ -1,15 +1,14 @@
 import React, { FunctionComponent, useState } from 'react';
 import { Field, Form, Formik } from 'formik';
 import Button from '@mui/material/Button';
-import Drawer, { DrawerVariant } from '@components/common/drawer/Drawer';
+import Drawer, { DrawerControlledDialProps, DrawerVariant } from '@components/common/drawer/Drawer';
 import * as Yup from 'yup';
 import { graphql } from 'react-relay';
 import makeStyles from '@mui/styles/makeStyles';
 import { RecordSourceSelectorProxy } from 'relay-runtime';
 import { FormikConfig } from 'formik/dist/types';
 import { useNavigate } from 'react-router-dom';
 import useHelper from 'src/utils/hooks/useHelper';
-import CreateEntityControlledDial from '@components/common/menus/CreateEntityControlledDial';
 import { handleErrorInForm } from '../../../../relay/environment';
 import TextField from '../../../../components/TextField';
 import ObjectMarkingField from '../../common/form/ObjectMarkingField';
@@ -31,6 +30,7 @@ import useDefaultValues from '../../../../utils/hooks/useDefaultValues';
 import RichTextField from '../../../../components/fields/RichTextField';
 import CustomFileUploader from '../../common/files/CustomFileUploader';
 import useApiMutation from '../../../../utils/hooks/useApiMutation';
+import CreateEntityControlledDial from '../../../../components/CreateEntityControlledDial';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -292,11 +292,14 @@ const GroupingCreation = ({
   const { isFeatureEnable } = useHelper();
   const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
   const updater = (store: RecordSourceSelectorProxy) => insertNode(store, 'Pagination_groupings', paginationOptions, 'groupingAdd');
+  const CreateGroupingControlledDial = (props: DrawerControlledDialProps) => (
+    <CreateEntityControlledDial entityType='Grouping' {...props} />
+  );
   return (
     <Drawer
       title={t_i18n('Create a grouping')}
       variant={isFABReplaced ? undefined : DrawerVariant.create}
-      controlledDial={isFABReplaced ? CreateEntityControlledDial('entity_Grouping') : undefined}
+      controlledDial={isFABReplaced ? CreateGroupingControlledDial : undefined}
     >
       <GroupingCreationForm updater={updater} />
     </Drawer>

diff --git a/...pencti-front/src/private/components/analyses/malware_analyses/MalwareAnalysisCreation.tsx b/...pencti-front/src/private/components/analyses/malware_analyses/MalwareAnalysisCreation.tsx
@@ -6,9 +6,8 @@ import { FormikConfig } from 'formik/dist/types';
 import { Field, Form, Formik } from 'formik';
 import Button from '@mui/material/Button';
 import { RecordSourceSelectorProxy } from 'relay-runtime';
-import Drawer, { DrawerVariant } from '@components/common/drawer/Drawer';
+import Drawer, { DrawerControlledDialProps, DrawerVariant } from '@components/common/drawer/Drawer';
 import useHelper from 'src/utils/hooks/useHelper';
-import CreateEntityControlledDial from '@components/common/menus/CreateEntityControlledDial';
 import ObjectAssigneeField from '@components/common/form/ObjectAssigneeField';
 import { useFormatter } from '../../../../components/i18n';
 import { insertNode } from '../../../../utils/store';
@@ -33,6 +32,7 @@ import { handleErrorInForm } from '../../../../relay/environment';
 import useDefaultValues from '../../../../utils/hooks/useDefaultValues';
 import CustomFileUploader from '../../common/files/CustomFileUploader';
 import useApiMutation from '../../../../utils/hooks/useApiMutation';
+import CreateEntityControlledDial from '../../../../components/CreateEntityControlledDial';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -357,11 +357,14 @@ const MalwareAnalysisCreation = ({
     paginationOptions,
     'malwareAnalysisAdd',
   );
+  const CreateMalwareAnalysisControlledDial = (props: DrawerControlledDialProps) => (
+    <CreateEntityControlledDial entityType='Malware-Analysis' {...props} />
+  );
   const renderClassic = () => (
     <Drawer
       title={t_i18n('Create a malware analysis')}
       variant={isFABReplaced ? undefined : DrawerVariant.create}
-      controlledDial={isFABReplaced ? CreateEntityControlledDial('entity_Malware-Analysis') : undefined}
+      controlledDial={isFABReplaced ? CreateMalwareAnalysisControlledDial : undefined}
     >
       <MalwareAnalysisCreationForm updater={updater} />
     </Drawer>

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/notes/NoteCreation.tsx b/opencti-platform/opencti-front/src/private/components/analyses/notes/NoteCreation.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent, useState } from 'react';
 import { Field, Form, Formik } from 'formik';
 import * as Yup from 'yup';
 import { graphql } from 'react-relay';
-import Drawer, { DrawerVariant } from '@components/common/drawer/Drawer';
+import Drawer, { DrawerControlledDialProps, DrawerVariant } from '@components/common/drawer/Drawer';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -13,7 +13,6 @@ import makeStyles from '@mui/styles/makeStyles';
 import { FormikConfig } from 'formik/dist/types';
 import { RecordSourceSelectorProxy } from 'relay-runtime';
 import useHelper from 'src/utils/hooks/useHelper';
-import CreateEntityControlledDial from '@components/common/menus/CreateEntityControlledDial';
 import { useFormatter } from '../../../../components/i18n';
 import ObjectMarkingField from '../../common/form/ObjectMarkingField';
 import CreatedByField from '../../common/form/CreatedByField';
@@ -36,6 +35,7 @@ import { NoteCreationMutation$variables } from './__generated__/NoteCreationMuta
 import useDefaultValues from '../../../../utils/hooks/useDefaultValues';
 import CustomFileUploader from '../../common/files/CustomFileUploader';
 import useApiMutation from '../../../../utils/hooks/useApiMutation';
+import CreateEntityControlledDial from '../../../../components/CreateEntityControlledDial';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -322,12 +322,15 @@ const NoteCreation: FunctionComponent<NoteCreationProps> = ({
   const updater = (store: RecordSourceSelectorProxy, key: string) => {
     return insertNode(store, 'Pagination_notes', paginationOptions, key);
   };
+  const CreateNoteControlledDial = (props: DrawerControlledDialProps) => (
+    <CreateEntityControlledDial entityType='Note' {...props} />
+  );
   const renderClassic = () => {
     return (
       <Drawer
         title={t_i18n('Create a note')}
         variant={isFABReplaced ? undefined : DrawerVariant.create}
-        controlledDial={isFABReplaced ? CreateEntityControlledDial('entity_Note') : undefined}
+        controlledDial={isFABReplaced ? CreateNoteControlledDial : undefined}
       >
         <NoteCreationForm inputValue={inputValue} updater={updater} />
       </Drawer>

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportCreation.tsx b/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportCreation.tsx
@@ -7,9 +7,8 @@ import makeStyles from '@mui/styles/makeStyles';
 import { FormikConfig } from 'formik/dist/types';
 import { RecordSourceSelectorProxy } from 'relay-runtime';
 import { useNavigate } from 'react-router-dom';
-import Drawer, { DrawerVariant } from '@components/common/drawer/Drawer';
+import Drawer, { DrawerControlledDialProps, DrawerVariant } from '@components/common/drawer/Drawer';
 import useHelper from 'src/utils/hooks/useHelper';
-import CreateEntityControlledDial from '@components/common/menus/CreateEntityControlledDial';
 import { useFormatter } from '../../../../components/i18n';
 import { handleErrorInForm } from '../../../../relay/environment';
 import TextField from '../../../../components/TextField';
@@ -34,6 +33,7 @@ import RichTextField from '../../../../components/fields/RichTextField';
 import ObjectParticipantField from '../../common/form/ObjectParticipantField';
 import CustomFileUploader from '../../common/files/CustomFileUploader';
 import useApiMutation from '../../../../utils/hooks/useApiMutation';
+import CreateEntityControlledDial from '../../../../components/CreateEntityControlledDial';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
@@ -339,11 +339,14 @@ const ReportCreation = ({
     paginationOptions,
     'reportAdd',
   );
+  const CreateReportControlledDial = (props: DrawerControlledDialProps) => (
+    <CreateEntityControlledDial entityType='Report' {...props} />
+  );
   return (
     <Drawer
       title={t_i18n('Create a report')}
       variant={isFABReplaced ? undefined : DrawerVariant.create}
-      controlledDial={isFABReplaced ? CreateEntityControlledDial('entity_Report') : undefined}
+      controlledDial={isFABReplaced ? CreateReportControlledDial : undefined}
     >
       <ReportCreationForm updater={updater} />
     </Drawer>

diff --git a/...platform/opencti-front/src/private/components/common/menus/CreateEntityControlledDial.tsx b/...platform/opencti-front/src/private/components/common/menus/CreateEntityControlledDial.tsx
diff --git a/opencti-platform/opencti-front/src/private/components/events/Incidents.tsx b/opencti-platform/opencti-front/src/private/components/events/Incidents.tsx
@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react';
+import useHelper from 'src/utils/hooks/useHelper';
 import ListLines from '../../../components/list_lines/ListLines';
 import IncidentsLines, { incidentsLinesPaginationQuery } from './incidents/IncidentsLines';
 import IncidentCreation from './incidents/IncidentCreation';
@@ -21,6 +22,7 @@ export const LOCAL_STORAGE_KEY = 'incidents';
 
 const Incidents: FunctionComponent = () => {
   const { t_i18n } = useFormatter();
+  const { isFeatureEnable } = useHelper();
   const {
     platformModuleHelpers: { isRuntimeFieldEnable },
   } = useAuth();
@@ -111,6 +113,7 @@ const Incidents: FunctionComponent = () => {
       isSortable: isRuntimeSort,
     },
   };
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
   const renderLines = () => {
     return (
       <>
@@ -135,6 +138,11 @@ const Incidents: FunctionComponent = () => {
           paginationOptions={queryPaginationOptions}
           numberOfElements={numberOfElements}
           iconExtension={true}
+          createButton={isFABReplaced && (
+            <Security needs={[KNOWLEDGE_KNUPDATE]}>
+              <IncidentCreation paginationOptions={queryPaginationOptions} />
+            </Security>
+          )}
         >
           {queryRef && (
             <React.Suspense
@@ -179,9 +187,11 @@ const Incidents: FunctionComponent = () => {
     <ExportContextProvider>
       <Breadcrumbs variant="list" elements={[{ label: t_i18n('Events') }, { label: t_i18n('Incidents'), current: true }]} />
       {renderLines()}
-      <Security needs={[KNOWLEDGE_KNUPDATE]}>
-        <IncidentCreation paginationOptions={queryPaginationOptions} />
-      </Security>
+      {!isFABReplaced && (
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
+          <IncidentCreation paginationOptions={queryPaginationOptions} />
+        </Security>
+      )}
     </ExportContextProvider>
   );
 };