[frontend] Fix error message when attempting to create an artifact wi…

…thout file (#6052)

Co-authored-by: Laurent Bonnet <146674147+labo-flg@users.noreply.github.com>

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

@@ -1,4 +1,4 @@
-import React, { FormEvent, FunctionComponent, useState } from 'react';
+import React, { FormEvent, FunctionComponent, useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { Theme } from '@mui/material/styles/createTheme';
@@ -17,6 +17,9 @@ interface CustomFileUploadProps {
   ) => Promise<unknown>;
   isEmbeddedInExternalReferenceCreation?: boolean;
   label?: string;
+  formikErrors?: {
+    file?: string,
+  }
   acceptMimeTypes?: string; // html input "accept" with MIME types only
   sizeLimit?: number; // in bytes
 }
@@ -60,12 +63,21 @@ const CustomFileUploader: FunctionComponent<CustomFileUploadProps> = ({
   label,
   acceptMimeTypes,
   sizeLimit = 0, // defaults to 0 = no limit
+  formikErrors,
 }) => {
   const { t_i18n } = useFormatter();
   const classes = useStyles();
   const [fileNameForDisplay, setFileNameForDisplay] = useState('');
   const [errorText, setErrorText] = useState('');
 
+  useEffect(() => {
+    if (formikErrors?.file) {
+      setErrorText(formikErrors?.file);
+    } else {
+      setErrorText('');
+    }
+  }, [formikErrors]);
+
   const onChange = async (event: FormEvent) => {
     const inputElement = event.target as HTMLInputElement;
     const eventTargetValue = inputElement.value as string;

opencti-platform/opencti-front/src/private/components/observations/Artifacts.tsx

@@ -178,15 +178,17 @@ const Artifacts: FunctionComponent = () => {
   };
 
   return (
-    <ExportContextProvider>
-      <Breadcrumbs variant="list" elements={[{ label: t_i18n('Observations') }, { label: t_i18n('Artifacts'), current: true }]} />
-      {renderLines()}
-      <Security needs={[KNOWLEDGE_KNUPDATE]}>
-        <ArtifactCreation
-          paginationOptions={queryPaginationOptions}
-        />
-      </Security>
-    </ExportContextProvider>
+    <div data-testid="artifact-page">
+      <ExportContextProvider>
+        <Breadcrumbs variant="list" elements={[{ label: t_i18n('Observations') }, { label: t_i18n('Artifacts'), current: true }]} />
+        {renderLines()}
+        <Security needs={[KNOWLEDGE_KNUPDATE]}>
+          <ArtifactCreation
+            paginationOptions={queryPaginationOptions}
+          />
+        </Security>
+      </ExportContextProvider>
+    </div>
   );
 };
 

opencti-platform/opencti-front/src/private/components/observations/artifacts/ArtifactCreation.jsx

@@ -18,7 +18,7 @@ import ObjectMarkingField from '../../common/form/ObjectMarkingField';
 import MarkdownField from '../../../../components/MarkdownField';
 import { fieldSpacingContainerStyle } from '../../../../utils/field';
 import { insertNode } from '../../../../utils/store';
-import CustomFileUpload from '../../common/files/CustomFileUploader';
+import CustomFileUploader from '../../common/files/CustomFileUploader';
 
 const useStyles = makeStyles((theme) => ({
   drawerPaper: {
@@ -83,7 +83,7 @@ const artifactMutation = graphql`
 `;
 
 const artifactValidation = (t) => Yup.object().shape({
-  file: Yup.mixed().required(t(' field is required')),
+  file: Yup.mixed().required(t('This field is required')),
   x_opencti_description: Yup.string().nullable(),
 });
 
@@ -189,9 +189,10 @@ const ArtifactCreation = ({
               isSubmitting,
               setFieldValue,
               values,
+              errors,
             }) => (
               <Form style={{ margin: '20px 0 20px 0' }}>
-                <CustomFileUpload setFieldValue={setFieldValue} />
+                <CustomFileUploader setFieldValue={setFieldValue} formikErrors={errors}/>
                 <Field
                   component={MarkdownField}
                   name="x_opencti_description"

opencti-platform/opencti-front/tests_e2e/artifact/createArtifact.spec.ts

@@ -0,0 +1,14 @@
+import { ArtifactPage} from "../model/Artifact.pageModel";
+import { ArtifactImportPage} from "../model/ArtifactImport.pageModel";
+import { expect, test } from "../fixtures/baseFixtures";
+
+
+  test('Artifact error message in the absence of a file.', async ({ page }) => {
+    const artifactPage = new ArtifactPage(page);
+    const artifactImport = new ArtifactImportPage(page);
+    await page.goto('/dashboard/observations/artifacts')
+    await artifactPage.addNewArtifactImport().click();
+    artifactImport.getFileInput();
+    await artifactImport.getCreateArtifactImportButton().click();
+    await expect (artifactImport.getErrorMessage()).toBeVisible();
+})

opencti-platform/opencti-front/tests_e2e/model/Artifact.pageModel.ts

@@ -0,0 +1,12 @@
+import { Page } from "@playwright/test";
+
+export class ArtifactPage {
+    constructor(private page: Page) {
+    }
+    getPage() {
+        return this.page.getByTestId('Artifact-page');
+    }
+    addNewArtifactImport() {
+        return this.page.getByLabel('Add', { exact: true })
+    }
+}

opencti-platform/opencti-front/tests_e2e/model/ArtifactImport.pageModel.tsx

@@ -0,0 +1,15 @@
+import { Page } from "@playwright/test";
+
+export class ArtifactImportPage {
+    constructor(private page: Page) {
+    }
+    getFileInput() {
+        return this.page.getByLabel('file');
+    }
+    getCreateArtifactImportButton() {
+        return this.page.getByRole('button', { name: 'Create' });
+    }
+    getErrorMessage() {
+        return this.page.getByText('This field is required')
+    }
+};