katello 4.0.3 → 4.1.0.rc1

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

@@ -0,0 +1,115 @@
+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 {
+  selectCVFilterRules,
+  selectCVFilterRulesStatus,
+} from '../ContentViewDetailSelectors';
+import { getCVFilterRules } from '../ContentViewDetailActions';
+
+const CVRpmFilterContent = ({ filterId, inclusion }) => {
+  const response = useSelector(state => selectCVFilterRules(state, filterId), shallowEqual);
+  const status = useSelector(state => selectCVFilterRulesStatus(state, 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 = [
+    __('RPM name'),
+    __('Architecture'),
+    __('Versions'),
+  ];
+
+  const versionText = (rule) => {
+    const { version, min_version: minVersion, max_version: maxVersion } = rule;
+
+    if (rule.version) return `Version ${version}`;
+    if (rule.min_version && !rule.max_version) return `Greater than version ${minVersion}`;
+    if (!rule.min_version && rule.max_version) return `Less than version ${maxVersion}`;
+    if (rule.min_version && rule.max_version) {
+      return `Between versions ${rule.min_version} and ${rule.max_version}`;
+    }
+    return 'All versions';
+  };
+
+  const buildRows = (results) => {
+    const newRows = [];
+    results.forEach((rule) => {
+      const { name, architecture } = rule;
+      const cells = [
+        { title: name },
+        { title: architecture || 'All architectures' },
+        { title: versionText(rule) },
+      ];
+
+      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 rules have been added to this filter.');
+  const emptyContentBody = __("Add to this filter using the 'Add RPM' button.");
+  const emptySearchTitle = __('No matching rules found.');
+  const emptySearchBody = __('Try changing your search settings.');
+  const tabTitle = (inclusion ? __('Included') : __('Excluded')) + __(' RPMs');
+
+  return (
+    <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+      <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
+        <div className="tab-body-with-spacing">
+          <TableWrapper
+            {...{
+              rows,
+              metadata,
+              emptyContentTitle,
+              emptyContentBody,
+              emptySearchTitle,
+              emptySearchBody,
+              searchQuery,
+              updateSearchQuery,
+              status,
+            }}
+            status={status}
+            onSelect={onSelect(rows, setRows)}
+            cells={columnHeaders}
+            variant={TableVariant.compact}
+            autocompleteEndpoint={`/content_view_filters/${filterId}/rules/auto_complete_search`}
+            fetchItems={params => getCVFilterRules(filterId, params)}
+          />
+        </div>
+      </Tab>
+    </Tabs>
+  );
+};
+
+CVRpmFilterContent.propTypes = {
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  inclusion: PropTypes.bool,
+};
+
+CVRpmFilterContent.defaultProps = {
+  filterId: '',
+  inclusion: false,
+};
+export default CVRpmFilterContent;

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 import RepoIcon from '../Repositories/RepoIcon';
-import { capitalize } from '../../../../utils/helpers';
+import { capitalize, repoType } from '../../../../utils/helpers';
 
 const typeName = (type, errataByDate) => {
   if (errataByDate) return 'Errata - by date range';
@@ -18,15 +18,12 @@ const typeName = (type, errataByDate) => {
   return capitalize(type.replace('_', ' '));
 };
 
-const ContentType = ({ type, errataByDate }) => {
-  const repoType = ['rpm', 'modulemd', 'rpm', 'erratum', 'package_group'].includes(type) ? 'yum' : type;
-  return (
-    <Fragment>
-      <span style={{ marginRight: '5px' }}><RepoIcon type={repoType} /></span>
-      {typeName(type, errataByDate)}
-    </Fragment>
-  );
-};
+const ContentType = ({ type, errataByDate }) => (
+  <Fragment>
+    <span style={{ marginRight: '5px' }}><RepoIcon type={repoType(type)} /></span>
+    {typeName(type, errataByDate)}
+  </Fragment>
+);
 
 ContentType.propTypes = {
   type: PropTypes.string.isRequired,

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

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { shallowEqual, useSelector, useDispatch } from 'react-redux';
+import { STATUS } from 'foremanReact/constants';
+import { Grid, GridItem } from '@patternfly/react-core';
+
+import {
+  selectCVFilterDetails,
+  selectCVFilterDetailStatus,
+} from '../ContentViewDetailSelectors';
+import { getCVFilterDetails } from '../ContentViewDetailActions';
+import useUrlParamsWithHash from '../../../../utils/useUrlParams';
+import ContentViewFilterDetailsHeader from './ContentViewFilterDetailsHeader';
+import CVFilterDetailType from './CVFilterDetailType';
+
+const ContentViewFilterDetails = () => {
+  const { id: cvId } = useParams();
+  const { params: { subContentId: filterId } } = useUrlParamsWithHash();
+  const dispatch = useDispatch();
+  const [details, setDetails] = useState({});
+  const response = useSelector(state => selectCVFilterDetails(state, cvId, filterId), shallowEqual);
+  const status = useSelector(state =>
+    selectCVFilterDetailStatus(state, cvId, filterId), shallowEqual);
+  const loaded = status === STATUS.RESOLVED;
+
+  useEffect(() => {
+    dispatch(getCVFilterDetails(cvId, filterId));
+  }, []);
+
+  useEffect(() => {
+    if (loaded) setDetails(response);
+  }, [JSON.stringify(response), loaded]);
+
+  const { type, inclusion } = details;
+
+  return (
+    <Grid hasGutter>
+      { loaded && (Object.keys(details).length > 0) ?
+        <ContentViewFilterDetailsHeader details={details} /> :
+        <div>Loading...</div>
+      }
+      <GridItem span={12}>
+        <CVFilterDetailType cvId={cvId} filterId={filterId} inclusion={inclusion} type={type} />
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default ContentViewFilterDetails;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Split, SplitItem, GridItem, TextContent, Text, TextVariants, Label } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import RepoIcon from '../Repositories/RepoIcon';
+import { repoType, capitalize } from '../../../../utils/helpers';
+
+const ContentViewFilterDetailsHeader = ({ details }) => {
+  const {
+    type, name, inclusion, description,
+  } = details;
+  const repositoryType = repoType(type);
+  const displayedType = type ? capitalize(type.replace(/_/g, ' ')) : '';
+
+  return (
+    <>
+      <GridItem span={12}>
+        <TextContent>
+          <Text component={TextVariants.h2}>{name}</Text>
+        </TextContent>
+      </GridItem>
+      <GridItem span={10}>
+        <Split hasGutter>
+          <SplitItem>
+            <Label color="blue">{inclusion ? __('Include') : __('Exclude') }</Label>
+          </SplitItem>
+          <SplitItem>
+            <RepoIcon type={repositoryType} />
+          </SplitItem>
+          <SplitItem>
+            <Text component={TextVariants.p}>
+              {displayedType}
+            </Text>
+          </SplitItem>
+        </Split>
+      </GridItem>
+      <GridItem span={12}>
+        <TextContent>
+          <Text component={TextVariants.p}>{description}</Text>
+        </TextContent>
+      </GridItem>
+    </>
+  );
+};
+
+ContentViewFilterDetailsHeader.propTypes = {
+  details: PropTypes.shape({
+    name: PropTypes.string,
+    type: PropTypes.string,
+    inclusion: PropTypes.bool,
+    description: PropTypes.string,
+  }).isRequired,
+};
+
+export default ContentViewFilterDetailsHeader;

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

@@ -5,6 +5,7 @@ import { TableVariant } from '@patternfly/react-table';
 import { STATUS } from 'foremanReact/constants';
 import LongDateTime from 'foremanReact/components/common/dates/LongDateTime';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import TableWrapper from '../../../../components/Table/TableWrapper';
@@ -18,22 +19,7 @@ import {
 import { truncate } from '../../../../utils/helpers';
 import ContentType from './ContentType';
 
-// won't be needed when details pages are built, linking to old pages for now
-const cvFilterUrl = (cvId, filterId, type, errataByDate) => {
-  const repoType = type === 'docker' ? 'docker' : 'yum';
-  const filterType = errataByDate ? 'errata_by_date' : type;
-  const base = `/content_views/${cvId}/repositories/${repoType}/filters/${filterId}`;
-  const endings = {
-    rpm: '/package/details',
-    package_group: '/package-group/list',
-    erratum: '/errata/list',
-    errata_by_date: '/errata/date_type',
-    modulemd: '/module-stream/list',
-    docker: '/docker/details',
-  };
-
-  return base + endings[filterType];
-};
+const cvFilterUrl = (cvId, filterId) => `/labs/content_views/${cvId}#filters?subContentId=${filterId}`;
 
 const ContentViewFilters = ({ cvId }) => {
   const response = useSelector(state => selectCVFilters(state, cvId), shallowEqual);
@@ -62,7 +48,7 @@ const ContentViewFilters = ({ cvId }) => {
       if (filter.type === 'erratum' && filter.rules[0].types) errataByDate = true;
 
       const cells = [
-        { title: <a href={cvFilterUrl(cvId, id, type, errataByDate)}>{name}</a> },
+        { title: (type === 'package_group' || type === 'rpm') ? <Link to={cvFilterUrl(cvId, id)}>{name}</Link> : name },
         truncate(description || ''),
         { title: <LongDateTime date={updatedAt} showRelativeTimeTooltip /> },
         { title: <ContentType type={type} errataByDate={errataByDate} /> },

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

@@ -0,0 +1,116 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { Route } from 'react-router-dom';
+
+import ContentViewFilterDetails from '../ContentViewFilterDetails';
+import { cvFilterDetailsKey } from '../../../ContentViewsConstants';
+import nock, {
+  nockInstance,
+  assertNockRequest,
+  mockAutocomplete,
+  mockSetting,
+} from '../../../../../test-utils/nockWrapper';
+import api from '../../../../../services/api';
+
+const cvFilterDetails = require('./cvPackageFilterDetail.fixtures.json');
+const cvPackageFilterRules = require('./cvPackageFilterRules.fixtures.json');
+
+const cvFilterDetailsPath = api.getApiUrl('/content_view_filters/2');
+const cvPackageFilterRulesPath = api.getApiUrl('/content_view_filters/2/rules');
+const autocompleteUrl = '/content_view_filters/2/rules/auto_complete_search';
+const renderOptions = {
+  apiNamespace: cvFilterDetailsKey(1, 2),
+  routerParams: {
+    initialEntries: [{ hash: '#filters?subContentId=2', pathname: '/labs/content_views/1' }],
+    initialIndex: 1,
+  },
+};
+
+const withCVRoute = component => <Route path="/labs/content_views/:id">{component}</Route>;
+
+let searchDelayScope;
+let autoSearchScope;
+beforeEach(() => {
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
+  // Autosearch can cause some asynchronous issues with the typing timeout, using basic search
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', false);
+});
+
+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 cvFilterScope = nockInstance
+    .get(cvFilterDetailsPath)
+    .query(true)
+    .reply(200, cvFilterDetails);
+  const cvPackageFilterRulesScope = nockInstance
+    .get(cvPackageFilterRulesPath)
+    .query(true)
+    .reply(200, cvPackageFilterRules);
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+  const { getByText, queryByText } =
+    renderWithRedux(withCVRoute(<ContentViewFilterDetails cvId={1} />), renderOptions);
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(cvFilterName)).toBeNull();
+  await patientlyWaitFor(() => {
+    expect(getByText(cvFilterName)).toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(cvFilterScope);
+  assertNockRequest(cvPackageFilterRulesScope, done);
+});
+
+test('Can search for package groups in package group filter', async (done) => {
+  const firstPackageRule = cvPackageFilterRules.results[0];
+  const lastPackageRule = cvPackageFilterRules.results[1];
+  const { name: cvFilterName } = cvFilterDetails;
+  const { name: firstPackageRuleName } = firstPackageRule;
+  const { name: lastPackageRuleName } = lastPackageRule;
+  const searchQueryMatcher = actualParams => actualParams?.search?.includes(lastPackageRuleName);
+
+  const cvFilterScope = nockInstance
+    .get(cvFilterDetailsPath)
+    .query(true)
+    .reply(200, cvFilterDetails);
+  const cvPackageFilterRulesScope = nockInstance
+    .get(cvPackageFilterRulesPath)
+    .query(true)
+    .reply(200, cvPackageFilterRules);
+  const packageRuleSearchScope = nockInstance
+    .get(cvPackageFilterRulesPath)
+    .query(searchQueryMatcher)
+    .reply(200, { results: [lastPackageRule] });
+
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const withSearchScope = mockAutocomplete(nockInstance, autocompleteUrl, searchQueryMatcher);
+  const { getByText, queryByText, getByLabelText } =
+    renderWithRedux(withCVRoute(<ContentViewFilterDetails cvId={1} />), renderOptions);
+
+  // Basic results showing
+  await patientlyWaitFor(() => {
+    expect(getByText(cvFilterName)).toBeInTheDocument();
+    expect(getByText(firstPackageRuleName)).toBeInTheDocument();
+  });
+
+  // Search and only searched result shows
+  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: lastPackageRuleName } });
+  getByLabelText(/search button/i).click();
+  await patientlyWaitFor(() => {
+    expect(getByText(lastPackageRuleName)).toBeInTheDocument();
+    expect(queryByText(firstPackageRuleName)).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(cvFilterScope);
+  assertNockRequest(cvPackageFilterRulesScope);
+  assertNockRequest(withSearchScope);
+  assertNockRequest(packageRuleSearchScope, done);
+});

data/webpack/scenes/ContentViews/Details/Filters/__tests__/allFilterPackageGroups.fixtures.json

@@ -0,0 +1,69 @@
+{
+  "total":4,
+  "subtotal":4,
+  "page":"1",
+  "per_page":"20",
+  "error":null,
+  "search":null,
+  "sort":{
+     "by":"name",
+     "order":"asc"
+  },
+  "results":[
+     {
+        "id":4,
+        "name":"walrus",
+        "pulp_id":"/pulp/api/v3/content/rpm/packagegroups/ead4ed04-2569-4c2c-ab70-da5052f7dd33/",
+        "uuid":"/pulp/api/v3/content/rpm/packagegroups/ead4ed04-2569-4c2c-ab70-da5052f7dd33/",
+        "description":"",
+        "repository":{
+           "id":3,
+           "name":"zoo5",
+           "product":{
+              "id":2,
+              "name":"prod2"
+           }
+        },
+        "filter_ids":[
+
+        ]
+     },
+     {
+        "id":2,
+        "name":"birds",
+        "pulp_id":"/pulp/api/v3/content/rpm/packagegroups/f463e64a-feb8-4303-8f49-68cac03403ae/",
+        "uuid":"/pulp/api/v3/content/rpm/packagegroups/f463e64a-feb8-4303-8f49-68cac03403ae/",
+        "description":"",
+        "repository":{
+           "id":1,
+           "name":"zoo3",
+           "product":{
+              "id":1,
+              "name":"prod1"
+           }
+        },
+        "filter_ids":[
+           1,
+           2
+        ]
+     },
+     {
+        "id":1,
+        "name":"mammals",
+        "pulp_id":"/pulp/api/v3/content/rpm/packagegroups/4bb006f1-64e8-498a-9ea9-8224cf56c9a6/",
+        "uuid":"/pulp/api/v3/content/rpm/packagegroups/4bb006f1-64e8-498a-9ea9-8224cf56c9a6/",
+        "description":"",
+        "repository":{
+           "id":1,
+           "name":"zoo3",
+           "product":{
+              "id":1,
+              "name":"prod1"
+           }
+        },
+        "filter_ids":[
+           1
+        ]
+     }
+  ]
+}

data/webpack/scenes/ContentViews/Details/Filters/__tests__/contentViewFilterDetail.fixtures.json

@@ -0,0 +1,103 @@
+{
+  "inclusion":true,
+  "id":1,
+  "name":"Filter 1",
+  "description":null,
+  "created_at":"2021-02-23 10:09:24 -0500",
+  "updated_at":"2021-02-23 10:09:24 -0500",
+  "content_view":{
+     "composite":false,
+     "component_ids":[
+
+     ],
+     "default":false,
+     "version_count":0,
+     "latest_version":null,
+     "auto_publish":false,
+     "solve_dependencies":false,
+     "import_only":false,
+     "repository_ids":[
+        1
+     ],
+     "id":2,
+     "name":"cv1",
+     "label":"cv1",
+     "description":"",
+     "organization_id":1,
+     "organization":{
+        "name":"Default Organization",
+        "label":"Default_Organization",
+        "id":1
+     },
+     "created_at":"2021-02-23 10:08:10 -0500",
+     "updated_at":"2021-02-23 10:08:10 -0500",
+     "environments":[
+
+     ],
+     "repositories":[
+        {
+           "id":1,
+           "name":"zoo3",
+           "label":"zoo3",
+           "content_type":"yum",
+           "product":{
+              "id":1,
+              "name":"prod1"
+           },
+           "content_counts":{
+              "ostree_branch":0,
+              "docker_manifest":0,
+              "docker_tag":0,
+              "rpm":32,
+              "package":32,
+              "package_group":2,
+              "erratum":4,
+              "module_stream":0
+           }
+        }
+     ],
+     "versions":[
+
+     ],
+     "components":[
+
+     ],
+     "content_view_components":[
+
+     ],
+     "activation_keys":[
+
+     ],
+     "next_version":"1.0",
+     "last_published":null,
+     "permissions":{
+        "view_content_views":true,
+        "edit_content_views":true,
+        "destroy_content_views":true,
+        "publish_content_views":true,
+        "promote_or_remove_content_views":true
+     }
+  },
+  "repositories":[
+
+  ],
+  "type":"package_group",
+  "rules":[
+     {
+        "content_view_filter_id":1,
+        "uuid":"/pulp/api/v3/content/rpm/packagegroups/f463e64a-feb8-4303-8f49-68cac03403ae/",
+        "id":1,
+        "name":"birds",
+        "created_at":"2021-02-23 10:09:27 -0500",
+        "updated_at":"2021-02-23 10:09:27 -0500"
+     },
+     {
+        "content_view_filter_id":1,
+        "uuid":"/pulp/api/v3/content/rpm/packagegroups/4bb006f1-64e8-498a-9ea9-8224cf56c9a6/",
+        "id":2,
+        "name":"mammals",
+        "created_at":"2021-02-23 20:57:19 -0500",
+        "updated_at":"2021-02-23 20:57:19 -0500"
+     }
+  ]
+}