katello 4.1.4 → 4.2.0.rc1

data/webpack/scenes/ContentViews/Details/__tests__/contentViewDetail.test.js

@@ -16,6 +16,7 @@ jest.mock('../Repositories/ContentViewRepositories.js', () => () => 'mocked!');
 jest.mock('../Filters/ContentViewFilters.js', () => () => 'mocked!');
 jest.mock('../Histories/ContentViewHistories.js', () => () => 'mocked!');
 jest.mock('../Versions/ContentViewVersions.js', () => () => 'mocked!');
+jest.mock('../../Publish/PublishContentViewWizard.js', () => () => 'mocked!');
 
 test('Can call API and show details on page load', async (done) => {
   const { label, name, description } = cvDetailData;
@@ -33,6 +34,8 @@ test('Can call API and show details on page load', async (done) => {
     expect(getByLabelText('name text value')).toHaveTextContent(name);
     expect(getByLabelText('label text value')).toHaveTextContent(label);
     expect(getByLabelText('description text value')).toHaveTextContent(description);
+    expect(getByLabelText('cv_breadcrumb')).toBeInTheDocument();
+    expect(getByLabelText('cv_breadcrumb_cv')).toHaveTextContent(name);
   });
 
   assertNockRequest(scope, done);

data/webpack/scenes/ContentViews/Publish/CVPublishFinish.js

@@ -0,0 +1,184 @@
+import { STATUS } from 'foremanReact/constants';
+import React, { useState, useEffect, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { Bullseye, Button, Grid, GridItem,
+  Progress, ProgressSize, ProgressMeasureLocation,
+  ProgressVariant, EmptyState, EmptyStateIcon, EmptyStateVariant,
+  Title } from '@patternfly/react-core';
+import { ExternalLinkAltIcon, InProgressIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  selectPublishContentViewsError, selectPublishContentViews,
+  selectPublishContentViewStatus,
+} from './ContentViewPublishSelectors';
+import { selectPublishTaskPoll, selectPublishTaskPollStatus } from '../Details/ContentViewDetailSelectors';
+import getContentViews, { publishContentView } from '../ContentViewsActions';
+import Loading from '../../../components/Loading';
+import EmptyStateMessage from '../../../components/Table/EmptyStateMessage';
+import { cvVersionPublishKey } from '../ContentViewsConstants';
+import { startPollingTask, stopPollingTask, toastTaskFinished } from '../../Tasks/TaskActions';
+import getContentViewDetails from '../Details/ContentViewDetailActions';
+
+const CVPublishFinish = ({
+  cvId,
+  userCheckedItems, setUserCheckedItems,
+  forcePromote, description, setDescription,
+  setIsOpen, versionCount, currentStep, setCurrentStep,
+}) => {
+  const dispatch = useDispatch();
+  const [publishDispatched, setPublishDispatched] = useState(false);
+  const [saving, setSaving] = useState(true);
+  const [polling, setPolling] = useState(false);
+  const [taskErrored, setTaskErrored] = useState(false);
+  const response = useSelector(state => selectPublishContentViews(state, cvId, versionCount));
+  const status = useSelector(state => selectPublishContentViewStatus(state, cvId, versionCount));
+  const error = useSelector(state => selectPublishContentViewsError(state, cvId, versionCount));
+  const pollResponse = useSelector(state =>
+    selectPublishTaskPoll(state, cvVersionPublishKey(cvId, versionCount)), shallowEqual);
+  const pollResponseStatus = useSelector(state =>
+    selectPublishTaskPollStatus(state, cvVersionPublishKey(cvId, versionCount)), shallowEqual);
+
+  const progressCompleted = () => (pollResponse.progress ? pollResponse.progress * 100 : 0);
+
+  const handleEndTask = useCallback(({ taskComplete }) => {
+    if (currentStep !== 1) {
+      dispatch(stopPollingTask(cvVersionPublishKey(cvId, versionCount)));
+      setCurrentStep(1);
+      setIsOpen(false);
+      dispatch(getContentViewDetails(cvId));
+      dispatch(getContentViews);
+      if (taskComplete) {
+        dispatch(toastTaskFinished(pollResponse));
+      }
+    }
+  }, [currentStep, cvId, dispatch, pollResponse, setCurrentStep, setIsOpen, versionCount]);
+
+
+  useEffect(() => {
+    if (currentStep !== 3 && !publishDispatched) {
+      setCurrentStep(3);
+      setSaving(true);
+      setPublishDispatched(true);
+      dispatch(publishContentView({
+        id: cvId,
+        versionCount,
+        description,
+        environment_ids: userCheckedItems.map(item => item.id),
+        is_force_promote: (forcePromote.length > 0),
+      }));
+      setDescription('');
+      setUserCheckedItems([]);
+    }
+  }, [dispatch, setSaving, publishDispatched, setPublishDispatched,
+    setDescription, setUserCheckedItems, currentStep, setCurrentStep,
+    cvId, versionCount, description, forcePromote, userCheckedItems]);
+
+  useDeepCompareEffect(() => {
+    if (!response) return;
+    const pollPublishTask = (cvPublishVersionKey, task) => {
+      if (!polling) dispatch(startPollingTask(cvPublishVersionKey, task));
+    };
+
+    setSaving(true);
+    const { id } = response;
+    if (id && status === STATUS.RESOLVED) {
+      setSaving(false);
+      pollPublishTask(cvVersionPublishKey(cvId, versionCount), response);
+      setPolling(true);
+    } else if (status === STATUS.ERROR) {
+      setSaving(false);
+    }
+  }, [response, status, error, cvId, versionCount,
+    dispatch, polling, setPolling, setSaving]);
+
+
+  useDeepCompareEffect(() => {
+    const { state, result } = pollResponse;
+    if (state === 'paused' || result === 'error') {
+      setTaskErrored(true);
+      setTimeout(() => {
+        handleEndTask({ taskComplete: true });
+      }, 500);
+    }
+    if (state === 'stopped' && result === 'success') {
+      setTimeout(() => {
+        handleEndTask({ taskComplete: true });
+      }, 500);
+    }
+  }, [pollResponse, dispatch, setTaskErrored,
+    setPolling, setIsOpen, pollResponseStatus, handleEndTask]);
+
+  if (saving) {
+    return <Loading />;
+  }
+  if (polling && pollResponse) {
+    return (
+      <>
+        <EmptyState style={{ marginTop: '10px' }} variant={EmptyStateVariant.large}>
+          <EmptyStateIcon icon={InProgressIcon} />
+          <Title headingLevel="h2" size="lg">
+            {__('Publishing content view')}
+          </Title>
+        </EmptyState>
+        <Grid hasGutter>
+          <GridItem span={12} rowSpan={19}>
+            <Progress
+              value={progressCompleted()}
+              title={__('In progress')}
+              measureLocation={ProgressMeasureLocation.outside}
+              variant={taskErrored ? ProgressVariant.danger : ProgressVariant.default}
+              size={ProgressSize.lg}
+            />
+          </GridItem>
+          <GridItem style={{ marginTop: '10px' }} span={12} rowSpan={1}>
+            <Bullseye>
+              <Button
+                onClick={() => {
+                handleEndTask({ taskComplete: false });
+              }}
+                variant="primary"
+                aria-label="publish_content_view"
+              >
+                {__('Close')}
+              </Button>
+              <Button
+                component="a"
+                aria-label="view tasks button"
+                href={`/foreman_tasks/tasks/${pollResponse.id}`}
+                target="_blank"
+                variant="link"
+              >
+                {__(' View task details ')}
+                <ExternalLinkAltIcon />
+              </Button>
+            </Bullseye>
+          </GridItem>
+        </Grid>
+      </>
+    );
+  }
+  if (status === STATUS.PENDING) return (<Loading />);
+  if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
+  return <Loading />;
+};
+
+CVPublishFinish.propTypes = {
+  cvId: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]).isRequired,
+  forcePromote: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  description: PropTypes.string.isRequired,
+  setDescription: PropTypes.func.isRequired,
+  userCheckedItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  setUserCheckedItems: PropTypes.func.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  versionCount: PropTypes.number.isRequired,
+  currentStep: PropTypes.number.isRequired,
+  setCurrentStep: PropTypes.func.isRequired,
+};
+
+
+export default CVPublishFinish;

data/webpack/scenes/ContentViews/Publish/CVPublishForm.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Alert, Switch, Flex, FlexItem, TextContent, Text, TextVariants, Form, FormGroup, TextArea } from '@patternfly/react-core';
+import { EnterpriseIcon, RegistryIcon } from '@patternfly/react-icons';
+import EnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPaths';
+import ComponentEnvironments from '../Details/ComponentContentViews/ComponentEnvironments';
+import './cvPublishForm.scss';
+
+const CVPublishForm = ({
+  description,
+  setDescription,
+  details,
+  userCheckedItems,
+  setUserCheckedItems,
+  promote,
+  setPromote,
+  forcePromote,
+}) => {
+  const {
+    name, composite, next_version: nextVersion,
+  } = details;
+
+  return (
+    <>
+      <>
+        <TextContent>
+          <Text style={{ marginBottom: '1em' }} component={TextVariants.h1}>{__('Publish')}</Text>
+        </TextContent>
+        <Flex flex={{ default: 'inlineFlex' }}>
+          <FlexItem>{__('A new version of ')}<b>{composite ? <RegistryIcon /> : <EnterpriseIcon />} {name}</b>
+            {__(' will be created and automatically promoted to the ' +
+          'Library environment. You can promote to other environments as well. ')}
+          </FlexItem>
+        </Flex>
+        <TextContent>
+          <Text style={{ marginTop: '1em', marginBottom: '1em' }} component={TextVariants.h3}>{__('Publish new version - ')}{nextVersion || '1.0'}</Text>
+        </TextContent>
+        <Form>
+          <FormGroup label="Description" fieldId="description">
+            <TextArea
+              isRequired
+              type="text"
+              id="description"
+              aria-label="input_description"
+              name="description"
+              value={description}
+              onChange={value => setDescription(value)}
+            />
+          </FormGroup>
+          <FormGroup label="Promote" fieldId="promote" style={{ marginBottom: '2em', outlineStyle: 'none' }}>
+            <Switch
+              id="promote-switch"
+              aria-label="promote-switch"
+              isChecked={promote}
+              onChange={checked => setPromote(checked)}
+            />
+          </FormGroup>
+        </Form>
+      </>
+      <>
+        {forcePromote.length > 0 && (
+        <Alert variant="info" isInline title="Force Promotion">
+          <p>{__('Selected environments are out of the environment order. ' +
+            'The recommended practice is to promote to the next environment in the path.')}
+          </p>
+          <ComponentEnvironments environments={forcePromote} />
+        </Alert>
+        )
+        }
+        {promote &&
+        <EnvironmentPaths
+          userCheckedItems={userCheckedItems}
+          setUserCheckedItems={setUserCheckedItems}
+        />
+        }
+      </>
+    </>
+  );
+};
+
+CVPublishForm.propTypes = {
+  description: PropTypes.string.isRequired,
+  setDescription: PropTypes.func.isRequired,
+  userCheckedItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  setUserCheckedItems: PropTypes.func.isRequired,
+  promote: PropTypes.bool.isRequired,
+  setPromote: PropTypes.func.isRequired,
+  forcePromote: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  details: PropTypes.shape({
+    id: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+    name: PropTypes.string.isRequired,
+    composite: PropTypes.bool.isRequired,
+    next_version: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]).isRequired,
+  }).isRequired,
+};
+
+export default CVPublishForm;

