katello 3.18.5 → 4.0.0.rc1

data/webpack/scenes/ContentViews/Create/CreateContentViewForm.js

@@ -0,0 +1,175 @@
+import { STATUS } from 'foremanReact/constants';
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+import { Form, FormGroup, TextInput, TextArea, Checkbox, ActionGroup, Button, Tile, Grid, GridItem } from '@patternfly/react-core';
+import { createContentView } from '../ContentViewsActions';
+import { selectCreateContentViews, selectCreateContentViewStatus, selectCreateContentViewError } from './ContentViewCreateSelectors';
+import { LabelDependencies, LabelAutoPublish, LabelImportOnly } from './ContentViewFormComponents';
+import ContentViewIcon from '../components/ContentViewIcon';
+
+const CreateContentViewForm = ({ setModalOpen }) => {
+  const dispatch = useDispatch();
+  const [name, setName] = useState('');
+  const [label, setLabel] = useState('');
+  const [description, setDescription] = useState('');
+  const [composite, setComposite] = useState(false);
+  const [component, setComponent] = useState(true);
+  const [autoPublish, setAutoPublish] = useState(false);
+  const [importOnly, setImportOnly] = useState(false);
+  const [dependencies, setDependencies] = useState(false);
+  const [redirect, setRedirect] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const response = useSelector(selectCreateContentViews);
+  const status = useSelector(selectCreateContentViewStatus);
+  const error = useSelector(selectCreateContentViewError);
+
+  useEffect(() => {
+    const { id } = response;
+    if (id && status === STATUS.RESOLVED) {
+      setSaving(false);
+      setRedirect(true);
+    } else if (status === STATUS.ERROR) {
+      setSaving(false);
+    }
+  }, [JSON.stringify(response), status, error]);
+
+  const onSave = () => {
+    setSaving(true);
+    dispatch(createContentView({
+      name,
+      label,
+      description,
+      composite,
+      solve_dependencies: dependencies,
+      auto_publish: (autoPublish && composite),
+      import_only: importOnly,
+    }));
+  };
+
+  useEffect(
+    () => {
+      setLabel(name.replace(/ /g, '_'));
+    },
+    [name],
+  );
+
+  if (redirect) {
+    const { id } = response;
+    return (<Redirect to={`/labs/content_views/${id}`} />);
+  }
+
+  return (
+    <Form>
+      <FormGroup label="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="Label" isRequired fieldId="label">
+        <TextInput
+          isRequired
+          type="text"
+          id="label"
+          aria-label="input_label"
+          name="label"
+          value={label}
+          onChange={value => setLabel(value)}
+        />
+      </FormGroup>
+      <FormGroup label="Description" fieldId="description">
+        <TextArea
+          isRequired
+          type="text"
+          id="description"
+          name="description"
+          aria-label="input_description"
+          value={description}
+          onChange={value => setDescription(value)}
+        />
+      </FormGroup>
+      <FormGroup isInline fieldId="type" label="Type">
+        <Grid hasGutter>
+          <GridItem span={6}>
+            <Tile
+              isStacked
+              aria-label="component_tile"
+              icon={<ContentViewIcon composite={false} />}
+              id="component"
+              title="Component content view"
+              onClick={() => { setComponent(true); setComposite(false); }}
+              isSelected={component}
+            >
+              Single content view consisting of repositories
+            </Tile>
+          </GridItem>
+          <GridItem span={6}>
+            <Tile
+              isStacked
+              aria-label="composite_tile"
+              icon={<ContentViewIcon composite />}
+              id="composite"
+              title="Composite content view"
+              onClick={() => { setComposite(true); setComponent(false); }}
+              isSelected={composite}
+            >
+              Consists of component content views
+            </Tile>
+          </GridItem>
+        </Grid>
+      </FormGroup>
+      {!composite &&
+        <FormGroup isInline fieldId="dependencies">
+          <Checkbox
+            id="dependencies"
+            name="dependencies"
+            label={LabelDependencies()}
+            isChecked={dependencies}
+            onChange={checked => setDependencies(checked)}
+          />
+        </FormGroup>}
+      {!composite &&
+        <FormGroup isInline fieldId="importOnly">
+          <Checkbox
+            id="importOnly"
+            name="importOnly"
+            label={LabelImportOnly()}
+            isChecked={importOnly}
+            onChange={checked => setImportOnly(checked)}
+          />
+        </FormGroup>}
+      {composite &&
+        <FormGroup isInline fieldId="autoPublish">
+          <Checkbox
+            id="autoPublish"
+            name="autoPublish"
+            label={LabelAutoPublish()}
+            isChecked={autoPublish}
+            onChange={checked => setAutoPublish(checked)}
+          />
+        </FormGroup>}
+      <ActionGroup>
+        <Button aria-label="create_content_view" variant="primary" isDisabled={saving} onClick={() => onSave()}>Create content view</Button>
+        <Button variant="link" onClick={() => setModalOpen(false)}>Cancel</Button>
+      </ActionGroup>
+    </Form>
+  );
+};
+
+CreateContentViewForm.propTypes = {
+  setModalOpen: PropTypes.func,
+};
+
+CreateContentViewForm.defaultProps = {
+  setModalOpen: null,
+};
+
+export default CreateContentViewForm;

