katello 4.5.1 → 4.8.0.rc2

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersions.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { TableVariant, TableText, Tbody, Thead, Td, Tr, Th } from '@patternfly/react-table';
-import { Checkbox, Dropdown, DropdownItem, Grid, KebabToggle } from '@patternfly/react-core';
+import { Checkbox, Dropdown, DropdownItem, Grid, KebabToggle, GridItem, Button } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import { STATUS } from 'foremanReact/constants';
@@ -14,11 +14,12 @@ import InactiveText from '../../components/InactiveText';
 import ContentViewVersionEnvironments from './ContentViewVersionEnvironments';
 import ContentViewVersionErrata from './ContentViewVersionErrata';
 import ContentViewVersionContent from './ContentViewVersionContent';
-import { getContentViewVersions } from '../ContentViewDetailActions';
+import getContentViewDetails, { getContentViewVersions } from '../ContentViewDetailActions';
 import {
   selectCVVersions,
   selectCVVersionsStatus,
   selectCVVersionsError,
+  selectCVDetails,
 } from '../ContentViewDetailSelectors';
 import getEnvironmentPaths from '../../components/EnvironmentPaths/EnvironmentPathActions';
 import ContentViewVersionPromote from '../Promote/ContentViewVersionPromote';
@@ -27,12 +28,13 @@ import RemoveCVVersionWizard from './Delete/RemoveCVVersionWizard';
 import { hasPermission } from '../../helpers';
 import BulkDeleteModal from './BulkDelete/BulkDeleteModal';
 import { selectEnvironmentPathsStatus } from '../../components/EnvironmentPaths/EnvironmentPathSelectors';
