katello 3.16.2 → 3.17.0.rc1

data/webpack/components/TypeAhead/pf4Search/TypeAheadItems.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+} from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+
+import { commonItemPropTypes } from '../helpers/commonPropTypes';
+
+const TypeAheadItems = ({
+  isOpen, items, activeItems, getItemProps, highlightedIndex,
+}) => {
+  const buildDropdownItems = () => items.map(({ text, type, disabled = false }, index) => {
+    const key = `${text}${index}`;
+    if (type === 'divider') return (<DropdownSeparator key={key} />);
+    const isHovered = activeItems[highlightedIndex] === text;
+    const itemProps = getItemProps({
+      index: activeItems.indexOf(text),
+      item: text,
+      key,
+      isHovered,
+      disabled,
+    });
+    const { onClick, ...dropdownProps } = itemProps;
+    return (
+      <DropdownItem
+        {...dropdownProps}
+        component={
+          <button onClick={onClick}>{text}</button>
+        }
+      />
+    );
+  });
+
+  // toggle prop is required but since it is not manually toggled, React.Fragment is used to
+  // satisfy the requirement
+  return (
+    <Dropdown
+      toggle={<React.Fragment />}
+      isOpen={isOpen}
+      dropdownItems={buildDropdownItems()}
+      className="typeahead-dropdown"
+    />
+  );
+};
+
+TypeAheadItems.propTypes = {
+  ...commonItemPropTypes,
+  isOpen: PropTypes.bool,
+};
+
+TypeAheadItems.defaultProps = {
+  isOpen: false,
+};
+
+export default TypeAheadItems;

data/webpack/components/TypeAhead/pf4Search/TypeAheadSearch.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { InputGroup, Button } from '@patternfly/react-core';
+import { TimesIcon, SearchIcon } from '@patternfly/react-icons';
+import PropTypes from 'prop-types';
+
+import keyPressHandler from '../helpers/helpers';
+import TypeAheadInput from './TypeAheadInput';
+import TypeAheadItems from './TypeAheadItems';
+import commonSearchPropTypes from '../helpers/commonPropTypes';
+import './TypeAheadSearch.scss';
+
+const TypeAheadSearch = ({
+  userInputValue, clearSearch, getInputProps, getItemProps, isOpen, inputValue, highlightedIndex,
+  selectedItem, selectItem, openMenu, onSearch, items, activeItems, shouldShowItems,
+  autoSearchEnabled,
+}) => (
+  <React.Fragment>
+    <InputGroup>
+      <TypeAheadInput
+        onKeyPress={
+          (e) => {
+            keyPressHandler(
+              e,
+              isOpen,
+              activeItems,
+              highlightedIndex,
+              selectItem,
+              userInputValue,
+              onSearch,
+            );
+          }
+        }
+        onInputFocus={openMenu}
+        passedProps={getInputProps()}
+        autoSearchEnabled={autoSearchEnabled}
+      />
+      <React.Fragment>
+        {userInputValue &&
+          <Button
+            variant={autoSearchEnabled ? 'plain' : 'control'}
+            className="foreman-pf4-search-clear"
+            onClick={clearSearch}
+          >
+            <TimesIcon />
+          </Button>}
+      </React.Fragment>
+      {!autoSearchEnabled &&
+        <Button aria-label="search button" variant="control" onClick={() => onSearch(inputValue)}>
+          <SearchIcon />
+        </Button>}
+    </InputGroup>
+    <TypeAheadItems
+      isOpen={shouldShowItems}
+      {...{
+      items, highlightedIndex, selectedItem, getItemProps, activeItems,
+    }}
+    />
+  </React.Fragment>
+);
+
+TypeAheadSearch.propTypes = {
+  autoSearchEnabled: PropTypes.bool.isRequired,
+  ...commonSearchPropTypes,
+};
+
+export default TypeAheadSearch;

data/webpack/components/TypeAhead/pf4Search/TypeAheadSearch.scss

@@ -0,0 +1,5 @@
+// accounting for excess padding on search bar and aligning vertically
+.foreman-pf4-search-clear {
+  padding: 8px 5px 4px 5px;
+  margin-left: 10px; 
+}

data/webpack/components/extensions/about/__tests__/SystemStatuses.test.js

