katello 4.0.3 → 4.1.0.rc1

data/webpack/scenes/ContentViews/Details/ComponentContentViews/__tests__/contentViewComponents.test.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting } from '../../../../../test-utils/nockWrapper';
+import api from '../../../../../services/api';
+import CONTENT_VIEWS_KEY from '../../../ContentViewsConstants';
+import ContentViewComponents from '../ContentViewComponents';
+
+const cvComponentData = require('./contentViewComponents.fixtures.json');
+const cvUnpublishedComponentData = require('./unpublishedCVComponents.fixtures.json');
+
+const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
+const cvComponents = api.getApiUrl('/content_views/5/content_view_components');
+const autocompleteUrl = '/content_views/auto_complete_search';
+
+let firstComponent;
+let searchDelayScope;
+let autoSearchScope;
+
+beforeEach(() => {
+  const { results } = cvComponentData;
+  [firstComponent] = results;
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+});
+
+afterEach(() => {
+  nock.cleanAll();
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+});
+
+test('Can call API and show components on page load', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvComponents)
+    .query(true)
+    .reply(200, cvComponentData);
+
+  const { getByText, queryByText } = renderWithRedux(
+    <ContentViewComponents cvId={5} />,
+    renderOptions,
+  );
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(firstComponent.content_view.label)).toBeNull();
+  // Assert that the repo name is now showing on the screen, but wait for it to appear.
+  await patientlyWaitFor(() => expect(getByText(firstComponent.content_view.label)).toBeTruthy());
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+});
+
+test('Can call API and show unpublished components', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvComponents)
+    .query(true)
+    .reply(200, cvUnpublishedComponentData);
+
+  const unpublishedComponent = cvUnpublishedComponentData.results[1];
+
+  const { getByText, queryByText, getAllByText } = renderWithRedux(
+    <ContentViewComponents cvId={5} />,
+    renderOptions,
+  );
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(unpublishedComponent.content_view.label)).toBeNull();
+  // Assert that the repo name is now showing on the screen, but wait for it to appear.
+  await patientlyWaitFor(() => {
+    expect(getByText(unpublishedComponent.content_view.label)).toBeTruthy();
+    expect(getAllByText('Not yet published')).toHaveLength(4);
+  });
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+});
+
+test('Can link to view environment', async () => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const scope = nockInstance
+    .get(cvComponents)
+    .query(true)
+    .reply(200, cvComponentData);
+
+  const { getAllByText } = renderWithRedux(
+    <ContentViewComponents cvId={5} />,
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    expect(getAllByText('Library')[0].closest('a'))
+      .toHaveAttribute('href', '/lifecycle_environments/1');
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+});
+
+test('Can search for component content views in component view', async (done) => {
+  const lastComponent = cvComponentData.results[1];
+  const { name: firstComponentName } = firstComponent.content_view;
+  const { name: lastComponentName } = lastComponent.content_view;
+  const searchQueryMatcher = actualParams => actualParams?.search?.includes(lastComponentName);
+
+  const cvComponentsScope = nockInstance
+    .get(cvComponents)
+    .query(true)
+    .reply(200, cvComponentData);
+  const cvComponentsSearchScope = nockInstance
+    .get(cvComponents)
+    .query(searchQueryMatcher)
+    .reply(200, { results: [lastComponent] });
+
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const withSearchScope = mockAutocomplete(nockInstance, autocompleteUrl, searchQueryMatcher);
+  const { getByText, queryByText, getByLabelText } =
+    renderWithRedux(<ContentViewComponents cvId={5} />, renderOptions);
+
+  // Basic results showing
+  await patientlyWaitFor(() => {
+    expect(getByText(firstComponentName)).toBeInTheDocument();
+    expect(getByText(lastComponentName)).toBeInTheDocument();
+  });
+
+  // Search and only searched result shows
+  const searchInput = getByLabelText(/text input for search/i);
+  expect(searchInput).toBeInTheDocument();
+  fireEvent.change(searchInput, { target: { value: `name = "${lastComponentName}"` } });
+
+  await patientlyWaitFor(() => {
+    expect(getByText(lastComponentName)).toBeInTheDocument();
+    expect(queryByText(firstComponentName)).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(cvComponentsScope);
+  assertNockRequest(withSearchScope);
+  assertNockRequest(cvComponentsSearchScope, done);
+});
+
+test('Can handle no components being present', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+  const noResults = {
+    total: 0,
+    subtotal: 0,
+    page: 1,
+    per_page: 20,
+    results: [],
+  };
+  const scope = nockInstance
+    .get(cvComponents)
+    .query(true)
+    .reply(200, noResults);
+
+  const mockDetails = { label: 'test_empty' };
+  const { queryByText } =
+    renderWithRedux(<ContentViewComponents cvId={5} details={mockDetails} />, renderOptions);
+
+  expect(queryByText(firstComponent.content_view.label)).toBeNull();
+  await patientlyWaitFor(() => expect(queryByText('No content views belong to test_empty')).toBeTruthy());
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope, done);
+});

