katello 3.9.1 → 3.10.0.rc1

data/webpack/redux/reducers/RedHatRepositories/enabled.fixtures.js

@@ -5,13 +5,19 @@ export const disabledIndex = 1;
 export const initialState = Immutable({
   loading: true,
   repositories: [],
-  pagination: {},
+  pagination: {
+    page: 0,
+  },
+  itemCount: 0,
 });
 
 export const loadingState = Immutable({
   loading: true,
   repositories: [],
-  pagination: {},
+  pagination: {
+    page: 0,
+  },
+  itemCount: 0,
 });
 
 export const requestSuccessResponse = Immutable({

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

@@ -74,7 +74,7 @@ export default (state = initialState, action) => {
     return Immutable({
       repositories: mapRepositories(results),
       pagination: {
-        page: Number(page),
+        page: Number(page) || 0,
         // server can return per_page: null when there's error in the search query,
         // don't store it in such case
         // eslint-disable-next-line camelcase

data/webpack/redux/reducers/RedHatRepositories/sets.fixtures.js

@@ -4,21 +4,30 @@ export const initialState = Immutable({
   loading: true,
   recommended: false,
   results: [],
-  pagination: {},
+  pagination: {
+    page: 0,
+  },
+  itemCount: 0,
 });
 
 export const recommendedState = Immutable({
   loading: true,
   recommended: true,
   results: [],
-  pagination: {},
+  pagination: {
+    page: 0,
+  },
+  itemCount: 0,
 });
 
 export const loadingState = Immutable({
   loading: true,
   recommended: false,
   results: [],
-  pagination: {},
+  pagination: {
+    page: 0,
+  },
+  itemCount: 0,
 });
 
 export const requestSuccessResponse = Immutable({

data/webpack/redux/reducers/index.js

@@ -8,6 +8,7 @@ import settings from '../../scenes/Settings';
 import { subscriptionDetails } from '../../scenes/Subscriptions/Details';
 import { setOrganization } from '../../components/SelectOrg/SetOrganization';
 import { moduleStreams } from '../../scenes/ModuleStreams';
+import { reducers as organizationProductsReducers } from '../OrganizationProducts';
 import { moduleStreamDetails } from '../../scenes/ModuleStreams/Details';
 
 export default combineReducers({
@@ -21,4 +22,5 @@ export default combineReducers({
   setOrganization,
   moduleStreams,
   moduleStreamDetails,
+  ...organizationProductsReducers,
 });

data/webpack/scenes/RedHatRepositories/components/SearchBar.js

@@ -3,13 +3,16 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { Button } from 'patternfly-react';
 import { Form, FormGroup } from 'react-bootstrap';
 
+import { selectOrganizationProducts }
+  from '../../../redux/OrganizationProducts/OrganizationProductsSelectors';
+import { loadOrganizationProducts }
+  from '../../../redux/OrganizationProducts/OrganizationProductsActions';
+
 import { loadEnabledRepos } from '../../../redux/actions/RedHatRepositories/enabled';
 import { loadRepositorySets } from '../../../redux/actions/RedHatRepositories/sets';
 
-import api from '../../../services/api';
 import Search from './Search';
 import MultiSelect from '../../../components/MultiSelect/index';
 
@@ -37,6 +40,11 @@ class SearchBar extends Component {
     this.onSelectSearchList = this.onSelectSearchList.bind(this);
   }
 
+  componentDidMount() {
+    // load all products until we use filtering and pagination
+    this.props.loadOrganizationProducts({ per_page: 1000 });
+  }
+
   onSearch(query) {
     this.updateSearch({ query });
   }
@@ -49,6 +57,10 @@ class SearchBar extends Component {
     this.updateSearch({ filters });
   }
 
+  onSelectProduct(products) {
+    this.updateSearch({ products });
+  }
+
   updateSearch(stateUpdate = {}) {
     const newState = {
       ...this.state,
@@ -86,35 +98,48 @@ class SearchBar extends Component {
   }
 
   render() {
-    const { repoParams } = this.props;
+    const { organizationProducts } = this.props;
+
+    const getMultiSelectValuesFromEvent = e => [...e.target.options]
+      .filter(({ selected }) => selected)
+      .map(({ value }) => value);
 
     return (
       <Form className="toolbar-pf-actions">
-        <FormGroup className="toolbar-pf-filter">
-          <Search onSearch={this.onSearch} onSelectSearchList={this.onSelectSearchList} />
-        </FormGroup>
-
-        <MultiSelect
-          value={this.state.filters}
-          options={filterOptions}
-          defaultValues={['rpm']}
-          noneSelectedText={__('Filter by type')}
-          onChange={(e) => {
-            const values = [...e.target.options]
-              .filter(({ selected }) => selected)
-              .map(({ value }) => value);
-            this.onSelectFilterType(values);
-          }}
-        />
-
-        <FormGroup>
-          <Button
-            className="export-csv-button"
-            onClick={() => { api.open('/repositories.csv', repoParams); }}
-          >
-            {__('Export Enabled as CSV')}
-          </Button>
-        </FormGroup>
+        <div className="search-bar-row">
+          <FormGroup className="toolbar-pf-filter">
+            <Search onSearch={this.onSearch} onSelectSearchList={this.onSelectSearchList} />
+          </FormGroup>
+        </div>
+
+        <div className="search-bar-row search-bar-selects-row">
+          <MultiSelect
+            className="product-select"
+            value="product"
+            options={organizationProducts.map(product => ({
+              value: product.id, label: product.name,
+            }))}
+            defaultValues={[]}
+            noneSelectedText={__('Filter by Product')}
+            maxItemsCountForFullLabel={2}
+            onChange={(e) => {
+              const values = getMultiSelectValuesFromEvent(e);
+              this.onSelectProduct(values);
+            }}
+          />
+          <MultiSelect
+            value={this.state.filters}
+            options={filterOptions}
+            defaultValues={['rpm']}
+            noneSelectedText={__('Filter by type')}
+            onChange={(e) => {
+              const values = [...e.target.options]
+                .filter(({ selected }) => selected)
+                .map(({ value }) => value);
+              this.onSelectFilterType(values);
+            }}
+          />
+        </div>
       </Form>
     );
   }
@@ -123,7 +148,11 @@ class SearchBar extends Component {
 SearchBar.propTypes = {
   loadEnabledRepos: PropTypes.func.isRequired,
   loadRepositorySets: PropTypes.func.isRequired,
-  repoParams: PropTypes.shape({}).isRequired,
+  loadOrganizationProducts: PropTypes.func.isRequired,
+  organizationProducts: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    name: PropTypes.string,
+  })).isRequired,
   enabledRepositories: PropTypes.shape({
     pagination: PropTypes.shape({
       perPage: PropTypes.number,
@@ -136,12 +165,18 @@ SearchBar.propTypes = {
   }).isRequired,
 };
 
-const mapStateToProps = ({ katello: { redHatRepositories: { enabled, sets } } }) => ({
-  enabledRepositories: enabled,
-  repositorySets: sets,
-});
+const mapStateToProps = (state) => {
+  const { katello: { redHatRepositories: { enabled, sets } } } = state;
+
+  return {
+    enabledRepositories: enabled,
+    repositorySets: sets,
+    organizationProducts: selectOrganizationProducts(state),
+  };
+};
 
 export default connect(mapStateToProps, {
   loadEnabledRepos,
   loadRepositorySets,
+  loadOrganizationProducts,
 })(SearchBar);

data/webpack/scenes/RedHatRepositories/index.js

@@ -6,12 +6,14 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Grid, Row, Col } from 'react-bootstrap';
+import { Button } from 'patternfly-react';
 import { LoadingState } from '../../move_to_pf/LoadingState';
 import { createEnabledRepoParams, loadEnabledRepos } from '../../redux/actions/RedHatRepositories/enabled';
 import { loadRepositorySets, updateRecommendedRepositorySets } from '../../redux/actions/RedHatRepositories/sets';
 import SearchBar from './components/SearchBar';
 import RecommendedRepositorySetsToggler from './components/RecommendedRepositorySetsToggler';
 import { getSetsComponent, getEnabledComponent } from './helpers';
+import api from '../../services/api';
 
 class RedHatRepositoriesPage extends Component {
   componentDidMount() {
@@ -32,7 +34,7 @@ class RedHatRepositoriesPage extends Component {
         <h1>{__('Red Hat Repositories')}</h1>
         <Row className="toolbar-pf">
           <Col sm={12}>
-            <SearchBar repoParams={repoParams} />
+            <SearchBar />
           </Col>
         </Row>
 
@@ -60,7 +62,16 @@ class RedHatRepositoriesPage extends Component {
           </Col>
 
           <Col sm={6} className="enabled-repositories-container">
-            <h2>{__('Enabled Repositories')}</h2>
+            <h2>
+              {__('Enabled Repositories')}
+              <Button
+                className="pull-right"
+                onClick={() => { api.open('/repositories.csv', repoParams); }}
+              >
+                {__('Export as CSV')}
+              </Button>
+            </h2>
+
             <LoadingState loading={enabledRepositories.loading} loadingText={__('Loading')}>
               {getEnabledComponent(
                 enabledRepositories,

data/webpack/scenes/RedHatRepositories/index.scss

@@ -19,6 +19,32 @@
   .deemphasize {
     color: lightgray;
   }
+  .search-bar-row {
+    min-height: 26px;
+    margin-bottom: 10px;
+
+    .form-group {
+      box-sizing: border-box;
+
+      &:first-child {
+        padding-left: 0;
+      }
+    }
+    &.search-bar-selects-row {
+      .form-group {
+        border: none;
+
+        @media (min-width: 1280px) {
+          &:first-child {
+            min-width: 300px;
+          }
+          &:last-child {
+            min-width: 180px;
+          }
+        }
+      }
+    }
+  }
 
   .list-group-item-header .list-view-pf-description,
   .enabled-repositories-container .list-view-pf-description {

data/webpack/scenes/Subscriptions/Manifest/ManageManifestModal.js

@@ -112,7 +112,7 @@ class ManageManifestModal extends Component {
       header: __('There is no Manifest History to display.'),
       description: __('Import a Manifest using the manifest tab above.'),
       documentation: {
-        title: __('Learn more about adding Subscription Manifests'),
+        label: __('Learn more about adding Subscription Manifests'),
         url: 'http://redhat.com',
       },
     });

data/webpack/scenes/Subscriptions/Manifest/__tests__/__snapshots__/ManageManifestModal.test.js.snap

@@ -312,7 +312,7 @@ exports[`manage manifest modal should render 1`] = `
               Object {
                 "description": "Import a Manifest using the manifest tab above.",
                 "documentation": Object {
-                  "title": "Learn more about adding Subscription Manifests",
+                  "label": "Learn more about adding Subscription Manifests",
                   "url": "http://redhat.com",
                 },
                 "header": "There is no Manifest History to display.",

data/webpack/scenes/Subscriptions/SubscriptionActions.js

@@ -19,8 +19,13 @@ import {
   SUBSCRIPTION_TABLE_COLUMNS,
   SUBSCRIPTION_TABLE_DEFAULT_COLUMNS,
   SUBSCRIPTIONS_COLUMNS_REQUEST,
+  SUBSCRIPTIONS_UPDATE_SEARCH_QUERY,
+  SUBSCRIPTIONS_OPEN_MANIFEST_MODAL,
+  SUBSCRIPTIONS_CLOSE_MANIFEST_MODAL,
+  SUBSCRIPTIONS_OPEN_DELETE_MODAL,
+  SUBSCRIPTIONS_CLOSE_DELETE_MODAL,
 } from './SubscriptionConstants';
-import { filterRHSubscriptions } from './SubscriptionHelpers.js';
+import { filterRHSubscriptions, selectSubscriptionsQuantitiesFromResponse } from './SubscriptionHelpers.js';
 import { apiError } from '../../move_to_foreman/common/helpers.js';
 
 export const createSubscriptionParams = (extendedParams = {}) => ({
@@ -37,7 +42,7 @@ export const loadAvailableQuantities = (extendedParams = {}) => (dispatch) => {
     .then(({ data }) => {
       dispatch({
         type: SUBSCRIPTIONS_QUANTITIES_SUCCESS,
-        response: data,
+        payload: selectSubscriptionsQuantitiesFromResponse(data),
       });
     })
     .catch(result => dispatch(apiError(SUBSCRIPTIONS_QUANTITIES_FAILURE, result)));
@@ -120,4 +125,15 @@ export const deleteSubscriptions = poolIds => (dispatch) => {
     .catch(result => dispatch(apiError(DELETE_SUBSCRIPTIONS_FAILURE, result)));
 };
 
+export const updateSearchQuery = query => ({
+  type: SUBSCRIPTIONS_UPDATE_SEARCH_QUERY,
+  payload: query,
+});
+
+export const openManageManifestModal = () => ({ type: SUBSCRIPTIONS_OPEN_MANIFEST_MODAL });
+export const closeManageManifestModal = () => ({ type: SUBSCRIPTIONS_CLOSE_MANIFEST_MODAL });
+
+export const openDeleteModal = () => ({ type: SUBSCRIPTIONS_OPEN_DELETE_MODAL });
+export const closeDeleteModal = () => ({ type: SUBSCRIPTIONS_CLOSE_DELETE_MODAL });
+
 export default loadSubscriptions;

data/webpack/scenes/Subscriptions/SubscriptionConstants.js

@@ -19,6 +19,14 @@ export const DELETE_SUBSCRIPTIONS_FAILURE = 'DELETE_SUBSCRIPTIONS_FAILURE';
 export const SUBSCRIPTIONS_COLUMNS_REQUEST = 'SUBSCRIPTIONS_COLUMNS_REQUEST';
 export const UPDATE_SUBSCRIPTION_COLUMNS = 'UPDATE_SUBSCRIPTION_COLUMNS';
 
+export const SUBSCRIPTIONS_UPDATE_SEARCH_QUERY = 'SUBSCRIPTIONS_UPDATE_SEARCH_QUERY';
+
+export const SUBSCRIPTIONS_OPEN_MANIFEST_MODAL = 'SUBSCRIPTIONS_OPEN_MANIFEST_MODAL';
+export const SUBSCRIPTIONS_CLOSE_MANIFEST_MODAL = 'SUBSCRIPTIONS_CLOSE_MANIFEST_MODAL';
+
+export const SUBSCRIPTIONS_OPEN_DELETE_MODAL = 'SUBSCRIPTIONS_OPEN_DELETE_MODAL';
+export const SUBSCRIPTIONS_CLOSE_DELETE_MODAL = 'SUBSCRIPTIONS_CLOSE_DELETE_MODAL';
+
 export const BLOCKING_FOREMAN_TASK_TYPES = [
   'Actions::Katello::Organization::ManifestImport',
   'Actions::Katello::Organization::ManifestRefresh',

data/webpack/scenes/Subscriptions/SubscriptionHelpers.js

@@ -5,3 +5,18 @@ export const filterRHSubscriptions = subscriptions =>
 
 export const manifestExists = organization =>
   organization.owner_details && organization.owner_details.upstreamConsumer;
+
+export const selectSubscriptionsQuantitiesFromResponse = ({ results }) => {
+  const quantityMap = {};
+
+  results.forEach(pool =>
+    pool.local_pool_ids &&
+      pool.local_pool_ids.forEach((localId) => {
+        if (quantityMap[localId]) {
+          quantityMap[localId] += pool.available;
+        } else {
+          quantityMap[localId] = pool.available;
+        }
+      }));
+  return quantityMap;
+};

data/webpack/scenes/Subscriptions/SubscriptionReducer.js

@@ -17,11 +17,19 @@ import {
   DELETE_SUBSCRIPTIONS_REQUEST,
   DELETE_SUBSCRIPTIONS_SUCCESS,
   DELETE_SUBSCRIPTIONS_FAILURE,
+  SUBSCRIPTIONS_UPDATE_SEARCH_QUERY,
+  SUBSCRIPTIONS_OPEN_MANIFEST_MODAL,
+  SUBSCRIPTIONS_CLOSE_MANIFEST_MODAL,
+  SUBSCRIPTIONS_OPEN_DELETE_MODAL,
+  SUBSCRIPTIONS_CLOSE_DELETE_MODAL,
 } from './SubscriptionConstants';
 import { GET_SETTING_SUCCESS } from '../../move_to_foreman/Settings/SettingsConstants';
 
 const initialState = Immutable({
   ...initialApiState,
+  searchQuery: '',
+  manifestModalOpened: false,
+  deleteModalOpened: false,
   quantitiesLoading: false,
   availableQuantities: null,
   tasks: [],
@@ -29,19 +37,6 @@ const initialState = Immutable({
   selectedTableColumns: [],
 });
 
-const mapQuantities = (pools) => {
-  const quantityMap = {};
-  pools.forEach(pool =>
-    pool.local_pool_ids && pool.local_pool_ids.forEach((localId) => {
-      if (quantityMap[localId]) {
-        quantityMap[localId] += pool.available;
-      } else {
-        quantityMap[localId] = pool.available;
-      }
-    }));
-  return quantityMap;
-};
-
 export default (state = initialState, action) => {
   switch (action.type) {
     case SUBSCRIPTIONS_REQUEST:
@@ -100,7 +95,7 @@ export default (state = initialState, action) => {
     case SUBSCRIPTIONS_QUANTITIES_SUCCESS: {
       return state.merge({
         quantitiesLoading: false,
-        availableQuantities: mapQuantities(action.response.results),
+        availableQuantities: action.payload,
       });
     }
 
@@ -139,6 +134,19 @@ export default (state = initialState, action) => {
       return state;
     }
 
+    case SUBSCRIPTIONS_UPDATE_SEARCH_QUERY:
+      return state.set('searchQuery', action.payload);
+
+    case SUBSCRIPTIONS_OPEN_MANIFEST_MODAL:
+      return state.set('manifestModalOpened', true);
+    case SUBSCRIPTIONS_CLOSE_MANIFEST_MODAL:
+      return state.set('manifestModalOpened', false);
+
+    case SUBSCRIPTIONS_OPEN_DELETE_MODAL:
+      return state.set('deleteModalOpened', true);
+    case SUBSCRIPTIONS_CLOSE_DELETE_MODAL:
+      return state.set('deleteModalOpened', false);
+
     default:
       return state;
   }