katello 3.6.0.1.rc2 → 3.7.0.rc1

data/webpack/containers/Application/index.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import * as actions from '../../scenes/Organizations/OrganizationActions';
+import reducer from '../../scenes/Organizations/OrganizationReducer';
+import Routes from './Routes';
+import './overrides.scss';
+
+const mapStateToProps = state => ({ organization: state.organization });
+const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
+
+export const organization = reducer;
+
+class Application extends Component {
+  componentDidMount() {
+    this.loadData();
+  }
+
+  loadData() {
+    this.props.loadOrganization();
+  }
+
+  render() {
+    return (
+      <Router>
+        <Routes />
+      </Router>
+    );
+  }
+}
+
+Application.propTypes = {
+  loadOrganization: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Application);

data/webpack/containers/Application/overrides.scss

@@ -0,0 +1,38 @@
+//TODO: for some reason these are missing in our patternfly version
+html .pagination-pf-pagesize.btn-group {
+  display: flex;
+  float: none;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 5px;
+  width: auto;
+}
+
+// necessary because of !important table margin css from foreman
+// https://github.com/theforeman/foreman/blob/develop/app/assets/stylesheets/base.scss#L242
+.table + .table-view-pf-pagination {
+  margin-top: -6px !important;
+}
+
+// override foreman's .editable styles, that are conflicting with the patternfly ones
+.pf-table-inline-edit {
+  .editable {
+    background: none;
+  }
+}
+
+// needed to ensure correct spacing between buttons and the button
+// container
+.toolbar-pf .form-group {
+  .btn,
+  .btn-group,
+  .btn-container,
+  .tooltip-button-helper {
+    + .btn,
+    + .btn-group,
+    + .btn-container,
+    + .tooltip-button-helper {
+      margin-left: 5px;
+    }
+  }
+}

data/webpack/index.js

@@ -0,0 +1,18 @@
+/* eslint import/no-unresolved: [2, { ignore: [foremanReact/*] }] */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+
+import componentRegistry from 'foremanReact/components/componentRegistry';
+import { mount } from 'foremanReact/common/MountingService';
+import ExperimentalUi from './containers/Application/index';
+import './redux';
+// Not currently mocking anything
+// import './services/api/setupMocks';
+
+componentRegistry.register({
+  name: 'xui_katello',
+  type: ExperimentalUi,
+});
+
+mount('xui_katello', '#reactRoot');

data/webpack/mockRequest.js

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+
+// TODO: figure out way to reuse this from foreman
+const mock = new MockAdapter(axios);
+const methods = {
+  GET: 'onGet',
+  POST: 'onPost',
+  PUT: 'onPut',
+  DELETE: 'onDelete',
+};
+
+const errorResponse = msg => ({ displayMessage: msg });
+
+export const mockRequest = ({
+  method = 'GET',
+  url,
+  data = null,
+  status = 200,
+  response = null,
+}) => mock[methods[method]](url, data).reply(status, response);
+
+export const mockErrorRequest = ({
+  status = 500,
+  ...options
+}) => mockRequest({
+  response: errorResponse(`Request failed with status code ${status}`),
+  status,
+  ...options,
+});
+
+export const mockReset = () => mock.reset();

data/webpack/move_to_foreman/Settings/SettingsActions.js

@@ -0,0 +1,28 @@
+import { foremanApi as api } from '../../services/api';
+
+import {
+  GET_SETTING_REQUEST,
+  GET_SETTING_SUCCESS,
+  GET_SETTING_FAILURE,
+} from './SettingsConstants';
+
+export const loadSetting = settingName => (dispatch) => {
+  dispatch({ type: GET_SETTING_REQUEST });
+
+  return api
+    .get(`/settings/${settingName}`)
+    .then(({ data }) => {
+      dispatch({
+        type: GET_SETTING_SUCCESS,
+        response: data,
+      });
+    })
+    .catch((result) => {
+      dispatch({
+        type: GET_SETTING_FAILURE,
+        result,
+      });
+    });
+};
+
+export default loadSetting;

data/webpack/move_to_foreman/Settings/SettingsConstants.js

