katello 4.2.2 → 4.3.0.rc1

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

@@ -1,29 +1,55 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import PropTypes from 'prop-types';
-import { shallowEqual, useSelector } from 'react-redux';
+import { shallowEqual, useSelector, useDispatch } from 'react-redux';
 import { TableVariant } from '@patternfly/react-table';
-import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+import { Tabs, Tab, TabTitleText, Split, SplitItem, Button, Dropdown, DropdownItem, KebabToggle } from '@patternfly/react-core';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
-
+import { ArtifactsWithNoErrataRenderer } from './ArtifactsWithNoErrata';
 import onSelect from '../../../../components/Table/helpers';
 import TableWrapper from '../../../../components/Table/TableWrapper';
 import {
+  selectCVFilterDetails,
   selectCVFilterRules,
   selectCVFilterRulesStatus,
 } from '../ContentViewDetailSelectors';
-import { getCVFilterRules } from '../ContentViewDetailActions';
+import { deleteContentViewFilterRules, getCVFilterRules, removeCVFilterRule } from '../ContentViewDetailActions';
+import CVRpmMatchContentModal from './MatchContentModal/CVRpmMatchContentModal';
+import AddEditPackageRuleModal from './Rules/Package/AddEditPackageRuleModal';
+import AffectedRepositoryTable from './AffectedRepositories/AffectedRepositoryTable';
+import { hasPermission } from '../../helpers';
 
-const CVRpmFilterContent = ({ filterId, inclusion }) => {
+const CVRpmFilterContent = ({
+  cvId, filterId, inclusion, showAffectedRepos, setShowAffectedRepos, details,
+}) => {
   const response = useSelector(state => selectCVFilterRules(state, filterId), shallowEqual);
+  const { results, ...metadata } = response;
   const status = useSelector(state => selectCVFilterRulesStatus(state, filterId), shallowEqual);
+  const loading = status === STATUS.PENDING;
+  const filterDetails = useSelector(state =>
+    selectCVFilterDetails(state, cvId, filterId), shallowEqual);
+  const { repositories = [] } = filterDetails;
+  const dispatch = useDispatch();
 
   const [rows, setRows] = useState([]);
-  const [metadata, setMetadata] = useState({});
   const [searchQuery, updateSearchQuery] = useState('');
   const [activeTabKey, setActiveTabKey] = useState(0);
-  const loading = status === STATUS.PENDING;
+  const [filterRuleId, setFilterRuleId] = useState(undefined);
+  const [bulkActionOpen, setBulkActionOpen] = useState(false);
+  const deselectAll = () => setRows(rows.map(row => ({ ...row, selected: false })));
+  const toggleBulkAction = () => setBulkActionOpen(prevState => !prevState);
+  const hasSelected = rows.some(({ selected }) => selected);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selectedFilterRuleData, setSelectedFilterRuleData] = useState(undefined);
+  const [showMatchContent, setShowMatchContent] = useState(false);
+  const { permissions } = details;
+
+  const onClose = () => {
+    setModalOpen(false);
+    setShowMatchContent(false);
+    setSelectedFilterRuleData(undefined);
+  };
 
   const columnHeaders = [
     __('RPM name'),
@@ -43,38 +69,82 @@ const CVRpmFilterContent = ({ filterId, inclusion }) => {
     return 'All versions';
   };
 
-  const buildRows = useCallback((results) => {
+  const buildRows = useCallback(() => {
     const newRows = [];
     results.forEach((rule) => {
-      const { name, architecture } = rule;
+      const {
+        name, architecture, id, ...rest
+      } = rule;
+
       const cells = [
         { title: name },
         { title: architecture || 'All architectures' },
         { title: versionText(rule) },
       ];
 
-      newRows.push({ cells });
+      newRows.push({
+        cells, id, name, arch: architecture, ...rest,
+      });
     });
 
     return newRows;
-  }, []);
+  }, [results]);
 
   useDeepCompareEffect(() => {
-    const { results, ...meta } = response;
-    setMetadata(meta);
-
     if (!loading && results) {
       const newRows = buildRows(results);
       setRows(newRows);
     }
-  }, [response, loading, buildRows]);
+  }, [response, results, loading, buildRows]);
+
+  useEffect(() => {
+    if (!repositories.length && showAffectedRepos) {
+      setActiveTabKey(1);
+    } else {
+      setActiveTabKey(0);
+    }
+  }, [showAffectedRepos, repositories.length]);
 
   const emptyContentTitle = __('No rules have been added to this filter.');
