[frontend/backend] Marking definitions for uploaded files (#5823)

opencti-platform/opencti-front/lang/front/de.json

@@ -2102,6 +2102,7 @@
   "Select all nodes": "Alle Knoten auswählen",
   "Select by entity type": "Auswahl nach Entitätstyp",
   "Select destination": "Ziel auswählen",
+  "Select file marking définitions": "Definitionen der Dateikennzeichnung auswählen",
   "Select options": "Optionen auswählen",
   "Select your file": "Wählen Sie Ihre Datei",
   "selected": "ausgewählte",
@@ -2721,4 +2722,4 @@
   "Zoom": "Vergrößern",
   "Zoom in": "Vergrößern",
   "Zoom out": "Verkleinern"
-}
+}

opencti-platform/opencti-front/lang/front/en.json

@@ -2102,6 +2102,7 @@
   "Select all nodes": "Select all nodes",
   "Select by entity type": "Select by entity type",
   "Select destination": "Select destination",
+  "Select file marking définitions": "Select file marking définitions",
   "Select options": "Select options",
   "Select your file": "Select your file",
   "selected": "selected",
@@ -2721,4 +2722,4 @@
   "Zoom": "Zoom",
   "Zoom in": "Zoom in",
   "Zoom out": "Zoom out"
-}
+}

opencti-platform/opencti-front/lang/front/es.json

@@ -2102,6 +2102,7 @@
   "Select all nodes": "Séleccionar todos los nodos",
   "Select by entity type": "Séleccionar por tipo",
   "Select destination": "Seleccionar destino",
+  "Select file marking définitions": "Seleccionar definiciones de marcado de archivos",
   "Select options": "Seleccionar opciones",
   "Select your file": "Seleccionar otro fichero",
   "selected": "seleccionado(s)",
@@ -2721,4 +2722,4 @@
   "Zoom": "Zoom",
   "Zoom in": "Ampliar",
   "Zoom out": "Alejar"
-}
+}

opencti-platform/opencti-front/lang/front/fr.json

@@ -2102,6 +2102,7 @@
   "Select all nodes": "Sélectionner tous les noeuds",
   "Select by entity type": "Sélectionner par type",
   "Select destination": "Sélectionner la destination",
+  "Select file marking définitions": "Sélectionner les définitions de marquage de fichiers",
   "Select options": "Sélectionner les options",
   "Select your file": "Selectionner votre fichier",
   "selected": "sélectionné(s)",
@@ -2721,4 +2722,4 @@
   "Zoom": "Zoom",
   "Zoom in": "Zoomer",
   "Zoom out": "Zoom arrière"
-}
+}

opencti-platform/opencti-front/lang/front/ja.json

@@ -2102,6 +2102,7 @@
   "Select all nodes": "すべてのノードを選択",
   "Select by entity type": "エンティティ種別を指定して選択",
   "Select destination": "送信先の選択",
+  "Select file marking définitions": "ファイルマーキングの定義を選択",
   "Select options": "オプションの選択",
   "Select your file": "ファイルを選択してください",
   "selected": "選択中: ",
@@ -2721,4 +2722,4 @@
   "Zoom": "ズーム",
   "Zoom in": "ズームイン",
   "Zoom out": "ズームアウト"
-}
+}

opencti-platform/opencti-front/lang/front/zh.json

@@ -2102,6 +2102,7 @@
   "Select all nodes": "选择所有节点",
   "Select by entity type": "按实体类型选择",
   "Select destination": "选择目的地",
+  "Select file marking définitions": "选择文件标识定义",
   "Select options": "选择选项",
   "Select your file": "选择你的文件",
   "selected": "已选",
@@ -2721,4 +2722,4 @@
   "Zoom": "放大",
   "Zoom in": "放大",
   "Zoom out": "缩小"
-}
+}

opencti-platform/opencti-front/src/private/components/common/containers/ContainerHeader.jsx

@@ -1074,6 +1074,7 @@ const ContainerHeader = (props) => {
                 instanceId={container.id}
                 instanceType={container.entity_type}
                 instanceName={getMainRepresentative(container)}
+                instanceMarkings={container.objectMarking.map(({ id }) => id)}
                 type="container"
               />
             )}

opencti-platform/opencti-front/src/private/components/common/files/FileImportMarkingSelectionPopup.tsx

