katello 4.7.2 → 4.8.0.rc1

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

@@ -2,9 +2,9 @@
 import React, { Component } from 'react';
 import { DropdownButton, MenuItem } from 'patternfly-react';
 import PropTypes from 'prop-types';
+import SearchBar from 'foremanReact/components/SearchBar';
 import { translate as __ } from 'foremanReact/common/I18n';
 import '../index.scss';
-import Search from '../../../components/Search/index';
 import { orgId } from '../../../services/api';
 
 class RepositorySearch extends Component {
@@ -29,7 +29,6 @@ class RepositorySearch extends Component {
     ];
     this.state = { searchList: this.dropDownItems[0] };
     this.onSearch = this.onSearch.bind(this);
-    this.getAutoCompleteParams = this.getAutoCompleteParams.bind(this);
   }
 
   onSearch(search) {
@@ -41,23 +40,24 @@ class RepositorySearch extends Component {
     this.props.onSelectSearchList(searchList.key);
   }
 
-  getAutoCompleteParams(search) {
-    const params = {
-      organization_id: orgId(),
-      search,
-    };
+  getAutoCompleteEndpoint() {
     let endpoint = '';
     if (this.state.searchList.key === 'enabled') {
-      params.enabled = true;
-      endpoint = '/repositories/auto_complete_search';
+      endpoint = '/katello/api/v2/repositories/auto_complete_search';
     } else if (this.state.searchList.key === 'available') {
-      endpoint = '/repository_sets/auto_complete_search';
+      endpoint = '/katello/api/v2/repository_sets/auto_complete_search';
+    }
+
+    return endpoint;
+  }
+
+  autocompleteQueryParams() {
+    const params = { organization_id: orgId() };
+    if (this.state.searchList.key === 'enabled') {
+      params.enabled = true;
     }
 
-    return {
-      endpoint,
-      params,
-    };
+    return params;
   }
 
   render() {
@@ -77,9 +77,15 @@ class RepositorySearch extends Component {
               </MenuItem>
             ))}
         </DropdownButton>
-        <Search
+        <SearchBar
+          data={{
+            autocomplete: {
+              url: this.getAutoCompleteEndpoint(),
+              apiParams: this.autocompleteQueryParams(),
+            },
+            bookmarks: {},
+          }}
           onSearch={this.onSearch}
-          getAutoCompleteParams={this.getAutoCompleteParams}
         />
       </div>
     );

data/webpack/scenes/RedHatRepositories/index.scss