-  const emptyContentBody = __("Add to this filter using the 'Add RPM' button.");
+  const emptyContentBody = __("Add to this filter using the 'Add RPM rule' button.");
   const emptySearchTitle = __('No matching rules found.');
   const emptySearchBody = __('Try changing your search settings.');
   const tabTitle = (inclusion ? __('Included') : __('Excluded')) + __(' RPMs');
 
+
+  const actionResolver = () => [
+    {
+      title: __('Remove'),
+      onClick: (_event, _rowId, { id }) => {
+        dispatch(removeCVFilterRule(filterId, id, () =>
+          dispatch(getCVFilterRules(filterId))));
+      },
+    },
+    {
+      title: __('Edit'),
+      onClick: (_event, _rowId, ruleDetails) => {
+        setSelectedFilterRuleData(ruleDetails);
+        setModalOpen(true);
+      },
+    },
+    {
+      title: __('View matching content'),
+      onClick: (_event, _rowId, { id }) => {
+        setFilterRuleId(id);
+        setShowMatchContent(true);
+      },
+    },
+  ];
+
+  const bulkRemove = () => {
+    setBulkActionOpen(false);
+    const rpmFilterIds =
+      rows.filter(row => row.selected).map(selected => selected.id);
+    dispatch(deleteContentViewFilterRules(filterId, rpmFilterIds, () =>
+      dispatch(getCVFilterRules(filterId))));
+    deselectAll();
+  };
+
   return (
     <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
       <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
@@ -91,25 +161,80 @@ const CVRpmFilterContent = ({ filterId, inclusion }) => {
               updateSearchQuery,
               status,
             }}
-            status={status}
-            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={`/content_view_filters/${filterId}/rules/auto_complete_search`}
             fetchItems={useCallback(params => getCVFilterRules(filterId, params), [filterId])}
+            actionButtons={
+              <>
+                {showMatchContent &&
+                  <CVRpmMatchContentModal
+                    key={`${filterId}-${filterRuleId}`}
+                    filterRuleId={filterRuleId}
+                    filterId={filterId}
+                    onClose={onClose}
+                  />}
+                {hasPermission(permissions, 'edit_content_views') &&
+                  <Split hasGutter>
+                    <SplitItem>
+                      <Button onClick={() => setModalOpen(true)} variant="secondary" aria-label="create_rpm_rule">
+                        {__('Add RPM rule')}
+                      </Button>
+                    </SplitItem>
+                    <SplitItem>
+                      <Dropdown
+                        toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+                        isOpen={bulkActionOpen}
+                        isPlain
+                        dropdownItems={[
+                          <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasSelected} component="button" onClick={bulkRemove}>
+                            {__('Remove')}
+                          </DropdownItem>]
+                        }
+                      />
+                    </SplitItem>
+                    <SplitItem>
+                      <ArtifactsWithNoErrataRenderer
+                        filterDetails={filterDetails}
+                      />
+                    </SplitItem>
+                  </Split>
+                }
+                {modalOpen &&
+                  <AddEditPackageRuleModal
+                    filterId={filterId}
+                    onClose={onClose}
+                    selectedFilterRuleData={selectedFilterRuleData}
+                  />}
+              </>}
           />
         </div>
       </Tab>
+      {(repositories.length || showAffectedRepos) &&
+        <Tab eventKey={1} title={<TabTitleText>{__('Affected Repositories')}</TabTitleText>}>
+          <div className="tab-body-with-spacing">
+            <AffectedRepositoryTable cvId={cvId} filterId={filterId} repoType="yum" setShowAffectedRepos={setShowAffectedRepos} details={details} />
+          </div>
+        </Tab>}
     </Tabs>
   );
 };
 
 CVRpmFilterContent.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   inclusion: PropTypes.bool,
+  showAffectedRepos: PropTypes.bool.isRequired,
+  setShowAffectedRepos: PropTypes.func.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+  }).isRequired,
 };
 
 CVRpmFilterContent.defaultProps = {
+  cvId: '',
   filterId: '',
   inclusion: false,
 };

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

@@ -12,6 +12,8 @@ const typeName = (type, errataByDate) => {
     docker: __('Container image tag'),
     modulemd: __('Module stream'),
     erratum: __('Errata'),
+    erratum_date: __('Errata - Date and Type'),
+    erratum_id: __('Errata - Id'),
   };
 
   if (Object.prototype.hasOwnProperty.call(nameMap, type)) return nameMap[type];

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