data/webpack/scenes/ContentViews/Details/ComponentContentViews/__tests__/unpublishedCVComponents.fixtures.json

@@ -0,0 +1,64 @@
+{
+  "total": 2,
+  "subtotal": 2,
+  "page": "1",
+  "per_page": "20",
+  "error": null,
+  "search": null,
+  "sort": {
+    "by": "label",
+    "order": "asc"
+  },
+  "results": [
+    {
+      "latest": true,
+      "id": 6,
+      "created_at": "2021-04-19 16:25:30 -0400",
+      "updated_at": "2021-04-19 16:25:30 -0400",
+      "composite_content_view": {
+        "id": 10,
+        "name": "composite_ex",
+        "label": "composite_ex",
+        "description": "",
+        "next_version": 1,
+        "latest_version": null,
+        "version_count": 0
+      },
+      "content_view": {
+        "id": 8,
+        "name": "comp1",
+        "label": "comp1",
+        "description": "",
+        "next_version": 1,
+        "latest_version": null,
+        "version_count": 0
+      },
+      "content_view_version": null
+    },
+    {
+      "latest": true,
+      "id": 7,
+      "created_at": "2021-04-19 16:25:31 -0400",
+      "updated_at": "2021-04-19 16:25:31 -0400",
+      "composite_content_view": {
+        "id": 10,
+        "name": "composite_ex",
+        "label": "composite_ex",
+        "description": "",
+        "next_version": 1,
+        "latest_version": null,
+        "version_count": 0
+      },
+      "content_view": {
+        "id": 9,
+        "name": "comp2",
+        "label": "comp2",
+        "description": "",
+        "next_version": 1,
+        "latest_version": null,
+        "version_count": 0
+      },
+      "content_view_version": null
+    }
+  ]
+}

data/webpack/scenes/ContentViews/Details/ContentViewDetailActions.js

@@ -1,7 +1,6 @@
 import { API_OPERATIONS, get, put } from 'foremanReact/redux/API';
 import { addToast } from 'foremanReact/redux/actions/toasts';
 import { translate as __ } from 'foremanReact/common/I18n';
