katello 4.5.1 → 4.8.0.rc2

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -7,100 +7,147 @@ import {
   Flex,
   FlexItem,
   GridItem,
+  ToggleGroup,
 } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
 import { ChartPie } from '@patternfly/react-charts';
-import { ErrataMapper } from '../../../../components/Errata';
+import { ErrataMapper, ErrataToggleGroupItem } from '../../../../components/Errata';
 import { hostIsRegistered } from '../hostDetailsHelpers';
 import { TranslatedAnchor } from '../../../Table/components/TranslatedPlural';
 import EmptyStateMessage from '../../../Table/EmptyStateMessage';
 import './ErrataOverviewCard.scss';
+import { errataStatusContemplation } from '../../../Errata/errataHelpers';
+import { pluralize } from '../../../../utils/helpers';
 
 function HostInstallableErrata({
-  id, errataCounts, errataStatus,
+  id, errataCounts, errataStatus, errataCategory, errataStatusLabel,
 }) {
-  const errataTotal = errataCounts.total;
-  const errataSecurity = errataCounts.security;
-  const errataBug = errataCounts.bugfix;
-  const errataEnhance = errataCounts.enhancement;
+  const counts = errataCategory === 'applicable' ? errataCounts.applicable : errataCounts;
+  const errataTotal = counts.total;
+  const errataSecurity = counts.security;
+  const errataBug = counts.bugfix;
+  const errataEnhance = counts.enhancement;
+  const { neededErrata, allUpToDate, otherErrataStatus } = errataStatusContemplation(errataStatus);
   const chartData = [{
-    w: 'security advisories', x: 'security', y: errataSecurity, z: errataTotal,
+    w: __('security advisories'), singular: __('security advisory'), x: 'security', y: errataSecurity, z: errataTotal,
   }, {
-    w: 'bug fixes', x: 'bugfix', y: errataBug, z: errataTotal,
+    w: __('bug fixes'), singular: __('bug fix'), x: 'bugfix', y: errataBug, z: errataTotal,
   }, {
-    w: 'enhancements', x: 'enhancement', y: errataEnhance, z: errataTotal,
+    w: __('enhancements'), singular: __('enhancement'), x: 'enhancement', y: errataEnhance, z: errataTotal,
   }];
   return (
-    <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
-      <Card isHoverable>
-        <CardHeader>
-          <CardTitle>{__('Installable errata')}</CardTitle>
-        </CardHeader>
-        <CardBody>
-          {errataStatus === 0 &&
-            <EmptyStateMessage
-              title={__('All errata up-to-date')}
-              body={__('No action required')}
-              happy
+    <CardBody>
+      {allUpToDate &&
+        <EmptyStateMessage
+          title={__('All errata up-to-date')}
+          body={__('No action required')}
+          happy
+        />
+      }
+      {otherErrataStatus &&
+        <EmptyStateMessage
+          title={null}
+          body={errataStatusLabel}
+          customIcon={ExclamationTriangleIcon}
+          secondaryActionTitle={__('Enable repository sets')}
+          secondaryActionLink="#/Content/Repository%20sets?show=all"
+          showSecondaryAction
+        />
+      }
+      {neededErrata &&
+        <Flex direction="column">
+          <FlexItem>
+            <TranslatedAnchor
+              id="errata-card-total-count"
+              href={`#/Content/errata?show=${errataCategory}`}
+              count={errataTotal}
+              plural="errata"
+              singular="erratum"
+              ariaLabel={`${errataTotal} total errata`}
             />
-          }
-          {errataStatus !== 0 &&
-            <Flex direction="column">
-              <FlexItem>
-                <TranslatedAnchor
-                  id="errata-card-total-count"
-                  href="#/Content/errata"
-                  count={errataTotal}
-                  plural="errata"
-                  singular="erratum"
-                  ariaLabel={`${errataTotal} total errata`}
+          </FlexItem>
+          <Flex flexWrap={{ xl: 'nowrap' }} direction="row" alignItems={{ default: 'alignItemsCenter' }}>
+            <div className="piechart-overflow" style={{ overflow: 'visible', minWidth: '140px', maxHeight: '155px' }}>
+              <div className="erratachart" style={{ minWidth: '300px', minHeight: '300px' }}>
+                <ChartPie
+                  ariaDesc="errataChart"
+                  data={chartData}
+                  constrainToVisibleArea
+                  labels={({ datum }) => pluralize(datum.y, datum.singular, datum.w)}
+                  padding={{
+                    bottom: 20,
+                    left: 20,
+                    right: 140,
+                    top: 20,
+                  }}
+                  width={250}
+                  height={130}
                 />
+              </div>
+            </div>
+            <div className="erratalegend" style={{ minWidth: '140px' }}>
+              <FlexItem>
+                <ErrataMapper data={chartData} id={id} errataCategory={errataCategory} />
               </FlexItem>
-              <Flex flexWrap={{ xl: 'nowrap' }} direction="row" alignItems={{ default: 'alignItemsCenter' }}>
-                <div className="piechart-overflow" style={{ overflow: 'visible', minWidth: '140px', maxHeight: '155px' }}>
-                  <div className="erratachart" style={{ minWidth: '300px', minHeight: '300px' }}>
-                    <ChartPie
-                      ariaDesc="errataChart"
-                      data={chartData}
-                      constrainToVisibleArea
-                      labels={({ datum }) => `${datum.y} ${datum.w}`}
-                      padding={{
-                        bottom: 20,
-                        left: 20,
-                        right: 140,
-                        top: 20,
-                      }}
-                      width={250}
-                      height={130}
-                    />
-                  </div>
-                </div>
-                <div className="erratalegend" style={{ minWidth: '140px' }}>
-                  <FlexItem>
-                    <ErrataMapper data={chartData} id={id} />
-                  </FlexItem>
-                </div>
-              </Flex>
-            </Flex>
-          }
-        </CardBody>
-      </Card>
-    </GridItem>
+            </div>
+          </Flex>
+        </Flex>
+      }
+    </CardBody>
   );
 }
 
 const ErrataOverviewCard = ({ hostDetails }) => {
-  if (hostIsRegistered({ hostDetails }) && hostDetails.content_facet_attributes) {
-    const { id: hostId, errata_status: errataStatus } = hostDetails;
-    return (<HostInstallableErrata
-      {...propsToCamelCase(hostDetails.content_facet_attributes)}
-      id={hostId}
-      errataStatus={errataStatus}
-    />);
-  }
-  return null;
+  const hostPopulated = (hostIsRegistered({ hostDetails }) &&
+    !!hostDetails.content_facet_attributes);
+
+  const [errataCategory, setErrataCategory] = useState('applicable');
+  if (!hostPopulated) return null;
+  const {
+    id: hostId,
+    errata_status: errataStatus,
+    errata_status_label: errataStatusLabel,
+  } = hostDetails;
+  const { neededErrata } = errataStatusContemplation(errataStatus);
+  return (
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
+      <Card ouiaId="errata-card">
+        <CardHeader>
+          <Flex spaceItems={{ default: 'spaceItemsXl' }}>
+            <CardTitle>{__('Errata')}</CardTitle>
+            {neededErrata &&
+              <ToggleGroup isCompact>
+                <ErrataToggleGroupItem
+                  text={__('Applicable')}
+                  aria-label="Show applicable errata chart"
+                  tooltipText={__('Applicable errata apply to at least one package installed on the host.')}
+                  isSelected={errataCategory === 'applicable'}
+                  onChange={selected => selected && setErrataCategory('applicable')}
+                />
+                <ErrataToggleGroupItem
+                  text={__('Installable')}
+                  aria-label="Show installable errata chart"
+                  tooltipText={__('Installable errata are applicable errata that are available in the host\'s content view and lifecycle environment.')}
+                  isSelected={errataCategory === 'installable'}
+                  onChange={selected => selected && setErrataCategory('installable')}
+                />
+              </ToggleGroup>
+            }
+          </Flex>
+        </CardHeader>
+        <HostInstallableErrata
+          {...propsToCamelCase(hostDetails.content_facet_attributes)}
+          id={hostId}
+          errataCategory={errataCategory}
+          errataStatus={errataStatus}
+          errataStatusLabel={errataStatusLabel}
+        />
+      </Card>
+    </GridItem>
+  );
 };
 
 HostInstallableErrata.propTypes = {
@@ -110,12 +157,21 @@ HostInstallableErrata.propTypes = {
     enhancement: PropTypes.number,
     security: PropTypes.number,
     total: PropTypes.number,
+    applicable: PropTypes.shape({
+      bugfix: PropTypes.number,
+      enhancement: PropTypes.number,
+      security: PropTypes.number,
+    }),
   }).isRequired,
   errataStatus: PropTypes.number,
