katello 4.2.2 → 4.3.0.rc1

data/webpack/scenes/ContentViews/expansions/RelatedCompositeContentViewsModal.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import { Modal, ModalVariant, Button, Flex, FlexItem } from '@patternfly/react-core';
+import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { EnterpriseIcon } from '@patternfly/react-icons';
+import { urlBuilder } from '../../../__mocks__/foremanReact/common/urlHelpers';
+
+/* eslint-disable react/no-array-index-key */
+const RelatedCompositeContentViewsModal = ({
+  cvName, cvId, relatedCVCount, relatedCompositeCVs,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const description = () => (
+    <Flex flex={{ default: 'inlineFlex' }}>
+      <FlexItem>
+        <EnterpriseIcon />
+        <b>{` ${cvName}`}</b>
+        {__(' content view is used in listed composite content views.')}
+      </FlexItem>
+    </Flex>
+  );
+
+  const handleModalToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const columns = ['Name'];
+  return (
+    <>
+      <Button aria-label={`button_${cvId}`} variant="link" isInline onClick={handleModalToggle}>
+        {relatedCVCount}
+      </Button>
+      <Modal
+        title={__('Related composite content views')}
+        variant={ModalVariant.large}
+        isOpen={isOpen}
+        description={description()}
+        onClose={() => {
+          setIsOpen(false);
+        }}
+        appendTo={document.body}
+      >
+        <TableComposable
+          aria-label={`${cvId}_table`}
+          variant="compact"
+        >
+          <Thead>
+            <Tr>
+              {columns.map((column, columnIndex) => (
+                <Th key={columnIndex}>{column}</Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {relatedCompositeCVs.map(cv => (
+              <Tr key={cv.id}>
+                <Td key={`${cv.id}_${cv.name}`} dataLabel={columns[cv.id]}>
+                  <Link to={`${urlBuilder('content_views', '')}${cv.id}`}>{cv.name}</Link>
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </TableComposable>
+      </Modal>
+    </>
+  );
+};
+
+export default RelatedCompositeContentViewsModal;
+
+RelatedCompositeContentViewsModal.propTypes = {
+  cvName: PropTypes.string.isRequired,
+  cvId: PropTypes.number.isRequired,
+  relatedCVCount: PropTypes.number.isRequired,
+  relatedCompositeCVs: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+};

data/webpack/scenes/ContentViews/expansions/RelatedContentViewComponentsModal.js

@@ -0,0 +1,107 @@
+import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import PropTypes from 'prop-types';
+import { Grid, GridItem, Modal, ModalVariant, Button, Flex, FlexItem } from '@patternfly/react-core';
+import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { RegistryIcon } from '@patternfly/react-icons';
+import TableWrapper from '../../../components/Table/TableWrapper';
+import { getContentViewComponents } from '../Details/ContentViewDetailActions';
+import {
+  selectCVComponents,
+  selectCVComponentsError,
+  selectCVComponentsStatus,
+} from '../Details/ContentViewDetailSelectors';
+
+const RelatedContentViewsModal = ({ cvName, cvId, relatedCVCount }) => {
+  const response = useSelector(state => selectCVComponents(state, cvId));
+  const status = useSelector(state => selectCVComponentsStatus(state, cvId));
+  const error = useSelector(state => selectCVComponentsError(state, cvId));
+  const { results, ...metadata } = response;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, updateSearchQuery] = useState('');
+
+  const description = () => (
+    <Flex flex={{ default: 'inlineFlex' }}>
+      <FlexItem>
+        <RegistryIcon />
+        <b>{` ${cvName}`}</b>
+        {__(' content view is used in listed component content views. For more information, ')}
+        <Link to={urlBuilder(`content_views/${cvId}#/contentviews`, '')}>
+          {__('view content view tabs.')}
+        </Link>
+      </FlexItem>
+    </Flex>
+  );
+
+  const handleModalToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <Button aria-label={`button_${cvId}`} variant="link" isInline onClick={handleModalToggle}>
+        {relatedCVCount}
+      </Button>
+      <Grid className="grid-with-margin">
+        <GridItem span={12}>
+          <Modal
+            title={__('Related component content views')}
+            variant={ModalVariant.medium}
+            isOpen={isOpen}
+            description={description()}
+            onClose={() => {
+                setIsOpen(false);
+              }}
+            appendTo={document.body}
+          >
+
+            <TableWrapper
+              {...{
+              metadata,
+              searchQuery,
+              updateSearchQuery,
+              error,
+              status,
+              }}
+              fetchItems={useCallback(params => getContentViewComponents(cvId, params, 'Added'), [cvId])}
+              variant={TableVariant.compact}
+              autocompleteEndpoint="/content_views/auto_complete_search"
+              emptyContentTitle={__('You currently don\'t have any related content views.')}
+              emptySearchTitle={__('No matching content views found')}
+              emptyContentBody={__('Related content views will appear here when created.')}
+              emptySearchBody={__('Try changing your search settings.')}
+            >
+              <Thead>
+                <Tr>
+                  <Th key="name_col">{__('Name')}</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {results?.map(details => (
+                  <Tr key={`${details.content_view.id}`}>
+                    <Td>
+                      <Link to={urlBuilder(`content_views/${details.content_view.id}`, '')}>{details.content_view.name}</Link>
+                    </Td>
+                  </Tr>
+                ))
+                }
+              </Tbody>
+            </TableWrapper>
+          </Modal>
+        </GridItem>
+      </Grid>
+    </>
+  );
+};
+
+export default RelatedContentViewsModal;
+
+RelatedContentViewsModal.propTypes = {
+  cvName: PropTypes.string.isRequired,
+  cvId: PropTypes.number.isRequired,
+  relatedCVCount: PropTypes.number.isRequired,
+};

data/webpack/scenes/ContentViews/expansions/__tests__/contentViewComponentsModal.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+
+import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
+import api from '../../../../services/api';
+
+import RelatedContentViewComponentsModal from '../RelatedContentViewComponentsModal';
+import RelatedCompositeContentViewsModal from '../RelatedCompositeContentViewsModal';
+
+import contentViewComponentsResponse from './contentViewComponentsResponse.fixtures.json';
+
+jest.mock('../../../../components/Search', () => () => 'Mocked!');
+
+test('Can call API and show Related Content Views Components Modal', async (done) => {
+  const cvId = 5;
+  const relatedCvCount = 2;
+  const cvName = 'italiano';
+  const contentViewComponentsPath = api.getApiUrl(`/content_views/${cvId}/content_view_components/show_all`);
+
+  const scope = nockInstance
+    .get(contentViewComponentsPath)
+    .query(true)
+    .reply(200, contentViewComponentsResponse);
+
+  const { getByText, getByLabelText } = renderWithRedux(<RelatedContentViewComponentsModal
+    cvId={cvId}
+    cvName={cvName}
+    relatedCVCount={relatedCvCount}
+  />);
+
+  await patientlyWaitFor(() => expect(getByLabelText(`button_${cvId}`)).toBeInTheDocument());
+  fireEvent.click(getByLabelText(`button_${cvId}`));
+  await patientlyWaitFor(() => expect(getByText('Related component content views')).toBeInTheDocument());
+
+  assertNockRequest(scope, done);
+});
+
+test('Can call API and show Related Composite Content Views Modal', async () => {
+  const relatedCompositeCVs = [
+    {
+      id: 5,
+      name: 'italiano',
+    },
+  ];
+
+  const cvId = 3;
+  const relatedCvCount = 1;
+  const cvName = 'ravioli';
+
+  const { getByText, getByLabelText } = renderWithRedux(<RelatedCompositeContentViewsModal
+    cvId={cvId}
+    cvName={cvName}
+    relatedCVCount={relatedCvCount}
+    relatedCompositeCVs={relatedCompositeCVs}
+  />);
+  await patientlyWaitFor(() => expect(getByLabelText(`button_${cvId}`)).toBeInTheDocument());
+  fireEvent.click(getByLabelText(`button_${cvId}`));
+  await patientlyWaitFor(() => expect(getByText('Related composite content views')).toBeInTheDocument());
+});

data/webpack/scenes/ContentViews/expansions/__tests__/contentViewComponentsResponse.fixtures.json

@@ -0,0 +1,116 @@
+{
+  "total": 6,
+  "subtotal": 6,
+  "page": "1",
+  "per_page": "20",
+  "error": null,
+  "search": null,
+  "sort": {
+    "by": null,
+    "order": null
+  },
+  "results": [
+    {
+      "latest": false,
+      "id": 1,
+      "created_at": "2021-10-08 11:19:57 -0400",
+      "updated_at": "2021-10-08 11:19:57 -0400",
+      "composite_content_view": {
+        "id": 5,
+        "name": "italiano",
+        "label": "italiano",
+        "description": "many pasta",
+        "next_version": 3,
+        "latest_version": "2.0",
+        "version_count": 2
+      },
+      "content_view": {
+        "id": 3,
+        "name": "ravioli",
+        "label": "ravioli",
+        "description": null,
+        "next_version": 2,
+        "latest_version": "1.0",
+        "version_count": 1
+      },
+      "content_view_version": {
+        "id": 3,
+        "name": "ravioli 1.0",
+        "content_view_id": 3,
+        "version": "1.0",
+        "content_view": {
+          "id": 3,
+          "name": "ravioli",
+          "label": "ravioli",
+          "description": null
+        },
+        "environments": [
+          {
+            "id": 1,
+            "name": "Library",
+            "label": "Library"
+          }
+        ],
+        "repositories": [
+          {
+            "id": 13,
+            "name": "yum 1",
+            "label": "yum_1",
+            "description": null
+          }
+        ]
+      }
+    },
+    {
+      "latest": false,
+      "id": 2,
+      "created_at": "2021-10-08 11:20:04 -0400",
+      "updated_at": "2021-10-08 11:20:04 -0400",
+      "composite_content_view": {
+        "id": 5,
+        "name": "italiano",
+        "label": "italiano",
+        "description": "many pasta",
+        "next_version": 3,
+        "latest_version": "2.0",
+        "version_count": 2
+      },
+      "content_view": {
+        "id": 4,
+        "name": "tortellini",
+        "label": "tortellini",
+        "description": "tortellini",
+        "next_version": 2,
+        "latest_version": "1.0",
+        "version_count": 1
+      },
+      "content_view_version": {
+        "id": 4,
+        "name": "tortellini 1.0",
+        "content_view_id": 4,
+        "version": "1.0",
+        "content_view": {
+          "id": 4,
+          "name": "tortellini",
+          "label": "tortellini",
+          "description": "tortellini"
+        },
+        "environments": [
+          {
+            "id": 1,
+            "name": "Library",
+            "label": "Library"
+          }
+        ],
+        "repositories": [
+          {
+            "id": 15,
+            "name": "python 1",
+            "label": "python_1",
+            "description": null
+          }
+        ]
+      }
+    }
+  ]
+}

data/webpack/scenes/ContentViews/expansions/__tests__/relatedCompositeCvs.fixtures.json

@@ -0,0 +1,4 @@
+{
+  "id": 5,
+  "name": "italiano"
+}

data/webpack/scenes/ContentViews/helpers.js

@@ -11,3 +11,4 @@ export const autoPublishHelpText = __('Automatically publish a new version of th
 export const importOnlyHelpText = __('Designate whether this content view is for importing from an upstream server. ' +
   'Import-only content views cannot be published directly.');
 
+export const hasPermission = (permissions, perm) => permissions && permissions[perm];

data/webpack/scenes/RedHatRepositories/components/RepositorySetRepository/RepositorySetRepository.js

@@ -106,7 +106,7 @@ class RepositorySetRepository extends Component {
         actions={
           <Spinner loading={this.props.loading} inline>
             <OverlayTrigger
-              overlay={<Tooltip id="enable">Enable</Tooltip>}
+              overlay={<Tooltip id="enable">{__('Enable')}</Tooltip>}
               placement="bottom"
               trigger={['hover', 'focus']}
               rootClose={false}

data/webpack/scenes/RedHatRepositories/components/SearchBar.js

@@ -6,8 +6,10 @@ import PropTypes from 'prop-types';
 import { Form, FormGroup } from 'react-bootstrap';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import { selectOrganizationProducts } from '../../../redux/OrganizationProducts/OrganizationProductsSelectors';
-import { loadOrganizationProducts } from '../../../redux/OrganizationProducts/OrganizationProductsActions';
+import { selectOrganizationProducts }
+  from '../../../redux/OrganizationProducts/OrganizationProductsSelectors';
+import { loadOrganizationProducts }
+  from '../../../redux/OrganizationProducts/OrganizationProductsActions';
 
 import { loadEnabledRepos } from '../../../redux/actions/RedHatRepositories/enabled';
 import { loadRepositorySets } from '../../../redux/actions/RedHatRepositories/sets';
@@ -20,7 +22,6 @@ const filterOptions = [
   { value: 'sourceRpm', label: __('Source RPM') },
   { value: 'debugRpm', label: __('Debug RPM') },
   { value: 'kickstart', label: __('Kickstart') },
-  { value: 'ostree', label: __('OSTree') },
   { value: 'beta', label: __('Beta') },
   { value: 'other', label: __('Other') },
 ];

data/webpack/scenes/SmartProxy/SmartProxyContentTable.js

@@ -78,7 +78,7 @@ const SmartProxyContentTable = ({ smartProxyId }) => {
                 },
               },
               {
-                title: <a href={urlBuilder('content_views', '', id)}>{cvName}</a>,
+                title: <a href={cv.default ? urlBuilder('products', '') : urlBuilder('content_views', '', id)}>{cvName}</a>,
                 props: {
                   colSpan: 1,
                 },

data/webpack/scenes/Subscriptions/SubscriptionsPage.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import Immutable from 'seamless-immutable';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -217,6 +218,21 @@ class SubscriptionsPage extends Component {
       },
     };
 
+    const SCAAlert = simpleContentAccess ? (
+      <Alert type="info">
+        <FormattedMessage
+          id="sca-alert"
+          values={{
+            subscriptionWatch: <a href={SUBSCRIPTION_WATCH_URL} target="_blank" rel="noreferrer">{__('Subscription Watch')}</a>,
+            br: <br />,
+          }}
+          defaultMessage={__(`This organization has Simple Content Access enabled.
+          Hosts are not required to have subscriptions attached to access repositories.
+          {br}
+          Learn more about your overall subscription usage at {subscriptionWatch}.`)}
+        />
+      </Alert>
+    ) : null;
     return (
       <Grid bsClass="container-fluid">
         <Row>
@@ -255,15 +271,7 @@ class SubscriptionsPage extends Component {
             />
 
             <div id="subscriptions-table" className="modal-container">
-              {simpleContentAccess && (
-                <Alert type="info">
-                  This organization has Simple Content Access enabled.
-                  Hosts are not required to have subscriptions attached to access repositories.
-                  <br />
-                  Learn more about your overall subscription usage at
-                  {' '}<a href={SUBSCRIPTION_WATCH_URL} target="_blank" rel="noreferrer">Subscription Watch</a>.
-                </Alert>
-              )}
+              {SCAAlert}
               <SubscriptionsTable
                 canManageSubscriptionAllocations={canManageSubscriptionAllocations}
                 loadSubscriptions={this.props.loadSubscriptions}

data/webpack/scenes/Subscriptions/components/SubscriptionsTable/__tests__/__snapshots__/SubscriptionsTable.test.js.snap

@@ -3,7 +3,7 @@
 exports[`subscriptions table should disable checkboxes for custom subscriptions 1`] = `
 <div>
   <table
-    class="table table-striped table-bordered table-hover pf-table-inline-edit table-fixed"
+    class="table table-striped table-bordered table-hover pf-table-inline-edit table-fixed neat-table-cells"
   >
     <thead>
       <tr
@@ -212,7 +212,7 @@ exports[`subscriptions table should render a loading state 1`] = `
 exports[`subscriptions table should render a table 1`] = `
 <div>
   <table
-    class="table table-striped table-bordered table-hover pf-table-inline-edit table-fixed"
+    class="table table-striped table-bordered table-hover pf-table-inline-edit table-fixed neat-table-cells"
   >
     <thead>
       <tr
@@ -318,7 +318,7 @@ exports[`subscriptions table should render an empty state 1`] = `
 exports[`subscriptions table should render subscription name without hyperlink for grouped subscriptions 1`] = `
 <div>
   <table
-    class="table table-striped table-bordered table-hover pf-table-inline-edit table-fixed"
+    class="table table-striped table-bordered table-hover pf-table-inline-edit table-fixed neat-table-cells"
   >
     <thead>
       <tr

data/webpack/test-utils/nockWrapper.js

@@ -1,5 +1,5 @@
 import nock from 'nock';
-import api from '../services/api';
+import api, { foremanApi } from '../services/api';
 
 // Using the library 'nock' as it matches actual network requests rather than mock another
 // library. This is helpful when the request is not coming from Katello. For example, axios
@@ -14,7 +14,11 @@ export const nockInstance = nock('http://localhost');
 // polls until the nock scope is met. If the `done` callback from jest is passed in, it will
 // call it once the request is made, telling jest the test is done. This is to make sure all
 // nock expectations are met and cleared before moving on to the next test.
-export const assertNockRequest = (nockScope, jestDone, tries = 10) => {
+// Test checks every `interval` milliseconds if the nock scope was met.
+// The number of tries dictates the number of attempts assert will make before failing.
+// `tries * interval` is the maximum time that every nock scope will wait before failing if not met.
+export const assertNockRequest = (nockScope, jestDone, tries = 600) => {
+  // 500ms interval * 600 tries = 5 min timeout
   const interval = 500;
   let i = 0;
   const poll = setInterval(() => {
@@ -43,8 +47,21 @@ export const mockAutocomplete = (
   .query(query) // can pass in function, see nock docs
   .reply(200, response);
 
-export const mockSetting = (instance, name, value) => instance
+export const mockForemanAutocomplete = (
+  instance,
+  autoCompUrl,
+  query = true,
+  response = [],
+  times = 1,
+) => instance
+  .get(foremanApi.getApiUrl(autoCompUrl))
+  .times(times)
+  .query(query) // can pass in function, see nock docs
+  .reply(200, response);
+
+export const mockSetting = (instance, name, value, times = 1) => instance
   .get(`/api/v2/settings/${name}`)
+  .times(times)
   .query(true) // can pass in function, see nock docs
   .reply(200, { name, value });
 

data/webpack/utils/helpers.js

@@ -1,8 +1,8 @@
 import { addToast } from 'foremanReact/redux/actions/toasts';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { head } from 'lodash';
 import { SUBSCRIPTIONS_QUANTITIES_FAILURE } from '../scenes/Subscriptions/SubscriptionConstants';
 
-
 const getSubscriptionsErrorMessage = (message) => {
   const errorMessageHash = {
     '404 Not Found': __('The subscription cannot be found upstream'),
@@ -11,6 +11,15 @@ const getSubscriptionsErrorMessage = (message) => {
   return errorMessageHash[message];
 };
 
+
+export const getBookmarkErrorMsgs = ({ data: { error } } = {}) => {
+  if (error) {
+    const { full_messages: fullMessages } = error;
+    return head(fullMessages);
+  }
+  return '';
+};
+
 const getCustomMessage = (actionType, message) => {
   let customMessage;
   switch (actionType) {
@@ -100,7 +109,12 @@ export const capitalize = s => s && s[0].toUpperCase() + s.slice(1);
 
 export const truncate = (str, truncateLimit = 50) => (str.length > truncateLimit ? `${str.substring(0, truncateLimit - 3)}...` : str);
 
-export const repoType = type => (['rpm', 'modulemd', 'erratum', 'package_group'].includes(type) ? 'yum' : type);
+export const pluralize = (quantity, singular, plural = `${singular}s`) => {
+  if (quantity === 1) return `${quantity} ${singular}`;
+  return `${quantity} ${plural}`;
+};
+
+export const repoType = type => (['rpm', 'modulemd', 'erratum', 'erratum_date', 'erratum_id', 'package_group'].includes(type) ? 'yum' : type);
 
 export default {
   getResponseErrorMsgs,

data/webpack/utils/useDebounce.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export default (value, delay = 500) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    // If the value is undefined or "" we want any logic to update immediately
+    // as we wouldn't be waiting on the user to finish typing any longer.
+    if (!value) {
+      setDebouncedValue(value);
+      return () => undefined;
+    }
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};