[frontend] Replace Edit Floating Action Buttons for Threats

Co-authored-by: Laurent Bonnet <[email protected]>
OpenCTI-Platform · Sep 4, 2024 · 579e409 · 579e409
1 parent f40a0e0
commit 579e409
Show file tree

Hide file tree

Showing 16 changed files with 121 additions and 30 deletions.
diff --git a/opencti-platform/opencti-front/src/private/components/threats/campaigns/Campaign.tsx b/opencti-platform/opencti-front/src/private/components/threats/campaigns/Campaign.tsx
@@ -2,9 +2,6 @@ import React from 'react';
 import { graphql, useFragment } from 'react-relay';
 import Grid from '@mui/material/Grid';
 import CampaignDetails from './CampaignDetails';
-import CampaignEdition from './CampaignEdition';
-import Security from '../../../../utils/Security';
-import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
 import StixCoreObjectOrStixCoreRelationshipNotes from '../../analyses/notes/StixCoreObjectOrStixCoreRelationshipNotes';
 import StixDomainObjectOverview from '../../common/stix_domain_objects/StixDomainObjectOverview';
 import StixCoreObjectExternalReferences from '../../analyses/external_references/StixCoreObjectExternalReferences';
@@ -13,6 +10,10 @@ import SimpleStixObjectOrStixRelationshipStixCoreRelationships from '../../commo
 import { Campaign_campaign$key } from './__generated__/Campaign_campaign.graphql';
 import StixCoreObjectOrStixRelationshipLastContainers from '../../common/containers/StixCoreObjectOrStixRelationshipLastContainers';
 import useOverviewLayoutCustomization from '../../../../utils/hooks/useOverviewLayoutCustomization';
+import useHelper from '../../../../utils/hooks/useHelper';
+import Security from '../../../../utils/Security';
+import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import CampaignEdition from './CampaignEdition';
 
 const campaignFragment = graphql`
   fragment Campaign_campaign on Campaign {
@@ -73,6 +74,8 @@ const CampaignComponent = ({
 }) => {
   const campaign = useFragment<Campaign_campaign$key>(campaignFragment, campaignData);
   const overviewLayoutCustomization = useOverviewLayoutCustomization(campaign.entity_type);
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
   return (
     <>
@@ -144,9 +147,11 @@ const CampaignComponent = ({
           })
         }
       </Grid>
-      <Security needs={[KNOWLEDGE_KNUPDATE]}>
-        <CampaignEdition campaignId={campaign.id} />
-      </Security>
+      {!isFABReplaced && (
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
+          <CampaignEdition campaignId={campaign.id} />
+        </Security>
+      )}
     </>
   );
 };

diff --git a/opencti-platform/opencti-front/src/private/components/threats/campaigns/CampaignEdition.jsx b/opencti-platform/opencti-front/src/private/components/threats/campaigns/CampaignEdition.jsx
@@ -7,6 +7,7 @@ import inject18n from '../../../../components/i18n';
 import CampaignEditionContainer from './CampaignEditionContainer';
 import { campaignEditionOverviewFocus } from './CampaignEditionOverview';
 import Loader from '../../../../components/Loader';
+import EditEntityControlledDial from '../../../../components/EditEntityControlledDial';
 
 export const campaignEditionQuery = graphql`
   query CampaignEditionContainerQuery($id: String!) {
@@ -49,6 +50,7 @@ class CampaignEdition extends Component {
               <CampaignEditionContainer
                 campaign={props.campaign}
                 handleClose={this.handleClose.bind(this)}
+                controlledDial={EditEntityControlledDial}
               />
             );
           }

diff --git a/...tform/opencti-front/src/private/components/threats/campaigns/CampaignEditionContainer.jsx b/...tform/opencti-front/src/private/components/threats/campaigns/CampaignEditionContainer.jsx
@@ -8,22 +8,26 @@ import CampaignEditionOverview from './CampaignEditionOverview';
 import CampaignEditionDetails from './CampaignEditionDetails';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
 import Drawer, { DrawerVariant } from '../../common/drawer/Drawer';
