Merge branch 'guacsec:main' into tests/aibom_cbom

Author: mrrajan

client/src/app/components/UploadFiles.tsx

@@ -14,6 +14,7 @@ import {
   ModalHeader,
   MultipleFileUpload,
   MultipleFileUploadMain,
+  type MultipleFileUploadProps,
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
   Spinner,
@@ -37,6 +38,10 @@ export interface IUploadFilesProps {
   handleRemoveUpload: (file: File) => void;
   extractSuccessMessage: (response: AxiosResponse) => string;
   extractErrorMessage: (error: AxiosError) => string;
+  fileUploadProps?: Omit<
+    MultipleFileUploadProps,
+    "onFileDrop" | "dropzoneProps"
+  >;
 }
 
 export const UploadFiles: React.FC<IUploadFilesProps> = ({
@@ -45,6 +50,7 @@ export const UploadFiles: React.FC<IUploadFilesProps> = ({
   handleRemoveUpload,
   extractSuccessMessage,
   extractErrorMessage,
+  fileUploadProps,
 }) => {
   const [showStatus, setShowStatus] = React.useState(false);
   const [statusIcon, setStatusIcon] = React.useState<
@@ -99,6 +105,7 @@ export const UploadFiles: React.FC<IUploadFilesProps> = ({
         onDropRejected: handleDropRejected,
         useFsAccessApi: false, // Required to make playwright work
       }}
+      {...fileUploadProps}
     >
       <MultipleFileUploadMain
         titleIcon={<UploadIcon />}

client/src/app/pages/advisory-upload/advisory-upload.tsx

@@ -37,6 +37,7 @@ export const AdvisoryUpload: React.FC = () => {
       </PageSection>
       <PageSection>
         <UploadFiles
+          fileUploadProps={{ "aria-label": "advisory-uploader" }}
           uploads={uploads}
           handleUpload={handleUpload}
           handleRemoveUpload={handleRemoveUpload}

client/src/app/pages/sbom-upload/sbom-upload.tsx

@@ -41,6 +41,7 @@ export const SbomUpload: React.FC = () => {
       </PageSection>
       <PageSection>
         <UploadFiles
+          fileUploadProps={{ "aria-label": "sbom-uploader" }}
           uploads={uploads}
           handleUpload={handleUpload}
           handleRemoveUpload={handleRemoveUpload}

e2e/tests/common/assets/invalid-file.json

@@ -0,0 +1 @@
+{}

e2e/tests/common/assets/invalid-file.txt

@@ -0,0 +1 @@
+nothing

e2e/tests/ui/assertions/FileUploadMatchers.ts

@@ -0,0 +1,83 @@
+import { expect as baseExpect } from "@playwright/test";
+import type { FileUpload } from "../pages/FileUpload";
+import type { MatcherResult } from "./types";
+
+export interface FileUploadMatchers {
+  toHaveSummaryUploadStatus(expectedStatus: {
+    successfulFiles: number;
+    totalFiles: number;
+  }): Promise<MatcherResult>;
+  toHaveItemUploadStatus(expectedStatus: {
+    fileName: string;
+    status: "success" | "danger";
+  }): Promise<MatcherResult>;
+}
+
+type FileUploadMatcherDefinitions = {
+  readonly [K in keyof FileUploadMatchers]: (
+    receiver: FileUpload,
+    ...args: Parameters<FileUploadMatchers[K]>
+  ) => Promise<MatcherResult>;
+};
+
+export const fileUploadAssertions =
+  baseExpect.extend<FileUploadMatcherDefinitions>({
+    toHaveSummaryUploadStatus: async (
+      fileUpload: FileUpload,
+      expectedStatus: {
+        successfulFiles: number;
+        totalFiles: number;
+      },
+    ): Promise<MatcherResult> => {
+      try {
+        await baseExpect(
+          fileUpload._uploader.locator(
+            ".pf-v6-c-multiple-file-upload__status .pf-v6-c-expandable-section__toggle",
+          ),
+        ).toContainText(
+          `${expectedStatus.successfulFiles} of ${expectedStatus.totalFiles} files uploaded`,
+        );
+
+        return {
+          pass: true,
+          message: () => "Uploader has expected summary status",
+        };
+      } catch (error) {
+        return {
+          pass: false,
+          message: () =>
+            error instanceof Error ? error.message : String(error),
+        };
+      }
+    },
+    toHaveItemUploadStatus: async (
+      fileUpload: FileUpload,
+      expectedStatus: {
+        fileName: string;
+        status: "success" | "danger";
+      },
+    ): Promise<MatcherResult> => {
+      try {
+        const statusItem = await fileUpload.getUploadStatusItem(
+          expectedStatus.fileName,
+        );
+        await baseExpect(
+          statusItem.locator(`.pf-v6-c-progress.pf-m-${expectedStatus.status}`),
+        ).toBeVisible();
+        await baseExpect(
+          statusItem.locator(".pf-v6-c-progress__status", { hasText: "100%" }),
+        ).toBeVisible();
+
+        return {
+          pass: true,
+          message: () => "Uploader has item with expected status",
+        };
+      } catch (error) {
+        return {
+          pass: false,
+          message: () =>
+            error instanceof Error ? error.message : String(error),
+        };
+      }
+    },
+  });

e2e/tests/ui/assertions/index.ts

@@ -16,11 +16,18 @@ import { toolbarAssertions, type ToolbarMatchers } from "./ToolbarMatchers";
 import type { DeletionConfirmDialog } from "../pages/ConfirmDialog";
 import { dialogAssertions, type DialogMatchers } from "./DialogMatchers";
 
+import type { FileUpload } from "../pages/FileUpload";
+import {
+  fileUploadAssertions,
+  type FileUploadMatchers,
+} from "./FileUploadMatchers";
+
 const merged = mergeExpects(
   tableAssertions,
   paginationAssertions,
   toolbarAssertions,
   dialogAssertions,
+  fileUploadAssertions,
   // Add more custom assertions here
 );
 
@@ -74,6 +81,14 @@ function typedExpect(
 > &
   DialogMatchers;
 
+/**
+ * Overload from FileUploadMatchers.ts
+ */
+function typedExpect(
+  value: FileUpload,
+): Omit<ReturnType<typeof merged<FileUpload>>, keyof FileUploadMatchers> &
+  FileUploadMatchers;
+
 // Default overload
 function typedExpect<T>(value: T): ReturnType<typeof merged<T>>;
 function typedExpect<T>(value: T): unknown {

e2e/tests/ui/pages/FileUpload.ts

@@ -0,0 +1,41 @@
+import { expect, type Locator, type Page } from "@playwright/test";
+
+export class FileUpload {
+  private readonly _page: Page;
+  _uploader: Locator;
+
+  private constructor(page: Page, uploader: Locator) {
+    this._page = page;
+    this._uploader = uploader;
+  }
+
+  static async build(page: Page, ariaLabel: string) {
+    const locator = page.locator(
+      `div.pf-v6-c-multiple-file-upload[aria-label="${ariaLabel}"]`,
+    );
+    await expect(locator).toBeVisible();
+    return new FileUpload(page, locator);
+  }
+
+  async uploadFiles(filePaths: string[]) {
+    const fileChooserPromise = this._page.waitForEvent("filechooser");
+    await this._uploader
+      .getByRole("button", { name: "Upload", exact: true })
+      .click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(filePaths);
+  }
+
+  async getUploadStatusItem(fileName: string) {
+    const item = this._page
+      .locator(".pf-v6-c-multiple-file-upload__status-item")
+      .filter({
+        has: this._page
+          .locator(".pf-v6-c-progress__description")
+          .filter({ hasText: fileName }),
+      });
+    await expect(item).toBeVisible();
+
+    return item;
+  }
+}

e2e/tests/ui/pages/Navigation.ts

@@ -22,8 +22,7 @@ export class Navigation {
       | "Vulnerabilities"
       | "Packages"
       | "Advisories"
-      | "Importers"
-      | "Upload",
+      | "Importers",
   ) {
     // By default, we do not initialize navigation at "/"" where the Dashboard is located
     // This should help us to save some time loading pages as the Dashboard fetches too much data

e2e/tests/ui/pages/advisory-upload/AdvisoryUploadPage.ts

@@ -0,0 +1,19 @@
+import type { Page } from "@playwright/test";
+import { FileUpload } from "../FileUpload";
+
+export class AdvisoryUploadPage {
+  private readonly _page: Page;
+
+  private constructor(page: Page) {
+    this._page = page;
+  }
+
+  static async buildFromBrowserPath(page: Page) {
+    await page.goto("/advisories/upload");
+    return new AdvisoryUploadPage(page);
+  }
+
+  async getFileUploader() {
+    return await FileUpload.build(this._page, "advisory-uploader");
+  }
+}