@@ -4,47 +4,78 @@ 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 PropTypes from 'prop-types';
 
 import {
   selectCVFilterDetails,
   selectCVFilterDetailStatus,
 } from '../ContentViewDetailSelectors';
-import { getCVFilterDetails } from '../ContentViewDetailActions';
-import useUrlParamsWithHash from '../../../../utils/useUrlParams';
+import { getCVFilterDetails, getContentViewFilters } from '../ContentViewDetailActions';
 import ContentViewFilterDetailsHeader from './ContentViewFilterDetailsHeader';
 import CVFilterDetailType from './CVFilterDetailType';
+import Loading from '../../../../components/Loading';
 
-const ContentViewFilterDetails = () => {
-  const { id: cvId } = useParams();
-  const { params: { subContentId: filterId } } = useUrlParamsWithHash();
+const ContentViewFilterDetails = ({ cvId, details }) => {
+  const { filterId } = useParams();
   const dispatch = useDispatch();
-  const [details, setDetails] = useState({});
+  const [filterDetails, setFilterDetails] = useState({});
+  const [showAffectedRepos, setShowAffectedRepos] = useState(false);
   const response = useSelector(state => selectCVFilterDetails(state, cvId, filterId), shallowEqual);
   const status = useSelector(state =>
     selectCVFilterDetailStatus(state, cvId, filterId), shallowEqual);
   const loaded = status === STATUS.RESOLVED;
+  const loading = status === STATUS.PENDING;
 
   useEffect(() => {
     dispatch(getCVFilterDetails(cvId, filterId));
+    dispatch(getContentViewFilters(cvId));
   }, [dispatch, cvId, filterId]);
 
   useDeepCompareEffect(() => {
-    if (loaded) setDetails(response);
+    if (loaded) {
+      setFilterDetails(response);
+      const { repositories } = response;
+      if (repositories.length) {
+        setShowAffectedRepos(true);
+      }
+    }
   }, [response, loaded]);
 
-  const { type, inclusion } = details;
-
+  const { type, inclusion, rules } = filterDetails;
+  if (loading) {
+    return <Loading />;
+  }
   return (
     <Grid hasGutter>
-      { loaded && (Object.keys(details).length > 0) ?
-        <ContentViewFilterDetailsHeader details={details} /> :
-        <div>Loading...</div>
+      {loaded && (Object.keys(filterDetails).length > 0) ?
+        <ContentViewFilterDetailsHeader
+          {...{
+ cvId, filterId, filterDetails, setShowAffectedRepos, details,
+}}
+        /> :
+        <Loading />
       }
       <GridItem span={12}>
-        <CVFilterDetailType cvId={cvId} filterId={filterId} inclusion={inclusion} type={type} />
+        <CVFilterDetailType
+          cvId={cvId}
+          filterId={filterId}
+          inclusion={inclusion}
+          type={type}
+          showAffectedRepos={showAffectedRepos}
+          setShowAffectedRepos={setShowAffectedRepos}
+          rules={rules}
+          details={details}
+        />
       </GridItem>
     </Grid>
   );
 };
 
+ContentViewFilterDetails.propTypes = {
+  cvId: PropTypes.number.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+  }).isRequired,
+};
+
 export default ContentViewFilterDetails;

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

@@ -1,56 +1,120 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { capitalize, head } from 'lodash';
 import { Split, SplitItem, GridItem, TextContent, Text, TextVariants, Label } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
-
+import { useDispatch } from 'react-redux';
+import { getCVFilterDetails, editCVFilter } from '../ContentViewDetailActions';
+import AffectedRepositorySelection from './AffectedRepositories/AffectedRepositorySelection';
 import RepoIcon from '../Repositories/RepoIcon';
-import { repoType, capitalize } from '../../../../utils/helpers';
+import { repoType } from '../../../../utils/helpers';
+import EditableTextInput from '../../../../components/EditableTextInput';
+import { hasPermission } from '../../helpers';
 