@@ -21,16 +21,35 @@
   }
   .search-bar-row {
     min-height: 26px;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
 
     .form-group {
       box-sizing: border-box;
+      width: 50%;
+
+      div:first-child {
+        display: flex;
+        justify-content: space-between;
+        .foreman-search-bar {
+          flex-grow: 1;
+          margin-left: 0.7rem;
+          .pf-c-search-input {
+            width: 100%;
+          }
+        }
+      }
 
       &:first-child {
         padding-left: 0;
       }
     }
+
+    .dropdown.btn-group {
+      margin-right: 0.6rem;
+    }
+
     &.search-bar-selects-row {
+      width: 50%;
       .form-group {
         border: none;
 

data/webpack/scenes/SmartProxy/SmartProxyContentTable.js

@@ -138,7 +138,18 @@ const SmartProxyContentTable = ({ smartProxyId }) => {
 
 
   return (
-    <MainTable onCollapse={onCollapse(rows, setRows)} status={status} cells={columnHeaders} rows={rows} error={error} emptyContentTitle="No content synced" emptyContentBody="No content synced to smart proxy" emptySearchTitle="Empty" emptySearchBody="Empty" />
+    <MainTable
+      onCollapse={onCollapse(rows, setRows)}
+      ouiaId="smart-proxy-content-table"
+      status={status}
+      cells={columnHeaders}
+      rows={rows}
+      error={error}
+      emptyContentTitle="No content synced"
+      emptyContentBody="No content synced to smart proxy"
+      emptySearchTitle="Empty"
+      emptySearchBody="Empty"
+    />
   );
 };
 

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/CdnTypeForm.js

@@ -34,7 +34,7 @@ const CdnTypeForm = ({ typeChangeInProgress, onUpdate }) => {
   return (
     <Form isHorizontal>
       <div id="update-hint-cdn" className="margin-top-16">
-        <Text>
+        <Text ouiaId="update-hint-cdn-text">
           <FormattedMessage
             id="cdn-configuration-type"
             defaultMessage={__('Red Hat content will be consumed from the {type}.')}

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/CustomCdnTypeForm.js

@@ -62,7 +62,7 @@ const CustomCdnTypeForm = ({
   return (
     <Form isHorizontal>
       <div id="update-hint-cdn" className="margin-top-16">
-        <Text>
+        <Text ouiaId="cdn-configuration-type-text">
           <FormattedMessage
             id="cdn-configuration-type"
             defaultMessage={__('Red Hat content will be consumed from {type}.')}

data/webpack/scenes/Subscriptions/SubscriptionsPage.js

@@ -162,14 +162,6 @@ class SubscriptionsPage extends Component {
       this.props.loadSubscriptions({ search });
     };
 
-    const getAutoCompleteParams = search => ({
-      endpoint: '/subscriptions/auto_complete_search',
-      params: {
-        organization_id: currentOrg,
-        search,
-      },
-    });
-
     const onDeleteSubscriptions = (selectedRows) => {
       this.props.deleteSubscriptions(selectedRows);
       this.handleSelectedRowsChange([]);
@@ -209,14 +201,23 @@ class SubscriptionsPage extends Component {
       loadTableColumns({ columns: getEnabledColumns(columns) });
     };
     const columns = subscriptions.selectedTableColumns;
-    const emptyStateData = {
-      header: __('There are no Subscriptions to display'),
-      description: __('Import a Manifest to manage your Entitlements.'),
-      action: {
-        onClick: () => openManageManifestModal(),
-        title: __('Import a Manifest'),
-      },
-    };
+    const emptyStateData = isManifestImported
+      ? {
+        header: __('There are no Subscriptions to display'),
+        description: __('Add Subscriptions using the Add Subscriptions button.'),
+        action: {
+          title: __('Add subscriptions'),
+          url: 'subscriptions/add',
+        },
+      }
+      : {
+        header: __('There are no Subscriptions to display'),
+        description: __('Import a Manifest to manage your Entitlements.'),
+        action: {
+          onClick: () => openManageManifestModal(),
+          title: __('Import a Manifest'),
+        },
+      };
 
     const SCAAlert = (
       <Alert type={simpleContentAccess ? 'info' : 'warning'}>
@@ -230,7 +231,7 @@ class SubscriptionsPage extends Component {
           defaultMessage={simpleContentAccess ? __(`This organization has Simple Content Access enabled.
           Hosts are not required to have subscriptions attached to access repositories.
           {br}
-          Learn more about your overall subscription usage with the {subscriptionsService}.`) : __('This organization is not using {scaLink}. Legacy subscription management is deprecated and will be removed in a future version.')}
+          Learn more about your overall subscription usage with the {subscriptionsService}.`) : __('This organization is not using {scaLink}. Entitlement-based subscription management is deprecated and will be removed in a future version.')}
         />
       </Alert>
     );
@@ -248,7 +249,7 @@ class SubscriptionsPage extends Component {
               disableDeleteButton={deleteButtonDisabled}
               disableDeleteReason={this.getDisabledReason(true)}
               disableAddButton={disableManifestActions}
-              getAutoCompleteParams={getAutoCompleteParams}
+              autocompleteQueryParams={{ organization_id: currentOrg }}
               updateSearchQuery={updateSearchQuery}
               onDeleteButtonClick={openDeleteModal}
               onSearch={onSearch}
@@ -272,7 +273,7 @@ class SubscriptionsPage extends Component {
             />
 
             <div id="subscriptions-table" className="modal-container">
-              {isManifestImported && SCAAlert}
+              {!this.props.organization?.loading && SCAAlert}
               <SubscriptionsTable
                 canManageSubscriptionAllocations={canManageSubscriptionAllocations}
                 loadSubscriptions={this.props.loadSubscriptions}
@@ -330,6 +331,7 @@ SubscriptionsPage.propTypes = {
   }),
   organization: PropTypes.shape({
     id: PropTypes.number,
+    loading: PropTypes.bool,
     owner_details: PropTypes.shape({
       upstreamConsumer: PropTypes.shape({
         name: PropTypes.string,

data/webpack/scenes/Subscriptions/__tests__/__snapshots__/SubscriptionsPage.test.js.snap

@@ -37,13 +37,17 @@ exports[`subscriptions page should render 1`] = `
         Subscriptions
       </h1>
       <SubscriptionsToolbar
+        autocompleteQueryParams={
+          Object {
+            "organization_id": 1,
+          }
+        }
         canManageSubscriptionAllocations={false}
         disableAddButton={true}
         disableDeleteButton={true}
         disableDeleteReason="This is disabled because no connection could be made to the upstream Manifest."
         disableManifestActions={true}
         disableManifestReason="This is disabled because no connection could be made to the upstream Manifest."
-        getAutoCompleteParams={[Function]}
         isManifestImported={false}
         onDeleteButtonClick={[Function]}
         onExportCsvButtonClick={[Function]}
@@ -67,6 +71,35 @@ exports[`subscriptions page should render 1`] = `
         className="modal-container"
         id="subscriptions-table"
       >
+        <Alert
+          className=""
+          onDismiss={null}
+          type="warning"
+        >
+          <FormattedMessage
+            defaultMessage="This organization is not using {scaLink}. Entitlement-based subscription management is deprecated and will be removed in a future version."
+            id="sca-alert"
+            values={
+              Object {
+                "br": <br />,
+                "scaLink": <a
+                  href="https://access.redhat.com/articles/simple-content-access"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Simple Content Access
+                </a>,
+                "subscriptionsService": <a
+                  href="https://access.redhat.com/documentation/en-us/subscription_central/2021/html-single/getting_started_with_the_subscriptions_service/index"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Subscriptions service
+                </a>,
+              }
+            }
+          />
+        </Alert>
         <SubscriptionsTable
           canManageSubscriptionAllocations={false}
           emptyState={

data/webpack/scenes/Subscriptions/components/SubscriptionsToolbar/SubscriptionsToolbar.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { Row, Col, Form, FormGroup, Button } from 'patternfly-react';
 import { LinkContainer } from 'react-router-bootstrap';
 import { noop } from 'foremanReact/common/helpers';
+import SearchBar from 'foremanReact/components/SearchBar';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { SUBSCRIPTIONS_SERVICE_URL } from '../../SubscriptionConstants';
 
-import Search from '../../../../components/Search/index';
 import TooltipButton from '../../../../components/TooltipButton';
 import OptionTooltip from '../../../../components/OptionTooltip';
 
@@ -17,7 +17,7 @@ const SubscriptionsToolbar = ({
   disableDeleteButton,
   disableDeleteReason,
   disableAddButton,
-  getAutoCompleteParams,
+  autocompleteQueryParams,
   updateSearchQuery,
   onDeleteButtonClick,
   onSearch,
@@ -32,10 +32,16 @@ const SubscriptionsToolbar = ({
     <Col sm={12}>
       <Form className="toolbar-pf-actions">
         <FormGroup className="toolbar-pf-filter">
-          <Search
+          <SearchBar
+            data={{
+              autocomplete: {
+                url: '/katello/api/v2/subscriptions/auto_complete_search',
+                apiParams: { ...autocompleteQueryParams },
+              },
+              bookmarks: {},
+            }}
             onSearch={onSearch}
-            getAutoCompleteParams={getAutoCompleteParams}
-            updateSearchQuery={updateSearchQuery}
+            onSearchChange={updateSearchQuery}
           />
         </FormGroup>
         <div className="option-tooltip-container">
@@ -99,7 +105,6 @@ const SubscriptionsToolbar = ({
 );
 
 SubscriptionsToolbar.propTypes = {
-  ...Search.propTypes,
   tableColumns: OptionTooltip.propTypes.options,
   canManageSubscriptionAllocations: PropTypes.bool,
   disableManifestActions: PropTypes.bool,
@@ -107,26 +112,34 @@ SubscriptionsToolbar.propTypes = {
   disableDeleteButton: PropTypes.bool,
   disableDeleteReason: PropTypes.string,
   disableAddButton: PropTypes.bool,
+  autocompleteQueryParams: PropTypes.shape({}),
+  updateSearchQuery: PropTypes.func,
+  onSearch: PropTypes.func,
   onDeleteButtonClick: PropTypes.func,
   onManageManifestButtonClick: PropTypes.func,
   onExportCsvButtonClick: PropTypes.func,
   toolTipOnChange: PropTypes.func,
   toolTipOnclose: PropTypes.func,
+  isManifestImported: PropTypes.bool,
 };
 
 SubscriptionsToolbar.defaultProps = {
-  ...Search.defaultProps,
   tableColumns: [],
+  canManageSubscriptionAllocations: false,
   disableManifestActions: false,
   disableManifestReason: '',
   disableDeleteButton: false,
   disableDeleteReason: '',
   disableAddButton: false,
+  autocompleteQueryParams: undefined,
+  updateSearchQuery: noop,
+  onSearch: noop,
   onDeleteButtonClick: noop,
   onManageManifestButtonClick: noop,
   onExportCsvButtonClick: noop,
   toolTipOnChange: noop,
   toolTipOnclose: noop,
+  isManifestImported: false,
 };
 
 export default SubscriptionsToolbar;

data/webpack/scenes/Subscriptions/components/SubscriptionsToolbar/SubscriptionsToolbar.test.js

@@ -3,7 +3,6 @@ import SubscriptionsToolbar from './SubscriptionsToolbar';
 
 const createRequiredProps = () => ({
   onSearch: jest.fn(),
-  getAutoCompleteParams: jest.fn(),
   updateSearchQuery: jest.fn(),
 });
 const fixtures = {

data/webpack/scenes/Subscriptions/components/SubscriptionsToolbar/__snapshots__/SubscriptionsToolbar.test.js.snap

@@ -22,10 +22,20 @@ exports[`SubscriptionsToolbar renders SubscriptionsToolbar 1`] = `
         bsClass="form-group"
         className="toolbar-pf-filter"
       >
-        <Connect(Search)
-          getAutoCompleteParams={[MockFunction]}
+        <SearchBar
+          data={
+            Object {
+              "autocomplete": Object {
+                "apiParams": Object {},
+                "url": "/katello/api/v2/subscriptions/auto_complete_search",
+              },
+              "bookmarks": Object {},
+            }
+          }
+          initialQuery=""
+          name={null}
           onSearch={[MockFunction]}
-          updateSearchQuery={[MockFunction]}
+          onSearchChange={[MockFunction]}
         />
       </FormGroup>
       <div
@@ -95,10 +105,20 @@ exports[`SubscriptionsToolbar renders SubscriptionsToolbar with disabled add but
         bsClass="form-group"
         className="toolbar-pf-filter"
       >
-        <Connect(Search)
-          getAutoCompleteParams={[MockFunction]}
+        <SearchBar
+          data={
+            Object {
+              "autocomplete": Object {
+                "apiParams": Object {},
+                "url": "/katello/api/v2/subscriptions/auto_complete_search",
+              },
+              "bookmarks": Object {},
+            }
+          }
+          initialQuery=""
+          name={null}
           onSearch={[MockFunction]}
-          updateSearchQuery={[MockFunction]}
+          onSearchChange={[MockFunction]}
         />
       </FormGroup>
       <div
@@ -168,10 +188,20 @@ exports[`SubscriptionsToolbar renders SubscriptionsToolbar with disabled delete
         bsClass="form-group"
         className="toolbar-pf-filter"
       >
-        <Connect(Search)
-          getAutoCompleteParams={[MockFunction]}
+        <SearchBar
+          data={
+            Object {
+              "autocomplete": Object {
+                "apiParams": Object {},
+                "url": "/katello/api/v2/subscriptions/auto_complete_search",
+              },
+              "bookmarks": Object {},
+            }
+          }
+          initialQuery=""
+          name={null}
           onSearch={[MockFunction]}
-          updateSearchQuery={[MockFunction]}
+          onSearchChange={[MockFunction]}
         />
       </FormGroup>
       <div
@@ -241,10 +271,20 @@ exports[`SubscriptionsToolbar renders SubscriptionsToolbar with disabled manifes
         bsClass="form-group"
         className="toolbar-pf-filter"
       >
-        <Connect(Search)
-          getAutoCompleteParams={[MockFunction]}
+        <SearchBar
+          data={
+            Object {
+              "autocomplete": Object {
+                "apiParams": Object {},
+                "url": "/katello/api/v2/subscriptions/auto_complete_search",
+              },
+              "bookmarks": Object {},
+            }
+          }
+          initialQuery=""
+          name={null}
           onSearch={[MockFunction]}
-          updateSearchQuery={[MockFunction]}
+          onSearchChange={[MockFunction]}
         />
       </FormGroup>
       <div
@@ -314,10 +354,20 @@ exports[`SubscriptionsToolbar renders SubscriptionsToolbar with table columns 1`
         bsClass="form-group"
         className="toolbar-pf-filter"
       >
-        <Connect(Search)
-          getAutoCompleteParams={[MockFunction]}
+        <SearchBar
+          data={
+            Object {
+              "autocomplete": Object {
+                "apiParams": Object {},
+                "url": "/katello/api/v2/subscriptions/auto_complete_search",
+              },
+              "bookmarks": Object {},
+            }
+          }
+          initialQuery=""
+          name={null}
           onSearch={[MockFunction]}
-          updateSearchQuery={[MockFunction]}
+          onSearchChange={[MockFunction]}
         />
       </FormGroup>
       <div