katello 4.2.1 → 4.3.0.rc1

data/webpack/containers/Application/overrides.scss

@@ -14,9 +14,12 @@ html .pagination-pf-pagesize.btn-group {
   margin-top: -6px !important;
 }
 
-td, th {
-  overflow: auto;
-  word-wrap: break-word;
+// don't use this class if you need a dropdown menu to extend outside the table cell
+.neat-table-cells {
+  td, th {
+    overflow: auto;
+    word-wrap: break-word;
+  }
 }
 
 // needed because we have overflow set to auto for all td's and it affected the pf4 table
@@ -63,3 +66,31 @@ td, th {
 .tab-body-with-spacing {
   margin: 24px 0px;
 }
+
+.pf-l-bullseye .pf-c-modal-box {
+  margin-top: 76px;
+  max-height: calc(100vh - 76px);
+  @media (min-width: 768px) {
+    max-width: calc(100vw - 240px);
+    margin-left: 200px;
+  }
+}
+
+@keyframes hideme {
+  0%, 70% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.tooltip {
+  margin:auto;
+  animation-direction: normal;
+  animation-name: hideme;
+  animation-duration: 2s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}

data/webpack/{fills_index.js → global_index.js}

@@ -5,12 +5,21 @@ import { registerReducer } from 'foremanReact/common/MountingService';
 import SystemStatuses from './components/extensions/about';
 import RegistrationCommands from './components/extensions/RegistrationCommands';
 import ContentTab from './components/extensions/HostDetails/Tabs/ContentTab';
-import SubscriptionTab from './components/extensions/HostDetails/Tabs/SubscriptionTab';
+import ContentViewDetailsCard from './components/extensions/HostDetails/Cards/ContentViewDetailsCard';
+
+// import SubscriptionTab from './components/extensions/HostDetails/Tabs/SubscriptionTab';
+import TracesTab from './components/extensions/HostDetails/Tabs/TracesTab';
 import extendReducer from './components/extensions/reducers';
+import rootReducer from './redux/reducers';
 
 registerReducer('katelloExtends', extendReducer);
+registerReducer('katello', rootReducer);
 
 addGlobalFill('aboutFooterSlot', '[katello]AboutSystemStatuses', <SystemStatuses key="katello-system-statuses" />, 100);
 addGlobalFill('registrationAdvanced', '[katello]RegistrationCommands', <RegistrationCommands key="katello-reg" />, 100);
 addGlobalFill('host-details-page-tabs', 'Content', <ContentTab key="content" />, 100);
-addGlobalFill('host-details-page-tabs', 'Subscription', <SubscriptionTab key="subscription" />, 100);
+/* eslint-disable max-len */
+// addGlobalFill('host-details-page-tabs', 'Subscription', <SubscriptionTab key="subscription" />, 100);
+addGlobalFill('host-details-page-tabs', 'Traces', <TracesTab key="traces" />, 100);
+
+addGlobalFill('details-cards', 'Content View Details', <ContentViewDetailsCard key="content-view-details" />);

data/webpack/global_test_setup.js

@@ -8,4 +8,9 @@ global.console.error = (error, stack) => {
 };
 
 // Increase jest timeout as some tests using multiple http mocks can time out on CI systems.
-jest.setTimeout(10000);
+jest.setTimeout(300000);
+
+afterAll(() => {
+  jest.resetModules();
+  if (global.gc) global.gc();
+});

data/webpack/redux/actions/RedHatRepositories/helpers.js

@@ -24,15 +24,15 @@ const recommendedRepositoriesRHEL = [
 ];
 
 const recommendedRepositoriesSatTools = [
-  'satellite-tools-6.9-for-rhel-8-x86_64-rpms',
-  'rhel-7-server-satellite-tools-6.9-rpms',
-  'rhel-6-server-els-satellite-tools-6.9-rpms',
+  'satellite-tools-6.10-for-rhel-8-x86_64-rpms',
+  'rhel-7-server-satellite-tools-6.10-rpms',
+  'rhel-6-server-els-satellite-tools-6.10-rpms',
   'rhel-7-server-satellite-maintenance-6-rpms',
 ];
 
 const recommendedRepositoriesMisc = [
   'rhel-server-rhscl-7-rpms',
-  'rhel-7-server-satellite-capsule-6.9-rpms',
+  'rhel-7-server-satellite-capsule-6.10-rpms',
   'rhel-7-server-ansible-2.9-rpms',
 ];
 

data/webpack/scenes/AnsibleCollections/AnsibleCollectionsTableSchema.js

@@ -18,7 +18,7 @@ const TableSchema = [
       formatters: [
         (value, { rowData }) => (
           <td>
-            <Link to={urlBuilder('ansible_collections', '', rowData.id)}>{rowData.name}</Link>
+            <Link to={urlBuilder('legacy_ansible_collections', '', rowData.id)}>{rowData.name}</Link>
           </td>
         ),
       ],

data/webpack/scenes/Content/ContentActions.js

@@ -0,0 +1,31 @@
+import { API_OPERATIONS, get } from 'foremanReact/redux/API';
+import api from '../../services/api';
+import { CONTENT_KEY, CONTENT_TYPES_KEY, CONTENT_ID_KEY, REPOSITORY_CONTENT_ID_KEY } from './ContentConstants';
+
+export const getContent = (contentType, params) => get({
+  type: API_OPERATIONS.GET,
+  key: CONTENT_KEY,
+  params,
+  url: api.getApiUrl(`/${contentType}`),
+});
+
+export const getContentTypes = () => get({
+  type: API_OPERATIONS.GET,
+  key: CONTENT_TYPES_KEY,
+  url: api.getApiUrl('/repositories/content_types'),
+});
+
+export const getContentDetails = (contentType, id) => get({
+  type: API_OPERATIONS.GET,
+  key: CONTENT_ID_KEY,
+  url: api.getApiUrl(`/${contentType}/${id}`),
+});
+
+export const getRepositoryContentDetails = (contentType, id, params) => get({
+  type: API_OPERATIONS.GET,
+  key: REPOSITORY_CONTENT_ID_KEY,
+  params,
+  url: api.getApiUrl(`/repositories?${contentType}_id=${id}`),
+});
+
+export default getContent;

data/webpack/scenes/Content/ContentConfig.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { translate as __ } from 'foremanReact/common/I18n';
+import ContentInfo from './Details/ContentInfo';
+import LastSync from '../ContentViews/Details/Repositories/LastSync';
+import ContentRepositories from './Details/ContentRepositories';
+import ContentCounts from './Details/ContentCounts';
+
+export default () => [
+  {
+    names: {
+      pluralTitle: __('Python Packages'),
+      singularTitle: __('Python Package'),
+      pluralLowercase: __('Python packages'),
+      singularLowercase: __('Python package'),
+      pluralLabel: 'python_packages',
+      singularLabel: 'python_package',
+    },
+    columnHeaders: [
+      { title: __('Name'), getProperty: unit => (<Link to={urlBuilder(`content/python_packages/${unit?.id}`, '')}>{unit?.name}</Link>) },
+      { title: __('Version'), getProperty: unit => unit?.version },
+      { title: __('Filename'), getProperty: unit => unit?.filename },
+    ],
+    tabs: [
+      {
+        tabKey: 'details',
+        title: __('Details'),
+        getContent: (contentType, id, tabKey) => <ContentInfo {...{ contentType, id, tabKey }} />,
+        columnHeaders: [
+          { title: __('Name'), getProperty: unit => unit?.name },
+          { title: __('Version'), getProperty: unit => unit?.version },
+          { title: __('Filename'), getProperty: unit => unit?.filename },
+          { title: __('Package Type'), getProperty: unit => unit?.additional_metadata.package_type },
+          { title: __('sha256'), getProperty: unit => unit?.additional_metadata.sha256 },
+        ],
+      },
+      {
+        tabKey: 'repositories',
+        title: __('Repositories'),
+        getContent: (contentType, id, tabKey) =>
+          <ContentRepositories {...{ contentType, id, tabKey }} />,
+        columnHeaders: [
+          {
+            title: __('Name'),
+            getProperty: unit =>
+              <a href={urlBuilder(`products/${unit?.product.id}/repositories/${unit?.id}`, '')}>{unit?.name}</a>,
+          },
+          {
+            title: __('Product'),
+            getProperty: unit =>
+              <a href={urlBuilder(`products/${unit?.product.id}/`, '')}>{unit?.product.name}</a>,
+          },
+          {
+            title: __('Sync Status'),
+            getProperty: unit =>
+              <LastSync lastSyncWords={unit?.last_sync_words} lastSync={unit?.last_sync} />,
+          },
+          {
+            title: __('Content Count'),
+            getProperty: (unit, singularLabel) =>
+              (<ContentCounts
+                typeSingularLabel={singularLabel}
+                productId={unit.product.id}
+                repoId={unit.id}
+                counts={unit.content_counts}
+              />),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    names: {
+      pluralTitle: __('Ansible Collections'),
+      singularTitle: __('Ansible Collection'),
+      pluralLowercase: __('Ansible collections'),
+      singularLowercase: __('Ansible collection'),
+      pluralLabel: 'ansible_collections',
+      singularLabel: 'ansible_collection',
+    },
+    columnHeaders: [
+      { title: __('Name'), getProperty: unit => (<Link to={urlBuilder(`content/ansible_collections/${unit?.id}`, '')}>{unit?.name}</Link>) },
+      { title: __('Author'), getProperty: unit => unit?.namespace },
+      { title: __('Version'), getProperty: unit => unit?.version },
+      { title: __('Checksum'), getProperty: unit => unit?.checksum },
+
+    ],
+    tabs: [
+      {
+        tabKey: 'details',
+        title: __('Details'),
+        getContent: (contentType, id, tabKey) => <ContentInfo {...{ contentType, id, tabKey }} />,
+        columnHeaders: [
+          { title: __('Name'), getProperty: unit => unit?.name },
+          { title: __('Description'), getProperty: unit => unit?.description },
+          { title: __('Author'), getProperty: unit => unit?.namespace },
+          { title: __('Version'), getProperty: unit => unit?.version },
+          { title: __('Checksum'), getProperty: unit => unit?.checksum },
+          { title: __('Tags'), getProperty: unit => unit?.tags?.join() },
+        ],
+      },
+      {
+        tabKey: 'repositories',
+        title: __('Repositories'),
+        getContent: (contentType, id, tabKey) =>
+          <ContentRepositories {...{ contentType, id, tabKey }} />,
+        columnHeaders: [
+          {
+            title: __('Name'),
+            getProperty: unit =>
+              <a href={urlBuilder(`products/${unit?.product.id}/repositories/${unit?.id}`, '')}>{unit?.name}</a>,
+          },
+          {
+            title: __('Product'),
+            getProperty: unit =>
+              <a href={urlBuilder(`products/${unit?.product.id}`, '')}>{unit?.product.name}</a>,
+          },
+          {
+            title: __('Sync Status'),
+            getProperty: unit =>
+              <LastSync lastSyncWords={unit?.last_sync_words} lastSync={unit?.last_sync} />,
+          },
+          {
+            title: __('Content Count'),
+            getProperty: (unit, singularLabel) =>
+              (<ContentCounts
+                typeSingularLabel={singularLabel}
+                productId={unit.product.id}
+                repoId={unit.id}
+                counts={unit.content_counts}
+              />),
+          },
+        ],
+      },
+    ],
+  },
+];

data/webpack/scenes/Content/ContentConstants.js

@@ -0,0 +1,7 @@
+export const CONTENT_KEY = 'CONTENT';
+
+export const CONTENT_TYPES_KEY = 'CONTENT_TYPES';
+
+export const CONTENT_ID_KEY = 'CONTENT_ID';
+
+export const REPOSITORY_CONTENT_ID_KEY = 'REPOSITORY_CONTENT_ID';

data/webpack/scenes/Content/ContentPage.js

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { Grid, GridItem, TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { isEmpty } from 'lodash';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import ContentTable from './Table/ContentTable';
+import { selectContentTypes, selectContentTypesStatus } from './ContentSelectors';
+import ContentConfig from './ContentConfig';
+import { getContentTypes } from './ContentActions';
+import Loading from '../../components/Loading';
+import EmptyStateMessage from '../../components/Table/EmptyStateMessage';
+
+const ContentPage = () => {
+  const dispatch = useDispatch();
+  const contentTypesResponse = useSelector(selectContentTypes);
+  const contentTypesStatus = useSelector(selectContentTypesStatus);
+  const [selectedContentType, setSelectedContentType] = useState(null);
+  const [showContentTypeSelector, setShowContentTypeSelector] = useState(true);
+  const [contentTypes, setContentTypes] = useState(null);
+  const { content_type: contentType } = useParams();
+
+  useEffect(() => {
+    // Set list of enabled content types and initial content type
+    const buildContentTypes = () => {
+      const types = {};
+      contentTypesResponse.forEach((type) => {
+        if (type.generic_browser) {
+          const typeConfig = ContentConfig().find(config =>
+            config.names.singularLabel === type.label);
+          if (typeConfig) {
+            const { names } = typeConfig;
+            types[names.pluralTitle] = [names.singularLabel, names.pluralLabel];
+          }
+        }
+      });
+      return types;
+    };
+
+    if (contentTypesStatus === STATUS.RESOLVED) {
+      const enabledContentTypes = buildContentTypes();
+      if (!contentType) {
+        setSelectedContentType(Object.keys(enabledContentTypes)[0]);
+      } else {
+        Object.entries(enabledContentTypes).forEach(([key, value]) => {
+          if (value.includes(contentType)) {
+            setSelectedContentType(key);
+            setShowContentTypeSelector(false);
+          }
+        });
+      }
+      setContentTypes(enabledContentTypes);
+    }
+  }, [contentTypesStatus, contentTypesResponse, contentType]);
+
+  useEffect(() => {
+    dispatch(getContentTypes());
+  }, [dispatch]);
+
+  if (contentTypesStatus === STATUS.PENDING) {
+    return <Loading />;
+  } else if (isEmpty(contentTypes)) {
+    return (
+      <EmptyStateMessage
+        title="Browsable content types not found."
+        body="No content types are enabled for this page."
+      />
+    );
+  }
+
+  return (
+    <Grid className="grid-with-margin">
+      <GridItem span={12}>
+        <TextContent>
+          <Text component={TextVariants.h1}>{__(`${selectedContentType}`)}</Text>
+        </TextContent>
+      </GridItem>
+      <GridItem span={12}>
+        <ContentTable {...{
+ selectedContentType, setSelectedContentType, contentTypes, showContentTypeSelector,
+}}
+        />
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default ContentPage;

data/webpack/scenes/Content/ContentSelectors.js

@@ -0,0 +1,43 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import { CONTENT_KEY, CONTENT_TYPES_KEY, CONTENT_ID_KEY, REPOSITORY_CONTENT_ID_KEY } from './ContentConstants';
+
+export const selectContent = state =>
+  selectAPIResponse(state, CONTENT_KEY) || {};
+
+export const selectContentStatus = state =>
+  selectAPIStatus(state, CONTENT_KEY) || STATUS.PENDING;
+
+export const selectContentError = state =>
+  selectAPIError(state, CONTENT_KEY);
+
+export const selectContentTypes = state =>
+  selectAPIResponse(state, CONTENT_TYPES_KEY) || {};
+
+export const selectContentTypesStatus = state =>
+  selectAPIStatus(state, CONTENT_TYPES_KEY) || STATUS.PENDING;
+
+export const selectContentTypesError = state =>
+  selectAPIError(state, CONTENT_TYPES_KEY);
+
+export const selectContentDetails = state =>
+  selectAPIResponse(state, CONTENT_ID_KEY);
+
+export const selectContentDetailsStatus = state =>
+  selectAPIStatus(state, CONTENT_ID_KEY) || STATUS.PENDING;
+
+export const selectContentDetailsError = state =>
+  selectAPIError(state, CONTENT_ID_KEY);
+
+export const selectRepositoryContentDetails = state =>
+  selectAPIResponse(state, REPOSITORY_CONTENT_ID_KEY);
+
+export const selectRepositoryContentDetailsStatus = state =>
+  selectAPIStatus(state, REPOSITORY_CONTENT_ID_KEY) || STATUS.PENDING;
+
+export const selectRepositoryContentDetailsError = state =>
+  selectAPIError(state, REPOSITORY_CONTENT_ID_KEY);

data/webpack/scenes/Content/Details/ContentCounts.js

@@ -0,0 +1,42 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import ContentConfig from '../ContentConfig';
+
+const appendCount = (type, count, info, productId, repoId) => {
+  const [repoPlural, repoSingular, link] = info;
+  const displayName = count > 1 ? repoPlural : repoSingular;
+  const url = urlBuilder(`products/${productId}/repositories/${repoId}/content`, '', link);
+  const displayInfo = `${count} ${displayName}`;
+  return (
+    <div key={`${type}${count}`}>
+      <a href={url}>{displayInfo}</a>
+    </div>
+  );
+};
+
+const ContentCounts = ({
+  typeSingularLabel, productId, repoId, counts,
+}) => {
+  const config = ContentConfig().find(type =>
+    type.names.singularLabel === typeSingularLabel);
+  const { pluralLowercase, singularLowercase, pluralLabel } = config.names;
+  const info = [pluralLowercase, singularLowercase, pluralLabel];
+
+  const allCounts = [];
+  Object.keys(counts).forEach((type) => {
+    const count = counts[typeSingularLabel];
+    if (count > 0) allCounts.push(appendCount(type, count, info, productId, repoId));
+  });
+
+  return <Fragment>{allCounts}</Fragment>;
+};
+
+ContentCounts.propTypes = {
+  typeSingularLabel: PropTypes.string.isRequired,
+  productId: PropTypes.number.isRequired,
+  repoId: PropTypes.number.isRequired,
+  counts: PropTypes.shape({}).isRequired,
+};
+
+export default ContentCounts;

data/webpack/scenes/Content/Details/ContentDetails.js

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useParams } from 'react-router-dom';
+import { Grid, GridItem, TextContent, Text, TextVariants, Flex, Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { STATUS } from 'foremanReact/constants';
+import ContentConfig from '../ContentConfig';
+import RoutedTabs from '../../../components/RoutedTabs';
+import { selectContentDetails, selectContentDetailsStatus } from '../ContentSelectors';
+import { getContentDetails } from '../ContentActions';
+import Loading from '../../../components/Loading';
+
+const ContentDetails = () => {
+  const dispatch = useDispatch();
+  const contentDetailsResponse = useSelector(selectContentDetails);
+  const contentDetailsResponseStatus = useSelector(selectContentDetailsStatus);
+
+  const { id, content_type: contentType } = useParams();
+  const contentId = Number(id);
+  const config = ContentConfig().find(type =>
+    type.names.pluralLabel === contentType);
+  const { pluralTitle, pluralLabel } = config.names;
+
+  const tabs = [];
+  config.tabs.forEach((tab) => {
+    tabs.push({
+      title: tab.title,
+      key: tab.tabKey,
+      content: tab.getContent(contentType, contentId, tab.tabKey),
+    });
+  });
+
+  useEffect(() => {
+    dispatch(getContentDetails(contentType, contentId));
+  }, [dispatch, contentType, contentId]);
+
+  if (contentDetailsResponseStatus === STATUS.PENDING) {
+    return <Loading />;
+  }
+
+  return (
+    <Grid className="grid-with-margin">
+      <Breadcrumb style={{ marginTop: '15px', marginBottom: '15px' }}>
+        <BreadcrumbItem
+          aria-label="content_breadcrumb"
+          render={() => (<Link to={`/content/${pluralLabel}`}>{pluralTitle}</Link>)}
+        />
+        <BreadcrumbItem
+          aria-label="content_breadcrumb_content"
+          isActive
+        > {contentDetailsResponse.name}
+        </BreadcrumbItem>
+      </Breadcrumb>
+      <GridItem span={12} >
+        <Flex>
+          <TextContent>
+            <Text component={TextVariants.h1}> {contentDetailsResponse.name} </Text>
+          </TextContent>
+        </Flex>
+      </GridItem>
+      <GridItem span={12}>
+        <RoutedTabs tabs={tabs} baseUrl={`/${contentType}/${contentId}`} defaultTabIndex={0} />
+      </GridItem>
+    </Grid>
+  );
+};
+export default ContentDetails;

data/webpack/scenes/Content/Details/ContentInfo.js

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  TextContent,
+  TextList,
+  TextListVariants,
+  TextListItem,
+  TextListItemVariants,
+} from '@patternfly/react-core';
+import { STATUS } from 'foremanReact/constants';
+import PropTypes from 'prop-types';
+import { selectContentDetails, selectContentDetailsStatus } from '../ContentSelectors';
+import contentConfig from '../ContentConfig';
+import { getContentDetails } from '../ContentActions';
+import Loading from '../../../components/Loading';
+/* eslint-disable react/no-array-index-key */
+const ContentInfo = ({ contentType, id, tabKey }) => {
+  const dispatch = useDispatch();
+  const detailsResponse = useSelector(selectContentDetails);
+  const detailsStatus = useSelector(selectContentDetailsStatus);
+
+  const config = contentConfig().find(type => type.names.pluralLabel === contentType);
+  const { columnHeaders } = config.tabs.find(header => header.tabKey === tabKey);
+
+  useEffect(() => {
+    if (!detailsResponse) {
+      dispatch(getContentDetails(contentType, id));
+    }
+  });
+
+  if (detailsStatus === STATUS.PENDING) {
+    return <Loading />;
+  }
+
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        {columnHeaders.map((col, index) => [
+          <TextListItem
+            key={`${index}_${col.title}`}
+            component={TextListItemVariants.dt}
+          > {col.title}
+          </TextListItem>,
+          <TextListItem
+            key={index}
+            component={TextListItemVariants.dd}
+          > {col.getProperty(detailsResponse)}
+          </TextListItem>])}
+      </TextList>
+    </TextContent>
+  );
+};
+
+export default ContentInfo;
+
+ContentInfo.propTypes = {
+  contentType: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  tabKey: PropTypes.string.isRequired,
+};

data/webpack/scenes/Content/Details/ContentRepositories.js

@@ -0,0 +1,78 @@
+import React, { useState, useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import {
+  selectRepositoryContentDetails,
+  selectRepositoryContentDetailsError,
+  selectRepositoryContentDetailsStatus,
+} from '../ContentSelectors';
+import contentConfig from '../ContentConfig';
+import { getRepositoryContentDetails } from '../ContentActions';
+import TableWrapper from '../../../components/Table/TableWrapper';
+
+/* eslint-disable react/no-array-index-key */
+const ContentRepositories = ({ contentType, id, tabKey }) => {
+  const status = useSelector(selectRepositoryContentDetailsStatus);
+  const response = useSelector(selectRepositoryContentDetails);
+  const error = useSelector(selectRepositoryContentDetailsError);
+  const [searchQuery, updateSearchQuery] = useState('');
+  const { results, ...metadata } = response;
+
+  const config = contentConfig().find(type => type.names.pluralLabel === contentType);
+  const typeSingularLabel = config.names.singularLabel;
+  const { columnHeaders } = config.tabs.find(header => header.tabKey === tabKey);
+
+  const emptyContentTitle = __("You currently don't have any repositories associated with this content.");
+  const emptyContentBody = __('Please add some repositories.');
+  const emptySearchTitle = __('No matching repositories found');
+  const emptySearchBody = __('Try changing your search settings.');
+
+  return (
+    <TableWrapper
+      {...{
+        metadata,
+        searchQuery,
+        updateSearchQuery,
+        error,
+        status,
+        emptyContentTitle,
+        emptySearchTitle,
+        emptySearchBody,
+        emptyContentBody,
+      }}
+      variant={TableVariant.compact}
+      autocompleteEndpoint="/repositories/auto_complete_search"
+      fetchItems={useCallback(
+        params => getRepositoryContentDetails(typeSingularLabel, id, params),
+        [typeSingularLabel, id],
+      )}
+    >
+      <Thead>
+        <Tr>
+          {columnHeaders.map(col =>
+            <Th key={col.title}>{col.title}</Th>)}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {results?.map(details => (
+          <Tr key={`${details.id}`}>
+            {columnHeaders.map((col, index) =>
+              <Td key={index}>{col.getProperty(details, typeSingularLabel)}</Td>)
+            }
+          </Tr>
+        ))
+        }
+      </Tbody>
+    </TableWrapper>
+  );
+};
+
+export default ContentRepositories;
+
+ContentRepositories.propTypes = {
+  contentType: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  tabKey: PropTypes.string.isRequired,
+};