-const ContentViewFilterDetailsHeader = ({ details }) => {
+const ContentViewFilterDetailsHeader = ({
+  cvId, filterId, filterDetails, setShowAffectedRepos, details,
+}) => {
+  const dispatch = useDispatch();
+  const [currentAttribute, setCurrentAttribute] = useState('');
   const {
-    type, name, inclusion, description,
-  } = details;
+    type, name, inclusion, description, rules,
+  } = filterDetails;
+  const { permissions } = details;
+  const errataByDate = !!(type === 'erratum' && head(rules)?.types);
   const repositoryType = repoType(type);
-  const displayedType = type ? capitalize(type.replace(/_/g, ' ')) : '';
+  const displayedType = () => {
+    if (errataByDate) return __('Errata - by date range');
+    if (type) return capitalize(type.replace(/_/g, ' '));
+    return '';
+  };
+
+  const onEdit = (val, attribute) => {
+    if (val === filterDetails[attribute]) return;
+    dispatch(editCVFilter(
+      filterId,
+      { [attribute]: val },
+      () => dispatch(getCVFilterDetails(cvId, filterId)),
+    ));
+  };
 
   return (
     <>
-      <GridItem span={12}>
+      <GridItem span={9}>
         <TextContent>
-          <Text component={TextVariants.h2}>{name}</Text>
+          <EditableTextInput
+            key={name} // This fixes a render issue with the initial value
+            label={__('Name')}
+            attribute="name"
+            placeholder={__('Enter a name')}
+            onEdit={onEdit}
+            disabled={!hasPermission(permissions, 'edit_content_views')}
+            value={name}
+            component={TextVariants.h2}
+            currentAttribute={currentAttribute}
+            setCurrentAttribute={setCurrentAttribute}
+          />
+        </TextContent>
+        <TextContent style={{ padding: '24px 0 12px' }}>
+          <EditableTextInput
+            key={description} // This fixes a render issue with the initial value
+            textArea
+            label={__('Description')}
+            attribute="description"
+            placeholder={__('No description provided')}
+            onEdit={onEdit}
+            disabled={!hasPermission(permissions, 'edit_content_views')}
+            value={description}
+            currentAttribute={currentAttribute}
+            setCurrentAttribute={setCurrentAttribute}
+          />
         </TextContent>
       </GridItem>
+      <GridItem span={3} style={{ float: 'right' }}>
+        <AffectedRepositorySelection
+          cvId={cvId}
+          filterId={filterId}
+          setShowAffectedRepos={setShowAffectedRepos}
+          disabled={!hasPermission(permissions, 'edit_content_views')}
+        />
+      </GridItem>
       <GridItem span={10}>
         <Split hasGutter>
           <SplitItem>
-            <Label color="blue">{inclusion ? __('Include') : __('Exclude') }</Label>
+            <Label color="blue">{inclusion ? __('Include') : __('Exclude')}</Label>
           </SplitItem>
           <SplitItem>
             <RepoIcon type={repositoryType} />
           </SplitItem>
           <SplitItem>
             <Text component={TextVariants.p}>
-              {displayedType}
+              {displayedType()}
             </Text>
           </SplitItem>
         </Split>
       </GridItem>
-      <GridItem span={12}>
-        <TextContent>
-          <Text component={TextVariants.p}>{description}</Text>
-        </TextContent>
-      </GridItem>
     </>
   );
 };
 
 ContentViewFilterDetailsHeader.propTypes = {
-  details: PropTypes.shape({
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  filterDetails: PropTypes.shape({
     name: PropTypes.string,
     type: PropTypes.string,
     inclusion: PropTypes.bool,
     description: PropTypes.string,
+    rules: PropTypes.arrayOf(PropTypes.shape({ types: PropTypes.arrayOf(PropTypes.string) })),
+  }).isRequired,
+  setShowAffectedRepos: PropTypes.func.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
   }).isRequired,
 };
 
+ContentViewFilterDetailsHeader.defaultProps = {
+  cvId: '',
+  filterId: '',
+};
+
 export default ContentViewFilterDetailsHeader;

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

