foreman_rh_cloud 12.1.3 → 12.1.5

data/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;

data/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();
-  });
 });

data/webpack/CVEsHostDetailsTab/index.js

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

data/webpack/ForemanColumnExtensions/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { CVECountCell } from '../InsightsVulnerabilityHostIndexExtensions/CVECountCell';
+
+const RecommendationsCell = hostDetails => {
+  const insightsAttributes = propsToCamelCase(
+    // eslint-disable-next-line camelcase
+    hostDetails?.insights_attributes ?? {}
+  );
+  // Local insights advisor
+  if (insightsAttributes.useLocalAdvisorEngine) {
+    // TODO: Replace this placeholder with the actual local advisor integration
+    return <span>Local advisor placeholder</span>;
+  }
+
+  // Hosted insights advisor
+  const { insightsHitsCount: hitsCount } = insightsAttributes;
+  if (hitsCount === undefined || hitsCount === null) return '—';
+  const hostname = hostDetails?.name;
+  const encodedHostname = encodeURIComponent(hostname);
+  const hitsUrl = `/foreman_rh_cloud/insights_cloud?search=hostname+%3D+${encodedHostname}`;
+  return <a href={hitsUrl}>{hitsCount}</a>;
+};
+
+const insightsCategoryName = __('Insights');
+
+const hostsIndexColumnExtensions = [
+  {
+    columnName: 'insights_recommendations_count',
+    title: __('Recommendations'),
+    wrapper: RecommendationsCell,
+    weight: 1500,
+    isSorted: true,
+    tableName: 'hosts',
+    categoryName: insightsCategoryName,
+    categoryKey: 'insights',
+  },
+  {
+    columnName: 'cves_count',
+    title: __('Total CVEs'),
+    wrapper: hostDetails => <CVECountCell hostDetails={hostDetails} />,
+    weight: 2600,
+    tableName: 'hosts',
+    categoryName: insightsCategoryName,
+    categoryKey: 'insights',
+    isSorted: false,
+  },
+];
+
+export default hostsIndexColumnExtensions;

data/webpack/ForemanInventoryUpload/Components/InventoryFilter/InventoryFilter.js

