katello 4.4.1 → 4.5.0

data/webpack/components/extensions/HostDetails/Tabs/RepositorySetsTab/RepositorySetsTab.js

@@ -1,30 +1,80 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl';
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  useMemo,
+} from 'react';
+
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
 import PropTypes from 'prop-types';
-import { useSelector, useDispatch } from 'react-redux';
-import { Skeleton, ToggleGroup, ToggleGroupItem, Label, Tooltip, Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import { FormattedMessage } from 'react-intl';
+import { STATUS } from 'foremanReact/constants';
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+
+import {
+  ActionList,
+  ActionListItem,
+  Alert,
+  AlertActionCloseButton,
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+  Label,
+  Skeleton,
+  Split,
+  SplitItem,
+  ToggleGroup,
+  ToggleGroupItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { FlagIcon } from '@patternfly/react-icons';
 import {
   TableVariant,
-  Thead,
   Tbody,
-  Tr,
-  Th,
   Td,
+  Th,
+  Thead,
+  Tr,
 } from '@patternfly/react-table';
-import { FlagIcon } from '@patternfly/react-icons';
-import { translate as __ } from 'foremanReact/common/I18n';
-import { propsToCamelCase } from 'foremanReact/common/helpers';
-import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
-import { STATUS } from 'foremanReact/constants';
+
+import {
+  useBulkSelect,
+  useTableSort,
+  useUrlParams,
+} from '../../../../../components/Table/TableHooks';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
-import { enableRepoSetRepo, disableRepoSetRepo, resetRepoSetRepo, getHostRepositorySets } from './RepositorySetsActions';
-import { selectRepositorySetsStatus } from './RepositorySetsSelectors';
+import hostIdNotReady from '../../HostDetailsActions';
 import { selectHostDetailsStatus } from '../../HostDetailsSelectors.js';
-import { useBulkSelect, useUrlParams } from '../../../../../components/Table/TableHooks';
-import { REPOSITORY_SETS_KEY } from './RepositorySetsConstants.js';
+import {
+  getHostRepositorySets,
+  setContentOverrides,
+} from './RepositorySetsActions';
+import { REPOSITORY_SETS_KEY, STATUSES, STATUS_TO_PARAM, PARAM_TO_FRIENDLY_NAME } from './RepositorySetsConstants.js';
+import { selectRepositorySetsStatus } from './RepositorySetsSelectors';
 import './RepositorySetsTab.scss';
-import hostIdNotReady from '../../HostDetailsActions';
+import SortableColumnHeaders from '../../../../Table/components/SortableColumnHeaders';
+import SelectableDropdown from '../../../../SelectableDropdown';
+import { hasRequiredPermissions as can,
+  missingRequiredPermissions as cannot,
+  userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
+
+const viewRepoSets = [
+  'view_hosts', 'view_activation_keys', 'view_products',
+];
+const createBookmarks = ['create_bookmarks'];
 
+export const hideRepoSetsTab = ({ hostDetails }) =>
+  cannot(
+    viewRepoSets,
+    userPermissionsFromHostDetails({ hostDetails }),
+  );
+
+const editHosts = ['edit_hosts'];
 const getEnabledValue = ({ enabled, enabledContentOverride }) => {
   const isOverridden = (enabledContentOverride !== null);
   return {
@@ -61,6 +111,29 @@ EnabledIcon.propTypes = {
   isOverridden: PropTypes.bool.isRequired,
 };
 
+const OsRestrictedIcon = ({ osRestricted }) => (
+  <Tooltip
+    position="right"
+    content={<FormattedMessage
+      id="os-restricted-tooltip"
+      defaultMessage={__('OS restricted to {osRestricted}. If host OS does not match, the repository will not be available on this host.')}
+      values={{ osRestricted }}
+    />}
+  >
+    <Label color="blue" className="os-restricted-label" style={{ marginLeft: '8px' }}>
+      {__(osRestricted)}
+    </Label>
+  </Tooltip>
+);
+
+OsRestrictedIcon.propTypes = {
+  osRestricted: PropTypes.string,
+};
+
+OsRestrictedIcon.defaultProps = {
+  osRestricted: null,
+};
+
 const RepositorySetsTab = () => {
   const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
   const {
@@ -68,6 +141,12 @@ const RepositorySetsTab = () => {
     subscription_status: subscriptionStatus,
     content_facet_attributes: contentFacetAttributes,
   } = hostDetails;
+  const canDoContentOverrides = can(
+    editHosts,
+    userPermissionsFromHostDetails({ hostDetails }),
+  );
+  const STATUS_LABEL = __('Status');
+
   const contentFacet = propsToCamelCase(contentFacetAttributes ?? {});
   const {
     contentViewDefault,
@@ -78,45 +157,77 @@ const RepositorySetsTab = () => {
   const nonLibraryHost = contentViewDefault === false &&
     lifecycleEnvironmentLibrary === false;
   const simpleContentAccess = (Number(subscriptionStatus) === 5);
+  const [isBulkActionOpen, setIsBulkActionOpen] = useState(false);
+  const toggleBulkAction = () => setIsBulkActionOpen(prev => !prev);
   const dispatch = useDispatch();
-  const { searchParam, show } = useUrlParams();
+  const { searchParam, show, status: initialStatus } = useUrlParams();
+
   const toggleGroupStates = ['noLimit', 'limitToEnvironment'];
   const [noLimit, limitToEnvironment] = toggleGroupStates;
   const defaultToggleGroupState = nonLibraryHost ? limitToEnvironment : noLimit;
   const [toggleGroupState, setToggleGroupState] =
     useState(show ?? defaultToggleGroupState);
+  const [statusSelected, setStatusSelected]
+    = useState(PARAM_TO_FRIENDLY_NAME[initialStatus] ?? STATUS_LABEL);
+  const activeFilters = [statusSelected, toggleGroupState];
+  const defaultFilters = [STATUS_LABEL, defaultToggleGroupState];
+
   const [alertShowing, setAlertShowing] = useState(false);
   const emptyContentTitle = __('No repository sets to show.');
   const emptyContentBody = __('Repository sets will appear here when available.');
   const emptySearchTitle = __('No matching repository sets found');
   const emptySearchBody = __('Try changing your search query.');
-  const columnHeaders = [
+  const errorSearchTitle = __('Problem searching repository sets');
+  const columnHeaders = useMemo(() => [
     __('Repository'),
     __('Product'),
     __('Repository path'),
     __('Status'),
-  ];
+  ], []);
+
+  const COLUMNS_TO_SORT_PARAMS = {
+    [columnHeaders[0]]: 'name',
+    [columnHeaders[1]]: 'product',
+    [columnHeaders[3]]: 'enabled_by_default',
+  };
+
+  const {
+    pfSortParams, apiSortParams,
+    activeSortColumn, activeSortDirection,
+  } = useTableSort({
+    allColumns: columnHeaders,
+    columnsToSortParams: COLUMNS_TO_SORT_PARAMS,
+  });
+
   const fetchItems = useCallback(
-    params => (hostId ?
-      getHostRepositorySets({
+    (params) => {
+      if (!hostId) return hostIdNotReady;
+      const modifiedParams = { ...params };
+      if (statusSelected !== STATUS_LABEL) {
+        modifiedParams.status = STATUS_TO_PARAM[statusSelected];
+      }
+      return getHostRepositorySets({
         content_access_mode_env: toggleGroupState === limitToEnvironment,
         content_access_mode_all: simpleContentAccess,
         host_id: hostId,
-        ...params,
-      }) : hostIdNotReady),
-    [hostId, toggleGroupState, limitToEnvironment, simpleContentAccess],
+        ...apiSortParams,
+        ...modifiedParams,
+      });
+    },
+    [hostId, toggleGroupState, limitToEnvironment,
+      simpleContentAccess, apiSortParams, statusSelected, STATUS_LABEL],
   );
 
   const response = useSelector(state => selectAPIResponse(state, REPOSITORY_SETS_KEY));
-  const { results, ...metadata } = response;
+  const { results, error: errorSearchBody, ...metadata } = response;
   const status = useSelector(state => selectRepositorySetsStatus(state));
+  const repoSetSearchQuery = label => `cp_content_id = ${label}`;
   const {
     selectOne, isSelected, searchQuery, selectedCount, isSelectable,
     updateSearchQuery, selectNone, fetchBulkParams, ...selectAll
   } = useBulkSelect({
     results,
     metadata,
-    isSelectable: () => false,
     initialSearchQuery: searchParam || '',
   });
 
@@ -130,66 +241,133 @@ const RepositorySetsTab = () => {
   }, [hostDetailsStatus, nonLibraryHost]);
 
   if (!hostId) return <Skeleton />;
-
-  const updateResults = ({ labels, enabled, newResponse }) => dispatch({
+  const updateResults = newResponse => dispatch({
     type: `${REPOSITORY_SETS_KEY}_SUCCESS`,
     key: REPOSITORY_SETS_KEY,
     response: {
       ...response,
       results: results.map((result) => {
-        if (labels.includes(result.label)) {
-          const isEnabled = enabled === null ?
-            newResponse.results.find(r => r.id === result.id).enabled :
-            enabled;
-          return { ...result, enabled: isEnabled, enabled_content_override: enabled };
+        const {
+          enabled,
+          enabled_content_override: enabledContentOverride,
+        } = newResponse.results.find(r => r.id === result.id);
+        if (enabled !== null) {
+          return { ...result, enabled, enabled_content_override: enabledContentOverride };
         }
         return result;
       }),
     },
   });
-  const overrideToEnabled = ({ labels }) =>
-    dispatch(enableRepoSetRepo({ hostId, labels, updateResults }));
-  const overrideToDisabled = ({ labels }) =>
-    dispatch(disableRepoSetRepo({ hostId, labels, updateResults }));
-  const resetToDefault = ({ labels }) =>
-    dispatch(resetRepoSetRepo({ hostId, labels, updateResults }));
-
-  // uncomment (and remove rule disablement) when Select All is added
-  /* eslint-disable max-len */
-  // const dropdownItems = [
-  //   <DropdownItem aria-label="bulk_enable" key="bulk_enable" component="button" onClick={overrideToEnabled}>
-  //     {__('Override to enabled')}
-  //   </DropdownItem>,
-  //   <DropdownItem aria-label="bulk_disable" key="bulk_disable" component="button" onClick={overrideToDisabled}>
-  //     {__('Override to disabled')}
-  //   </DropdownItem>,
-  //   <DropdownItem aria-label="bulk_disable" key="bulk_disable" component="button" onClick={resetToDefault}>
-  //     {__('Reset to default')}
-  //   </DropdownItem>,
-  // ];
-  /* eslint-enable max-len */
-
-  let toggleGroup;
-  if (nonLibraryHost) {
-    toggleGroup = (
-      <ToggleGroup aria-label="Repository Set toggle">
-        <ToggleGroupItem
-          text={__('Show all')}
-          buttonId="no-limit-toggle"
-          aria-label="No limit"
-          isSelected={toggleGroupState === noLimit}
-          onChange={() => setToggleGroupState(noLimit)}
-        />
-        <ToggleGroupItem
-          text={__('Limit to environment')}
-          buttonId="limit-to-env-toggle"
-          aria-label="Limit to environment"
-          isSelected={toggleGroupState === limitToEnvironment}
-          onChange={() => setToggleGroupState(limitToEnvironment)}
+
+  const handleStatusSelected = newType => setStatusSelected((prevType) => {
+    if (prevType === newType) {
+      return STATUS_LABEL;
+    }
+    return newType;
+  });
+
+  const updateOverrides = ({
+    enabled, remove = false, search, singular = false,
+  }) => {
+    setIsBulkActionOpen(false);
+    selectNone();
+
+    dispatch(setContentOverrides({
+      hostId,
+      search,
+      enabled,
+      remove,
+      updateResults: resp => updateResults(resp),
+      singular: singular || selectedCount === 1,
+    }));
+  };
+  const bulkParams = () => fetchBulkParams('cp_content_id');
+  const enableRepoSets = () => updateOverrides({ enabled: true, search: bulkParams() });
+  const disableRepoSets = () => updateOverrides({ enabled: false, search: bulkParams() });
+  const resetToDefaultRepoSets = () => updateOverrides({ remove: true, search: bulkParams() });
+
+  const enableRepoSet = id => updateOverrides({
+    enabled: true,
+    search: repoSetSearchQuery(id),
+    singular: true,
+  });
+  const disableRepoSet = id => updateOverrides({
+    enabled: false,
+    search: repoSetSearchQuery(id),
+    singular: true,
+  });
+  const resetToDefaultRepoSet = id => updateOverrides({
+    remove: true,
+    search: repoSetSearchQuery(id),
+    singular: true,
+  });
+
+  const readOnlyBookmarks =
+  cannot(createBookmarks, userPermissionsFromHostDetails({ hostDetails }));
+
+  const dropdownItems = [
+    <DropdownItem aria-label="bulk_enable" key="bulk_enable" component="button" onClick={enableRepoSets} isDisabled={selectedCount === 0}>
+      {__('Override to enabled')}
+    </DropdownItem>,
+    <DropdownItem aria-label="bulk_disable" key="bulk_disable" component="button" onClick={disableRepoSets} isDisabled={selectedCount === 0}>
+      {__('Override to disabled')}
+    </DropdownItem>,
+    <DropdownItem aria-label="bulk_reset_default" key="bulk_reset_default" component="button" onClick={resetToDefaultRepoSets} isDisabled={selectedCount === 0}>
+      {__('Reset to default')}
+    </DropdownItem>,
+  ];
+
+  const toggleGroup = (
+    <Split hasGutter>
+      {nonLibraryHost &&
+        <SplitItem>
+          <ToggleGroup aria-label="Repository Set toggle">
+            <ToggleGroupItem
+              text={__('Show all')}
+              buttonId="no-limit-toggle"
+              aria-label="No limit"
+              isSelected={toggleGroupState === noLimit}
+              onChange={() => setToggleGroupState(noLimit)}
+            />
+            <ToggleGroupItem
+              text={__('Limit to environment')}
+              buttonId="limit-to-env-toggle"
+              aria-label="Limit to environment"
+              isSelected={toggleGroupState === limitToEnvironment}
+              onChange={() => setToggleGroupState(limitToEnvironment)}
+            />
+          </ToggleGroup>
+        </SplitItem>
+      }
+      <SplitItem>
+        <SelectableDropdown
+          id="status-dropdown"
+          title={STATUS_LABEL}
+          showTitle={false}
+          items={Object.values(STATUSES)}
+          selected={statusSelected}
+          setSelected={handleStatusSelected}
         />
-      </ToggleGroup>
-    );
-  }
+      </SplitItem>
+    </Split>
+  );
+
+  const actionButtons = canDoContentOverrides ? (
+    <Split hasGutter>
+      <SplitItem>
+        <ActionList isIconList>
+          <ActionListItem>
+            <Dropdown
+              toggle={<KebabToggle aria-label="bulk_actions" onToggle={toggleBulkAction} />}
+              isOpen={isBulkActionOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+            />
+          </ActionListItem>
+        </ActionList>
+      </SplitItem>
+    </Split>
+  ) : null;
 
   const hostEnvText = 'the "{contentViewName}" content view and "{lifecycleEnvironmentName}" environment';
 
@@ -207,7 +385,6 @@ const RepositorySetsTab = () => {
   } else {
     alertText = nonScaAlert;
   }
-
   return (
     <div>
       <div id="repo-sets-tab">
@@ -247,52 +424,61 @@ const RepositorySetsTab = () => {
             metadata,
             emptyContentTitle,
             emptyContentBody,
-            emptySearchTitle,
-            emptySearchBody,
             status,
             searchQuery,
             updateSearchQuery,
             selectedCount,
             selectNone,
             toggleGroup,
+            actionButtons,
+            emptySearchTitle,
+            emptySearchBody,
+            activeFilters,
+            defaultFilters,
           }
           }
-          activeFilters={[toggleGroupState]}
-          defaultFilters={[defaultToggleGroupState]}
-          additionalListeners={[hostId, toggleGroupState]}
+          ouiaId="host-repository-sets-table"
+          errorSearchTitle={errorSearchTitle}
+          errorSearchBody={errorSearchBody}
+          additionalListeners={[hostId, toggleGroupState, statusSelected,
+            activeSortColumn, activeSortDirection]}
           fetchItems={fetchItems}
           autocompleteEndpoint="/repository_sets/auto_complete_search"
           bookmarkController="katello_product_contents" // Katello::ProductContent.table_name
+          readOnlyBookmarks={readOnlyBookmarks}
           rowsCount={results?.length}
           variant={TableVariant.compact}
           {...selectAll}
-          displaySelectAllCheckbox={false}
+          displaySelectAllCheckbox={canDoContentOverrides}
         >
           <Thead>
             <Tr>
               <Th key="select-all" />
-              {columnHeaders.map(col =>
-                <Th key={col}>{col}</Th>)}
+              <SortableColumnHeaders
+                columnHeaders={columnHeaders}
+                pfSortParams={pfSortParams}
+                columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
+              />
               <Th />
               <Th key="action-menu" />
             </Tr>
           </Thead>
-          <>
+          <Tbody>
             {results?.map((repoSet, rowIndex) => {
               const {
                 id,
-                label,
                 content: { name: repoName },
                 enabled,
                 enabled_content_override: enabledContentOverride,
                 contentUrl: repoPath,
                 product: { name: productName, id: productId },
+                osRestricted,
               } = repoSet;
               const { isEnabled, isOverridden } =
                 getEnabledValue({ enabled, enabledContentOverride });
               return (
-                <Tbody key={`${id}_${repoPath}`}>
-                  <Tr>
+                <Tr key={id}>
+                  {canDoContentOverrides ? (
                     <Td select={{
                       disable: !isSelectable(id),
                       isSelected: isSelected(id),
@@ -301,18 +487,23 @@ const RepositorySetsTab = () => {
                       variant: 'checkbox',
                     }}
                     />
-                    <Td>
-                      <span>{repoName}</span>
-                    </Td>
-                    <Td>
-                      <a href={`/products/${productId}`}>{productName}</a>
-                    </Td>
-                    <Td>
-                      <span>{repoPath}</span>
-                    </Td>
-                    <Td>
-                      <span><EnabledIcon key={`enabled-icon-${id}`} {...{ isEnabled, isOverridden }} /></span>
-                    </Td>
+                  ) : <Td>&nbsp;</Td>}
+                  <Td>
+                    <span>{repoName}</span>
+                  </Td>
+                  <Td>
+                    <a href={`/products/${productId}`}>{productName}</a>
+                  </Td>
+                  <Td>
+                    <span>{repoPath}</span>
+                  </Td>
+                  <Td>
+                    <span><EnabledIcon key={`enabled-icon-${id}`} {...{ isEnabled, isOverridden }} /></span>
+                    {osRestricted &&
+                      <span><OsRestrictedIcon key={`os-restricted-icon-${id}`} {...{ osRestricted }} /></span>
+                    }
+                  </Td>
+                  {canDoContentOverrides ? (
                     <Td
                       key={`rowActions-${id}`}
                       actions={{
@@ -320,27 +511,27 @@ const RepositorySetsTab = () => {
                           {
                             title: __('Override to disabled'),
                             isDisabled: isOverridden && !isEnabled,
-                            onClick: () => overrideToDisabled({ labels: [label] }),
+                            onClick: () => disableRepoSet(id),
                           },
                           {
                             title: __('Override to enabled'),
                             isDisabled: isOverridden && isEnabled,
-                            onClick: () => overrideToEnabled({ labels: [label] }),
+                            onClick: () => enableRepoSet(id),
                           },
                           {
                             title: __('Reset to default'),
                             isDisabled: !isOverridden,
-                            onClick: () => resetToDefault({ labels: [label] }),
+                            onClick: () => resetToDefaultRepoSet(id),
                           },
                         ],
                       }}
                     />
-                  </Tr>
-                </Tbody>
+                  ) : <Td />}
+                </Tr>
               );
             })
             }
-          </>
+          </Tbody>
         </TableWrapper>
       </div>
     </div>

data/webpack/components/extensions/HostDetails/Tabs/TracesTab/EnableTracerModal.js

@@ -12,13 +12,12 @@ import {
 } from '@patternfly/react-core';
 import { CaretDownIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { selectAPIResponse } from 'foremanReact/redux/API/APISelectors';
-import { installTracerPackage } from './HostTracesActions';
 import { katelloPackageInstallUrl } from '../customizedRexUrlHelpers';
 import { KATELLO_TRACER_PACKAGE } from './HostTracesConstants';
 
-const EnableTracerModal = ({ isOpen, setIsOpen }) => {
+const EnableTracerModal = ({ isOpen, setIsOpen, triggerJobStart }) => {
   const title = __('Enable Tracer');
   const body = __('Enabling will install the katello-host-tools-tracer package on the host.');
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -29,16 +28,19 @@ const EnableTracerModal = ({ isOpen, setIsOpen }) => {
     __('via customized remote execution'),
   ];
   const [selectedOption, setSelectedOption] = useState(dropdownOptions[0]);
-  const dispatch = useDispatch();
   const hostDetails = useSelector(state => selectAPIResponse(state, 'HOST_DETAILS'));
   const { name: hostname } = hostDetails;
   const handleSelect = () => {
     setIsDropdownOpen(false);
   };
-  const enableTracer = () => {
-    dispatch(installTracerPackage({ hostname }));
+  const handleClose = () => {
     setIsOpen(false);
   };
+  const enableTracer = () => {
+    setButtonLoading(true);
+    triggerJobStart();
+    handleClose();
+  };
 
   const dropdownItems = dropdownOptions.map(text => (
     <DropdownItem key={`option_${text}`} onClick={() => setSelectedOption(text)}>{text}</DropdownItem>
@@ -54,6 +56,8 @@ const EnableTracerModal = ({ isOpen, setIsOpen }) => {
           key="enable_button"
           type="submit"
           variant="primary"
+          isLoading={buttonLoading}
+          isDisabled={buttonLoading}
           onClick={enableTracer}
         >
           {title}
@@ -65,6 +69,7 @@ const EnableTracerModal = ({ isOpen, setIsOpen }) => {
         key="enable_button"
         component="a"
         isLoading={buttonLoading}
+        isDisabled={buttonLoading}
         onClick={() => setButtonLoading(true)}
         variant="primary"
         href={customizedRexUrl}
@@ -80,7 +85,7 @@ const EnableTracerModal = ({ isOpen, setIsOpen }) => {
       title={title}
       width="28em"
       isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
+      onClose={handleClose}
       actions={[
         getEnableTracerButton(),
         <Button key="cancel_button" variant="link" onClick={() => setIsOpen(false)}>{__('Cancel')}</Button>,
@@ -96,6 +101,7 @@ const EnableTracerModal = ({ isOpen, setIsOpen }) => {
                 id="toggle-enable-tracer-modal-dropdown"
                 onToggle={toggleDropdownOpen}
                 toggleIndicator={CaretDownIcon}
+                isDisabled={buttonLoading}
               >
                 {selectedOption}
               </DropdownToggle>
@@ -114,6 +120,7 @@ const EnableTracerModal = ({ isOpen, setIsOpen }) => {
 EnableTracerModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   setIsOpen: PropTypes.func.isRequired,
+  triggerJobStart: PropTypes.func.isRequired,
 };
 
 export default EnableTracerModal;

data/webpack/components/extensions/HostDetails/Tabs/TracesTab/HostTracesActions.js

@@ -13,7 +13,8 @@ export const getHostTraces = (hostId, params) => get({
   params,
 });
 
-export const installTracerPackage = ({ hostname }) => installPackage({
+export const installTracerPackage = ({ hostname, handleSuccess }) => installPackage({
   hostname,
   packageName: KATELLO_TRACER_PACKAGE,
+  handleSuccess,
 });