katello 4.2.1 → 4.3.0.rc1

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

@@ -27,7 +27,6 @@ import {
   selectCVReposError,
   selectRepoTypes,
   selectRepoTypesStatus,
-  selectCVDetails,
 } from '../ContentViewDetailSelectors';
 import { ADDED, NOT_ADDED, ALL_STATUSES } from '../../ContentViewsConstants';
 import ContentCounts from './ContentCounts';
@@ -36,6 +35,7 @@ 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';
 
@@ -46,24 +46,26 @@ const repoTypeNames = {
   ostree: 'OSTree',
 };
 
-const ContentViewRepositories = ({ cvId }) => {
+const ContentViewRepositories = ({ cvId, details }) => {
   const dispatch = useDispatch();
   const response = useSelector(state => selectCVRepos(state, cvId), shallowEqual);
+  const { results, ...metadata } = response;
   const status = useSelector(state => selectCVReposStatus(state, cvId), shallowEqual);
   const error = useSelector(state => selectCVReposError(state, cvId), shallowEqual);
   const repoTypesResponse = useSelector(state => selectRepoTypes(state), shallowEqual);
   const repoTypesStatus = useSelector(state => selectRepoTypesStatus(state), shallowEqual);
-  const details = useSelector(state => selectCVDetails(state, cvId), shallowEqual);
+  const { permissions } = details;
 
   const [rows, setRows] = useState([]);
-  const [metadata, setMetadata] = useState({});
+  const deselectAll = () => setRows(rows.map(row => ({ ...row, selected: false })));
   const [searchQuery, updateSearchQuery] = useState('');
   const [typeSelected, setTypeSelected] = useState(allRepositories);
   const [statusSelected, setStatusSelected] = useState(ALL_STATUSES);
   // repoTypes object format: [displayed_value]: API_value
   const [repoTypes, setRepoTypes] = useState({});
   const [bulkActionOpen, setBulkActionOpen] = useState(false);
-  const [bulkActionEnabled, setBulkActionEnabled] = useState(false);
+  const hasAddedSelected = rows.some(({ selected, added }) => selected && added);
+  const hasNotAddedSelected = rows.some(({ selected, added }) => selected && !added);
 
   const columnHeaders = [
     { title: __('Type'), transforms: [fitContent] },
@@ -75,7 +77,7 @@ const ContentViewRepositories = ({ cvId }) => {
   ];
   const loading = status === STATUS.PENDING;
 
-  const buildRows = useCallback((results) => {
+  const buildRows = useCallback(() => {
     const newRows = [];
     results.forEach((repo) => {
       const {
@@ -99,29 +101,26 @@ const ContentViewRepositories = ({ cvId }) => {
           title: <AddedStatusLabel added={addedToCV || statusSelected === ADDED} />,
         },
       ];
-      newRows.push({ repoId: id, cells });
+      newRows.push({
+        repoId: id,
+        cells,
+        added: addedToCV || statusSelected === ADDED,
+      });
     });
     return newRows;
-  }, [statusSelected]);
+  }, [statusSelected, results]);
 
   useDeepCompareEffect(() => {
-    const { results, ...meta } = response;
-    setMetadata(meta);
-
     if (!loading && results) {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [response, loading, buildRows]);
+  }, [response, loading, buildRows, results]);
 
   useEffect(() => {
     dispatch(getRepositoryTypes());
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useDeepCompareEffect(() => {
-    const rowsAreSelected = rows.some(row => row.selected);
-    setBulkActionEnabled(rowsAreSelected);
-  }, [rows]);
 
   // Get repo type filter selections dynamically from the API
   useDeepCompareEffect(() => {
@@ -156,33 +155,39 @@ const ContentViewRepositories = ({ cvId }) => {
 
   const addBulk = () => {
     setBulkActionOpen(false);
-    const reposToAdd = [];
-    rows.forEach(row => row.selected && reposToAdd.push(row.repoId));
+    const reposToAdd = rows.filter(({ selected, added }) =>
+      selected && !added).map(({ repoId }) => repoId);
+    deselectAll();
     onAdd(reposToAdd);
   };
 
   const removeBulk = () => {
     setBulkActionOpen(false);
-    const reposToDelete = [];
-    rows.forEach(row => row.selected && reposToDelete.push(row.repoId));
+    const reposToDelete = rows.filter(({ selected, added }) =>
+      selected && added).map(({ repoId }) => repoId);
+    deselectAll();
     onRemove(reposToDelete);
   };
 
-  const actionResolver = (rowData, { _rowIndex }) => {
-    if (rowData.parent || rowData.compoundParent || rowData.noactions) return null;
-    const { repository_ids: repositoryIds } = details;
+  const actionResolver = ({
+    parent,
+    compoundParent,
+    noactions,
+    added,
+  }) => {
+    if (parent || compoundParent || noactions) return null;
     return [
       {
         title: 'Add',
-        isDisabled: repositoryIds && repositoryIds.includes(rowData.repoId),
-        onClick: (_event, rowId, rowInfo) => {
+        isDisabled: added,
+        onClick: (_event, _rowId, rowInfo) => {
           onAdd(rowInfo.repoId);
         },
       },
       {
         title: 'Remove',
-        isDisabled: repositoryIds && !repositoryIds.includes(rowData.repoId),
-        onClick: (_event, rowId, rowInfo) => {
+        isDisabled: !added,
+        onClick: (_event, _rowId, rowInfo) => {
           onRemove(rowInfo.repoId);
         },
       },
@@ -200,13 +205,14 @@ const ContentViewRepositories = ({ cvId }) => {
   const emptyContentBody = __('Please add some repositories.'); // needs link
   const emptySearchTitle = __('No matching repositories found');
   const emptySearchBody = __('Try changing your search settings.');
-  const activeFilters = (typeSelected && typeSelected !== allRepositories) ||
-    (statusSelected && statusSelected !== ALL_STATUSES);
+  const activeFilters = [typeSelected, statusSelected];
+  const defaultFilters = [allRepositories, ALL_STATUSES];
+
   const dropdownItems = [
-    <DropdownItem aria-label="bulk_add" key="bulk_add" isDisabled={!bulkActionEnabled} component="button" onClick={addBulk}>
+    <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={!bulkActionEnabled} component="button" onClick={removeBulk}>
+    <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={removeBulk}>
       {__('Remove')}
     </DropdownItem>,
   ];
@@ -222,63 +228,71 @@ const ContentViewRepositories = ({ cvId }) => {
         emptySearchBody,
         searchQuery,
         updateSearchQuery,
-        actionResolver,
         error,
         status,
         activeFilters,
+        defaultFilters,
       }}
-      onSelect={onSelect(rows, setRows)}
+      actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
+      onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
       cells={columnHeaders}
       variant={TableVariant.compact}
       autocompleteEndpoint="/repositories/auto_complete_search"
       fetchItems={useCallback(params => getCVReposWithOptions(params), [getCVReposWithOptions])}
       additionalListeners={[typeSelected, statusSelected]}
-    >
-      <Split hasGutter>
-        <SplitItem>
-          <SelectableDropdown
-            items={Object.keys(repoTypes)}
-            title="Type"
-            selected={typeSelected}
-            setSelected={setTypeSelected}
-            placeholderText="Type"
-            loading={repoTypesStatus === STATUS.PENDING}
-            error={repoTypesStatus === STATUS.ERROR}
-          />
-        </SplitItem>
-        <SplitItem>
-          <SelectableDropdown
-            items={[ADDED, NOT_ADDED, ALL_STATUSES]}
-            title="Status"
-            selected={statusSelected}
-            setSelected={setStatusSelected}
-            placeholderText="Status"
-          />
-        </SplitItem>
-        <SplitItem>
-          <ActionList>
-            <ActionListItem>
-              <Button onClick={addBulk} isDisabled={!bulkActionEnabled} variant="secondary" aria-label="add_repositories">
-                Add repositories
-              </Button>
-            </ActionListItem>
-            <ActionListItem>
-              <Dropdown
-                toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
-                isOpen={bulkActionOpen}
-                isPlain
-                dropdownItems={dropdownItems}
-              />
-            </ActionListItem>
-          </ActionList>
-        </SplitItem>
-      </Split>
-    </TableWrapper>
+      actionButtons={
+        <Split hasGutter>
+          <SplitItem>
+            <SelectableDropdown
+              items={Object.keys(repoTypes)}
+              title={__('Type')}
+              selected={typeSelected}
+              setSelected={setTypeSelected}
+              placeholderText={__('Type')}
+              loading={repoTypesStatus === STATUS.PENDING}
+              error={repoTypesStatus === STATUS.ERROR}
+            />
+          </SplitItem>
+          <SplitItem>
+            <SelectableDropdown
+              items={[ADDED, NOT_ADDED, ALL_STATUSES]}
+              title={__('Status')}
+              selected={statusSelected}
+              setSelected={setStatusSelected}
+              placeholderText={__('Status')}
+            />
+          </SplitItem>
+          {hasPermission(permissions, 'edit_content_views') &&
+            <SplitItem>
+              <ActionList>
+                <ActionListItem>
+                  <Button onClick={addBulk} isDisabled={!hasNotAddedSelected} variant="secondary" aria-label="add_repositories">
+                    {__('Add repositories')}
+                  </Button>
+                </ActionListItem>
+                <ActionListItem>
+                  <Dropdown
+                    toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+                    isOpen={bulkActionOpen}
+                    isPlain
+                    dropdownItems={dropdownItems}
+                  />
+                </ActionListItem>
+              </ActionList>
+            </SplitItem>
+          }
+        </Split>
+      }
+    />
   );
 };
 
 ContentViewRepositories.propTypes = {
   cvId: PropTypes.number.isRequired,
+  details: PropTypes.shape({
+    repository_ids: PropTypes.arrayOf(PropTypes.number),
+    permissions: PropTypes.shape({}),
+  }).isRequired,
 };
 
 export default ContentViewRepositories;

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

@@ -5,17 +5,16 @@ import nock, { nockInstance, assertNockRequest, mockAutocomplete, mockSetting }
 import api from '../../../../../services/api';
 import CONTENT_VIEWS_KEY from '../../../ContentViewsConstants';
 import ContentViewRepositories from '../ContentViewRepositories';
-
-const repoData = require('./contentViewDetailRepos.fixtures.json');
+import repoData from './contentViewDetailRepos.fixtures.json';
+import cvDetailData from '../../__tests__/contentViewDetails.fixtures.json';
+import cvRepoAddData from './contentViewRepoAdd.fixture.json';
 
 const autocompleteUrl = '/repositories/auto_complete_search';
 const renderOptions = { apiNamespace: `${CONTENT_VIEWS_KEY}_1` };
 const cvAllRepos = api.getApiUrl('/content_views/1/repositories/show_all');
 const repoTypesResponse = [{ name: 'deb' }, { name: 'docker' }, { name: 'file' }, { name: 'ostree' }, { name: 'yum' }];
-const cvDetailData = require('../../__tests__/contentViewDetails.fixtures.json');
 
 const cvDetailsPath = api.getApiUrl('/content_views/1');
-const cvRepoAddData = require('./contentViewRepoAdd.fixture.json');
 
 let firstRepo;
 let searchDelayScope;
@@ -48,7 +47,7 @@ test('Can enable and disable add repositories button', async (done) => {
     .reply(200, repoData);
 
   const { getByText, getByLabelText } = renderWithRedux(
-    <ContentViewRepositories cvId={1} />,
+    <ContentViewRepositories cvId={1} details={cvDetailData} />,
     renderOptions,
   );
 
@@ -65,7 +64,7 @@ test('Can enable and disable add repositories button', async (done) => {
 
 test('Can add repositories', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  const cvAddparams = { repository_ids: [107, 106] };
+  const cvAddparams = { repository_ids: [58, 62, 64, 106] };
 
   const repoAddscope = nockInstance
     .put(cvDetailsPath, cvAddparams)
@@ -82,7 +81,7 @@ test('Can add repositories', async (done) => {
     .reply(200, repoData);
 
   const { getByText, getByLabelText } = renderWithRedux(
-    <ContentViewRepositories cvId={1} />,
+    <ContentViewRepositories cvId={1} details={cvDetailData} />,
     renderOptions,
   );
 
@@ -100,7 +99,7 @@ test('Can add repositories', async (done) => {
 
 test('Can remove repositories', async (done) => {
   const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
-  const cvRemoveParams = { repository_ids: [] };
+  const cvRemoveParams = { repository_ids: [58, 62, 64] };
   const scope = nockInstance
     .get(cvAllRepos)
     .query(true)
@@ -114,7 +113,7 @@ test('Can remove repositories', async (done) => {
     .reply(200, cvRepoAddData);
 
   const { getByText, getByLabelText } = renderWithRedux(
-    <ContentViewRepositories cvId={1} />,
+    <ContentViewRepositories cvId={1} details={cvDetailData} />,
     renderOptions,
   );
 

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

@@ -1,6 +1,6 @@
 {
-  "total": 14,
-  "subtotal": 14,
+  "total": 2,
+  "subtotal": 2,
   "page": 1,
   "per_page": 20,
   "error": null,
@@ -146,7 +146,7 @@
         "ansible_collection": 2
       },
       "last_sync_words": "30 days",
-      "added_to_content_view": true
+      "added_to_content_view": false
     }
   ]
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 import {
   Text,
   TextContent,
@@ -15,28 +16,46 @@ const ContentViewVersionContent = ({ cvId, versionId, cvVersion }) => {
     docker_tag_count: dockerTagCount,
     file_count: fileCount,
     module_stream_count: moduleStreamCount,
+    ansible_collection_count: ansibleCollectionCount,
   } = cvVersion;
 
   return (
     <React.Fragment>
       {(moduleStreamCount > 0 &&
-      <><a href={urlBuilder(`content_views/${cvId}/versions/${versionId}/module_streams`, '')}>{`${moduleStreamCount} Module Streams`}</a><br /></>)
+        <>
+          <Link to={`/versions/${versionId}/moduleStreams`}>
+            {`${moduleStreamCount} Module streams`}
+          </Link><br />
+        </>)
       }
       {(debCount > 0 &&
-      <><a href={urlBuilder(`content_views/${cvId}/versions/${versionId}/deb`, '')}>{`${debCount} Deb Packages`}</a><br /></>)
+        <>
+          <Link to={`/versions/${versionId}/debPackages`}>
+            {`${debCount} Deb packages`}
+          </Link><br />
+        </>)
       }
       {(dockerManifestCount > 0 && dockerTagCount > 0 &&
-      <>
-        <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}/docker`, '')}>{`${dockerTagCount} Docker tags`}</a><br />
-        <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}/docker`, '')}>{`${dockerManifestCount} Docker manifests`}</a><br />
-      </>)
+        <>
+          <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 &&
+        <>
+          <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/files`, '')}>{`${fileCount} Files`}</a><br />
+        </>
       }
-      {(fileCount > 0 &&
-      <><a href={urlBuilder(`content_views/${cvId}/versions/${versionId}/file`, '')}>{`${fileCount} Files`}</a><br /></>)
+      {ansibleCollectionCount > 0 &&
+      <>
+        <a href={urlBuilder(`content_views/${cvId}#/versions/${versionId}/ansibleCollections`, '')}>{`${ansibleCollectionCount} Collections`}</a><br />
+      </>
       }
       {(moduleStreamCount === 0 && debCount === 0 &&
         dockerManifestCount === 0 && dockerTagCount === 0 &&
-        fileCount === 0 &&
+        fileCount === 0 && ansibleCollectionCount === 0 &&
         <TextContent>
           <Text component={TextVariants.small}>{__('N/A')}</Text>
         </TextContent>
@@ -55,6 +74,7 @@ ContentViewVersionContent.propTypes = {
     docker_tag_count: PropTypes.number,
     file_count: PropTypes.number,
     module_stream_count: PropTypes.number,
+    ansible_collection_count: PropTypes.number,
   }),
 };
 
@@ -67,6 +87,7 @@ ContentViewVersionContent.defaultProps = {
     docker_tag_count: 0,
     file_count: 0,
     module_stream_count: 0,
+    ansible_collection_count: 0,
   },
 };
 

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

@@ -15,7 +15,7 @@ const ContentViewVersionEnvironments = ({ environments }) => {
     <React.Fragment key={env.id}>
       <Flex>
         <FlexItem>
-          <Label color="purple" href={`/lifecycle_environments/${env.id}`}>{`${env.name}`}</Label>
+          <Label isTruncated color="purple" href={`/lifecycle_environments/${env.id}`}>{env.name}</Label>
         </FlexItem>
         <FlexItem>
           <InactiveText text={` ${env.publish_date} ago`} /><br />

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

@@ -6,7 +6,9 @@ import {
   EnhancementIcon,
 } from '@patternfly/react-icons';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { translate as __ } from 'foremanReact/common/I18n';
 import './ContentViewVersionErrata.scss';
+import InactiveText from '../../components/InactiveText';
 
 const ContentViewVersionErrata = ({ cvId, versionId, errataCounts }) => {
   const {
@@ -19,22 +21,24 @@ const ContentViewVersionErrata = ({ cvId, versionId, errataCounts }) => {
     enhancement: EnhancementIcon,
   };
 
-  const getHref = type => `/content_views/${cvId}/versions/${versionId}/errata?queryPagedSearch=%20type%20%3D%20${type}`;
-
   const ErrataLinkwithIcon = () => Object.keys(errataIcons).map((type) => {
     const ErrataIcon = errataIcons[type];
     return (
       <React.Fragment key={type}>
         <ErrataIcon title={type} />
-        <a className="errata-icons-with-commas" href={getHref(type)}> {`${errataCounts[type] || '0'}`} </a>
+        <p className="errata-icons-with-commas">{errataCounts[type] || '0'}</p>
       </React.Fragment>
     );
   });
 
+  if (total === 0) {
+    return <InactiveText text={__('No errata')} />;
+  }
+
   return (
     <React.Fragment>
-      <a href={urlBuilder(`content_views/${cvId}/versions/${versionId}/errata`, '')}>{`${total || 0} `}</a>
-      (<ErrataLinkwithIcon />)
+      <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,8 @@
 .errata-icons-with-commas {
   &:not(:last-child):after {
     content: ', ';
-    margin-right: 5px;
+    margin-right: 0.5em;
   }
   display: inline-flex;
-  margin-left: 2px;
+  margin-left: 0.5em;
 }