@@ -3,7 +3,7 @@ import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 import SystemStatuses from '../SystemStatuses';
 import { withServices, pending } from './SystemStatuses.fixtures';
 
-jest.unmock('../../../../move_to_pf/LoadingState');
+jest.unmock('../../../../components/LoadingState');
 
 const fixtures = {
   'renders a table': withServices,

data/webpack/{move_to_foreman/components/common/table → components/pf3Table}/formatters/EntitlementsInlineEditFormatter.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 import { KEYCODES } from 'foremanReact/common/keyCodes';
 import { Table, FormControl, FormGroup, HelpBlock, Spinner } from 'patternfly-react';
-import { validateQuantity } from '../../../../../scenes/Subscriptions/SubscriptionValidations';
+import { validateQuantity } from '../../../scenes/Subscriptions/SubscriptionValidations';
 
 const renderValue = (value, additionalData, onActivate) => {
   const { available, upstream_pool_id: upstreamPoolId, collapsible } = additionalData.rowData;

data/webpack/containers/Application/config.js

@@ -10,6 +10,7 @@ import ModuleStreamDetails from '../../scenes/ModuleStreams/Details';
 import AnsibleCollections from '../../scenes/AnsibleCollections';
 import AnsibleCollectionDetails from '../../scenes/AnsibleCollections/Details';
 import ContentViews from '../../scenes/ContentViews';
+import ContentViewDetails from '../../scenes/ContentViews/Details';
 import withHeader from './withHeaders';
 
 // eslint-disable-next-line import/prefer-default-export
@@ -55,4 +56,8 @@ export const links = [
     path: 'labs/content_views',
     component: withHeader(ContentViews, { title: __('Content Views') }),
   },
+  {
+    path: 'labs/content_views/:id([0-9]+)',
+    component: withHeader(ContentViewDetails, { title: __('Content View Details') }),
+  },
 ];

data/webpack/containers/Application/overrides.scss

@@ -34,6 +34,11 @@ td, th {
   }
 }
 
