katello 4.4.2.2 → 4.5.0.rc1

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

@@ -1,65 +1,57 @@
 import { STATUS } from 'foremanReact/constants';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState } 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,
+import { useHistory } from 'react-router-dom';
+import {
+  Bullseye, Button, Grid, GridItem,
   Progress, ProgressSize, ProgressMeasureLocation,
   ProgressVariant, EmptyState, EmptyStateIcon, EmptyStateVariant,
-  Title } from '@patternfly/react-core';
+  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 { selectTaskPoll, selectTaskPollStatus } from '../Details/ContentViewDetailSelectors';
+import { 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 { cvVersionTaskPollingKey } from '../ContentViewsConstants';
+import { clearPollTaskData, startPollingTask, stopPollingTask, toastTaskFinished } from '../../Tasks/TaskActions';
 import getContentViewDetails from '../Details/ContentViewDetailActions';
 
 const CVPublishFinish = ({
   cvId,
-  userCheckedItems, setUserCheckedItems,
-  forcePromote, description, setDescription,
-  setIsOpen, versionCount, currentStep, setCurrentStep,
+  userCheckedItems,
+  forcePromote, description,
+  onClose, versionCount, currentStep,
 }) => {
   const dispatch = useDispatch();
+  const history = useHistory();
   const [publishDispatched, setPublishDispatched] = useState(false);
   const [saving, setSaving] = useState(true);
-  const [polling, setPolling] = useState(false);
+  const POLLING_TASK_KEY = cvVersionTaskPollingKey(cvId);
   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);
+    selectTaskPoll(state, POLLING_TASK_KEY), shallowEqual);
   const pollResponseStatus = useSelector(state =>
-    selectPublishTaskPollStatus(state, cvVersionPublishKey(cvId, versionCount)), shallowEqual);
+    selectTaskPollStatus(state, POLLING_TASK_KEY), 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]);
+  const { input: { content_view_version_id: cvvID } = {} } = response;
 
+  const progressCompleted = pollResponse.progress ? pollResponse.progress * 100 : 0;
 
-  useEffect(() => {
-    if (currentStep !== 3 && !publishDispatched) {
-      setCurrentStep(3);
-      setSaving(true);
+  // Fire this on load
+  useDeepCompareEffect(() => {
+    if (currentStep === 3 && !publishDispatched) {
       setPublishDispatched(true);
       dispatch(publishContentView({
         id: cvId,
@@ -67,101 +59,91 @@ const CVPublishFinish = ({
         description,
         environment_ids: userCheckedItems.map(item => item.id),
         is_force_promote: (forcePromote.length > 0),
-      }));
-      setDescription('');
-      setUserCheckedItems([]);
+      }, ({ data: task }) => {
+        // First callback
+        dispatch(startPollingTask(
+          POLLING_TASK_KEY, task,
+          () => {
+            // Second Callback
+            setSaving(false);
+          },
+        ));
+      }, () => { setSaving(false); }));
     }
-  }, [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]);
-
+  }, [POLLING_TASK_KEY, currentStep, cvId, description, dispatch, forcePromote,
+    publishDispatched, userCheckedItems, versionCount]);
 
   useDeepCompareEffect(() => {
     const { state, result } = pollResponse;
+    if (!state || !result || !publishDispatched || saving) return;
     if (state === 'paused' || result === 'error') {
       setTaskErrored(true);
-      setTimeout(() => {
-        handleEndTask({ taskComplete: true });
-      }, 500);
     }
     if (state === 'stopped' && result === 'success') {
-      setTimeout(() => {
-        handleEndTask({ taskComplete: true });
-      }, 500);
+      dispatch(stopPollingTask(POLLING_TASK_KEY));
+      dispatch(clearPollTaskData(POLLING_TASK_KEY));
+      dispatch(getContentViewDetails(cvId));
+      dispatch(toastTaskFinished(pollResponse));
+      history.push(`/content_views/${cvId}#/versions/${cvvID || ''}`);
+      onClose();
     }
-  }, [pollResponse, dispatch, setTaskErrored,
-    setPolling, setIsOpen, pollResponseStatus, handleEndTask]);
+  }, [pollResponse, dispatch, setTaskErrored, pollResponseStatus,
+    POLLING_TASK_KEY, cvId, history, taskErrored, cvvID, onClose,
+    publishDispatched, saving]);
 
-  if (saving) {
+  if (saving || status === STATUS.PENDING) {
     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 />;
+
+  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
+              ouiaId="publish-wizard-close"
+              onClick={() => {
+                dispatch(stopPollingTask(POLLING_TASK_KEY));
+                onClose(true);
+              }}
+              variant="primary"
+              aria-label="publish_content_view"
+            >
+              {__('Close')}
+            </Button>
+            <Button
+              ouiaId="publish-wizard-view-task-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>
+    </>
+  );
 };
 
 CVPublishFinish.propTypes = {
@@ -171,13 +153,10 @@ CVPublishFinish.propTypes = {
   ]).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,
+  onClose: PropTypes.func.isRequired,
   versionCount: PropTypes.number.isRequired,
   currentStep: PropTypes.number.isRequired,
-  setCurrentStep: PropTypes.func.isRequired,
 };
 
 

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