data/webpack/scenes/ContentViews/Create/CreateContentViewModal.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalVariant } from '@patternfly/react-core';
+import CreateContentViewForm from './CreateContentViewForm';
+
+const CreateContentViewModal = ({ show, setIsOpen }) => (
+  <Modal
+    title="Create content view"
+    variant={ModalVariant.small}
+    isOpen={show}
+    onClose={() => { setIsOpen(false); }}
+    appendTo={document.body}
+  ><CreateContentViewForm setModalOpen={setIsOpen} />
+  </Modal>
+);
+
+CreateContentViewModal.propTypes = {
+  show: PropTypes.bool,
+  setIsOpen: PropTypes.func,
+};
+
+CreateContentViewModal.defaultProps = {
+  show: false,
+  setIsOpen: null,
+};
+
+export default CreateContentViewModal;

data/webpack/scenes/ContentViews/Create/__tests__/contentViewCreateResult.fixtures.json

@@ -0,0 +1,42 @@
+{
+  "content_host_count": 0,
+  "composite": false,
+  "component_ids": [],
+  "default": false,
+  "force_puppet_environment": false,
+  "version_count": 0,
+  "latest_version": null,
+  "auto_publish": false,
+  "solve_dependencies": false,
+  "import_only": false,
+  "repository_ids": [],
+  "id": 34,
+  "name": "1232123",
+  "label": "1232123",
+  "description": "",
+  "organization_id": 1,
+  "organization": {
+    "name": "Default Organization",
+    "label": "Default_Organization",
+    "id": 1
+  },
+  "created_at": "2020-12-14 12:45:59 -0500",
+  "updated_at": "2020-12-14 12:45:59 -0500",
+  "environments": [],
+  "repositories": [],
+  "puppet_modules": [],
+  "versions": [],
+  "components": [],
+  "content_view_components": [],
+  "activation_keys": [],
+  "next_version": "1.0",
+  "last_published": null,
+  "permissions": {
+    "view_content_views": true,
+    "edit_content_views": true,
+    "destroy_content_views": true,
+    "publish_content_views": true,
+    "promote_or_remove_content_views": true
+  },
+  "duplicate_repositories_to_publish": []
+}

