katello 4.2.1 → 4.3.0.rc1

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

@@ -0,0 +1,302 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import PropTypes from 'prop-types';
+import { shallowEqual, useSelector, useDispatch } from 'react-redux';
+import { omit } from 'lodash';
+import { TableVariant } from '@patternfly/react-table';
+import {
+  Tabs, Tab, TabTitleText, Split, SplitItem, Button, Dropdown, DropdownItem,
+  KebabToggle, Select, SelectOption, SelectVariant,
+} 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 {
+  selectCVFilterModuleStream,
+  selectCVFilterModuleStreamStatus,
+  selectCVFilterModuleStreamError,
+  selectCVFilters, selectCVFilterDetails, selectCVFiltersStatus,
+} from '../ContentViewDetailSelectors';
+import getContentViewDetails, {
+  addCVFilterRule, removeCVFilterRule, getCVFilterModuleStreams,
+  deleteContentViewFilterRules, addContentViewFilterRules,
+} from '../ContentViewDetailActions';
+import AddedStatusLabel from '../../../../components/AddedStatusLabel';
+import AffectedRepositoryTable from './AffectedRepositories/AffectedRepositoryTable';
+import { ArtifactsWithNoErrataRenderer } from './ArtifactsWithNoErrata';
+import { ADDED, ALL_STATUSES, NOT_ADDED } from '../../ContentViewsConstants';
+import { hasPermission } from '../../helpers';
+
+const CVModuleStreamFilterContent = ({
+  cvId, filterId, showAffectedRepos, setShowAffectedRepos, details,
+}) => {
+  const dispatch = useDispatch();
+  const { results: filterResults } =
+    useSelector(state => selectCVFilters(state, cvId), shallowEqual);
+  const response = useSelector(state =>
+    selectCVFilterModuleStream(state, cvId, filterId), shallowEqual);
+  const status = useSelector(state =>
+    selectCVFilterModuleStreamStatus(state, cvId, filterId), shallowEqual);
+  const filterLoad = useSelector(state =>
+    selectCVFiltersStatus(state, cvId), shallowEqual);
+  const error = useSelector(state =>
+    selectCVFilterModuleStreamError(state, cvId, filterId), shallowEqual);
+  const filterDetails = useSelector(state =>
+    selectCVFilterDetails(state, cvId, filterId), shallowEqual);
+  const { repositories = [] } = filterDetails;
+  const [rows, setRows] = useState([]);
+  const [searchQuery, updateSearchQuery] = useState('');
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const filterLoaded = filterLoad === 'RESOLVED';
+  const loading = status === STATUS.PENDING;
+  const [bulkActionOpen, setBulkActionOpen] = useState(false);
+  const [selectOpen, setSelectOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const deselectAll = () => setRows(rows.map(row => ({ ...row, selected: false })));
+  const toggleBulkAction = () => setBulkActionOpen(prevState => !prevState);
+  const hasAddedSelected = rows.some(({ selected, added }) => selected && added);
+  const hasNotAddedSelected = rows.some(({ selected, added }) => selected && !added);
+  const metadata = omit(response, ['results']);
+  const { permissions } = details;
+  const columnHeaders = [
+    __('Name'),
+    __('Stream'),
+    __('Version'),
+    __('Context'),
+    __('Status'),
+  ];
+
+  const allAddedNotAdded = [
+    ALL_STATUSES,
+    ADDED,
+    NOT_ADDED,
+  ];
+  const selectedAdded = allAddedNotAdded[selectedIndex];
+
+  const fetchItems = useCallback((params) => {
+    const adjustedParams = { ...params };
+    switch (selectedIndex) {
+      case 0:
+        adjustedParams.show_all_for = 'content_view_filter';
+        adjustedParams.available_for = undefined;
+        break;
+      case 1:
+        adjustedParams.show_all_for = undefined;
+        adjustedParams.available_for = undefined;
+        break;
+      case 2:
+        adjustedParams.show_all_for = undefined;
+        adjustedParams.available_for = 'content_view_filter';
+        break;
+      default:
+    }
+
+    return getCVFilterModuleStreams(cvId, filterId, adjustedParams);
+  }, [cvId, filterId, selectedIndex]);
+
+  const buildRows = useCallback((results) => {
+    const newRows = [];
+    const filterRules = filterResults.find(({ id }) => id === Number(filterId))?.rules || [];
+    results.forEach((moduleStreams) => {
+      const {
+        id,
+        name,
+        stream,
+        version,
+        context,
+        filter_ids: filterIds,
+        ...rest
+      } = moduleStreams;
+
+      const added = filterIds.includes(parseInt(filterId, 10));
+
+      const cells = [
+        { title: name },
+        { title: stream },
+        { title: version },
+        { title: context },
+        { title: <AddedStatusLabel added={added} /> },
+      ];
+
+      /* eslint-disable camelcase */
+
+      newRows.push({
+        cells,
+        module_stream_id: id,
+        moduleStreamRuleId: filterRules?.find(({ module_stream_id }) => module_stream_id === id)?.id, // eslint-disable-line max-len, no-shadow, no-self-compare
+        added,
+        ...rest,
+        name,
+      });
+    });
+
+    return newRows.sort(({ added: addedA }, { added: addedB }) => {
+      if (addedA === addedB) return 0;
+      return addedA ? -1 : 1;
+    });
+  }, [filterResults, filterId]);
+
+  const bulkAdd = () => {
+    setBulkActionOpen(false);
+    const addData = rows.filter(({ selected, added }) =>
+      selected && !added).map(({ module_stream_id }) => ({ module_stream_ids: [module_stream_id] })); // eslint-disable-line max-len
+    dispatch(addContentViewFilterRules(filterId, addData, () =>
+      dispatch(getContentViewDetails(cvId))));
+    deselectAll();
+  };
+
+  const bulkRemove = () => {
+    setBulkActionOpen(false);
+    const moduleStreamRuleIds =
+      rows.filter(({ selected, added }) =>
+        selected && added).map(({ moduleStreamRuleId }) => moduleStreamRuleId);
+    dispatch(deleteContentViewFilterRules(filterId, moduleStreamRuleIds, () =>
+      dispatch(getContentViewDetails(cvId))));
+    deselectAll();
+  };
+
+  useEffect(() => {
+    if (!repositories.length && showAffectedRepos) {
+      setActiveTabKey(1);
+    } else {
+      setActiveTabKey(0);
+    }
+  }, [showAffectedRepos, repositories.length]);
+
+  useDeepCompareEffect(() => {
+    const { results } = response;
+
+    if (!loading && results && filterLoaded) {
+      const newRows = buildRows(results);
+      setRows(newRows);
+    }
+  }, [response, loading, filterLoaded, buildRows]);
+
+  const actionResolver = ({ added }) => [
+    {
+      title: __('Add'),
+      isDisabled: added,
+      onClick: (_event, _rowId, { module_stream_id }) => {
+        dispatch(addCVFilterRule(filterId, { module_stream_ids: [module_stream_id] }, () =>
+          dispatch(getContentViewDetails(cvId))));
+      },
+    },
+    {
+      title: __('Remove'),
+      isDisabled: !added,
+      onClick: (_event, _rowId, { moduleStreamRuleId }) => {
+        dispatch(removeCVFilterRule(filterId, moduleStreamRuleId, () =>
+          dispatch(getContentViewDetails(cvId))));
+      },
+    },
+  ];
+
+  const emptyContentTitle = __('No rules have been added to this filter.');
+  const emptyContentBody = __("Add to this filter using the 'Add filter rule' button.");
+  const emptySearchTitle = __('No matching filter rules found.');
+  const emptySearchBody = __('Try changing your search settings.');
+
+
+  return (
+    <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+      <Tab eventKey={0} title={<TabTitleText>{__('Module Streams')}</TabTitleText>}>
+        <div className="tab-body-with-spacing">
+          <TableWrapper
+            {...{
+              rows,
+              metadata,
+              emptyContentTitle,
+              emptyContentBody,
+              emptySearchTitle,
+              emptySearchBody,
+              searchQuery,
+              updateSearchQuery,
+              error,
+              status,
+            }}
+            additionalListeners={[selectedIndex]}
+            activeFilters={[selectedAdded]}
+            defaultFilters={[allAddedNotAdded[0]]}
+            cells={columnHeaders}
+            variant={TableVariant.compact}
+            autocompleteEndpoint={`/module_streams/auto_complete_search?filterid=${filterId}`}
+            fetchItems={fetchItems}
+            actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
+            onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
+            actionButtons={hasPermission(permissions, 'edit_content_views') &&
+              <Split hasGutter>
+                <SplitItem data-testid="allAddedNotAdded">
+                  <Select
+                    variant={SelectVariant.single}
+                    onToggle={setSelectOpen}
+                    onSelect={(_event, selection) => {
+                      setSelectedIndex(allAddedNotAdded.indexOf(selection));
+                      setSelectOpen(false);
+                    }}
+                    selections={selectedAdded}
+                    isOpen={selectOpen}
+                    isCheckboxSelectionBadgeHidden
+                  >
+                    {allAddedNotAdded.map(item =>
+                      <SelectOption aria-label={item} key={item} value={item} />)}
+                  </Select>
+                </SplitItem>
+                <SplitItem>
+                  <Button
+                    isDisabled={!hasNotAddedSelected}
+                    onClick={bulkAdd}
+                    variant="secondary"
+                    aria-label="add_filter_rule"
+                  >
+                    {__('Add filter rule')}
+                  </Button>
+                </SplitItem>
+                <SplitItem>
+                  <Dropdown
+                    toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+                    isOpen={bulkActionOpen}
+                    isPlain
+                    dropdownItems={[
+                      <DropdownItem aria-label="bulk_add" key="bulk_add" isDisabled={!hasNotAddedSelected} component="button" onClick={bulkAdd}>
+                        {__('Add')}
+                      </DropdownItem>,
+                      <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
+                        {__('Remove')}
+                      </DropdownItem>]
+                    }
+                  />
+                </SplitItem>
+                <SplitItem>
+                  <ArtifactsWithNoErrataRenderer
+                    filterDetails={filterDetails}
+                  />
+                </SplitItem>
+              </Split>
+            }
+          />
+        </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 >
+  );
+};
+
+CVModuleStreamFilterContent.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  showAffectedRepos: PropTypes.bool.isRequired,
+  setShowAffectedRepos: PropTypes.func.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+  }).isRequired,
+};
+
+export default CVModuleStreamFilterContent;

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