@@ -12,19 +12,19 @@ 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';
+import { cvVersionTaskPollingKey } from '../ContentViewsConstants';
 
 const PublishContentViewWizard = ({
-  details, show, setIsOpen, currentStep, setCurrentStep,
+  details, show, onClose,
 }) => {
   const { name, id: cvId, version_count: versionCount } = details;
+  const POLLING_TASK_KEY = cvVersionTaskPollingKey(cvId);
   const [description, setDescription] = useState('');
   const [userCheckedItems, setUserCheckedItems] = useState([]);
   const [promote, setPromote] = useState(false);
   const [forcePromote, setForcePromote] = useState([]);
+  const [currentStep, setCurrentStep] = useState(1);
   const dispatch = useDispatch();
   const environmentPathResponse = useSelector(selectEnvironmentPaths);
   const environmentPathStatus = useSelector(selectEnvironmentPathsStatus);
@@ -61,9 +61,8 @@ const PublishContentViewWizard = ({
         cvId={cvId}
         versionCount={versionCount}
         show={show}
-        setIsOpen={setIsOpen}
+        onClose={onClose}
         currentStep={currentStep}
-        setCurrentStep={setCurrentStep}
       />,
       isFinishedStep: true,
     },
@@ -109,18 +108,15 @@ const PublishContentViewWizard = ({
       description={currentStep === 3 ? __(`Publishing ${name}`) : __(`Determining settings for ${name}`)}
       steps={steps}
       startAtStep={currentStep}
+      // Let the wizard handle step change
+      onGoToStep={({ id }) => setCurrentStep(id)}
+      onNext={({ id }) => setCurrentStep(id)}
+      onBack={({ id }) => setCurrentStep(id)}
       onClose={() => {
-        setDescription('');
-        setUserCheckedItems([]);
-        setPromote(false);
-        setForcePromote([]);
         if (currentStep === 3) {
-          setCurrentStep(1);
-          dispatch(getContentViewDetails(cvId));
-          dispatch(getContentViews);
-          dispatch(stopPollingTask(cvVersionPublishKey(cvId, versionCount)));
-        }
-        setIsOpen(false);
+          dispatch(stopPollingTask(POLLING_TASK_KEY));
+          onClose(true);
+        } else onClose();
       }}
       isOpen={show}
     />
@@ -129,9 +125,7 @@ const PublishContentViewWizard = ({
 
 PublishContentViewWizard.propTypes = {
   show: PropTypes.bool.isRequired,
-  setIsOpen: PropTypes.func.isRequired,
-  currentStep: PropTypes.number.isRequired,
-  setCurrentStep: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
   details: PropTypes.shape({
     id: PropTypes.oneOfType([
       PropTypes.number,

data/webpack/scenes/ContentViews/Publish/__tests__/publishContentView.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as reactRedux from 'react-redux';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
 import api from '../../../../services/api';
 import PublishContentViewWizard from '../PublishContentViewWizard';
@@ -23,9 +23,7 @@ test('Can call API and show Wizard', async (done) => {
   const { getByText } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => { }}
-    currentStep={1}
-    setCurrentStep={() => { }}
+    onClose={() => { }}
   />);
 
   await patientlyWaitFor(() => expect(getByText('Publish new version - 6.0')).toBeInTheDocument());
@@ -44,9 +42,7 @@ test('Can show Wizard and show environment paths', async (done) => {
   const { getByText, getByLabelText } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => { }}
-    currentStep={1}
-    setCurrentStep={() => { }}
+    onClose={() => { }}
   />);
 
   await patientlyWaitFor(() => expect(getByText('Publish new version - 6.0')).toBeInTheDocument());
@@ -75,9 +71,7 @@ test('Can show and hide force promotion alert', async (done) => {
   } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => { }}
-    currentStep={1}
-    setCurrentStep={() => { }}
+    onClose={() => { }}
   />);
 
   await patientlyWaitFor(() => expect(getByText('Publish new version - 6.0')).toBeInTheDocument());
@@ -128,9 +122,7 @@ test('Can show Wizard form and move to review', async (done) => {
   const { getByText } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => { }}
-    currentStep={1}
-    setCurrentStep={() => { }}
+    onClose={() => { }}
   />);
   const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
   useSelectorMock.mockReturnValue(environmentPathsData);
@@ -156,7 +148,6 @@ test('Can move to Finish step and publish CV', async (done) => {
   const cvPublishParams = {
     id: 1, versionCount: 5, description: '', environment_ids: [], is_force_promote: false,
   };
-
   const publishScope = nockInstance
     .post(cvPublishPath, cvPublishParams)
     .reply(202, publishResponseData);
@@ -164,19 +155,17 @@ test('Can move to Finish step and publish CV', async (done) => {
   const { getByText } = renderWithRedux(<PublishContentViewWizard
     details={cvDetailData}
     show
-    setIsOpen={() => { }}
-    currentStep={1}
-    setCurrentStep={() => { }}
+    onClose={() => { }}
   />);
-  const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
-  useSelectorMock.mockReturnValue(environmentPathsData);
+
   fireEvent.click(getByText('Next'));
   // Test the review page
   await patientlyWaitFor(() => {
     expect(getByText('Finish')).toBeInTheDocument();
   });
   fireEvent.click(getByText('Finish'));
-  useSelectorMock.mockClear();
+
   assertNockRequest(scope);
   assertNockRequest(publishScope, done);
+  act(done); // stop listening for nocks
 });