-
+import PublishContentViewWizard from '../../Publish/PublishContentViewWizard';
+import CVVersionCompare from './Compare/CVVersionCompare';
 
 const ContentViewVersions = ({ cvId, details }) => {
   const response = useSelector(state => selectCVVersions(state, cvId));
   const { results, ...metadata } = response;
-
+  const { versions: cvDetails } = useSelector(state => selectCVDetails(state, cvId));
   const firstIdWithActiveHistory =
     results?.find(({ active_history: activeHistory }) =>
       activeHistory?.length)?.id;
@@ -49,6 +51,7 @@ const ContentViewVersions = ({ cvId, details }) => {
   const [versionNameToRemove, setVersionNameToRemove] = useState('');
   const [versionEnvironments, setVersionEnvironments] = useState([]);
   const [bulkDeleteModalOpen, setBulkDeleteModalOpen] = useState(false);
+  const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
   const [promoting, setPromoting] = useState(false);
   const [removingFromEnv, setRemovingFromEnv] = useState(false);
   const [deleteVersion, setDeleteVersion] = useState(false);
@@ -56,8 +59,11 @@ const ContentViewVersions = ({ cvId, details }) => {
   const { permissions } = details;
   const [kebabOpen, setKebabOpen] = useState(false);
   const hasActionPermissions = hasPermission(permissions, 'promote_or_remove_content_views');
+  const hasPublishCvPermissions = hasPermission(permissions, 'publish_content_views');
   const renderActionButtons =
     hasActionPermissions && status === STATUS.RESOLVED && !!results?.length;
+  const renderPublishCvModal =
+    hasPublishCvPermissions && status === STATUS.RESOLVED && isPublishModalOpen;
   const {
     selectOne, isSelected, isSelectable: _isSelectable,
     selectedCount, selectionSet, ...selectionSetVars
@@ -66,6 +72,23 @@ const ContentViewVersions = ({ cvId, details }) => {
     metadata,
   });
 
+  const showPrimaryAction = true;
+  const primaryActionButton =
+    (
+      <Button
+        ouiaId="cv-details-publish-button"
+        onClick={() => setIsPublishModalOpen(true)}
+        variant="primary"
+        aria-label="publish_content_view"
+      > {__('Publish new version')}
+      </Button>);
+
+  const versionOneId = String([...selectionSet].sort()[0]);
+  const versionTwoId = String([...selectionSet].sort()[1]);
+  const fetchItems = useCallback((params) => {
+    selectionSet.clear();
+    return getContentViewVersions(cvId, params);
+  }, [cvId, selectionSet]);
   const columnHeaders = [
     '',
     __('Version'),
@@ -76,6 +99,10 @@ const ContentViewVersions = ({ cvId, details }) => {
     __('Description'),
   ];
 
+  const versionOneLabel = String(cvDetails?.find(version =>
+    Number(version.id) === Number(versionOneId))?.version);
+  const versionTwoLabel = String(cvDetails?.find(version =>
+    Number(version.id) === Number(versionTwoId))?.version);
   useEffect(
     () => {
       if (envStatus !== STATUS.RESOLVED) { dispatch(getEnvironmentPaths()); }
@@ -114,11 +141,11 @@ const ContentViewVersions = ({ cvId, details }) => {
 
     return [
       <Checkbox
+        ouiaId={`select-version-${versionId}`}
         id={versionId}
+        aria-label={`Select version ${versionId}`}
         isChecked={isSelected(versionId)}
-        onChange={selected =>
-          selectOne(selected, versionId)
-        }
+        onChange={selected => selectOne(selected, versionId)}
       />,
       <Link to={`/versions/${versionId}`}>{__('Version ')}{version}</Link>,
       <ContentViewVersionEnvironments {...{ environments }} />,
@@ -187,10 +214,27 @@ const ContentViewVersions = ({ cvId, details }) => {
     ];
 
   const emptyContentTitle = __("You currently don't have any versions for this content view.");
-  const emptyContentBody = __('Versions will appear here when the content view is published.'); // needs link
+  const emptyContentBody = __('Versions will appear here when the content view is published.');
   const emptySearchTitle = __('No matching version found');
   const emptySearchBody = __('Try changing your search settings.');
-
+  const selectedVersionIds = {
+    versionOneId,
+    versionTwoId,
+  };
+  const [hasTwoVersions, setHasTwoVersions] = useState(false);
+  if (hasTwoVersions) {
+    const versionLabels = {
+      versionOneLabel,
+      versionTwoLabel,
+    };
+    return (
+      <CVVersionCompare
+        versionIds={selectedVersionIds}
+        cvId={cvId}
+        versionLabels={versionLabels}
+      />
+    );
+  }
   return (
     <TableWrapper
       {...{
@@ -204,40 +248,68 @@ const ContentViewVersions = ({ cvId, details }) => {
         error,
         status,
         selectedCount,
+        showPrimaryAction,
+        primaryActionButton,
       }}
       ouiaId="content-view-versions-table"
       variant={TableVariant.compact}
-      autocompleteEndpoint={`/content_view_versions/auto_complete_search?content_view_id=${cvId}`}
-      fetchItems={useCallback((params) => {
-        selectionSet.clear();
-        return getContentViewVersions(cvId, params);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [cvId])}
+      autocompleteEndpoint="/katello/api/v2/content_view_versions"
+      autocompleteQueryParams={{ content_view_id: cvId }}
+      bookmarkController="katello_content_view_versions"
+      fetchItems={fetchItems}
       {...hasActionPermissions ? selectionSetVars : []}
       actionButtons={
-        renderActionButtons && (
-          <Grid>
-            <Dropdown
-              toggle={<KebabToggle aria-label="bulk_actions" onToggle={setKebabOpen} />}
-              isOpen={kebabOpen}
-              isPlain
-              dropdownItems={[
-                <DropdownItem
-                  aria-label="bulk_delete"
-                  key="bulk_delete"
-                  isDisabled={selectedCount < 1}
-                  component="button"
-                  onClick={() => {
-                    setKebabOpen(false);
-                    setBulkDeleteModalOpen(true);
-                  }}
+        <>
+          {renderPublishCvModal &&
+            <PublishContentViewWizard
+              details={details}
+              show={isPublishModalOpen}
+              onClose={(step3) => {
+                if (step3) dispatch(getContentViewDetails(cvId));
+                setIsPublishModalOpen(false);
+              }}
+              aria-label="publish_content_view_modal"
+            />}
+          {renderActionButtons && (
+            <Grid>
+              <GridItem md={8} sm={12}>
+                <Button
+                  ouiaId="compare"
+                  variant="primary"
+                  onClick={() => setHasTwoVersions(true)}
+                  isDisabled={selectedCount !== 2}
+                  aria-label="compare_two_versions"
                 >
-                  {__('Delete')}
-                </DropdownItem>]}
-            />
-          </Grid>
-        )}
-      displaySelectAllCheckbox={hasActionPermissions}
+                  {__('Compare')}
+                </Button>
+              </GridItem>
+              <GridItem md={4} sm={12}>
+                <Dropdown
+                  toggle={<KebabToggle aria-label="bulk_actions" onToggle={setKebabOpen} />}
+                  isOpen={kebabOpen}
+                  ouiaId="cv-versions-bulk-actions"
+                  isPlain
+                  dropdownItems={[
+                    <DropdownItem
+                      aria-label="bulk_delete"
+                      ouiaId="bulk_delete"
+                      key="bulk_delete"
+                      isDisabled={selectedCount < 1}
+                      component="button"
+                      onClick={() => {
+                        setKebabOpen(false);
+                        setBulkDeleteModalOpen(true);
+                      }}
+                    >
+                      {__('Delete')}
+                    </DropdownItem>]}
+                />
+              </GridItem>
+            </Grid>
+          )}
+        </>
+      }
+      displaySelectAllCheckbox={renderActionButtons}
     >
       <Thead>
         {bulkDeleteModalOpen &&
@@ -273,7 +345,7 @@ const ContentViewVersions = ({ cvId, details }) => {
             aria-label="remove_content_view_version_modal"
           />
         }
-        <Tr key="version-header">
+        <Tr key="version-header" ouiaId="version-header">
           {columnHeaders.map((title, index) => {
             if (index === 0 && !hasActionPermissions) return undefined;
             return <Th key={`col-header-${title}`}>{title}</Th>;
@@ -285,7 +357,7 @@ const ContentViewVersions = ({ cvId, details }) => {
           const hasHistory = !!cvVersion?.active_history?.length;
           const cells = buildCells(cvVersion);
           return (
-            <Tr key={`column-${cvVersion.id}`}>
+            <Tr key={`row-${cvVersion.id}`} ouiaId={`row-${cvVersion.id}`}>
               {cells.map((cell, index) => {
                 if (index === 0 && !hasActionPermissions) return undefined;
                 return (

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVEnvironmentSelectionForm.js

@@ -76,9 +76,9 @@ const CVEnvironmentSelectionForm = () => {
             />
           </Alert>)}
       {(versionEnvironments.length !== 0) &&
-        <TableComposable variant={TableVariant.compact}>
+        <TableComposable ouiaId="version-delete-env-table" variant={TableVariant.compact}>
           <Thead>
-            <Tr>
+            <Tr ouiaId="version-delete-env-table-header">
               <Td
                 select={{
                   rowIndex: 0,
@@ -97,7 +97,7 @@ const CVEnvironmentSelectionForm = () => {
               host_count: hostCount,
             }, rowIndex) =>
               (
-                <Tr key={`${name}_${id}`}>
+                <Tr ouiaId={`${name}_${id}`} key={`${name}_${id}`}>
                   <Td
                     key={`${name}__${id}_select`}
                     select={{

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVReassignActivationKeysForm.js

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { ExpandableSection, Select, SelectOption } from '@patternfly/react-core';
+import { ExpandableSection, SelectOption } from '@patternfly/react-core';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
 import EnvironmentPaths from '../../../../components/EnvironmentPaths/EnvironmentPaths';
@@ -9,6 +9,7 @@ import getContentViews from '../../../../ContentViewsActions';
 import { selectContentViewError, selectContentViews, selectContentViewStatus } from '../../../../ContentViewSelectors';
 import AffectedActivationKeys from '../affectedActivationKeys';
 import DeleteContext from '../DeleteContext';
+import ContentViewSelect from '../../../../components/ContentViewSelect/ContentViewSelect';
 
 const CVReassignActivationKeysForm = () => {
   const dispatch = useDispatch();
@@ -75,6 +76,11 @@ const CVReassignActivationKeysForm = () => {
     return results.filter(cv => cv.id === id)[0]?.name;
   };
 
+  const onClear = () => {
+    setSelectedCVForAK(null);
+    setSelectedCVNameForAK(null);
+  };
+
   const onSelect = (event, selection) => {
     setSelectedCVForAK(selection);
     setSelectedCVNameForAK(fetchSelectedCVName(selection));
@@ -91,22 +97,17 @@ const CVReassignActivationKeysForm = () => {
         multiSelect={false}
       />
       {!cvInEnvLoading && selectedEnvForAK.length > 0 &&
-        <div style={{ marginTop: '1em' }}>
-          <h3>{__('Select content view')}</h3>
-          <Select
-            selections={selectedCVForAK}
-            onSelect={onSelect}
-            isOpen={cvSelectOpen}
-            isDisabled={cvSelectOptions.length === 0}
-            onToggle={isExpanded => setCVSelectOpen(isExpanded)}
-            id="selectCV"
-            name="selectCV"
-            aria-label="selectCV"
-            placeholderText={(cvSelectOptions.length === 0) ? __('No content views available') : __('Select a content view')}
-          >
-            {cvSelectOptions}
-          </Select>
-        </div>
+        <ContentViewSelect
+          selections={selectedCVForAK}
+          onSelect={onSelect}
+          onClear={onClear}
+          isOpen={cvSelectOpen}
+          isDisabled={cvSelectOptions.length === 0}
+          onToggle={isExpanded => setCVSelectOpen(isExpanded)}
+          placeholderText={(cvSelectOptions.length === 0) ? __('No content views available') : __('Select a content view')}
+        >
+          {cvSelectOptions}
+        </ContentViewSelect>
       }
       <ExpandableSection
         toggleText={showActivationKeys ?

data/webpack/scenes/ContentViews/Details/Versions/Delete/RemoveSteps/CVReassignHostsForm.js

@@ -1,7 +1,7 @@
 import React, { useState, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { ExpandableSection, Select, SelectOption } from '@patternfly/react-core';
+import { ExpandableSection, SelectOption } from '@patternfly/react-core';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
 import EnvironmentPaths from '../../../../components/EnvironmentPaths/EnvironmentPaths';
@@ -9,6 +9,7 @@ import getContentViews from '../../../../ContentViewsActions';
 import { selectContentViewError, selectContentViews, selectContentViewStatus } from '../../../../ContentViewSelectors';
 import AffectedHosts from '../affectedHosts';
 import DeleteContext from '../DeleteContext';
+import ContentViewSelect from '../../../../components/ContentViewSelect/ContentViewSelect';
 
 const CVReassignHostsForm = () => {
   const dispatch = useDispatch();
@@ -74,6 +75,11 @@ const CVReassignHostsForm = () => {
     return results.filter(cv => cv.id === id)[0]?.name;
   };
 
+  const onClear = () => {
+    setSelectedCVForHosts(null);
+    setSelectedCVNameForHosts(null);
+  };
+
   const onSelect = (event, selection) => {
     setSelectedCVForHosts(selection);
     setSelectedCVNameForHosts(fetchSelectedCVName(selection));
@@ -90,22 +96,21 @@ const CVReassignHostsForm = () => {
         multiSelect={false}
       />
       {selectedEnvForHost.length > 0 &&
-      <div style={{ marginTop: '1em' }}>
-        <h3>{__('Select content view')}</h3>
-        <Select
+        <ContentViewSelect
+          onClear={onClear}
           selections={selectedCVForHosts}
           onSelect={onSelect}
           isOpen={cvSelectOpen}
           isDisabled={cvSelectOptions.length === 0}
           onToggle={isExpanded => setCVSelectOpen(isExpanded)}
           id="selectCV"
+          ouiaId="selectCV"
           name="selectCV"
           aria-label="selectCV"
           placeholderText={(cvSelectOptions.length === 0) ? __('No content views available') : __('Select a content view')}
         >
           {cvSelectOptions}
-        </Select>
-      </div>
+        </ContentViewSelect>
       }
       <ExpandableSection
         toggleText={showHosts ? 'Hide hosts' : 'Show hosts'}

data/webpack/scenes/ContentViews/Details/Versions/Delete/__tests__/cvVersionRemove.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
-import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockForemanAutocomplete, mockSetting } from '../../../../../../test-utils/nockWrapper';
+import { nockInstance, assertNockRequest, mockAutocomplete, mockForemanAutocomplete } from '../../../../../../test-utils/nockWrapper';
 import api, { foremanApi } from '../../../../../../services/api';
 import CONTENT_VIEWS_KEY from '../../../../ContentViewsConstants';
 import ContentViewVersions from '../../ContentViewVersions';
@@ -27,15 +27,11 @@ const cVDropDownOptionsPath = api.getApiUrl('/content_views?organization_id=1&in
 // const taskPollingUrl = '/foreman_tasks/api/tasks/6b900ff8-62bb-42ac-8c45-da86b7258520';
 
 let firstVersion;
-let searchDelayScope;
-let autoSearchScope;
 let envScope;
 
 beforeEach(() => {
   const { results } = cvVersionsData;
   [firstVersion] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   envScope = nockInstance
     .get(environmentPathsPath)
     .query(true)
@@ -43,10 +39,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
-  nock.cleanAll();
   assertNockRequest(envScope);
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
 });
 
 test('Can call API and show versions on page load', async (done) => {
@@ -129,8 +122,6 @@ test('Can open Remove wizard and remove version from environment with hosts', as
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const hostAutocompleteUrl = '/hosts/auto_complete_search';
   const hostAutocompleteScope = mockForemanAutocomplete(nockInstance, hostAutocompleteUrl);
-  const hostSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  const hostAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const scope = nockInstance
     .get(cvVersions)
@@ -161,7 +152,7 @@ test('Can open Remove wizard and remove version from environment with hosts', as
 
 
   const {
-    getByText, getAllByText, getByLabelText, getAllByLabelText, queryByText,
+    getByText, getAllByText, getByLabelText, getAllByLabelText, queryByText, getByPlaceholderText,
   } = renderWithRedux(
     <ContentViewVersions cvId={2} details={cvDetailData} />,
     renderOptions,
@@ -191,9 +182,9 @@ test('Can open Remove wizard and remove version from environment with hosts', as
   fireEvent.click(getByLabelText('test1'));
   await patientlyWaitFor(() => {
     expect(getByText('Select content view')).toBeInTheDocument();
-    expect(getByText('Select a content view')).toBeInTheDocument();
+    expect(getByPlaceholderText('Select a content view')).toBeInTheDocument();
   });
-  fireEvent.click(getByText('Select a content view'));
+  fireEvent.click(getByPlaceholderText('Select a content view'));
   await patientlyWaitFor(() => {
     expect(getByText('cv2')).toBeInTheDocument();
   });
@@ -207,8 +198,6 @@ test('Can open Remove wizard and remove version from environment with hosts', as
   assertNockRequest(scope);
   assertNockRequest(autocompleteScope);
   assertNockRequest(hostAutocompleteScope);
-  assertNockRequest(hostSearchDelayScope);
-  assertNockRequest(hostAutoSearchScope);
   assertNockRequest(hostScope);
   assertNockRequest(cVDropDownOptionsScope);
   assertNockRequest(envPathRemovalScope);
@@ -219,8 +208,6 @@ test('Can open Remove wizard and remove version from environment with activation
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
   const akAutocompleteUrl = '/activation_keys/auto_complete_search';
   const akAutocompleteScope = mockAutocomplete(nockInstance, akAutocompleteUrl);
-  const akSearchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  const akAutoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const scope = nockInstance
     .get(cvVersions)
@@ -251,7 +238,7 @@ test('Can open Remove wizard and remove version from environment with activation
 
 
   const {
-    getByText, getAllByText, getByLabelText, getAllByLabelText, queryByText,
+    getByText, getAllByText, getByLabelText, getAllByLabelText, queryByText, getByPlaceholderText,
   } = renderWithRedux(
     <ContentViewVersions cvId={2} details={cvDetailData} />,
     renderOptions,
@@ -281,9 +268,9 @@ test('Can open Remove wizard and remove version from environment with activation
   fireEvent.click(getByLabelText('test1'));
   await patientlyWaitFor(() => {
     expect(getByText('Select content view')).toBeInTheDocument();
-    expect(getByText('Select a content view')).toBeInTheDocument();
+    expect(getByPlaceholderText('Select a content view')).toBeInTheDocument();
   });
-  fireEvent.click(getByText('Select a content view'));
+  fireEvent.click(getByPlaceholderText('Select a content view'));
   await patientlyWaitFor(() => {
     expect(getByText('cv2')).toBeInTheDocument();
   });
@@ -298,8 +285,6 @@ test('Can open Remove wizard and remove version from environment with activation
   assertNockRequest(scope);
   assertNockRequest(autocompleteScope);
   assertNockRequest(akAutocompleteScope);
-  assertNockRequest(akSearchDelayScope);
-  assertNockRequest(akAutoSearchScope);
   assertNockRequest(activationKeysScope);
   assertNockRequest(cVDropDownOptionsScope);
   assertNockRequest(envPathRemovalScope);

data/webpack/scenes/ContentViews/Details/Versions/Delete/affectedActivationKeys.js

@@ -55,18 +55,18 @@ const AffectedActivationKeys = ({
         status,
       }}
       ouiaId="content-view-delete-modal-affected-activation-keys"
-      autocompleteEndpoint="/activation_keys/auto_complete_search"
+      autocompleteEndpoint="/katello/api/v2/activation_keys"
       variant={TableVariant.compact}
     >
       <Thead>
-        <Tr>
+        <Tr ouiaId="affected-activation-keys-header">
           {columnHeaders.map(col =>
             <Th key={col}>{col}</Th>)}
         </Tr>
       </Thead>
       <Tbody>
         {results?.map(({ name, id, environment }) => (
-          <Tr key={`${id}`}>
+          <Tr ouiaId={`${id}`} key={`${id}`}>
             <Td>
               <a rel="noreferrer" target="_blank" href={urlBuilder(`activation_keys/${id}`, '')}>{name}</a>
             </Td>

data/webpack/scenes/ContentViews/Details/Versions/Delete/affectedHosts.js

@@ -50,12 +50,11 @@ const AffectedHosts = ({
         status,
       }}
       ouiaId="content-view-delete-modal-affected-hosts-table"
-      autocompleteEndpoint="/hosts/auto_complete_search"
-      foremanApiAutoComplete
+      autocompleteEndpoint="/api/v2/hosts"
       variant={TableVariant.compact}
     >
       <Thead>
-        <Tr>
+        <Tr ouiaId="affected-hosts-table-headers">
           {columnHeaders.map(col =>
             <Th key={col}>{col}</Th>)}
         </Tr>
@@ -66,7 +65,7 @@ const AffectedHosts = ({
           id,
           content_facet_attributes: { lifecycle_environment: environment },
         }) => (
-          <Tr key={`${id}`}>
+          <Tr ouiaId={`${id}`} key={`${id}`}>
             <Td>
               <a rel="noreferrer" target="_blank" href={urlBuilder(`hosts/${id}`, '')}>{name}</a>
             </Td>