feat: export vulnerabilities list

Signed-off-by: Andreea-Lupu <[email protected]>

package.json

@@ -14,24 +14,26 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.24.0",
     "downshift": "^6.1.12",
+    "export-from-json": "^1.7.3",
     "lodash": "^4.17.21",
     "luxon": "^2.5.2",
     "markdown-to-jsx": "^7.1.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "react-sticky-el": "^2.0.9",
-    "web-vitals": "^2.1.3"
+    "web-vitals": "^2.1.3",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
     "@playwright/test": "^1.28.1",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.8",
     "prettier": "^2.7.1",
-    "react-scripts": "^5.0.1",
-    "@babel/plugin-proposal-private-property-in-object": "^7.16.7"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/__tests__/TagPage/VulnerabilitiesDetails.test.js

@@ -6,6 +6,8 @@ import VulnerabilitiesDetails from 'components/Tag/Tabs/VulnerabilitiesDetails';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
+jest.mock('xlsx');
+
 const StateVulnerabilitiesWrapper = () => {
   return (
     <MockThemeProvider>
@@ -538,13 +540,14 @@ describe('Vulnerabilties page', () => {
     jest.spyOn(api, 'get').mockRejectedValue({ status: 500, data: {} });
     const error = jest.spyOn(console, 'error').mockImplementation(() => {});
     render(<StateVulnerabilitiesWrapper />);
-    await waitFor(() => expect(error).toBeCalledTimes(1));
+    await waitFor(() => expect(error).toBeCalledTimes(2));
   });
 
   it('should find out which version fixes the CVEs', async () => {
     jest
       .spyOn(api, 'get')
       .mockResolvedValueOnce({ status: 200, data: { data: mockCVEList } })
+      .mockResolvedValueOnce({ status: 200, data: { data: mockCVEList } })
       .mockResolvedValueOnce({ status: 200, data: { data: mockCVEFixed.pageOne } })
       .mockResolvedValueOnce({ status: 200, data: { data: mockCVEFixed.pageTwo } });
     render(<StateVulnerabilitiesWrapper />);
@@ -558,6 +561,32 @@ describe('Vulnerabilties page', () => {
     expect(await screen.findByText('latest')).toBeInTheDocument();
   });
 
+  it('should allow export of vulnerabilities list', async () => {
+    const xlsxMock = jest.createMockFromModule('xlsx');
+    xlsxMock.writeFile = jest.fn();
+
+    jest
+      .spyOn(api, 'get')
+      .mockResolvedValueOnce({ status: 200, data: { data: mockCVEList } })
+      .mockResolvedValueOnce({ status: 200, data: { data: mockCVEList } });
+    render(<StateVulnerabilitiesWrapper />);
+    await waitFor(() => expect(screen.getAllByText('Vulnerabilities')).toHaveLength(1));
+    const downloadBtn = await screen.findAllByTestId('DownloadIcon');
+    fireEvent.click(downloadBtn[0]);
+    expect(await screen.findByTestId('export-csv-menuItem')).toBeInTheDocument();
+    expect(await screen.findByTestId('export-excel-menuItem')).toBeInTheDocument();
+    const exportAsCSVBtn = screen.getByText(/csv/i);
+    expect(exportAsCSVBtn).toBeInTheDocument();
+    global.URL.createObjectURL = jest.fn();
+    await fireEvent.click(exportAsCSVBtn);
+    expect(await screen.findByTestId('export-csv-menuItem')).not.toBeInTheDocument();
+    fireEvent.click(downloadBtn[0]);
+    const exportAsExcelBtn = screen.getByText(/MS Excel/i);
+    expect(exportAsExcelBtn).toBeInTheDocument();
+    await fireEvent.click(exportAsExcelBtn);
+    expect(await screen.findByTestId('export-excel-menuItem')).not.toBeInTheDocument();
+  });
+
   it('should handle fixed CVE query errors', async () => {
     jest
       .spyOn(api, 'get')

src/api.js

@@ -99,6 +99,10 @@ const endpoints = {
     }
     return `${query}){Tag Page {TotalCount ItemCount} CVEList {Id Title Description Severity PackageList {Name InstalledVersion FixedVersion}}}}`;
   },
+  allVulnerabilitiesForRepo: (name) => {
+    let query = `/v2/_zot/ext/search?query={CVEListForImage(image: "${name}"`;
+    return `${query}){Tag Page {TotalCount ItemCount} CVEList {Id Title Description Severity Reference PackageList {Name InstalledVersion FixedVersion}}}}`;
+  },
   imageListWithCVEFixed: (cveId, repoName, { pageNumber = 1, pageSize = 3 }, filter = {}) => {
     let filterParam = '';
     if (filter.Os || filter.Arch) {