@@ -26,6 +26,7 @@ const InventoryFilter = ({
       <FormGroup>
         <TextInput
           id="inventory_filter_input"
+          ouiaId="inventory_filter_input"
           value={filterTerm}
           type="text"
           placeholder={__('Filter..')}

data/webpack/ForemanInventoryUpload/Components/InventoryFilter/__tests__/__snapshots__/InventoryFilter.test.js.snap

@@ -8,6 +8,7 @@ exports[`InventoryFilter rendering render with props 1`] = `
     <TextInput
       id="inventory_filter_input"
       onChange={[Function]}
+      ouiaId="inventory_filter_input"
       placeholder="Filter.."
       type="text"
       value="test_filter_term"

data/webpack/ForemanInventoryUpload/Components/InventorySettings/MinimalInventoryDropdown.js

@@ -68,6 +68,7 @@ const MinimalInventoryDropdown = ({ setChosenValue }) => {
   };
   return (
     <Dropdown
+      ouiaId="inventory-dropdown"
       isOpen={isOpen}
       onSelect={onSelect}
       onOpenChange={val => setIsOpen(val)}
@@ -90,6 +91,7 @@ const MinimalInventoryDropdown = ({ setChosenValue }) => {
               value={value}
               key={value}
               description={item.description}
+              ouiaId={`inventory-dropdownItem-${value}`}
             >
               {item.title}
             </DropdownItem>

data/webpack/ForemanInventoryUpload/Components/PageHeader/PageTitle.js

@@ -26,6 +26,7 @@ const PageTitle = () => {
   const dropdownItems = [
     <DropdownItem
       key="tasks-history-button"
+      ouiaId="tasks-history-button"
       href={getActionsHistoryUrl()}
       target="_blank"
       rel="noopener noreferrer"
@@ -34,13 +35,18 @@ const PageTitle = () => {
     </DropdownItem>,
     <DropdownItem
       key="inventory-documentation-button"
+      ouiaId="inventory-documentation-button"
       href={getInventoryDocsUrl()}
       target="_blank"
       rel="noopener noreferrer"
     >
       {DOCS_BUTTON_TEXT}
     </DropdownItem>,
-    <DropdownItem key="cloud-ping" onClick={togglePingModal}>
+    <DropdownItem
+      key="cloud-ping"
+      ouiaId="dropdownItem-cloud-ping"
+      onClick={togglePingModal}
+    >
       {CLOUD_PING_TITLE}
     </DropdownItem>,
   ];
@@ -55,6 +61,7 @@ const PageTitle = () => {
       <GridItem span={6}>
         <Dropdown
           className="title-dropdown"
+          ouiaId="title-dropdown"
           onSelect={() => setIsDropdownOpen(false)}
           toggle={
             <KebabToggle

data/webpack/ForemanInventoryUpload/Components/PageHeader/__tests__/__snapshots__/PageTitle.test.js.snap

@@ -25,6 +25,7 @@ exports[`PageTitle rendering render without Props 1`] = `
         Array [
           <DropdownItem
             href="/foreman_tasks/tasks?search=label+%3D+ForemanInventoryUpload%3A%3AAsync%3A%3AGenerateReportJob+or+label+%3D+ForemanInventoryUpload%3A%3AAsync%3A%3AGenerateAllReportsJob&page=1"
+            ouiaId="tasks-history-button"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -32,6 +33,7 @@ exports[`PageTitle rendering render without Props 1`] = `
           </DropdownItem>,
           <DropdownItem
             href="/links/manual/?root_url=https%3A%2F%2Faccess.redhat.com%2Fdocumentation%2Fen-us%2Fred_hat_insights%2F2023%2Fhtml%2Fred_hat_insights_remediations_guide%2Fhost-communication-with-insights_red-hat-insights-remediation-guide%23uploading-satellite-host-inventory-to-insights_configuring-satellite-cloud-connector"
+            ouiaId="inventory-documentation-button"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -39,6 +41,7 @@ exports[`PageTitle rendering render without Props 1`] = `
           </DropdownItem>,
           <DropdownItem
             onClick={[Function]}
+            ouiaId="dropdownItem-cloud-ping"
           >
             Connectivity test
           </DropdownItem>,
@@ -47,6 +50,7 @@ exports[`PageTitle rendering render without Props 1`] = `
       isOpen={false}
       isPlain={true}
       onSelect={[Function]}
+      ouiaId="title-dropdown"
       position="right"
       toggle={
         <KebabToggle

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudConnectorButton/CloudConnectorButton.js

@@ -26,7 +26,7 @@ export const CloudConnectorButton = ({ status, onClick, jobLink }) => {
           className="cloud-connector-pending-button"
           onMouseEnter={() => setIsPopoverVisible(true)}
         >
-          <Button variant="secondary" isDisabled>
+          <Button variant="secondary" ouiaId="button-in-progress" isDisabled>
             <Spinner size="sm" /> {__('Cloud Connector is in progress')}
           </Button>
         </div>
@@ -36,14 +36,14 @@ export const CloudConnectorButton = ({ status, onClick, jobLink }) => {
 
   if (status === CONNECTOR_STATUS.RESOLVED) {
     return (
-      <Button variant="secondary" onClick={onClick}>
+      <Button variant="secondary" ouiaId="button-reconfigure" onClick={onClick}>
         {__('Reconfigure cloud connector')}
       </Button>
     );
   }
 
   return (
-    <Button variant="secondary" onClick={onClick}>
+    <Button variant="secondary" ouiaId="button-configure" onClick={onClick}>
       {__('Configure cloud connector')}
     </Button>
   );

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudConnectorButton/__tests__/__snapshots__/CloudConnectorButton.test.js.snap

@@ -3,6 +3,7 @@
 exports[`CloudConnectorButton render no cloud connector 1`] = `
 <Button
   onClick={[MockFunction]}
+  ouiaId="button-configure"
   variant="secondary"
 >
   Configure cloud connector
@@ -34,6 +35,7 @@ exports[`CloudConnectorButton render pending connector 1`] = `
   >
     <Button
       isDisabled={true}
+      ouiaId="button-in-progress"
       variant="secondary"
     >
       <Spinner
@@ -49,6 +51,7 @@ exports[`CloudConnectorButton render pending connector 1`] = `
 exports[`CloudConnectorButton render resolved cloud connector 1`] = `
 <Button
   onClick={[MockFunction]}
+  ouiaId="button-reconfigure"
   variant="secondary"
 >
   Reconfigure cloud connector

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/CloudPingModal/index.js

@@ -79,26 +79,32 @@ const CloudPingModal = ({ title, isOpen, toggle }) => {
     <>
       <Modal
         id="cloud-ping-modal"
+        ouiaId="cloud-ping-modal"
         appendTo={document.getElementsByClassName('react-container')[0]}
         variant={ModalVariant.large}
         title={title}
         isOpen={isOpen}
         onClose={toggle}
       >
-        <Card className="certs-status">
+        <Card className="certs-status" ouiaId="card-org-status">
           <CardTitle>{__('Organization status')}</CardTitle>
           <CardBody>
-            <Text>
+            <Text ouiaId="text-description">
               {__('Displays manifest statuses per accessible organizations.')}
             </Text>
             {isPending ? (
               <Spinner size="xl" />
             ) : (
               <>
-                <Text className="pull-right">
+                <Text className="pull-right" ouiaId="text-org-count">
                   {sprintf(__('%s organizations'), rows.length)}
                 </Text>
-                <Table aria-label="Simple Table" cells={['']} rows={rows}>
+                <Table
+                  aria-label="Simple Table"
+                  ouiaId="simple-table"
+                  cells={['']}
+                  rows={rows}
+                >
                   <TableHeader />
                   <TableBody />
                 </Table>{' '}

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/PageDescription/PageDescription.js

@@ -13,18 +13,18 @@ export const PageDescription = () => {
 
   return (
     <div id="inventory_page_description">
-      <Text>
+      <Text ouiaId="text-cloud-console">
         {__(
           'The Red Hat Hybrid Cloud Console provides a set of cloud services, including Red Hat Insights and Subscriptions, that provide predictive analysis, remediation of issues, and unified subscription reporting for this Foreman instance.'
         )}
       </Text>
-      <Text>
+      <Text ouiaId="text-inventory-upload">
         {__(
           'The Foreman inventory upload plugin automatically uploads Foreman host inventory data to the Inventory service of Insights, where it can also be used by the Subscriptions service for subscription reporting. If you use the Subscriptions service, enabling inventory uploads is required.'
         )}
       </Text>
       {subscriptionConnectionEnabled && (
-        <Text>
+        <Text ouiaId="text-enable-report">
           <FormattedMessage
             id="enable-upload-hint"
             defaultMessage={__(
@@ -39,7 +39,7 @@ export const PageDescription = () => {
         </Text>
       )}
       {subscriptionConnectionEnabled && (
-        <Text>
+        <Text ouiaId="text-restart-button">
           <FormattedMessage
             id="restart-button-hint"
             defaultMessage={__(
@@ -53,7 +53,7 @@ export const PageDescription = () => {
           />
         </Text>
       )}
-      <Text>
+      <Text ouiaId="text-more-info-subscription">
         {__('For more information about the Subscriptions service, see:')}
         &nbsp;
         <a
@@ -64,7 +64,7 @@ export const PageDescription = () => {
           {__('About subscription watch')}
         </a>
       </Text>
-      <Text>
+      <Text ouiaId="text-more-info-insights">
         {__('For more information about Insights and Cloud Connector, see:')}
         &nbsp;
         <a

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SettingsWarning/SettingsWarning.js

@@ -22,6 +22,7 @@ export const SettingsWarning = ({
     alerts.push(
       <Alert
         key="auto-upload"
+        ouiaId="auto-upload"
         variant="warning"
         title={__(
           "Cloud Connector has been configured however the inventory auto-upload is disabled, it's recommended to enable it"
@@ -36,6 +37,7 @@ export const SettingsWarning = ({
     alerts.push(
       <Alert
         key="obfuscating-host"
+        ouiaId="obfuscating-host"
         variant="warning"
         title={__(
           "Cloud Connector has been configured however obfuscating host names setting is enabled, it's recommended to disable it"

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SettingsWarning/__snapshots__/SettingsWarning.test.js.snap

@@ -11,6 +11,7 @@ exports[`SettingsWarning with 2 alerts 1`] = `
       />
     }
     key="auto-upload"
+    ouiaId="auto-upload"
     title="Cloud Connector has been configured however the inventory auto-upload is disabled, it's recommended to enable it"
     variant="warning"
   />
@@ -21,6 +22,7 @@ exports[`SettingsWarning with 2 alerts 1`] = `
       />
     }
     key="obfuscating-host"
+    ouiaId="obfuscating-host"
     title="Cloud Connector has been configured however obfuscating host names setting is enabled, it's recommended to disable it"
     variant="warning"
   />

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/SyncButton.js

@@ -21,6 +21,7 @@ class SyncButton extends React.Component {
       <React.Fragment>
         <Button
           className="sync_button"
+          ouiaId="sync-button"
           onClick={handleClick}
           isDisabled={status === STATUS.PENDING}
           variant="secondary"

data/webpack/ForemanInventoryUpload/Components/PageHeader/components/SyncButton/__tests__/__snapshots__/SyncButton.test.js.snap

@@ -6,6 +6,7 @@ exports[`SyncButton rendering render with Props 1`] = `
     className="sync_button"
     isDisabled={false}
     onClick={[Function]}
+    ouiaId="sync-button"
     variant="secondary"
   >
      Sync all inventory status

data/webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/InventoryAutoUpload.js

@@ -48,6 +48,7 @@ const InventoryAutoUploadSwitcher = ({
               position="right"
             >
               <Button
+                ouiaId="button-advanced-settings"
                 variant="secondary"
                 style={{ fontSize: 'small', marginTop: '-4px' }}
               >
@@ -59,9 +60,10 @@ const InventoryAutoUploadSwitcher = ({
         <br />
         <Grid.Row>
           <Grid.Col sm={12}>
-            <Text component={TextVariants.p}>
+            <Text component={TextVariants.p} ouiaId="text-more-details">
               <InfoAltIcon /> {__('More details can be found in')}{' '}
               <Text
+                ouiaId="text-details-link"
                 component={TextVariants.a}
                 href={foremanUrl('/foreman_rh_cloud/inventory_upload')}
                 target="_blank"

data/webpack/ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload/__tests__/__snapshots__/InventoryAutoUpload.test.js.snap

@@ -41,6 +41,7 @@ exports[`InventoryAutoUpload rendering render with props 1`] = `
           position="right"
         >
           <Button
+            ouiaId="button-advanced-settings"
             style={
               Object {
                 "fontSize": "small",
@@ -68,6 +69,7 @@ exports[`InventoryAutoUpload rendering render with props 1`] = `
       >
         <Text
           component="p"
+          ouiaId="text-more-details"
         >
           <InfoAltIcon />
            
@@ -76,6 +78,7 @@ exports[`InventoryAutoUpload rendering render with props 1`] = `
           <Text
             component="a"
             href="/foreman_rh_cloud/inventory_upload"
+            ouiaId="text-details-link"
             rel="noopener noreferrer"
             target="_blank"
           >

data/webpack/ForemanRhCloudFills.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { addGlobalFill } from 'foremanReact/components/common/Fill/GlobalFill';
+import { translate as __ } from 'foremanReact/common/I18n';
 import InventoryAutoUploadSwitcher from './ForemanInventoryUpload/SubscriptionsPageExtension/InventoryAutoUpload';
 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 = [
   {
@@ -20,6 +21,7 @@ const fills = [
     weight: 400,
     metadata: {
       hideTab: isNotRhelHost,
+      title: __('Insights'),
     },
   },
   {
@@ -30,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'),
     },
   },
 ];

data/webpack/ForemanRhCloudPages.js

@@ -2,7 +2,7 @@ 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';
 
@@ -10,7 +10,10 @@ 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} />,
   },
 ];
 

data/webpack/InsightsCloudSync/Components/InsightsTable/InsightsTable.js

@@ -75,6 +75,7 @@ const InsightsTable = ({
       />
       <Table
         className="rh-cloud-recommendations-table"
+        ouiaId="rh-cloud-recommendations-table"
         aria-label="Recommendations Table"
         onSelect={(_event, isSelected, rowId) =>
           onTableSelect(isSelected, rowId, rows, selectedIds)

data/webpack/InsightsCloudSync/Components/InsightsTable/SelectAllAlert.js

@@ -18,6 +18,7 @@ const SelectAllAlert = ({
       <Alert
         isInline
         variant="info"
+        ouiaId="alert-recommendations-selected"
         title={sprintf(__('Recommendations selected: %s.'), selectedCount)}
         actionLinks={
           <AlertActionLink onClick={selectAll}>
@@ -32,6 +33,7 @@ const SelectAllAlert = ({
     <Alert
       isInline
       variant="info"
+      ouiaId="alert-all-selected"
       title={__('All recommendations are now selected.')}
       actionLinks={
         <AlertActionLink onClick={clearAllSelection}>

data/webpack/InsightsCloudSync/Components/InsightsTable/__tests__/__snapshots__/InsightsTable.test.js.snap

@@ -83,6 +83,7 @@ exports[`InsightsTable rendering render with Props 1`] = `
     isTreeTable={false}
     onSelect={[Function]}
     onSort={[Function]}
+    ouiaId="rh-cloud-recommendations-table"
     ouiaSafe={true}
     role="grid"
     rowLabeledBy="simple-node"

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModal.js

@@ -46,6 +46,7 @@ const RemediationModal = ({
   return (
     <React.Fragment>
       <Button
+        ouiaId="button-remediate"
         variant="primary"
         isDisabled={isEmpty(selectedIds)}
         onClick={() => {
@@ -56,6 +57,7 @@ const RemediationModal = ({
       </Button>{' '}
       <Modal
         id="remediation-modal"
+        ouiaId="remediation-modal"
         appendTo={document.body}
         variant={ModalVariant.large}
         title={__('Remediation summary')}
@@ -71,6 +73,7 @@ const RemediationModal = ({
       >
         <Table
           className="remediations-table"
+          ouiaId="remediations-table"
           aria-label="remediations Table"
           cells={columns}
           rows={rows}

data/webpack/InsightsCloudSync/Components/RemediationModal/RemediationModalFooter.js

@@ -9,10 +9,20 @@ const ModalFooter = ({ toggleModal, resolutions, hostsIds }) => {
   token = token?.content || '';
   return (
     <form action={JOB_INVOCATION_PATH} method="post">
-      <Button type="submit" key="confirm" variant="primary">
+      <Button
+        type="submit"
+        ouiaId="button-confirm"
+        key="confirm"
+        variant="primary"
+      >
         {__('Remediate')}
       </Button>
-      <Button key="cancel" variant="link" onClick={toggleModal}>
+      <Button
+        key="cancel"
+        ouiaId="button-cancel"
+        variant="link"
+        onClick={toggleModal}
+      >
         {__('Cancel')}
       </Button>
       <input type="hidden" name="feature" value="rh_cloud_remediate_hosts" />

data/webpack/InsightsCloudSync/Components/RemediationModal/Resolutions.js

@@ -18,6 +18,7 @@ const Resolutions = ({
       {resolutions.map(({ id: resolution_id, description }) => (
         <Radio
           key={resolution_id}
+          ouiaId={`resolution-radio-${resolution_id}`}
           className="resolution-radio"
           id={resolution_id}
           isChecked={resolution_id === checkedID}