katello 4.2.1 → 4.3.0.rc1

data/webpack/scenes/ContentViews/Details/Filters/Rules/Package/AddEditPackageRuleModal.js

@@ -0,0 +1,237 @@
+import React, { useState } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useDispatch, useSelector } from 'react-redux';
+import { STATUS } from 'foremanReact/constants';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Modal, ModalVariant, Form, FormGroup, TextInput, ActionGroup, Button, Select, SelectOption } from '@patternfly/react-core';
+import { addCVFilterRule, editCVFilterRule, getCVFilterRules } from '../../../ContentViewDetailActions';
+import {
+  selectCreateFilterRuleStatus,
+} from '../../../ContentViewDetailSelectors';
+
+const AddEditPackageRuleModal = ({ filterId, onClose, selectedFilterRuleData }) => {
+  const {
+    id: editingId,
+    name: editingName,
+    arch: editingArchitecture,
+    version: editingVersion,
+    min_version: editingMinVersion,
+    max_version: editingMaxVersion,
+  } = selectedFilterRuleData || {};
+
+  const isEditing = !!selectedFilterRuleData;
+
+  const VersionModifiers = {
+    'All versions': __('All Versions'),
+    'Equal to': __('Equal to'),
+    'Greater than': __('Greater than'),
+    'Less than': __('Less than'),
+    /* eslint-disable quote-props */
+    'Range': __('Range'),
+  };
+
+  const versionText = () => {
+    switch (true) {
+      case !!editingVersion: return VersionModifiers['Equal to'];
+      case !!editingMinVersion && !editingMaxVersion: return VersionModifiers['Greater than'];
+      case !editingMinVersion && !!editingMaxVersion: return VersionModifiers['Less than'];
+      case !!editingMinVersion && !!editingMaxVersion: return VersionModifiers.Range;
+      default: return VersionModifiers['All versions'];
+    }
+  };
+
+  const [name, setName] = useState(editingName || '');
+  const [architecture, setArchitecture] = useState(editingArchitecture || '');
+  const [version, setVersion] = useState(editingVersion || '');
+  const [minVersion, setMinVersion] = useState(editingMinVersion || '');
+  const [maxVersion, setMaxVersion] = useState(editingMaxVersion || '');
+  const [versionComparator, setVersionComparator] = useState(versionText(selectedFilterRuleData));
+  const [saving, setSaving] = useState(false);
+  const [versionComparatorSelectOpen, setVersionComparatorSelectOpen] = useState(false);
+  const dispatch = useDispatch();
+  const status = useSelector(state => selectCreateFilterRuleStatus(state));
+
+  const submitDisabled = !name || name.length === 0;
+
+  const showVersion = versionComparator === VersionModifiers['Equal to'];
+  const showMinVersion = versionComparator === VersionModifiers['Greater than'] ||
+    versionComparator === VersionModifiers.Range;
+  const showMaxVersion = versionComparator === VersionModifiers['Less than'] ||
+    versionComparator === VersionModifiers.Range;
+
+  const formVersionParams = () => {
+    switch (versionComparator) {
+      case 'All Versions':
+        return {};
+      case 'Equal to':
+        return { version };
+      case 'Greater than':
+        return { min_version: minVersion };
+      case 'Less than':
+        return { max_version: maxVersion };
+      case 'Range':
+        return { min_version: minVersion, max_version: maxVersion };
+      default:
+        return {};
+    }
+  };
+
+  const onSubmit = () => {
+    setSaving(true);
+    dispatch(isEditing ?
+      editCVFilterRule(
+        filterId,
+        {
+          id: editingId,
+          name,
+          architecture,
+          ...formVersionParams(),
+        },
+        () => {
+          dispatch(getCVFilterRules(filterId));
+          onClose();
+        },
+      ) :
+      addCVFilterRule(
+        filterId,
+        { name, architecture, ...formVersionParams() }, () => {
+          dispatch(getCVFilterRules(filterId));
+          onClose();
+        },
+      ));
+  };
+
+  const onSelect = (_event, selection) => {
+    setVersionComparator(selection);
+    setVersionComparatorSelectOpen(false);
+  };
+
+  useDeepCompareEffect(() => {
+    if (status === STATUS.ERROR) {
+      setSaving(false);
+    }
+  }, [status, setSaving]);
+
+  return (
+    <Modal
+      title={selectedFilterRuleData ? __('Edit package filter rule') : __('Create package filter rule')}
+      variant={ModalVariant.small}
+      isOpen
+      onClose={onClose}
+      appendTo={document.body}
+    >
+      <Form onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+      >
+        <FormGroup label={__('RPM name')} isRequired fieldId="name">
+          <TextInput
+            isRequired
+            type="text"
+            id="name"
+            aria-label="input_name"
+            name="name"
+            value={name}
+            onChange={value => setName(value)}
+          />
+        </FormGroup>
+        <FormGroup label={__('Architecture')} fieldId="architecture">
+          <TextInput
+            type="text"
+            id="architecture"
+            aria-label="input_architecture"
+            name="architecture"
+            value={architecture}
+            onChange={value => setArchitecture(value)}
+          />
+        </FormGroup>
+        <FormGroup label={__('Version')} fieldId="version_comparator">
+          <Select
+            selections={versionComparator}
+            onSelect={onSelect}
+            isOpen={versionComparatorSelectOpen}
+            onToggle={isExpanded => setVersionComparatorSelectOpen(isExpanded)}
+            id="version_comparator"
+            name="version_comparator"
+            aria-label="version_comparator"
+          >
+            {
+              Object.values(VersionModifiers).map(item => (
+                <SelectOption key={item} value={item}>
+                  {VersionModifiers[item]}
+                </SelectOption>))
+            }
+          </Select>
+        </FormGroup>
+        {showVersion &&
+          <FormGroup label={__('Version')} fieldId="version">
+            <TextInput
+              type="text"
+              id="version"
+              aria-label="input_version"
+              name="version"
+              value={version}
+              onChange={setVersion}
+            />
+          </FormGroup>}
+        {showMinVersion &&
+          <FormGroup label={__('Minimum Version')} fieldId="min_version">
+            <TextInput
+              type="text"
+              id="min_version"
+              aria-label="input_min_version"
+              name="min_version"
+              value={minVersion}
+              onChange={setMinVersion}
+            />
+          </FormGroup>}
+        {showMaxVersion &&
+          <FormGroup label={__('Maximum Version')} fieldId="max_version">
+            <TextInput
+              type="text"
+              id="max_version"
+              aria-label="input_max_version"
+              name="max_version"
+              value={maxVersion}
+              onChange={setMaxVersion}
+            />
+          </FormGroup>}
+        <ActionGroup>
+          <Button
+            aria-label="create_package_filter_rule"
+            variant="primary"
+            isDisabled={saving || submitDisabled}
+            type="submit"
+          >
+            {selectedFilterRuleData ? __('Edit rule') : __('Create rule')}
+          </Button>
+          <Button variant="link" onClick={onClose}>
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+AddEditPackageRuleModal.propTypes = {
+  filterId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  onClose: PropTypes.func,
+  selectedFilterRuleData: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    arch: PropTypes.string,
+    version: PropTypes.string,
+    min_version: PropTypes.string,
+    max_version: PropTypes.string,
+  }),
+};
+
+AddEditPackageRuleModal.defaultProps = {
+  onClose: null,
+  selectedFilterRuleData: undefined,
+};
+
+export default AddEditPackageRuleModal;

