katello 4.3.0.rc1 → 4.3.0.rc4

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

@@ -1,11 +1,14 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useDispatch, useSelector } from 'react-redux';
+import { Redirect } from 'react-router-dom';
 import { STATUS } from 'foremanReact/constants';
 import PropTypes from 'prop-types';
-import { Form, FormGroup, TextArea, ActionGroup, Button, Modal, ModalVariant, Alert } from '@patternfly/react-core';
+import {
+  Form, FormGroup, TextArea, ActionGroup, Button,
+  Modal, ModalVariant, Alert, TextContent, AlertActionCloseButton,
+} from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
-
 import {
   selectEnvironmentPaths,
   selectEnvironmentPathsStatus,
@@ -20,12 +23,15 @@ import ComponentEnvironments from '../ComponentContentViews/ComponentEnvironment
 import Loading from '../../../../components/Loading';
 
 const ContentViewVersionPromote = ({
-  cvId, versionIdToPromote, versionNameToPromote, versionEnvironments, setIsOpen,
+  cvId, versionIdToPromote, versionNameToPromote,
+  versionEnvironments, setIsOpen, detailsPage,
 }) => {
   const [description, setDescription] = useState('');
   const [userCheckedItems, setUserCheckedItems] = useState([]);
-  const [promoting, setPromoting] = useState(false);
+  const [alertDismissed, setAlertDismissed] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [forcePromote, setForcePromote] = useState([]);
+  const [redirect, setRedirect] = useState(false);
   const environmentPathResponse = useSelector(selectEnvironmentPaths);
   const environmentPathStatus = useSelector(selectEnvironmentPathsStatus);
   const environmentPathLoading = environmentPathStatus === STATUS.PENDING;
@@ -39,7 +45,7 @@ const ContentViewVersionPromote = ({
   const dispatch = useDispatch();
 
   const onPromote = () => {
-    setPromoting(true);
+    setLoading(true);
     dispatch(promoteContentViewVersion({
       id: versionIdToPromote,
       description,
@@ -51,13 +57,18 @@ const ContentViewVersionPromote = ({
 
   useDeepCompareEffect(() => {
     if (promoteResolved && promoteResponse) {
-      setIsOpen(false);
       dispatch(getContentViewVersions(cvId));
+      if (detailsPage) {
+        setRedirect(true);
+      } else {
+        setIsOpen(false);
+      }
     }
     if (promoteError) {
-      setPromoting(false);
+      setLoading(false);
     }
-  }, [promoteResponse, promoteResolved, promoteError, setPromoting, setIsOpen, dispatch, cvId]);
+  }, [promoteResponse, promoteResolved, promoteError, detailsPage,
+    setRedirect, setLoading, setIsOpen, dispatch, cvId]);
 
   const envPathFlat = useMemo(() => {
     if (!environmentPathLoading) {
@@ -88,6 +99,12 @@ const ContentViewVersionPromote = ({
     setForcePromote(userCheckedItems.filter(item => !isValid(item)));
   }, [userCheckedItems, setForcePromote, isValid]);
 
+  const submitDisabled = loading || userCheckedItems.length === 0;
+
+  if (redirect && detailsPage) {
+    return (<Redirect to="/versions" />);
+  }
+
   return (
     <Modal
       title={__(`Promote version ${versionNameToPromote}`)}
@@ -98,10 +115,14 @@ const ContentViewVersionPromote = ({
       }}
       appendTo={document.body}
     >
-      {promoting ? <Loading loadingText={__('Please wait while the task starts..')} /> :
-      <>
-        <Form>
-          <FormGroup label="Description" fieldId="description">
+      {loading ?
+        <Loading loadingText={__('Please wait while the task starts..')} /> :
+        <Form onSubmit={(e) => {
+          e.preventDefault();
+          onPromote();
+        }}
+        >
+          <FormGroup label={__('Description')} fieldId="description">
             <TextArea
               isRequired
               type="text"
@@ -112,28 +133,34 @@ const ContentViewVersionPromote = ({
               onChange={value => setDescription(value)}
             />
           </FormGroup>
-        </Form>
-        <hr />
-        {forcePromote.length > 0 && (
-          <Alert variant="info" isInline title="Force Promotion">
-            <p>{__('Selected environments are out of the environment order. ' +
-              'The recommended practice is to promote to the next environment in the path.')}
-            </p>
-            <ComponentEnvironments environments={forcePromote} />
-          </Alert>)}
-        <EnvironmentPaths
-          userCheckedItems={userCheckedItems}
-          setUserCheckedItems={setUserCheckedItems}
-          promotedEnvironments={versionEnvironments}
-          publishing={false}
-        />
-        <Form>
-          <ActionGroup>
+          {!alertDismissed && forcePromote.length > 0 && (
+            <Alert
+              variant="info"
+              isInline
+              title={__('Force promotion')}
+              actionClose={<AlertActionCloseButton onClose={() => setAlertDismissed(true)} />}
+            >
+              <TextContent>
+                {forcePromote.length > 1 ? __('Selected environments ') : __('Selected environment ')}
+                <ComponentEnvironments environments={forcePromote} />
+                {forcePromote.length > 1 ?
+                  __(' are out of the environment path order. The recommended practice is to promote to the next environment in the path.') :
+                  __(' is out of the environment path order. The recommended practice is to promote to the next environment in the path.')
+                }
+              </TextContent>
+            </Alert>)}
+          <EnvironmentPaths
+            userCheckedItems={userCheckedItems}
+            setUserCheckedItems={setUserCheckedItems}
+            promotedEnvironments={versionEnvironments}
+            publishing={false}
+          />
+          <ActionGroup style={{ margin: 0 }}>
             <Button
               aria-label="promote_content_view"
               variant="primary"
-              isDisabled={promoting}
-              onClick={() => onPromote()}
+              isDisabled={submitDisabled}
+              type="submit"
             >
               {__('Promote')}
             </Button>
@@ -142,7 +169,7 @@ const ContentViewVersionPromote = ({
             </Button>
           </ActionGroup>
         </Form>
-      </>}
+      }
     </Modal>
   );
 };
@@ -153,11 +180,13 @@ ContentViewVersionPromote.propTypes = {
   versionNameToPromote: PropTypes.string.isRequired,
   versionEnvironments: PropTypes.arrayOf(PropTypes.shape({})),
   setIsOpen: PropTypes.func,
+  detailsPage: PropTypes.bool,
 };
 
 ContentViewVersionPromote.defaultProps = {
   versionEnvironments: [],
   setIsOpen: null,
+  detailsPage: false,
 };
 
 export default ContentViewVersionPromote;

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

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { translate as __ } from 'foremanReact/common/I18n';
 import ContentConfig from '../../../Content/ContentConfig';
+import InactiveText from '../../components/InactiveText';
 
 // type: [plural_name, singular_name, link]
 const repoLabels = {
@@ -14,7 +16,6 @@ const repoLabels = {
   docker_manifest_list: ['container manifest lists', 'container manifest list', 'content/docker_manifest_lists'],
   docker_tag: ['container tags', 'container tag', 'content/docker_tags'],
   file: ['files', 'file', 'content/files'],
-  ostree_branch: ['ostree branches', 'ostree branch', 'content/ostree_branches'],
   package_group: ['package groups', 'package group', 'package_groups'],
   srpm: ['source RPMs', 'source RPM', 'source_rpms'], // no link?
 };
@@ -46,11 +47,15 @@ const ContentCounts = ({ productId, repoId, counts }) => {
     if (config) {
       const { pluralLowercase, singularLowercase, pluralLabel } = config.names;
       info = [pluralLowercase, singularLowercase, pluralLabel];
+    } else if (!info) {
+      info = ['unknown units', 'unknown unit', ''];
     }
     // package and rpm are the same
     if (type !== 'package' && count > 0) allCounts.push(appendCount(type, count, info, productId, repoId));
   });
 
+  if (!allCounts.length) return <InactiveText text={__('No content')} />;
+
   return <Fragment>{allCounts}</Fragment>;
 };
 

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

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import { lowerCase, upperFirst } from 'lodash';
 import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import {
   Bullseye,
@@ -34,7 +35,6 @@ import LastSync from './LastSync';
 import RepoIcon from './RepoIcon';
 import AddedStatusLabel from '../../../../components/AddedStatusLabel';
 import SelectableDropdown from '../../../../components/SelectableDropdown';
-import { capitalize } from '../../../../utils/helpers';
 import { hasPermission } from '../../helpers';
 
 const allRepositories = 'All repositories';
@@ -95,7 +95,7 @@ const ContentViewRepositories = ({ cvId, details }) => {
         { title: <Bullseye><RepoIcon type={contentType} /></Bullseye> },
         { title: <a href={urlBuilder(`products/${productId}/repositories`, '', id)}>{name}</a> },
         productName,
-        { title: <LastSync {...{ lastSyncWords, lastSync }} /> },
+        { title: <LastSync {...{ startedAt: lastSync?.started_at, lastSyncWords, lastSync }} /> },
         { title: <ContentCounts {...{ counts, productId }} repoId={id} /> },
         {
           title: <AddedStatusLabel added={addedToCV || statusSelected === ADDED} />,
@@ -129,8 +129,8 @@ const ContentViewRepositories = ({ cvId, details }) => {
       allRepoTypes[allRepositories] = 'all';
       repoTypesResponse.forEach((type) => {
         const { name } = type;
-        const typeFullName = Object.prototype.hasOwnProperty.call(repoTypeNames, name) ?
-          repoTypeNames[name] : capitalize(name);
+        const typeFullName = name in repoTypeNames ?
+          repoTypeNames[name] : upperFirst(lowerCase(name));
         allRepoTypes[`${typeFullName} Repositories`] = name;
       });
       setRepoTypes(allRepoTypes);
@@ -209,9 +209,6 @@ const ContentViewRepositories = ({ cvId, details }) => {
   const defaultFilters = [allRepositories, ALL_STATUSES];
 
   const dropdownItems = [
-    <DropdownItem aria-label="bulk_add" key="bulk_add" isDisabled={!hasNotAddedSelected} component="button" onClick={addBulk}>
-      {__('Add')}
-    </DropdownItem>,
     <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={removeBulk}>
       {__('Remove')}
     </DropdownItem>,
@@ -255,7 +252,7 @@ const ContentViewRepositories = ({ cvId, details }) => {
           </SplitItem>
           <SplitItem>
             <SelectableDropdown
-              items={[ADDED, NOT_ADDED, ALL_STATUSES]}
+              items={[ALL_STATUSES, ADDED, NOT_ADDED]}
               title={__('Status')}
               selected={statusSelected}
               setSelected={setStatusSelected}

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

@@ -1,10 +1,21 @@
 import React, { Fragment } from 'react';
-import { CheckCircleIcon, ExclamationTriangleIcon, ExclamationCircleIcon, InProgressIcon } from '@patternfly/react-icons';
+import {
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  ExclamationCircleIcon,
+  InProgressIcon,
+} from '@patternfly/react-icons';
+import { FormattedDate } from 'react-intl';
+import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+
 import { foremanUrl } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 import InactiveText from '../../components/InactiveText';
 
-const LastSync = ({ lastSyncWords, lastSync, emptyMessage }) => {
+const LastSync = ({
+  lastSyncWords, lastSync, emptyMessage, startedAt,
+}) => {
   if (lastSync && lastSyncWords) {
     let Icon;
     let color = 'black';
@@ -26,16 +37,50 @@ const LastSync = ({ lastSyncWords, lastSync, emptyMessage }) => {
       Icon = Fragment;
     }
 
+    if (startedAt) {
+      return (
+        <Tooltip
+          position={TooltipPosition.top}
+          content={
+            <FormattedDate
+              value={startedAt}
+              day="2-digit"
+              month="long"
+              hour="2-digit"
+              minute="2-digit"
+              year="numeric"
+            />}
+        >
+          <a
+            href={foremanUrl(`/foreman_tasks/tasks/${id}/`)}
+            style={{
+              display: 'inline-flex', alignItems: 'center', margin: 0,
+            }}
+          >
+            <Icon style={{ color, marginRight: '5px' }} />
+            <span>{lastSyncWords}{__(' ago')}</span>
+          </a >
+        </Tooltip >
+      );
+    }
+
     return (
-      <a href={foremanUrl(`/foreman_tasks/tasks/${id}/`)}>
-        <Icon style={{ color }} />&nbsp;{`${lastSyncWords} ago`}
-      </a>
-    );
+      <a
+        href={foremanUrl(`/foreman_tasks/tasks/${id}/`)}
+        style={{
+          display: 'flex', alignItems: 'center',
+        }}
+      >
+        <Icon style={{ color, marginRight: '5px' }} />
+        <span>{lastSyncWords}{__(' ago')}</span>
+      </a >);
   }
+
   return <InactiveText text={emptyMessage} />;
 };
 
 LastSync.propTypes = {
+  startedAt: PropTypes.string,
   lastSyncWords: PropTypes.string,
   lastSync: PropTypes.shape({
     id: PropTypes.string, // API returns string
@@ -45,9 +90,10 @@ LastSync.propTypes = {
 };
 
 LastSync.defaultProps = {
-  lastSyncWords: null,
-  lastSync: null,
-  emptyMessage: 'Not Synced',
+  startedAt: undefined,
+  lastSyncWords: undefined,
+  lastSync: undefined,
+  emptyMessage: 'Not synced',
 };
 
 export default LastSync;

data/webpack/scenes/ContentViews/Details/Repositories/__tests__/contentViewAddRemove.test.js

@@ -38,6 +38,8 @@ afterEach(() => {
   assertNockRequest(autoSearchScope);
 });
 
+jest.mock('react-intl', () => ({ addLocaleData: () => { }, FormattedDate: () => 'mocked' }));
+
 test('Can enable and disable add repositories button', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
 

data/webpack/scenes/ContentViews/Details/Repositories/__tests__/contentViewDetailRepos.fixtures.json

@@ -62,7 +62,6 @@
       },
       "content_label": "Orion_Lagoon_Nebula_Butterfly",
       "content_counts": {
-        "ostree_branch": 0,
         "docker_manifest": 0,
         "docker_manifest_list": 0,
         "docker_tag": 0,
@@ -131,7 +130,6 @@
       },
       "content_label": "Orion_Lagoon_Nebula_Coma",
       "content_counts": {
-        "ostree_branch": 1,
         "docker_manifest": 2,
         "docker_manifest_list": 2,
         "docker_tag": 0,

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersionContent.js

@@ -1,47 +1,68 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import {
-  Text,
-  TextContent,
-  TextVariants,
-} from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import ContentConfig from './../../../Content/ContentConfig';
+import InactiveText from '../../components/InactiveText';
 
 const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
   const {
-    deb_count: debCount,
-    docker_manifest_count: dockerManifestCount,
-    docker_tag_count: dockerTagCount,
-    file_count: fileCount,
-    module_stream_count: moduleStreamCount,
-    ansible_collection_count: ansibleCollectionCount,
+    deb_count: debCount = 0,
+    docker_manifest_count: dockerManifestCount = 0,
+    docker_tag_count: dockerTagCount = 0,
+    file_count: fileCount = 0,
+    module_stream_count: moduleStreamCount = 0,
+    ansible_collection_count: ansibleCollectionCount = 0,
   } = cvVersion;
 
+
+  const genericContentTypes = ContentConfig().filter(({ names: { singularLabel } }) => {
+    // Ansible Collections has a tab in version details so it's handled separately below.
+    if (singularLabel === 'ansible_collection') return false;
+    const countLabel = `${singularLabel}_count`;
+    return !!cvVersion[countLabel];
+  }).map(({ names: { singularLabel, singularLowercase, pluralLowercase } }) => {
+    const countParam = `${singularLabel}_count`;
+    const count = cvVersion[countParam];
+    return {
+      label: count > 1 ? pluralLowercase : singularLowercase,
+      count,
+    };
+  });
+
+  const noCounts =
+    !Number(debCount) && !Number(dockerManifestCount) && !Number(dockerTagCount) &&
+    !Number(fileCount) && !Number(moduleStreamCount) && !Number(ansibleCollectionCount) &&
+    !genericContentTypes?.length;
+
+  if (noCounts) {
+    return <InactiveText text={__('No content')} />;
+  }
+
   return (
-    <React.Fragment>
-      {(moduleStreamCount > 0 &&
+    <>
+      {moduleStreamCount > 0 &&
         <>
           <Link to={`/versions/${versionId}/moduleStreams`}>
             {`${moduleStreamCount} Module streams`}
           </Link><br />
-        </>)
+        </>
       }
-      {(debCount > 0 &&
+      {debCount > 0 &&
         <>
           <Link to={`/versions/${versionId}/debPackages`}>
             {`${debCount} Deb packages`}
           </Link><br />
-        </>)
+        </>
       }
-      {(dockerManifestCount > 0 && dockerTagCount > 0 &&
+      {dockerManifestCount > 0 && dockerTagCount > 0 &&
         <>
           <Link to={`/versions/${versionId}/dockerTags`}>
             {`${dockerTagCount} Docker tags`}
           </Link><br />
           <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/dockerTags`, '')}>{`${dockerManifestCount} Container manifests`}</a><br />
-        </>)
+        </>
       }
       {fileCount > 0 &&
         <>
@@ -49,19 +70,17 @@ const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
         </>
       }
       {ansibleCollectionCount > 0 &&
-      <>
-        <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/ansibleCollections`, '')}>{`${ansibleCollectionCount} Collections`}</a><br />
-      </>
+        <>
+          <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/ansibleCollections`, '')}>{`${ansibleCollectionCount} Collections`}</a><br />
+        </>
       }
-      {(moduleStreamCount === 0 && debCount === 0 &&
-        dockerManifestCount === 0 && dockerTagCount === 0 &&
-        fileCount === 0 && ansibleCollectionCount === 0 &&
-        <TextContent>
-          <Text component={TextVariants.small}>{__('N/A')}</Text>
-        </TextContent>
-      )
+      {genericContentTypes?.length > 0 &&
+        genericContentTypes.map(({ label, count }) => (
+          <span key={label} style={{ whiteSpace: 'pre-line' }}>
+            {`${count} ${label}`}
+          </span>))
       }
-    </React.Fragment>
+    </>
   );
 };
 

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersionEnvironments.js

@@ -13,12 +13,12 @@ const ContentViewVersionEnvironments = ({ environments }) => {
 
   return environments.map(env => (
     <React.Fragment key={env.id}>
-      <Flex>
+      <Flex style={{ margin: '4px 0' }} >
         <FlexItem>
           <Label isTruncated color="purple" href={`/lifecycle_environments/${env.id}`}>{env.name}</Label>
         </FlexItem>
         <FlexItem>
-          <InactiveText text={` ${env.publish_date} ago`} /><br />
+          <InactiveText text={` ${env.publish_date} ago`} />
         </FlexItem>
       </Flex>
     </React.Fragment>));

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersionErrata.js

@@ -15,6 +15,10 @@ const ContentViewVersionErrata = ({ cvId, versionId, errataCounts }) => {
     total,
   } = errataCounts;
 
+  if (!Number(total)) {
+    return <InactiveText text={__('No applicable errata')} />;
+  }
+
   const errataIcons = {
     security: SecurityIcon,
     bugfix: BugIcon,
@@ -31,15 +35,13 @@ const ContentViewVersionErrata = ({ cvId, versionId, errataCounts }) => {
     );
   });
 
-  if (total === 0) {
-    return <InactiveText text={__('No errata')} />;
-  }
-
   return (
-    <React.Fragment>
-      <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/errata`, '')}>{`${total || 0} `}</a>
+    <>
+      <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/errata`, '')}>
+        {total || 0}{' '}
+      </a>
       ( <ErrataLinkwithIcon /> )
-    </React.Fragment>
+    </>
   );
 };
 

data/webpack/scenes/ContentViews/Details/Versions/ContentViewVersionErrata.scss

@@ -1,8 +1,11 @@
 .errata-icons-with-commas {
+  margin: 0;
+
   &:not(:last-child):after {
     content: ', ';
-    margin-right: 0.5em;
+    margin-right: 4px;
   }
+
   display: inline-flex;
-  margin-left: 0.5em;
+  margin-left: 4px;
 }