@@ -0,0 +1,3 @@
+export const GET_SETTING_REQUEST = 'GET_SETTING_REQUEST';
+export const GET_SETTING_SUCCESS = 'GET_SETTING_SUCCESS';
+export const GET_SETTING_FAILURE = 'GET_SETTING_FAILURE';

data/webpack/move_to_foreman/Settings/__tests__/SettingsActions.test.js

@@ -0,0 +1,41 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import Immutable from 'seamless-immutable';
+import {
+  successResponse,
+  getSuccessActions,
+  getFailureActions,
+} from './settings.fixtures';
+
+import { loadSetting } from '../SettingsActions';
+
+const mockStore = configureMockStore([thunk]);
+const store = mockStore({ subscriptions: Immutable({}) });
+const mockApi = new MockAdapter(axios);
+
+afterEach(() => {
+  store.clearActions();
+  mockApi.reset();
+});
+
+describe('load setting actions  ', () => {
+  const url = '/api/v2/settings/test_setting';
+
+  describe('creates GET_SETTING_REQUEST', () => {
+    it('and then fails with 422', () => {
+      mockApi.onGet(url).reply(422);
+
+      return store.dispatch(loadSetting('test_setting'))
+        .then(() => expect(store.getActions()).toEqual(getFailureActions));
+    });
+
+    it('and ends with success', () => {
+      mockApi.onGet(url).reply(200, successResponse);
+
+      return store.dispatch(loadSetting('test_setting'))
+        .then(() => expect(store.getActions()).toEqual(getSuccessActions));
+    });
+  });
+});

data/webpack/move_to_foreman/Settings/__tests__/settings.fixtures.js

@@ -0,0 +1,34 @@
+import Immutable from 'seamless-immutable';
+
+export const successResponse = Immutable({
+  value: false,
+  description: 'A server operating in disconnected mode does not communicate with the Red Hat CDN.',
+  category: 'Setting::Content',
+  settings_type: 'boolean',
+  default: false,
+  created_at: '2018-03-09 10:58:34 -0500',
+  updated_at: '2018-05-07 22:46:58 -0400',
+  id: 146,
+  name: 'content_disconnected',
+  category_name: 'Content',
+});
+
+export const getSuccessActions = [
+  {
+    type: 'GET_SETTING_REQUEST',
+  },
+  {
+    response: successResponse,
+    type: 'GET_SETTING_SUCCESS',
+  },
+];
+
+export const getFailureActions = [
+  {
+    type: 'GET_SETTING_REQUEST',
+  },
+  {
+    result: new Error('Request failed with status code 422'),
+    type: 'GET_SETTING_FAILURE',
+  },
+];

data/webpack/move_to_foreman/__mocks__/foreman_toast_notifications.js

@@ -0,0 +1,3 @@
+export const notify = () => {};
+
+export default notify;

data/webpack/move_to_foreman/common/helpers.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Table } from 'patternfly-react';
+
+export default {
+  urlBuilder(controller, action, id = undefined) {
+    return `/${controller}/${id ? `${id}/` : ''}${action}`;
+  },
+};
+
+export const KEY_CODES = {
+  TAB_KEY: 9,
+  ENTER_KEY: 13,
+  ESCAPE_KEY: 27,
+};
+
+export const selectionHeaderCellFormatter = (selectionController, label) => (
+  <Table.SelectionHeading aria-label={label}>
+    <Table.Checkbox
+      id="selectAll"
+      label={label}
+      checked={selectionController.allRowsSelected()}
+      onChange={() => selectionController.selectAllRows()}
+    />
+  </Table.SelectionHeading>
+);
+
+export const selectionCellFormatter = (selectionController, value, additionalData) => (
+  <Table.SelectionCell>
+    <Table.Checkbox
+      id={`select${additionalData.rowIndex}`}
+      label={__('Select row')}
+      checked={selectionController.isSelected(additionalData)}
+      onChange={() => selectionController.selectRow(additionalData)}
+    />
+  </Table.SelectionCell>
+);

