New Vulnerabilities list tab and page

.eslintrc

@@ -14,15 +14,18 @@
           "advisor",
           "ansible",
           "camelcase",
+          "cdn",
           "checkbox",
           "csrf",
+          "cve",
           "cves",
           "dropdown",
           "donut",
           "hostnames",
           "href",
           "ips",
           "ipv4",
+          "dropdown",
           "jed",
           "katello",
           "knowledgebase",
@@ -31,15 +34,15 @@
           "nowrap",
           "pid",
           "redhat",
+          "redux",
           "remediate",
           "remediations",
           "repo",
           "rhc",
+          "scalprum",
           "theforeman",
           "tooltip",
-          "unmount",
-          "redux",
-          "dropdown"
+          "unmount"
         ],
         "minLength": 3
       }

package.json

@@ -21,6 +21,10 @@
   "peerDependencies": {
     "@theforeman/vendor": ">= 15.0.1"
   },
+  "dependencies": {
+    "@scalprum/react-core": "^0.9.3",
+    "@scalprum/core": "^0.8.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.7.0",
     "@theforeman/builder": ">= 15.0.1",

webpack/CVEsHostDetailsTab/CVEsHostDetailsTab.js

@@ -1,17 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { translate as __ } from 'foremanReact/common/I18n';
+import { ScalprumComponent, ScalprumProvider } from '@scalprum/react-core';
+import { providerOptions } from '../common/ScalprumModule/ScalprumContext';
 
-const CVEsHostDetailsTab = ({ hostName }) => (
-  <div>
-    <h1>
-      {__('CVEs tab for host:')} {hostName}
-    </h1>
-  </div>
-);
+const CVEsHostDetailsTab = ({ systemId }) => {
+  const scope = 'vulnerability';
+  const module = './SystemDetailTable';
+  return (
+    <div className="rh-cloud-insights-vulnerability-host-details-component">
+      <ScalprumComponent scope={scope} module={module} systemId={systemId} />
+    </div>
+  );
+};
 
 CVEsHostDetailsTab.propTypes = {
-  hostName: PropTypes.string.isRequired,
+  systemId: PropTypes.string.isRequired,
+};
+
+const CVEsHostDetailsTabWrapper = ({ response }) => (
+  <ScalprumProvider {...providerOptions}>
+    <CVEsHostDetailsTab
+      // eslint-disable-next-line camelcase
+      systemId={response?.subscription_facet_attributes?.uuid}
+    />
+  </ScalprumProvider>
+);
+
+CVEsHostDetailsTabWrapper.propTypes = {
+  response: PropTypes.shape({
+    subscription_facet_attributes: PropTypes.shape({
+      uuid: PropTypes.string.isRequired,
+    }),
+  }).isRequired,
 };
 
-export default CVEsHostDetailsTab;
+export default CVEsHostDetailsTabWrapper;

webpack/CVEsHostDetailsTab/__tests__/CVEsHostDetailsTab.test.js

@@ -1,18 +1,25 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import CVEsHostDetailsTab from '../CVEsHostDetailsTab';
+import { render } from '@testing-library/react';
+import CVEsHostDetailsTabWrapper from '../CVEsHostDetailsTab';
 
-describe('CVEsHostDetailsTab', () => {
+jest.mock('@scalprum/react-core', () => ({
+  ScalprumComponent: jest.fn(props => (
+    <div data-testid="mock-scalprum-component">{JSON.stringify(props)}</div>
+  )),
+  ScalprumProvider: jest.fn(({ children }) => <div>{children}</div>),
+}));
+
+describe('CVEsHostDetailsTabWrapper', () => {
   it('renders without crashing', () => {
-    render(<CVEsHostDetailsTab hostName="test-host.example.com" />);
+    const { container } = render(
+      <CVEsHostDetailsTabWrapper
+        response={{ subscription_facet_attributes: { uuid: '1-2-3' } }}
+      />
+    );
     expect(
-      screen.getByText('CVEs tab for host: test-host.example.com')
+      container.querySelector(
+        '.rh-cloud-insights-vulnerability-host-details-component'
+      )
     ).toBeTruthy();
   });
-
-  it('renders the host name', () => {
-    const hostName = 'test-host.example.com';
-    render(<CVEsHostDetailsTab hostName={hostName} />);
-    expect(screen.getByText(`CVEs tab for host: ${hostName}`)).toBeTruthy();
-  });
 });

webpack/CVEsHostDetailsTab/index.js

@@ -1,3 +1,3 @@
-import CVEsHostDetailsTab from './CVEsHostDetailsTab';
+import CVEsHostDetailsTabWrapper from './CVEsHostDetailsTab';
 
-export default CVEsHostDetailsTab;
+export default CVEsHostDetailsTabWrapper;

webpack/ForemanRhCloudFills.js

@@ -5,7 +5,7 @@ import InventoryAutoUploadSwitcher from './ForemanInventoryUpload/SubscriptionsP
 import NewHostDetailsTab from './InsightsHostDetailsTab/NewHostDetailsTab';
 import { InsightsTotalRiskChartWrapper } from './InsightsHostDetailsTab/InsightsTotalRiskChartWrapper';
 import { isNotRhelHost, vulnerabilityDisabled } from './ForemanRhCloudHelpers';
-import CVEsHostDetailsTab from './CVEsHostDetailsTab/CVEsHostDetailsTab';
+import CVEsHostDetailsTabWrapper from './CVEsHostDetailsTab/CVEsHostDetailsTab';
 
 const fills = [
   {
@@ -32,11 +32,12 @@ const fills = [
   },
   {
     slot: 'host-details-page-tabs',
-    name: 'CVEs',
-    component: props => <CVEsHostDetailsTab {...props} />,
+    name: 'Vulnerabilities',
+    component: props => <CVEsHostDetailsTabWrapper {...props} />,
     weight: 300,
     metadata: {
       hideTab: vulnerabilityDisabled,
+      title: __('Vulnerabilities'),
     },
   },
 ];

webpack/ForemanRhCloudPages.js

@@ -2,15 +2,18 @@ import React from 'react';
 import componentRegistry from 'foremanReact/components/componentRegistry';
 import { registerRoutes as foremanRegisterRoutes } from 'foremanReact/routes/RoutingService';
 import ForemanInventoryUpload from './ForemanInventoryUpload';
-import InsightsVulnerability from './InsightsVulnerability/InsightsVulnerability';
+import InsightsVulnerabilityListPage from './InsightsVulnerability/InsightsVulnerabilityListPage';
 import InsightsCloudSync from './InsightsCloudSync';
 import InsightsHostDetailsTab from './InsightsHostDetailsTab';
 
 const pages = [
   { name: 'ForemanInventoryUpload', type: ForemanInventoryUpload },
   { name: 'InsightsCloudSync', type: InsightsCloudSync },
   { name: 'InsightsHostDetailsTab', type: InsightsHostDetailsTab },
-  { name: 'InsightsVulnerability', type: InsightsVulnerability },
+  {
+    name: 'InsightsVulnerabilityListPage',
+    type: InsightsVulnerabilityListPage,
+  },
 ];
 
 export const registerPages = () => {
@@ -31,7 +34,7 @@ export const routes = [
   {
     path: '/foreman_rh_cloud/insights_vulnerability',
     exact: true,
-    render: props => <InsightsVulnerability {...props} />,
+    render: props => <InsightsVulnerabilityListPage {...props} />,
   },
 ];
 

webpack/InsightsVulnerability/InsightsVulnerabilityListPage.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ScalprumComponent, ScalprumProvider } from '@scalprum/react-core';
+import { providerOptions } from '../common/ScalprumModule/ScalprumContext';
+
+const InsightsVulnerabilityListPage = () => {
+  const scope = 'vulnerability';
+  const module = './CveListPage';
+  return (
+    <div className="rh-cloud-insights-vulnerability-page">
+      <ScalprumComponent scope={scope} module={module} />
+    </div>
+  );
+};
+
+const InsightsVulnerabilityListPageWrap = () => (
+  <ScalprumProvider {...providerOptions}>
+    <InsightsVulnerabilityListPage />
+  </ScalprumProvider>
+);
+
+export default InsightsVulnerabilityListPageWrap;

webpack/InsightsVulnerability/InsightsVulnerabilityListPage.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import InsightsVulnerabilityListPage from './InsightsVulnerabilityListPage';
+
+jest.mock('@scalprum/react-core', () => ({
+  ScalprumComponent: jest.fn(props => (
+    <div data-testid="mock-scalprum-component">{JSON.stringify(props)}</div>
+  )),
+  ScalprumProvider: jest.fn(({ children }) => <div>{children}</div>),
+}));
+
+describe('InsightsVulnerabilityListPage component', () => {
+  it('renders the container with correct class', () => {
+    const { container } = render(<InsightsVulnerabilityListPage />);
+    expect(
+      container.querySelector('.rh-cloud-insights-vulnerability-page')
+    ).toBeTruthy();
+  });
+});

webpack/common/ScalprumModule/ScalprumContext.js

@@ -0,0 +1,63 @@
+export const modulesConfig = {
+  vulnerability: {
+    name: 'vulnerability',
+    manifestLocation: `${window.location.origin}/assets/apps/vulnerability/fed-mods.json`,
+    cdnPath: `${window.location.origin}/assets/apps/vulnerability/`,
+  },
+};
+
+export const mockUser = {
+  entitlements: {},
+  identity: {
+    account_number: 'string',
+    org_id: 'FOREMAN',
+    internal: {
+      org_id: 'string',
+      account_id: 'string',
+    },
+    type: 'string',
+    user: {
+      username: 'string',
+      email: 'string',
+      first_name: 'string',
+      last_name: 'string',
+      is_active: 'boolean',
+      is_internal: 'boolean',
+      is_org_admin: 'boolean',
+      locale: 'string',
+    },
+  },
+};
+
+export const providerOptions = {
+  pluginSDKOptions: {
+    pluginLoaderOptions: {
+      transformPluginManifest: manifest => {
+        if (
+          manifest.baseURL === 'auto' &&
+          modulesConfig[manifest.name]?.cdnPath
+        ) {
+          const _cdnPath = modulesConfig[manifest.name]?.cdnPath;
+          return {
+            ...manifest,
+            baseURL: _cdnPath,
+            loadScripts: manifest.loadScripts.map(
+              script => `${_cdnPath}${script}`
+            ),
+          };
+        }
+        return manifest;
+      },
+    },
+  },
+  api: {
+    chrome: {
+      isBeta: () => false,
+      on: () => {},
+      auth: {
+        getUser: () => Promise.resolve(mockUser),
+      },
+    },
+  },
+  config: modulesConfig,
+};