katello 3.6.0.1.rc2 → 3.7.0.rc1

data/webpack/scenes/RedHatRepositories/components/__tests__/RepositoryTypeIcon.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import RepositoryTypeIcon from '../RepositoryTypeIcon';
+
+describe('RepositoryTypeIcon component', () => {
+  const getBaseProps = () => ({
+    id: 123,
+    type: 'unknown-type',
+  });
+
+  describe('rendering', () => {
+    test('it should get rendered correctly', () => {
+      const component = mount(<RepositoryTypeIcon {...getBaseProps()} />);
+
+      expect(toJson(component)).toMatchSnapshot();
+    });
+
+    test('it should get rendered correctly when type is provided', () => {
+      const props = getBaseProps();
+      props.type = 'yum';
+      const component = mount(<RepositoryTypeIcon {...props} />);
+
+      expect(toJson(component)).toMatchSnapshot();
+    });
+  });
+});

data/webpack/scenes/RedHatRepositories/components/__tests__/__snapshots__/RepositoryTypeIcon.test.js.snap

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RepositoryTypeIcon component rendering it should get rendered correctly 1`] = `
+<RepositoryTypeIcon
+  id={123}
+  type="unknown-type"
+>
+  <OverlayTrigger
+    defaultOverlayShown={false}
+    overlay={
+      <Tooltip
+        bsClass="tooltip"
+        id="type-tooltip-123"
+        placement="right"
+      >
+        unknown-type
+      </Tooltip>
+    }
+    placement="bottom"
+    rootClose={false}
+    trigger={
+      Array [
+        "hover",
+        "focus",
+      ]
+    }
+  >
+    <ListViewIcon
+      className=""
+      name="question"
+      onBlur={[Function]}
+      onClick={null}
+      onFocus={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      size="sm"
+      type="fa"
+    >
+      <Icon
+        className="list-view-pf-icon-sm"
+        name="question"
+        onBlur={[Function]}
+        onClick={null}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        type="fa"
+      >
+        <FontAwesome
+          className="list-view-pf-icon-sm"
+          name="question"
+          onBlur={[Function]}
+          onClick={null}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+        >
+          <span
+            aria-hidden={true}
+            className="fa fa-question list-view-pf-icon-sm"
+            onBlur={[Function]}
+            onClick={null}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          />
+        </FontAwesome>
+      </Icon>
+    </ListViewIcon>
+  </OverlayTrigger>
+</RepositoryTypeIcon>
+`;
+
+exports[`RepositoryTypeIcon component rendering it should get rendered correctly when type is provided 1`] = `
+<RepositoryTypeIcon
+  id={123}
+  type="yum"
+>
+  <OverlayTrigger
+    defaultOverlayShown={false}
+    overlay={
+      <Tooltip
+        bsClass="tooltip"
+        id="type-tooltip-123"
+        placement="right"
+      >
+        yum
+      </Tooltip>
+    }
+    placement="bottom"
+    rootClose={false}
+    trigger={
+      Array [
+        "hover",
+        "focus",
+      ]
+    }
+  >
+    <ListViewIcon
+      className=""
+      name="bundle"
+      onBlur={[Function]}
+      onClick={null}
+      onFocus={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      size="sm"
+      type="pf"
+    >
+      <Icon
+        className="list-view-pf-icon-sm"
+        name="bundle"
+        onBlur={[Function]}
+        onClick={null}
+        onFocus={[Function]}
+        onMouseOut={[Function]}
+        onMouseOver={[Function]}
+        type="pf"
+      >
+        <PatternflyIcon
+          className="list-view-pf-icon-sm"
+          name="bundle"
+          onBlur={[Function]}
+          onClick={null}
+          onFocus={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+        >
+          <span
+            aria-hidden="true"
+            className="pficon pficon-bundle list-view-pf-icon-sm"
+            onBlur={[Function]}
+            onClick={null}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          />
+        </PatternflyIcon>
+      </Icon>
+    </ListViewIcon>
+  </OverlayTrigger>
+</RepositoryTypeIcon>
+`;

data/webpack/scenes/RedHatRepositories/helpers.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ListView } from 'patternfly-react';
+import { sprintf } from 'jed';
+
+import PaginationRow from '../../components/PaginationRow/index';
+import RepositorySet from './components/RepositorySet';
+import EnabledRepository from './components/EnabledRepository';
+
+export const getSetsComponent = (repoSetsState, onPaginationChange) => {
+  const {
+    results,
+    searchIsActive,
+    pagination,
+    itemCount,
+  } = repoSetsState;
+
+  if (results.length === 0) {
+    if (searchIsActive) {
+      return <p>{__('No repository sets match your search criteria.')}</p>;
+    }
+    const noProductsMessage =
+      sprintf(
+        __('No Red Hat products currently exist, please import a manifest %(anchorBegin)s here %(anchorEnd)s to receive Red Hat content. No repository sets available.'),
+        {
+          anchorBegin: '<a href="/subscriptions/manifest/import">',
+          anchorEnd: '</a>',
+        },
+      );
+
+    // eslint-disable-next-line react/no-danger
+    return <p dangerouslySetInnerHTML={{ __html: noProductsMessage }} />;
+  }
+  return (
+    <ListView>
+      <PaginationRow
+        viewType="list"
+        itemCount={itemCount}
+        pagination={pagination}
+        onChange={onPaginationChange}
+      />
+      {results.map(set => <RepositorySet id={set.id} key={set.id} {...set} />)}
+    </ListView>
+  );
+};
+
+export const getEnabledComponent = (enabledReposState, onPaginationChange) => {
+  const {
+    repositories,
+    searchIsActive,
+    pagination,
+    itemCount,
+  } = enabledReposState;
+
+  if (repositories.length === 0) {
+    if (searchIsActive) {
+      return <p>{__('No enabled repositories match your search criteria.')}</p>;
+    }
+    return <p>{__('No repositories enabled.')}</p>;
+  }
+
+  return (
+    <ListView>
+      <PaginationRow
+        viewType="list"
+        itemCount={itemCount}
+        pagination={pagination}
+        onChange={onPaginationChange}
+      />
+      {repositories.map(repo => <EnabledRepository key={repo.id} {...repo} />)}
+    </ListView>
+  );
+};

data/webpack/scenes/RedHatRepositories/index.js

@@ -0,0 +1,91 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint import/no-unresolved: [2, { ignore: [foremanReact/*] }] */
+/* eslint-disable import/no-unresolved */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Grid, Row, Col } from 'react-bootstrap';
+import { Spinner } from 'patternfly-react';
+
+import { createEnabledRepoParams, loadEnabledRepos } from '../../redux/actions/RedHatRepositories/enabled';
+import { loadRepositorySets } from '../../redux/actions/RedHatRepositories/sets';
+import SearchBar from './components/SearchBar';
+import { getSetsComponent, getEnabledComponent } from './helpers';
+
+class RedHatRepositoriesPage extends Component {
+  componentDidMount() {
+    this.loadData();
+  }
+
+  loadData() {
+    this.props.loadEnabledRepos();
+    this.props.loadRepositorySets();
+  }
+
+  render() {
+    const { enabledRepositories, repositorySets } = this.props;
+    const { repoParams } = createEnabledRepoParams(enabledRepositories);
+
+    return (
+      <Grid id="redhatRepositoriesPage" bsClass="container-fluid">
+        <h1>{__('Red Hat Repositories')}</h1>
+
+        <Row className="toolbar-pf">
+          <Col sm={12}>
+            <SearchBar repoParams={repoParams} />
+          </Col>
+        </Row>
+
+        <Row className="row-eq-height">
+          <Col sm={6} className="available-repositories-container">
+            <h2>{__('Available Repositories')}</h2>
+            <Spinner loading={repositorySets.loading}>
+              {getSetsComponent(
+                repositorySets,
+                (pagination) => {
+                  this.props.loadRepositorySets({
+                    ...pagination,
+                    search: repositorySets.search,
+                  });
+                },
+              )}
+            </Spinner>
+          </Col>
+
+          <Col sm={6} className="enabled-repositories-container">
+            <h2>{__('Enabled Repositories')}</h2>
+            <Spinner loading={enabledRepositories.loading} className="small-spacer">
+              {getEnabledComponent(
+                enabledRepositories,
+                (pagination) => {
+                  this.props.loadEnabledRepos({
+                    ...pagination,
+                    search: enabledRepositories.search,
+                  });
+                },
+              )}
+            </Spinner>
+          </Col>
+        </Row>
+      </Grid>
+    );
+  }
+}
+
+RedHatRepositoriesPage.propTypes = {
+  loadEnabledRepos: PropTypes.func.isRequired,
+  loadRepositorySets: PropTypes.func.isRequired,
+  enabledRepositories: PropTypes.shape({}).isRequired,
+  repositorySets: PropTypes.shape({}).isRequired,
+};
+
+const mapStateToProps = ({ katello: { redHatRepositories: { enabled, sets } } }) => ({
+  enabledRepositories: enabled,
+  repositorySets: sets,
+});
+
+export default connect(mapStateToProps, {
+  loadEnabledRepos,
+  loadRepositorySets,
+})(RedHatRepositoriesPage);

data/webpack/scenes/RedHatRepositories/index.scss

@@ -0,0 +1,63 @@
+@import '~patternfly/dist/sass/patternfly/_color-variables';
+
+.row-eq-height {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.list-item-with-divider:not(:last-child) {
+  border-bottom: 1px solid $color-pf-black-200;
+}
+
+.list-error-danger {
+  color: $color-pf-red-200;
+}
+
+.small-spacer {
+  margin: 10px 0;
+}
+
+#redhatRepositoriesPage {
+  .list-group-item-header .list-view-pf-description,
+  .enabled-repositories-container .list-view-pf-description {
+    width: 100%;
+
+    .list-group-item-heading {
+      white-space: pre-wrap;
+    }
+  }
+
+  .list-view-pf-view {
+    background-color: inherit;
+  }
+
+  .available-repositories-container {
+    background-color: $color-pf-white;
+    border-right: $color-pf-black-300 2px solid;
+  }
+
+  .content-view-pf-pagination {
+    background-color: $color-pf-white;
+    margin-bottom: 20px;
+  }
+
+  @media (min-width: 1280px) {
+    .toolbar-pf-filter {
+      width: 50%;
+
+      .input-group {
+        width: 400px;
+      }
+    }
+  }
+
+  .enabled-repositories-container {
+    background-color: $color-pf-black-200;
+
+    .pficon.list-view-pf-icon-sm {
+      border-color: $color-pf-green-300;
+    }
+  }
+}

data/webpack/scenes/Subscriptions/EntitlementsInlineEditFormatter.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Table, FormControl, FormGroup, HelpBlock, Spinner } from 'patternfly-react';
+import { validateQuantity } from './SubscriptionValidations';
+import { KEY_CODES } from '../../move_to_foreman/common/helpers';
+
+export const entitlementsInlineEditFormatter =
+  inlineEditController => Table.inlineEditFormatterFactory({
+    isEditing: additionalData =>
+      inlineEditController.isEditing(additionalData),
+    renderValue: (value, additionalData) => {
+      const { rowData } = additionalData;
+      if (rowData.available < 0) {
+        return (
+          <td>{__('Unlimited')}</td>
+        );
+      }
+      return (
+        <td className="editable">
+          <div
+            onClick={() => inlineEditController.onActivate(additionalData)}
+            onKeyPress={(e) => {
+              if (e.keyCode === KEY_CODES.ENTER_KEY) {
+                inlineEditController.onActivate(additionalData);
+              }
+            }}
+            className="input"
+            role="textbox"
+            tabIndex={0}
+          >
+            {value}
+          </div>
+        </td>
+      );
+    },
+    renderEdit: (value, additionalData) => {
+      const { availableQuantity } = additionalData.rowData;
+
+      const className = inlineEditController.hasChanged(additionalData)
+        ? 'editable editing changed'
+        : 'editable editing';
+
+      const maxMessage = [
+        __('Max'),
+        availableQuantity,
+      ].join(' ');
+
+      const validation = validateQuantity(value, availableQuantity);
+
+      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={!availableQuantity} size="xs">
+          <FormGroup
+            validationState={validation.state}
+          >
+            <FormControl
+              type="text"
+              defaultValue={value}
+              onBlur={e =>
+                inlineEditController.onChange(e.target.value, additionalData)
+              }
+            />
+            <HelpBlock>
+              {maxMessage}
+              <div className="validationMessages">
+                {validation.message}
+              </div>
+            </HelpBlock>
+          </FormGroup>
+        </Spinner>
+      );
+
+      return (
+        <td className={className}>
+          {formGroup}
+        </td>
+      );
+    },
+  });
+
+export default entitlementsInlineEditFormatter;