katello 4.2.2 → 4.3.0.rc1

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

@@ -0,0 +1,202 @@
+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,
+} 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 {
+  selectCVFilterDetails,
+  selectCVFilterRules,
+  selectCVFilterRulesStatus,
+} from '../ContentViewDetailSelectors';
+import { deleteContentViewFilterRules, getCVFilterRules, removeCVFilterRule } from '../ContentViewDetailActions';
+import AddEditContainerTagRuleModal from './Rules/ContainerTag/AddEditContainerTagRuleModal';
+import AffectedRepositoryTable from './AffectedRepositories/AffectedRepositoryTable';
+import { hasPermission } from '../../helpers';
+
+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.');
+
+const CVContainerImageFilterContent = ({
+  cvId, filterId, showAffectedRepos, setShowAffectedRepos, details,
+}) => {
+  const dispatch = useDispatch();
+  const response = useSelector(state => selectCVFilterRules(state, filterId), shallowEqual);
+  const status = useSelector(state => selectCVFilterRulesStatus(state, 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 [selectedFilterRuleData, setSelectedFilterRuleData] = useState(undefined);
+  const [modalOpen, setModalOpen] = useState(false);
+  const loading = status === STATUS.PENDING;
+  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 metadata = omit(response, ['results']);
+  const { permissions } = details;
+
+  const onClose = () => {
+    setModalOpen(false);
+    setSelectedFilterRuleData(undefined);
+  };
+
+  const columnHeaders = [
+    __('Tag name'),
+  ];
+
+  const bulkRemove = () => {
+    setBulkActionOpen(false);
+    const tagFilterIds =
+      rows.filter(row => row.selected).map(selected => selected.id);
+    dispatch(deleteContentViewFilterRules(filterId, tagFilterIds, () =>
+      dispatch(getCVFilterRules(filterId))));
+    deselectAll();
+  };
+
+  useEffect(() => {
+    if (!repositories.length && showAffectedRepos) {
+      setActiveTabKey(1);
+    } else {
+      setActiveTabKey(0);
+    }
+  }, [showAffectedRepos, repositories.length]);
+
+  useDeepCompareEffect(() => {
+    const { results } = response;
+    if (!loading && results) {
+      setRows([...results.map((containerRule) => {
+        const { name, id } = containerRule;
+        return ({
+          cells: [{ title: name }],
+          name,
+          id,
+        });
+      })]);
+    }
+  }, [response, loading]);
+
+  const actionResolver = () => [
+    {
+      title: __('Remove'),
+      onClick: (_event, _rowId, { id }) => {
+        dispatch(removeCVFilterRule(filterId, id, () =>
+          dispatch(getCVFilterRules(filterId))));
+      },
+    },
+    {
+      title: __('Edit'),
+      onClick: (_event, _rowId, { name, id }) => {
+        setSelectedFilterRuleData({ name, id });
+        setModalOpen(true);
+      },
+    },
+  ];
+
+  return (
+    <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+      <Tab eventKey={0} title={<TabTitleText>{__('Tags')}</TabTitleText>}>
+        <div className="tab-body-with-spacing">
+          <TableWrapper
+            {...{
+              rows,
+              metadata,
+              emptyContentTitle,
+              emptyContentBody,
+              emptySearchTitle,
+              emptySearchBody,
+              searchQuery,
+              updateSearchQuery,
+              status,
+            }}
+            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={hasPermission(permissions, 'edit_content_views') &&
+              <>
+                <Split hasGutter>
+                  <SplitItem>
+                    <Button
+                      onClick={() => setModalOpen(true)}
+                      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_remove" key="bulk_remove" isDisabled={!hasSelected} component="button" onClick={bulkRemove}>
+                          {__('Remove')}
+                        </DropdownItem>]
+                      }
+                    />
+                  </SplitItem>
+                </Split>
+                {modalOpen &&
+                  <AddEditContainerTagRuleModal
+                    {...{
+                      filterId, selectedFilterRuleData, onClose,
+                    }}
+                  />
+                }
+              </>
+            }
+          />
+        </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="docker" setShowAffectedRepos={setShowAffectedRepos} details={details} />
+        </div>
+      </Tab>
+      }
+    </Tabs>
+  );
+};
+
+CVContainerImageFilterContent.propTypes = {
+  cvId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  showAffectedRepos: PropTypes.bool,
+  setShowAffectedRepos: PropTypes.func,
+  details: PropTypes.shape({
+    permissions: PropTypes.shape({}),
+  }).isRequired,
+};
+
+CVContainerImageFilterContent.defaultProps = {
+  cvId: '',
+  filterId: '',
+  showAffectedRepos: false,
+  setShowAffectedRepos: () => {},
+};
+export default CVContainerImageFilterContent;

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

