katello 3.11.2 → 3.12.0.rc1

data/package.json

@@ -1,6 +1,7 @@
 {
   "name": "katello",
   "version": "1.0.0",
+  "license": "GPL-2.0",
   "scripts": {
     "storybook": "start-storybook -p 6007",
     "storybook:deploy": "storybook-to-ghpages",
@@ -19,22 +20,22 @@
     "url": "git+https://github.com/katello/katello.git"
   },
   "bugs": {
-    "url": "http://projects.theforeman.org/projects/katello/issues"
+    "url": "https://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": "^23.4.0",
     "babel-eslint": "^8.2.6",
+    "babel-jest": "^23.4.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
+    "coveralls": "^3.0.0",
     "enzyme": "^3.4.0",
     "enzyme-adapter-react-16": "^1.4.0",
-    "coveralls": "^3.0.0",
     "enzyme-to-json": "^3.1.2",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.0.0",
@@ -46,6 +47,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.4.1",
     "prettier": "^1.7.4",
+    "react-redux-test-utils": "^0.1.1",
     "react-test-renderer": "^16.0.0",
     "redux-mock-store": "^1.3.0",
     "redux-thunk": "^2.2.0"
@@ -66,7 +68,6 @@
     "query-string": "^6.1.0",
     "react": "^16.4.0",
     "react-bootstrap": "^0.32.1",
-    "react-bootstrap-tooltip-button": "^1.0.6",
     "react-dom": "^16.4.0",
     "react-ellipsis-with-tooltip": "^1.0.7",
     "react-helmet": "^5.2.0",

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

@@ -1,5 +1,21 @@
+import { snakeCase } from 'lodash';
+
 export default {
   urlBuilder(...parts) {
     return parts.join('/');
   },
 };
+
+const propsToCase = (casingFn, errorMsg, ob) => {
+  if (typeof ob !== 'object') throw Error(errorMsg);
+
+  return Object.keys(ob).reduce((memo, key) => {
+    // eslint-disable-next-line no-param-reassign
+    memo[casingFn(key)] = ob[key];
+    return memo;
+  }, {});
+};
+
+export const propsToSnakeCase = ob =>
+  propsToCase(snakeCase, 'propsToSnakeCase only takes objects', ob);
+

data/webpack/components/Search/index.js

@@ -33,13 +33,15 @@ class Search extends Component {
       params.params || {},
     ];
 
-    api.get(...autoCompleteParams).then(({ data }) => {
-      this.setState({
-        items: data.filter(({ error }) => !error).map(({ label }) => ({
-          text: label.trim(),
-        })),
+    if (autoCompleteParams[0] !== '') {
+      api.get(...autoCompleteParams).then(({ data }) => {
+        this.setState({
+          items: data.filter(({ error }) => !error).map(({ label }) => ({
+            text: label.trim(),
+          })),
+        });
       });
-    });
+    }
   }
 
   onSearch(search) {

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../../move_to_pf/test-utils/testHelpers';
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 
 import CollapseSubscriptionGroupButton from './CollapseSubscriptionGroupButton';
 

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../../move_to_pf/test-utils/testHelpers';
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 
 import Table from './Table';
 import { columnsFixtures, rowsFixtures } from './TableFixtures';

data/webpack/move_to_foreman/components/common/table/components/TableBody.test.js

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../../move_to_pf/test-utils/testHelpers';
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 
 import TableBody from './TableBody';
 import { columnsFixtures, rowsFixtures } from './TableFixtures';

data/webpack/move_to_foreman/components/common/table/components/TableBodyMessage.test.js

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../../move_to_pf/test-utils/testHelpers';
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 
 import TableBodyMessage from './TableBodyMessage';
 

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../../move_to_pf/test-utils/testHelpers';
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 
 import TableSelectionCell from './TableSelectionCell';
 

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../../move_to_pf/test-utils/testHelpers';
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 
 import TableSelectionHeaderCell from './TableSelectionHeaderCell';
 

data/webpack/move_to_foreman/components/common/table/formatters/EntitlementsInlineEditFormatter.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { sprintf } from 'foremanReact/common/I18n';
+import { Table, FormControl, FormGroup, HelpBlock, Spinner } from 'patternfly-react';
+import { validateQuantity } from '../../../../../scenes/Subscriptions/SubscriptionValidations';
+import { KEY_CODES } from '../../../../common/helpers';
+
+const renderValue = (value, additionalData, onActivate) => {
+  const { available, upstream_pool_id: upstreamPoolId } = additionalData.rowData;
+  if (available < 0 || !upstreamPoolId) {
+    return (
+      <td>{available < 0 ? __('Unlimited') : available}</td>
+    );
+  }
+  return (
+    <td className="editable">
+      <div
+        onClick={() => onActivate(additionalData)}
+        onKeyPress={(e) => {
+          if (e.keyCode === KEY_CODES.ENTER_KEY) {
+            onActivate(additionalData);
+          }
+        }}
+        className="input"
+        role="textbox"
+        tabIndex={0}
+      >
+        {value}
+      </div>
+    </td>
+  );
+};
+
+const renderEdit = (hasChanged, onChange, value, additionalData) => {
+  const {
+    upstreamAvailable, upstreamAvailableLoaded, maxQuantity,
+  } = additionalData.rowData;
+  const className = hasChanged(additionalData)
+    ? 'editable editing changed'
+    : 'editable editing';
+
+  let maxMessage;
+  if (maxQuantity && upstreamAvailableLoaded && (upstreamAvailable !== undefined)) {
+    maxMessage = (upstreamAvailable < 0)
+      ? __('Unlimited')
+      : sprintf(__('Max %(maxQuantity)s'), { maxQuantity });
+  }
+
+  const validation = validateQuantity(value, maxQuantity);
+
+  const formGroup = (
+    // We have to block editing until available quantities are loaded.
+    // Otherwise changes that user typed prior to update would be deleted,
+    // because we save them onBlur. Unfortunately onChange can't be used
+    // because reactabular always creates new component instances
+    // in re-render.
+    // The same issue prevents from correct switching inputs on TAB.
+    // See the reactabular code for details:
+    // https://github.com/reactabular/reactabular/blob/master/packages/reactabular-table/src/body-row.js#L58
+    <Spinner loading={!upstreamAvailableLoaded} size="xs">
+      <FormGroup
+        validationState={validation.state}
+      >
+        <FormControl
+          type="text"
+          defaultValue={value}
+          onBlur={e =>
+            onChange(e.target.value, additionalData)
+          }
+        />
+        <HelpBlock>
+          {maxMessage}
+          <div className="validationMessages">
+            {validation.message}
+          </div>
+        </HelpBlock>
+      </FormGroup>
+    </Spinner>
+  );
+
+  return (
+    <td className={className}>
+      {formGroup}
+    </td>
+  );
+};
+
+
+export const entitlementsInlineEditFormatter = (inlineEditController) => {
+  const {
+    hasChanged, onChange, onActivate, isEditing,
+  } = inlineEditController;
+  return Table.inlineEditFormatterFactory({
+    isEditing,
+    renderValue: (value, additionalData) =>
+      renderValue(value, additionalData, onActivate),
+    renderEdit: (value, additionalData) =>
+      renderEdit(hasChanged, onChange, value, additionalData),
+  });
+};
+
+export default entitlementsInlineEditFormatter;

data/webpack/move_to_pf/OptionTooltip/__tests__/OptionTooltip.test.js

@@ -1,5 +1,5 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 import OptionTooltip from '../';
-import { testComponentSnapshotsWithFixtures } from '../../test-utils/testHelpers';
 
 const onClose = () => {};
 const options = [

data/webpack/move_to_pf/TooltipButton/TooltipButton.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Tooltip, OverlayTrigger } from 'patternfly-react';
+import './TooltipButton.scss';
+
+const TooltipButton = ({
+  disabled, title, tooltipText, tooltipId, tooltipPlacement, renderedButton, ...props
+}) => {
+  if (!disabled) return renderedButton || (<Button {...props}>{title}</Button>);
+  return (
+    <OverlayTrigger
+      placement={tooltipPlacement}
+      delayHide={150}
+      overlay={<Tooltip id={tooltipId}>{tooltipText}</Tooltip>}
+    >
+      <div className="tooltip-button-helper">
+        {renderedButton || (<Button {...props} disabled>{title}</Button>)}
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+TooltipButton.propTypes = {
+  disabled: PropTypes.bool,
+  title: PropTypes.string,
+  tooltipText: PropTypes.string,
+  tooltipId: PropTypes.string.isRequired,
+  tooltipPlacement: PropTypes.string,
+  renderedButton: PropTypes.node,
+};
+
+TooltipButton.defaultProps = {
+  disabled: false,
+  title: '',
+  tooltipPlacement: 'bottom',
+  tooltipText: '',
+  renderedButton: null,
+};
+
+export default TooltipButton;

data/webpack/move_to_pf/TooltipButton/TooltipButton.scss

@@ -0,0 +1,36 @@
+.tooltip-button-helper {
+  display: inline-block;
+  vertical-align: top;
+  cursor: not-allowed;
+
+  button {
+    pointer-events: none;
+  }
+}
+.btn-group-vertical > .tooltip-button-helper,
+.btn-group > .tooltip-button-helper {
+  float: left;
+  position: relative;
+}
+.btn-toolbar .tooltip-button-helper {
+  float: left;
+}
+.btn-toolbar > .tooltip-button-helper {
+  margin-left: 5px;
+}
+.btn-group > .tooltip-button-helper:first-child:not(:last-child) > .btn:not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.btn-group > .tooltip-button-helper:last-child:not(:first-child) > .btn,
+.btn-group > .tooltip-button-helper:not(:first-child) > .dropdown-toggle {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.btn-group .btn + .tooltip-button-helper,
+.btn-group .tooltip-button-helper + .btn,
+.btn-group .tooltip-button-helper + .tooltip-button-helper,
+.btn-group .tooltip-button-helper + .btn-group,
+.btn-group .btn-group + .tooltip-button-helper {
+  margin-left: -1px;
+}

data/webpack/move_to_pf/TooltipButton/TooltipButton.test.js

@@ -0,0 +1,37 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import TooltipButton from './TooltipButton';
+
+const createRequiredProps = () => ({
+  tooltipId: 'some-id',
+});
+
+const fixtures = {
+  'renders minimal TooltipButton': { ...createRequiredProps() },
+  'renders disabled TooltipButton': {
+    ...createRequiredProps(),
+    disabled: true,
+    title: 'some-title',
+    tooltipPlacement: 'top',
+    tooltipText: 'some-text',
+  },
+  'renders disabled TooltipButton with renderedButton': {
+    ...createRequiredProps(),
+    disabled: true,
+    renderedButton: 'some-render-button',
+    tooltipPlacement: 'top',
+    tooltipText: 'some-text',
+  },
+  'renders enabled TooltipButton': {
+    ...createRequiredProps(),
+    disabled: false,
+    title: 'some-title',
+  },
+  'renders enabled TooltipButton with renderedButton': {
+    ...createRequiredProps(),
+    disabled: false,
+    renderedButton: 'some-render-button',
+  },
+};
+
+describe('TooltipButton', () =>
+  testComponentSnapshotsWithFixtures(TooltipButton, fixtures));

data/webpack/move_to_pf/TooltipButton/__snapshots__/TooltipButton.test.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TooltipButton renders disabled TooltipButton 1`] = `
+<OverlayTrigger
+  defaultOverlayShown={false}
+  delayHide={150}
+  overlay={
+    <Tooltip
+      bsClass="tooltip"
+      id="some-id"
+      placement="right"
+    >
+      some-text
+    </Tooltip>
+  }
+  placement="top"
+  trigger={
+    Array [
+      "hover",
+      "focus",
+    ]
+  }
+>
+  <div
+    className="tooltip-button-helper"
+  >
+    <Button
+      active={false}
+      block={false}
+      bsClass="btn"
+      bsStyle="default"
+      disabled={true}
+    >
+      some-title
+    </Button>
+  </div>
+</OverlayTrigger>
+`;
+
+exports[`TooltipButton renders disabled TooltipButton with renderedButton 1`] = `
+<OverlayTrigger
+  defaultOverlayShown={false}
+  delayHide={150}
+  overlay={
+    <Tooltip
+      bsClass="tooltip"
+      id="some-id"
+      placement="right"
+    >
+      some-text
+    </Tooltip>
+  }
+  placement="top"
+  trigger={
+    Array [
+      "hover",
+      "focus",
+    ]
+  }
+>
+  <div
+    className="tooltip-button-helper"
+  >
+    some-render-button
+  </div>
+</OverlayTrigger>
+`;
+
+exports[`TooltipButton renders enabled TooltipButton 1`] = `
+<Button
+  active={false}
+  block={false}
+  bsClass="btn"
+  bsStyle="default"
+  disabled={false}
+>
+  some-title
+</Button>
+`;
+
+exports[`TooltipButton renders enabled TooltipButton with renderedButton 1`] = `"some-render-button"`;
+
+exports[`TooltipButton renders minimal TooltipButton 1`] = `
+<Button
+  active={false}
+  block={false}
+  bsClass="btn"
+  bsStyle="default"
+  disabled={false}
+/>
+`;