katello 4.1.4 → 4.2.0.rc1

data/webpack/scenes/ContentViews/Table/ContentViewsTable.js

@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useCallback } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { useSelector } from 'react-redux';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import { Button } from '@patternfly/react-core';
@@ -9,30 +10,71 @@ import tableDataGenerator from './tableDataGenerator';
 import getContentViews from '../ContentViewsActions';
 import CreateContentViewModal from '../Create/CreateContentViewModal';
 import CopyContentViewModal from '../Copy/CopyContentViewModal';
+import PublishContentViewWizard from '../Publish/PublishContentViewWizard';
+import { selectContentViews, selectContentViewStatus, selectContentViewError } from '../ContentViewSelectors';
 
-const ContentViewTable = ({ response, status, error }) => {
+const ContentViewTable = () => {
+  const response = useSelector(selectContentViews);
+  const status = useSelector(selectContentViewStatus);
+  const error = useSelector(selectContentViewError);
   const [table, setTable] = useState({ rows: [], columns: [] });
   const [rowMappingIds, setRowMappingIds] = useState([]);
   const [searchQuery, updateSearchQuery] = useState('');
-  const { results, ...metadata } = response;
   const loadingResponse = status === STATUS.PENDING;
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [copy, setCopy] = useState(false);
+  const [cvResults, setCvResults] = useState([]);
+  const [metadata, setMetadata] = useState({});
+  const [cvTableStatus, setCvTableStatus] = useState(STATUS.PENDING);
+  const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
+  const [actionableCvDetails, setActionableCvDetails] = useState({});
   const [actionableCvId, setActionableCvId] = useState('');
   const [actionableCvName, setActionableCvName] = useState('');
-  function openForm() {
-    setIsModalOpen(true);
-  }
+  const [currentStep, setCurrentStep] = useState(1);
 
-  useEffect(
+  const openForm = () => setIsModalOpen(true);
+
+  const openPublishModal = (rowInfo) => {
+    setActionableCvDetails({
+      id: rowInfo.cvId.toString(),
+      name: rowInfo.cvName,
+      composite: rowInfo.cvComposite,
+      version_count: rowInfo.cvVersionCount,
+      next_version: rowInfo.cvNextVersion,
+    });
+    setIsPublishModalOpen(true);
+  };
+
+  useDeepCompareEffect(
     () => {
+      // Prevents flash of "No Content" before rows are loaded
+      const tableStatus = () => {
+        if (typeof cvResults === 'undefined' || status === STATUS.ERROR) return status; // will handle errored state
+        const resultsIds = Array.from(cvResults.map(result => result.id));
+        // All results are accounted for in row mapping, the page is ready to load
+        if (resultsIds.length === rowMappingIds.length &&
+          resultsIds.every(id => rowMappingIds.includes(id))) {
+          return status;
+        }
+        return STATUS.PENDING; // Fallback to pending
+      };
+
+      const { results, ...meta } = response;
+      if (status === STATUS.ERROR) {
+        setCvTableStatus(tableStatus());
+      }
       if (!loadingResponse && results) {
+        setCvResults(results);
+        setMetadata(meta);
+        setCurrentStep(1);
         const { newRowMappingIds, ...tableData } = tableDataGenerator(results);
         setTable(tableData);
         setRowMappingIds(newRowMappingIds);
+        setCvTableStatus(tableStatus());
       }
     },
-    [results, loadingResponse, setTable, setRowMappingIds],
+    [response, status, loadingResponse, setTable, setRowMappingIds,
+      setCvResults, setCvTableStatus, setCurrentStep, setMetadata, cvResults, rowMappingIds],
   );
 
   const onSelect = (_event, isSelected, rowId) => {
@@ -67,19 +109,18 @@ const ContentViewTable = ({ response, status, error }) => {
     /* eslint-disable no-console */
     return [
       {
-        title: 'Publish and Promote',
-        isDisabled: true,
+        title: __('Publish'),
         onClick: (_event, rowId, rowInfo) => {
-          console.log(`clicked on row ${JSON.stringify(rowInfo)}`);
+          openPublishModal(rowInfo);
         },
       },
       {
-        title: 'Promote',
+        title: __('Promote'),
         isDisabled: true,
         onClick: (_event, rowId, rowInfo) => console.log(`clicked on row ${rowInfo.cvName}`),
       },
       {
-        title: 'Copy',
+        title: __('Copy'),
         onClick: (_event, rowId, rowInfo) => {
           setCopy(true);
           setActionableCvId(rowInfo.cvId.toString());
@@ -87,25 +128,15 @@ const ContentViewTable = ({ response, status, error }) => {
         },
       },
       {
-        title: 'Delete',
+        title: __('Delete'),
         isDisabled: true,
         onClick: (_event, rowId, _rowInfo) => console.log(`clicked on row ${rowId}`),
       },
     ];
     /* eslint-enable no-console */
   };
-  // Prevents flash of "No Content" before rows are loaded
-  const tableStatus = () => {
-    if (typeof results === 'undefined') return status; // will handle errored state
-    const resultsIds = Array.from(results.map(result => result.id));
-    // All results are accounted for in row mapping, the page is ready to load
-    if (resultsIds.length === rowMappingIds.length &&
-        resultsIds.every(id => rowMappingIds.includes(id))) {
-      return status;
-    }
-    return STATUS.PENDING; // Fallback to pending
-  };
 
+  const additionalListeners = new Array(isPublishModalOpen);
   const emptyContentTitle = __("You currently don't have any Content Views.");
   const emptyContentBody = __('A content view can be added by using the "New content view" button below.');
   const emptySearchTitle = __('No matching content views found');
@@ -126,42 +157,38 @@ const ContentViewTable = ({ response, status, error }) => {
         actionResolver,
         searchQuery,
         updateSearchQuery,
+        additionalListeners,
       }}
       variant={TableVariant.compact}
-      status={tableStatus()}
-      fetchItems={getContentViews}
+      status={cvTableStatus}
+      fetchItems={useCallback(getContentViews, [])}
       onCollapse={onCollapse}
       canSelectAll={false}
       cells={columns}
       autocompleteEndpoint="/content_views/auto_complete_search"
     >
-      <React.Fragment>
+      <>
         <Button onClick={openForm} variant="primary" aria-label="create_content_view">
           Create content view
         </Button>
         <CreateContentViewModal show={isModalOpen} setIsOpen={setIsModalOpen} aria-label="create_content_view_modal" />
-      </React.Fragment>
-      <React.Fragment>
+      </>
+      <>
         <CopyContentViewModal cvId={actionableCvId} cvName={actionableCvName} show={copy} setIsOpen={setCopy} aria-label="copy_content_view_modal" />
-      </React.Fragment>
+      </>
+      {isPublishModalOpen &&
+        <>
+          <PublishContentViewWizard
+            details={actionableCvDetails}
+            show={isPublishModalOpen}
+            setIsOpen={setIsPublishModalOpen}
+            currentStep={currentStep}
+            setCurrentStep={setCurrentStep}
+            aria-label="publish_content_view_modal"
+          />
+        </>}
     </TableWrapper>
   );
 };
 
-ContentViewTable.propTypes = {
-  response: PropTypes.shape({
-    results: PropTypes.arrayOf(PropTypes.shape({})),
-  }),
-  status: PropTypes.string.isRequired,
-  error: PropTypes.oneOfType([
-    PropTypes.shape({}),
-    PropTypes.string,
-  ]),
-};
-
-ContentViewTable.defaultProps = {
-  error: null,
-  response: { results: [] },
-};
-
 export default ContentViewTable;

data/webpack/scenes/ContentViews/Table/tableDataGenerator.js

@@ -44,11 +44,24 @@ const buildExpandableRows = (contentViews) => {
 
   contentViews.forEach((contentView) => {
     const {
-      id, name, description, activation_keys: activationKeys, hosts,
+      id,
+      name,
+      composite,
+      next_version: nextVersion,
+      version_count: versionCount,
+      description,
+      activation_keys: activationKeys,
+      hosts,
     } = contentView;
     const cells = buildRow(contentView);
     const cellParent = {
-      cvId: id, cvName: name, isOpen: false, cells,
+      cvId: id,
+      cvName: name,
+      cvVersionCount: versionCount,
+      cvComposite: composite,
+      cvNextVersion: nextVersion,
+      isOpen: false,
+      cells,
     };
     rows.push(cellParent);
     const cellChild = {

data/webpack/scenes/ContentViews/__tests__/contentViewPage.test.js

@@ -50,7 +50,7 @@ test('Can call API for CVs and show on screen on page load', async (done) => {
   // Assert that the CV is not showing yet by searching by name and the query returning null
   expect(queryByText(firstCV.name)).toBeNull();
   // Assert that the CV name is now showing on the screen, but wait for it to appear.
-  await patientlyWaitFor(() => expect(queryByText(firstCV.name)).toBeTruthy());
+  await patientlyWaitFor(() => expect(queryByText(firstCV.name)).toBeInTheDocument());
   // Assert request was made and completed, see helper function
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done); // Pass jest callback to confirm test is done
@@ -168,7 +168,7 @@ test('Can handle no Content Views being present', async (done) => {
   const { queryByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
 
   expect(queryByText(firstCV.name)).toBeNull();
-  await patientlyWaitFor(() => expect(queryByText(/don't have any Content Views/i)).toBeTruthy());
+  await patientlyWaitFor(() => expect(queryByText(/don't have any Content Views/i)).toBeInTheDocument());
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
 });
@@ -183,7 +183,7 @@ test('Can handle errored response', async (done) => {
   const { queryByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
 
   expect(queryByText(firstCV.name)).toBeNull();
-  await patientlyWaitFor(() => expect(queryByText(/unable to connect/i)).toBeTruthy());
+  await patientlyWaitFor(() => expect(queryByText(/unable to connect/i)).toBeInTheDocument());
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
 });
@@ -231,18 +231,16 @@ test('Can handle pagination', async (done) => {
   const firstPageScope = nockInstance
     .get(cvIndexPath)
     // Using a custom query params matcher because parameters can be strings
-    .query(actualQueryObject => parseInt(actualQueryObject.page, 10) === 1)
+    .query(actualQueryObject => (parseInt(actualQueryObject.page, 10) === 1))
     .reply(200, cvIndexFirstPage);
 
   // Match second page API request
   const secondPageScope = nockInstance
     .get(cvIndexPath)
     // Using a custom query params matcher because parameters can be strings
-    .query(actualQueryObject => parseInt(actualQueryObject.page, 10) === 2)
+    .query(actualQueryObject => (parseInt(actualQueryObject.page, 10) === 2))
     .reply(200, cvIndexSecondPage);
-
   const { queryByText, getByLabelText } = renderWithRedux(<ContentViewsPage />, renderOptions);
-
   // Wait for first paginated page to load and assert only the first page of results are present
   await patientlyWaitFor(() => {
     expect(queryByText(results[0].name)).toBeInTheDocument();
@@ -253,14 +251,12 @@ test('Can handle pagination', async (done) => {
   // Label comes from patternfly, if this test fails, check if patternfly updated the label.
   expect(getByLabelText('Go to next page')).toBeTruthy();
   getByLabelText('Go to next page').click();
-
   // Wait for second paginated page to load and assert only the second page of results are present
   await patientlyWaitFor(() => {
     expect(queryByText(results[20].name)).toBeInTheDocument();
     expect(queryByText(results[39].name)).toBeInTheDocument();
     expect(queryByText(results[41].name)).not.toBeInTheDocument();
   });
-
   assertNockRequest(autocompleteScope);
   assertNockRequest(firstPageScope);
   assertNockRequest(secondPageScope, done); // Only pass jest callback to the last API request
@@ -359,7 +355,7 @@ test('Displays Create Content View and opens modal with Form', async () => {
   const {
     getByText, queryByText, getByLabelText,
   } = renderWithRedux(<ContentViewsPage />, renderOptions);
-  await patientlyWaitFor(() => expect(queryByText('Create content view')).toBeTruthy());
+  await patientlyWaitFor(() => expect(queryByText('Create content view')).toBeInTheDocument());
 
   expect(queryByText('Description')).not.toBeInTheDocument();
   expect(queryByText('Name')).not.toBeInTheDocument();

data/webpack/scenes/ContentViews/components/EnvironmentLabels.js

@@ -1,16 +1,28 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Label } from '@patternfly/react-core';
 
-const EnvironmentLabels = environments => environments.map(env =>
-  <React.Fragment key={env.id}><Label color="purple" href={`/lifecycle_environments/${env.id}`}>{`${env.name}`}</Label></React.Fragment>);
-
-EnvironmentLabels.propTypes = {
-  environments: PropTypes.instanceOf(Array),
-};
-
-EnvironmentLabels.defaultProps = {
-  environments: [],
+const EnvironmentLabels = (environments) => {
+  const { environments: singleEnvironment } = environments || {};
+  const { name } = singleEnvironment || {};
+  switch (environments) {
+    case Array:
+      return environments.map(env => (
+        <React.Fragment key={env.id} style={{ marginBottom: '5px' }}>
+          <Label
+            color="purple"
+          >{`${env.name}`}
+          </Label>
+        </React.Fragment>
+      ));
+    default:
+      return (
+        <React.Fragment>
+          <Label color="purple">
+            {`${name}`}
+          </Label>
+        </React.Fragment>
+      );
+  }
 };
 
 export default EnvironmentLabels;

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPathActions.js

@@ -0,0 +1,12 @@
+import { API_OPERATIONS, get } from 'foremanReact/redux/API';
+import api, { orgId } from '../../../../services/api';
+import { ENVIRONMENT_PATHS_KEY } from './EnvironmentPathConstants';
+
+
+const getEnvironmentPaths = () => get({
+  type: API_OPERATIONS.GET,
+  key: ENVIRONMENT_PATHS_KEY,
+  url: api.getApiUrl(`/organizations/${orgId()}/environments/paths?permission_type=promotable`),
+});
+
+export default getEnvironmentPaths;

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPathConstants.js

@@ -0,0 +1,2 @@
+export const ENVIRONMENT_PATHS_KEY = 'ENVIRONMENT_PATHS';
+export default ENVIRONMENT_PATHS_KEY;

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPathSelectors.js

@@ -0,0 +1,16 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import { ENVIRONMENT_PATHS_KEY } from './EnvironmentPathConstants';
+
+export const selectEnvironmentPaths = state =>
+  selectAPIResponse(state, ENVIRONMENT_PATHS_KEY) || {};
+
+export const selectEnvironmentPathsStatus = state =>
+  selectAPIStatus(state, ENVIRONMENT_PATHS_KEY) || STATUS.PENDING;
+
+export const selectEnvironmentPathsError = state =>
+  selectAPIError(state, ENVIRONMENT_PATHS_KEY);

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { STATUS } from 'foremanReact/constants';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { Form, FormGroup, Checkbox } from '@patternfly/react-core';
+import { selectEnvironmentPaths, selectEnvironmentPathsStatus } from './EnvironmentPathSelectors';
+import EnvironmentLabels from '../EnvironmentLabels';
+import './EnvironmentPaths.scss';
+import Loading from '../../../../components/Loading';
+
+const EnvironmentPaths = ({ userCheckedItems, setUserCheckedItems }) => {
+  const environmentPathResponse = useSelector(selectEnvironmentPaths);
+  const environmentPathStatus = useSelector(selectEnvironmentPathsStatus);
+  const environmentPathLoading = environmentPathStatus === STATUS.PENDING;
+
+  const oncheckedChange = (checked, env) => {
+    if (checked) {
+      setUserCheckedItems([...userCheckedItems, env]);
+    } else {
+      setUserCheckedItems(userCheckedItems.filter(item => item.id !== env.id));
+    }
+  };
+  if (environmentPathLoading) {
+    return <Loading />;
+  }
+  const { results } = environmentPathResponse || {};
+  /* eslint-disable react/no-array-index-key */
+  return (
+    <>
+      <p
+        style={{ marginBottom: '2px' }}
+      >{__('Select a lifecycle environment from the available promotion paths to promote new version.')}
+      </p>
+      <Form>{results.map((path, count) => {
+        const {
+          environments,
+        } = path || {};
+        return (
+          <React.Fragment key={count}>
+            <FormGroup key={`fg-${count}`} isInline fieldId="environment-checkbox-group">
+              {environments.map(env =>
+                (<Checkbox
+                  isChecked={env.library ||
+                  userCheckedItems.filter(item => item.id === env.id).length}
+                  isDisabled={env.library}
+                  style={{ marginRight: '3px', marginBottom: '1px' }}
+                  className="env-labels-with-pointer"
+                  key={`${env.id}${count}`}
+                  id={`${env.id}${count}`}
+                  label={<EnvironmentLabels environments={env} />}
+                  aria-label={env.label}
+                  onChange={checked => oncheckedChange(checked, env)}
+                />))}
+            </FormGroup>
+            <hr key={`hr${count}`} style={{ margin: '0em' }} />
+          </React.Fragment>
+        );
+      })}
+      </Form>
+    </>
+  );
+  /* eslint-enable react/no-array-index-key */
+};
+
+EnvironmentPaths.propTypes = {
+  userCheckedItems: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  setUserCheckedItems: PropTypes.func.isRequired,
+};
+
+
+export default EnvironmentPaths;

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.scss

@@ -0,0 +1,8 @@
+.env-labels-with-pointer {
+  &:not(:last-child):after {
+    content: '>';
+    margin-top: 3px;
+  }
+  display: inline-flex;
+  margin-top: 3px;
+}

data/webpack/scenes/ContentViews/components/TaskPresenter/TaskPresenter.js

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import { InProgressIcon } from '@patternfly/react-icons';
+import PropTypes from 'prop-types';
+import { Progress,
+  ProgressSize,
+  ProgressMeasureLocation,
+  ProgressVariant } from '@patternfly/react-core';
+import { STATUS } from 'foremanReact/constants';
+import { stopPollingTask, toastTaskFinished } from '../../../Tasks/TaskActions';
+import { selectTaskPoll, selectTaskPollStatus } from '../../Details/ContentViewDetailSelectors';
+
+const TaskPresenter = ({ activeHistory, setPollingFinished }) => {
+  const { task } = activeHistory;
+  const dispatch = useDispatch();
+  const [polling, setPolling] = useState(true);
+  const [taskErrored, setTaskErrored] = useState(task.result === 'error');
+  const pollResponse = useSelector(state =>
+    selectTaskPoll(state, task.id));
+  const pollResponseStatus = useSelector(state =>
+    selectTaskPollStatus(state, task.id));
+  const loading = pollResponseStatus === STATUS.PENDING;
+
+  const progressCompleted = () => (
+    pollResponse.progress ?
+      pollResponse.progress * 100 :
+      task.progress * 100
+  );
+
+  useEffect(() => {
+    if (!polling) {
+      const { id } = task;
+      dispatch(stopPollingTask(id));
+      dispatch(toastTaskFinished(pollResponse));
+      setPollingFinished(true); // Use this boolean as activeListener in refering page table
+    }
+  }, [polling, dispatch, setPollingFinished, pollResponse, task]);
+
+  useDeepCompareEffect(() => {
+    if (!loading && polling) {
+      const { state, result } = pollResponse;
+      if ((state === 'paused' || result === 'error') && !taskErrored) {
+        setTaskErrored(true);
+        setPolling(false);
+      } else if (state === 'stopped' && result === 'success') {
+        setPolling(false);
+      }
+    }
+  }, [pollResponse, loading, taskErrored, setTaskErrored, polling, setPolling]);
+
+  if (pollResponse) {
+    return (
+      <a href={`/foreman_tasks/tasks/${task.id}`} target="_blank" rel="noreferrer">
+        <Progress
+          aria-label="task_presenter"
+          value={progressCompleted()}
+          measureLocation={ProgressMeasureLocation.inside}
+          variant={taskErrored ? ProgressVariant.danger : ProgressVariant.default}
+          size={ProgressSize.sm}
+        />
+      </a>
+    );
+  }
+  return (
+    <InProgressIcon />
+  );
+};
+
+TaskPresenter.propTypes = {
+  activeHistory: PropTypes.shape({
+    task: PropTypes.shape({
+      id: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string,
+      ]).isRequired,
+      result: PropTypes.string.isRequired,
+      progress: PropTypes.number.isRequired,
+    }).isRequired,
+  }).isRequired,
+  setPollingFinished: PropTypes.func.isRequired,
+};
+
+
+export default TaskPresenter;

data/webpack/scenes/SmartProxy/SmartProxyContentTable.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch } from 'react-redux';
 import { wrappable } from '@patternfly/react-table';
@@ -49,10 +50,6 @@ const SmartProxyContentTable = ({ smartProxyId }) => {
     },
   ];
 
-  const fetchWithParams = () => {
-    dispatch(getSmartProxyContent({ smartProxyId }));
-  };
-
   const buildrows = (results) => {
     const newRows = [];
     let envCount = 0;
@@ -125,15 +122,19 @@ const SmartProxyContentTable = ({ smartProxyId }) => {
     setRow(newRows);
   };
 
+  useEffect(
+    () => {
+      dispatch(getSmartProxyContent({ smartProxyId }));
+    }
+    , [dispatch, smartProxyId],
+  );
 
-  useEffect(() => fetchWithParams(), []);
-
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (status !== STATUS.PENDING && response) {
       const { lifecycle_environments: env } = response;
       setRows(buildrows(env));
     }
-  }, [JSON.stringify(response), status, error]);
+  }, [response, status, error]);
 
 
   return (