+  errataStatusLabel: PropTypes.string,
+  errataCategory: PropTypes.string,
 };
 
 HostInstallableErrata.defaultProps = {
   errataStatus: undefined,
+  errataStatusLabel: __('Unknown errata status'),
+  errataCategory: 'applicable',
 };
 
 ErrataOverviewCard.propTypes = {
@@ -123,6 +179,7 @@ ErrataOverviewCard.propTypes = {
     content_facet_attributes: PropTypes.shape({}),
     id: PropTypes.number,
     errata_status: PropTypes.number,
+    errata_status_label: PropTypes.string,
   }),
 };
 

data/webpack/components/extensions/HostDetails/Cards/ErrataOverviewCard.scss

@@ -1,3 +1,8 @@
 .pf-c-empty-state {
   margin-top: 0;
+}
+.piechart-overflow {
+  margin-right: -20px;
+  position: relative;
+  left: -30px;
 }

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import {
   Badge,
+  Button,
   Card,
   CardHeader,
   CardTitle,
@@ -13,12 +14,15 @@ import {
   GridItem,
   DropdownItem,
 } from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
 import { useSet } from '../../../../Table/TableHooks';
 import { HostCollectionsAddModal, HostCollectionsRemoveModal } from './HostCollectionsModal';
 import { hasRequiredPermissions, hostIsRegistered, userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
+import EmptyStateMessage from '../../../../Table/EmptyStateMessage';
+import './HostCollectionsCard.scss';
 
 const requiredPermissions = ['edit_hosts', 'view_host_collections'];
 
@@ -49,6 +53,7 @@ const HostCollectionsDetails = ({
   const dropdownItems = [
     <DropdownItem
       aria-label="add_host_to_collections"
+      ouiaId="add_host_to_collections"
       key="add_host_to_collections"
       component="button"
       onClick={openAddHostCollectionsModal}
@@ -57,6 +62,7 @@ const HostCollectionsDetails = ({
     </DropdownItem>,
     <DropdownItem
       aria-label="remove_host_from_collections"
+      ouiaId="remove_host_from_collections"
       key="remove_host_from_collections"
       component="button"
       isDisabled={!hostCollections.length}
@@ -66,9 +72,19 @@ const HostCollectionsDetails = ({
     </DropdownItem>,
   ];
 
+  const primaryActionButton =
+    (
+      <Button
+        ouiaId="add-to-a-host-collection-button"
+        onClick={openAddHostCollectionsModal}
+        variant="secondary"
+        aria-label="add_to_a_host_collection"
+      > {__('Add to a host collection')}
+      </Button>);
+
   return (
     <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
-      <Card isHoverable>
+      <Card ouiaId="host-collections-card">
         <CardHeader>
           <Flex
             alignItems={{ default: 'alignItemsCenter' }}
@@ -88,10 +104,11 @@ const HostCollectionsDetails = ({
                 </FlexItem>
               </Flex>
             </FlexItem>
-            {showKebab && (
+            {showKebab && hostCollections?.length > 0 && (
               <FlexItem>
                 <Dropdown
                   toggle={<KebabToggle aria-label="host_collections_bulk_actions" onToggle={toggleBulkAction} />}
+                  ouiaId="host-collections-bulk-actions-dropdown"
                   isOpen={isDropdownOpen}
                   isPlain
                   position="right"
@@ -101,7 +118,16 @@ const HostCollectionsDetails = ({
             }
           </Flex>
         </CardHeader>
-        <CardBody>
+        <CardBody className={`host-collection-card-body${hostCollections?.length === 0 ? ' empty' : ''}`}>
+          {hostCollections?.length === 0 &&
+            <EmptyStateMessage
+              title={__('No host collections yet')}
+              body={__('To get started, add this host to a host collection.')}
+              customIcon={PlusCircleIcon}
+              showPrimaryAction
+              primaryActionButton={primaryActionButton}
+            />
+          }
           {hostCollections?.map((hostCollection) => {
             const {
               id, name, description, maxHosts, unlimitedHosts, totalHosts,
@@ -130,7 +156,7 @@ const HostCollectionsDetails = ({
                     </div>
                   </ExpandableSection>
                 </FlexItem>
-                <FlexItem component="span">
+                <FlexItem component="span" spacer={{ default: 'spacerXl' }}>
                   {totalHosts}/{unlimitedHosts ? 'unlimited' : maxHosts}
                 </FlexItem>
               </Flex>

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scss

@@ -0,0 +1,23 @@
+.host-collection-card-body {
+  .pf-l-bullseye {
+    position: relative;
+    top: -20px;
+  }
+  .pf-c-empty-state__icon {
+    font-size: 2em;
+  }
+  .pf-m-lg {
+    margin: -20px;
+  }
+  .pf-c-empty-state__body {
+    font-size: smaller;
+    margin-top: 1.4em;
+    margin-bottom: 1em;
+  }
+  .pf-m-secondary {
+    margin-top: 5px;
+  }
+}
+.host-collection-card-body.empty {
+  padding-bottom: 0;
+}

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsModal.js

@@ -13,7 +13,7 @@ import { useSelectionSet } from '../../../../Table/TableHooks';
 import { selectAvailableHostCollections, selectAvailableHostCollectionsStatus, selectRemovableHostCollections, selectRemovableHostCollectionsStatus } from './HostCollectionsSelectors';
 import hostIdNotReady from '../../HostDetailsActions';
 import { alterHostCollections, getHostAvailableHostCollections, getHostRemovableHostCollections } from './HostCollectionsActions';
-import { MODAL_TYPES } from './HostCollectionsConstants';
+import { MODAL_TYPES, AVAILABLE_HOST_COLLECTIONS_KEY, REMOVABLE_HOST_COLLECTIONS_KEY } from './HostCollectionsConstants';
 import { truncate } from '../../../../../utils/helpers';
 
 export const HostCollectionsAddModal =
@@ -29,7 +29,9 @@ export const HostCollectionsModal = ({
   const emptySearchTitle = __('No matching host collections found');
   const emptySearchBody = __('Try changing your search settings.');
   const errorSearchTitle = __('Problem searching host collections');
-
+  const primaryActionTitle = __('Create host collection');
+  const showPrimaryAction = true;
+  const primaryActionLink = '/host_collections/new';
   const columnHeaders = ['', __('Host collection'), __('Capacity'), __('Description')];
   const adding = (modalType === MODAL_TYPES.ADD);
 
@@ -118,14 +120,13 @@ export const HostCollectionsModal = ({
   };
 
   const modalActions = ([
-    <Button key="add" variant="primary" onClick={handleModalAction} isDisabled={!selectedCount}>
+    <Button key="add" ouiaId="add-button" variant="primary" onClick={handleModalAction} isDisabled={!selectedCount}>
       {adding ? __('Add') : __('Remove')}
     </Button>,
-    <Button key="cancel" variant="link" onClick={handleModalCancel}>
-      Cancel
+    <Button key="cancel" ouiaId="cancel-button" variant="link" onClick={handleModalCancel}>
+      {__('Cancel')}
     </Button>,
   ]);
-
   return (
     <Modal
       isOpen={isOpen}
@@ -135,6 +136,7 @@ export const HostCollectionsModal = ({
       position="top"
       actions={modalActions}
       id={adding ? 'add-host-to-host-collections-modal' : 'remove-host-from-host-collections-modal'}
+      ouiaId="host-collections-modal"
     >
       <FormattedMessage
         className="host-collections-modal-blurb"
@@ -158,19 +160,23 @@ export const HostCollectionsModal = ({
           updateSearchQuery,
           selectedCount,
           selectNone,
+          showPrimaryAction,
+          primaryActionTitle,
+          primaryActionLink,
         }
         }
         ouiaId="host-collections-table"
         additionalListeners={[hostId, modalType, existingHostCollectionIds.join(',')]}
         fetchItems={fetchItems}
         searchPlaceholderText={__('Search host collections')}
-        autocompleteEndpoint="/host_collections/auto_complete_search"
+        autocompleteEndpoint="/katello/api/v2/host_collections"
         variant={TableVariant.compact}
         {...selectAll}
         displaySelectAllCheckbox={results?.length > 0}
+        requestKey={adding ? AVAILABLE_HOST_COLLECTIONS_KEY : REMOVABLE_HOST_COLLECTIONS_KEY}
       >
         <Thead>
-          <Tr>
+          <Tr ouiaId="row-header">
             {columnHeaders.map(col =>
               <Th key={col}>{col}</Th>)}
             <Th />
@@ -183,7 +189,7 @@ export const HostCollectionsModal = ({
             } = propsToCamelCase(hostCollection);
             const isDisabled = (adding && hostLimitExceeded(hostCollection));
             return (
-              <Tr key={id}>
+              <Tr key={id} ouiaId={`row-${id}`}>
                 <Td
                   select={{
                     disable: isDisabled,

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/__tests__/hostCollectionsCard.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent } from 'react-testing-lib-wrapper';
+import { render, fireEvent, renderWithRedux } from 'react-testing-lib-wrapper';
+
 import HostCollectionsCard from '../HostCollectionsCard';
 
 const hostDetails = {
@@ -41,6 +42,17 @@ const emptyHostDetails = {
   },
 };
 
+const renderOptions = {
+  initialState: {
+    // This is the API state that your tests depend on for their data
+    // You can cross reference the needed useSelectors from your tested components
+    // with the data found within the redux chrome add-on to help determine this fixture data.
+    katello: {
+      hostDetails: {},
+    },
+  },
+};
+
 jest.mock('../../../hostDetailsHelpers', () => ({
   ...jest.requireActual('../../../hostDetailsHelpers'),
   userPermissionsFromHostDetails: () => ({
@@ -59,9 +71,15 @@ test('shows host collections and host limits when present', () => {
 });
 
 test('shows empty card when no host collections present', () => {
-  const { queryByText } = render(<HostCollectionsCard hostDetails={emptyHostDetails} />);
+  const {
+    queryByText,
+    getByText,
+    queryByLabelText,
+  } = renderWithRedux(<HostCollectionsCard hostDetails={emptyHostDetails} />, renderOptions);
   expect(queryByText('Host collections')).toBeInTheDocument();
   expect(queryByText('Jturel hosts')).not.toBeInTheDocument();
+  expect(getByText('No host collections yet')).toBeInTheDocument();
+  expect(queryByLabelText('add_to_a_host_collection')).toBeInTheDocument();
 });
 
 test('expands to show description', () => {
@@ -98,15 +116,12 @@ test('shows add and remove options in kebab', () => {
   expect(remove).toHaveAttribute('aria-disabled', 'false');
 });
 
-test('remove is disabled when no host collections present', () => {
-  const { queryByLabelText } = render(<HostCollectionsCard hostDetails={emptyHostDetails} />);
+test('kebab is not displayed when no host collections present', () => {
+  const {
+    queryByLabelText,
+  } = renderWithRedux(<HostCollectionsCard hostDetails={emptyHostDetails} />, renderOptions);
   const kebab = queryByLabelText('host_collections_bulk_actions');
-  expect(kebab).toBeInTheDocument();
-  fireEvent.click(kebab);
-
-  const remove = queryByLabelText('remove_host_from_collections');
-  expect(remove).toBeInTheDocument();
-  expect(remove).toHaveAttribute('aria-disabled', 'true');
+  expect(kebab).not.toBeInTheDocument();
 });
 
 test('does not show card when host not registered', () => {

data/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/__tests__/hostCollectionsModal.test.js

@@ -3,7 +3,7 @@ import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-
 import mockAvailableHostCollections from './availableHostCollections.fixtures.json';
 import mockRemovableHostCollections from './removableHostCollections.fixtures.json';
 import { REMOVABLE_HOST_COLLECTIONS_KEY } from '../HostCollectionsConstants';
-import { assertNockRequest, mockAutocomplete, mockSetting, nockInstance } from '../../../../../../test-utils/nockWrapper';
+import { assertNockRequest, mockAutocomplete, nockInstance } from '../../../../../../test-utils/nockWrapper';
 import katelloApi, { foremanApi } from '../../../../../../services/api';
 import { HostCollectionsAddModal, HostCollectionsRemoveModal } from '../HostCollectionsModal';
 
@@ -38,20 +38,11 @@ const defaultQueryWithAvailable = {
 };
 
 let firstHostCollection;
-let searchDelayScope;
-let autoSearchScope;
 
 describe('HostCollectionsAddModal', () => {
   beforeEach(() => {
     const { results } = mockAvailableHostCollections;
     [firstHostCollection] = results;
-    searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-    autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
-  });
-
-  afterEach(() => {
-    assertNockRequest(searchDelayScope);
-    assertNockRequest(autoSearchScope);
   });
 
   test('Calls API with available_for=host on page load', async (done) => {
@@ -153,13 +144,6 @@ describe('HostCollectionsRemoveModal', () => {
   beforeEach(() => {
     const { results } = mockAvailableHostCollections;
     [firstHostCollection] = results;
-    searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-    autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
-  });
-
-  afterEach(() => {
-    assertNockRequest(searchDelayScope);
-    assertNockRequest(autoSearchScope);
   });
 
   test('Calls API without available_for=host on page load', async (done) => {

data/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeActions.js

@@ -0,0 +1,37 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+import { API_OPERATIONS, put } from 'foremanReact/redux/API';
+import api, { foremanApi } from '../../../../../services/api';
+import HOST_DETAILS_KEY from '../../HostDetailsConstants';
+import { ORGANIZATION, AVAILABLE_RELEASE_VERSIONS } from './SystemPurposeConstants';
+import { errorToast } from '../../../../../scenes/Tasks/helpers';
+
+export const getOrganization = ({ orgId }) => ({
+  type: 'API_GET',
+  payload: {
+    key: `${ORGANIZATION}_${orgId}`,
+    url: api.getApiUrl(`/organizations/${orgId}`),
+  },
+});
+
+export const getAvailableReleaseVersions = ({ hostId }) => ({
+  type: 'API_GET',
+  payload: {
+    key: `${AVAILABLE_RELEASE_VERSIONS}_${hostId}`,
+    url: foremanApi.getApiUrl(`/hosts/${hostId}/subscriptions/available_release_versions`),
+  },
+});
+
+export const updateSystemPurposeAttributes = ({ hostId, attributes, refreshHostDetails }) => put({
+  type: API_OPERATIONS.PUT,
+  key: HOST_DETAILS_KEY,
+  url: foremanApi.getApiUrl(`/hosts/${hostId}`),
+  params: {
+    id: hostId,
+    host: {
+      subscription_facet_attributes: attributes,
+    },
+  },
+  successToast: () => __('System purpose attributes updated'),
+  errorToast,
+  handleSuccess: refreshHostDetails,
+});