@@ -1,9 +1,12 @@
-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,
+  Select, SelectVariant, SelectOption, Dropdown, DropdownItem, KebabToggle,
+} from '@patternfly/react-core';
 import { STATUS } from 'foremanReact/constants';
 import { translate as __ } from 'foremanReact/common/I18n';
 
@@ -13,23 +16,45 @@ import {
   selectCVFilterPackageGroups,
   selectCVFilterPackageGroupStatus,
   selectCVFilterPackageGroupError,
+  selectCVFilters, selectCVFilterDetails,
 } from '../ContentViewDetailSelectors';
 import AddedStatusLabel from '../../../../components/AddedStatusLabel';
-import { getCVFilterPackageGroups } from '../ContentViewDetailActions';
-
+import getContentViewDetails, {
+  addCVFilterRule, removeCVFilterRule, getCVFilterPackageGroups,
+  deleteContentViewFilterRules, addContentViewFilterRules,
+} from '../ContentViewDetailActions';
+import AffectedRepositoryTable from './AffectedRepositories/AffectedRepositoryTable';
+import { ADDED, ALL_STATUSES, NOT_ADDED } from '../../ContentViewsConstants';
+import { hasPermission } from '../../helpers';
 
-const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
+const CVPackageGroupFilterContent = ({
+  cvId, filterId, showAffectedRepos, setShowAffectedRepos, details,
+}) => {
+  const dispatch = useDispatch();
+  const { results: filterResults } =
+    useSelector(state => selectCVFilters(state, cvId), shallowEqual);
   const response = useSelector(state =>
     selectCVFilterPackageGroups(state, cvId, filterId), shallowEqual);
   const status = useSelector(state =>
     selectCVFilterPackageGroupStatus(state, cvId, filterId), shallowEqual);
   const error = useSelector(state =>
     selectCVFilterPackageGroupError(state, cvId, filterId), shallowEqual);
+  const filterDetails = useSelector(state =>
+    selectCVFilterDetails(state, cvId, filterId), shallowEqual);
+  const { repositories = [] } = filterDetails;
   const [rows, setRows] = useState([]);
-  const [metadata, setMetadata] = useState({});
   const [searchQuery, updateSearchQuery] = useState('');
   const [activeTabKey, setActiveTabKey] = useState(0);
   const loading = status === STATUS.PENDING;
+  const [bulkActionOpen, setBulkActionOpen] = useState(false);
+  const [selectOpen, setSelectOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const deselectAll = () => setRows(rows.map(row => ({ ...row, selected: false })));
+  const toggleBulkAction = () => setBulkActionOpen(prevState => !prevState);
+  const hasAddedSelected = rows.some(({ selected, added }) => selected && added);
+  const hasNotAddedSelected = rows.some(({ selected, added }) => selected && !added);
+  const { results, ...metadata } = response;
+  const { permissions } = details;
 
   const columnHeaders = [
     __('Name'),
@@ -39,8 +64,37 @@ const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
     __('Status'),
   ];
 
-  const buildRows = useCallback((results) => {
+  const allAddedNotAdded = [
+    ALL_STATUSES,
+    ADDED,
+    NOT_ADDED,
+  ];
+  const selectedAdded = allAddedNotAdded[selectedIndex];
+
+  const fetchItems = useCallback((params) => {
+    const adjustedParams = { ...params };
+    switch (selectedIndex) {
+      case 0:
+        adjustedParams.show_all_for = 'content_view_filter';
+        adjustedParams.available_for = undefined;
+        break;
+      case 1:
+        adjustedParams.show_all_for = undefined;
+        adjustedParams.available_for = undefined;
+        break;
+      case 2:
+        adjustedParams.show_all_for = undefined;
+        adjustedParams.available_for = 'content_view_filter';
+        break;
+      default:
+    }
+
+    return getCVFilterPackageGroups(cvId, filterId, adjustedParams);
+  }, [cvId, filterId, selectedIndex]);
+
+  const buildRows = useCallback(() => {
     const newRows = [];
+    const filterRules = filterResults.find(({ id }) => id === Number(filterId))?.rules || [];
     results.forEach((packageGroups) => {
       const {
         name,
@@ -50,7 +104,9 @@ const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
           product: { name: productName },
         },
         filter_ids: filterIds,
+        ...rest
       } = packageGroups;
+
       const cells = [
         { title: name },
         { title: productName },
@@ -59,27 +115,80 @@ const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
         { title: <AddedStatusLabel added={filterIds.includes(parseInt(filterId, 10))} /> },
       ];
 
-      newRows.push({ cells });
+      newRows.push({
+        cells,
+        packagefilterId: filterRules?.find(({ uuid }) => uuid === rest.uuid)?.id,
+        added: filterIds.includes(parseInt(filterId, 10)),
+        ...rest,
+        name,
+      });
     });
 
-    return newRows;
-  }, [filterId]);
+    return newRows.sort(({ added: addedA }, { added: addedB }) => {
+      if (addedA === addedB) return 0;
+      return addedA ? -1 : 1;
+    });
+  }, [filterResults, filterId, results]);
 
-  useDeepCompareEffect(() => {
-    const { results, ...meta } = response;
-    setMetadata(meta);
+  const bulkAdd = () => {
+    setBulkActionOpen(false);
+    const addData = rows.filter(({ selected, added }) =>
+      selected && !added).map(({ uuid }) => ({ uuid }));
+    dispatch(addContentViewFilterRules(filterId, addData, () =>
+      dispatch(getContentViewDetails(cvId))));
+    deselectAll();
+  };
 
+  const bulkRemove = () => {
+    setBulkActionOpen(false);
+    const packageFilterIds =
+      rows.filter(({ selected, added }) =>
+        selected && added).map(({ packagefilterId }) => packagefilterId);
+    dispatch(deleteContentViewFilterRules(filterId, packageFilterIds, () =>
+      dispatch(getContentViewDetails(cvId))));
+    deselectAll();
+  };
+
+  useEffect(() => {
+    if (!repositories.length && showAffectedRepos) {
+      setActiveTabKey(1);
+    } else {
+      setActiveTabKey(0);
+    }
+  }, [showAffectedRepos, repositories.length]);
+
+  useDeepCompareEffect(() => {
     if (!loading && results) {
-      const newRows = buildRows(results);
+      const newRows = buildRows();
       setRows(newRows);
     }
-  }, [response, loading, buildRows]);
+  }, [response, loading, buildRows, results]);
+
+  const actionResolver = ({ added }) => [
+    {
+      title: __('Add'),
+      isDisabled: added,
+      onClick: (_event, _rowId, { uuid }) => {
+        dispatch(addCVFilterRule(filterId, { uuid }, () =>
+          dispatch(getContentViewDetails(cvId))));
+      },
+    },
+    {
+      title: __('Remove'),
+      isDisabled: !added,
+      onClick: (_event, _rowId, { packagefilterId }) => {
+        dispatch(removeCVFilterRule(filterId, packagefilterId, () =>
+          dispatch(getContentViewDetails(cvId))));
+      },
+    },
+  ];
 
-  const emptyContentTitle = __('No package groups have been added to this filter.');
-  const emptyContentBody = __("Add to this filter using the 'Add package group' button.");
-  const emptySearchTitle = __('No matching package groups found.');
+  const emptyContentTitle = __('No rules have been added to this filter.');
+  const emptyContentBody = __("Add to this filter using the 'Add filter rule' button.");
+  const emptySearchTitle = __('No matching filter rules found.');
   const emptySearchBody = __('Try changing your search settings.');
 
+
   return (
     <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
       <Tab eventKey={0} title={<TabTitleText>{__('Package groups')}</TabTitleText>}>
@@ -97,16 +206,65 @@ const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
               error,
               status,
             }}
