katello 4.4.1 → 4.5.0

data/webpack/scenes/ContentViews/Details/Filters/__tests__/CVRpmFilterContent.test.js

@@ -4,7 +4,7 @@ import { Route } from 'react-router-dom';
 
 import ContentViewFilterDetails from '../ContentViewFilterDetails';
 import { cvFilterDetailsKey } from '../../../ContentViewsConstants';
-import nock, {
+import {
   nockInstance,
   assertNockRequest,
   mockAutocomplete,
@@ -22,6 +22,8 @@ const cvFilterEditDeletePath = api.getApiUrl('/content_view_filters/2/rules/2');
 const cvPackageFilterRulesPath = api.getApiUrl('/content_view_filters/2/rules');
 const cvPackageFilterRuleCreatePath = api.getApiUrl('/content_view_filters/2/rules');
 const autocompleteUrl = '/content_view_filters/2/rules/auto_complete_search';
+const autocompleteNameUrl = '/packages/auto_complete_name';
+const autocompleteArchUrl = '/packages/auto_complete_arch';
 const renderOptions = {
   apiNamespace: cvFilterDetailsKey(1, 2),
   routerParams: {
@@ -32,21 +34,10 @@ const renderOptions = {
 
 const withCVRoute = component => <Route path="/content_views/:id([0-9]+)#/filters/:filterId([0-9]+)">{component}</Route>;
 
-let searchDelayScope;
-let autoSearchScope;
-beforeEach(() => {
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
-});
-
-afterEach(() => {
-  assertNockRequest(searchDelayScope);
-  assertNockRequest(autoSearchScope);
-  nock.cleanAll();
-});
-
 test('Can show filter details and package groups on page load', async (done) => {
   const { name: cvFilterName } = cvFilterDetails;
+  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   const cvFilterScope = nockInstance
     .get(cvFilterDetailsPath)
     .query(true)
@@ -74,6 +65,8 @@ test('Can show filter details and package groups on page load', async (done) =>
   });
 
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
   assertNockRequest(cvFilterScope);
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvPackageFilterRulesScope, done);
@@ -88,6 +81,8 @@ test('Can search for package rules in package filter details', async (done) => {
   const { name: lastPackageRuleName } = lastPackageRule;
   const searchQueryMatcher = actualParams =>
     actualParams?.search?.includes(lastPackageRuleName);
+  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 
   const cvFilterScope = nockInstance
     .get(cvFilterDetailsPath)
@@ -127,6 +122,8 @@ test('Can search for package rules in package filter details', async (done) => {
   });
 
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
   assertNockRequest(cvFilterScope);
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvPackageFilterRulesScope);
@@ -136,6 +133,12 @@ test('Can search for package rules in package filter details', async (done) => {
 
 test('Can add package rules to filter in a self-closing modal', async (done) => {
   const { name: cvFilterName } = cvFilterDetails;
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const autocompleteNameScope = mockAutocomplete(nockInstance, autocompleteNameUrl);
+  const autocompleteArchScope = mockAutocomplete(nockInstance, autocompleteArchUrl);
+  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0, 3);
+  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', undefined, 3);
+
   const cvFiltersScope = nockInstance
     .get(cvFiltersPath)
     .query(true)
@@ -154,6 +157,7 @@ test('Can add package rules to filter in a self-closing modal', async (done) =>
     architecture: 'noarch',
     name: 'elephant',
   };
+
   const createdFilterDetails = {
     architecture: 'noarch',
     content_view_filter_id: 1,
@@ -167,9 +171,9 @@ test('Can add package rules to filter in a self-closing modal', async (done) =>
     .post(cvPackageFilterRuleCreatePath, newFilterRuleDetails)
     .reply(201, createdFilterDetails);
 
-  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-
-  const { getByText, queryByText, getByLabelText } =
+  const {
+    getByText, queryByText, getByLabelText, getAllByLabelText,
+  } =
     renderWithRedux(withCVRoute(<ContentViewFilterDetails
       cvId={1}
       details={details}
@@ -183,19 +187,22 @@ test('Can add package rules to filter in a self-closing modal', async (done) =>
   });
   getByLabelText('add_rpm_rule').click();
   await patientlyWaitFor(() => {
-    expect(getByLabelText('input_name')).toBeInTheDocument();
-    expect(getByLabelText('input_architecture')).toBeInTheDocument();
+    expect(getAllByLabelText('text input for search')[1]).toBeInTheDocument();
+    expect(getAllByLabelText('text input for search')[2]).toBeInTheDocument();
     expect(getByLabelText('add_package_filter_rule')).toBeInTheDocument();
   });
-
-  fireEvent.change(getByLabelText('input_name'), { target: { value: 'elephant' } });
-  fireEvent.change(getByLabelText('input_architecture'), { target: { value: 'noarch' } });
+  fireEvent.change(getAllByLabelText('text input for search')[1], { target: { value: 'elephant' } });
+  fireEvent.change(getAllByLabelText('text input for search')[2], { target: { value: 'noarch' } });
   fireEvent.submit(getByLabelText('add_package_filter_rule'));
 
   await patientlyWaitFor(() => {
     expect(queryByText('Add rule')).not.toBeInTheDocument();
   });
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(autocompleteNameScope);
+  assertNockRequest(autocompleteArchScope);
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvFilterDetailsScope);
   assertNockRequest(cvPackageFilterRulesScope);
@@ -206,6 +213,9 @@ test('Can add package rules to filter in a self-closing modal', async (done) =>
 test('Remove rpm filter rule in a self-closing modal', async (done) => {
   const { name: cvFilterName } = cvFilterDetails;
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
+
   const cvFiltersScope = nockInstance
     .get(cvFiltersPath)
     .query(true)
@@ -247,6 +257,8 @@ test('Remove rpm filter rule in a self-closing modal', async (done) => {
   getByText('Remove').click();
 
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvFilterDetailsScope);
   assertNockRequest(cvPackageFilterRulesScope);
@@ -256,13 +268,19 @@ test('Remove rpm filter rule in a self-closing modal', async (done) => {
 
 test('Edit rpm filter rule in a self-closing modal', async (done) => {
   const { name: cvFilterName } = cvFilterDetails;
-  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, true, undefined, 2);
+  const autocompleteNameScope = mockAutocomplete(nockInstance, autocompleteNameUrl);
+  const autocompleteArchScope = mockAutocomplete(nockInstance, autocompleteArchUrl);
+  const searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0, 3);
+  const autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', undefined, 3);
   const cvFiltersScope = nockInstance
     .get(cvFiltersPath)
+    .times(2)
     .query(true)
     .reply(200, cvFilterFixtures);
   const cvFilterDetailsScope = nockInstance
     .get(cvFilterDetailsPath)
+    .times(2)
     .query(true)
     .reply(200, cvFilterDetails);
   const cvPackageFilterRulesScope = nockInstance
@@ -309,8 +327,13 @@ test('Edit rpm filter rule in a self-closing modal', async (done) => {
   });
 
   assertNockRequest(autocompleteScope);
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(autocompleteNameScope);
+  assertNockRequest(autocompleteArchScope);
   assertNockRequest(cvFiltersScope);
   assertNockRequest(cvFilterDetailsScope);
   assertNockRequest(cvPackageFilterRulesScope);
   assertNockRequest(editScope, done);
+  act(done);
 });

data/webpack/scenes/ContentViews/Details/Histories/ContentViewHistories.js

@@ -49,9 +49,9 @@ const ContentViewHistories = ({ cvId }) => {
     const taskType = task ? task.label : taskTypes[action];
 
     if (taskType === taskTypes.removal) {
-      return <>{__('Deleted from ')} <Label isTruncated key="1" color="blue" href={`/lifecycle_environments/${environment?.id}`}>{`${environment?.name ?? __('all environments')}`}</Label>{}</>;
+      return <>{__('Deleted from ')} <Label isTruncated key="1" color="blue" href={`/lifecycle_environments/${environment?.id}`}>{`${environment?.name ?? __('all environments')}`}</Label></>;
     } else if (action === 'promotion' || taskType === taskTypes.promotion) {
-      return <>{__('Promoted to ')}<Label isTruncated key="2" color="blue" href={`/lifecycle_environments/${environment?.id}`}>{`${environment?.name}`}</Label>{}</>;
+      return <>{__('Promoted to ')}<Label isTruncated key="2" color="blue" href={`/lifecycle_environments/${environment?.id}`}>{`${environment?.name}`}</Label></>;
     } else if (taskType === taskTypes.publish) {
       return __('Published new version');
     } else if (taskType === taskTypes.export) {
@@ -81,6 +81,7 @@ const ContentViewHistories = ({ cvId }) => {
         error,
         status,
       }}
+      ouiaId="content-view-history-table"
       variant={TableVariant.compact}
       autocompleteEndpoint={`/content_views/${cvId}/history/auto_complete_search`}
       fetchItems={useCallback(params => getContentViewHistories(cvId, params), [cvId])}

data/webpack/scenes/ContentViews/Details/Promote/ContentViewVersionPromote.js

@@ -21,6 +21,7 @@ import {
 } from './ContentViewVersionPromoteSelectors';
 import ComponentEnvironments from '../ComponentContentViews/ComponentEnvironments';
 import Loading from '../../../../components/Loading';
+import getContentViews from '../../ContentViewsActions';
 
 const ContentViewVersionPromote = ({
   cvId, versionIdToPromote, versionNameToPromote,
@@ -52,7 +53,7 @@ const ContentViewVersionPromote = ({
       versionEnvironments,
       environment_ids: userCheckedItems.map(item => item.id),
       force: true,
-    }));
+    }, () => dispatch(getContentViews())));
   };
 
   useDeepCompareEffect(() => {
@@ -66,6 +67,7 @@ const ContentViewVersionPromote = ({
     }
     if (promoteError) {
       setLoading(false);
+      setIsOpen(false);
     }
   }, [promoteResponse, promoteResolved, promoteError, detailsPage,
     setRedirect, setLoading, setIsOpen, dispatch, cvId]);
@@ -157,6 +159,7 @@ const ContentViewVersionPromote = ({
           />
           <ActionGroup style={{ margin: 0 }}>
             <Button
+              ouiaId="cv-version-promote-submit"
               aria-label="promote_content_view"
               variant="primary"
               isDisabled={submitDisabled}
@@ -164,7 +167,7 @@ const ContentViewVersionPromote = ({
             >
               {__('Promote')}
             </Button>
-            <Button variant="link" onClick={() => setIsOpen(false)}>
+            <Button ouiaId="cv-version-promote-cancel" variant="link" onClick={() => setIsOpen(false)}>
               {__('Cancel')}
             </Button>
           </ActionGroup>

data/webpack/scenes/ContentViews/Details/Repositories/ContentViewRepositories.js

@@ -1,41 +1,69 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { STATUS } from 'foremanReact/constants';
+import {
+  lowerCase,
+  upperFirst,
+} from 'lodash';
+import PropTypes from 'prop-types';
+import {
+  shallowEqual,
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { lowerCase, upperFirst } from 'lodash';
-import { useSelector, shallowEqual, useDispatch } from 'react-redux';
+
 import {
-  Bullseye,
-  Split,
-  SplitItem,
-  Button,
   ActionList,
   ActionListItem,
+  Bullseye,
+  Button,
   Dropdown,
   DropdownItem,
   KebabToggle,
+  Split,
+  SplitItem,
+  Checkbox,
 } from '@patternfly/react-core';
-import { TableVariant, fitContent } from '@patternfly/react-table';
-import { STATUS } from 'foremanReact/constants';
-import { translate as __ } from 'foremanReact/common/I18n';
-import { urlBuilder } from 'foremanReact/common/urlHelpers';
-import PropTypes from 'prop-types';
-
+import {
+  TableVariant,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+} from '@patternfly/react-table';
+import AddedStatusLabel from '../../../../components/AddedStatusLabel';
+import SelectableDropdown from '../../../../components/SelectableDropdown';
 import TableWrapper from '../../../../components/Table/TableWrapper';
-import onSelect from '../../../../components/Table/helpers';
-import { getContentViewRepositories, getRepositoryTypes, updateContentView } from '../ContentViewDetailActions';
+import {
+  ADDED,
+  ALL_STATUSES,
+  NOT_ADDED,
+} from '../../ContentViewsConstants';
+import { hasPermission } from '../../helpers';
+import {
+  getContentViewRepositories,
+  getRepositoryTypes,
+  updateContentView,
+} from '../ContentViewDetailActions';
 import {
   selectCVRepos,
-  selectCVReposStatus,
   selectCVReposError,
+  selectCVReposStatus,
   selectRepoTypes,
   selectRepoTypesStatus,
 } from '../ContentViewDetailSelectors';
-import { ADDED, NOT_ADDED, ALL_STATUSES } from '../../ContentViewsConstants';
 import ContentCounts from './ContentCounts';
 import LastSync from './LastSync';
 import RepoIcon from './RepoIcon';
-import AddedStatusLabel from '../../../../components/AddedStatusLabel';
-import SelectableDropdown from '../../../../components/SelectableDropdown';
-import { hasPermission } from '../../helpers';
+import { useSelectionSet } from '../../../../components/Table/TableHooks';
 
 const allRepositories = 'All repositories';
 
@@ -54,74 +82,46 @@ const ContentViewRepositories = ({ cvId, details }) => {
   const error = useSelector(state => selectCVReposError(state, cvId), shallowEqual);
   const repoTypesResponse = useSelector(state => selectRepoTypes(state), shallowEqual);
   const repoTypesStatus = useSelector(state => selectRepoTypesStatus(state), shallowEqual);
-  const { permissions } = details;
-
-  const [rows, setRows] = useState([]);
-  const deselectAll = () => setRows(rows.map(row => ({ ...row, selected: false })));
+  const { permissions, generated_for: generatedFor, import_only: importOnly } = details;
+  const generatedContentView = generatedFor !== 'none';
   const [searchQuery, updateSearchQuery] = useState('');
   const [typeSelected, setTypeSelected] = useState(allRepositories);
   const [statusSelected, setStatusSelected] = useState(ALL_STATUSES);
   // repoTypes object format: [displayed_value]: API_value
   const [repoTypes, setRepoTypes] = useState({});
   const [bulkActionOpen, setBulkActionOpen] = useState(false);
-  const hasAddedSelected = rows.some(({ selected, added }) => selected && added);
-  const hasNotAddedSelected = rows.some(({ selected, added }) => selected && !added);
+  const { repository_ids: repositoryIds = [] } = details;
+
+  const {
+    isSelected,
+    selectOne,
+    selectNone,
+    selectedCount,
+    selectedResults,
+    selectionSet,
+    isSelectable,
+    ...selectAll
+  } = useSelectionSet({
+    results,
+    metadata,
+  });
+
+  const hasAddedSelected = selectedResults.some(({ id }) => repositoryIds.includes(id));
+  const hasNotAddedSelected = selectedResults.some(({ id }) => !repositoryIds.includes(id));
 
   const columnHeaders = [
-    { title: __('Type'), transforms: [fitContent] },
+    __('Type'),
     __('Name'),
     __('Product'),
     __('Sync state'),
     __('Content'),
-    { title: __('Status') },
+    __('Status'),
   ];
-  const loading = status === STATUS.PENDING;
-
-  const buildRows = useCallback(() => {
-    const newRows = [];
-    results.forEach((repo) => {
-      const {
-        id,
-        content_type: contentType,
-        name,
-        added_to_content_view: addedToCV,
-        product: { id: productId, name: productName },
-        content_counts: counts,
-        last_sync_words: lastSyncWords,
-        last_sync: lastSync,
-      } = repo;
-
-      const cells = [
-        { title: <Bullseye><RepoIcon type={contentType} /></Bullseye> },
-        { title: <a href={urlBuilder(`products/${productId}/repositories`, '', id)}>{name}</a> },
-        productName,
-        { title: <LastSync {...{ startedAt: lastSync?.started_at, lastSyncWords, lastSync }} /> },
-        { title: <ContentCounts {...{ counts, productId }} repoId={id} /> },
-        {
-          title: <AddedStatusLabel added={addedToCV || statusSelected === ADDED} />,
-        },
-      ];
-      newRows.push({
-        repoId: id,
-        cells,
-        added: addedToCV || statusSelected === ADDED,
-      });
-    });
-    return newRows;
-  }, [statusSelected, results]);
-
-  useDeepCompareEffect(() => {
-    if (!loading && results) {
-      const newRows = buildRows(results);
-      setRows(newRows);
-    }
-  }, [response, loading, buildRows, results]);
 
   useEffect(() => {
     dispatch(getRepositoryTypes());
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-
   // Get repo type filter selections dynamically from the API
   useDeepCompareEffect(() => {
     if (repoTypesStatus === STATUS.RESOLVED && repoTypesResponse) {
@@ -137,12 +137,12 @@ const ContentViewRepositories = ({ cvId, details }) => {
     }
   }, [repoTypesResponse, repoTypesStatus]);
 
+
   const toggleBulkAction = () => {
     setBulkActionOpen(!bulkActionOpen);
   };
 
   const onAdd = (repos) => {
-    const { repository_ids: repositoryIds = [] } = details;
     dispatch(updateContentView(
       cvId,
       { repository_ids: repositoryIds.concat(repos) },
@@ -159,7 +159,6 @@ const ContentViewRepositories = ({ cvId, details }) => {
 
   const onRemove = (repos) => {
     const reposToDelete = [].concat(repos);
-    const { repository_ids: repositoryIds = [] } = details;
     const deletedRepos = repositoryIds.filter(x => !reposToDelete.includes(x));
     dispatch(updateContentView(
       cvId, { repository_ids: deletedRepos },
@@ -176,49 +175,42 @@ const ContentViewRepositories = ({ cvId, details }) => {
 
   const addBulk = () => {
     setBulkActionOpen(false);
-    const reposToAdd = rows.filter(({ selected, added }) =>
-      selected && !added).map(({ repoId }) => repoId);
-    deselectAll();
+    const reposToAdd = selectedResults.filter(selectedRepo =>
+      !repositoryIds.includes(selectedRepo.id)).map(({ id }) => id);
+    selectNone();
     onAdd(reposToAdd);
   };
 
   const removeBulk = () => {
     setBulkActionOpen(false);
-    const reposToDelete = rows.filter(({ selected, added }) =>
-      selected && added).map(({ repoId }) => repoId);
-    deselectAll();
+    const reposToDelete = selectedResults.filter(selectedRepo =>
+      repositoryIds.includes(selectedRepo.id)).map(({ id }) => id);
+    selectNone();
     onRemove(reposToDelete);
   };
 
-  const actionResolver = ({
-    parent,
-    compoundParent,
-    noactions,
-    added,
-  }) => {
-    if (parent || compoundParent || noactions) return null;
-    return [
-      {
-        title: 'Add',
-        isDisabled: added,
-        onClick: (_event, _rowId, rowInfo) => {
-          onAdd(rowInfo.repoId);
-        },
+  const rowDropdownItems = ({ id }) => [
+    {
+      title: 'Add',
+      ouiaId: `add-repository-${id}`,
+      isDisabled: importOnly || generatedContentView || repositoryIds.includes(id),
+      onClick: () => {
+        onAdd(id);
       },
-      {
-        title: 'Remove',
-        isDisabled: !added,
-        onClick: (_event, _rowId, rowInfo) => {
-          onRemove(rowInfo.repoId);
-        },
+    },
+    {
+      title: 'Remove',
+      ouiaId: `remove-repository-${id}`,
+      isDisabled: importOnly || generatedContentView || !repositoryIds.includes(id),
+      onClick: () => {
+        onRemove(id);
       },
-    ];
-  };
+    },
+  ];
 
   const getCVReposWithOptions = useCallback((params = {}) => {
     const allParams = { ...params };
     if (typeSelected !== 'All repositories') allParams.content_type = repoTypes[typeSelected];
-
     return getContentViewRepositories(cvId, allParams, statusSelected);
   }, [cvId, repoTypes, statusSelected, typeSelected]);
 
@@ -230,7 +222,7 @@ const ContentViewRepositories = ({ cvId, details }) => {
   const defaultFilters = [allRepositories, ALL_STATUSES];
 
   const dropdownItems = [
-    <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={removeBulk}>
+    <DropdownItem ouiaId="bulk-remove-repositories" aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={removeBulk}>
       {__('Remove')}
     </DropdownItem>,
   ];
@@ -238,7 +230,6 @@ const ContentViewRepositories = ({ cvId, details }) => {
   return (
     <TableWrapper
       {...{
-        rows,
         metadata,
         emptyContentTitle,
         emptyContentBody,
@@ -250,14 +241,16 @@ const ContentViewRepositories = ({ cvId, details }) => {
         status,
         activeFilters,
         defaultFilters,
+        selectedCount,
+        selectNone,
       }}
-      actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
-      onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
-      cells={columnHeaders}
+      ouiaId="content-view-repositories-table"
+      {...selectAll}
       variant={TableVariant.compact}
       autocompleteEndpoint="/repositories/auto_complete_search"
       fetchItems={useCallback(params => getCVReposWithOptions(params), [getCVReposWithOptions])}
       additionalListeners={[typeSelected, statusSelected]}
+      displaySelectAllCheckbox={hasPermission(permissions, 'edit_content_views')}
       actionButtons={
         <Split hasGutter>
           <SplitItem>
@@ -284,12 +277,13 @@ const ContentViewRepositories = ({ cvId, details }) => {
             <SplitItem>
               <ActionList>
                 <ActionListItem>
-                  <Button onClick={addBulk} isDisabled={!hasNotAddedSelected} variant="primary" aria-label="add_repositories">
+                  <Button ouiaId="add-repositories" onClick={addBulk} isDisabled={!hasNotAddedSelected || importOnly || generatedContentView} variant="primary" aria-label="add_repositories">
                     {__('Add repositories')}
                   </Button>
                 </ActionListItem>
                 <ActionListItem>
                   <Dropdown
+                    ouiaId="repositoies-bulk-actions"
                     toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
                     isOpen={bulkActionOpen}
                     isPlain
@@ -301,7 +295,64 @@ const ContentViewRepositories = ({ cvId, details }) => {
           }
         </Split>
       }
-    />
+    >
+      <Thead>
+        <Tr key="version-header">
+          {hasPermission(permissions, 'edit_content_views') && <Th key="select-all" />}
+          {columnHeaders.map((title, index) => {
+            if (index === 0) {
+              return <Th modifier="fitContent" key={`col-header-${title}`}>{title}</Th>;
+            }
+            return <Th key={`col-header-${title}`}>{title}</Th>;
+          })}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {results?.map((repo) => {
+          const {
+            id,
+            content_type: contentType,
+            name,
+            added_to_content_view: addedToCV,
+            product: { id: productId, name: productName },
+            content_counts: counts,
+            last_sync_words: lastSyncWords,
+            last_sync: lastSync,
+          } = repo;
+          return (
+            <Tr key={id} ouiaId={`repositories-table-row-${productName}-${name}`}>
+              {hasPermission(permissions, 'edit_content_views') &&
+                <Td>
+                  <Checkbox
+                    id={id}
+                    isChecked={isSelected(id)}
+                    onChange={selected =>
+                      selectOne(selected, id, repo)
+                    }
+                  />
+                </Td>
+              }
+              <Td><Bullseye><RepoIcon type={contentType} /></Bullseye></Td>
+              <Td>
+                <a href={urlBuilder(`products/${productId}/repositories`, '', id)}>{name}</a>
+              </Td>
+              <Td>{productName}</Td>
+              <Td>
+                <LastSync {...{ startedAt: lastSync?.started_at, lastSyncWords, lastSync }} />
+              </Td>
+              <Td><ContentCounts {...{ counts, productId }} repoId={id} /></Td>
+              <Td><AddedStatusLabel added={addedToCV || statusSelected === ADDED} /></Td>
+              {hasPermission(permissions, 'edit_content_views') &&
+              <Td
+                actions={{
+                  items: rowDropdownItems(repo),
+                }}
+              />}
+            </Tr>
+          );
+        })}
+      </Tbody>
+    </TableWrapper>
   );
 };
 
@@ -310,6 +361,8 @@ ContentViewRepositories.propTypes = {
   details: PropTypes.shape({
     repository_ids: PropTypes.arrayOf(PropTypes.number),
     permissions: PropTypes.shape({}),
+    import_only: PropTypes.bool,
+    generated_for: PropTypes.string,
   }).isRequired,
 };