data/webpack/scenes/ContentViews/Create/__tests__/createContentView.test.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+
+import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
+import api from '../../../../services/api';
+import CreateContentViewForm from '../CreateContentViewForm';
+
+const cvCreateData = require('./contentViewCreateResult.fixtures.json');
+
+const cvCreatePath = api.getApiUrl('/content_views');
+
+const setModalOpen = jest.fn();
+
+const createDetails = {
+  name: '1232123',
+  label: '1232123',
+  description: '',
+  composite: false,
+  solve_dependencies: false,
+  auto_publish: false,
+  import_only: false,
+};
+
+const createdCVDetails = { ...cvCreateData };
+
+const form = <CreateContentViewForm setModalOpen={setModalOpen} />;
+
+test('Can save content view from form', async (done) => {
+  const createscope = nockInstance
+    .post(cvCreatePath, createDetails)
+    .reply(201, createdCVDetails);
+  const { queryByText, getByLabelText } = renderWithRedux(form);
+  expect(queryByText('Description')).toBeInTheDocument();
+
+  fireEvent.change(getByLabelText('input_name'), { target: { value: '1232123' } });
+
+  await patientlyWaitFor(() => { expect(getByLabelText('input_label')).toHaveAttribute('value', '1232123'); });
+
+  getByLabelText('create_content_view').click();
+
+  assertNockRequest(createscope, done);
+});
+
+test('Form closes itself upon save', async (done) => {
+  const createscope = nockInstance
+    .post(cvCreatePath, createDetails)
+    .reply(201, createdCVDetails);
+  const { getByText, queryByText, getByLabelText } = renderWithRedux(form);
+  expect(getByText('Description')).toBeInTheDocument();
+  expect(getByText('Name')).toBeInTheDocument();
+  expect(getByText('Label')).toBeInTheDocument();
+
+  fireEvent.change(getByLabelText('input_name'), { target: { value: '1232123' } });
+
+  await patientlyWaitFor(() => { expect(getByLabelText('input_label')).toHaveAttribute('value', '1232123'); });
+
+  getByLabelText('create_content_view').click();
+  // Form closes it self on success
+  await patientlyWaitFor(() => {
+    expect(queryByText('Description')).not.toBeInTheDocument();
+  });
+
+  assertNockRequest(createscope, done);
+});
+
+test('Displays dependent fields correctly', () => {
+  const { getByText, queryByText, getByLabelText } = renderWithRedux(form);
+  expect(getByText('Description')).toBeInTheDocument();
+  expect(getByText('Name')).toBeInTheDocument();
+  expect(getByText('Label')).toBeInTheDocument();
+  expect(getByText('Composite content view')).toBeInTheDocument();
+  expect(getByText('Component content view')).toBeInTheDocument();
+  expect(getByText('Solve Dependencies')).toBeInTheDocument();
+  expect(queryByText('Auto Publish')).not.toBeInTheDocument();
+  expect(getByText('Import Only')).toBeInTheDocument();
+
+  // label auto_set
+  fireEvent.change(getByLabelText('input_name'), { target: { value: '123 2123' } });
+  expect(getByLabelText('input_label')).toHaveAttribute('value', '123_2123');
+
+  // display Auto Publish when Composite CV
+  fireEvent.click(getByLabelText('composite_tile'));
+  expect(queryByText('Solve Dependencies')).not.toBeInTheDocument();
+  expect(getByText('Auto Publish')).toBeInTheDocument();
+  expect(queryByText('Import Only')).not.toBeInTheDocument();
+
+  // display Solve Dependencies when Component CV
+  fireEvent.click(getByLabelText('component_tile'));
+  expect(getByText('Solve Dependencies')).toBeInTheDocument();
+  expect(queryByText('Auto Publish')).not.toBeInTheDocument();
+  expect(getByText('Import Only')).toBeInTheDocument();
+});

data/webpack/scenes/ContentViews/Create/index.js

@@ -0,0 +1,4 @@
+import { withRouter } from 'react-router-dom';
+import CreateContentViewModal from './CreateContentViewModal';
+
+export default withRouter(CreateContentViewModal);

data/webpack/scenes/ContentViews/Details/ContentViewDetailActions.js

@@ -8,8 +8,10 @@ import {
   UPDATE_CONTENT_VIEW_SUCCESS,
   NOT_ADDED,
   ALL_STATUSES,
+  REPOSITORY_TYPES,
   cvDetailsKey,
   cvDetailsRepoKey,
+  cvDetailsFilterKey,
 } from '../ContentViewsConstants';
 import api from '../../../services/api';
 
@@ -63,4 +65,18 @@ export const getContentViewRepositories = (cvId, params, status) => {
   });
 };
 