@@ -0,0 +1,77 @@
+import { Formik } from 'formik';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import React from 'react';
+import ObjectMarkingField from '@components/common/form/ObjectMarkingField';
+import Button from '@mui/material/Button';
+import { Option } from '@components/common/form/ReferenceField';
+import { useFormatter } from '../../../../components/i18n';
+import { fieldSpacingContainerStyle } from '../../../../utils/field';
+
+type FileImportMarkingSelectionPopupProps = {
+  closePopup: () => void;
+  handleUpload: (fileMarkings: string[]) => void;
+  isOpen: boolean
+};
+
+export type SubmittedMarkingsType = {
+  fileMarkings: Option[];
+};
+
+const FileImportMarkingSelectionPopup = ({ closePopup, handleUpload, isOpen }: FileImportMarkingSelectionPopupProps) => {
+  const { t_i18n } = useFormatter();
+
+  const handleSubmit = (values: SubmittedMarkingsType) => {
+    const fileMarkings = values.fileMarkings.map(({ value }) => value);
+    closePopup();
+    handleUpload(fileMarkings);
+  };
+
+  return (
+    <div>
+      <Formik
+        enableReinitialize={true}
+        initialValues={{
+          fileMarkings: [],
+        }}
+        onSubmit={handleSubmit}
+      >
+        {({ resetForm, submitForm }) => (
+          <Dialog open={isOpen} fullWidth={true} PaperProps={{ elevation: 1 }} onClose={() => {
+            resetForm();
+            closePopup();
+          }}
+          >
+            <DialogTitle>{t_i18n('Select file marking définitions')}</DialogTitle>
+            <DialogContent>
+              <ObjectMarkingField
+                name="fileMarkings"
+                label={t_i18n('File marking definition levels')}
+                style={fieldSpacingContainerStyle}
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={() => {
+                resetForm();
+                closePopup();
+              }}
+              >
+                {t_i18n('Cancel')}
+              </Button>
+              <Button
+                color="secondary"
+                onClick={submitForm}
+              >
+                {t_i18n('Validate')}
+              </Button>
+            </DialogActions>
+          </Dialog>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+export default FileImportMarkingSelectionPopup;

opencti-platform/opencti-front/src/private/components/common/files/FileUploader.tsx

@@ -9,35 +9,36 @@ import { commitMutation, MESSAGING$ } from '../../../../relay/environment';
 import { useFormatter } from '../../../../components/i18n';
 import { FileUploaderEntityMutation$data } from './__generated__/FileUploaderEntityMutation.graphql';
 import { FileUploaderGlobalMutation$data } from './__generated__/FileUploaderGlobalMutation.graphql';
+import FileImportMarkingSelectionPopup from './FileImportMarkingSelectionPopup';
 
 const fileUploaderGlobalMutation = graphql`
-  mutation FileUploaderGlobalMutation($file: Upload!) {
-    uploadImport(file: $file) {
-      id
-      ...FileLine_file
+    mutation FileUploaderGlobalMutation($file: Upload!, $fileMarkings: [String]) {
+        uploadImport(file: $file, fileMarkings: $fileMarkings) {
+            id
+            ...FileLine_file
+        }
     }
-  }
 `;
 
 const fileUploaderEntityMutation = graphql`
-  mutation FileUploaderEntityMutation($id: ID!, $file: Upload!) {
-    stixCoreObjectEdit(id: $id) {
-      importPush(file: $file) {
-        id
-        ...FileLine_file
-        metaData {
-          entity {
-            ... on StixObject {
-              id
-            }
-            ... on StixDomainObject {
-              ...PictureManagementViewer_entity
+    mutation FileUploaderEntityMutation($id: ID!, $file: Upload!, $fileMarkings: [String]) {
+        stixCoreObjectEdit(id: $id) {
+            importPush(file: $file, fileMarkings: $fileMarkings) {
+                id
+                ...FileLine_file
+                metaData {
+                    entity {
+                        ... on StixObject {
+                            id
+                        }
+                        ... on StixDomainObject {
+                            ...PictureManagementViewer_entity
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 `;
 
 interface FileUploaderProps {
@@ -56,20 +57,22 @@ const FileUploader: FunctionComponent<FileUploaderProps> = ({
   nameInCallback,
 }) => {
   const { t_i18n } = useFormatter();
-
   const uploadRef = useRef<HTMLInputElement | null>(null);
   const [upload, setUpload] = useState<string | null>(null);
-
+  const [selectedFile, setSelectedFile] = useState<File>();
   const handleOpenUpload = () => uploadRef.current?.click();
 
-  const handleUpload = (file: File) => {
+  const closeFileImportMarkingSelectionPopup = () => setSelectedFile(undefined);
+
+  const handleUpload = (fileMarkings: string[]) => {
+    if (!selectedFile) return;
     commitMutation({
       mutation: entityId
         ? fileUploaderEntityMutation
         : fileUploaderGlobalMutation,
-      variables: { file, id: entityId },
+      variables: { file: selectedFile, fileMarkings, id: entityId },
       optimisticUpdater: () => {
-        setUpload(file.name);
+        setUpload(selectedFile.name);
       },
       onCompleted: (
         result:
@@ -94,10 +97,12 @@ const FileUploader: FunctionComponent<FileUploaderProps> = ({
       updater: undefined,
       optimisticResponse: undefined,
       onError: undefined,
-      setSubmitting: undefined,
+      setSubmitting: true,
     });
   };
 
+  const hasSelectedFile = !!selectedFile;
+
   return (
     <React.Fragment>
       {accept ? (
@@ -107,9 +112,7 @@ const FileUploader: FunctionComponent<FileUploaderProps> = ({
           style={{ display: 'none' }}
           onChange={({ target: { validity, files } }) => {
             const file = files?.item(0);
-            if (file && validity.valid) {
-              handleUpload(file);
-            }
+            if (file && validity.valid) setSelectedFile(file);
           }}
           accept={accept}
         />
@@ -120,12 +123,17 @@ const FileUploader: FunctionComponent<FileUploaderProps> = ({
           style={{ display: 'none' }}
           onChange={({ target: { validity, files } }) => {
             const file = files?.item(0);
-            if (file && validity.valid) {
-              handleUpload(file);
-            }
+            if (file && validity.valid) setSelectedFile(file);
           }}
         />
       )}
+      {hasSelectedFile && (
+        <FileImportMarkingSelectionPopup
+          isOpen={hasSelectedFile}
+          handleUpload={handleUpload}
+          closePopup={closeFileImportMarkingSelectionPopup}
+        />
+      )}
       {upload ? (
         <Tooltip
           title={`Uploading ${upload}`}