katello 4.10.0 → 4.11.0.rc2

data/webpack/components/Table/EmptyStateMessage.js

@@ -54,16 +54,19 @@ const EmptyStateMessage = ({
   const clearSearch = useSelector(selectSearchBarClearSearch);
   const showSecondaryActionAnchor = showSecondaryAction && secondaryActionLink;
   const handleClick = () => {
+    const shouldReload = (searchIsActive || filtersAreActive);
     if (searchIsActive) {
       clearSearch();
     }
     if (filtersAreActive || showSecondaryActionButton) {
       resetFilters();
     }
-    dispatch({
-      type: `${requestKey}_REQUEST`,
-      key: requestKey,
-    });
+    if (shouldReload) {
+      dispatch({
+        type: `${requestKey}_REQUEST`,
+        key: requestKey,
+      });
+    }
   };
 
   const actionButton = primaryActionButton ?? (

data/webpack/components/Table/MainTable.scss

@@ -1,21 +1,22 @@
-.pf-c-dropdown.pf-m-align-right {
-  width: 100%;
-  justify-content: flex-end;
-  display: flex;
-}
+.katello-pf4-table {
+  .pf-c-dropdown.pf-m-align-right {
+    width: 100%;
+    justify-content: flex-end;
+    display: flex;
+  }
 
-.pf-c-dropdown__menu {
-  min-width: 0;
-}
+  .pf-c-dropdown__menu {
+    min-width: 0;
+  }
+  .pf-c-wizard__footer {
+    z-index: 1;
+  }
 
-.pf-c-wizard__footer {
-  z-index: 1;
-}
-
-.pf-c-table tbody tr td {
-  vertical-align: inherit;
-}
+  .pf-c-table tbody tr td {
+    vertical-align: inherit;
+  }
 
-input[type="checkbox"][disabled] {
-  cursor: initial;
+  input[type='checkbox'][disabled] {
+    cursor: initial;
+  }
 }

data/webpack/components/Table/TableWrapper.js

@@ -45,6 +45,7 @@ const TableWrapper = ({
   emptySearchBody,
   hideSearch,
   alwaysHideToolbar,
+  hidePagination,
   nodesBelowSearch,
   bookmarkController,
   readOnlyBookmarks,
@@ -59,7 +60,7 @@ const TableWrapper = ({
   const { pageRowCount } = getPageStats({ total, page, perPage });
   const unresolvedStatus = !!allTableProps?.status && allTableProps.status !== STATUS.RESOLVED;
   const unresolvedStatusOrNoRows = unresolvedStatus || pageRowCount === 0;
-  const showPagination = !unresolvedStatusOrNoRows;
+  const showPagination = !unresolvedStatusOrNoRows && !hidePagination;
   const filtersAreActive = activeFilters?.length &&
     !isEqual(new Set(activeFilters), new Set(allTableProps.defaultFilters));
   const hideToolbar = alwaysHideToolbar || (!searchQuery && !filtersAreActive &&
@@ -308,6 +309,7 @@ TableWrapper.propTypes = {
   emptySearchBody: PropTypes.string,
   hideSearch: PropTypes.bool,
   alwaysHideToolbar: PropTypes.bool,
+  hidePagination: PropTypes.bool,
   nodesBelowSearch: PropTypes.node,
   bookmarkController: PropTypes.string,
   readOnlyBookmarks: PropTypes.bool,
@@ -338,6 +340,7 @@ TableWrapper.defaultProps = {
   emptySearchBody: __('Try changing your search settings.'),
   hideSearch: false,
   alwaysHideToolbar: false,
+  hidePagination: false,
   nodesBelowSearch: null,
   bookmarkController: undefined,
   readOnlyBookmarks: false,

data/webpack/components/extensions/HostDetails/ActionsBar/index.js

@@ -1,15 +1,44 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { DropdownItem } from '@patternfly/react-core';
-import { CubeIcon, UndoIcon } from '@patternfly/react-icons';
+import React, { useContext } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { CubeIcon, UndoIcon, RedoIcon } from '@patternfly/react-icons';
 
 import { translate as __ } from 'foremanReact/common/I18n';
+import { HOST_DETAILS_KEY } from 'foremanReact/components/HostDetails/consts';
+import { ForemanActionsBarContext } from 'foremanReact/components/HostDetails/ActionsBar';
 import { foremanUrl } from 'foremanReact/common/helpers';
 
 import { selectHostDetails } from '../HostDetailsSelectors';
+import { useRexJobPolling } from '../Tabs/RemoteExecutionHooks';
+import { runSubmanRepos } from '../Cards/ContentViewDetailsCard/HostContentViewActions';
+import { hasRequiredPermissions as can, userPermissionsFromHostDetails } from '../hostDetailsHelpers';
 
 const HostActionsBar = () => {
   const hostDetails = useSelector(selectHostDetails);
+  const dispatch = useDispatch();
+  const hostname = hostDetails?.name;
+  const { onKebabToggle } = useContext(ForemanActionsBarContext);
+
+  const recalculateApplicability = ['edit_hosts', 'create_job_invocations'];
+  const showRecalculate =
+    can(recalculateApplicability, userPermissionsFromHostDetails({ hostDetails }));
+
+  const refreshHostDetails = () => dispatch({
+    type: 'API_GET',
+    payload: {
+      key: HOST_DETAILS_KEY,
+      url: `/api/hosts/${hostname}`,
+    },
+  });
+
+  const {
+    triggerJobStart: triggerRecalculate,
+  } = useRexJobPolling(() => runSubmanRepos(hostname, refreshHostDetails));
+
+  const handleRefreshApplicabilityClick = () => {
+    triggerRecalculate();
+    onKebabToggle();
+  };
 
   return (
     <>
@@ -21,6 +50,18 @@ const HostActionsBar = () => {
       >
         {__('Legacy content host UI')}
       </DropdownItem>
+      <DropdownSeparator key="separator" ouiaId="katello-separator" />
+      {showRecalculate && (
+        <DropdownItem
+          ouiaId="katello-refresh-applicability"
+          key="katello-refresh-applicability"
+          onClick={handleRefreshApplicabilityClick}
+          icon={<RedoIcon />}
+        >
+          {__('Refresh applicability')}
+        </DropdownItem>
+      )
+      }
       <DropdownItem
         ouiaId="katello-change-host-content-source"
         key="katello-change-host-content-source"

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

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

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

@@ -18,7 +18,7 @@ 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 { useSet } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import { HostCollectionsAddModal, HostCollectionsRemoveModal } from './HostCollectionsModal';
 import { hasRequiredPermissions, hostIsRegistered, userPermissionsFromHostDetails } from '../../hostDetailsHelpers';
 import EmptyStateMessage from '../../../../Table/EmptyStateMessage';

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

@@ -7,9 +7,9 @@ import { HOST_DETAILS_KEY } from 'foremanReact/components/HostDetails/consts';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
 import { propsToCamelCase } from 'foremanReact/common/helpers';
+import { useSelectionSet } from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import PropTypes from 'prop-types';
 import TableWrapper from '../../../../Table/TableWrapper';
-import { useSelectionSet } from '../../../../Table/TableHooks';
 import { selectAvailableHostCollections, selectAvailableHostCollectionsStatus, selectRemovableHostCollections, selectRemovableHostCollectionsStatus } from './HostCollectionsSelectors';
 import hostIdNotReady from '../../HostDetailsActions';
 import { alterHostCollections, getHostAvailableHostCollections, getHostRemovableHostCollections } from './HostCollectionsActions';

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

@@ -2,7 +2,8 @@ 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 { ACTIVATION_KEY } from '../../../../../scenes/ActivationKeys/Details/ActivationKeyConstants';
+import { ORGANIZATION, AVAILABLE_RELEASE_VERSIONS, RELEASES } from './SystemPurposeConstants';
 import { errorToast } from '../../../../../scenes/Tasks/helpers';
 
 export const getOrganization = ({ orgId }) => ({
@@ -13,20 +14,28 @@ export const getOrganization = ({ orgId }) => ({
   },
 });
 
-export const getAvailableReleaseVersions = ({ hostId }) => ({
+export const getHostAvailableReleaseVersions = ({ id }) => ({
   type: 'API_GET',
   payload: {
-    key: `${AVAILABLE_RELEASE_VERSIONS}_${hostId}`,
-    url: foremanApi.getApiUrl(`/hosts/${hostId}/subscriptions/available_release_versions`),
+    key: `${AVAILABLE_RELEASE_VERSIONS}_${id}`,
+    url: foremanApi.getApiUrl(`/hosts/${id}/subscriptions/available_release_versions`),
   },
 });
 
-export const updateSystemPurposeAttributes = ({ hostId, attributes, refreshHostDetails }) => put({
+export const getAKAvailableReleaseVersions = ({ id }) => ({
+  type: API_OPERATIONS.GET,
+  payload: {
+    key: `${RELEASES}_${id}`,
+    url: api.getApiUrl(`/activation_keys/${id}/releases`),
+  },
+});
+
+export const updateHostSysPurposeAttributes = ({ id, attributes, refreshHostDetails }) => put({
   type: API_OPERATIONS.PUT,
   key: HOST_DETAILS_KEY,
-  url: foremanApi.getApiUrl(`/hosts/${hostId}`),
+  url: foremanApi.getApiUrl(`/hosts/${id}`),
   params: {
-    id: hostId,
+    id,
     host: {
       subscription_facet_attributes: attributes,
     },
@@ -35,3 +44,16 @@ export const updateSystemPurposeAttributes = ({ hostId, attributes, refreshHostD
   errorToast,
   handleSuccess: refreshHostDetails,
 });
+
+export const updateAKSysPurposeAttributes = ({ id, attributes, refreshAKDetails }) => put({
+  type: API_OPERATIONS.PUT,
+  key: ACTIVATION_KEY,
+  url: api.getApiUrl(`/activation_keys/${id}`),
+  params: {
+    id,
+    activation_key: attributes,
+  },
+  successToast: () => __('System purpose attributes updated'),
+  errorToast,
+  handleSuccess: refreshAKDetails,
+});

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { STATUS } from 'foremanReact/constants';
+import { selectAPIStatus } from 'foremanReact/redux/API/APISelectors';
 import {
   Button,
   Card,
@@ -10,8 +11,8 @@ import {
   CardBody,
   DescriptionList,
   DescriptionListGroup,
-  DescriptionListDescription,
-  DescriptionListTerm,
+  DescriptionListDescription as Dd,
+  DescriptionListTerm as Dt,
   Flex,
   FlexItem,
   GridItem,
@@ -20,6 +21,7 @@ import {
   ListItem,
   Tooltip,
   Skeleton,
+  CardExpandableContent,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -29,13 +31,18 @@ import SystemPurposeEditModal from './SystemPurposeEditModal';
 import { selectHostDetailsStatus } from '../../HostDetailsSelectors';
 import { hasRequiredPermissions, hostIsNotRegistered } from '../../hostDetailsHelpers';
 
-const SystemPurposeCard = ({ hostDetails }) => {
-  const showEditButton = hasRequiredPermissions(['edit_hosts'], hostDetails?.permissions);
-  const { organization_id: orgId, name: hostName } = hostDetails;
-  const subscriptionFacetAttributes = hostDetails?.subscription_facet_attributes;
+const SystemPurposeCard = ({ hostDetails, akDetails }) => {
+  const sysPurposeCardType = hostDetails?.id ? 'host' : 'ak';
+  const isAKType = sysPurposeCardType === 'ak';
+  const isHostType = sysPurposeCardType === 'host';
+  const details = isHostType ? hostDetails : akDetails;
+  const requiredPermission = isHostType ? 'edit_hosts' : 'edit_activation_keys';
+  const showEditButton = hasRequiredPermissions([requiredPermission], details?.permissions);
+  const { organization_id: orgId, name } = details;
+  const subscriptionFacetAttributes = details?.subscription_facet_attributes;
   const {
     purposeRole, purposeUsage, purposeAddons, releaseVersion, serviceLevel,
-  } = propsToCamelCase(subscriptionFacetAttributes ?? {});
+  } = propsToCamelCase((subscriptionFacetAttributes || details) ?? {});
   const sysPurposeProps = {
     purposeRole,
     purposeUsage,
@@ -43,11 +50,26 @@ const SystemPurposeCard = ({ hostDetails }) => {
     releaseVersion,
     serviceLevel,
   };
-  const hostDetailsStatus = useSelector(selectHostDetailsStatus);
-  const dataIsLoading = hostDetailsStatus === STATUS.PENDING;
+  const selectAKDetailsStatus = state =>
+    selectAPIStatus(state, `ACTIVATION_KEY_${details.id}`) ?? STATUS.PENDING;
+
+  const statusSelector = isHostType ? selectHostDetailsStatus : selectAKDetailsStatus;
+  const detailsStatus = useSelector(statusSelector);
+  const dataIsLoading = detailsStatus === STATUS.PENDING;
 
   const [editing, setEditing] = useState(false);
-  if (!hostDetails?.id) {
+
+  const [isExpanded, setIsExpanded] = React.useState(true);
+
+  const onExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const cardHeaderProps = {
+    toggleButtonProps: { id: 'sys-purpose-toggle', 'aria-label': 'sys-purpose-toggle' },
+  };
+  if (isAKType) cardHeaderProps.onExpand = onExpand;
+
+  if (!details?.id) {
     return (
       <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
         <Card ouiaId="system-purpose-card">
@@ -57,12 +79,11 @@ const SystemPurposeCard = ({ hostDetails }) => {
     );
   }
 
-  if (hostIsNotRegistered({ hostDetails })) return null;
-
+  if (isHostType && hostIsNotRegistered({ hostDetails: details })) return null;
   return (
     <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
-      <Card ouiaId="system-purpose-card">
-        <CardHeader>
+      <Card ouiaId="system-purpose-card" id="system-purpose-card" isExpanded={isHostType ? true : isExpanded}>
+        <CardHeader {...cardHeaderProps}>
           <Flex
             alignItems={{ default: 'alignItemsCenter' }}
             justifyContent={{ default: 'justifyContentSpaceBetween' }}
@@ -95,58 +116,63 @@ const SystemPurposeCard = ({ hostDetails }) => {
             }
           </Flex>
         </CardHeader>
-        <CardBody className="system-purpose-card-body">
-          <DescriptionList isHorizontal>
-            <DescriptionListGroup>
-              <DescriptionListTerm>{__('Role')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                {dataIsLoading ? <Skeleton /> : purposeRole}
-              </DescriptionListDescription>
-              <DescriptionListTerm>{__('SLA')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                {serviceLevel && (dataIsLoading ? <Skeleton /> : (
-                  <Label color="blue">{serviceLevel}</Label>
-                ))}
-              </DescriptionListDescription>
-              <DescriptionListTerm>{__('Usage type')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                {purposeUsage && (dataIsLoading ? <Skeleton /> : (
-                  <Label color="blue">{purposeUsage}</Label>
-                ))}
-              </DescriptionListDescription>
-              <DescriptionListTerm>{__('Release version')}</DescriptionListTerm>
-              <DescriptionListDescription>
-                {dataIsLoading ? <Skeleton /> : releaseVersion}
-              </DescriptionListDescription>
-              {!!purposeAddons?.length && (
-                <>
-                  <DescriptionListTerm>{__('Add-ons')}</DescriptionListTerm>
-                  {dataIsLoading ? <Skeleton /> : (
-                    <DescriptionListDescription>
-                      <List isPlain>
-                        {purposeAddons.map(addon => (
-                          <ListItem key={addon}>{addon}</ListItem>
-                        ))}
-                      </List>
-                    </DescriptionListDescription>
-                  )}
-                </>
-              )
-              }
-            </DescriptionListGroup>
-          </DescriptionList>
-          {showEditButton && (
-            <SystemPurposeEditModal
-              key={hostName}
-              isOpen={editing}
-              orgId={orgId}
-              closeModal={() => setEditing(false)}
-              hostName={hostName}
-              hostId={hostDetails.id}
-              {...sysPurposeProps}
-            />
-          )}
-        </CardBody>
+        <CardExpandableContent>
+          <CardBody className="system-purpose-card-body">
+            <DescriptionList isHorizontal columnModifier={isAKType ? { default: '2Col' } : undefined}>
+              <DescriptionListGroup>
+                <Dt>{__('Role')}</Dt>
+                <Dd>
+                  {dataIsLoading ? <Skeleton /> : purposeRole}
+                </Dd>
+                <Dt>{__('SLA')}</Dt>
+                <Dd>
+                  {serviceLevel && (dataIsLoading ? <Skeleton /> : (
+                    <Label color="blue">{serviceLevel}</Label>
+                  ))}
+                </Dd>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <Dt>{__('Usage type')}</Dt>
+                <Dd>
+                  {purposeUsage && (dataIsLoading ? <Skeleton /> : (
+                    <Label color="blue">{purposeUsage}</Label>
+                  ))}
+                </Dd>
+                <Dt>{__('Release version')}</Dt>
+                <Dd>
+                  {dataIsLoading ? <Skeleton /> : releaseVersion}
+                </Dd>
+                {!!purposeAddons?.length && (
+                  <>
+                    <Dt>{__('Add-ons')}</Dt>
+                    {dataIsLoading ? <Skeleton /> : (
+                      <Dd>
+                        <List isPlain>
+                          {purposeAddons.map(addon => (
+                            <ListItem key={addon}>{addon}</ListItem>
+                          ))}
+                        </List>
+                      </Dd>
+                    )}
+                  </>
+                )
+                }
+              </DescriptionListGroup>
+            </DescriptionList>
+            {showEditButton && (
+              <SystemPurposeEditModal
+                key={name}
+                isOpen={editing}
+                orgId={orgId}
+                closeModal={() => setEditing(false)}
+                name={name}
+                id={details.id}
+                {...sysPurposeProps}
+                type={sysPurposeCardType}
+              />
+            )}
+          </CardBody>
+        </CardExpandableContent>
       </Card>
     </GridItem>
   );
@@ -167,10 +193,24 @@ SystemPurposeCard.propTypes = {
       edit_hosts: PropTypes.bool,
     }),
   }),
+  akDetails: PropTypes.shape({
+    name: PropTypes.string,
+    organization_id: PropTypes.number,
+    id: PropTypes.number,
+    purpose_usage: PropTypes.string,
+    purpose_role: PropTypes.string,
+    release_version: PropTypes.string,
+    service_level: PropTypes.string,
+    purpose_addons: PropTypes.arrayOf(PropTypes.string),
+    permissions: PropTypes.shape({
+      edit_activation_keys: PropTypes.bool,
+    }),
+  }),
 };
 
 SystemPurposeCard.defaultProps = {
   hostDetails: {},
+  akDetails: {},
 };
 
 export default SystemPurposeCard;

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

@@ -3,4 +3,10 @@
   .pf-c-label {
     font-size: smaller;
   }
+}
+
+#system-purpose-card {
+  .pf-c-card__header-toggle {
+    margin-top: -2px;
+  }
 }

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

@@ -4,3 +4,5 @@ export const defaultServiceLevels = ['Self-Support', 'Standard', 'Premium'];
 
 export const ORGANIZATION = 'ORGANIZATION';
 export const AVAILABLE_RELEASE_VERSIONS = 'AVAILABLE_RELEASE_VERSIONS';
+
+export const RELEASES = 'RELEASES';