data/webpack/scenes/ContentViews/Details/Filters/__tests__/CVContainerImageFilterContent.fixtures.json

@@ -0,0 +1,42 @@
+{
+    "total": 4,
+    "subtotal": 4,
+    "page": "1",
+    "per_page": "20",
+    "error": null,
+    "search": null,
+    "sort": {
+        "by": "id",
+        "order": "asc"
+    },
+    "results": [
+        {
+            "content_view_filter_id": 195,
+            "id": 35,
+            "name": "bob",
+            "created_at": "2021-08-20 13:11:21 -0600",
+            "updated_at": "2021-08-20 13:11:21 -0600"
+        },
+        {
+            "content_view_filter_id": 195,
+            "id": 37,
+            "name": "steve",
+            "created_at": "2021-08-23 12:08:03 -0600",
+            "updated_at": "2021-08-23 12:08:03 -0600"
+        },
+        {
+            "content_view_filter_id": 195,
+            "id": 38,
+            "name": "william",
+            "created_at": "2021-08-23 12:08:43 -0600",
+            "updated_at": "2021-08-23 12:08:43 -0600"
+        },
+        {
+            "content_view_filter_id": 195,
+            "id": 39,
+            "name": "brandon",
+            "created_at": "2021-08-23 12:08:54 -0600",
+            "updated_at": "2021-08-23 12:08:54 -0600"
+        }
+    ]
+}

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