+export const getRepositoryTypes = () => get({
+  type: API_OPERATIONS.GET,
+  key: REPOSITORY_TYPES,
+  errorToast: error => __(`Something went wrong while retrieving the repository types! ${error}`),
+  url: api.getApiUrl('/repositories/repository_types'),
+});
+
+export const getContentViewFilters = (cvId, params) => get({
+  key: cvDetailsFilterKey(cvId),
+  params: { content_view_id: cvId, ...params },
+  errorToast: error => __(`Something went wrong while retrieving the content view filters! ${error}`),
+  url: api.getApiUrl('/content_view_filters'),
+});
+
 export default getContentViewDetails;

data/webpack/scenes/ContentViews/Details/ContentViewDetailSelectors.js

@@ -4,7 +4,12 @@ import {
   selectAPIResponse,
 } from 'foremanReact/redux/API/APISelectors';
 import { STATUS } from 'foremanReact/constants';
-import { cvDetailsKey, cvDetailsRepoKey } from '../ContentViewsConstants';
+import {
+  cvDetailsKey,
+  cvDetailsRepoKey,
+  cvDetailsFilterKey,
+  REPOSITORY_TYPES,
+} from '../ContentViewsConstants';
 
 export const selectCVDetails = (state, cvId) =>
   selectAPIResponse(state, cvDetailsKey(cvId)) || {};
@@ -24,5 +29,19 @@ export const selectCVReposStatus = (state, cvId) =>
 export const selectCVReposError = (state, cvId) =>
   selectAPIError(state, cvDetailsRepoKey(cvId));
 
+export const selectRepoTypes = state =>
+  selectAPIResponse(state, REPOSITORY_TYPES) || {};
+
+export const selectRepoTypesStatus = state =>
+  selectAPIStatus(state, REPOSITORY_TYPES) || STATUS.PENDING;
+
+export const selectCVFilters = (state, cvId) =>
+  selectAPIResponse(state, cvDetailsFilterKey(cvId)) || {};
+
+export const selectCVFiltersStatus = (state, cvId) =>
+  selectAPIStatus(state, cvDetailsFilterKey(cvId)) || STATUS.PENDING;
+
+export const selectCVFiltersError = (state, cvId) =>
+  selectAPIError(state, cvDetailsFilterKey(cvId));
 
 export const selectIsCVUpdating = state => state.katello?.contentViewDetails?.updating;

data/webpack/scenes/ContentViews/Details/ContentViewDetails.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
-import { Grid, GridItem, TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Grid, GridItem, TextContent, Text, TextVariants, Button } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 
 import DetailsContainer from './DetailsContainer';
 import ContentViewInfo from './ContentViewInfo';
 import ContentViewRepositories from './Repositories/ContentViewRepositories';
+import ContentViewFilters from './Filters/ContentViewFilters';
 import { selectCVDetails } from './ContentViewDetailSelectors';
 import TabbedView from '../../../components/TabbedView';
 
@@ -30,27 +32,35 @@ const ContentViewDetails = ({ match }) => {
     },
     {
       title: __('Filters'),
-      content: <React.Fragment>Filters</React.Fragment>,
+      content: <ContentViewFilters cvId={cvId} />,
     },
     {
       title: __('History'),
       content: <React.Fragment>History</React.Fragment>,
     },
