katello 4.6.2.1 → 4.7.0.rc1

data/webpack/scenes/ContentViews/Details/Filters/CVErrataDateFilterContent.js

@@ -109,7 +109,12 @@ const CVErrataDateFilterContent = ({
   const invalidDateFormat = __('Enter a valid date: MM/DD/YYYY');
 
   return (
-    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs
+      className="margin-0-24"
+      ouiaId="errata-date-filter-tabs"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
         <div className="margin-24">
           <Form onSubmit={(e) => {
@@ -125,6 +130,7 @@ const CVErrataDateFilterContent = ({
                   onSelect={(_event, selection) => onTypeSelect(selection)}
                   selections={selectedTypes}
                   isOpen={typeSelectOpen}
+                  ouiaId="errata-type-selector"
                   placeholderText={__('Errata type')}
                   isCheckboxSelectionBadgeHidden
                 >
@@ -180,6 +186,7 @@ const CVErrataDateFilterContent = ({
                   isOpen={dateTypeSelectOpen}
                   onToggle={setDateTypeSelectOpen}
                   id="date_type_selector"
+                  ouiaId="date_type_selector"
                   name="date_type_selector"
                   aria-label="date_type_selector"
                   isDisabled={!hasPermission(permissions, 'edit_content_views')}
@@ -207,7 +214,7 @@ const CVErrataDateFilterContent = ({
               </FlexItem>
               <FlexItem spacer={{ default: 'spacerNone' }}>
                 <Bullseye style={{ padding: '0 5px' }}>
-                  <Text>{__('to')}</Text>
+                  <Text ouiaId="to-text">{__('to')}</Text>
                 </Bullseye>
               </FlexItem>
               <FlexItem span={2}>
@@ -230,9 +237,10 @@ const CVErrataDateFilterContent = ({
             </Flex>
             <Flex>
               <FlexItem>
-                <ChipGroup categoryName={__('Type')}>
+                <ChipGroup ouiaId="chipgroup-type" categoryName={__('Type')}>
                   {selectedTypes.map(type => (
                     <Chip
+                      ouiaId={type}
                       key={type}
                       onClick={() => onTypeSelect(type)}
                       isReadOnly={singleSelection(type) || !hasPermission(permissions, 'edit_content_views')}
@@ -243,12 +251,20 @@ const CVErrataDateFilterContent = ({
                 </ChipGroup>
               </FlexItem>
               <FlexItem>
-                <ChipGroup categoryName={dateType === 'issued' ? __('Issued from') : __('Updated from')}>
-                  <Chip key="startDate" onClick={() => setStartDate('')} isReadOnly={!startDate || !hasPermission(permissions, 'edit_content_views')}>
+                <ChipGroup
+                  ouiaId="chip-issued"
+                  categoryName={dateType === 'issued' ? __('Issued from') : __('Updated from')}
+                >
+                  <Chip
+                    ouiaId="startDate"
+                    key="startDate"
+                    onClick={() => setStartDate('')}
+                    isReadOnly={!startDate || !hasPermission(permissions, 'edit_content_views')}
+                  >
                     {startDate || __('ANY')}
                   </Chip>
                   {__('to')}
-                  <Chip key="endDate" onClick={() => setEndDate('')} isReadOnly={!endDate || !hasPermission(permissions, 'edit_content_views')}>
+                  <Chip ouiaId="startDate" key="endDate" onClick={() => setEndDate('')} isReadOnly={!endDate || !hasPermission(permissions, 'edit_content_views')}>
                     {endDate || __('ANY')}
                   </Chip>
                 </ChipGroup>

data/webpack/scenes/ContentViews/Details/Filters/CVErrataIDFilterContent.js

@@ -247,7 +247,12 @@ const CVErrataIDFilterContent = ({
   const invalidDateFormat = __('Enter a valid date: MM/DD/YYYY');
 
   return (
-    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs
+      className="margin-0-24"
+      ouiaId="errata-filter-tabs"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{__('Errata')}</TabTitleText>}>
         <div className="margin-24-0">
           <TableWrapper
@@ -286,11 +291,13 @@ const CVErrataIDFilterContent = ({
                     setSelected={setStatusSelected}
                     placeholderText={__('Status')}
                     aria-label="status_selector"
+                    ouiaId="status-selector"
                   />
                 </SplitItem>
                 <SplitItem>
                   <Select
                     aria-label="errata_type_selector"
+                    ouiaId="errata_type_selector"
                     variant={SelectVariant.checkbox}
                     onToggle={setTypeSelectOpen}
                     onSelect={(_event, selection) => onTypeSelect(selection)}
@@ -328,9 +335,10 @@ const CVErrataIDFilterContent = ({
                     <Dropdown
                       toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
                       isOpen={bulkActionOpen}
+                      ouiaId="cv-errata-id-bulk-action-dropdown"
                       isPlain
                       dropdownItems={[
-                        <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
+                        <DropdownItem ouiaId="bulk-remove" aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
                           {__('Remove')}
                         </DropdownItem>]
                       }
@@ -353,6 +361,7 @@ const CVErrataIDFilterContent = ({
                       onToggle={setDateTypeSelectOpen}
                       id="date_type_selector"
                       name="date_type_selector"
+                      ouiaId="date_type_selector"
                       aria-label="date_type_selector"
                     >
                       <SelectOption key="issued" value="issued">{__('Issued from')}</SelectOption>
@@ -377,7 +386,7 @@ const CVErrataIDFilterContent = ({
                   </FlexItem>
                   <FlexItem spacer={{ default: 'spacerNone' }}>
                     <Bullseye style={{ padding: '0 5px' }}>
-                      <Text>{__('to')}</Text>
+                      <Text ouiaId="to-text">{__('to')}</Text>
                     </Bullseye>
                   </FlexItem>
                   <FlexItem span={2}>
@@ -399,27 +408,28 @@ const CVErrataIDFilterContent = ({
                 </Flex>
                 <Flex>
                   <FlexItem>
-                    <ChipGroup categoryName={__('Status')}>
-                      <Chip key="status" onClick={() => setStatusSelected(ALL_STATUSES)} isReadOnly={statusSelected === ALL_STATUSES}>
+                    <ChipGroup ouiaId="status-chipgroup" categoryName={__('Status')}>
+                      <Chip ouiaId="status" key="status" onClick={() => setStatusSelected(ALL_STATUSES)} isReadOnly={statusSelected === ALL_STATUSES}>
                         {statusSelected}
                       </Chip>
                     </ChipGroup>
                   </FlexItem>
                   <FlexItem>
-                    <ChipGroup categoryName={dateType === 'issued' ? __('Issued from') : __('Updated from')}>
-                      <Chip key="startDate" onClick={() => setValidStartDate('')} isReadOnly={startDate === ''}>
+                    <ChipGroup ouiaId="issued-chipgroup" categoryName={dateType === 'issued' ? __('Issued from') : __('Updated from')}>
+                      <Chip ouiaId="startDate" key="startDate" onClick={() => setValidStartDate('')} isReadOnly={startDate === ''}>
                         {startDate || __('ANY')}
                       </Chip>
                       {__('to')}
-                      <Chip key="endDate" onClick={() => setValidEndDate('')} isReadOnly={endDate === ''}>
+                      <Chip ouiaId="endDate" key="endDate" onClick={() => setValidEndDate('')} isReadOnly={endDate === ''}>
                         {endDate || __('ANY')}
                       </Chip>
                     </ChipGroup>
                   </FlexItem>
                   <FlexItem>
-                    <ChipGroup categoryName={__('Type')}>
+                    <ChipGroup ouiaId="type-chipgroup" categoryName={__('Type')}>
                       {selectedTypes.map(type => (
                         <Chip
+                          ouiaId={`chip-${type}`}
                           key={type}
                           onClick={() => onTypeSelect(type)}
                           isReadOnly={singleSelection(type)}

data/webpack/scenes/ContentViews/Details/Filters/CVModuleStreamFilterContent.js

@@ -202,7 +202,12 @@ const CVModuleStreamFilterContent = ({
 
 
   return (
-    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs
+      className="margin-0-24"
+      ouiaId="module-stream-filter-content-tabs"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{__('Module Streams')}</TabTitleText>}>
         <div className="margin-24-0">
           <TableWrapper
@@ -235,6 +240,7 @@ const CVModuleStreamFilterContent = ({
                   <Select
                     variant={SelectVariant.single}
                     onToggle={setSelectOpen}
+                    ouiaId="added-notAdded-selector"
                     onSelect={(_event, selection) => {
                       setSelectedIndex(allAddedNotAdded.indexOf(selection));
                       setSelectOpen(false);
@@ -262,9 +268,10 @@ const CVModuleStreamFilterContent = ({
                   <Dropdown
                     toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
                     isOpen={bulkActionOpen}
+                    ouiaId="bulk-actions-dropdown"
                     isPlain
                     dropdownItems={[
-                      <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
+                      <DropdownItem ouiaId="bulk-remove" aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
                         {__('Remove')}
                       </DropdownItem>]
                     }

data/webpack/scenes/ContentViews/Details/Filters/CVPackageGroupFilterContent.js

@@ -191,7 +191,12 @@ const CVPackageGroupFilterContent = ({
   const resetFilters = () => setSelectedIndex(0);
 
   return (
-    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs
+      ouiaId="cv-package-group-filter-content"
+      className="margin-0-24"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{__('Package groups')}</TabTitleText>}>
         <div className="margin-24-0">
           <TableWrapper
@@ -224,6 +229,7 @@ const CVPackageGroupFilterContent = ({
                   <Select
                     variant={SelectVariant.single}
                     onToggle={setSelectOpen}
+                    ouiaId="allAddedNotAdded"
                     onSelect={(_event, selection) => {
                       setSelectedIndex(allAddedNotAdded.indexOf(selection));
                       setSelectOpen(false);
@@ -251,9 +257,10 @@ const CVPackageGroupFilterContent = ({
                   <Dropdown
                     toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
                     isOpen={bulkActionOpen}
+                    ouiaId="cv-package-group-filter-bulk-actions-dropdown"
                     isPlain
                     dropdownItems={[
-                      <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
+                      <DropdownItem ouiaId="bulk_remove" aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
                         {__('Remove')}
                       </DropdownItem>]
                     }

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

@@ -157,7 +157,12 @@ const CVRpmFilterContent = ({
       </Button>);
 
   return (
-    <Tabs className="margin-0-24" activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+    <Tabs
+      className="margin-0-24"
+      ouiaId="cv-rpm-filter-content-tabs"
+      activeKey={activeTabKey}
+      onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}
+    >
       <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
         <div className="margin-24-0">
           <TableWrapper
@@ -205,11 +210,12 @@ const CVRpmFilterContent = ({
                     </SplitItem>
                     <SplitItem>
                       <Dropdown
+                        ouiaId="rpm-filter-content-bulk-actions"
                         toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
                         isOpen={bulkActionOpen}
                         isPlain
                         dropdownItems={[
-                          <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasSelected} component="button" onClick={bulkRemove}>
+                          <DropdownItem ouiaId="bulk-remove" aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasSelected} component="button" onClick={bulkRemove}>
                             {__('Remove')}
                           </DropdownItem>]
                         }

data/webpack/scenes/ContentViews/Details/Filters/ContentViewFilterDetailsHeader.js

@@ -90,7 +90,7 @@ const ContentViewFilterDetailsHeader = ({
             <RepoIcon type={repositoryType} />
           </SplitItem>
           <SplitItem>
-            <Text component={TextVariants.p}>
+            <Text ouiaId={`text-${displayedType()}`} component={TextVariants.p}>
               {displayedType()}
             </Text>
           </SplitItem>

data/webpack/scenes/ContentViews/Details/Filters/ContentViewFilters.js

@@ -157,9 +157,10 @@ const ContentViewFilters = ({ cvId, details }) => {
                 <Dropdown
                   toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
                   isOpen={bulkActionOpen}
+                  ouiaId="cv-filters-bulk-action"
                   isPlain
                   dropdownItems={[
-                    <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!bulkActionEnabled} component="button" onClick={bulkRemove}>
+                    <DropdownItem ouiaId="bulk-remove" aria-label="bulk_remove" key="bulk_remove" isDisabled={!bulkActionEnabled} component="button" onClick={bulkRemove}>
                       {__('Remove')}
                     </DropdownItem>]
                   }

data/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/CVRpmMatchContentModal.js

@@ -36,6 +36,7 @@ const CVRpmMatchContentModal = ({ filterId, onClose, filterRuleId }) => {
   return (
     <Modal
       title={__('Matching content')}
+      ouiaId="rpm-matching-content"
       variant={ModalVariant.medium}
       isOpen
       onClose={onClose}
@@ -58,7 +59,7 @@ const CVRpmMatchContentModal = ({ filterId, onClose, filterRuleId }) => {
         variant={TableVariant.compact}
       >
         <Thead>
-          <Tr>
+          <Tr ouiaId="column-headers">
             {columnHeaders.map(col =>
               <Th key={col}>{col}</Th>)}
           </Tr>
@@ -69,7 +70,7 @@ const CVRpmMatchContentModal = ({ filterId, onClose, filterRuleId }) => {
               nvra, summary = '-', id,
             } = result;
             return (
-              <Tr key={`${nvra}_${summary}_${id}`}>
+              <Tr key={`${nvra}_${summary}_${id}`} ouiaId={`${nvra}_${summary}_${id}`}>
                 <Td>
                   <a rel="noreferrer" target="_blank" href={urlBuilder(`packages/${id}`, '')}>{nvra}</a>
                 </Td>

data/webpack/scenes/ContentViews/Details/Filters/MatchContentModal/__tests__/CVRpmMatchContentModal.test.js

@@ -73,7 +73,7 @@ test('Can search with filter', async (done) => {
     expect(queryByText(secondMatchContentName)).toBeInTheDocument();
   });
 
-  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: firstMatchContent.nvra } });
+  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: `nvra = ${firstMatchContent.nvra}` } });
 
   await patientlyWaitFor(() => {
     expect(queryByText('Matching content')).toBeInTheDocument();

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

@@ -179,7 +179,7 @@ test('Can add filter rules', async (done) => {
     expect(getAllByLabelText('text input for search')[0]).toBeInTheDocument();
   });
 
-  fireEvent.change(getAllByLabelText('text input for search')[0], { target: { value: addedRule.name } });
+  fireEvent.change(getAllByLabelText('text input for search')[0], { target: { value: `name = ${addedRule.name}` } });
 
   await patientlyWaitFor(() => {
     expect(getByLabelText('add_edit_filter_rule')).toBeInTheDocument();
@@ -255,7 +255,7 @@ test('Can edit filter rules', async (done) => {
     fireEvent.click(queryByText('Edit'));
   });
 
-  fireEvent.change(getAllByLabelText('text input for search')[0], { target: { value: addedRule.name } });
+  fireEvent.change(getAllByLabelText('text input for search')[0], { target: { value: `name = ${addedRule.name}` } });
 
   await patientlyWaitFor(() => {
     expect(getByLabelText('add_edit_filter_rule')).toBeInTheDocument();

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

@@ -117,7 +117,7 @@ test('Can search for package rules in package filter details', async (done) => {
   });
 
   // Search and only searched result shows
-  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: lastPackageRuleName } });
+  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: `name = ${lastPackageRuleName}` } });
   await patientlyWaitFor(() => {
     expect(getByText(lastPackageRuleName)).toBeInTheDocument();
     expect(queryByText(firstPackageRuleName)).not.toBeInTheDocument();

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

@@ -118,7 +118,7 @@ test('Can search for package groups in package group filter', async (done) => {
   });
 
   // Search and only searched result shows
-  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: lastPackageGroupName } });
+  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: `name = ${lastPackageGroupName}` } });
   await patientlyWaitFor(() => {
     expect(getByText(lastPackageGroupName)).toBeInTheDocument();
     expect(queryByText(firstPackageGroupName)).not.toBeInTheDocument();

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

@@ -88,7 +88,7 @@ test('Can search for filter', async (done) => {
   // Looking for description because the name is in the search bar and could match
   await patientlyWaitFor(() => expect(getByText(description)).toBeInTheDocument());
   // Search for a filter by name
-  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: name } });
+  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: `name = ${name}` } });
   // Only the first filter should be showing, not the last one
   await patientlyWaitFor(() => {
     expect(getByText(description)).toBeInTheDocument();

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

@@ -87,7 +87,7 @@ const ContentViewHistories = ({ cvId }) => {
       fetchItems={useCallback(params => getContentViewHistories(cvId, params), [cvId])}
     >
       <Thead>
-        <Tr>
+        <Tr ouiaId="column-headers">
           {columnHeaders.map(col =>
             <Th key={col}>{col}</Th>)}
         </Tr>
@@ -103,7 +103,7 @@ const ContentViewHistories = ({ cvId }) => {
             user,
           } = history;
           return (
-            <Tr key={index}>
+            <Tr key={index} ouiaId={`history-row-${index}`}>
               <Td><LongDateTime date={createdAt} showRelativeTimeTooltip /></Td>
               <Td>
                 <Link to={`/versions/${versionId}`}>{`Version ${version}`}</Link>

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

@@ -111,6 +111,7 @@ const ContentViewVersionPromote = ({
     <Modal
       title={__(`Promote version ${versionNameToPromote}`)}
       isOpen
+      ouiaId="promote-version"
       variant={ModalVariant.large}
       onClose={() => {
         setIsOpen(false);
@@ -137,6 +138,7 @@ const ContentViewVersionPromote = ({
           </FormGroup>
           {!alertDismissed && forcePromote.length > 0 && (
             <Alert
+              ouiaId="force-promotion-alert"
               variant="info"
               isInline
               title={__('Force promotion')}

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

@@ -301,7 +301,7 @@ const ContentViewRepositories = ({ cvId, details }) => {
       }
     >
       <Thead>
-        <Tr key="version-header">
+        <Tr key="version-header" ouiaId="version-header">
           {hasPermission(permissions, 'edit_content_views') && <Th key="select-all" />}
           {columnHeaders.map((title, index) => {
             if (index === 0) {
@@ -329,6 +329,7 @@ const ContentViewRepositories = ({ cvId, details }) => {
                 <Td>
                   <Checkbox
                     id={id}
+                    ouiaId={`repository-checkbox-${id}`}
                     isChecked={isSelected(id)}
                     onChange={selected =>
                       selectOne(selected, id, repo)

data/webpack/scenes/ContentViews/Details/Versions/BulkDelete/Steps/ReviewEnvironments.js

@@ -64,9 +64,9 @@ export default () => {
               __('{versionOrVersions} {versionList} will be removed from the listed environment and will no longer be available for promotion.')}
           />}
       />
-      <TableComposable variant={TableVariant.compact}>
+      <TableComposable ouiaId="bulk-delete-env-table" variant={TableVariant.compact}>
         <Thead>
-          <Tr>
+          <Tr ouiaId="bulk-delete-env-header">
             {columnHeaders.map(col =>
               <Th key={col}>{col}</Th>)}
           </Tr>
@@ -80,7 +80,7 @@ export default () => {
             activation_key_count: akCount,
             host_count: hostCount,
           }) => (
-            <Tr key={`${name}_${id}`}>
+            <Tr ouiaId={`${name}_${id}`} key={`${name}_${id}`}>
               <Td>
                 <Label
                   /* TODO: Add "isCompact" to this on update of patternfly */

data/webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompare.js

@@ -11,6 +11,7 @@ import CVVersionCompareTable from './CVVersionCompareTable';
 import getContentViewDetails, { getContentViewVersionDetails } from '../../ContentViewDetailActions';
 import Loading from '../../../../../components/Loading';
 import './CVVersionCompare.scss';
+import EmptyStateMessage from '../../../../../components/Table/EmptyStateMessage';
 
 const CVVersionCompare = ({
   cvId,
@@ -51,7 +52,7 @@ const CVVersionCompare = ({
     selectCVVersionDetailsStatus(state, String(getIdFromVersion(versionTwo)
       ?? initialVersionTwoId), cvId));
 
-  const [currentActiveTab, setCurrentActiveTab] = useState(__('RPM packages'));
+  const [currentActiveTab, setCurrentActiveTab] = useState(__('Repositories'));
   const onSelect = (_e, eventKey) => {
     // This prevents needless pushing on repeated clicks of a tab
     if (currentActiveTab !== eventKey) {
@@ -126,6 +127,13 @@ const CVVersionCompare = ({
             </div>
           </div >) || <Loading />)
       }
+      {!showTabs &&
+      <EmptyStateMessage
+        title={__('Empty content view versions')}
+        body={__('No content in selected versions.')}
+        search
+      />
+      }
     </>
   );
 };

data/webpack/scenes/ContentViews/Details/Versions/Compare/CVVersionCompareConfig.js

@@ -23,6 +23,8 @@ import {
   selectDockerTagsComparisonStatus,
   selectGenericContentComparison,
   selectGenericContentComparisonStatus,
+  selectRepositoriesComparison,
+  selectRepositoriesComparisonStatus,
 } from '../../ContentViewDetailSelectors';
 import {
   getPackageGroupsComparison,
@@ -33,9 +35,11 @@ import {
   getDebPackagesComparison,
   getDockerTagsComparison,
   getGenericContentComparison,
+  getRepositoriesComparison,
 } from '../../ContentViewDetailActions';
 
 import ContentConfig from '../../../../Content/ContentConfig';
+import RepoIcon from '../../Repositories/RepoIcon';
 
 export const TableType = PropTypes.shape({
   name: PropTypes.string,
@@ -77,6 +81,50 @@ export default ({
   };
 
   return ([
+    {
+      name: __('Repositories'),
+      route: 'repositories',
+      getCountKey: (itemVersionOne, itemVersionTwo) =>
+          itemVersionOne?.repositories?.length || itemVersionTwo?.repositories?.length,
+      responseSelector: state =>
+        selectRepositoriesComparison(state, versionOneId, versionTwoId, viewBy),
+      statusSelector: state =>
+        selectRepositoriesComparisonStatus(state, versionOneId, versionTwoId, viewBy),
+      autocompleteEndpoint: '/repositories/auto_complete_search?archived=true',
+      fetchItems: params => getRepositoriesComparison(
+        versionOneId,
+        versionTwoId,
+        viewBy,
+        params,
+      ),
+      columnHeaders: [
+        {
+          title: __('Name'),
+          getProperty: item => (
+            <a href={urlBuilder(`products/${item?.product?.id}/repositories/${item?.id}`, '')}>
+              {item?.name}
+            </a>),
+        },
+        {
+          title: __('Type'),
+          modifier: 'fitContent',
+          getProperty: item => (<RepoIcon type={item?.content_type} />),
+        },
+        {
+          title: __('Product'),
+          getProperty: item => (
+            <a href={urlBuilder(`products/${item?.product?.id}`, '')}>
+              {item?.product?.name}
+            </a>),
+        },
+        { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
+        { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
+      ],
+      sortConfig: {
+        [__('Name')]: 'name',
+        [__('Type')]: 'content_type',
+      },
+    },
     {
       name: __('RPM packages'),
       getCountKey: (itemVersionOne, itemVersionTwo) =>
@@ -107,6 +155,12 @@ export default ({
         { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
         { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
       ],
+      sortConfig: {
+        [__('Name')]: 'nvra',
+        [__('Version')]: 'version',
+        [__('Release')]: 'release',
+        [__('Arch')]: 'arch',
+      },
     },
     {
       name: __('RPM package groups'),
@@ -124,6 +178,9 @@ export default ({
         { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
         { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
       ],
+      sortConfig: {
+        [__('Name')]: 'name',
+      },
     },
     {
       name: __('Files'),
@@ -146,6 +203,9 @@ export default ({
         { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
         { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
       ],
+      sortConfig: {
+        [__('Name')]: 'name',
+      },
     },
     {
       name: __('Errata'),
@@ -203,6 +263,11 @@ export default ({
         { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
         { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
       ],
+      sortConfig: {
+        [__('Errata ID')]: 'errata_id',
+        [__('Title')]: 'title',
+        [__('Type')]: 'type',
+      },
     },
     {
       name: __('Module streams'),
@@ -229,6 +294,13 @@ export default ({
         { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
         { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
       ],
+      sortConfig: {
+        [__('Name')]: 'name',
+        [__('Stream')]: 'stream',
+        [__('Version')]: 'version',
+        [__('Context')]: 'context',
+        [__('Arch')]: 'arch',
+      },
     },
     {
       name: __('Deb packages'),
@@ -253,6 +325,11 @@ export default ({
         { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
         { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
       ],
+      sortConfig: {
+        [__('Name')]: 'name',
+        [__('Version')]: 'version',
+        [__('Architecture')]: 'architecture',
+      },
     },
     {
       name: __('Container tags'),
@@ -283,6 +360,9 @@ export default ({
         { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
         { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
       ],
+      sortConfig: {
+        [__('Name')]: 'name',
+      },
     },
     ...ContentConfig.filter(config => !(config.names.pluralLabel === 'ostree_refs')).map(({
       names: { pluralLowercase, pluralLabel, singularLabel },
@@ -309,6 +389,9 @@ export default ({
         { title: __(`Version ${versionOne}`), getProperty: item => compareContent(item, versionOneId) },
         { title: __(`Version ${versionTwo}`), getProperty: item => compareContent(item, versionTwoId) },
       ],
+      sortConfig: {
+        [__('Name')]: 'name',
+      },
     })),
   ]);
 };