data/webpack/scenes/ContentViews/Publish/CVPublishReview.js

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { TableComposable, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { STATUS } from 'foremanReact/constants';
+import ContentViewIcon from '../components/ContentViewIcon';
+import InactiveText from '../components/InactiveText';
+import ComponentEnvironments from '../Details/ComponentContentViews/ComponentEnvironments';
+import { selectEnvironmentPaths, selectEnvironmentPathsStatus } from '../components/EnvironmentPaths/EnvironmentPathSelectors';
+
+const CVPublishReview = ({
+  details,
+  userCheckedItems,
+}) => {
+  const environmentPathResponse = useSelector(selectEnvironmentPaths);
+  const environmentPathStatus = useSelector(selectEnvironmentPathsStatus);
+  const environmentPathLoading = environmentPathStatus === STATUS.PENDING;
+
+  const promotedToEnvironments = useMemo(() => {
+    if (!environmentPathLoading) {
+      const { results } = environmentPathResponse || {};
+      const library = results[0].environments[0];
+      return [library].concat(userCheckedItems);
+    }
+    return [];
+  }, [environmentPathResponse, environmentPathLoading, userCheckedItems]);
+
+  const {
+    name, composite, next_version: nextVersion,
+  } = details;
+
+  return (
+    <TableComposable aria-label="Review Table">
+      <Thead>
+        <Tr>
+          <Th>{__('Content view')}</Th>
+          <Th>{__('Version')}</Th>
+          <Th>{__('Environments')}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr>
+          <Td>
+            <><ContentViewIcon composite={composite} description={name} /><InactiveText text={__('Newly published')} /></>
+          </Td>
+          <Td>
+            {__('Version')} {nextVersion}
+          </Td>
+          <Td>
+            <ComponentEnvironments environments={promotedToEnvironments} />
+          </Td>
+        </Tr>
+      </Tbody>
+    </TableComposable>
+  );
+};
+
+CVPublishReview.propTypes = {
+  userCheckedItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  details: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    composite: PropTypes.bool.isRequired,
+    next_version: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]).isRequired,
+  }).isRequired,
+};
+
+export default CVPublishReview;