-    {
-      title: __('Tasks'),
-      content: <React.Fragment>Tasks</React.Fragment>,
-    },
   ];
 
   return (
     <Grid className="grid-with-margin">
       <DetailsContainer cvId={cvId}>
         <React.Fragment>
-          <GridItem span={12}>
+          <GridItem span={8}>
             <TextContent>
               <Text component={TextVariants.h1}>{`${name} content view`}</Text>
             </TextContent>
           </GridItem>
+          <GridItem span={4} style={{ textAlign: 'right' }}>
+            <Button
+              component="a"
+              aria-label="view tasks button"
+              href={`/foreman_tasks/tasks?search=resource_type%3D+Katello%3A%3AContentView+resource_id%3D${cvId}`}
+              target="_blank"
+              variant="secondary"
+            >
+              {'View tasks '}
+              <ExternalLinkAltIcon />
+            </Button>
+          </GridItem>
           <GridItem span={12}>
             <TabbedView tabs={tabs} />
           </GridItem>

data/webpack/scenes/ContentViews/Details/ContentViewInfo.js

@@ -8,6 +8,7 @@ import {
   TextListVariants,
   TextListItem,
   TextListItemVariants,
+  Switch,
 } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -18,6 +19,8 @@ import Loading from '../../../components/Loading';
 import ContentViewIcon from '../components/ContentViewIcon';
 import ActionableDetail from '../../../components/ActionableDetail';
 import './contentViewInfo.scss';
+import { dependenciesHelpText, autoPublishHelpText } from '../helpers';
+import { LabelImportOnly } from '../Create/ContentViewFormComponents';
 
 const ContentViewInfo = ({ cvId, details }) => {
   const dispatch = useDispatch();
@@ -29,19 +32,9 @@ const ContentViewInfo = ({ cvId, details }) => {
     composite,
     solve_dependencies: solveDependencies,
     auto_publish: autoPublish,
+    import_only: importOnly,
   } = details;
 
-  const autoPublishTooltip = __('Applicable only for composite views. Auto publish composite ' +
-    'view when a new version of a component content view is created. Also note auto publish will ' +
-    'only happen when the component is marked "latest".');
-
-  const solveDependenciesTooltip = __('This option will solve RPM and Module Stream dependencies ' +
-    'on every publish of this Content View. Dependency solving significantly increases publish ' +
-    'time (publishes can take over three times as long) and filters will be ignored when adding ' +
-    'packages to solve dependencies. Also, certain scenarios involving errata may still cause ' +
-    'dependency errors.');
-
-
   if (updating) return <Loading size="sm" showText={false} />;
   const onEdit = (val, attribute) => dispatch(updateContentView(cvId, { [attribute]: val }));
   return (
@@ -85,7 +78,7 @@ const ContentViewInfo = ({ cvId, details }) => {
             attribute="auto_publish"
             value={autoPublish}
             onEdit={onEdit}
-            tooltip={autoPublishTooltip}
+            tooltip={autoPublishHelpText}
             boolean
           />) :
           (<ActionableDetail
@@ -93,9 +86,21 @@ const ContentViewInfo = ({ cvId, details }) => {
             attribute="solve_dependencies"
             value={solveDependencies}
             onEdit={onEdit}
-            tooltip={solveDependenciesTooltip}
+            tooltip={dependenciesHelpText}
             boolean
           />)}
+        <TextListItem component={TextListItemVariants.dt}>
+          {LabelImportOnly()}
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd} className="foreman-spaced-list">
+          <Switch
+            id="import_only_switch"
+            aria-label="import_only_switch"
+            isChecked={importOnly}
+            className="foreman-spaced-list"
+            disabled
+          />
+        </TextListItem>
       </TextList>
     </TextContent>
   );
@@ -110,6 +115,7 @@ ContentViewInfo.propTypes = {
     composite: PropTypes.bool,
     solve_dependencies: PropTypes.bool,
     auto_publish: PropTypes.bool,
+    import_only: PropTypes.bool,
   }).isRequired,
 };
 

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

@@ -0,0 +1,40 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import RepoIcon from '../Repositories/RepoIcon';
+import { capitalize } from '../../../../utils/helpers';
+
+const typeName = (type, errataByDate) => {
+  if (errataByDate) return 'Errata - by date range';
+  const nameMap = {
+    rpm: __('RPM'),
+    docker: __('Container image tag'),
+    modulemd: __('Module stream'),
+    erratum: __('Errata'),
+  };
+
+  if (Object.prototype.hasOwnProperty.call(nameMap, type)) return nameMap[type];
+  return capitalize(type.replace('_', ' '));
+};
+
+const ContentType = ({ type, errataByDate }) => {
+  const repoType = ['rpm', 'modulemd', 'rpm', 'erratum', 'package_group'].includes(type) ? 'yum' : type;
+  return (
+    <Fragment>
+      <span style={{ marginRight: '5px' }}><RepoIcon type={repoType} /></span>
+      {typeName(type, errataByDate)}
+    </Fragment>
+  );
+};
+
+ContentType.propTypes = {
+  type: PropTypes.string.isRequired,
+  errataByDate: PropTypes.bool,
+};
+
+ContentType.defaultProps = {
+  errataByDate: false,
+};
+
+export default ContentType;