-
 import {
   UPDATE_CONTENT_VIEW,
   UPDATE_CONTENT_VIEW_FAILURE,
@@ -11,11 +10,16 @@ import {
   REPOSITORY_TYPES,
   cvDetailsKey,
   cvDetailsRepoKey,
-  cvDetailsFilterKey,
+  cvDetailsFiltersKey,
+  cvFilterDetailsKey,
+  cvFilterPackageGroupsKey,
+  cvDetailsHistoryKey,
+  cvFilterRulesKey,
+  cvDetailsComponentKey,
+  cvDetailsVersionKey,
 } from '../ContentViewsConstants';
 import api from '../../../services/api';
-
-import { apiError } from '../../../utils/helpers';
+import { getResponseErrorMsgs, apiError } from '../../../utils/helpers';
 
 const getContentViewDetails = cvId => get({
   type: API_OPERATIONS.GET,
@@ -68,15 +72,71 @@ export const getContentViewRepositories = (cvId, params, status) => {
 export const getRepositoryTypes = () => get({
   type: API_OPERATIONS.GET,
   key: REPOSITORY_TYPES,
-  errorToast: error => __(`Something went wrong while retrieving the repository types! ${error}`),
+  errorToast: error => __(`Something went wrong while retrieving the repository types! ${getResponseErrorMsgs(error.response)}`),
   url: api.getApiUrl('/repositories/repository_types'),
 });
 
 export const getContentViewFilters = (cvId, params) => get({
-  key: cvDetailsFilterKey(cvId),
+  key: cvDetailsFiltersKey(cvId),
   params: { content_view_id: cvId, ...params },
-  errorToast: error => __(`Something went wrong while retrieving the content view filters! ${error}`),
+  errorToast: error => __(`Something went wrong while retrieving the content view filters! ${getResponseErrorMsgs(error.response)}`),
   url: api.getApiUrl('/content_view_filters'),
 });
 
+export const getCVFilterDetails = (cvId, filterId, params) => get({
+  key: cvFilterDetailsKey(cvId, filterId),
+  params: { contentViewId: cvId, ...params },
+  errorToast: error => __(`Something went wrong while retrieving the content view filter! ${getResponseErrorMsgs(error.response)}`),
+  url: api.getApiUrl(`/content_view_filters/${filterId}`),
+});
+
+export const getCVFilterPackageGroups = (cvId, filterId, params) => get({
+  key: cvFilterPackageGroupsKey(cvId, filterId),
+  params: {
+    filter_id: filterId, show_all_for: 'content_view_filter', include_filter_ids: true, ...params,
+  },
+  errorToast: error => __(`Something went wrong while retrieving the content view filter! ${getResponseErrorMsgs(error.response)}`),
+  url: api.getApiUrl('/package_groups'),
+});
+
+export const getContentViewHistories = (cvId, params) => {
+  const apiParams = { ...params };
+  const apiUrl = `/content_views/${cvId}/history`;
+  return get({
+    key: cvDetailsHistoryKey(cvId),
+    params: apiParams,
+    errorToast: error => __(`Something went wrong while retrieving the content view history! ${getResponseErrorMsgs(error.response)}`),
+    url: api.getApiUrl(apiUrl),
+  });
+};
+
+export const getCVFilterRules = (filterId, params) => get({
+  key: cvFilterRulesKey(filterId),
+  params: { ...params },
+  errorToast: error => __(`Something went wrong while retrieving the content view filter rules! ${getResponseErrorMsgs(error.response)}`),
+  url: api.getApiUrl(`/content_view_filters/${filterId}/rules`),
+});
+
+export const getContentViewComponents = (cvId, params) => {
+  const apiParams = { ...params };
+  const apiUrl = `/content_views/${cvId}/content_view_components`;
+  return get({
+    key: cvDetailsComponentKey(cvId),
+    params: apiParams,
+    errorToast: error => __(`Something went wrong while retrieving the content view components! ${getResponseErrorMsgs(error.response)}`),
+    url: api.getApiUrl(apiUrl),
+  });
+};
+
+export const getContentViewVersions = (cvId, params) => {
+  const apiParams = { content_view_id: cvId, ...params };
+  const apiUrl = '/content_view_versions/';
+  return get({
+    key: cvDetailsVersionKey(cvId),
+    params: apiParams,
+    errorToast: error => __(`Something went wrong while retrieving the content view versions! ${getResponseErrorMsgs(error.response)}`),
+    url: api.getApiUrl(apiUrl),
+  });
+};
+
 export default getContentViewDetails;

data/webpack/scenes/ContentViews/Details/ContentViewDetailSelectors.js

@@ -7,8 +7,14 @@ import { STATUS } from 'foremanReact/constants';
 import {
   cvDetailsKey,
   cvDetailsRepoKey,
-  cvDetailsFilterKey,
+  cvDetailsFiltersKey,
+  cvFilterDetailsKey,
+  cvFilterPackageGroupsKey,
+  cvDetailsHistoryKey,
+  cvFilterRulesKey,
+  cvDetailsVersionKey,
   REPOSITORY_TYPES,
+  cvDetailsComponentKey,
 } from '../ContentViewsConstants';
 
 export const selectCVDetails = (state, cvId) =>
@@ -36,12 +42,63 @@ export const selectRepoTypesStatus = state =>
   selectAPIStatus(state, REPOSITORY_TYPES) || STATUS.PENDING;
 
 export const selectCVFilters = (state, cvId) =>
-  selectAPIResponse(state, cvDetailsFilterKey(cvId)) || {};
+  selectAPIResponse(state, cvDetailsFiltersKey(cvId)) || {};
 
 export const selectCVFiltersStatus = (state, cvId) =>
-  selectAPIStatus(state, cvDetailsFilterKey(cvId)) || STATUS.PENDING;
+  selectAPIStatus(state, cvDetailsFiltersKey(cvId)) || STATUS.PENDING;
 
 export const selectCVFiltersError = (state, cvId) =>
-  selectAPIError(state, cvDetailsFilterKey(cvId));
+  selectAPIError(state, cvDetailsFiltersKey(cvId));
+
+export const selectCVFilterDetails = (state, cvId, filterId) =>
+  selectAPIResponse(state, cvFilterDetailsKey(cvId, filterId)) || {};
+
+export const selectCVFilterDetailStatus = (state, cvId, filterId) =>
+  selectAPIStatus(state, cvFilterDetailsKey(cvId, filterId)) || STATUS.PENDING;
+
+export const selectCVFilterDetailError = (state, cvId, filterId) =>
+  selectAPIError(state, cvFilterDetailsKey(cvId, filterId));
+
+export const selectCVFilterPackageGroups = (state, cvId, filterId) =>
+  selectAPIResponse(state, cvFilterPackageGroupsKey(cvId, filterId));
+
+export const selectCVFilterPackageGroupStatus = (state, cvId, filterId) =>
+  selectAPIStatus(state, cvFilterPackageGroupsKey(cvId, filterId)) || STATUS.PENDING;
+
+export const selectCVFilterPackageGroupError = (state, cvId, filterId) =>
+  selectAPIError(state, cvFilterPackageGroupsKey(cvId, filterId));
+
+export const selectCVHistories = (state, cvId) =>
+  selectAPIResponse(state, cvDetailsHistoryKey(cvId)) || {};
+
+export const selectCVHistoriesStatus = (state, cvId) =>
+  selectAPIStatus(state, cvDetailsHistoryKey(cvId)) || STATUS.PENDING;
+
+export const selectCVHistoriesError = (state, cvId) =>
+  selectAPIError(state, cvDetailsHistoryKey(cvId));
+
+export const selectCVFilterRules = (state, filterId) =>
+  selectAPIResponse(state, cvFilterRulesKey(filterId));
+
+export const selectCVFilterRulesStatus = (state, filterId) =>
+  selectAPIStatus(state, cvFilterRulesKey(filterId)) || STATUS.PENDING;
+
+export const selectCVComponents = (state, cvId) =>
+  selectAPIResponse(state, cvDetailsComponentKey(cvId)) || {};
+
+export const selectCVComponentsStatus = (state, cvId) =>
+  selectAPIStatus(state, cvDetailsComponentKey(cvId)) || STATUS.PENDING;
+
+export const selectCVComponentsError = (state, cvId) =>
+  selectAPIError(state, cvDetailsComponentKey(cvId));
+
+export const selectCVVersions = (state, cvId) =>
+  selectAPIResponse(state, cvDetailsVersionKey(cvId)) || {};
+
+export const selectCVVersionsStatus = (state, cvId) =>
+  selectAPIStatus(state, cvDetailsVersionKey(cvId)) || STATUS.PENDING;
+
+export const selectCVVersionsError = (state, cvId) =>
+  selectAPIError(state, cvDetailsVersionKey(cvId));
 
 export const selectIsCVUpdating = state => state.katello?.contentViewDetails?.updating;

data/webpack/scenes/ContentViews/Details/ContentViewDetails.js

@@ -1,42 +1,58 @@
 import React from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
-import { Grid, GridItem, TextContent, Text, TextVariants, Button } from '@patternfly/react-core';
+import { Grid, GridItem, TextContent, Text, TextVariants, Button, Flex, FlexItem } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 
 import DetailsContainer from './DetailsContainer';
 import ContentViewInfo from './ContentViewInfo';
+import ContentViewVersions from './Versions/ContentViewVersions';
 import ContentViewRepositories from './Repositories/ContentViewRepositories';
+import ContentViewComponents from './ComponentContentViews/ContentViewComponents';
+import ContentViewHistories from './Histories/ContentViewHistories';
 import ContentViewFilters from './Filters/ContentViewFilters';
+import ContentViewFilterDetails from './Filters/ContentViewFilterDetails';
 import { selectCVDetails } from './ContentViewDetailSelectors';
-import TabbedView from '../../../components/TabbedView';
+import RoutedTabs from '../../../components/RoutedTabs';
+import ContentViewIcon from '../components/ContentViewIcon';
 
 const ContentViewDetails = ({ match }) => {
   const cvId = parseInt(match.params.id, 10);
   const details = useSelector(state => selectCVDetails(state, cvId), shallowEqual);
 
-  const { name } = details;
+  const { name, composite } = details;
   const tabs = [
     {
+      key: 'details',
       title: __('Details'),
       content: <ContentViewInfo {...{ cvId, details }} />,
     },
     {
+      key: 'versions',
       title: __('Versions'),
-      content: <React.Fragment>Versions</React.Fragment>,
+      content: <ContentViewVersions cvId={cvId} />,
     },
-    {
+    (composite ? {
+      key: 'contentviews',
+      title: __('Content Views'),
+      content: <ContentViewComponents {...{ cvId, details }} />,
+    } : {
+      key: 'repositories',
       title: __('Repositories'),
       content: <ContentViewRepositories {...{ cvId, details }} />,
-    },
+    }
+    ),
     {
+      key: 'filters',
       title: __('Filters'),
       content: <ContentViewFilters cvId={cvId} />,
+      detailContent: <ContentViewFilterDetails />,
     },
     {
+      key: 'history',
       title: __('History'),
-      content: <React.Fragment>History</React.Fragment>,
+      content: <ContentViewHistories cvId={cvId} />,
     },
   ];
 
@@ -45,9 +61,16 @@ const ContentViewDetails = ({ match }) => {
       <DetailsContainer cvId={cvId}>
         <React.Fragment>
           <GridItem span={8}>
-            <TextContent>
-              <Text component={TextVariants.h1}>{`${name} content view`}</Text>
-            </TextContent>
+            <Flex>
+              <FlexItem>
+                <TextContent>
+                  <Text component={TextVariants.h1}>{`${name} content view`}</Text>
+                </TextContent>
+              </FlexItem>
+              <FlexItem spacer={{ default: 'spacerXl' }}>
+                <Text component={TextVariants.h1}><ContentViewIcon composite={composite} /></Text>
+              </FlexItem>
+            </Flex>
           </GridItem>
           <GridItem span={4} style={{ textAlign: 'right' }}>
             <Button
@@ -62,7 +85,7 @@ const ContentViewDetails = ({ match }) => {
             </Button>
           </GridItem>
           <GridItem span={12}>
-            <TabbedView tabs={tabs} />
+            <RoutedTabs tabs={tabs} baseUrl={`/labs/content_views/${cvId}`} defaultTabIndex={1} />
           </GridItem>
         </React.Fragment>
       </DetailsContainer>

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CVPackageGroupFilterContent from './CVPackageGroupFilterContent';
+import CVRpmFilterContent from './CVRpmFilterContent';
+
+const CVFilterDetailType = ({
+  cvId, filterId, inclusion, type,
+}) => {
+  switch (type) {
+    case 'package_group':
+      return <CVPackageGroupFilterContent cvId={cvId} filterId={filterId} />;
+    case 'rpm':
+      return <CVRpmFilterContent filterId={filterId} inclusion={inclusion} />;
+    default:
+      return null;
+  }
+};
+
+CVFilterDetailType.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  inclusion: PropTypes.bool,
+  type: PropTypes.string,
+};
+
+CVFilterDetailType.defaultProps = {
+  cvId: '',
+  filterId: '',
+  type: '',
+  inclusion: false,
+};
+
+export default CVFilterDetailType;

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

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { shallowEqual, useSelector } from 'react-redux';
+import { TableVariant } from '@patternfly/react-table';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+import { STATUS } from 'foremanReact/constants';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import onSelect from '../../../../components/Table/helpers';
+import TableWrapper from '../../../../components/Table/TableWrapper';
+import {
+  selectCVFilterPackageGroups,
+  selectCVFilterPackageGroupStatus,
+  selectCVFilterPackageGroupError,
+} from '../ContentViewDetailSelectors';
+import AddedStatusLabel from '../../../../components/AddedStatusLabel';
+import { getCVFilterPackageGroups } from '../ContentViewDetailActions';
+
+
+const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
+  const response = useSelector(state =>
+    selectCVFilterPackageGroups(state, cvId, filterId), shallowEqual);
+  const status = useSelector(state =>
+    selectCVFilterPackageGroupStatus(state, cvId, filterId), shallowEqual);
+  const error = useSelector(state =>
+    selectCVFilterPackageGroupError(state, cvId, filterId), shallowEqual);
+  const [rows, setRows] = useState([]);
+  const [metadata, setMetadata] = useState({});
+  const [searchQuery, updateSearchQuery] = useState('');
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const loading = status === STATUS.PENDING;
+
+  const columnHeaders = [
+    __('Name'),
+    __('Product'),
+    __('Repository'),
+    __('Description'),
+    __('Status'),
+  ];
+
+  const buildRows = (results) => {
+    const newRows = [];
+    results.forEach((packageGroups) => {
+      const {
+        name,
+        description,
+        repository: {
+          name: repositoryName,
+          product: { name: productName },
+        },
+        filter_ids: filterIds,
+      } = packageGroups;
+      const cells = [
+        { title: name },
+        { title: productName },
+        { title: repositoryName },
+        { title: description },
+        { title: <AddedStatusLabel added={filterIds.includes(parseInt(filterId, 10))} /> },
+      ];
+
+      newRows.push({ cells });
+    });
+
+    return newRows;
+  };
+
+  useEffect(() => {
+    const { results, ...meta } = response;
+    setMetadata(meta);
+
+    if (!loading && results) {
+      const newRows = buildRows(results);
+      setRows(newRows);
+    }
+  }, [JSON.stringify(response)]);
+
+  const emptyContentTitle = __('No package groups have been added to this filter.');
+  const emptyContentBody = __("Add to this filter using the 'Add package group' button.");
+  const emptySearchTitle = __('No matching package groups found.');
+  const emptySearchBody = __('Try changing your search settings.');
+
+  return (
+    <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+      <Tab eventKey={0} title={<TabTitleText>{__('Package groups')}</TabTitleText>}>
+        <div className="tab-body-with-spacing">
+          <TableWrapper
+            {...{
+              rows,
+              metadata,
+              emptyContentTitle,
+              emptyContentBody,
+              emptySearchTitle,
+              emptySearchBody,
+              searchQuery,
+              updateSearchQuery,
+              error,
+              status,
+            }}
+            status={status}
+            onSelect={onSelect(rows, setRows)}
+            cells={columnHeaders}
+            variant={TableVariant.compact}
+            autocompleteEndpoint={`/package_groups/auto_complete_search?filterid=${filterId}`}
+            fetchItems={params => getCVFilterPackageGroups(cvId, filterId, params)}
+          />
+        </div>
+      </Tab>
+    </Tabs>
+  );
+};
+
+CVPackageGroupFilterContent.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+export default CVPackageGroupFilterContent;