katello 4.10.0 → 4.11.0.rc1

data/webpack/scenes/SmartProxy/__tests__/SmartProxyContentTest.js

@@ -1,38 +1,50 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, within } from 'react-testing-lib-wrapper';
 
 import { nockInstance, assertNockRequest } from '../../../test-utils/nockWrapper';
 import api from '../../../services/api';
-import SmartProxyContentTable from '../SmartProxyContentTable';
+import SmartProxyExpandableTable from '../SmartProxyExpandableTable';
 
-const smartProxyContentData = require('./SmartProxyContentResult.fixtures.json');
+const smartProxyContentData = require('./SmartProxyContentTest.fixtures.json');
 
 const smartProxyContentPath = api.getApiUrl('/capsules/1/content/sync');
 
 const smartProxyContent = { ...smartProxyContentData };
 
-const contentTable = <SmartProxyContentTable smartProxyId={1} />;
+const contentTable = <SmartProxyExpandableTable smartProxyId={1} />;
 
-test('Can display Smart proxy content table', async (done) => {
+test('Can display Smart proxy content table and expand env and cv details', async (done) => {
   const detailsScope = nockInstance
     .get(smartProxyContentPath)
     .query(true)
     .reply(200, smartProxyContent);
 
-  const { getByText, getAllByLabelText } = renderWithRedux(contentTable);
+  const {
+    getByText, getAllByText, getByLabelText,
+  } = renderWithRedux(contentTable);
   await patientlyWaitFor(() => expect(getByText('Environment')).toBeInTheDocument());
-  expect(getByText('Content view')).toBeInTheDocument();
-  expect(getByText('Type')).toBeInTheDocument();
-  expect(getByText('Last published')).toBeInTheDocument();
-  expect(getByText('Repositories')).toBeInTheDocument();
-  expect(getByText('Synced to smart proxy')).toBeInTheDocument();
-  expect(getAllByLabelText('Details')[0]).toHaveAttribute('aria-expanded', 'false');
-  getAllByLabelText('Details')[0].click();
-  expect(getAllByLabelText('Details')[0]).toHaveAttribute('aria-expanded', 'true');
+  const tdEnvExpand = getByLabelText('expand-env-1');
+  const envExpansion = within(tdEnvExpand).getByLabelText('Details');
+  envExpansion.click();
+  await patientlyWaitFor(() => expect(getAllByText('Content view')[0]).toBeInTheDocument());
+  expect(getAllByText('Last published')[0]).toBeInTheDocument();
+  expect(getAllByText('Repository')[0]).toBeInTheDocument();
+  expect(getAllByText('Synced')[0]).toBeInTheDocument();
+  const tdCvExpand = getByLabelText('expand-cv-1');
+  const cvExpansion = within(tdCvExpand).getByLabelText('Details');
+  expect(cvExpansion).toHaveAttribute('aria-expanded', 'false');
+  cvExpansion.click();
+  await patientlyWaitFor(() => expect(cvExpansion).toHaveAttribute('aria-expanded', 'true'));
   expect(getByText('Library')).toBeInTheDocument();
   expect(getByText('Default Organization View')).toBeInTheDocument();
-  expect(getByText('dev')).toBeInTheDocument();
-
-
+  expect(getAllByText('dev')[0]).toBeInTheDocument();
+  expect(getAllByText('Repository')[0]).toBeInTheDocument();
+  expect(getAllByText('Packages')[0]).toBeInTheDocument();
+  expect(getAllByText('Additional content')[0]).toBeInTheDocument();
+  expect(getAllByText('repo1')[0]).toBeInTheDocument();
+  expect(getAllByText('22 Packages')[0]).toBeInTheDocument();
+  expect(getAllByText(/7 errata/i)[0]).toBeInTheDocument();
+  expect(getAllByText(/14 Module streams/i)[0]).toBeInTheDocument();
+  expect(getAllByText(/2 Package groups/i)[0]).toBeInTheDocument();
   assertNockRequest(detailsScope, done);
 });

data/webpack/scenes/Subscriptions/Details/SubscriptionDetails.js

@@ -58,25 +58,22 @@ class SubscriptionDetails extends Component {
     }
 
     return (
-      <div>
-        {!subscriptionDetails.loading &&
-          <BreadcrumbsBar
-            onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
-            data={{
-              isSwitchable: true,
-              breadcrumbItems: [
-                {
-                  caption: __('Subscriptions'),
-                  onClick: () =>
-                    this.props.history.push('/subscriptions'),
-                },
-                {
-                  caption: String(subscriptionDetails.name || __('Subscription Details')),
-                },
-              ],
-              resource,
-            }}
-          />}
+      <div id="subscription-details">
+        {!subscriptionDetails.loading && <BreadcrumbsBar
+          isLoadingResources={subscriptionDetails.loading}
+          onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
+          isSwitchable
+          breadcrumbItems={[
+            {
+              caption: __('Subscriptions'),
+              url: '/subscriptions/',
+            },
+            {
+              caption: String(subscriptionDetails.name || __('Subscription Details')),
+            },
+          ]}
+          resource={resource}
+        />}
 
         <TabContainer id="subscription-tabs-container" defaultActiveKey={1}>
           <div>

data/webpack/scenes/Subscriptions/Details/SubscriptionDetails.scss

@@ -1,9 +1,13 @@
-.scrolld-list {
-  max-height: 400px;
-  overflow-y: auto; 
-}
+#subscription-details {
+  margin: 24px;
 
-.list-view-pf-expand {
-  max-height: 20px;
-  padding: 0;
-}
+  .scrolld-list {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  .list-view-pf-expand {
+    max-height: 20px;
+    padding: 0;
+  }
+}

data/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap

@@ -1,28 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`subscriptions details page should render and contain appropiate components 1`] = `
-<div>
+<div
+  id="subscription-details"
+>
   <BreadcrumbsBar
-    data={
-      Object {
-        "breadcrumbItems": Array [
-          Object {
-            "caption": "Subscriptions",
-            "onClick": [Function],
-          },
-          Object {
-            "caption": "OpenShift Employee Subscription",
-          },
-        ],
-        "isSwitchable": true,
-        "resource": Object {
-          "nameField": "name",
-          "resourceUrl": "/katello/api/v2/organizations/1/subscriptions",
-          "switcherItemUrl": "/subscriptions/:id",
+    breadcrumbItems={
+      Array [
+        Object {
+          "caption": "Subscriptions",
+          "url": "/subscriptions/",
         },
-      }
+        Object {
+          "caption": "OpenShift Employee Subscription",
+        },
+      ]
     }
+    isLoadingResources={false}
+    isSwitchable={true}
     onSwitcherItemClick={[Function]}
+    resource={
+      Object {
+        "nameField": "name",
+        "resourceUrl": "/katello/api/v2/organizations/1/subscriptions",
+        "switcherItemUrl": "/subscriptions/:id",
+      }
+    }
   />
   <ForwardRef
     defaultActiveKey={1}

data/webpack/scenes/Subscriptions/Manifest/CdnConfigurationTab/CdnConfigurationForm.scss

@@ -1,3 +1,5 @@
-.pf-c-form__group.pf-m-action {
-  margin-top: 0px;
+#cdn-configuration {
+  .pf-c-form__group.pf-m-action {
+    margin-top: 0px;
+  }
 }

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

@@ -1,27 +1,46 @@
-.form-horizontal {
-  padding-left: 40px;
-  padding-right: 20px;
-}
+#manifest-history-tabs {
+  .form-horizontal {
+    padding-left: 40px;
+    padding-right: 20px;
+  }
 
-form .row {
-  margin-left: -15px;
-}
+  form .row {
+    margin-left: -15px;
+  }
 
-span.pficon.pficon-info {
-  margin: 0 5px 0 5px;
-}
+  span.pficon.pficon-info {
+    margin: 0 5px 0 5px;
+  }
 
-#simple-content-access {
-  padding-bottom: 40px;
+  #simple-content-access {
+    padding-bottom: 40px;
 
-  .sca-label {
-    float: left;
-    text-align: left;
+    .sca-label {
+      float: left;
+      text-align: left;
+    }
   }
-}
 
-.manifest-actions {
-  .spinner {
-    margin: 5px 15px 12px 5px;
+  .manifest-actions {
+    .spinner {
+      margin: 5px 15px 12px 5px;
+    }
+  }
+  .manifest-actions > * {
+    margin: 10px 5px 0 0 ;
+  }
+  
+  #manifest-actions-row {
+    display: flex;
+    flex-direction: row;
+    & > * {
+      margin-right: 8px;
+    }
+  }
+  
+  .modal-body {
+    overflow-y: auto;
+    overflow-x: hidden;
   }
+  
 }

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

@@ -17,8 +17,6 @@ import { selectContentCredentials } from '../../ContentCredentials/ContentCreden
 
 import ManifestModal from './ManageManifestModal';
 
-import './Manifest.scss';
-
 // map state to props
 const mapStateToProps = state => ({
   organization: state.katello.organization,

data/webpack/scenes/Subscriptions/SubscriptionsPage.js

@@ -6,6 +6,8 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
 import { isEmpty } from 'lodash';
 import { Grid, Row, Col, Alert } from 'patternfly-react';
+import { Popover, Flex, FlexItem } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import ModalProgressBar from 'foremanReact/components/common/ModalProgressBar';
 import PermissionDenied from 'foremanReact/components/PermissionDenied';
 import ManageManifestModal from './Manifest/';
@@ -204,7 +206,7 @@ class SubscriptionsPage extends Component {
     const emptyStateData = isManifestImported
       ? {
         header: __('There are no Subscriptions to display'),
-        description: __('Add Subscriptions using the Add Subscriptions button.'),
+        description: __('Add subscriptions using the Add Subscriptions button.'),
         action: {
           title: __('Add subscriptions'),
           url: 'subscriptions/add',
@@ -212,7 +214,7 @@ class SubscriptionsPage extends Component {
       }
       : {
         header: __('There are no Subscriptions to display'),
-        description: __('Import a Manifest to manage your Entitlements.'),
+        description: __('Import a subscription manifest to give hosts access to Red Hat content.'),
         action: {
           onClick: () => openManageManifestModal(),
           title: __('Import a Manifest'),
@@ -220,26 +222,50 @@ class SubscriptionsPage extends Component {
       };
 
     const SCAAlert = (
-      <Alert ouiaId="sca-alert" type={simpleContentAccess ? 'info' : 'warning'}>
+      <Alert ouiaId="sca-alert" type="warning">
         <FormattedMessage
           id="sca-alert"
           values={{
-            subscriptionsService: <a href={SUBSCRIPTIONS_SERVICE_DOC_URL} target="_blank" rel="noreferrer">{__('Subscriptions service')}</a>,
-            br: <br />,
             scaLink: <a href={SCA_URL} target="_blank" rel="noreferrer">{__('Simple Content Access')}</a>,
           }}
-          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}. Entitlement-based subscription management is deprecated and will be removed in a future version.')}
+          defaultMessage={__('This organization is not using {scaLink}. Entitlement-based subscription management is deprecated and will be removed in Katello 4.12.')}
         />
       </Alert>
     );
+
+    const SCAPopoverContent = (
+      <FormattedMessage
+        id="sca-popover-content"
+        values={{
+          br: <br />,
+          subscriptionsService: <a href={SUBSCRIPTIONS_SERVICE_DOC_URL} target="_blank" rel="noreferrer">{__('Subscriptions service')}</a>,
+        }}
+        defaultMessage={__(`This page shows the subscriptions available from this organization's subscription manifest.
+        {br}
+        Learn more about your overall subscription usage with the {subscriptionsService}.`)}
+      />
+    );
     return (
-      <Grid bsClass="container-fluid">
+      <Grid bsClass="container-fluid" id="subscriptions-page">
         <Row>
           <Col sm={12}>
-            <h1>{__('Subscriptions')}</h1>
+            <Flex alignItems={{ default: 'alignItemsBaseline' }}>
+              <FlexItem>
+                <h1>{__('Subscriptions')}</h1>
+              </FlexItem>
+              {isManifestImported && (
+              <FlexItem>
+                <Popover
+                  aria-label="sca-popover"
+                  bodyContent={SCAPopoverContent}
+                >
+                  <span style={{ cursor: 'pointer', position: 'relative', top: '-0.2em' }}>
+                    <OutlinedQuestionCircleIcon>Toggle popover</OutlinedQuestionCircleIcon>
+                  </span>
+                </Popover>
+              </FlexItem>
+              )}
+            </Flex>
 
             <SubscriptionsToolbar
               canManageSubscriptionAllocations={canManageSubscriptionAllocations}
@@ -274,7 +300,7 @@ class SubscriptionsPage extends Component {
             />
 
             <div id="subscriptions-table" className="modal-container">
-              {!this.props.organization?.loading && SCAAlert}
+              {!this.props.organization?.loading && !simpleContentAccess ? SCAAlert : null}
               <SubscriptionsTable
                 canManageSubscriptionAllocations={canManageSubscriptionAllocations}
                 loadSubscriptions={this.props.loadSubscriptions}

data/webpack/scenes/Subscriptions/SubscriptionsPage.scss

@@ -1,50 +1,52 @@
-@import "~@theforeman/vendor/scss/variables";
+@import '~@theforeman/vendor/scss/variables';
 
-.editable {
-  &.changed {
-    font-weight: bold;
+#subscriptions-page {
+  .editable {
+    &.changed {
+      font-weight: bold;
+    }
   }
-}
 
-.pf-table-inline-edit {
-  tbody {
-    .form-group {
-      margin-bottom: 0;
-    }
+  .pf-table-inline-edit {
+    tbody {
+      .form-group {
+        margin-bottom: 0;
+      }
 
-    tr.open-grouped-row {
-      background-color: $table-bg-hover;
-      td {
-        border-bottom-color: $table-border-hover;
+      tr.open-grouped-row {
+        background-color: $table-bg-hover;
+        td {
+          border-bottom-color: $table-border-hover;
+        }
       }
     }
-  }
 
-  .table-view-pf-select {
-    width: 50px;
+    .table-view-pf-select {
+      width: 50px;
 
-    .collapse-subscription-group-button {
-      margin-top: 4px;
-      cursor: pointer;
-      float: left;
-      font-weight: bold;
-    }
+      .collapse-subscription-group-button {
+        margin-top: 4px;
+        cursor: pointer;
+        float: left;
+        font-weight: bold;
+      }
 
-    input[type="checkbox"] {
-      float: right;
+      input[type='checkbox'] {
+        float: right;
+      }
     }
   }
-}
 
-.option-tooltip-container {
-  display: inline-block;
-  margin-left: 10px;
-  margin-top: 3px;
-  width: 10px;
-}
+  .option-tooltip-container {
+    display: inline-block;
+    margin-left: 10px;
+    margin-top: 3px;
+    width: 10px;
+  }
 
-span.fa.fa-minus::before {
-  content: "\2014";
-  color: gray;
-  font-size: 1em;
+  span.fa.fa-minus::before {
+    content: '\2014';
+    color: gray;
+    font-size: 1em;
+  }
 }

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

@@ -15,6 +15,7 @@ exports[`subscriptions page should render 1`] = `
   bsClass="container-fluid"
   componentClass="div"
   fluid={false}
+  id="subscriptions-page"
 >
   <Row
     bsClass="row"
@@ -25,9 +26,19 @@ exports[`subscriptions page should render 1`] = `
       componentClass="div"
       sm={12}
     >
-      <h1>
-        Subscriptions
-      </h1>
+      <Flex
+        alignItems={
+          Object {
+            "default": "alignItemsBaseline",
+          }
+        }
+      >
+        <FlexItem>
+          <h1>
+            Subscriptions
+          </h1>
+        </FlexItem>
+      </Flex>
       <SubscriptionsToolbar
         autocompleteQueryParams={
           Object {
@@ -71,11 +82,10 @@ exports[`subscriptions page should render 1`] = `
           type="warning"
         >
           <FormattedMessage
-            defaultMessage="This organization is not using {scaLink}. Entitlement-based subscription management is deprecated and will be removed in a future version."
+            defaultMessage="This organization is not using {scaLink}. Entitlement-based subscription management is deprecated and will be removed in Katello 4.12."
             id="sca-alert"
             values={
               Object {
-                "br": <br />,
                 "scaLink": <a
                   href="https://access.redhat.com/articles/simple-content-access"
                   rel="noreferrer"
@@ -83,13 +93,6 @@ exports[`subscriptions page should render 1`] = `
                 >
                   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>,
               }
             }
           />
@@ -102,7 +105,7 @@ exports[`subscriptions page should render 1`] = `
                 "onClick": [Function],
                 "title": "Import a Manifest",
               },
-              "description": "Import a Manifest to manage your Entitlements.",
+              "description": "Import a subscription manifest to give hosts access to Red Hat content.",
               "header": "There are no Subscriptions to display",
             }
           }

data/webpack/utils/helpers.js

@@ -124,4 +124,3 @@ export default {
   apiError,
 };
 
-export const friendlySearchParam = searchParam => decodeURIComponent(searchParam.replace(/\+/g, ' '));