[frontend] small refactoring changes (#8249)

OpenCTI-Platform · Sep 24, 2024 · e5caafe · e5caafe
1 parent 55486d8
commit e5caafe
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 106 deletions.
diff --git a/...src/private/components/observations/stix_cyber_observables/StixCyberObservableEdition.tsx b/...src/private/components/observations/stix_cyber_observables/StixCyberObservableEdition.tsx
@@ -1,14 +1,10 @@
 import React, { FunctionComponent } from 'react';
 import { graphql } from 'react-relay';
-import Drawer, { DrawerVariant } from '../../common/drawer/Drawer';
 import useApiMutation from '../../../../utils/hooks/useApiMutation';
 import { stixCyberObservableEditionOverviewFocus } from './StixCyberObservableEditionOverview';
-import useHelper from '../../../../utils/hooks/useHelper';
-import { useFormatter } from '../../../../components/i18n';
 import { QueryRenderer } from '../../../../relay/environment';
 import StixCyberObservableEditionContainer from './StixCyberObservableEditionContainer';
 import Loader, { LoaderVariant } from '../../../../components/Loader';
-import EditEntityControlledDial from '../../../../components/EditEntityControlledDial';
 import { StixCyberObservableEditionContainerQuery$data } from './__generated__/StixCyberObservableEditionContainerQuery.graphql';
 
 export const stixCyberObservableEditionQuery = graphql`
@@ -28,15 +24,12 @@ interface StixCyberObservableEditionProps {
 
 const StixCyberObservableEdition: FunctionComponent<StixCyberObservableEditionProps> = ({
   stixCyberObservableId,
-  open: graphOpen,
-  handleClose: handleGraphClose,
+  open,
+  handleClose,
 }) => {
-  const { t_i18n } = useFormatter();
   const [commit] = useApiMutation(stixCyberObservableEditionOverviewFocus);
-  const { isFeatureEnable } = useHelper();
-  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
 
-  const handleClose = () => {
+  const handleCloseDefault = () => {
     commit({
       variables: {
         id: stixCyberObservableId,
@@ -45,67 +38,26 @@ const StixCyberObservableEdition: FunctionComponent<StixCyberObservableEditionPr
     });
   };
 
-  const renderClassic = () => (
-    <Drawer
-      title={t_i18n('Update an observable')}
-      variant={isFABReplaced ? undefined : DrawerVariant.update}
-      onClose={handleClose}
-      open={graphOpen}
-      controlledDial={isFABReplaced ? EditEntityControlledDial : undefined}
-    >
-      {stixCyberObservableId ? (
-        <QueryRenderer
-          query={stixCyberObservableEditionQuery}
-          variables={{ id: stixCyberObservableId }}
-          render={({ props }: { props: StixCyberObservableEditionContainerQuery$data }) => {
-            if (props) {
-              return (
-                <StixCyberObservableEditionContainer
-                  stixCyberObservable={props.stixCyberObservable}
-                  handleClose={handleClose}
-                />
-              );
-            }
-            return <Loader variant={LoaderVariant.inElement} />;
-          }}
-        />
-      ) : (
-        <div> &nbsp; </div>
-      )}
-    </Drawer>
+  return stixCyberObservableId ? (
+    <QueryRenderer
+      query={stixCyberObservableEditionQuery}
+      variables={{ id: stixCyberObservableId }}
+      render={({ props }: { props: StixCyberObservableEditionContainerQuery$data }) => {
+        if (props) {
+          return (
+            <StixCyberObservableEditionContainer
+              stixCyberObservable={props.stixCyberObservable}
+              handleClose={handleClose || handleCloseDefault}
+              open={open}
+            />
+          );
+        }
+        return <Loader variant={LoaderVariant.inElement} />;
+      }}
+    />
+  ) : (
+    <div> &nbsp; </div>
   );
-  const renderInGraph = () => (
-    <Drawer
-      title={t_i18n('Update an observable')}
-      variant={isFABReplaced ? undefined : DrawerVariant.update}
-      onClose={handleGraphClose}
-      open={graphOpen}
-      controlledDial={isFABReplaced ? EditEntityControlledDial : undefined}
-    >
-      {stixCyberObservableId ? (
-        <QueryRenderer
-          query={stixCyberObservableEditionQuery}
-          variables={{ id: stixCyberObservableId }}
-          render={({ props }: { props: StixCyberObservableEditionContainerQuery$data }) => {
-            if (props) {
-              return (
-                <StixCyberObservableEditionContainer
-                  stixCyberObservable={props.stixCyberObservable}
-                  handleClose={handleGraphClose}
-                />
-              );
-            }
-            return <Loader variant={LoaderVariant.inElement} />;
-          }}
-        />
-      ) : (
-        <div> &nbsp; </div>
-      )}
-    </Drawer>
-  );
-
-  if (handleGraphClose) return renderInGraph();
-  return renderClassic();
 };
 
 export default StixCyberObservableEdition;
diff --git a/...te/components/observations/stix_cyber_observables/StixCyberObservableEditionContainer.jsx b/...te/components/observations/stix_cyber_observables/StixCyberObservableEditionContainer.jsx
@@ -1,19 +1,35 @@
 import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
+import Drawer, { DrawerVariant } from '../../common/drawer/Drawer';
 import StixCyberObservableEditionOverview from './StixCyberObservableEditionOverview';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
+import { useFormatter } from '../../../../components/i18n';
+import useHelper from '../../../../utils/hooks/useHelper';
+import EditEntityControlledDial from '../../../../components/EditEntityControlledDial';
 
 const StixCyberObservableEditionContainer = (props) => {
-  const { handleClose, stixCyberObservable } = props;
+  const { handleClose, stixCyberObservable, open } = props;
   const { editContext } = stixCyberObservable;
 
+  const { t_i18n } = useFormatter();
+  const { isFeatureEnable } = useHelper();
+  const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
+
   return (
-    <StixCyberObservableEditionOverview
-      stixCyberObservable={stixCyberObservable}
-      handleClose={handleClose}
-      context={editContext}
-      enableReferences={useIsEnforceReference('Stix-Cyber-Observable')}
-    />
+    <Drawer
+      title={t_i18n('Update an observable')}
+      variant={isFABReplaced ? undefined : DrawerVariant.update}
+      onClose={handleClose}
+      open={open}
+      controlledDial={isFABReplaced ? EditEntityControlledDial : undefined}
+    >
+      <StixCyberObservableEditionOverview
+        stixCyberObservable={stixCyberObservable}
+        handleClose={handleClose}
+        context={editContext}
+        enableReferences={useIsEnforceReference('Stix-Cyber-Observable')}
+      />
+    </Drawer>
   );
 };
 

diff --git a/...src/private/components/observations/stix_cyber_observables/StixCyberObservablePopover.jsx b/...src/private/components/observations/stix_cyber_observables/StixCyberObservablePopover.jsx
@@ -12,13 +12,10 @@ import DialogContentText from '@mui/material/DialogContentText';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { graphql } from 'react-relay';
 import ToggleButton from '@mui/material/ToggleButton';
-import Drawer from '../../common/drawer/Drawer';
-import Loader, { LoaderVariant } from '../../../../components/Loader';
 import withRouter from '../../../../utils/compat_router/withRouter';
 import inject18n from '../../../../components/i18n';
-import { QueryRenderer, commitMutation } from '../../../../relay/environment';
-import { stixCyberObservableEditionQuery } from './StixCyberObservableEdition';
-import StixCyberObservableEditionContainer from './StixCyberObservableEditionContainer';
+import { commitMutation } from '../../../../relay/environment';
+import StixCyberObservableEdition from './StixCyberObservableEdition';
 import Security from '../../../../utils/Security';
 import { KNOWLEDGE_KNUPDATE_KNDELETE } from '../../../../utils/hooks/useGranted';
 import Transition from '../../../../components/Transition';
@@ -155,32 +152,11 @@ class StixCyberObservablePopover extends Component {
             </Button>
           </DialogActions>
         </Dialog>
-        <Drawer
-          title={'Update an observable'}
+        <StixCyberObservableEdition
+          stixCyberObservableId={stixCyberObservableId}
           open={this.state.displayEdit}
           onClose={this.handleCloseEdit.bind(this)}
-        >
-          {
-            stixCyberObservableId ? (
-              <QueryRenderer
-                query={stixCyberObservableEditionQuery}
-                variables={{ id: stixCyberObservableId }}
-                render={({ props }) => {
-                  if (props) {
-                    return (
-                      <StixCyberObservableEditionContainer
-                        stixCyberObservable={props.stixCyberObservable}
-                        handleClose={this.handleCloseEdit.bind(this)}
-                      />
-                    );
-                  }
-                  return <Loader variant={LoaderVariant.inElement} />;
-                }}
-              />
-            ) : (<div> &nbsp; </div>
-            )
-          }
-        </Drawer>
+        />
       </>
     );
   }