+// Patternfly 4's Grid doesn't add margin at the top and bottom
+.grid-with-margin {
+  margin: 20px 4px;
+}
+
 // needed to ensure correct spacing between buttons and the button
 // container
 .toolbar-pf .form-group {

data/webpack/global_test_setup.js

@@ -1,7 +1,9 @@
 // runs before each test to make sure console.error output will
 // fail a test (i.e. default PropType missing). Check the error
 // output and traceback for actual error.
-global.console.error = (error) => {
+global.console.error = (error, stack) => {
+  /* eslint-disable-next-line no-console */
+  if (stack) console.log(stack); // Prints out original stack trace
   throw new Error(error);
 };
 

data/webpack/redux/OrganizationProducts/OrganizationProductsActions.js

@@ -5,7 +5,7 @@ import {
   ORGANIZATION_PRODUCTS_SUCCESS,
   ORGANIZATION_PRODUCTS_FAILURE,
 } from './OrganizationProductsConstants';
-import { apiError } from '../../move_to_foreman/common/helpers';
+import { apiError } from '../../utils/helpers';
 
 export const loadOrganizationProducts = (params = {}, orgId = getOrgId()) => async (dispatch) => {
   dispatch({ type: ORGANIZATION_PRODUCTS_REQUEST });

data/webpack/redux/OrganizationProducts/__tests__/OrganizationProductsActions.test.js

@@ -1,6 +1,6 @@
 import { testActionSnapshotWithFixtures } from 'react-redux-test-utils';
 import api, { orgId } from '../../../services/api';
-import { apiError } from '../../../move_to_foreman/common/helpers';
+import { apiError } from '../../../utils/helpers';
 
 import { loadOrganizationProducts } from '../OrganizationProductsActions';
 
@@ -9,7 +9,7 @@ const params = {
 };
 
 jest.mock('../../../services/api');
-jest.mock('../../../move_to_foreman/common/helpers');
+jest.mock('../../../utils/helpers');
 
 const fixtures = {
   'should load organization products and success': () => async (dispatch) => {

data/webpack/redux/actions/RedHatRepositories/enabled.js

@@ -7,7 +7,7 @@ import {
   productsIdsToSearchQuery,
   joinSearchQueries,
 } from './helpers';
-import { apiError, apiSuccess } from '../../../move_to_foreman/common/helpers.js';
+import { apiError, apiSuccess } from '../../../utils/helpers.js';
 
 import {
   ENABLED_REPOSITORIES_REQUEST,

data/webpack/redux/actions/RedHatRepositories/helpers.js

@@ -35,7 +35,7 @@ const recommendedRepositoriesSatTools = [
 const recommendedRepositoriesMisc = [
   'rhel-server-rhscl-7-rpms',
   'rhel-7-server-satellite-capsule-6.8-rpms',
-  'rhel-7-server-ansible-2.9-rpms',
+  'rhel-7-server-ansible-2.8-rpms',
 ];
 
 const recommendedRepositorySetLables = recommendedRepositoriesRHEL

data/webpack/redux/actions/RedHatRepositories/repositorySetRepositories.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import api from '../../../services/api';
-import { apiError, apiSuccess } from '../../../move_to_foreman/common/helpers.js';
+import { apiError, apiSuccess } from '../../../utils/helpers.js';
 import { getArchFromPath } from './helpers.js';
 
 import {

data/webpack/redux/reducers/index.js

@@ -13,6 +13,7 @@ import { moduleStreamDetails } from '../../scenes/ModuleStreams/Details';
 import { reducers as systemStatuses } from '../../components/extensions/about';
 import { ansibleCollections } from '../../scenes/AnsibleCollections';
 import { ansibleCollectionDetails } from '../../scenes/AnsibleCollections/Details';
+import { contentViewDetails } from '../../scenes/ContentViews/Details';
 
 export default combineReducers({
   organization,
@@ -27,6 +28,7 @@ export default combineReducers({
   moduleStreamDetails,
   ansibleCollections,
   ansibleCollectionDetails,
+  contentViewDetails,
   ...organizationProductsReducers,
   ...systemStatuses,
 });

data/webpack/scenes/AnsibleCollections/AnsibleCollectionsActions.js

@@ -6,7 +6,7 @@ import {
   ANSIBLE_COLLECTIONS_SUCCESS,
   ANSIBLE_COLLECTIONS_ERROR,
 } from './AnsibleCollectionsConstants';
-import { apiError } from '../../move_to_foreman/common/helpers';
+import { apiError } from '../../utils/helpers';
 
 export const getAnsibleCollections = (extendedParams = {}) => async (dispatch) => {
   dispatch({ type: ANSIBLE_COLLECTIONS_REQUEST });

data/webpack/scenes/AnsibleCollections/AnsibleCollectionsTableSchema.js

@@ -5,7 +5,7 @@ import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import {
   headerFormatter,
   cellFormatter,
-} from '../../move_to_foreman/components/common/table/formatters';
+} from '../../components/pf3Table/formatters';
 
 const TableSchema = [
   {

data/webpack/scenes/AnsibleCollections/Details/AnsibleCollectionDetailsActions.js

@@ -4,7 +4,7 @@ import {
   ANSIBLE_COLLECTION_DETAILS_REQUEST,
   ANSIBLE_COLLECTION_DETAILS_SUCCESS,
 } from './AnsibleCollectionDetailsConstants';
-import { apiError } from '../../../move_to_foreman/common/helpers';
+import { apiError } from '../../../utils/helpers';
 
 export const getAnsibleCollectionDetails = ansibleCollectionId => async (dispatch) => {
   dispatch({ type: ANSIBLE_COLLECTION_DETAILS_REQUEST });

data/webpack/scenes/AnsibleCollections/Details/__tests__/AnsibleCollectionDetailsActions.test.js

@@ -1,11 +1,11 @@
 import { testActionSnapshotWithFixtures } from 'react-redux-test-utils';
 import api from '../../../../services/api';
-import { apiError } from '../../../../move_to_foreman/common/helpers';
+import { apiError } from '../../../../utils/helpers';
 import { getAnsibleCollectionDetails } from '../AnsibleCollectionDetailsActions';
 import { details } from './AnsibleCollectionDetails.fixtures';
 
 jest.mock('../../../../services/api');
-jest.mock('../../../../move_to_foreman/common/helpers');
+jest.mock('../../../../utils/helpers');
 
 const fixtures = {
   'should load ansible collection details on success': () => async (dispatch) => {

data/webpack/scenes/AnsibleCollections/__tests__/AnsibleCollectionsTable.test.js

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import ContentTable from '../../../components/Content/ContentTable';
 import TableSchema from '../../AnsibleCollections/AnsibleCollectionsTableSchema';
-import { Table } from '../../../move_to_foreman/components/common/table';
+import { Table } from '../../../components/pf3Table';
 
 jest.mock('foremanReact/components/Pagination/PaginationWrapper', () => (<div>Pagination Mock</div>));
 

data/webpack/scenes/ContentViews/ContentViewSelectors.js

@@ -5,8 +5,7 @@ import {
 } from 'foremanReact/redux/API/APISelectors';
 import CONTENT_VIEWS_KEY from './ContentViewsConstants';
 
-export const selectContentViews = state =>
-  selectAPIResponse(state, CONTENT_VIEWS_KEY).results || [];
+export const selectContentViews = state => selectAPIResponse(state, CONTENT_VIEWS_KEY) || {};
 
 export const selectContentViewStatus = state => selectAPIStatus(state, CONTENT_VIEWS_KEY);
 

data/webpack/scenes/ContentViews/ContentViewsActions.js

@@ -2,17 +2,17 @@ import { API_OPERATIONS, get } from 'foremanReact/redux/API';
 import api, { orgId } from '../../services/api';
 import CONTENT_VIEWS_KEY from './ContentViewsConstants';
 
-
-const createContentViewsParams = () => ({
+export const createContentViewsParams = extraParams => ({
   organization_id: orgId(),
   nondefault: true,
+  ...extraParams,
 });
 
-const getContentViews = () => get({
+const getContentViews = extraParams => get({
   type: API_OPERATIONS.GET,
   key: CONTENT_VIEWS_KEY,
   url: api.getApiUrl('/content_views'),
-  params: createContentViewsParams(),
+  params: createContentViewsParams(extraParams),
 });
 
 export default getContentViews;

data/webpack/scenes/ContentViews/ContentViewsConstants.js

@@ -1,3 +1,6 @@
-const CONTENT_VIEWS_KEY = 'contentViews';
+const CONTENT_VIEWS_KEY = 'CONTENT_VIEWS';
+export const UPDATE_CONTENT_VIEW = 'UPDATE_CONTENT_VIEW';
+export const UPDATE_CONTENT_VIEW_SUCCESS = 'UPDATE_CONTENT_VIEW_SUCCESS';
+export const UPDATE_CONTENT_VIEW_FAILURE = 'UPDATE_CONTENT_VIEW_FAILURE';
 
 export default CONTENT_VIEWS_KEY;

data/webpack/scenes/ContentViews/ContentViewsPage.js

@@ -1,15 +1,15 @@
 import React, { useEffect } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { useSelector, useDispatch } from 'react-redux';
+import { Grid, GridItem, TextContent, Text, TextVariants } from '@patternfly/react-core';
 import getContentViews from './ContentViewsActions';
 import { selectContentViews,
   selectContentViewStatus,
   selectContentViewError } from './ContentViewSelectors';
-
 import ContentViewsTable from './Table/ContentViewsTable';
 
 const ContentViewsPage = () => {
-  const items = useSelector(selectContentViews);
+  const response = useSelector(selectContentViews);
   const status = useSelector(selectContentViewStatus);
   const error = useSelector(selectContentViewError);
 
@@ -20,10 +20,16 @@ const ContentViewsPage = () => {
   }, []);
 
   return (
-    <React.Fragment>
-      <h1>{__('Content Views')}</h1>
-      <ContentViewsTable {...{ items, status, error }} />
-    </React.Fragment>
+    <Grid className="grid-with-margin">
+      <GridItem span={12}>
+        <TextContent>
+          <Text component={TextVariants.h1}>{__('Content Views')}</Text>
+        </TextContent>
+      </GridItem>
+      <GridItem span={12}>
+        <ContentViewsTable {...{ response, status, error }} />
+      </GridItem>
+    </Grid>
   );
 };
 

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

@@ -0,0 +1,44 @@
+import { API_OPERATIONS, get, put } from 'foremanReact/redux/API';
+import { addToast } from 'foremanReact/redux/actions/toasts';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import CONTENT_VIEWS_KEY, {
+  UPDATE_CONTENT_VIEW,
+  UPDATE_CONTENT_VIEW_FAILURE,
+  UPDATE_CONTENT_VIEW_SUCCESS,
+} from '../ContentViewsConstants';
+import api from '../../../services/api';
+
+import { apiError } from '../../../utils/helpers';
+
+const getContentViewDetails = cvId => get({
+  type: API_OPERATIONS.GET,
+  key: `${CONTENT_VIEWS_KEY}_${cvId}`,
+  url: api.getApiUrl(`/content_views/${cvId}`),
+});
+
+const cvUpdateSuccess = (response, dispatch) => {
+  const { data: { id } } = response;
+  // Update CV info in redux with the updated CV info from API
+  dispatch(getContentViewDetails(id));
+  return dispatch(addToast({
+    type: 'success',
+    message: __(' Content view updated.'),
+  }));
+};
+
+export const updateContentView = (cvId, params) => async dispatch => dispatch(put({
+  type: API_OPERATIONS.PUT,
+  key: `${CONTENT_VIEWS_KEY}_${cvId}`,
+  url: api.getApiUrl(`/content_views/${cvId}`),
+  params,
+  handleSuccess: response => cvUpdateSuccess(response, dispatch),
+  handleError: error => dispatch(apiError(null, error)),
+  actionTypes: {
+    REQUEST: UPDATE_CONTENT_VIEW,
+    SUCCESS: UPDATE_CONTENT_VIEW_SUCCESS,
+    FAILURE: UPDATE_CONTENT_VIEW_FAILURE,
+  },
+}));
+
+export default getContentViewDetails;

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

@@ -0,0 +1,23 @@
+import Immutable from 'seamless-immutable';
+import {
+  UPDATE_CONTENT_VIEW,
+  UPDATE_CONTENT_VIEW_FAILURE,
+  UPDATE_CONTENT_VIEW_SUCCESS,
+} from '../ContentViewsConstants';
+
+const initialState = Immutable({
+  updating: false,
+});
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case UPDATE_CONTENT_VIEW:
+      return state.set('updating', true);
+    case UPDATE_CONTENT_VIEW_SUCCESS:
+      return state.merge({ updating: false });
+    case UPDATE_CONTENT_VIEW_FAILURE:
+      return state.set('updating', false);
+    default:
+      return state;
+  }
+};

data/webpack/scenes/ContentViews/{details → Details}/ContentViewDetailSelectors.js

@@ -13,3 +13,6 @@ export const selectCVDetailStatus =
 
 export const selectCVDetailError =
   (state, cvId) => selectAPIError(state, `${CONTENT_VIEWS_KEY}_${cvId}`);
+
+
+export const selectIsCVUpdating = state => state.katello?.contentViewDetails?.updating;

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { Grid, GridItem, TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+
+import DetailsContainer from './DetailsContainer';
+import ContentViewInfo from './ContentViewInfo';
+import { selectCVDetails } from './ContentViewDetailSelectors';
+import TabbedView from '../../../components/TabbedView';
+
+const ContentViewDetails = ({ match }) => {
+  const cvId = parseInt(match.params.id, 10);
+  const details = useSelector(state => selectCVDetails(state, cvId), shallowEqual);
+
+  const { name } = details;
+  const tabs = [
+    {
+      title: __('Details'),
+      content: <ContentViewInfo {...{ cvId, details }} />,
+    },
+    {
+      title: __('Versions'),
+      content: <React.Fragment>Versions</React.Fragment>,
+    },
+    {
+      title: __('Repositories'),
+      content: <React.Fragment>Repositories</React.Fragment>,
+    },
+    {
+      title: __('Filters'),
+      content: <React.Fragment>Filters</React.Fragment>,
+    },
+    {
+      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}>
+            <TextContent>
+              <Text component={TextVariants.h1}>{`${name} content view`}</Text>
+            </TextContent>
+          </GridItem>
+          <GridItem span={12}>
+            <TabbedView tabs={tabs} />
+          </GridItem>
+        </React.Fragment>
+      </DetailsContainer>
+    </Grid>
+  );
+};
+
+ContentViewDetails.propTypes = {
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    }),
+  }).isRequired,
+};
+
+export default ContentViewDetails;