@@ -0,0 +1,291 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { isEqual, sortBy, capitalize } from 'lodash';
+import { shallowEqual, useSelector, useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
+import {
+  Tooltip, Form, ActionGroup, Flex, FlexItem, Select,
+  SelectOption, SelectVariant, ChipGroup, Chip,
+  Tabs, Tab, TabTitleText, Button, DatePicker, Bullseye,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { selectCVFilterDetails } from '../ContentViewDetailSelectors';
+import AffectedRepositoryTable from './AffectedRepositories/AffectedRepositoryTable';
+import { editCVFilterRule, getCVFilterDetails } from '../ContentViewDetailActions';
+import { hasPermission } from '../../helpers';
+
+export const dateFormat = date => `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}/${date.getFullYear()}`;
+
+export const convertAPIDateToUIFormat = (dateString) => {
+  if (!dateString || dateString === '') return '';
+  return dateFormat(new Date(dateString));
+};
+
+export const dateParse = (date) => {
+  if (!date || date === '') return new Date();
+  const split = date.split('/');
+  if (split.length !== 3) {
+    return undefined;
+  }
+  const [month, day, year] = split;
+  return new Date(`${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}T12:00:00Z`);
+};
+
+export const isValidDate = date => date instanceof Date && !Number.isNaN(date.getTime());
+
+const CVErrataDateFilterContent = ({
+  cvId, filterId, inclusion, showAffectedRepos, setShowAffectedRepos, details,
+}) => {
+  const filterDetails = useSelector(state =>
+    selectCVFilterDetails(state, cvId, filterId), shallowEqual);
+  const { repositories = [], rules } = filterDetails;
+  const [{
+    id, types, start_date: ruleStartDate, end_date: ruleEndDate, date_type: ruleDateType,
+  } = {}] = rules;
+  const { permissions } = details;
+  const [startDate, setStartDate] = useState(convertAPIDateToUIFormat(ruleStartDate));
+  const [endDate, setEndDate] = useState(convertAPIDateToUIFormat(ruleEndDate));
+  const [dateType, setDateType] = useState(ruleDateType);
+  const [dateTypeSelectOpen, setDateTypeSelectOpen] = useState(false);
+  const [typeSelectOpen, setTypeSelectOpen] = useState(false);
+  const [selectedTypes, setSelectedTypes] = useState(types);
+  const dispatch = useDispatch();
+  const [activeTabKey, setActiveTabKey] = useState(0);
+
+  const onSave = () => {
+    dispatch(editCVFilterRule(
+      filterId,
+      {
+        id,
+        content_view_filter_id: filterId,
+        start_date: startDate && startDate !== '' ? dateParse(startDate) : null,
+        end_date: endDate && endDate !== '' ? dateParse(endDate) : null,
+        types: selectedTypes,
+        date_type: dateType,
+      },
+      () => dispatch(getCVFilterDetails(cvId, filterId)),
+    ));
+  };
+
+  const resetFilters = () => {
+    setStartDate(convertAPIDateToUIFormat(ruleStartDate));
+    setEndDate(convertAPIDateToUIFormat(ruleEndDate));
+    setSelectedTypes(types);
+    setDateType(ruleDateType);
+  };
+
+  const onTypeSelect = (selection) => {
+    if (selectedTypes.includes(selection)) {
+      if (selectedTypes.length === 1) return;
+      setSelectedTypes(selectedTypes.filter(e => e !== selection));
+    } else setSelectedTypes([...selectedTypes, selection]);
+  };
+
+  const singleSelection = selection => (selectedTypes.length === 1
+    && selectedTypes.includes(selection));
+
+  const saveDisabled = !isValidDate(dateParse(startDate)) || !isValidDate(dateParse(endDate)) ||
+    (
+      isEqual(convertAPIDateToUIFormat(ruleStartDate), startDate) &&
+      isEqual(convertAPIDateToUIFormat(ruleEndDate), endDate) &&
+      isEqual(sortBy(types), sortBy(selectedTypes)) &&
+      isEqual(ruleDateType, dateType)
+    );
+
+  useEffect(() => {
+    if (!repositories.length && showAffectedRepos) {
+      setActiveTabKey(1);
+    } else {
+      setActiveTabKey(0);
+    }
+  }, [showAffectedRepos, repositories.length]);
+
+  const tabTitle = inclusion ? __('Included errata') : __('Excluded errata');
+
+  return (
+    <Tabs activeKey={activeTabKey} onSelect={(_event, eventKey) => setActiveTabKey(eventKey)}>
+      <Tab eventKey={0} title={<TabTitleText>{tabTitle}</TabTitleText>}>
+        <div className="tab-body-with-spacing">
+          <Form onSubmit={(e) => {
+            e.preventDefault();
+            onSave();
+          }}
+          >
+            <Flex flex={{ default: 'inlineFlex' }}>
+              <FlexItem span={2}>
+                <Select
+                  variant={SelectVariant.checkbox}
+                  onToggle={setTypeSelectOpen}
+                  onSelect={(_event, selection) => onTypeSelect(selection)}
+                  selections={selectedTypes}
+                  isOpen={typeSelectOpen}
+                  placeholderText={__('Errata type')}
+                  isCheckboxSelectionBadgeHidden
+                >
+                  <SelectOption
+                    isDisabled={singleSelection('security') || !hasPermission(permissions, 'edit_content_views')}
+                    key="security"
+                    value="security"
+                  >
+                    <p style={{ marginTop: '4px' }}>
+                      {__('Security')}
+                    </p>
+                  </SelectOption>
+                  <SelectOption
+                    isDisabled={singleSelection('enhancement') || !hasPermission(permissions, 'edit_content_views')}
+                    key="enhancement"
+                    value="enhancement"
+                  >
+                    <p style={{ marginTop: '4px' }}>
+                      {__('Enhancement')}
+                    </p>
+                  </SelectOption>
+                  <SelectOption
+                    isDisabled={singleSelection('bugfix') || !hasPermission(permissions, 'edit_content_views')}
+                    key="bugfix"
+                    value="bugfix"
+                  >
+                    <p style={{ marginTop: '4px' }}>
+                      {__('Bugfix')}
+                    </p>
+                  </SelectOption>
+                </Select>
+              </FlexItem>
+              <FlexItem span={1} spacer={{ default: 'spacer3xl' }}>
+                {(selectedTypes.length === 1) &&
+                  <Tooltip
+                    position="top"
+                    content={
+                      __('Atleast one errata type needs to be selected.')
+                    }
+                  >
+                    <OutlinedQuestionCircleIcon />
+                  </Tooltip>
+                }
+              </FlexItem>
+              <FlexItem span={2} spacer={{ default: 'spacerMd' }}>
+                <Select
+                  selections={dateType}
+                  onSelect={(_event, selection) => {
+                    setDateType(selection);
+                    setDateTypeSelectOpen(false);
+                  }}
+                  isOpen={dateTypeSelectOpen}
+                  onToggle={setDateTypeSelectOpen}
+                  id="date_type_selector"
+                  name="date_type_selector"
+                  aria-label="date_type_selector"
+                  isDisabled={!hasPermission(permissions, 'edit_content_views')}
+                >
+                  <SelectOption key="issued" value="issued">{__('Issued')}</SelectOption>
+                  <SelectOption key="updated" value="updated">{__('Updated')}</SelectOption>
+                </Select>
+              </FlexItem>
+              <FlexItem span={2} spacer={{ default: 'spacerXs' }}>
+                <Bullseye>
+                  <DatePicker
+                    aria-label="start_date_input"
+                    value={startDate}
+                    dateFormat={dateFormat}
+                    onChange={setStartDate}
+                    dateParse={dateParse}
+                    placeholder="MM/DD/YYYY"
+                    isDisabled={!hasPermission(permissions, 'edit_content_views')}
+                  />
+                </Bullseye>
+              </FlexItem>
+              <FlexItem span={2}>
+                <Bullseye>
+                  <DatePicker
+                    aria-label="end_date_input"
+                    value={endDate}
+                    dateFormat={dateFormat}
+                    onChange={setEndDate}
+                    dateParse={dateParse}
+                    placeholder="MM/DD/YYYY"
+                    isDisabled={!hasPermission(permissions, 'edit_content_views')}
+                  />
+                </Bullseye>
+              </FlexItem>
+            </Flex>
+            <Flex>
+              <FlexItem>
+                <ChipGroup categoryName={dateType === 'issued' ? __('Issued') : __('Updated')}>
+                  <Chip key="startDate" onClick={() => setStartDate('')} isReadOnly={!startDate || !hasPermission(permissions, 'edit_content_views')}>
+                    {startDate || __('ANY')}
+                  </Chip>
+                  -
+                  <Chip key="endDate" onClick={() => setEndDate('')} isReadOnly={!endDate || !hasPermission(permissions, 'edit_content_views')}>
+                    {endDate || __('ANY')}
+                  </Chip>
+                </ChipGroup>
+              </FlexItem>
+              <FlexItem>
+                <ChipGroup categoryName={__('Type')}>
+                  {selectedTypes.map(type => (
+                    <Chip
+                      key={type}
+                      onClick={() => onTypeSelect(type)}
+                      isReadOnly={singleSelection(type) || !hasPermission(permissions, 'edit_content_views')}
+                    >
+                      {capitalize(type)}
+                    </Chip>
+                  ))}
+                </ChipGroup>
+              </FlexItem>
+              {hasPermission(permissions, 'edit_content_views') &&
+                <FlexItem>
+                  <Button variant="link" onClick={resetFilters} isInline>
+                    {__('Reset filters')}
+                  </Button>
+                </FlexItem>
+              }
+            </Flex>
+            {hasPermission(permissions, 'edit_content_views') &&
+              <ActionGroup>
+                <Button
+                  aria-label="save_filter_rule"
+                  variant="secondary"
+                  isDisabled={saveDisabled}
+                  type="submit"
+                >
+                  {__('Edit rule')}
+                </Button>
+                <Link to={`/content_views/${cvId}#/filters`}>
+                  <Button variant="link">
+                    {__('Cancel')}
+                  </Button>
+                </Link>
+              </ActionGroup>
+            }
+          </Form>
+        </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>
+  );
+};
+
+CVErrataDateFilterContent.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,
+};
+
+CVErrataDateFilterContent.defaultProps = {
+  cvId: '',
+  filterId: '',
+  inclusion: false,
+};
+export default CVErrataDateFilterContent;