katello 3.8.0.rc1 → 3.8.0.rc2

data/webpack/__mocks__/foremanReact/redux.js

@@ -0,0 +1,3 @@
+const state = { katello: { setOrganization: { currentId: 1 } } };
+const store = { getState: () => state };
+export default store;

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

@@ -1,17 +1,19 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
+import { mock as mockApi } from '../../mockRequest';
 
 import Search from '../Search';
 
 describe('Search component', () => {
   const getBaseProps = () => ({
     onSearch: () => {},
-    getAutoCompleteParams: () => ({}),
+    getAutoCompleteParams: () => ({ endpoint: '/fake' }),
   });
 
   describe('rendering', () => {
     it('renders correctly', () => {
+      mockApi.onGet('/katello/api/v2/fake').reply(200, []);
       const component = shallow(<Search {...getBaseProps()} />);
 
       expect(toJson(component)).toMatchSnapshot();

data/webpack/components/SelectOrg/SelectOrg.scss

@@ -0,0 +1,3 @@
+#select-org.well {
+    margin-top: 30px;  
+}

data/webpack/components/SelectOrg/SelectOrgAction.js

@@ -0,0 +1,41 @@
+import { foremanApi, foremanEndpoint } from '../../services/api';
+import {
+  GET_ORGANIZATIONS_LIST_SUCCESS,
+  GET_ORGANIZATIONS_LIST_FAILURE,
+  CHANGE_CURRENT_ORGANIZATION_SUCCESS,
+  CHANGE_CURRENT_ORGANIZATION_FAILURE,
+  GET_ORGANIZATIONS_LIST_REQUEST,
+} from '../../redux/consts';
+
+export const getOrganiztionsList = () => (dispatch) => {
+  dispatch({ type: GET_ORGANIZATIONS_LIST_REQUEST });
+  foremanApi
+    .get('/organizations')
+    .then(({ data }) => {
+      dispatch({
+        type: GET_ORGANIZATIONS_LIST_SUCCESS,
+        payload: data,
+      });
+    })
+    .catch((result) => {
+      dispatch({
+        type: GET_ORGANIZATIONS_LIST_FAILURE,
+        payload: result,
+      });
+    });
+};
+
+export const changeCurrentOrgaziation = orgID => dispatch => foremanEndpoint
+  .get(`organizations/${orgID}/select`)
+  .then(() => {
+    dispatch({
+      type: CHANGE_CURRENT_ORGANIZATION_SUCCESS,
+      payload: orgID,
+    });
+  })
+  .catch(() => {
+    dispatch({
+      type: CHANGE_CURRENT_ORGANIZATION_FAILURE,
+      payload: orgID,
+    });
+  });

data/webpack/components/SelectOrg/SelectOrgReducer.js

@@ -0,0 +1,33 @@
+import Immutable from 'seamless-immutable';
+import {
+  GET_ORGANIZATIONS_LIST_SUCCESS,
+  GET_ORGANIZATIONS_LIST_REQUEST,
+  GET_ORGANIZATIONS_LIST_FAILURE,
+  CHANGE_CURRENT_ORGANIZATION_SUCCESS,
+} from '../../redux/consts';
+
+const initialState = Immutable({ loading: false });
+export default (state = initialState, action) => {
+  const { payload } = action;
+
+  switch (action.type) {
+    case GET_ORGANIZATIONS_LIST_REQUEST:
+      return state.set('loading', true);
+
+    case GET_ORGANIZATIONS_LIST_SUCCESS:
+      return state
+        .set('list', payload.results)
+        .set('loading', false);
+
+    case CHANGE_CURRENT_ORGANIZATION_SUCCESS:
+      return state
+        .set('currentId', payload)
+        .set('loading', false);
+
+    case GET_ORGANIZATIONS_LIST_FAILURE:
+      return state
+        .set('error', payload);
+    default:
+      return state;
+  }
+};

data/webpack/components/SelectOrg/SetOrganization.js

@@ -0,0 +1,116 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button } from 'patternfly-react';
+import { withRouter } from 'react-router';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import Select from '../../move_to_pf/Select/Select';
+import * as SelectOrgActions from './SelectOrgAction';
+import reducer from './SelectOrgReducer';
+import { LoadingState } from '../../move_to_pf/LoadingState';
+import './SelectOrg.scss';
+
+class SetOrganization extends Component {
+  constructor(props) {
+    super(props);
+    this.onSelectItem = this.onSelectItem.bind(this);
+    this.onSend = this.onSend.bind(this);
+    this.state = { disabled: true };
+  }
+
+  componentDidMount() {
+    this.props.getOrganiztionsList();
+  }
+
+  onSelectItem(e) {
+    this.setState({
+      item: e.target.options[e.target.selectedIndex].text,
+      id: e.target.value,
+      disabled: false,
+    });
+  }
+
+  onSend() {
+    const {
+      history,
+      changeCurrentOrgaziation,
+      redirectPath,
+    } = this.props;
+    const { id, item } = this.state;
+
+    changeCurrentOrgaziation(`${id}-${item}`).then(() =>
+      history.push({
+        pathname: redirectPath,
+        state: { orgChanged: this.state.item },
+      }));
+  }
+
+  render() {
+    const {
+      list,
+      loading,
+    } = this.props;
+
+    return (
+      <div id="select-org" className="well col-sm-6 col-sm-offset-3">
+        <LoadingState loading={loading} loadingText={__('Loading')}>
+          <Form>
+            <h1 className="text-center">{__('Select an Organization')}</h1>
+            <p className="text-center">
+              {__('The page you are attempting to access requires selecting a specific organization.')}
+            </p>
+            <p className="text-center">
+              {__('Please select one from the list below and you will be redirected.')}
+            </p>
+
+            <div className="form-group">
+              <div className="col-sm-6 col-sm-offset-3">
+                <Select
+                  value={this.state.id}
+                  placeholder={__('Select an organization')}
+                  id="organization"
+                  name="organization"
+                  className="form-control"
+                  options={list}
+                  onChange={this.onSelectItem}
+                />
+
+              </div>
+
+              <div className="col-sm-3">
+                <Button disabled={this.state.disabled} className="btn btn-primary" onClick={this.onSend}>
+                  {__('Select')}
+                </Button>
+              </div>
+            </div>
+          </Form>
+        </LoadingState>
+      </div>
+    );
+  }
+}
+
+
+SetOrganization.propTypes = {
+  list: PropTypes.arrayOf(PropTypes.object),
+  loading: PropTypes.bool.isRequired,
+  changeCurrentOrgaziation: PropTypes.func.isRequired,
+  history: PropTypes.shape({}).isRequired,
+  redirectPath: PropTypes.string.isRequired,
+  getOrganiztionsList: PropTypes.func.isRequired,
+};
+
+SetOrganization.defaultProps = {
+  list: [],
+};
+
+const mapStateToProps = state => ({
+  orgId: state.katello.setOrganization.currentId,
+  list: state.katello.setOrganization.list,
+  loading: state.katello.setOrganization.loading,
+});
+export const setOrganization = reducer;
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(SelectOrgActions, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(SetOrganization));

data/webpack/components/WithOrganization/withOrganization.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import { orgId } from '../../services/api';
+import SetOrganization from '../SelectOrg/SetOrganization';
+import titleWithCaret from '../../helpers/caret';
+
+function withOrganization(WrappedComponent, redirectPath) {
+  return class CheckOrg extends Component {
+    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;
+
+      if (orgTitle !== prevOrgTitle) {
+        document.getElementById('organization-dropdown').children[0].innerHTML = titleWithCaret(orgTitle);
+      }
+    }
+    render() {
+      if (!orgId()) {
+        return <SetOrganization redirectPath={redirectPath} />;
+      }
+      return <WrappedComponent {...this.props} />;
+    }
+  };
+}
+
+export default withOrganization;

data/webpack/containers/Application/config.js

@@ -2,25 +2,32 @@ 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';
 
 // eslint-disable-next-line import/prefer-default-export
 export const links = [
   {
     text: 'RH Repos',
     path: 'redhat_repositories',
-    component: Repos,
+    component: WithOrganization(Repos, '/redhat_repositories'),
   },
   {
     text: 'RH Subscriptions',
     path: 'subscriptions',
-    component: Subscriptions,
+    component: WithOrganization(Subscriptions, '/subscriptions'),
   },
   {
     path: 'subscriptions/add',
     component: UpstreamSubscriptions,
   },
   {
+    // eslint-disable-next-line no-useless-escape
     path: 'subscriptions/:id(\[0-9]*$\)',
     component: SubscriptionDetails,
   },
+  {
+    path: 'organization_select',
+    component: SetOrganization,
+  },
 ];

data/webpack/containers/Application/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-
+import { orgId } from '../../services/api';
 import * as actions from '../../scenes/Organizations/OrganizationActions';
 import reducer from '../../scenes/Organizations/OrganizationReducer';
 import Routes from './Routes';
@@ -20,7 +20,9 @@ class Application extends Component {
   }
 
   loadData() {
-    this.props.loadOrganization();
+    if (orgId()) {
+      this.props.loadOrganization();
+    }
   }
 
   render() {

data/webpack/global_test_setup.js

@@ -0,0 +1,6 @@
+// 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) => {
+  throw new Error(error);
+};

data/webpack/helpers/caret.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+const htmlCaret = title => title + ReactDOMServer.renderToStaticMarkup(<span className="caret" />);
+
+export default htmlCaret;

data/webpack/mockRequest.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 
 // TODO: figure out way to reuse this from foreman
-const mock = new MockAdapter(axios);
+export const mock = new MockAdapter(axios);
 const methods = {
   GET: 'onGet',
   POST: 'onPost',
@@ -15,10 +15,10 @@ const errorResponse = msg => ({ displayMessage: msg });
 export const mockRequest = ({
   method = 'GET',
   url,
-  data = null,
+  data,
   status = 200,
   response = null,
-}) => mock[methods[method]](url, data).reply(status, response);
+}) => mock[methods[method.toUpperCase()]](url, data).reply(status, response);
 
 export const mockErrorRequest = ({
   status = 500,

data/webpack/move_to_foreman/common/helpers.js

@@ -1,11 +1,41 @@
-export default {
-  urlBuilder(controller, action, id = undefined) {
-    return `/${controller}/${id ? `${id}/` : ''}${action}`;
-  },
+import { addToast } from 'foremanReact/redux/actions/toasts';
+
+const urlBuilder = (controller, action, id = undefined) =>
+  `/${controller}/${id ? `${id}/` : ''}${action}`;
+
+const urlWithSearch = (base, searchQuery) =>
+  `/${base}?search=${searchQuery}`;
+
+const stringIsInteger = (value) => {
+  // checking for positive integers only
+  const reg = new RegExp('^[0-9]+$');
+  return reg.test(value);
+};
 
-  urlWithSearch(base, searchQuery) {
-    return `/${base}?search=${searchQuery}`;
-  },
+export const getResponseErrorMsgs = ({ data }) => {
+  if (data) {
+    const messages = (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);
+  dispatch({
+    type: actionType,
+    payload: {
+      result,
+      messages,
+    },
+  });
+  messages.forEach((msg) => {
+    dispatch(addToast({
+      type: 'error',
+      message: msg,
+      sticky: true,
+    }));
+  });
 };
 
 export const KEY_CODES = {
@@ -14,4 +44,11 @@ export const KEY_CODES = {
   ESCAPE_KEY: 27,
 };
 
-export const getResponseError = ({ data }) => data && (data.displayMessage || data.error);
+export default {
+  urlBuilder,
+  urlWithSearch,
+  getResponseErrorMsgs,
+  apiError,
+  KEY_CODES,
+  stringIsInteger,
+};

data/webpack/move_to_foreman/components/common/{emptyState → EmptyState}/index.js

@@ -13,6 +13,7 @@ const EmptyState = (props) => {
     documentationButton = __('Documentation'),
     docUrl,
     action,
+    actionButton,
     secondayActions,
   } = props;
   const defaultDocumantion = `${documentationLabel} <a href=${docUrl}>${documentationButton}</a>`;
@@ -30,11 +31,23 @@ const EmptyState = (props) => {
       )}
       {action && (
         <PfEmptyState.Action>
-          <LinkContainer to={action.url}>
-            <Button href={action.url} bsStyle="primary" bsSize="large">
+          {action.url && (
+            <LinkContainer to={action.url}>
+              <Button href={action.url} bsStyle="primary" bsSize="large">
+                {action.title}
+              </Button>
+            </LinkContainer>
+          )}
+          {action.onClick && (
+            <Button onClick={action.onClick} bsStyle="primary" bsSize="large">
               {action.title}
             </Button>
-          </LinkContainer>
+          )}
+        </PfEmptyState.Action>
+      )}
+      {actionButton && (
+        <PfEmptyState.Action>
+          {actionButton}
         </PfEmptyState.Action>
       )}
       {secondayActions && (

data/webpack/move_to_foreman/components/common/table/components/Table.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Table as PfTable } from 'patternfly-react';
 import { noop } from 'foremanReact/common/helpers';
-import EmptyState from '../../emptyState';
+import EmptyState from '../../EmptyState';
 import PaginationRow from '../../../../../components/PaginationRow/index';
 
 import TableBody from './TableBody';

data/webpack/move_to_foreman/components/common/table/components/__snapshots__/CollapseSubscriptionGroupButton.test.js.snap

@@ -4,7 +4,7 @@ exports[`CollapseSubscriptionGroupButton renders CollapseSubscriptionGroupButton
 <Icon
   className="collapse-subscription-group-button"
   name="angle-right"
-  onClick={[Function]}
+  onClick={[MockFunction]}
   type="fa"
 />
 `;
@@ -13,7 +13,7 @@ exports[`CollapseSubscriptionGroupButton renders CollapseSubscriptionGroupButton
 <Icon
   className="collapse-subscription-group-button"
   name="angle-down"
-  onClick={[Function]}
+  onClick={[MockFunction]}
   type="fa"
 />
 `;

data/webpack/move_to_foreman/components/common/table/components/__snapshots__/TableSelectionCell.test.js.snap

@@ -9,7 +9,7 @@ exports[`TableSelectionCell renders TableSelectionCell 1`] = `
     checked={true}
     id="some id"
     label="some label"
-    onChange={[Function]}
+    onChange={[MockFunction]}
   />
   some after
 </TableSelectionCell>

data/webpack/move_to_foreman/components/common/table/components/__snapshots__/TableSelectionHeaderCell.test.js.snap

@@ -9,7 +9,7 @@ exports[`TableSelectionHeaderCell renders TableSelectionHeaderCell 1`] = `
     checked={true}
     id="some id"
     label="some label"
-    onChange={[Function]}
+    onChange={[MockFunction]}
   />
 </TableSelectionHeading>
 `;

data/webpack/move_to_pf/LoadingState/LoadingState.js

@@ -1,35 +1,48 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Spinner } from 'patternfly-react';
 import './LoadingState.scss';
 
-const LoadingState = ({
-  loading,
-  loadingText,
-  children,
-}) => {
-  if (loading) {
-    return (
+class LoadingState extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      render: false,
+    };
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({ render: true });
+    }, this.props.timeout);
+  }
+
+  render() {
+    const { loading, loadingText, children } = this.props;
+    const spinner = (
       <div className="loading-state">
         <Spinner loading={loading} size="lg" />
         <p>{loadingText}</p>
-      </div>
-    );
-  }
-
-  return children;
-};
+      </div>);
 
+    if (loading) {
+      return this.state.render ? spinner : null;
+    }
+    return children;
+  }
+}
 LoadingState.propTypes = {
   loading: PropTypes.bool,
   loadingText: PropTypes.string,
   children: PropTypes.node,
+  timeout: PropTypes.number,
 };
 
 LoadingState.defaultProps = {
   loading: false,
   loadingText: __('Loading'),
   children: null,
+  timeout: 300,
 };
 
 export default LoadingState;

data/webpack/move_to_pf/LoadingState/LoadingState.test.js

@@ -6,6 +6,7 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
 import { LoadingState } from './index';
+jest.useFakeTimers();
 
 test('Loading State renders properly while loading', () => {
   const component = shallow(
@@ -13,8 +14,10 @@ test('Loading State renders properly while loading', () => {
       <p>Loading Complete</p>
     </LoadingState>
   );
-
-  expect(toJson(component.render())).toMatchSnapshot();
+    jest.runAllTimers();
+    component.update();
+    expect(component.state('render')).toEqual(true);
+    expect(toJson(component.render())).toMatchSnapshot();
 });
 
 test('Loading State renders properly while not loading', () => {
@@ -23,6 +26,7 @@ test('Loading State renders properly while not loading', () => {
       <p>Loading Complete</p>
     </LoadingState>
   );
-
-  expect(toJson(component.render())).toMatchSnapshot();
+    jest.runAllTimers();
+    component.update();
+    expect(toJson(component.render())).toMatchSnapshot();
 });

data/webpack/move_to_pf/Select/Select.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Select = ({
+  placeholder, onChange, options, disabled, value,
+}) => {
+  const renderOptions = arr =>
+    arr.map(({ name, id }) => (
+      <option key={id} value={id}>
+        {name}
+      </option>
+    ));
+
+  return (
+    <select
+      disabled={disabled}
+      className="form-control"
+      value={value}
+      onChange={onChange}
+    >
+      <option value="" disabled >{placeholder}</option>
+      {renderOptions(options)}
+    </select>
+  );
+};
+
+export default Select;
+
+Select.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(PropTypes.object).isRequired,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.string.isRequired,
+  value: PropTypes.string,
+};
+
+Select.defaultProps = {
+  disabled: false,
+  value: '',
+};

data/webpack/move_to_pf/react-bootstrap-select/index.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { FormControl } from 'react-bootstrap';
+import PropTypes from 'prop-types';
 
 require('jquery');
 require('bootstrap-select');
@@ -52,8 +53,10 @@ class BootstrapSelect extends React.Component {
   render() {
     // TODO: these classes are required because foreman assumes that all selects should use select2 and jquery multiselect
     // TODO: see also http://projects.theforeman.org/issues/21952
+    const { noneSelectedText } = this.props;
+
     return <FormControl {...this.props}
-                        data-none-selected-text={__('Nothing selected')}
+                        data-none-selected-text={noneSelectedText}
                         data-selected-text-format="count>3"
                         data-count-selected-text={__('{0} items selected')}
                         componentClass="select"
@@ -62,4 +65,12 @@ class BootstrapSelect extends React.Component {
   }
 }
 
+BootstrapSelect.propTypes = {
+  noneSelectedText: PropTypes.string,
+}
+
+BootstrapSelect.defaultProps = {
+  noneSelectedText: __('Nothing selected'),
+}
+
 export default BootstrapSelect;

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

@@ -34,7 +34,6 @@ export const createEnabledRepoParams = (extendedParams = {}) => {
 export const loadEnabledRepos = (extendedParams = {}) => (dispatch) => {
   dispatch({ type: ENABLED_REPOSITORIES_REQUEST, params: extendedParams });
   const { searchParams, repoParams } = createEnabledRepoParams(extendedParams);
-
   api
     .get('/repositories', {}, repoParams)
     .then(({ data }) => {