[frontend] Fix delete button behaviour

OpenCTI-Platform · Oct 28, 2024 · ff70fb9 · ff70fb9
1 parent 1a98839
commit ff70fb9
Show file tree

Hide file tree

Showing 19 changed files with 352 additions and 174 deletions.
diff --git a/...m/opencti-front/src/private/components/analyses/external_references/ExternalReference.tsx b/...m/opencti-front/src/private/components/analyses/external_references/ExternalReference.tsx
@@ -49,7 +49,7 @@ ExternalReferenceComponentProps
       <ExternalReferenceHeader
         externalReference={externalReference}
         PopoverComponent={
-          <ExternalReferencePopover id={externalReference.id} handleRemove={undefined} />
+          <ExternalReferencePopover id={externalReference.id} handleRemove={undefined} variant={'inLine'}/>
         }
         EditComponent={isFABReplaced && (
           <Security needs={[KNOWLEDGE_KNUPDATE]}>

diff --git a/...form/opencti-front/src/private/components/analyses/groupings/GroupingEditionContainer.jsx b/...form/opencti-front/src/private/components/analyses/groupings/GroupingEditionContainer.jsx
@@ -5,7 +5,6 @@ import { useFormatter } from '../../../../components/i18n';
 import GroupingEditionOverview from './GroupingEditionOverview';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
 import useHelper from '../../../../utils/hooks/useHelper';
-import GroupingDeletion from './GroupingDeletion';
 
 const GroupingEditionContainer = (props) => {
   const { t_i18n } = useFormatter();
@@ -30,11 +29,6 @@ const GroupingEditionContainer = (props) => {
           context={editContext}
           handleClose={handleClose}
         />
-        {isFABReplaced && (
-          <GroupingDeletion
-            groupingId={grouping.id}
-          />
-        )}
       </>
     </Drawer>
   );

diff --git a/...tform/opencti-front/src/private/components/analyses/groupings/GroupingEditionOverview.jsx b/...tform/opencti-front/src/private/components/analyses/groupings/GroupingEditionOverview.jsx
@@ -3,6 +3,7 @@ import { createFragmentContainer, graphql } from 'react-relay';
 import { Field, Form, Formik } from 'formik';
 import * as Yup from 'yup';
 import * as R from 'ramda';
+import GroupingDeletion from './GroupingDeletion';
 import { useFormatter } from '../../../../components/i18n';
 import TextField from '../../../../components/TextField';
 import { SubscriptionFocus } from '../../../../components/Subscription';
@@ -19,6 +20,7 @@ import { fieldSpacingContainerStyle } from '../../../../utils/field';
 import useFormEditor from '../../../../utils/hooks/useFormEditor';
 import AlertConfidenceForEntity from '../../../../components/AlertConfidenceForEntity';
 import { useDynamicSchemaEditionValidation, useIsMandatoryAttribute, yupShapeConditionalRequired } from '../../../../utils/hooks/useEntitySettings';
+import useHelper from '../../../../utils/hooks/useHelper';
 
 export const groupingMutationFieldPatch = graphql`
   mutation GroupingEditionOverviewFieldPatchMutation(
@@ -85,6 +87,8 @@ const GROUPING_TYPE = 'Grouping';
 const GroupingEditionOverviewComponent = (props) => {
   const { grouping, enableReferences, context, handleClose } = props;
   const { t_i18n } = useFormatter();
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
   const { mandatoryAttributes } = useIsMandatoryAttribute(GROUPING_TYPE);
 
@@ -288,16 +292,24 @@ const GroupingEditionOverviewComponent = (props) => {
               setFieldValue={setFieldValue}
               onChange={editor.changeMarking}
             />
-            {enableReferences && (
-              <CommitMessage
-                submitForm={submitForm}
-                disabled={isSubmitting || !isValid || !dirty}
-                setFieldValue={setFieldValue}
-                open={false}
-                values={values.references}
-                id={grouping.id}
-              />
-            )}
+            <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1 }}>
+              {isFABReplaced
+                ? <GroupingDeletion
+                    groupingId={grouping.id}
+                  />
+                : <div/>
+              }
+              {enableReferences && (
+                <CommitMessage
+                  submitForm={submitForm}
+                  disabled={isSubmitting || !isValid || !dirty}
+                  setFieldValue={setFieldValue}
+                  open={false}
+                  values={values.references}
+                  id={grouping.id}
+                />
+              )}
+            </div>
           </Form>
         </div>
       )}

diff --git a/...ront/src/private/components/analyses/malware_analyses/MalwareAnalysisEditionContainer.tsx b/...ront/src/private/components/analyses/malware_analyses/MalwareAnalysisEditionContainer.tsx
@@ -9,14 +9,12 @@ import {
 } from '@components/analyses/malware_analyses/__generated__/MalwareAnalysisEditionOverview_malwareAnalysis.graphql';
 import { MalwareAnalysisEditionDetails_malwareAnalysis$key } from '@components/analyses/malware_analyses/__generated__/MalwareAnalysisEditionDetails_malwareAnalysis.graphql';
 import useHelper from 'src/utils/hooks/useHelper';
-import { useParams } from 'react-router-dom';
 import { useFormatter } from '../../../../components/i18n';
 import ErrorNotFound from '../../../../components/ErrorNotFound';
 import MalwareAnalysisEditionOverview from './MalwareAnalysisEditionOverview';
 import { MalwareAnalysisEditionContainerQuery } from './__generated__/MalwareAnalysisEditionContainerQuery.graphql';
 import MalwareAnalysisEditionDetails from './MalwareAnalysisEditionDetails';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
-import MalwareAnalysisDeletion from './MalwareAnalysisDeletion';
 
 interface MalwareAnalysisEditionContainerProps {
   queryRef: PreloadedQuery<MalwareAnalysisEditionContainerQuery>
@@ -46,7 +44,6 @@ const MalwareAnalysisEditionContainer: FunctionComponent<MalwareAnalysisEditionC
   const { t_i18n } = useFormatter();
   const { isFeatureEnable } = useHelper();
   const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
-  const { malwareAnalysisId } = useParams() as { malwareAnalysisId: string };
   const { malwareAnalysis } = usePreloadedQuery(malwareAnalysisEditionQuery, queryRef);
 
   const [currentTab, setCurrentTab] = useState(0);
@@ -91,9 +88,6 @@ const MalwareAnalysisEditionContainer: FunctionComponent<MalwareAnalysisEditionC
               handleClose={onClose}
             />
           )}
-          {isFABReplaced && (
-            <MalwareAnalysisDeletion id={malwareAnalysisId} />
-          )}
         </>
       )}
     </Drawer>

diff --git a/...front/src/private/components/analyses/malware_analyses/MalwareAnalysisEditionOverview.tsx b/...front/src/private/components/analyses/malware_analyses/MalwareAnalysisEditionOverview.tsx
@@ -5,6 +5,7 @@ import * as Yup from 'yup';
 import { FormikConfig } from 'formik/dist/types';
 import { GenericContext } from '@components/common/model/GenericContextModel';
 import ObjectAssigneeField from '@components/common/form/ObjectAssigneeField';
+import MalwareAnalysisDeletion from '@components/analyses/malware_analyses/MalwareAnalysisDeletion';
 import TextField from '../../../../components/TextField';
 import { SubscriptionFocus } from '../../../../components/Subscription';
 import CreatedByField from '../../common/form/CreatedByField';
@@ -25,6 +26,7 @@ import useFormEditor, { GenericData } from '../../../../utils/hooks/useFormEdito
 import AlertConfidenceForEntity from '../../../../components/AlertConfidenceForEntity';
 import { parse } from '../../../../utils/Time';
 import { useDynamicSchemaEditionValidation, useIsMandatoryAttribute, yupShapeConditionalRequired } from '../../../../utils/hooks/useEntitySettings';
+import useHelper from '../../../../utils/hooks/useHelper';
 
 const malwareAnalysisMutationFieldPatch = graphql`
     mutation MalwareAnalysisEditionOverviewFieldPatchMutation(
@@ -144,6 +146,10 @@ MalwareAnalysisEditionOverviewProps
   handleClose,
 }) => {
   const { t_i18n } = useFormatter();
+
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
+
   const { mandatoryAttributes } = useIsMandatoryAttribute(MALWARE_ANALYSIS_TYPE);
   const basicShape = yupShapeConditionalRequired({
     product: Yup.string(),
@@ -372,16 +378,22 @@ MalwareAnalysisEditionOverviewProps
             setFieldValue={setFieldValue}
             onChange={editor.changeMarking}
           />
-          {enableReferences && (
-          <CommitMessage
-            submitForm={submitForm}
-            disabled={isSubmitting}
-            setFieldValue={setFieldValue}
-            values={values.references}
-            id={malwareAnalysis.id}
-            open={false}
-          />
-          )}
+          <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1 }}>
+            {isFABReplaced
+              ? <MalwareAnalysisDeletion id={malwareAnalysis.id}/>
+              : <div/>
+              }
+            {enableReferences && (
+            <CommitMessage
+              submitForm={submitForm}
+              disabled={isSubmitting}
+              setFieldValue={setFieldValue}
+              values={values.references}
+              id={malwareAnalysis.id}
+              open={false}
+            />
+            )}
+          </div>
         </Form>
       )}
     </Formik>

diff --git a/...platform/opencti-front/src/private/components/analyses/reports/ReportEditionContainer.jsx b/...platform/opencti-front/src/private/components/analyses/reports/ReportEditionContainer.jsx
@@ -5,7 +5,6 @@ import { useFormatter } from '../../../../components/i18n';
 import ReportEditionOverview from './ReportEditionOverview';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
 import Drawer, { DrawerVariant } from '../../common/drawer/Drawer';
-import ReportDeletion from './ReportDeletion';
 
 const ReportEditionContainer = (props) => {
   const { t_i18n } = useFormatter();
@@ -31,11 +30,6 @@ const ReportEditionContainer = (props) => {
           context={editContext}
           handleClose={handleClose}
         />
-        {isFABReplaced && (
-          <ReportDeletion
-            reportId={report.id}
-          />
-        )}
       </>
     </Drawer>
   );

diff --git a/...-platform/opencti-front/src/private/components/analyses/reports/ReportEditionOverview.jsx b/...-platform/opencti-front/src/private/components/analyses/reports/ReportEditionOverview.jsx
@@ -3,6 +3,7 @@ import { createFragmentContainer, graphql } from 'react-relay';
 import { Field, Form, Formik } from 'formik';
 import * as Yup from 'yup';
 import * as R from 'ramda';
+import ReportDeletion from './ReportDeletion';
 import { buildDate, parse } from '../../../../utils/Time';
 import { useFormatter } from '../../../../components/i18n';
 import TextField from '../../../../components/TextField';
@@ -23,6 +24,7 @@ import useFormEditor from '../../../../utils/hooks/useFormEditor';
 import ObjectParticipantField from '../../common/form/ObjectParticipantField';
 import AlertConfidenceForEntity from '../../../../components/AlertConfidenceForEntity';
 import { useDynamicSchemaEditionValidation, useIsMandatoryAttribute, yupShapeConditionalRequired } from '../../../../utils/hooks/useEntitySettings';
+import useHelper from '../../../../utils/hooks/useHelper';
 
 export const reportMutationFieldPatch = graphql`
   mutation ReportEditionOverviewFieldPatchMutation(
@@ -89,6 +91,8 @@ const REPORT_TYPE = 'Report';
 const ReportEditionOverviewComponent = (props) => {
   const { report, enableReferences, context, handleClose } = props;
   const { t_i18n } = useFormatter();
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
   const { mandatoryAttributes } = useIsMandatoryAttribute(REPORT_TYPE);
   const basicShape = yupShapeConditionalRequired({
@@ -347,7 +351,13 @@ const ReportEditionOverviewComponent = (props) => {
             onChange={editor.changeMarking}
             required={mandatoryAttributes.includes('objectMarking')}
           />
-          {enableReferences && (
+          <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1 }}>
+            {isFABReplaced
+              ? <ReportDeletion
+                  reportId={report.id}
+                />
+              : <div/>}
+            {enableReferences && (
             <CommitMessage
               submitForm={submitForm}
               disabled={isSubmitting || !isValid || !dirty}
@@ -356,7 +366,8 @@ const ReportEditionOverviewComponent = (props) => {
               values={values.references}
               id={report.id}
             />
-          )}
+            )}
+          </div>
         </Form>
       )}
     </Formik>

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportPopover.jsx b/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportPopover.jsx
@@ -3,14 +3,14 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import MoreVert from '@mui/icons-material/MoreVert';
 import ToggleButton from '@mui/material/ToggleButton';
+import ReportPopoverDeletion from './ReportPopoverDeletion';
 import StixCoreObjectEnrichment from '../../common/stix_core_objects/StixCoreObjectEnrichment';
 import { useFormatter } from '../../../../components/i18n';
 import { reportEditionQuery } from './ReportEdition';
 import ReportEditionContainer from './ReportEditionContainer';
 import Security from '../../../../utils/Security';
 import { KNOWLEDGE_KNENRICHMENT, KNOWLEDGE_KNUPDATE_KNDELETE } from '../../../../utils/hooks/useGranted';
 import { QueryRenderer } from '../../../../relay/environment';
-import ReportDeletion from './ReportDeletion';
 import useHelper from '../../../../utils/hooks/useHelper';
 
 const ReportPopover = ({ id }) => {
@@ -66,7 +66,7 @@ const ReportPopover = ({ id }) => {
           </Security>
         </Menu>
         <StixCoreObjectEnrichment stixCoreObjectId={id} open={displayEnrichment} handleClose={handleCloseEnrichment} />
-        <ReportDeletion
+        <ReportPopoverDeletion
           reportId={id}
           displayDelete={displayDelete}
           handleClose={handleClose}