@@ -0,0 +1,265 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { Route } from 'react-router-dom';
+
+import { cvFilterDetailsKey } from '../../../ContentViewsConstants';
+import nock, {
+  nockInstance,
+  assertNockRequest,
+  mockAutocomplete,
+  mockSetting,
+} from '../../../../../test-utils/nockWrapper';
+import api from '../../../../../services/api';
+import CVContainerImageFilterContent from '../CVContainerImageFilterContent';
+import cvFilterFixtures from './CVContainerImageFilterContent.fixtures.json';
+import details from '../../../../ContentViews/__tests__/mockDetails.fixtures.json';
+
+const afterDeleteFilterResultsArray = [...cvFilterFixtures.results];
+afterDeleteFilterResultsArray.shift();
+const { name: firstResultName } = cvFilterFixtures.results[0];
+const { name: secondResultName } = cvFilterFixtures.results[1];
+const cvFiltersUpdateDeletePath = api.getApiUrl('/content_view_filters/195/rules/35');
+const cvFilterRulesPath = api.getApiUrl('/content_view_filters/195/rules');
+
+const addedRule = {
+  content_view_filter_id: 195,
+  id: 99,
+  name: 'walter',
+  created_at: '2021-08-20 13:11:21 -0600',
+  updated_at: '2021-08-20 13:11:21 -0600',
+};
+
+const autocompleteUrl = '/content_view_filters/195/rules/auto_complete_search';
+const renderOptions = {
+  apiNamespace: cvFilterDetailsKey(13, 195),
+  routerParams: {
+    initialEntries: [{ pathname: '/content_views/13#/filters/195' }],
+    initialIndex: 1,
+  },
+};
+
+const withCVRoute = component => <Route path="/content_views/:id([0-9]+)#/filters/:filterId([0-9]+)">{component}</Route>;
+
+let searchDelayScope;
+let autoSearchScope;
+beforeEach(() => {
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
+  // Autosearch can cause some asynchronous issues with the typing timeout, using basic search
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', false);
+});
+
+afterEach(() => {
+  assertNockRequest(searchDelayScope);
+  assertNockRequest(autoSearchScope);
+  nock.cleanAll();
+});
+
+test('Can view container image filter rules', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+  const cvFiltersScope = nockInstance
+    .get(cvFilterRulesPath)
+    .query(true)
+    .reply(200, cvFilterFixtures);
+
+
+  const { queryByText, getByLabelText } =
+    renderWithRedux(
+      withCVRoute(<CVContainerImageFilterContent filterId={195} details={details} />),
+      renderOptions,
+    );
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(firstResultName)).not.toBeInTheDocument();
+  await patientlyWaitFor(() => {
+    expect(queryByText(firstResultName)).toBeInTheDocument();
+    expect(getByLabelText('Select all rows')).toBeInTheDocument();
+    getByLabelText('Select all rows').click();
+  });
+
+  await patientlyWaitFor(() => {
+    expect(getByLabelText('bulk_actions')).toBeInTheDocument();
+    getByLabelText('bulk_actions').click();
+    expect(getByLabelText('bulk_remove')).toHaveAttribute('aria-disabled', 'false');
+  });
+
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(cvFiltersScope, done);
+});
+
+// Remove
+test('Can remove filter rules', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+  const cvFiltersScope = nockInstance
+    .get(cvFilterRulesPath)
+    .query(true)
+    .reply(200, cvFilterFixtures);
+
+  const cvFilterDeleteScope = nockInstance
+    .delete(cvFiltersUpdateDeletePath)
+    .reply(200, {});
+
+  const cvFiltersCallbackScope = nockInstance
+    .get(cvFilterRulesPath)
+    .query(true)
+    .reply(200, { ...cvFilterFixtures, results: afterDeleteFilterResultsArray });
+
+  const { queryByText, getAllByLabelText } =
+    renderWithRedux(
+      withCVRoute(<CVContainerImageFilterContent filterId={195} details={details} />),
+      renderOptions,
+    );
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(firstResultName)).not.toBeInTheDocument();
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(firstResultName)).toBeInTheDocument();
+    expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  fireEvent.click(getAllByLabelText('Actions')[0]);
+
+  await patientlyWaitFor(() => {
+    expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'true');
+    expect(queryByText('Remove')).toBeInTheDocument();
+    fireEvent.click(queryByText('Remove'));
+  });
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(secondResultName)).toBeInTheDocument();
+    expect(queryByText(firstResultName)).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(cvFiltersScope);
+  assertNockRequest(cvFilterDeleteScope);
+  assertNockRequest(cvFiltersCallbackScope, done);
+});
+
+
+// Add
+test('Can add filter rules', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+  const cvFiltersScope = nockInstance
+    .get(cvFilterRulesPath)
+    .query(true)
+    .reply(200, cvFilterFixtures);
+
+  const cvFilterAddScope = nockInstance
+    .post(cvFilterRulesPath)
+    .reply(200, addedRule);
+
+  const cvFiltersCallbackScope = nockInstance
+    .get(cvFilterRulesPath)
+    .query(true)
+    .reply(200, { ...cvFilterFixtures, results: [...cvFilterFixtures.results, addedRule] });
+
+  const { queryByText, getByLabelText } =
+    renderWithRedux(
+      withCVRoute(<CVContainerImageFilterContent filterId={195} details={details} />),
+      renderOptions,
+    );
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(firstResultName)).not.toBeInTheDocument();
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(firstResultName)).toBeInTheDocument();
+    fireEvent.click(getByLabelText('add_filter_rule'));
+  });
+
+
+  await patientlyWaitFor(() => {
+    expect(getByLabelText('input_tag')).toBeInTheDocument();
+  });
+
+  fireEvent.change(getByLabelText('input_tag'), { target: { value: addedRule.name } });
+
+  await patientlyWaitFor(() => {
+    expect(getByLabelText('add_edit_filter_rule')).toBeInTheDocument();
+    expect(getByLabelText('add_edit_filter_rule')).toHaveAttribute('aria-disabled', 'false');
+  });
+
+  fireEvent.submit(getByLabelText('input_tag'));
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(addedRule.name)).toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(cvFiltersScope);
+  assertNockRequest(cvFilterAddScope);
+  assertNockRequest(cvFiltersCallbackScope, done);
+});
+
+
+// Edit
+test('Can edit filter rules', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
+
+  const cvFiltersScope = nockInstance
+    .get(cvFilterRulesPath)
+    .query(true)
+    .reply(200, cvFilterFixtures);
+
+  const cvFilterAddScope = nockInstance
+    .put(cvFiltersUpdateDeletePath)
+    .reply(200, addedRule);
+
+  const cvFiltersCallbackScope = nockInstance
+    .get(cvFilterRulesPath)
+    .query(true)
+    .reply(200, {
+      ...cvFilterFixtures,
+      results: cvFilterFixtures.results.map((result) => {
+        if (result.name === firstResultName) {
+          return { ...result, name: addedRule.name };
+        }
+        return result;
+      }),
+    });
+
+  const { queryByText, getAllByLabelText, getByLabelText } =
+    renderWithRedux(
+      withCVRoute(<CVContainerImageFilterContent filterId={195} details={details} />),
+      renderOptions,
+    );
+
+  // Nothing will show at first, page is loading
+  expect(queryByText(firstResultName)).not.toBeInTheDocument();
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(firstResultName)).toBeInTheDocument();
+    expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  fireEvent.click(getAllByLabelText('Actions')[0]);
+
+  await patientlyWaitFor(() => {
+    expect(getAllByLabelText('Actions')[0]).toHaveAttribute('aria-expanded', 'true');
+    expect(queryByText('Edit')).toBeInTheDocument();
+    fireEvent.click(queryByText('Edit'));
+  });
+
+  fireEvent.change(getByLabelText('input_tag'), { target: { value: addedRule.name } });
+
+  await patientlyWaitFor(() => {
+    expect(getByLabelText('add_edit_filter_rule')).toBeInTheDocument();
+    expect(getByLabelText('add_edit_filter_rule')).toHaveAttribute('aria-disabled', 'false');
+  });
+
+  fireEvent.submit(getByLabelText('input_tag'));
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(firstResultName)).not.toBeInTheDocument();
+    expect(queryByText(addedRule.name)).toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(cvFiltersScope);
+  assertNockRequest(cvFilterAddScope);
+  assertNockRequest(cvFiltersCallbackScope, done);
+});