katello 3.6.0.1.rc2 → 3.7.0.rc1

data/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "katello",
+  "version": "1.0.0",
+  "scripts": {
+    "storybook": "start-storybook -p 6007",
+    "storybook:deploy": "storybook-to-ghpages",
+    "test": "jest webpack",
+    "test:watch": "jest webpack --watchAll",
+    "test:current": "jest webpack --watch",
+    "format": "prettier --single-quote --trailing-comma es5 --write 'webpack/**/*.js'",
+    "build": "npm run format && npm run lint",
+    "lint": "eslint --fix webpack/ || exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/katello/katello.git"
+  },
+  "bugs": {
+    "url": "http://projects.theforeman.org/projects/katello/issues"
+  },
+  "devDependencies": {
+    "@storybook/react": "^3.2.17",
+    "@storybook/storybook-deployer": "^2.0.0",
+    "babel-core": "^6.26.3",
+    "babel-jest": "^21.2.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "enzyme-to-json": "^3.1.2",
+    "eslint": "^4.8.0",
+    "eslint-config-airbnb": "^16.0.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jest": "^21.2.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^21.2.1",
+    "prettier": "^1.7.4",
+    "react-test-renderer": "^16.0.0",
+    "redux-mock-store": "^1.3.0",
+    "redux-thunk": "^2.2.0"
+  },
+  "dependencies": {
+    "axios": "^0.17.1",
+    "axios-mock-adapter": "^1.10.0",
+    "bootstrap-select": "1.12.4",
+    "classnames": "^2.2.5",
+    "downshift": "^1.28.0",
+    "jed": "^1.1.1",
+    "lodash": "^4.17.5",
+    "patternfly": "^3.41.1",
+    "patternfly-react": "^2.1.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-bootstrap": "^0.31.5",
+    "react-bootstrap-tooltip-button": "^1.0.6",
+    "react-dom": "^16.0.0",
+    "react-ellipsis-with-tooltip": "^1.0.7",
+    "react-redux": "^5.0.6",
+    "react-router": "^4.2.0",
+    "react-router-bootstrap": "0.24.4",
+    "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2",
+    "seamless-immutable": "^7.1.2"
+  },
+  "jest": {
+    "setupFiles": [
+      "raf/polyfill",
+      "./webpack/test_setup.js"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/foreman/",
+      "<rootDir>/.+fixtures.+"
+    ],
+    "moduleNameMapper": {
+      "^.+\\.(css|scss)$": "identity-obj-proxy"
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+export default {
+  urlBuilder(...parts) {
+    return parts.join('/');
+  },
+};

data/webpack/__mocks__/foremanReact/components/common/table.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const headerFormat = value => <th>{value}</th>;
+export const cellFormat = value => <td>{value}</td>;
+const Table = () => <table />;
+export default Table;

data/webpack/__mocks__/react-bootstrap-tooltip-button.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const TooltipButton = () => () => (<button>Test Button</button>);
+
+export default TooltipButton;
+

data/webpack/components/MultiSelect/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { FormGroup, ControlLabel } from 'react-bootstrap';
+import BootstrapSelect from '../../move_to_pf/react-bootstrap-select';
+
+function MultiSelect(props) {
+  const { options, onChange, ...otherProps } = props;
+
+  const optionComponents = options.map(option => (
+    <option key={`option-${option.value}`} value={option.value}>
+      {option.label}
+    </option>
+  ));
+
+  return (
+    <FormGroup controlId="formControlsSelectMultiple">
+      <ControlLabel srOnly>{__('Select Value')}</ControlLabel>
+      <BootstrapSelect {...otherProps} multiple onChange={evt => onChange(evt)}>
+        {optionComponents}
+      </BootstrapSelect>
+    </FormGroup>
+  );
+}
+
+MultiSelect.defaultProps = {
+  onChange: () => {},
+};
+
+MultiSelect.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onChange: PropTypes.func,
+};
+
+export default MultiSelect;

data/webpack/components/PaginationRow/PaginationRow.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import PaginationRow from '../PaginationRow';
+
+describe('PaginationRow component', () => {
+  const getBaseProps = () => ({
+    pagination: {
+      page: 2,
+      perPage: 5,
+      perPageOptions: [5, 10, 25],
+    },
+    itemCount: 52,
+    viewType: 'list',
+  });
+
+  describe('rendering', () => {
+    it('renders correctly', () => {
+      const component = shallow(<PaginationRow {...getBaseProps()} />);
+
+      expect(toJson(component)).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PaginationRow component rendering renders correctly 1`] = `
+<Paginator
+  className=""
+  dropdownButtonId="pagination-row-dropdown"
+  itemCount={52}
+  messages={
+    Object {
+      "currentPage": "Current Page",
+      "firstPage": "First Page",
+      "lastPage": "Last Page",
+      "nextPage": "Next Page",
+      "of": "of",
+      "perPage": "per page",
+      "previousPage": "Previous Page",
+    }
+  }
+  onChange={[Function]}
+  onPageSet={[Function]}
+  onPerPageSelect={[Function]}
+  pagination={
+    Object {
+      "page": 2,
+      "perPage": 5,
+      "perPageOptions": Array [
+        5,
+        10,
+        25,
+      ],
+    }
+  }
+  viewType="list"
+/>
+`;

data/webpack/components/PaginationRow/index.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Paginator } from 'patternfly-react';
+
+const defaultPerPageOptions = [5, 10, 15, 25, 50];
+
+const initPagination = (props) => {
+  const pagination = props.pagination || {};
+  // The default pagination is normally returned from server.
+  // This values are used only when there's some error in the server response.
+  const defaultPagination = {
+    page: 1,
+    perPage: 10,
+    perPageOptions: defaultPerPageOptions,
+  };
+  return { ...defaultPagination, ...pagination };
+};
+
+class PaginationRow extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = initPagination(this.props);
+
+    this.onPageSet = this.onPageSet.bind(this);
+    this.onPerPageSelect = this.onPerPageSelect.bind(this);
+  }
+
+  componentWillReceiveProps(newProps) {
+    this.setState(initPagination(newProps));
+  }
+
+  onPageSet(page) {
+    this.update({ page });
+    this.props.onPageSet(page);
+  }
+
+  onPerPageSelect(perPage) {
+    this.update({ perPage, page: 1 });
+    this.props.onPerPageSelect(perPage);
+  }
+
+  update(changes) {
+    const newState = { ...this.state, ...changes };
+    this.setState(newState);
+
+    this.props.onChange({
+      page: newState.page,
+      perPage: newState.perPage,
+    });
+  }
+
+  render() {
+    const {
+      onPageSet, onPerPageSelect, pagination, ...otherProps
+    } = this.props;
+
+    return (
+      <Paginator
+        {...otherProps}
+        pagination={this.state}
+        onPageSet={this.onPageSet}
+        onPerPageSelect={this.onPerPageSelect}
+      />
+    );
+  }
+}
+
+PaginationRow.defaultPerPageOptions = defaultPerPageOptions;
+
+PaginationRow.defaultProps = {
+  onChange: () => {},
+  ...Paginator.defaultProps,
+};
+
+PaginationRow.propTypes = {
+  /** page and per-page selection callback */
+  onChange: PropTypes.func,
+  pagination: PropTypes.shape({
+    /** the current page */
+    page: PropTypes.number,
+    /** the current per page setting */
+    perPage: PropTypes.number,
+    /** per page options */
+    perPageOptions: PropTypes.array,
+  }),
+  ...Paginator.propTypes,
+};
+
+export default PaginationRow;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import Search from '../Search';
+
+describe('Search component', () => {
+  const getBaseProps = () => ({
+    onSearch: () => {},
+    getAutoCompleteParams: () => ({}),
+  });
+
+  describe('rendering', () => {
+    it('renders correctly', () => {
+      const component = shallow(<Search {...getBaseProps()} />);
+
+      expect(toJson(component)).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search component rendering renders correctly 1`] = `
+<div>
+  <ControlLabel
+    bsClass="control-label"
+    srOnly={true}
+  >
+    Search
+  </ControlLabel>
+  <TypeAhead
+    actionText="Search"
+    items={Array []}
+    onInputUpdate={[Function]}
+    onSearch={[Function]}
+  />
+</div>
+`;

data/webpack/components/Search/helpers.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/prefer-default-export
+export const stringIncludes = (string, includes) => {
+  const a = string.replace(/\s/g, '').toLowerCase();
+  const b = includes.replace(/\s/g, '').toLowerCase();
+  return a.includes(b);
+};

data/webpack/components/Search/index.js

@@ -0,0 +1,86 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { Component } from 'react';
+import { ControlLabel } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+import TypeAhead from '../../move_to_pf/TypeAhead/TypeAhead';
+import api from '../../services/api';
+import { stringIncludes } from './helpers';
+
+class Search extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { items: [] };
+    this.onInputUpdate = this.onInputUpdate.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+  }
+
+  componentDidMount() {
+    this.onInputUpdate();
+  }
+
+  onInputUpdate(searchTerm = '') {
+    const items = this.state.items.filter(({ text }) => stringIncludes(text, searchTerm));
+
+    if (items.length !== this.state.items.length) {
+      this.setState({ items });
+    }
+
+    const params = this.props.getAutoCompleteParams(searchTerm);
+    const autoCompleteParams = [
+      params.endpoint,
+      params.headers || {},
+      params.params || {},
+    ];
+
+    api.get(...autoCompleteParams).then(({ data }) => {
+      this.setState({
+        items: data.filter(({ error }) => !error).map(({ label }) => ({
+          text: label.trim(),
+        })),
+      });
+    });
+  }
+
+  onSearch(search) {
+    if (this.props.updateSearchQuery) this.props.updateSearchQuery(search);
+    this.props.onSearch(search);
+  }
+
+  render() {
+    return (
+      <div>
+        <ControlLabel srOnly>{__('Search')}</ControlLabel>
+        <TypeAhead
+          items={this.state.items}
+          onInputUpdate={this.onInputUpdate}
+          onSearch={this.onSearch}
+        />
+      </div>
+    );
+  }
+}
+
+Search.propTypes = {
+  /** Callback function when the "Search" button is pressed:
+      onSearch(searchQuery)
+   */
+  onSearch: PropTypes.func.isRequired,
+  /** Function returning params for the scoped-search complete api call:
+      getAutoCompleteParams(searchQuery)
+
+      Should return a shape { headers, params, endpoint }, e.g.:
+      {
+        headers: {},
+        params: { organization_id, search },
+        endpoint: '/subscriptions/auto_complete_search'
+      }
+  */
+  getAutoCompleteParams: PropTypes.func.isRequired,
+  updateSearchQuery: PropTypes.func,
+};
+
+Search.defaultProps = {
+  updateSearchQuery: undefined,
+};
+export default Search;

data/webpack/containers/Application/Routes.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { links } from './config';
+
+export default () => (
+  <div>
+    {links.map(({ path, component }) => (
+      <Route exact key={path} path={`/${path}`} component={component} />
+    ))}
+  </div>
+);

data/webpack/containers/Application/config.js

@@ -0,0 +1,21 @@
+import Repos from '../../scenes/RedHatRepositories';
+import Subscriptions from '../../scenes/Subscriptions';
+import UpstreamSubscriptions from '../../scenes/Subscriptions/UpstreamSubscriptions/index';
+
+// eslint-disable-next-line import/prefer-default-export
+export const links = [
+  {
+    text: 'RH Repos',
+    path: 'redhat_repositories',
+    component: Repos,
+  },
+  {
+    text: 'RH Subscriptions',
+    path: 'xui/subscriptions',
+    component: Subscriptions,
+  },
+  {
+    path: 'xui/subscriptions/add',
+    component: UpstreamSubscriptions,
+  },
+];