[frontend] update drawer exportfiles (#13303)

- fix on Safari, button in drawer's form are now aligned to the right
- fix breaking rule of hooks when there is a controlledDial component in drawer

Author: esrevi

opencti-platform/opencti-front/src/components/common/form/FormButtonContainer.tsx

@@ -6,8 +6,7 @@ const FormButtonContainer = ({ children }: PropsWithChildren) => {
     <Stack
       direction="row"
       gap={1}
-      justifySelf="flex-end"
-      sx={{ mt: 4 }}
+      sx={{ mt: 4, justifyContent: 'flex-end' }}
     >
       {children}
     </Stack>

opencti-platform/opencti-front/src/private/components/common/drawer/Drawer.tsx

@@ -177,7 +177,13 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(({
 
   return (
     <>
-      {controlledDial ? controlledDial({ onOpen: () => setOpen(true), onClose: handleClose }) : undefined }
+      {controlledDial && (
+        // issue with calling controlledDial as function, so all hooks inside controlledDial func are counted
+        // as Drawer hook list, when undefined, the hooks disapear, breaks the rules of hooks
+        // -> creating new element will separate component with isolated hooks tree
+        React.createElement(controlledDial, { onOpen: () => setOpen(true), onClose: handleClose })
+      )}
+
       {variant && (
         <Fab
           onClick={() => setOpen(true)}

opencti-platform/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectsExports.jsx

@@ -18,6 +18,7 @@ const StixCoreObjectsExports = ({
       open={open}
       title={t_i18n('Exports list')}
       onClose={handleToggle}
+      size="medium"
     >
       <QueryRenderer
         query={stixCoreObjectsExportsContentQuery}

opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipsExportCreation.jsx

@@ -1,8 +1,7 @@
 import Button from '@common/button/Button';
 import Dialog from '@common/dialog/Dialog';
-import { Add, InfoOutlined } from '@mui/icons-material';
+import { InfoOutlined } from '@mui/icons-material';
 import DialogActions from '@mui/material/DialogActions';
-import Fab from '@mui/material/Fab';
 import MenuItem from '@mui/material/MenuItem';
 import Slide from '@mui/material/Slide';
 import Tooltip from '@mui/material/Tooltip';
@@ -79,21 +78,13 @@ export const scopesConn = (exportConnectors) => {
 class StixCoreRelationshipsExportCreationComponent extends Component {
   constructor(props) {
     super(props);
-    this.state = { open: false, selectedContentMaxMarkingsIds: [] };
+    this.state = { selectedContentMaxMarkingsIds: [] };
   }
 
   handleSelectedContentMaxMarkingsChange(values) {
     this.setState({ selectedContentMaxMarkingsIds: values.map(({ value }) => value) });
   }
 
-  handleOpen() {
-    this.setState({ open: true });
-  }
-
-  handleClose() {
-    this.setState({ open: false });
-  }
-
   onSubmit(selectedIds, availableFilterKeys, values, { setSubmitting, resetForm }) {
     const { paginationOptions, exportContext } = this.props;
     const { orderBy, orderMode, filters, search } = paginationOptions;
@@ -121,22 +112,22 @@ class StixCoreRelationshipsExportCreationComponent extends Component {
         setSubmitting(false);
         resetForm();
         if (this.props.onExportAsk) this.props.onExportAsk();
-        this.handleClose();
+        this.props.onClose();
         MESSAGING$.notifySuccess('Export successfully started');
       },
     });
   }
 
   render() {
-    const { classes, t, data } = this.props;
+    const { t, data, open, onClose } = this.props;
     const connectorsExport = data?.connectorsForExport ?? [];
     const exportScopes = R.uniq(
       R.flatten(R.map((c) => c.connector_scope, connectorsExport)),
     );
     const exportConnsPerFormat = scopesConn(connectorsExport);
 
     const isExportActive = (format) => exportConnsPerFormat[format].filter((x) => x.data.active).length > 0;
-    const isExportPossible = exportScopes.filter((x) => isExportActive(x)).length > 0;
+
     return (
       <UserContext.Consumer>
         {({ schema }) => {
@@ -146,25 +137,6 @@ class StixCoreRelationshipsExportCreationComponent extends Component {
               {({ selectedIds }) => {
                 return (
                   <div>
-                    <Tooltip
-                      title={
-                        isExportPossible
-                          ? t('Generate an export')
-                          : t('No export connector available to generate an export')
-                      }
-                      aria-label="generate-export"
-                    >
-                      <Fab
-                        data-testid="StixCoreRelationshipsExportCreationAddButton"
-                        onClick={this.handleOpen.bind(this)}
-                        color="secondary"
-                        aria-label="Add"
-                        className={classes.createButton}
-                        disabled={!isExportPossible}
-                      >
-                        <Add />
-                      </Fab>
-                    </Tooltip>
                     <Formik
                       enableReinitialize={true}
                       initialValues={{
@@ -174,16 +146,16 @@ class StixCoreRelationshipsExportCreationComponent extends Component {
                       }}
                       validationSchema={exportValidation(t)}
                       onSubmit={this.onSubmit.bind(this, selectedIds, availableFilterKeys)}
-                      onReset={this.handleClose.bind(this)}
+                      onReset={onClose}
                     >
                       {({ submitForm, handleReset, isSubmitting, resetForm, setFieldValue }) => (
                         <Form>
                           <Dialog
                             data-testid="StixCoreRelationshipsExportCreationDialog"
-                            open={this.state.open}
+                            open={open}
                             onClose={() => {
                               resetForm();
-                              this.handleClose();
+                              onClose();
                             }}
                             title={(
                               <>
@@ -242,7 +214,14 @@ class StixCoreRelationshipsExportCreationComponent extends Component {
                               }}
                             />
                             <DialogActions>
-                              <Button variant="secondary" onClick={handleReset} disabled={isSubmitting}>
+                              <Button
+                                variant="secondary"
+                                onClick={() => {
+                                  handleReset();
+                                  onClose();
+                                }}
+                                disabled={isSubmitting}
+                              >
                                 {t('Cancel')}
                               </Button>
                               <Button
@@ -291,6 +270,8 @@ StixCoreRelationshipsExportCreations.propTypes = {
   exportContext: PropTypes.object,
   paginationOptions: PropTypes.object,
   onExportAsk: PropTypes.func,
+  open: PropTypes.boolean,
+  onClose: PropTypes.func,
 };
 
 export default R.compose(

opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipsExports.jsx

@@ -1,41 +1,26 @@
 import React, { Component } from 'react';
 import * as PropTypes from 'prop-types';
 import { compose } from 'ramda';
-import withStyles from '@mui/styles/withStyles';
 import Slide from '@mui/material/Slide';
-import Drawer from '@mui/material/Drawer';
+import Drawer from '../drawer/Drawer';
 import { QueryRenderer } from '../../../../relay/environment';
 import StixCoreRelationshipsExportsContent, { stixCoreRelationshipsExportsContentQuery } from './StixCoreRelationshipsExportsContent';
+import inject18n from '../../../../components/i18n';
 
 const Transition = React.forwardRef((props, ref) => (
   <Slide direction="up" ref={ref} {...props} />
 ));
 Transition.displayName = 'TransitionSlide';
 
-const styles = (theme) => ({
-  drawerPaper: {
-    minHeight: '100vh',
-    width: '50%',
-    position: 'fixed',
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    padding: 0,
-  },
-});
-
 class StixCoreRelationshipsExports extends Component {
   render() {
-    const { classes, paginationOptions, open, handleToggle, exportContext } = this.props;
+    const { t, paginationOptions, open, handleToggle, exportContext } = this.props;
     return (
       <Drawer
         open={open}
-        anchor="right"
-        sx={{ zIndex: 1202 }}
-        elevation={1}
-        classes={{ paper: classes.drawerPaper }}
         onClose={handleToggle.bind(this)}
+        title={t('Exports list')}
+        size="medium"
       >
         <QueryRenderer
           query={stixCoreRelationshipsExportsContentQuery}
@@ -56,12 +41,11 @@ class StixCoreRelationshipsExports extends Component {
 }
 
 StixCoreRelationshipsExports.propTypes = {
-  classes: PropTypes.object.isRequired,
   open: PropTypes.bool,
   handleToggle: PropTypes.func,
   paginationOptions: PropTypes.object,
   handleApplyListArgs: PropTypes.func,
   exportContext: PropTypes.object,
 };
 
-export default compose(withStyles(styles))(StixCoreRelationshipsExports);
+export default compose(inject18n)(StixCoreRelationshipsExports);

opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipsExportsContent.jsx

@@ -1,20 +1,19 @@
-import React, { Component } from 'react';
-import * as PropTypes from 'prop-types';
-import { compose, pathOr } from 'ramda';
-import withStyles from '@mui/styles/withStyles';
-import Slide from '@mui/material/Slide';
-import { graphql, createRefetchContainer } from 'react-relay';
 import List from '@mui/material/List';
+import Slide from '@mui/material/Slide';
+import withStyles from '@mui/styles/withStyles';
+import * as PropTypes from 'prop-types';
+import { compose, pathOr, uniq, flatten, map } from 'ramda';
+import React, { Component } from 'react';
+import { createRefetchContainer, graphql } from 'react-relay';
 import { interval } from 'rxjs';
-import IconButton from '@common/button/IconButton';
-import { Close } from '@mui/icons-material';
-import Typography from '@mui/material/Typography';
-import StixCoreRelationshipsExportCreation from './StixCoreRelationshipsExportCreation';
-import { FIVE_SECONDS } from '../../../../utils/Time';
-import FileLine from '../files/FileLine';
 import inject18n from '../../../../components/i18n';
 import Security from '../../../../utils/Security';
+import { FIVE_SECONDS } from '../../../../utils/Time';
 import { KNOWLEDGE_KNGETEXPORT_KNASKEXPORT } from '../../../../utils/hooks/useGranted';
+import FileLine from '../files/FileLine';
+import StixCoreRelationshipsExportCreation, { scopesConn } from './StixCoreRelationshipsExportCreation';
+import { Stack, Tooltip } from '@mui/material';
+import Button from '@common/button/Button';
 
 const interval$ = interval(FIVE_SECONDS);
 
@@ -46,6 +45,13 @@ const styles = (theme) => ({
 });
 
 class StixCoreRelationshipsExportsContentComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+    };
+  }
+
   componentDidMount() {
     this.subscription = interval$.subscribe(() => {
       if (this.props.isOpen) {
@@ -61,33 +67,60 @@ class StixCoreRelationshipsExportsContentComponent extends Component {
     this.subscription.unsubscribe();
   }
 
+  handleOpen() {
+    this.setState({ open: true });
+  }
+
+  handleClose() {
+    this.setState({ open: false });
+  }
+
   render() {
     const {
-      classes,
       t,
       data,
       exportContext,
       paginationOptions,
-      handleToggle,
     } = this.props;
     const stixCoreRelationshipsExportFiles = pathOr(
       [],
       ['stixCoreRelationshipsExportFiles', 'edges'],
       data,
     );
+
+    const connectorsExport = data?.connectorsForExport ?? [];
+    const exportScopes = uniq(
+      flatten(map((c) => c.connector_scope, connectorsExport)),
+    );
+    const exportConnsPerFormat = scopesConn(connectorsExport);
+
+    const isExportActive = (format) => exportConnsPerFormat[format].filter((x) => x.data.active).length > 0;
+    const isExportPossible = exportScopes.filter((x) => isExportActive(x)).length > 0;
+
     return (
-      <div>
-        <div className={classes.header}>
-          <IconButton
-            aria-label="Close"
-            className={classes.closeButton}
-            onClick={handleToggle.bind(this)}
-            color="primary"
+      <Stack gap={2}>
+        <Stack
+          direction="row"
+          justifyContent="flex-end"
+          gap={1}
+        >
+          <Tooltip
+            title={
+              isExportPossible
+                ? t('Generate an export')
+                : t('No export connector available to generate an export')
+            }
+            aria-label="generate-export"
           >
-            <Close fontSize="small" color="primary" />
-          </IconButton>
-          <Typography variant="h6">{t('Exports list')}</Typography>
-        </div>
+            <Button
+              onClick={this.handleOpen.bind(this)}
+              disabled={!isExportPossible}
+            >
+              {t('Generate an export')}
+            </Button>
+          </Tooltip>
+        </Stack>
+
         <List>
           {stixCoreRelationshipsExportFiles.length > 0 ? (
             stixCoreRelationshipsExportFiles.map((file) => file?.node && (
@@ -119,9 +152,11 @@ class StixCoreRelationshipsExportsContentComponent extends Component {
             exportContext={exportContext}
             paginationOptions={paginationOptions}
             onExportAsk={() => this.props.relay.refetch({ count: 25, exportContext: this.props.exportContext })}
+            open={this.state.open}
+            onClose={this.handleClose.bind(this)}
           />
         </Security>
-      </div>
+      </Stack>
     );
   }
 }
@@ -154,6 +189,13 @@ const StixCoreRelationshipsExportsContent = createRefetchContainer(
             }
           }
         }
+        connectorsForExport {
+          id
+          name
+          active
+          connector_scope
+          updated_at
+        }
         ...StixCoreRelationshipsExportCreation_data
       }
     `,
@@ -170,6 +212,9 @@ StixCoreRelationshipsExportsContent.propTypes = {
   paginationOptions: PropTypes.object,
   handleApplyListArgs: PropTypes.func,
   isOpen: PropTypes.bool,
+
+  open: PropTypes.bool,
+  setOpen: PropTypes.func,
 };
 
 export default compose(

opencti-platform/opencti-front/src/private/components/common/stix_domain_objects/StixDomainObjectsExports.tsx

@@ -24,6 +24,7 @@ const StixDomainObjectsExports: FunctionComponent<
       open={open}
       onClose={handleToggle}
       title={t_i18n('Exports list')}
+      size="medium"
     >
       <QueryRenderer
         query={stixDomainObjectsExportsContentQuery}

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

@@ -36,6 +36,7 @@ class StixCyberObservablesExports extends Component {
         elevation={1}
         onClose={handleToggle.bind(this)}
         title={t('Exports list')}
+        size="medium"
       >
         <QueryRenderer
           query={stixCyberObservablesExportsContentQuery}