+import useHelper from '../../../../utils/hooks/useHelper';
 
 const CampaignEditionContainer = (props) => {
   const { t_i18n } = useFormatter();
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
   const [currentTab, setCurrentTab] = useState(0);
   const handleChangeTab = (event, value) => setCurrentTab(value);
 
-  const { handleClose, campaign, open } = props;
+  const { handleClose, campaign, open, controlledDial } = props;
   const { editContext } = campaign;
   return (
     <Drawer
       title={t_i18n('Update a campaign')}
       open={open}
       onClose={handleClose}
-      variant={open == null ? DrawerVariant.update : undefined}
+      variant={!isFABReplaced && open == null ? DrawerVariant.update : undefined}
       context={editContext}
+      controlledDial={isFABReplaced ? controlledDial : undefined}
     >
       <>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>

diff --git a/opencti-platform/opencti-front/src/private/components/threats/campaigns/Root.tsx b/opencti-platform/opencti-front/src/private/components/threats/campaigns/Root.tsx
@@ -23,6 +23,10 @@ import { useFormatter } from '../../../../components/i18n';
 import Breadcrumbs from '../../../../components/Breadcrumbs';
 import { getCurrentTab, getPaddingRight } from '../../../../utils/utils';
 import { RootCampaignQuery } from './__generated__/RootCampaignQuery.graphql';
+import useHelper from '../../../../utils/hooks/useHelper';
+import Security from '../../../../utils/Security';
+import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import CampaignEdition from './CampaignEdition';
 
 const subscription = graphql`
   subscription RootCampaignSubscription($id: ID!) {
@@ -82,7 +86,8 @@ const RootCampaign = ({ campaignId, queryRef }: RootCampaignProps) => {
 
   const location = useLocation();
   const { t_i18n } = useFormatter();
-
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
   useSubscription<RootCampaignSubscription>(subConfig);
 
   const {
@@ -136,6 +141,11 @@ const RootCampaign = ({ campaignId, queryRef }: RootCampaignProps) => {
               entityType="Campaign"
               stixDomainObject={campaign}
               PopoverComponent={<CampaignPopover />}
+              EditComponent={isFABReplaced && (
+                <Security needs={[KNOWLEDGE_KNUPDATE]}>
+                  <CampaignEdition campaignId={campaign.id} />
+                </Security>
+              )}
               enableQuickSubscription={true}
             />
             <Box

diff --git a/...cti-platform/opencti-front/src/private/components/threats/intrusion_sets/IntrusionSet.tsx b/...cti-platform/opencti-front/src/private/components/threats/intrusion_sets/IntrusionSet.tsx
@@ -2,9 +2,6 @@ import React from 'react';
 import { graphql, useFragment } from 'react-relay';
 import Grid from '@mui/material/Grid';
 import IntrusionSetDetails from './IntrusionSetDetails';
-import IntrusionSetEdition from './IntrusionSetEdition';
-import Security from '../../../../utils/Security';
-import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
 import StixCoreObjectOrStixCoreRelationshipNotes from '../../analyses/notes/StixCoreObjectOrStixCoreRelationshipNotes';
 import StixDomainObjectOverview from '../../common/stix_domain_objects/StixDomainObjectOverview';
 import StixCoreObjectExternalReferences from '../../analyses/external_references/StixCoreObjectExternalReferences';
@@ -13,6 +10,10 @@ import SimpleStixObjectOrStixRelationshipStixCoreRelationships from '../../commo
 import { IntrusionSet_intrusionSet$key } from './__generated__/IntrusionSet_intrusionSet.graphql';
 import StixCoreObjectOrStixRelationshipLastContainers from '../../common/containers/StixCoreObjectOrStixRelationshipLastContainers';
 import useOverviewLayoutCustomization from '../../../../utils/hooks/useOverviewLayoutCustomization';
+import useHelper from '../../../../utils/hooks/useHelper';
+import Security from '../../../../utils/Security';
+import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import IntrusionSetEdition from './IntrusionSetEdition';
 
 const intrusionSetFragment = graphql`
   fragment IntrusionSet_intrusionSet on IntrusionSet {
@@ -73,6 +74,8 @@ interface IntrusionSetProps {
 const IntrusionSet: React.FC<IntrusionSetProps> = ({ intrusionSetData }) => {
   const intrusionSet = useFragment<IntrusionSet_intrusionSet$key>(intrusionSetFragment, intrusionSetData);
   const overviewLayoutCustomization = useOverviewLayoutCustomization(intrusionSet.entity_type);
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
   return (
     <>
       <Grid
@@ -143,9 +146,11 @@ const IntrusionSet: React.FC<IntrusionSetProps> = ({ intrusionSetData }) => {
           })
         }
       </Grid>
-      <Security needs={[KNOWLEDGE_KNUPDATE]}>
-        <IntrusionSetEdition intrusionSetId={intrusionSet.id} />
-      </Security>
+      {!isFABReplaced && (
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
+          <IntrusionSetEdition intrusionSetId={intrusionSet.id} />
+        </Security>
+      )}
     </>
   );
 };

diff --git a/...tform/opencti-front/src/private/components/threats/intrusion_sets/IntrusionSetEdition.jsx b/...tform/opencti-front/src/private/components/threats/intrusion_sets/IntrusionSetEdition.jsx
@@ -7,6 +7,7 @@ import inject18n from '../../../../components/i18n';
 import IntrusionSetEditionContainer from './IntrusionSetEditionContainer';
 import { intrusionSetEditionOverviewFocus } from './IntrusionSetEditionOverview';
 import Loader from '../../../../components/Loader';
+import EditEntityControlledDial from '../../../../components/EditEntityControlledDial';
 
 export const intrusionSetEditionQuery = graphql`
   query IntrusionSetEditionContainerQuery($id: String!) {
@@ -39,6 +40,7 @@ class IntrusionSetEdition extends Component {
               <IntrusionSetEditionContainer
                 intrusionSet={props.intrusionSet}
                 handleClose={this.handleClose.bind(this)}
+                controlledDial={EditEntityControlledDial}
               />
             );
           }

diff --git a/...ncti-front/src/private/components/threats/intrusion_sets/IntrusionSetEditionContainer.jsx b/...ncti-front/src/private/components/threats/intrusion_sets/IntrusionSetEditionContainer.jsx
@@ -8,11 +8,14 @@ import IntrusionSetEditionOverview from './IntrusionSetEditionOverview';
 import IntrusionSetEditionDetails from './IntrusionSetEditionDetails';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
 import Drawer, { DrawerVariant } from '../../common/drawer/Drawer';
+import useHelper from '../../../../utils/hooks/useHelper';
 
 const IntrusionSetEditionContainer = (props) => {
   const { t_i18n } = useFormatter();
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
-  const { handleClose, intrusionSet, open } = props;
+  const { handleClose, intrusionSet, open, controlledDial } = props;
   const { editContext } = intrusionSet;
 
   const [currentTab, setCurrentTab] = useState(0);
@@ -24,8 +27,9 @@ const IntrusionSetEditionContainer = (props) => {
       title={t_i18n('Update an intrusion set')}
       open={open}
       onClose={handleClose}
-      variant={open == null ? DrawerVariant.update : undefined}
+      variant={!isFABReplaced && open == null ? DrawerVariant.update : undefined}
       context={editContext}
+      controlledDial={isFABReplaced ? controlledDial : undefined}
     >
       <>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>

diff --git a/opencti-platform/opencti-front/src/private/components/threats/intrusion_sets/Root.tsx b/opencti-platform/opencti-front/src/private/components/threats/intrusion_sets/Root.tsx
@@ -25,6 +25,10 @@ import { getCurrentTab, getPaddingRight } from '../../../../utils/utils';
 import BulkRelationDialogContainer from '../../common/bulk/dialog/BulkRelationDialogContainer';
 import { RootIntrusionSetQuery } from './__generated__/RootIntrusionSetQuery.graphql';
 import { RootIntrusionSetSubscription } from './__generated__/RootIntrusionSetSubscription.graphql';
+import useHelper from '../../../../utils/hooks/useHelper';
+import Security from '../../../../utils/Security';
+import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import IntrusionSetEdition from './IntrusionSetEdition';
 
 const subscription = graphql`
   subscription RootIntrusionSetSubscription($id: ID!) {
@@ -90,6 +94,8 @@ const RootIntrusionSet = ({ intrusionSetId, queryRef }: RootIntrusionSetProps) =
   const location = useLocation();
   const { t_i18n } = useFormatter();
   useSubscription<RootIntrusionSetSubscription>(subConfig);
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
   const {
     intrusionSet,
@@ -146,6 +152,11 @@ const RootIntrusionSet = ({ intrusionSetId, queryRef }: RootIntrusionSetProps) =
               entityType="Intrusion-Set"
               stixDomainObject={intrusionSet}
               PopoverComponent={<IntrusionSetPopover />}
+              EditComponent={isFABReplaced && (
+                <Security needs={[KNOWLEDGE_KNUPDATE]}>
+                  <IntrusionSetEdition intrusionSetId={intrusionSet.id} />
+                </Security>
+              )}
               enableQuickSubscription={true}
               enableAskAi={true}
             />

diff --git a/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/Root.tsx b/opencti-platform/opencti-front/src/private/components/threats/threat_actors_group/Root.tsx
@@ -23,6 +23,10 @@ import StixCoreObjectKnowledgeBar from '../../common/stix_core_objects/StixCoreO
 import { useFormatter } from '../../../../components/i18n';
 import Breadcrumbs from '../../../../components/Breadcrumbs';
 import { getCurrentTab, getPaddingRight } from '../../../../utils/utils';
+import useHelper from '../../../../utils/hooks/useHelper';
+import Security from '../../../../utils/Security';
+import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import ThreatActorGroupEdition from './ThreatActorGroupEdition';
 
 const subscription = graphql`
   subscription RootThreatActorsGroupSubscription($id: ID!) {
@@ -85,6 +89,8 @@ const RootThreatActorGroup = ({ queryRef, threatActorGroupId }: RootThreatActorG
   const location = useLocation();
   const { t_i18n } = useFormatter();
   useSubscription<RootThreatActorsGroupSubscription>(subConfig);
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
   const {
     threatActorGroup,
@@ -138,6 +144,11 @@ const RootThreatActorGroup = ({ queryRef, threatActorGroupId }: RootThreatActorG
               entityType="Threat-Actor-Group"
               stixDomainObject={threatActorGroup}
               PopoverComponent={<ThreatActorGroupPopover />}
+              EditComponent={isFABReplaced && (
+                <Security needs={[KNOWLEDGE_KNUPDATE]}>
+                  <ThreatActorGroupEdition threatActorGroupId={threatActorGroup.id} />
+                </Security>
+              )}
               enableQuickSubscription={true}
             />
             <Box

diff --git a/...orm/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroup.tsx b/...orm/opencti-front/src/private/components/threats/threat_actors_group/ThreatActorGroup.tsx
@@ -13,6 +13,7 @@ import StixCoreObjectLatestHistory from '../../common/stix_core_objects/StixCore
 import SimpleStixObjectOrStixRelationshipStixCoreRelationships from '../../common/stix_core_relationships/SimpleStixObjectOrStixRelationshipStixCoreRelationships';
 import StixCoreObjectOrStixRelationshipLastContainers from '../../common/containers/StixCoreObjectOrStixRelationshipLastContainers';
 import useOverviewLayoutCustomization from '../../../../utils/hooks/useOverviewLayoutCustomization';
+import useHelper from '../../../../utils/hooks/useHelper';
 
 const threatActorGroupFragment = graphql`
   fragment ThreatActorGroup_ThreatActorGroup on ThreatActorGroup {
@@ -77,6 +78,8 @@ const ThreatActorGroup: React.FC<ThreatActorGroupProps> = ({ threatActorGroupDat
     threatActorGroupData,
   );
   const overviewLayoutCustomization = useOverviewLayoutCustomization(threatActorGroup.entity_type);
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
   return (
     <>
@@ -148,9 +151,11 @@ const ThreatActorGroup: React.FC<ThreatActorGroupProps> = ({ threatActorGroupDat
           })
         }
       </Grid>
-      <Security needs={[KNOWLEDGE_KNUPDATE]}>
-        <ThreatActorGroupEdition threatActorGroupId={threatActorGroup.id} />
-      </Security>
+      {!isFABReplaced && (
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
+          <ThreatActorGroupEdition threatActorGroupId={threatActorGroup.id} />
+        </Security>
+      )}
     </>
   );
 };

diff --git a/...ncti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupEdition.jsx b/...ncti-front/src/private/components/threats/threat_actors_group/ThreatActorGroupEdition.jsx
@@ -8,6 +8,7 @@ import inject18n from '../../../../components/i18n';
 import ThreatActorGroupEditionContainer from './ThreatActorGroupEditionContainer';
 import { ThreatActorGroupEditionOverviewFocus } from './ThreatActorGroupEditionOverview';
 import Loader from '../../../../components/Loader';
+import EditEntityControlledDial from '../../../../components/EditEntityControlledDial';
 
 const styles = () => ({
   editButton: {
@@ -48,6 +49,7 @@ class ThreatActorGroupEdition extends Component {
               <ThreatActorGroupEditionContainer
                 threatActorGroup={props.threatActorGroup}
                 handleClose={this.handleClose.bind(this)}
+                controlledDial={EditEntityControlledDial}
               />
             );
           }

diff --git a/...t/src/private/components/threats/threat_actors_group/ThreatActorGroupEditionContainer.jsx b/...t/src/private/components/threats/threat_actors_group/ThreatActorGroupEditionContainer.jsx
@@ -8,13 +8,17 @@ import ThreatActorGroupEditionOverview from './ThreatActorGroupEditionOverview';
 import ThreatActorGroupEditionDetails from './ThreatActorGroupEditionDetails';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
 import Drawer, { DrawerVariant } from '../../common/drawer/Drawer';
+import useHelper from '../../../../utils/hooks/useHelper';
 
 const ThreatActorGroupEditionContainer = ({
   handleClose,
   threatActorGroup,
   open,
+  controlledDial,
 }) => {
   const { t_i18n } = useFormatter();
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
   const { editContext } = threatActorGroup;
   const [currentTab, setCurrentTab] = useState(0);
   const handleChangeTab = (event, value) => setCurrentTab(value);
@@ -23,8 +27,9 @@ const ThreatActorGroupEditionContainer = ({
       title={t_i18n('Update a threat actor group')}
       open={open}
       onClose={handleClose}
-      variant={open == null ? DrawerVariant.update : undefined}
+      variant={!isFABReplaced && open == null ? DrawerVariant.update : undefined}
       context={editContext}
+      controlledDial={isFABReplaced ? controlledDial : undefined}
     >
       <>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>

diff --git a/...i-platform/opencti-front/src/private/components/threats/threat_actors_individual/Root.tsx b/...i-platform/opencti-front/src/private/components/threats/threat_actors_individual/Root.tsx
@@ -23,6 +23,10 @@ import StixCoreObjectKnowledgeBar from '../../common/stix_core_objects/StixCoreO
 import { useFormatter } from '../../../../components/i18n';
 import Breadcrumbs from '../../../../components/Breadcrumbs';
 import { getCurrentTab, getPaddingRight } from '../../../../utils/utils';
+import Security from '../../../../utils/Security';
+import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import ThreatActorIndividualEdition from './ThreatActorIndividualEdition';
+import useHelper from '../../../../utils/hooks/useHelper';
 
 const subscription = graphql`
   subscription RootThreatActorIndividualSubscription($id: ID!) {
@@ -93,6 +97,8 @@ const RootThreatActorIndividualComponent = ({
   const location = useLocation();
   const { t_i18n } = useFormatter();
   useSubscription<RootThreatActorIndividualSubscription>(subConfig);
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
   const {
     threatActorIndividual,
@@ -151,6 +157,13 @@ const RootThreatActorIndividualComponent = ({
               entityType="Threat-Actor-Individual"
               stixDomainObject={threatActorIndividual}
               PopoverComponent={ThreatActorIndividualPopover}
+              EditComponent={isFABReplaced && (
+                <Security needs={[KNOWLEDGE_KNUPDATE]}>
+                  <ThreatActorIndividualEdition
+                    threatActorIndividualId={threatActorIndividual.id}
+                  />
+                </Security>
+              )}
               enableQuickSubscription={true}
             />
             <Box