katello 3.8.1 → 3.9.0.rc1

data/webpack/__mocks__/foremanReact/common/I18n.js

@@ -0,0 +1,5 @@
+export { sprintf } from 'jed';
+
+export const translate = s => s;
+
+export const ngettext = s => s;

data/webpack/components/MultiSelect/index.js

@@ -1,11 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { translate as __ } from 'foremanReact/common/I18n';
 import { FormGroup, ControlLabel } from 'react-bootstrap';
 import BootstrapSelect from '../../move_to_pf/react-bootstrap-select';
 
 function MultiSelect(props) {
-  const { options, onChange, ...otherProps } = props;
+  const {
+    options,
+    onChange,
+    defaultValues,
+    ...otherProps
+  } = props;
 
   const optionComponents = options.map(option => (
     <option key={`option-${option.value}`} value={option.value}>
@@ -16,7 +21,12 @@ function MultiSelect(props) {
   return (
     <FormGroup controlId="formControlsSelectMultiple">
       <ControlLabel srOnly>{__('Select Value')}</ControlLabel>
-      <BootstrapSelect {...otherProps} multiple onChange={evt => onChange(evt)}>
+      <BootstrapSelect
+        defaultValues={defaultValues}
+        {...otherProps}
+        multiple
+        onChange={evt => onChange(evt)}
+      >
         {optionComponents}
       </BootstrapSelect>
     </FormGroup>
@@ -25,11 +35,13 @@ function MultiSelect(props) {
 
 MultiSelect.defaultProps = {
   onChange: () => {},
+  defaultValues: null,
 };
 
 MultiSelect.propTypes = {
   options: PropTypes.arrayOf(PropTypes.object).isRequired,
   onChange: PropTypes.func,
+  defaultValues: PropTypes.arrayOf(PropTypes.string),
 };
 
 export default MultiSelect;

data/webpack/components/PaginationRow/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Paginator } from 'patternfly-react';
 import { isEqual } from 'lodash';
 
-const defaultPerPageOptions = [5, 10, 15, 25, 50];
+const defaultPerPageOptions = [5, 10, 15, 20, 25, 50];
 
 const initPagination = (props) => {
   const pagination = props.pagination || {};

data/webpack/components/Search/__snapshots__/Search.test.js.snap

@@ -10,6 +10,7 @@ exports[`Search component rendering renders correctly 1`] = `
   </ControlLabel>
   <TypeAhead
     actionText="Search"
+    initialInputValue=""
     items={Array []}
     onInputUpdate={[Function]}
     onSearch={[Function]}

data/webpack/components/Search/index.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { ControlLabel } from 'react-bootstrap';
 import PropTypes from 'prop-types';
-
+import { translate as __ } from 'foremanReact/common/I18n';
 import TypeAhead from '../../move_to_pf/TypeAhead/TypeAhead';
 import api from '../../services/api';
 import { stringIncludes } from './helpers';
@@ -48,6 +48,7 @@ class Search extends Component {
   }
 
   render() {
+    const { initialInputValue } = this.props;
     return (
       <div>
         <ControlLabel srOnly>{__('Search')}</ControlLabel>
@@ -55,6 +56,7 @@ class Search extends Component {
           items={this.state.items}
           onInputUpdate={this.onInputUpdate}
           onSearch={this.onSearch}
+          initialInputValue={initialInputValue}
         />
       </div>
     );
@@ -78,9 +80,11 @@ Search.propTypes = {
   */
   getAutoCompleteParams: PropTypes.func.isRequired,
   updateSearchQuery: PropTypes.func,
+  initialInputValue: PropTypes.string,
 };
 
 Search.defaultProps = {
   updateSearchQuery: undefined,
+  initialInputValue: '',
 };
 export default Search;

data/webpack/components/SelectOrg/SetOrganization.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { Form, Button } from 'patternfly-react';
 import { withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
@@ -38,7 +39,7 @@ class SetOrganization extends Component {
     } = this.props;
     const { id, item } = this.state;
 
-    changeCurrentOrgaziation(`${id}-${item}`).then(() =>
+    changeCurrentOrgaziation(encodeURIComponent(`${id}-${item}`)).then(() =>
       history.push({
         pathname: redirectPath,
         state: { orgChanged: this.state.item },

data/webpack/components/WithOrganization/__snapshots__/withOrganization.test.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`subscriptions page should render select org page 1`] = `
+<CheckOrg>
+  <Header
+    title="Select Organization"
+  >
+    <HelmetWrapper
+      defer={true}
+      encodeSpecialCharacters={true}
+    >
+      <SideEffect(NullComponent)
+        defer={true}
+        encodeSpecialCharacters={true}
+        title="Select Organization"
+        titleAttributes={Object {}}
+      >
+        <NullComponent
+          defer={true}
+          encodeSpecialCharacters={true}
+          title="Select Organization"
+          titleAttributes={Object {}}
+        />
+      </SideEffect(NullComponent)>
+    </HelmetWrapper>
+  </Header>
+  <Connect(withRouter(SetOrganization))
+    redirectPath="/test"
+  />
+</CheckOrg>
+`;
+
+exports[`subscriptions page should render the wrapped component 1`] = `
+<CheckOrg>
+  <WrappedComponent>
+    <div>
+       Wrapped! 
+    </div>
+  </WrappedComponent>
+</CheckOrg>
+`;

data/webpack/components/WithOrganization/withOrganization.js

@@ -1,28 +1,60 @@
 import React, { Component } from 'react';
-import { orgId } from '../../services/api';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { get } from 'lodash';
 import SetOrganization from '../SelectOrg/SetOrganization';
-import titleWithCaret from '../../helpers/caret';
+import Header from '../../containers/Application/Headers';
 
 function withOrganization(WrappedComponent, redirectPath) {
-  return class CheckOrg extends Component {
+  class CheckOrg extends Component {
+    constructor(props) {
+      super(props);
+      this.state = { orgId: null };
+    }
+    static getDerivedStateFromProps(newProps, state) {
+      const orgNodeId = document.getElementById('organization-id').dataset.id;
+
+      if (state.orgId !== orgNodeId) {
+        return { orgId: orgNodeId };
+      }
+      return null;
+    }
+
     componentDidUpdate(prevProps) {
       const { location } = this.props;
-
-      // TODO: use topbar react component
-      const orgTitle = location.state && location.state.orgChanged;
-      const prevOrgTitle = prevProps.location.state && prevProps.location.state.orgChanged;
+      const orgTitle = get(location, 'state.orgChanged');
+      const prevOrgTitle = get(prevProps, 'location.state.orgChanged');
 
       if (orgTitle !== prevOrgTitle) {
-        document.getElementById('organization-dropdown').children[0].innerHTML = titleWithCaret(orgTitle);
+        window.tfm.nav.changeOrganization(orgTitle);
       }
     }
+
     render() {
-      if (!orgId()) {
-        return <SetOrganization redirectPath={redirectPath} />;
+      const { location } = this.props;
+      const newOrgSelected = get(location, 'state.orgChanged');
+
+      if (newOrgSelected) {
+        return <WrappedComponent {...this.props} />;
+      } else if (this.state.orgId === '') {
+        return (
+          <React.Fragment>
+            <Header title={__('Select Organization')} />
+            <SetOrganization redirectPath={redirectPath} />
+          </React.Fragment>);
       }
       return <WrappedComponent {...this.props} />;
     }
+  }
+
+  CheckOrg.propTypes = {
+    location: PropTypes.shape({}),
+  };
+
+  CheckOrg.defaultProps = {
+    location: undefined,
   };
+  return CheckOrg;
 }
 
 export default withOrganization;

data/webpack/components/WithOrganization/withOrganization.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import withOrganization from './withOrganization';
+
+jest.mock('../SelectOrg/SetOrganization');
+
+describe('subscriptions page', () => {
+  const WrappedComponent = () => <div> Wrapped! </div>;
+
+  it('should render the wrapped component', () => {
+    global.document.getElementById = () => ({ dataset: { id: 1 } });
+
+    const Component = withOrganization(WrappedComponent, '/test');
+    const page = mount(<Component />);
+    expect(toJson(page)).toMatchSnapshot();
+  });
+
+  it('should render select org page', () => {
+    global.document.getElementById = () => ({ dataset: { id: '' } });
+
+    const Component = withOrganization(WrappedComponent, '/test');
+    const page = mount(<Component />);
+    expect(toJson(page)).toMatchSnapshot();
+  });
+});

data/webpack/containers/Application/Headers.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+const Header = props => (
+  <Helmet>
+    {Object.entries(props).map(([TagName, value]) =>
+      <TagName key={TagName}>{value}</TagName>)};
+  </Helmet>
+);
+
+export default Header;

data/webpack/containers/Application/Routes.js

@@ -6,6 +6,6 @@ export default () => (
   <div>
     {links.map(({ path, component }) => (
       <Route exact key={path} path={`/${path}`} component={component} />
-    ))}
+      ))}
   </div>
 );

data/webpack/containers/Application/config.js

@@ -1,33 +1,49 @@
+import { translate as __ } from 'foremanReact/common/I18n';
 import Repos from '../../scenes/RedHatRepositories';
 import Subscriptions from '../../scenes/Subscriptions';
 import UpstreamSubscriptions from '../../scenes/Subscriptions/UpstreamSubscriptions/index';
 import SubscriptionDetails from '../../scenes/Subscriptions/Details';
 import SetOrganization from '../../components/SelectOrg/SetOrganization';
 import WithOrganization from '../../components/WithOrganization/withOrganization';
+import ModuleStreams from '../../scenes/ModuleStreams';
+import ModuleStreamDetails from '../../scenes/ModuleStreams/Details';
+import withHeader from './withHeaders';
 
 // eslint-disable-next-line import/prefer-default-export
 export const links = [
   {
-    text: 'RH Repos',
     path: 'redhat_repositories',
-    component: WithOrganization(Repos, '/redhat_repositories'),
+    component: WithOrganization(
+      withHeader(Repos, { title: __('RH Repos') }),
+      '/redhat_repositories',
+    ),
   },
   {
-    text: 'RH Subscriptions',
     path: 'subscriptions',
-    component: WithOrganization(Subscriptions, '/subscriptions'),
+    component: WithOrganization(
+      withHeader(Subscriptions, { title: __('RH Subscriptions') }),
+      '/subscriptions',
+    ),
   },
   {
     path: 'subscriptions/add',
-    component: UpstreamSubscriptions,
+    component: withHeader(UpstreamSubscriptions, { title: __('Add Subscriptions') }),
   },
   {
     // eslint-disable-next-line no-useless-escape
-    path: 'subscriptions/:id(\[0-9]*$\)',
-    component: SubscriptionDetails,
+    path: 'subscriptions/:id([0-9]*$)',
+    component: withHeader(SubscriptionDetails, { title: __('Subscription Details') }),
   },
   {
     path: 'organization_select',
     component: SetOrganization,
   },
+  {
+    path: 'module_streams',
+    component: withHeader(ModuleStreams, { title: __('Module Streams') }),
+  },
+  {
+    path: 'module_streams/:id([0-9]*$)',
+    component: withHeader(ModuleStreamDetails, { title: __('Module Stream Details') }),
+  },
 ];

data/webpack/containers/Application/withHeaders.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Header from '../Application/Headers';
+
+function withHeader(WrappedComponent, tags) {
+  const Headers = props => (
+    <React.Fragment>
+      <Header {...tags} />
+      <WrappedComponent {...props} />
+    </React.Fragment>
+  );
+
+  return Headers;
+}
+
+export default withHeader;

data/webpack/move_to_foreman/common/helpers.js

@@ -1,10 +1,11 @@
+import { translate as __ } from 'foremanReact/common/I18n';
 import { addToast } from 'foremanReact/redux/actions/toasts';
+import { SUBSCRIPTIONS_QUANTITIES_FAILURE } from '../../scenes/Subscriptions/SubscriptionConstants';
 
 const urlBuilder = (controller, action, id = undefined) =>
   `/${controller}/${id ? `${id}/` : ''}${action}`;
 
-const urlWithSearch = (base, searchQuery) =>
-  `/${base}?search=${searchQuery}`;
+const urlWithSearch = (base, searchQuery) => `/${base}?search=${searchQuery}`;
 
 const stringIsInteger = (value) => {
   // checking for positive integers only
@@ -12,23 +13,72 @@ const stringIsInteger = (value) => {
   return reg.test(value);
 };
 
-export const getResponseErrorMsgs = ({ data }) => {
+
+const getSubscriptionsErrorMessage = (message) => {
+  const errorMessageHash = {
+    '404 Not Found': __('The subscription cannot be found upstream'),
+    '410 Gone': __('The subscription is no longer available'),
+  };
+  return errorMessageHash[message];
+};
+
+const getCustomMessage = (actionType, message) => {
+  let customMessage;
+  switch (actionType) {
+    case SUBSCRIPTIONS_QUANTITIES_FAILURE:
+      customMessage = getSubscriptionsErrorMessage(message);
+      break;
+    default:
+      customMessage = null;
+  }
+  return customMessage;
+};
+
+export const getResponseErrorMsgs = ({ data, actionType }) => {
   if (data) {
-    const messages = (data.errors || data.displayMessage || data.message || data.error);
-    return (Array.isArray(messages) ? messages : [messages]);
+    const customMessage = getCustomMessage(actionType, data.displayMessage);
+    const messages =
+      customMessage ||
+      data.errors ||
+      data.displayMessage ||
+      data.message ||
+      data.error;
+    return Array.isArray(messages) ? messages : [messages];
   }
   return [];
 };
 
-export const apiError = (actionType, result) => (dispatch) => {
-  const messages = getResponseErrorMsgs(result.response);
+
+export const resultWithSuccessFlag = result => (
+  {
+    ...result,
+    success: (result.status < 300),
+  }
+);
+
+export const apiSuccess = (actionType, result, additionalData = {}) => (dispatch) => {
+  dispatch({
+    type: actionType,
+    response: result.data,
+    ...additionalData,
+  });
+
+  return resultWithSuccessFlag(result);
+};
+
+export const apiResponse = (actionType, result, additionalData = {}) => (dispatch) => {
   dispatch({
     type: actionType,
     payload: {
       result,
-      messages,
+      ...additionalData,
     },
   });
+
+  return resultWithSuccessFlag(result);
+};
+
+export const sendErrorNotifications = messages => (dispatch) => {
   messages.forEach((msg) => {
     dispatch(addToast({
       type: 'error',
@@ -38,6 +88,20 @@ export const apiError = (actionType, result) => (dispatch) => {
   });
 };
 
+export const apiError = (actionType, result, additionalData = {}) => (dispatch) => {
+  const messages = getResponseErrorMsgs(result.response);
+
+  const dataExtenstion = {
+    messages,
+    ...additionalData,
+  };
+
+  apiResponse(actionType, result, dataExtenstion)(dispatch);
+  sendErrorNotifications(messages)(dispatch);
+
+  return resultWithSuccessFlag(result);
+};
+
 export const KEY_CODES = {
   TAB_KEY: 9,
   ENTER_KEY: 13,