[frontend] changed old MUI Drawer with new custom Drawer when editing…

… observables (#8249)

opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableEdition.tsx

@@ -1,13 +1,10 @@
-import React, { FunctionComponent, useState } from 'react';
-import { Drawer, Fab, useTheme } from '@mui/material';
-import { Edit } from '@mui/icons-material';
+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 ThemeDark from '../../../../components/ThemeDark';
-import ThemeLight from '../../../../components/ThemeLight';
 import { QueryRenderer } from '../../../../relay/environment';
 import StixCyberObservableEditionContainer from './StixCyberObservableEditionContainer';
 import Loader, { LoaderVariant } from '../../../../components/Loader';
@@ -35,71 +32,28 @@ const StixCyberObservableEdition: FunctionComponent<StixCyberObservableEditionPr
   handleClose: handleGraphClose,
 }) => {
   const { t_i18n } = useFormatter();
-  const [open, setOpen] = useState<boolean>(false);
   const [commit] = useApiMutation(stixCyberObservableEditionOverviewFocus);
   const { isFeatureEnable } = useHelper();
   const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
-  const { palette: { mode } } = useTheme();
-  const theme = mode === 'dark'
-    ? ThemeDark()
-    : ThemeLight();
 
-  const handleOpen = () => setOpen(true);
   const handleClose = () => {
     commit({
       variables: {
         id: stixCyberObservableId,
         input: { focusOn: '' },
       },
     });
-    setOpen(false);
   };
-  const transition = theme.transitions?.create
-    ? theme.transitions.create('width', {
-      easing: theme.transitions.easing?.sharp,
-      duration: theme.transitions.duration?.enteringScreen,
-    })
-    : undefined;
 
   const renderClassic = () => (
-    <>
-      {isFABReplaced
-        ? (
-          <EditEntityControlledDial onOpen={handleOpen} onClose={() => {}}/>
-        ) : (
-          <Fab
-            onClick={handleOpen}
-            color="primary"
-            aria-label={t_i18n('Update')}
-            style={{
-              position: 'fixed',
-              bottom: 30,
-              right: 30,
-            }}
-          >
-            <Edit />
-          </Fab>
-        )
-      }
-      <Drawer
-        open={open}
-        anchor="right"
-        sx={{
-          zIndex: 1202,
-        }}
-        PaperProps={{
-          sx: {
-            minHeight: '100vh',
-            width: '50%',
-            position: 'fixed',
-            overflow: 'auto',
-            transition,
-            padding: 0,
-          },
-        }}
-        elevation={1}
-        onClose={handleClose}
-      >
+    <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 }}
@@ -115,28 +69,18 @@ const StixCyberObservableEdition: FunctionComponent<StixCyberObservableEditionPr
             return <Loader variant={LoaderVariant.inElement} />;
           }}
         />
-      </Drawer>
-    </>
+      ) : (
+        <div> &nbsp; </div>
+      )}
+    </Drawer>
   );
   const renderInGraph = () => (
     <Drawer
-      open={graphOpen}
-      anchor="right"
-      elevation={1}
-      sx={{
-        zIndex: 1202,
-      }}
-      PaperProps={{
-        sx: {
-          minHeight: '100vh',
-          width: '30%',
-          position: 'fixed',
-          overflow: 'auto',
-          transition,
-          padding: 0,
-        },
-      }}
+      title={t_i18n('Update an observable')}
+      variant={isFABReplaced ? undefined : DrawerVariant.update}
       onClose={handleGraphClose}
+      open={graphOpen}
+      controlledDial={isFABReplaced ? EditEntityControlledDial : undefined}
     >
       {stixCyberObservableId ? (
         <QueryRenderer

opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableEditionContainer.jsx

@@ -1,69 +1,19 @@
 import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import { Close } from '@mui/icons-material';
-import makeStyles from '@mui/styles/makeStyles';
-import { useFormatter } from '../../../../components/i18n';
-import { SubscriptionAvatars } from '../../../../components/Subscription';
 import StixCyberObservableEditionOverview from './StixCyberObservableEditionOverview';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
 
-// Deprecated - https://mui.com/system/styles/basics/
-// Do not use it for new code.
-const useStyles = makeStyles((theme) => ({
-  header: {
-    backgroundColor: theme.palette.background.default,
-    padding: '20px 20px 20px 60px',
-  },
-  closeButton: {
-    position: 'absolute',
-    top: 12,
-    left: 5,
-    color: 'inherit',
-  },
-  container: {
-    padding: '10px 20px 20px 20px',
-  },
-  title: {
-    float: 'left',
-  },
-}));
-
 const StixCyberObservableEditionContainer = (props) => {
-  const classes = useStyles();
-  const { t_i18n } = useFormatter();
-
   const { handleClose, stixCyberObservable } = props;
   const { editContext } = stixCyberObservable;
 
   return (
-    <div>
-      <div className={classes.header}>
-        <IconButton
-          aria-label="Close"
-          className={classes.closeButton}
-          onClick={handleClose}
-          size="large"
-          color="primary"
-        >
-          <Close fontSize="small" color="primary" />
-        </IconButton>
-        <Typography variant="subtitle2" classes={{ root: classes.title }}>
-          {t_i18n('Update an observable')}
-        </Typography>
-        <SubscriptionAvatars context={editContext} />
-        <div className="clearfix" />
-      </div>
-      <div className={classes.container}>
-        <StixCyberObservableEditionOverview
-          stixCyberObservable={stixCyberObservable}
-          enableReferences={useIsEnforceReference('Stix-Cyber-Observable')}
-          context={editContext}
-          handleClose={handleClose}
-        />
-      </div>
-    </div>
+    <StixCyberObservableEditionOverview
+      stixCyberObservable={stixCyberObservable}
+      handleClose={handleClose}
+      context={editContext}
+      enableReferences={useIsEnforceReference('Stix-Cyber-Observable')}
+    />
   );
 };
 

opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservablePopover.jsx

@@ -5,14 +5,15 @@ import withStyles from '@mui/styles/withStyles';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
-import Drawer from '@mui/material/Drawer';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 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';
@@ -101,7 +102,7 @@ class StixCyberObservablePopover extends Component {
   }
 
   render() {
-    const { classes, t, stixCyberObservableId } = this.props;
+    const { t, stixCyberObservableId } = this.props;
     return (
       <>
         <ToggleButton
@@ -155,28 +156,30 @@ class StixCyberObservablePopover extends Component {
           </DialogActions>
         </Dialog>
         <Drawer
+          title={'Update an observable'}
           open={this.state.displayEdit}
-          anchor="right"
-          sx={{ zIndex: 1202 }}
-          elevation={1}
-          classes={{ paper: classes.drawerPaper }}
           onClose={this.handleCloseEdit.bind(this)}
         >
-          <QueryRenderer
-            query={stixCyberObservableEditionQuery}
-            variables={{ id: stixCyberObservableId }}
-            render={({ props }) => {
-              if (props) {
-                return (
-                  <StixCyberObservableEditionContainer
-                    stixCyberObservable={props.stixCyberObservable}
-                    handleClose={this.handleCloseEdit.bind(this)}
-                  />
-                );
-              }
-              return <div />;
-            }}
-          />
+          {
+            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>
       </>
     );