katello 4.16.3 → 4.17.0.rc1

data/webpack/scenes/ContentViews/Table/tableDataGenerator.js

@@ -53,6 +53,7 @@ const buildExpandableRows = (contentViews) => {
       id,
       name,
       composite,
+      rolling,
       next_version: nextVersion,
       version_count: versionCount,
       description,
@@ -74,6 +75,7 @@ const buildExpandableRows = (contentViews) => {
       cvName: name,
       cvVersionCount: versionCount,
       cvComposite: composite,
+      cvRolling: rolling,
       cvNextVersion: nextVersion,
       latestVersionEnvironments,
       latestVersionId,
@@ -94,6 +96,7 @@ const buildExpandableRows = (contentViews) => {
             cvId={id}
             cvName={name}
             cvComposite={composite}
+            cvRolling={rolling}
             {...{
               activationKeys, hosts, relatedCVCount, relatedCompositeCVs,
             }}

data/webpack/scenes/ContentViews/__tests__/basicContentViews.fixtures.js

@@ -1,6 +1,7 @@
 const buildContentView = id => ({
   id,
   composite: false,
+  rolling: false,
   name: `contentView${id}`,
   environments: [],
   repositories: [],

data/webpack/scenes/ContentViews/__tests__/contentViewList.fixtures.json

@@ -1,6 +1,6 @@
 {
-  "total": 2,
-  "subtotal": 2,
+  "total": 3,
+  "subtotal": 3,
   "page": 1,
   "per_page": 20,
   "error": null,
@@ -14,6 +14,7 @@
   "results": [
     {
       "composite": false,
+      "rolling": false,
       "component_ids": [],
       "default": false,
       "version_count": 1,
@@ -107,6 +108,7 @@
     },
     {
       "composite": true,
+      "rolling": false,
       "component_ids": [
         27,
         28
@@ -251,6 +253,91 @@
           ]
         }
       ]
+    },
+    {
+      "composite": false,
+      "rolling": true,
+      "component_ids": [],
+      "default": false,
+      "version_count": 1,
+      "latest_version": "1.0",
+      "latest_version_id": 14,
+      "latest_version_environments": [
+        {
+          "id": 1,
+          "name": "Library",
+          "label": "Library"
+        }
+        ],
+      "auto_publish": false,
+      "solve_dependencies": false,
+      "repository_ids": [
+        1
+      ],
+      "id": 3,
+      "name": "cv_rolling",
+      "label": "cv_rolling",
+      "description": "I am a rolling CV",
+      "organization_id": 1,
+      "organization": {
+        "name": "Default Organization",
+        "label": "Default_Organization",
+        "id": 1
+      },
+      "created_at": "2020-03-19 15:08:59 UTC",
+      "updated_at": "2020-03-19 15:09:11 UTC",
+      "environments": [
+        {
+          "id": 8,
+          "name": "Library",
+          "label": "Library",
+          "permissions": {
+            "readable": true
+          }
+        }
+      ],
+      "repositories": [
+        {
+          "id": 3,
+          "name": "zoo3",
+          "label": "zoo3",
+          "content_type": "yum"
+        }
+      ],
+      "versions": [
+        {
+          "id": 3,
+          "version": "1.0",
+          "published": "2020-03-19 15:09:11 UTC",
+          "environment_ids": [
+            1
+          ]
+        }
+      ],
+      "components": [],
+      "content_view_components": [],
+      "activation_keys": [
+        {
+          "id": 3,
+          "name": "test_ack_key_roll"
+        }
+      ],
+      "hosts": [
+        {
+          "id": 3,
+          "name": "katello-client3.samir.example.com"
+        }
+      ],
+      "last_task": {},
+      "next_version": "2.0",
+      "last_published": "2020-03-19 15:09:11 UTC",
+      "permissions": {
+        "view_content_views": true,
+        "edit_content_views": true,
+        "destroy_content_views": true,
+        "publish_content_views": true,
+        "promote_or_remove_content_views": true
+      }
     }
   ],
   "composite": 1,

data/webpack/scenes/ContentViews/__tests__/contentViewPage.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-useless-escape */
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 
 import CONTENT_VIEWS_KEY from '../ContentViewsConstants';
 import ContentViewsPage from '../../ContentViews';
@@ -43,7 +43,8 @@ test('Can call API for CVs and show on screen on page load', async (done) => {
   });
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  act(done);
 });
 
 test('Can show last task and link to it', async (done) => {
@@ -53,7 +54,8 @@ test('Can show last task and link to it', async (done) => {
     .query(true)
     .reply(200, cvIndexData);
 
-  const { getByText, queryByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
+  const { getByText, queryByText, queryAllByText } =
+    renderWithRedux(<ContentViewsPage />, renderOptions);
 
   expect(queryByText(firstCV.name)).toBeNull();
 
@@ -63,11 +65,12 @@ test('Can show last task and link to it', async (done) => {
     expect(getByText('3 days ago').closest('a'))
       .toHaveAttribute('href', '/foreman_tasks/tasks/54088dac-b990-491c-a891-1d7d1a3f5161/');
     // If no task is found display empty text N/A
-    expect(queryByText('N/A')).toBeTruthy();
+    expect(queryAllByText('N/A')).toBeTruthy();
   });
 
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  assertNockRequest(scope);
+  act(done); // Pass jest callback to confirm test is done
 });
 
 test('Can show latest version and link to it', async (done) => {
@@ -88,18 +91,23 @@ test('Can show latest version and link to it', async (done) => {
   await patientlyWaitFor(() => {
     expect(queryByText(firstCV.name)).toBeTruthy();
     // Displays link to the latest version
-    expect(getByText('Version 1.0').closest('a'))
+    expect(queryAllByText('Version 1.0')[0].closest('a'))
       .toHaveAttribute('href', '/content_views/2/versions/11/');
+    // We do not expect 'Version 1.0' for the rolling CV fixture
+    expect(queryAllByText('Version 1.0')).toHaveLength(1);
     // If no task is found display empty text Not yet published if latest version is null
     expect(queryAllByText('Not yet published')[0]).toBeTruthy();
     // Able to display Environment labels with link to the environment
-    expect(getByText('Library').closest('a'))
+    expect(queryAllByText('Library')[0].closest('a'))
       .toHaveAttribute('href', '/lifecycle_environments/1');
     expect(getByText('dev').closest('a'))
       .toHaveAttribute('href', '/lifecycle_environments/2');
+    expect(queryAllByText('Library')[1].closest('a'))
+      .toHaveAttribute('href', '/lifecycle_environments/1');
   });
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done); // Pass jest callback to confirm test is done
+  assertNockRequest(scope);
+  act(done); // Pass jest callback to confirm test is done
 });
 
 test('Can expand cv and show activation keys and hosts', async (done) => {
@@ -134,12 +142,68 @@ test('Can expand cv and show activation keys and hosts', async (done) => {
     // Displays hosts link with count
     expect(queryByLabelText('host_link_2')).toHaveAttribute('href', '/new/hosts?search=content_view_id%3D2');
     expect(queryByLabelText('host_link_2').textContent).toEqual('1');
+    // Content views can be part of a composite content view
+    expect(queryByText(/Related composite content views:/)).toBeVisible();
+  });
+
+  getAllByLabelText('Details')[0].click();
+  // Collapse content for first CV
+  await patientlyWaitFor(() => {
+    // Details should disappear
+    expect(queryByText(/Related composite content views:/)).not.toBeVisible();
   });
 
+  // Expand content for rolling CV
+  await patientlyWaitFor(() => {
+    getAllByLabelText('Details')[2].click();
+    expect(queryByLabelText('host_link_3').textContent).toEqual('1');
+    // Rolling content views cannot be part of composite content views
+    expect(queryByText(/Related composite content views:/)).not.toBeVisible();
+  });
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done); // Pass jest callback to confirm test is done
 });
 
+test('Can show the correct options in CV kebap menu', async (done) => {
+  const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl, autocompleteQuery);
+  const scope = nockInstance
+    .get(cvIndexPath)
+    .query(true)
+    .reply(200, cvIndexData);
+
+  const { getAllByLabelText, queryByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
+
+  await patientlyWaitFor(() => expect(getAllByLabelText('Kebab toggle')[0]).toBeInTheDocument());
+  await act(async () => {
+    getAllByLabelText('Kebab toggle')[0].click();
+  });
+  await patientlyWaitFor(async () => {
+    // open kebap menu of content view, should contain all available action options
+    expect(getAllByLabelText('Kebab toggle')[0]).toHaveAttribute('aria-expanded', 'true');
+    expect(queryByText('Publish')).toBeVisible();
+    expect(queryByText('Promote')).toBeVisible();
+    expect(queryByText('Copy')).toBeVisible();
+    expect(queryByText('Delete')).toBeVisible();
+
+    // open kebap menu of rolling content view, should only show 'Delete' action
+  });
+  await act(async () => {
+    getAllByLabelText('Kebab toggle')[2].click();
+  });
+  await patientlyWaitFor(async () => {
+    expect(getAllByLabelText('Kebab toggle')[0]).toHaveAttribute('aria-expanded', 'false');
+    expect(getAllByLabelText('Kebab toggle')[2]).toHaveAttribute('aria-expanded', 'true');
+    expect(queryByText('Publish')).toBeNull();
+    expect(queryByText('Promote')).toBeNull();
+    expect(queryByText('Copy')).toBeNull();
+    expect(queryByText('Delete')).toBeVisible();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+  act(done); // Pass jest callback to confirm test is done
+});
+
 test('Can handle no Content Views being present', async (done) => {
   const noResults = {
     total: 0,
@@ -158,7 +222,8 @@ test('Can handle no Content Views being present', async (done) => {
 
   expect(queryByText(firstCV.name)).toBeNull();
   await patientlyWaitFor(() => expect(queryByText('You currently have no content views to display')).toBeInTheDocument());
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  act(done);
 });
 
 test('Can handle errored response', async (done) => {
@@ -171,7 +236,8 @@ test('Can handle errored response', async (done) => {
 
   expect(queryByText(firstCV.name)).toBeNull();
   await patientlyWaitFor(() => expect(queryByText(/Something went wrong! Please check server logs!/i)).toBeInTheDocument());
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  act(done);
 });
 
 test('Can handle unpublished Content Views', async (done) => {
@@ -188,7 +254,8 @@ test('Can handle unpublished Content Views', async (done) => {
 
   await patientlyWaitFor(() => expect(getAllByText(/not yet published/i).length).toBeGreaterThan(0));
   assertNockRequest(autocompleteScope);
-  assertNockRequest(scope, done);
+  assertNockRequest(scope);
+  act(done);
 });
 
 test('Can handle pagination', async (done) => {
@@ -232,7 +299,8 @@ test('Can handle pagination', async (done) => {
   });
   assertNockRequest(autocompleteScope);
   assertNockRequest(firstPageScope);
-  assertNockRequest(secondPageScope, done); // Only pass jest callback to the last API request
+  assertNockRequest(secondPageScope);
+  act(done); // Only pass jest callback to the last API request
 });
 
 test('Can search for specific Content View', async (done) => {
@@ -289,7 +357,8 @@ test('Can search for specific Content View', async (done) => {
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(initialScope);
-  assertNockRequest(withSearchScope, done);
+  assertNockRequest(withSearchScope);
+  act(done);
 });
 
 test('Nothing is shown for empty search', async (done) => {
@@ -322,7 +391,8 @@ test('Nothing is shown for empty search', async (done) => {
 
   assertNockRequest(autocompleteScope);
   assertNockRequest(initialScope);
-  assertNockRequest(withSearchScope, done);
+  assertNockRequest(withSearchScope);
+  act(done);
 });
 
 test('Displays Create Content View and opens modal with Form', async () => {
@@ -358,6 +428,7 @@ test('Displays Create Content View and opens modal with Form', async () => {
   expect(getByText('Name')).toBeInTheDocument();
   expect(getByText('Label')).toBeInTheDocument();
   expect(getByText('Composite content view')).toBeInTheDocument();
+  expect(getByText('Rolling content view')).toBeInTheDocument();
   expect(getByText('Content view')).toBeInTheDocument();
   expect(getByText('Solve dependencies')).toBeInTheDocument();
   expect(queryByText('Auto publish')).not.toBeInTheDocument();

data/webpack/scenes/ContentViews/__tests__/mockDetails.fixtures.json

@@ -9,9 +9,10 @@
   },
   "name": "mock_details",
   "composite": false,
+  "rolling": false,
   "next_version": "1.0",
   "id": "5",
   "version_count": 0,
   "filtered": true,
   "duplicate_repositories_to_publish": []
-}
+}

data/webpack/scenes/ContentViews/components/ContentViewIcon.js

@@ -1,25 +1,37 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
-import { Tooltip } from '@patternfly/react-core';
-import { EnterpriseIcon, RegistryIcon } from '@patternfly/react-icons';
+import { Tooltip, Icon } from '@patternfly/react-core';
+import { EnterpriseIcon, RegistryIcon, SyncAltIcon } from '@patternfly/react-icons';
 import './contentViewIcon.scss';
 
 const ContentViewIcon = ({
-  composite, count, description, style, ...toolTipProps
+  composite, rolling, count, description, style, ...toolTipProps
 }) => {
   const props = {
-    className: composite ? 'svg-icon-composite' : 'svg-icon-component',
+    className: 'svg-icon-component',
   };
+  let content = __('Content view');
+  let icon = <Icon size="sm"><EnterpriseIcon {...props} /></Icon>;
+  if (composite) {
+    props.className = 'svg-icon-composite';
+    content = __('Composite content view');
+    icon = <Icon size="md"><RegistryIcon {...props} /></Icon>;
+  } else if (rolling) {
+    props.className = 'svg-icon-rolling';
+    content = __('Rolling content view');
+    icon = <Icon size="sm"><SyncAltIcon {...props} /></Icon>;
+  }
+
   const cvIcon = (
     <Tooltip
       position="auto"
       enableFlip
       entryDelay={400}
-      content={composite ? __('Composite content view') : __('Content view')}
+      content={content}
       {...toolTipProps}
     >
-      {composite ? <RegistryIcon size="md" {...props} /> : <EnterpriseIcon size="sm" {...props} />}
+      {icon}
     </Tooltip>
   );
   return (
@@ -33,6 +45,7 @@ const ContentViewIcon = ({
 
 ContentViewIcon.propTypes = {
   composite: PropTypes.bool,
+  rolling: PropTypes.bool,
   count: PropTypes.node,
   description: PropTypes.node,
   style: PropTypes.shape({}),
@@ -40,6 +53,7 @@ ContentViewIcon.propTypes = {
 
 ContentViewIcon.defaultProps = {
   composite: false,
+  rolling: false,
   count: null,
   description: null,
   style: {},

data/webpack/scenes/ContentViews/components/ContentViewSelect/ContentViewSelect.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Select, SelectVariant } from '@patternfly/react-core';
+import {
+  Select,
+  SelectVariant,
+} from '@patternfly/react-core/deprecated';
 import PropTypes from 'prop-types';
 
 const ContentViewSelect = ({

data/webpack/scenes/ContentViews/components/ContentViewSelect/ContentViewSelectOption.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Flex, SelectOption } from '@patternfly/react-core';
+import {
+  Flex,
+} from '@patternfly/react-core';
+import {
+  SelectOption,
+} from '@patternfly/react-core/deprecated';
 import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
@@ -15,7 +20,7 @@ export const ContentViewDescription = ({ cv, versionNumber }) => {
     fontWeight: 400,
     color: pfDescriptionColor.value,
   };
-  if (cv.default) return <span style={descriptionStyle}>{__('Library')}</span>;
+  if (cv.rolling || cv.default) return <span style={descriptionStyle}>{__('Library')}</span>;
   return (
     <span style={descriptionStyle}>
       <FormattedMessage
@@ -29,6 +34,7 @@ export const ContentViewDescription = ({ cv, versionNumber }) => {
 
 ContentViewDescription.propTypes = {
   cv: PropTypes.shape({
+    rolling: PropTypes.bool.isRequired,
     default: PropTypes.bool.isRequired,
     id: PropTypes.number.isRequired,
     latest_version: PropTypes.string.isRequired,
@@ -56,6 +62,7 @@ const ContentViewSelectOption = ({ cv, env, value }) => (
     >
       <ContentViewIcon
         composite={cv.composite}
+        rolling={cv.rolling || cv.default}
         size="sm"
       />
       <Flex
@@ -78,6 +85,8 @@ ContentViewSelectOption.propTypes = {
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
     composite: PropTypes.bool.isRequired,
+    rolling: PropTypes.bool.isRequired,
+    default: PropTypes.bool.isRequired,
   }).isRequired,
   env: PropTypes.shape({
     id: PropTypes.number.isRequired,

data/webpack/scenes/ContentViews/components/ContentViewsCounter.js

@@ -5,14 +5,16 @@ import { Grid, GridItem, Flex, FlexItem, Tooltip } from '@patternfly/react-core'
 import { InProgressIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import ContentViewIcon from './ContentViewIcon';
 import { selectOrganizationState } from '../../Organizations/OrganizationSelectors';
+import { contentViewDescriptions } from '../Create/CreateContentViewForm';
 
 const ContentViewsCounter = () => {
   const organization = useSelector(selectOrganizationState);
   const {
     composite_content_views_count: composite,
     content_view_components_count: component,
+    rolling_content_views_count: rolling,
   } = organization;
-  if (composite || component) {
+  if (composite || component || rolling) {
     return (
       <Grid>
         <GridItem span={12}>
@@ -21,6 +23,7 @@ const ContentViewsCounter = () => {
               <FlexItem spacer={{ default: 'spacerXs' }}>
                 <ContentViewIcon
                   composite={false}
+                  rolling={false}
                   description={__('Content views')}
                   count={(component || component === 0) ? component : <InProgressIcon />}
                 />
@@ -28,9 +31,7 @@ const ContentViewsCounter = () => {
               <FlexItem>
                 <Tooltip
                   position="top"
-                  content={
-                    __('Consists of repositories')
-                  }
+                  content={contentViewDescriptions.CV}
                 >
                   <OutlinedQuestionCircleIcon />
                 </Tooltip>
@@ -51,9 +52,28 @@ const ContentViewsCounter = () => {
               <FlexItem>
                 <Tooltip
                   position="top"
-                  content={
-                    __('Consists of content views')
-                  }
+                  content={contentViewDescriptions.CCV}
+                >
+                  <OutlinedQuestionCircleIcon />
+                </Tooltip>
+              </FlexItem>
+            </Flex>
+          </b>
+        </GridItem>
+        <GridItem span={12}>
+          <b>
+            <Flex>
+              <FlexItem spacer={{ default: 'spacerXs' }}>
+                <ContentViewIcon
+                  rolling
+                  description={__('Rolling content views')}
+                  count={(rolling || rolling === 0) ? rolling : <InProgressIcon />}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Tooltip
+                  position="top"
+                  content={contentViewDescriptions.RCV}
                 >
                   <OutlinedQuestionCircleIcon />
                 </Tooltip>

data/webpack/scenes/ContentViews/components/EnvironmentLabels.js

@@ -11,7 +11,7 @@ const EnvironmentLabels = (environments) => {
       <React.Fragment key={env.id} style={{ marginBottom: '5px' }}>
         <Label
           color={labelColor}
-          isTruncated
+
         >{env.name}
         </Label>
       </React.Fragment>
@@ -19,7 +19,7 @@ const EnvironmentLabels = (environments) => {
   default:
     return (
       <React.Fragment>
-        <Label color={labelColor} isTruncated>
+        <Label color={labelColor} >
           {name}
         </Label>
       </React.Fragment>

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.js

@@ -11,7 +11,7 @@ import Loading from '../../../../components/Loading';
 
 const EnvironmentPaths = ({
   userCheckedItems, setUserCheckedItems, promotedEnvironments,
-  publishing, headerText, multiSelect, isDisabled,
+  publishing, headerText, multiSelect, isDisabled, enabledLifecycleEnvironmentIds,
 }) => {
   const environmentPathResponse = useSelector(selectEnvironmentPaths);
   const environmentPathStatus = useSelector(selectEnvironmentPathsStatus);
@@ -55,6 +55,8 @@ const EnvironmentPaths = ({
                     envCheckedInList(env, promotedEnvironments)}
                     isDisabled={isDisabled || (publishing && env.library)
                     || env?.content_source?.environment_is_associated === false
+                    || (enabledLifecycleEnvironmentIds &&
+                      !enabledLifecycleEnvironmentIds.has(env.id))
                     || envCheckedInList(env, promotedEnvironments)}
                     className="env-path__labels-with-pointer"
                     key={`${env.id}${index}`}
@@ -62,7 +64,7 @@ const EnvironmentPaths = ({
                     ouiaId={`${env.id}${index}`}
                     label={<EnvironmentLabels environments={env} isDisabled={isDisabled} />}
                     aria-label={env.label}
-                    onChange={checked => oncheckedChange(checked, env)}
+                    onChange={(e, checked) => oncheckedChange(checked, env)}
                   />))}
               </FormGroup>
               <hr />
@@ -84,6 +86,7 @@ EnvironmentPaths.propTypes = {
   headerText: PropTypes.string,
   multiSelect: PropTypes.bool,
   isDisabled: PropTypes.bool,
+  enabledLifecycleEnvironmentIds: PropTypes.instanceOf(Set),
 };
 
 EnvironmentPaths.defaultProps = {
@@ -92,5 +95,6 @@ EnvironmentPaths.defaultProps = {
   headerText: __('Select a lifecycle environment from the available promotion paths to promote new version.'),
   multiSelect: true,
   isDisabled: false,
+  enabledLifecycleEnvironmentIds: null,
 };
 export default EnvironmentPaths;

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.scss

@@ -1,7 +1,10 @@
 .env-path {
-  .pf-c-form__group {
+  .pf-v5-c-form__group {
     margin: 20px 0;
   }
+  .pf-v5-c-check__label, .pf-v5-c-radio__label {
+    margin: 0;
+  }
 
   .env-path__labels-with-pointer {
     &:not(:last-child):after {

data/webpack/scenes/ContentViews/components/FiltersAppliedIcon.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { Tooltip } from '@patternfly/react-core';
+import { Tooltip, Icon } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
 
 const FiltersAppliedIcon = () => (
@@ -10,7 +10,9 @@ const FiltersAppliedIcon = () => (
     entryDelay={400}
     content={__('Filters were applied to this version.')}
   >
-    <FilterIcon size="sm" style={{ color: '#0081db', margin: '0 9px' }} />
+    <Icon size="sm">
+      <FilterIcon style={{ color: '#0081db', marginLeft: '9px' }} />
+    </Icon>
   </Tooltip>
 );
 

data/webpack/scenes/ContentViews/components/NeedsPublishIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
-import { Tooltip } from '@patternfly/react-core';
+import { Tooltip, Icon } from '@patternfly/react-core';
 import { ArrowCircleUpIcon } from '@patternfly/react-icons';
 import './NeedsPublishIcon.scss';
 
@@ -24,11 +24,12 @@ const NeedsPublishIcon = ({ composite, determinate }) => (
     entryDelay={400}
     content={tooltipContent(composite, determinate)}
   >
-    <ArrowCircleUpIcon
-      id={determinate ? 'determinate-needs-publish' : 'indeterminate-needs-publish'}
-      size="sm"
-      className={determinate ? 'determinate-needs-publish' : 'indeterminate-needs-publish'}
-    />
+    <Icon size="sm">
+      <ArrowCircleUpIcon
+        id={determinate ? 'determinate-needs-publish' : 'indeterminate-needs-publish'}
+        className={determinate ? 'determinate-needs-publish' : 'indeterminate-needs-publish'}
+      />
+    </Icon>
   </Tooltip>
 );