[frontend] Improve the download files in lists (#4902)

OpenCTI-Platform · Nov 18, 2023 · a24c444 · a24c444
1 parent 837fc4d
commit a24c444
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 29 deletions.
diff --git a/opencti-platform/opencti-front/src/private/Index.tsx b/opencti-platform/opencti-front/src/private/Index.tsx
@@ -76,11 +76,7 @@ const Index = ({ settings }: IndexProps) => {
   return (
     <>
       <SystemBanners settings={settings} />
-      {
-        settings.platform_session_idle_timeout
-        && settings.platform_session_idle_timeout > 0
-        && <TimeoutLock />
-      }
+      {(settings?.platform_session_idle_timeout ?? 0) > 0 && <TimeoutLock />}
       <SettingsMessagesBanner />
       <Box
         sx={{

diff --git a/opencti-platform/opencti-front/src/private/components/common/files/FileImportViewer.tsx b/opencti-platform/opencti-front/src/private/components/common/files/FileImportViewer.tsx
@@ -32,11 +32,19 @@ interface FileImportViewerComponentProps {
   handleOpenImport: (file: FileLine_file$data | undefined) => void;
   connectors: { [p: string]: { data: { name: string; active: boolean } }[] };
   relay: RelayRefetchProp;
+  isArtifact?: boolean;
 }
 
 const FileImportViewerComponent: FunctionComponent<
 FileImportViewerComponentProps
-> = ({ entity, disableImport, handleOpenImport, connectors, relay }) => {
+> = ({
+  entity,
+  disableImport,
+  handleOpenImport,
+  connectors,
+  relay,
+  isArtifact,
+}) => {
   const classes = useStyles();
   const { t } = useFormatter();
   const { id, importFiles } = entity;
@@ -85,6 +93,7 @@ FileImportViewerComponentProps
                         && connectors[file?.node?.metaData?.mimetype ?? 0]
                       }
                       handleOpenImport={handleOpenImport}
+                      isArtifact={isArtifact}
                     />
                   )
                 );

diff --git a/opencti-platform/opencti-front/src/private/components/common/files/FileLine.tsx b/opencti-platform/opencti-front/src/private/components/common/files/FileLine.tsx
@@ -31,6 +31,7 @@ import { RecordSourceSelectorProxy } from 'relay-runtime';
 import { PopoverProps } from '@mui/material/Popover';
 import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import FileWork from './FileWork';
 import { useFormatter } from '../../../../components/i18n';
 import {
@@ -91,6 +92,7 @@ interface FileLineComponentProps {
   isExternalReferenceAttachment?: boolean;
   onDelete?: () => void;
   onClick?: () => void;
+  isArtifact?: boolean;
 }
 
 const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
@@ -105,13 +107,15 @@ const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
   isExternalReferenceAttachment,
   onDelete,
   onClick,
+  isArtifact,
 }) => {
   const classes = useStyles();
   const { t, fld } = useFormatter();
 
   const [anchorEl, setAnchorEl] = useState<PopoverProps['anchorEl']>(null);
   const [displayRemove, setDisplayRemove] = useState(false);
   const [displayDelete, setDisplayDelete] = useState(false);
+  const [displayDownload, setDisplayDownload] = useState(false);
   const [deleting, setDeleting] = useState(false);
 
   const handleOpen = (event: React.SyntheticEvent) => {
@@ -164,6 +168,10 @@ const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
     setDisplayRemove(false);
   };
 
+  const handleCloseDownload = () => {
+    setDisplayDownload(false);
+  };
+
   const executeRemove = (
     mutation: GraphQLTaggedNode,
     variables: { fileName: string } | { workId: string },
@@ -214,6 +222,7 @@ const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
   };
 
   const handleLink = (url: string) => {
+    handleCloseDownload();
     handleClose();
     window.location.pathname = url;
   };
@@ -225,7 +234,12 @@ const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
       <FileOutline color={nested ? 'primary' : 'inherit'} />
     );
   };
-
+  const listUri = `${APP_BASE_PATH}/storage/${
+    directDownload ? 'get' : 'view'
+  }/${encodedFilePath}`;
+  const isWarning = isArtifact
+    || encodedFilePath.endsWith('.exe')
+    || encodedFilePath.endsWith('.dll');
   return (
     <>
       <ListItem
@@ -234,7 +248,10 @@ const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
         button={true}
         classes={{ root: nested ? classes.itemNested : classes.item }}
         rel="noopener noreferrer"
-        onClick={onClick}
+        onClick={
+          onClick
+          || (() => (isWarning ? setDisplayDownload(true) : handleLink(listUri)))
+        }
       >
         <ListItemIcon>
           {isProgress && (
@@ -268,7 +285,7 @@ const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
             }
           />
         </Tooltip>
-        <>
+        <ListItemSecondaryAction>
           {!disableImport && (
             <Tooltip title={t('Launch an import of this file')}>
               <span>
@@ -294,7 +311,13 @@ const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
                 <span>
                   <IconButton
                     disabled={isProgress}
-                    onClick={handleOpen}
+                    onClick={
+                      isWarning
+                        ? handleOpen
+                        : () => handleLink(
+                          `${APP_BASE_PATH}/storage/get/${encodedFilePath}`,
+                        )
+                    }
                     aria-haspopup="true"
                     color={nested ? 'inherit' : 'primary'}
                     size="small"
@@ -360,7 +383,7 @@ const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
               )}
             </>
           )}
-        </>
+        </ListItemSecondaryAction>
       </ListItem>
       <FileWork file={file} nested={workNested} />
       <Dialog
@@ -424,6 +447,49 @@ const FileLineComponent: FunctionComponent<FileLineComponentProps> = ({
           </Button>
         </DialogActions>
       </Dialog>
+      <Dialog
+        open={displayDownload}
+        PaperProps={{ elevation: 1 }}
+        keepMounted={true}
+        TransitionComponent={Transition}
+        onClose={handleCloseDownload}
+      >
+        <DialogContent>
+          <DialogContentText>
+            {t('How do you want to download this file?')}
+            <Alert
+              severity="warning"
+              variant="outlined"
+              style={{ position: 'relative', marginTop: 20 }}
+            >
+              {t(
+                'You are about to download a file related to an Artifact (or a binary). It might be malicious. You can download it as an encrypted archive (password: "infected") in order to protect your workstation and share it safely.',
+              )}
+            </Alert>
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDownload} disabled={deleting}>
+            {t('Cancel')}
+          </Button>
+          <Button
+            color="warning"
+            onClick={() => handleLink(`${APP_BASE_PATH}/storage/get/${encodedFilePath}`)
+            }
+          >
+            {t('Raw file')}
+          </Button>
+          <Button
+            color="success"
+            onClick={() => handleLink(
+              `${APP_BASE_PATH}/storage/encrypted/${encodedFilePath}`,
+            )
+            }
+          >
+            {t('Encrypted archive')}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </>
   );
 };

diff --git a/opencti-platform/opencti-front/src/private/components/common/files/FileManager.jsx b/opencti-platform/opencti-front/src/private/components/common/files/FileManager.jsx
@@ -146,6 +146,7 @@ const FileManager = ({
   classes,
   connectorsExport,
   connectorsImport,
+  isArtifact,
 }) => {
   const [fileToImport, setFileToImport] = useState(null);
   const [openExport, setOpenExport] = useState(false);
@@ -218,7 +219,9 @@ const FileManager = ({
     });
   };
 
-  const connectors = connectorsImport.filter((n) => !n.only_contextual).filter((n) => !R.isEmpty(n.configurations));
+  const connectors = connectorsImport
+    .filter((n) => !n.only_contextual)
+    .filter((n) => !R.isEmpty(n.configurations));
   const importConnsPerFormat = scopesConn(connectors);
 
   const handleSelectConnector = (_, value) => {
@@ -246,6 +249,7 @@ const FileManager = ({
           entity={entity}
           connectors={importConnsPerFormat}
           handleOpenImport={handleOpenImport}
+          isArtifact={isArtifact}
         />
         <WorkbenchFileViewer
           entity={entity}
@@ -260,15 +264,16 @@ const FileManager = ({
           entity={entity}
           handleOpenImport={handleOpenImport}
         />
-        {hasPictureManagement
-          && <PictureManagementViewer entity={entity} />
-        }
+        {hasPictureManagement && <PictureManagementViewer entity={entity} />}
       </Grid>
       <div>
         <Formik
           enableReinitialize={true}
           initialValues={{ connector_id: '', configuration: '' }}
-          validationSchema={importValidation(t, selectedConnector?.configurations?.length > 0)}
+          validationSchema={importValidation(
+            t,
+            selectedConnector?.configurations?.length > 0,
+          )}
           onSubmit={onSubmitImport}
           onReset={handleCloseImport}
         >
@@ -310,8 +315,8 @@ const FileManager = ({
                       );
                     })}
                   </Field>
-                  {selectedConnector?.configurations?.length > 0
-                    && <Field
+                  {selectedConnector?.configurations?.length > 0 && (
+                    <Field
                       component={SelectField}
                       variant="standard"
                       name="configuration"
@@ -330,7 +335,7 @@ const FileManager = ({
                         );
                       })}
                     </Field>
-                  }
+                  )}
                 </DialogContent>
                 <DialogActions>
                   <Button onClick={handleReset} disabled={isSubmitting}>
@@ -486,7 +491,7 @@ const FileManagerFragment = createFragmentContainer(FileManager, {
       updated_at
       configurations {
         id
-        name,
+        name
         configuration
       }
     }

diff --git a/opencti-platform/opencti-front/src/private/components/common/files/PictureLine.tsx b/opencti-platform/opencti-front/src/private/components/common/files/PictureLine.tsx
@@ -101,7 +101,7 @@ const PictureLine: FunctionComponent<PictureLineComponentProps> = ({
           }
         />
         <ListItemIcon classes={{ root: classes.goIcon }}>
-          <NorthEastOutlined />
+          <NorthEastOutlined fontSize="small" />
         </ListItemIcon>
       </ListItem>
       <Drawer

diff --git a/...latform/opencti-front/src/private/components/common/files/workbench/WorkbenchFileLine.jsx b/...latform/opencti-front/src/private/components/common/files/workbench/WorkbenchFileLine.jsx
@@ -248,9 +248,9 @@ class WorkbenchFileLineComponent extends Component {
                     )}`}
                     aria-haspopup="true"
                     color={nested ? 'inherit' : 'primary'}
-                    size="large"
+                    size="small"
                   >
-                    <GetAppOutlined />
+                    <GetAppOutlined fontSize="small" />
                   </IconButton>
                 </span>
               </Tooltip>
@@ -261,9 +261,9 @@ class WorkbenchFileLineComponent extends Component {
                   disabled={isProgress}
                   color={nested ? 'inherit' : 'primary'}
                   onClick={this.handleOpenDelete.bind(this)}
-                  size="large"
+                  size="small"
                 >
-                  <DeleteOutlined />
+                  <DeleteOutlined fontSize="small" />
                 </IconButton>
               </span>
             </Tooltip>

diff --git a/opencti-platform/opencti-front/src/private/components/observations/artifacts/Root.jsx b/opencti-platform/opencti-front/src/private/components/observations/artifacts/Root.jsx
@@ -158,6 +158,7 @@ class RootArtifact extends Component {
                             connectorsImport={props.connectorsForImport}
                             connectorsExport={props.connectorsForExport}
                             entity={props.stixCyberObservable}
+                            isArtifact={true}
                           />
                         </React.Fragment>
                       )}