data/webpack/move_to_foreman/components/common/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'patternfly-react';
+import Dialog from '../Dialog';
+
+const ConfirmDialog = (props) => {
+  const {
+    onCancel, cancelLabel, onConfirm, confirmLabel, confirmStyle, ...otherProps
+  } = props;
+
+  const buttons = [
+    <Button
+      key="cancel"
+      bsStyle="default"
+      className="btn-cancel"
+      onClick={onCancel}
+    >
+      {cancelLabel}
+    </Button>,
+    <Button
+      key="confirm"
+      bsStyle={confirmStyle}
+      onClick={onConfirm}
+    >
+      {confirmLabel}
+    </Button>,
+  ];
+
+  return (
+    <Dialog buttons={buttons} onCancel={onCancel} {...otherProps} />
+  );
+};
+
+ConfirmDialog.propTypes = {
+  ...Button.propTypes,
+  onConfirm: PropTypes.func.isRequired,
+  confirmLabel: PropTypes.string,
+  confirmStyle: PropTypes.string,
+};
+
+ConfirmDialog.defaultProps = {
+  ...Button.defaultProps,
+  confirmLabel: __('Save'),
+  cancelLabel: __('Cancel'),
+  dangerouslySetInnerHTML: undefined,
+  message: undefined,
+  confirmStyle: 'primary',
+};
+
+export default ConfirmDialog;

data/webpack/move_to_foreman/components/common/ConfirmDialog/__tests__/ConfirmDialog.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import ConfirmDialog from '../ConfirmDialog';
+
+describe('ConfirmDialog', () => {
+  const props = {
+    show: true,
+    onConfirm: () => {},
+    onCancel: () => {},
+    title: 'Please Confirm',
+  };
+  const message = 'Proceed with this action?';
+
+  it('renders a confirm dialog', async () => {
+    const dialog = shallow(<ConfirmDialog
+      {...props}
+      {...{ message }}
+    />);
+    expect(toJson(dialog)).toMatchSnapshot();
+  });
+
+  it('enables to override button labels', async () => {
+    const dialog = shallow(<ConfirmDialog
+      {...props}
+      {...{ message }}
+      confirmLabel="Custom confirm"
+      cancelLabel="Custom cancel"
+    />);
+    expect(toJson(dialog)).toMatchSnapshot();
+  });
+
+  it('enables to set inner html', async () => {
+    const dialog = shallow(<ConfirmDialog
+      {...props}
+      dangerouslySetInnerHTML={{ _html: '<b>Custom</b> html content' }}
+    />);
+    expect(toJson(dialog)).toMatchSnapshot();
+  });
+});

data/webpack/move_to_foreman/components/common/ConfirmDialog/__tests__/__snapshots__/ConfirmDialog.test.js.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmDialog enables to override button labels 1`] = `
+<Dialog
+  active={false}
+  block={false}
+  bsClass="btn"
+  bsStyle="default"
+  buttons={
+    Array [
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="default"
+        className="btn-cancel"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Custom cancel
+      </Button>,
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="primary"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Custom confirm
+      </Button>,
+    ]
+  }
+  cancelLabel="Ok"
+  disabled={false}
+  message="Proceed with this action?"
+  onCancel={[Function]}
+  show={true}
+  title="Please Confirm"
+/>
+`;
+
+exports[`ConfirmDialog enables to set inner html 1`] = `
+<Dialog
+  active={false}
+  block={false}
+  bsClass="btn"
+  bsStyle="default"
+  buttons={
+    Array [
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="default"
+        className="btn-cancel"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Cancel
+      </Button>,
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="primary"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Save
+      </Button>,
+    ]
+  }
+  cancelLabel="Ok"
+  dangerouslySetInnerHTML={
+    Object {
+      "_html": "<b>Custom</b> html content",
+    }
+  }
+  disabled={false}
+  onCancel={[Function]}
+  show={true}
+  title="Please Confirm"
+/>
+`;
+
+exports[`ConfirmDialog renders a confirm dialog 1`] = `
+<Dialog
+  active={false}
+  block={false}
+  bsClass="btn"
+  bsStyle="default"
+  buttons={
+    Array [
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="default"
+        className="btn-cancel"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Cancel
+      </Button>,
+      <Button
+        active={false}
+        block={false}
+        bsClass="btn"
+        bsStyle="primary"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Save
+      </Button>,
+    ]
+  }
+  cancelLabel="Ok"
+  disabled={false}
+  message="Proceed with this action?"
+  onCancel={[Function]}
+  show={true}
+  title="Please Confirm"
+/>
+`;