data/webpack/scenes/ContentViews/Publish/ContentViewPublishSelectors.js

@@ -0,0 +1,17 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import { cvVersionPublishKey } from '../ContentViewsConstants';
+
+export const selectPublishContentViews = (state, cvId, versionCount) =>
+  selectAPIResponse(state, cvVersionPublishKey(cvId, versionCount)) || {};
+
+export const selectPublishContentViewStatus = (state, cvId, versionCount) =>
+  selectAPIStatus(state, cvVersionPublishKey(cvId, versionCount)) || STATUS.PENDING;
+
+export const selectPublishContentViewsError = (state, cvId, versionCount) =>
+  selectAPIError(state, cvVersionPublishKey(cvId, versionCount));
+

data/webpack/scenes/ContentViews/Publish/PublishContentViewWizard.js

@@ -0,0 +1,145 @@
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { STATUS } from 'foremanReact/constants';
+import { Wizard } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import CVPublishForm from './CVPublishForm';
+import CVPublishFinish from './CVPublishFinish';
+import getEnvironmentPaths from '../components/EnvironmentPaths/EnvironmentPathActions';
+import CVPublishReview from './CVPublishReview';
+import {
+  selectEnvironmentPaths,
+  selectEnvironmentPathsStatus,
+} from '../components/EnvironmentPaths/EnvironmentPathSelectors';
+import getContentViews from '../ContentViewsActions';
+import getContentViewDetails from '../Details/ContentViewDetailActions';
+import { stopPollingTask } from '../../Tasks/TaskActions';
+import { cvVersionPublishKey } from '../ContentViewsConstants';
+
+const PublishContentViewWizard = ({
+  details, show, setIsOpen, currentStep, setCurrentStep,
+}) => {
+  const { name, id: cvId, version_count: versionCount } = details;
+  const [description, setDescription] = useState('');
+  const [userCheckedItems, setUserCheckedItems] = useState([]);
+  const [promote, setPromote] = useState(false);
+  const [forcePromote, setForcePromote] = useState([]);
+  const dispatch = useDispatch();
+  const environmentPathResponse = useSelector(selectEnvironmentPaths);
+  const environmentPathStatus = useSelector(selectEnvironmentPathsStatus);
+  const environmentPathLoading = environmentPathStatus === STATUS.PENDING;
+
+  const steps = [
+    {
+      id: 1,
+      name: 'Publish',
+      component: <CVPublishForm
+        description={description}
+        setDescription={setDescription}
+        details={details}
+        show={show}
+        userCheckedItems={userCheckedItems}
+        setUserCheckedItems={setUserCheckedItems}
+        promote={promote}
+        setPromote={setPromote}
+        forcePromote={forcePromote}
+      />,
+    },
+    {
+      id: 2, name: 'Review', component: <CVPublishReview details={details} userCheckedItems={userCheckedItems} show={show} />, nextButtonText: 'Finish',
+    },
+    {
+      id: 3,
+      name: 'Finish',
+      component: <CVPublishFinish
+        description={description}
+        setDescription={setDescription}
+        userCheckedItems={userCheckedItems}
+        setUserCheckedItems={setUserCheckedItems}
+        forcePromote={forcePromote}
+        cvId={cvId}
+        versionCount={versionCount}
+        show={show}
+        setIsOpen={setIsOpen}
+        currentStep={currentStep}
+        setCurrentStep={setCurrentStep}
+      />,
+      isFinishedStep: true,
+    },
+  ];
+
+  useEffect(
+    () => {
+      dispatch(getEnvironmentPaths());
+    },
+    [dispatch],
+  );
+
+  const envPathFlat = useMemo(() => {
+    if (!environmentPathLoading) {
+      const { results } = environmentPathResponse || {};
+      return results.map(result => result.environments).flatten();
+    }
+    return [];
+  }, [environmentPathResponse, environmentPathLoading]);
+
+  const prior = useCallback(
+    env => envPathFlat.find(item => item.id === env.prior.id),
+    [envPathFlat],
+  );
+  const isChecked = useCallback(
+    env => userCheckedItems.includes(env) || env.library,
+    [userCheckedItems],
+  );
+
+  const isValid = useCallback((env) => {
+    if (!env.prior) return true;
+    if (!isChecked(prior(env))) return false;
+    return isValid(prior(env));
+  }, [prior, isChecked]);
+
+  useEffect(() => {
+    setForcePromote(userCheckedItems.filter(item => !isValid(item)));
+  }, [userCheckedItems, setForcePromote, isValid]);
+
+  return (
+    <Wizard
+      title={__('Publish')}
+      description={currentStep === 3 ? __(`Publishing ${name}`) : __(`Determining settings for ${name}`)}
+      steps={steps}
+      startAtStep={currentStep}
+      onClose={() => {
+        setDescription('');
+        setUserCheckedItems([]);
+        setPromote(false);
+        setForcePromote([]);
+        if (currentStep === 3) {
+          setCurrentStep(1);
+          dispatch(getContentViewDetails(cvId));
+          dispatch(getContentViews);
+          dispatch(stopPollingTask(cvVersionPublishKey(cvId, versionCount)));
+        }
+        setIsOpen(false);
+      }}
+      isOpen={show}
+    />
+  );
+};
+
+PublishContentViewWizard.propTypes = {
+  show: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  currentStep: PropTypes.number.isRequired,
+  setCurrentStep: PropTypes.func.isRequired,
+  details: PropTypes.shape({
+    id: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+    name: PropTypes.string,
+    version_count: PropTypes.number,
+  }).isRequired,
+};
+
+export default PublishContentViewWizard;