-            status={status}
-            onSelect={onSelect(rows, setRows)}
+            additionalListeners={[selectedIndex]}
+            activeFilters={[selectedAdded]}
+            defaultFilters={[allAddedNotAdded[0]]}
             cells={columnHeaders}
             variant={TableVariant.compact}
             autocompleteEndpoint={`/package_groups/auto_complete_search?filterid=${filterId}`}
-            fetchItems={useCallback(params =>
-              getCVFilterPackageGroups(cvId, filterId, params), [cvId, filterId])}
+            fetchItems={fetchItems}
+            actionResolver={hasPermission(permissions, 'edit_content_views') ? actionResolver : null}
+            onSelect={hasPermission(permissions, 'edit_content_views') ? onSelect(rows, setRows) : null}
+            actionButtons={hasPermission(permissions, 'edit_content_views') &&
+            <Split hasGutter>
+              <SplitItem data-testid="allAddedNotAdded">
+                <Select
+                  variant={SelectVariant.single}
+                  onToggle={setSelectOpen}
+                  onSelect={(_event, selection) => {
+                    setSelectedIndex(allAddedNotAdded.indexOf(selection));
+                    setSelectOpen(false);
+                  }}
+                  selections={allAddedNotAdded[selectedIndex]}
+                  isOpen={selectOpen}
+                  isCheckboxSelectionBadgeHidden
+                >
+                  {allAddedNotAdded.map(item =>
+                    <SelectOption aria-label={item} key={item} value={item} />)}
+                </Select>
+              </SplitItem>
+              <SplitItem>
+                <Button isDisabled={!hasNotAddedSelected} onClick={bulkAdd} variant="secondary" aria-label="add_filter_rule">
+                  {__('Add filter rule')}
+                </Button>
+              </SplitItem>
+              <SplitItem>
+                <Dropdown
+                  toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+                  isOpen={bulkActionOpen}
+                  isPlain
+                  dropdownItems={[
+                    <DropdownItem aria-label="bulk_add" key="bulk_add" isDisabled={!hasNotAddedSelected} component="button" onClick={bulkAdd}>
+                      {__('Add')}
+                    </DropdownItem>,
+                    <DropdownItem aria-label="bulk_remove" key="bulk_remove" isDisabled={!hasAddedSelected} component="button" onClick={bulkRemove}>
+                      {__('Remove')}
+                    </DropdownItem>]
+                  }
+                />
+              </SplitItem>
+            </Split>
+            }
           />
         </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>
   );
 };
@@ -114,6 +272,11 @@ const CVPackageGroupFilterContent = ({ cvId, filterId }) => {
 CVPackageGroupFilterContent.propTypes = {
   cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  showAffectedRepos: PropTypes.bool.isRequired,
+  setShowAffectedRepos: PropTypes.func.isRequired,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+  }).isRequired,
 };
 
 export default CVPackageGroupFilterContent;