@@ -20,22 +20,22 @@ import {
 import { truncate } from '../../../../utils/helpers';
 import ContentType from './ContentType';
 import CVFilterAddModal from './Add/CVFilterAddModal';
+import { hasPermission } from '../../helpers';
 
-const cvFilterUrl = (cvId, filterId) => `/labs/content_views/${cvId}#filters?subContentId=${filterId}`;
-
-const ContentViewFilters = ({ cvId }) => {
+const ContentViewFilters = ({ cvId, details }) => {
   const dispatch = useDispatch();
   const response = useSelector(state => selectCVFilters(state, cvId), shallowEqual);
+  const { results, ...metadata } = response;
   const status = useSelector(state => selectCVFiltersStatus(state, cvId), shallowEqual);
   const error = useSelector(state => selectCVFiltersError(state, cvId), shallowEqual);
   const [rows, setRows] = useState([]);
-  const [metadata, setMetadata] = useState({});
   const [searchQuery, updateSearchQuery] = useState('');
   const loading = status === STATUS.PENDING;
   const [addModalOpen, setAddModalOpen] = useState(false);
   const [bulkActionOpen, setBulkActionOpen] = useState(false);
   const [bulkActionEnabled, setBulkActionEnabled] = useState(false);
   const toggleBulkAction = () => setBulkActionOpen(prevState => !prevState);
+  const { permissions } = details;
 
   const openAddModal = () => setAddModalOpen(true);
 
@@ -47,7 +47,7 @@ const ContentViewFilters = ({ cvId }) => {
     __('Inclusion type'),
   ];
 
-  const buildRows = useCallback((results) => {
+  const buildRows = useCallback(() => {
     const newRows = [];
     results.forEach((filter) => {
       let errataByDate = false;
@@ -57,7 +57,7 @@ const ContentViewFilters = ({ cvId }) => {
       if (type === 'erratum' && rules[0]?.types) errataByDate = true;
 
       const cells = [
-        { title: (type === 'package_group' || type === 'rpm') ? <Link to={cvFilterUrl(cvId, id)}>{name}</Link> : name },
+        { title: <Link to={`/filters/${id}`}>{name}</Link> },
         truncate(description || ''),
         { title: <LongDateTime date={updatedAt} showRelativeTimeTooltip /> },
         { title: <ContentType type={type} errataByDate={errataByDate} /> },
@@ -72,7 +72,7 @@ const ContentViewFilters = ({ cvId }) => {
       newRows.push({ cells, id });
     });
     return newRows;
-  }, [cvId]);
+  }, [results]);
 
   const bulkRemove = () => {
     setBulkActionOpen(false);
@@ -87,14 +87,11 @@ const ContentViewFilters = ({ cvId }) => {
   }, [rows]);
 
   useDeepCompareEffect(() => {
-    const { results, ...meta } = response;
-    setMetadata(meta);
-
     if (!loading && results) {
-      const newRows = buildRows(results);
+      const newRows = buildRows();
       setRows(newRows);
     }
-  }, [response, loading, buildRows]);
+  }, [response, loading, results, buildRows]);
 
   const actionResolver = () => [
     {
@@ -123,47 +120,50 @@ const ContentViewFilters = ({ cvId }) => {
         updateSearchQuery,
         error,
         status,
-        actionResolver,
       }}
-      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="/content_view_filters/auto_complete_search"
       fetchItems={useCallback(params => getContentViewFilters(cvId, params), [cvId])}
-    >
-      <Split hasGutter>
-        <SplitItem>
-          <Button onClick={openAddModal} variant="secondary" aria-label="create_filter">
-            {__('Create filter')}
-          </Button>
-        </SplitItem>
-        <SplitItem>
-          <Dropdown
-            toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
-            isOpen={bulkActionOpen}
-            isPlain
-            dropdownItems={[
-              <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!bulkActionEnabled} component="button" onClick={bulkRemove}>
-                {__('Remove')}
-              </DropdownItem>]
-            }
-          />
-        </SplitItem>
-      </Split>
-      {addModalOpen &&
-        <CVFilterAddModal
-          cvId={cvId}
-          show={addModalOpen}
-          setIsOpen={setAddModalOpen}
-          aria-label="add_filter_modal"
-        />
+      actionButtons={hasPermission(permissions, 'edit_content_views') &&
+        <>
+          <Split hasGutter>
+            <SplitItem>
+              <Button onClick={openAddModal} variant="secondary" aria-label="create_filter">
+                {__('Create filter')}
+              </Button>
+            </SplitItem>
+            <SplitItem>
+              <Dropdown
+                toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+                isOpen={bulkActionOpen}
+                isPlain
+                dropdownItems={[
+                  <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!bulkActionEnabled} component="button" onClick={bulkRemove}>
+                    {__('Remove')}
+                  </DropdownItem>]
+                }
+              />
+            </SplitItem>
+          </Split>
+          {addModalOpen &&
+            <CVFilterAddModal
+              cvId={cvId}
+              onClose={() => setAddModalOpen(false)}
+              aria-label="add_filter_modal"
+            />}
+        </>
       }
-    </TableWrapper>);
+    />);
 };
 
-
 ContentViewFilters.propTypes = {
   cvId: PropTypes.number.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+  }).isRequired,
 };
 
 export default ContentViewFilters;