katello 4.5.0.rc2 → 4.6.0.rc2

data/webpack/components/TypeAhead/TypeAhead.js

@@ -2,14 +2,15 @@ import React, { useState, useEffect } from 'react';
 import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-
+import { useDispatch, useSelector } from 'react-redux';
 import TypeAheadSearch from './pf3Search/TypeAheadSearch';
 // eslint-disable-next-line import/no-named-default
 import { default as TypeAheadSearchPf4 } from './pf4Search/TypeAheadSearch';
 import { getActiveItems } from './helpers/helpers';
-
 import './TypeAhead.scss';
 import useDebounce from '../../utils/useDebounce';
+import { selectHostDetailsClearSearch } from '../extensions/HostDetails/HostDetailsSelectors';
+
 
 const TypeAhead = ({
   items,
@@ -17,7 +18,6 @@ const TypeAhead = ({
   onInputUpdate,
   onSearch,
   actionText,
-  initialInputValue,
   patternfly4,
   autoSearchEnabled,
   autoSearchDelay,
@@ -26,10 +26,12 @@ const TypeAhead = ({
   placeholder,
   isTextInput,
   setTextInputValue,
+  initialInputValue,
 }) => {
   const [inputValue, setInputValue] = useState(initialInputValue);
-
   const debouncedValue = useDebounce(inputValue, autoSearchDelay);
+  const dispatch = useDispatch();
+  const existingClearSearch = useSelector(selectHostDetailsClearSearch);
   useEffect(
     () => {
       onInputUpdate(debouncedValue);
@@ -37,21 +39,34 @@ const TypeAhead = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [debouncedValue],
   );
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return function cleanupClearSearch() {
+      dispatch({
+        type: 'SET_CLEAR_SEARCH',
+        payload: {},
+      });
+    };
+  }, [dispatch]);
+
+  const clearSearch = () => {
+    setInputValue('');
+    onSearch('');
+  };
 
   const handleStateChange = ({ inputValue: value }) => {
     if (typeof value === 'string') {
       setInputValue(value);
       if (setTextInputValue) setTextInputValue(value);
     }
+    if (typeof existingClearSearch !== 'function') {
+      dispatch({
+        type: 'SET_CLEAR_SEARCH',
+        payload: clearSearch,
+      });
+    }
   };
-
-  const clearSearch = () => {
-    setInputValue('');
-    onSearch('');
-  };
-
   const activeItems = getActiveItems(items);
-
   return (
     <Downshift
       onStateChange={handleStateChange}

data/webpack/components/TypeAhead/pf3Search/TypeAheadItems.js

@@ -6,7 +6,7 @@ import { commonItemPropTypes } from '../helpers/commonPropTypes';
 const TypeAheadItems = ({
   items, activeItems, getItemProps, highlightedIndex,
 }) => (
-  <Dropdown.Menu className="typeahead-dropdown">
+  <Dropdown.Menu className="typeahead-dropdown" ouiaId="typeahead-dropdown">
     {items.map(({ text, type, disabled = false }, index) => {
       if (type === 'header') {
         return (

data/webpack/components/TypeAhead/pf4Search/TypeAheadInput.js

@@ -30,6 +30,7 @@ const TypeAheadInput = ({
         ref={inputRef}
         onFocus={onInputFocus}
         aria-label="text input for search"
+        ouiaId="type-ahead-input"
         onChange={onChangeWrapper}
         type="text"
         iconVariant={autoSearchEnabled && !isTextInput ? 'search' : undefined}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { DropdownItem } from '@patternfly/react-core';
-import { CubeIcon } from '@patternfly/react-icons';
+import { CubeIcon, UndoIcon } from '@patternfly/react-icons';
 
 import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
@@ -13,6 +13,13 @@ const HostActionsBar = () => {
 
   return (
     <>
+      <DropdownItem
+        key="katello-legacy-contenthost-ui"
+        href={foremanUrl(`/content_hosts/${hostDetails?.id}`)}
+        icon={<UndoIcon />}
+      >
+        {__('Legacy content host UI')}
+      </DropdownItem>
       <DropdownItem
         key="katello-change-host-content-source"
         href={foremanUrl(`/change_host_content_source?host_id=${hostDetails?.id}`)}

data/webpack/components/extensions/HostDetails/Cards/ContentViewDetailsCard/ChangeHostCVModal.js

@@ -168,7 +168,8 @@ const ChangeHostCVModal = ({
           title={__('No content views available for the selected environment')}
           style={{ marginBottom: '1rem' }}
         >
-          {__('View the Content Views page to manage and promote content views, or select a different environment.')}
+          <a href="/content_views">{__('View the Content Views page')}</a>
+          {__(' to manage and promote content views, or select a different environment.')}
         </Alert>
       }
       <EnvironmentPaths

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);
 
@@ -122,10 +124,9 @@ export const HostCollectionsModal = ({
       {adding ? __('Add') : __('Remove')}
     </Button>,
     <Button key="cancel" variant="link" onClick={handleModalCancel}>
-      Cancel
+      {__('Cancel')}
     </Button>,
   ]);
-
   return (
     <Modal
       isOpen={isOpen}
@@ -158,6 +159,9 @@ export const HostCollectionsModal = ({
           updateSearchQuery,
           selectedCount,
           selectNone,
+          showPrimaryAction,
+          primaryActionTitle,
+          primaryActionLink,
         }
         }
         ouiaId="host-collections-table"
@@ -168,6 +172,7 @@ export const HostCollectionsModal = ({
         variant={TableVariant.compact}
         {...selectAll}
         displaySelectAllCheckbox={results?.length > 0}
+        requestKey={adding ? AVAILABLE_HOST_COLLECTIONS_KEY : REMOVABLE_HOST_COLLECTIONS_KEY}
       >
         <Thead>
           <Tr>

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,
+});

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

@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { STATUS } from 'foremanReact/constants';
+import {
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListDescription,
+  DescriptionListTerm,
+  Flex,
+  FlexItem,
+  GridItem,
+  Label,
+  List,
+  ListItem,
+  Tooltip,
+  Skeleton,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import './SystemPurposeCard.scss';
+import SystemPurposeEditModal from './SystemPurposeEditModal';
+import { selectHostDetailsStatus } from '../../HostDetailsSelectors';
+import { hasRequiredPermissions, hostIsNotRegistered } from '../../hostDetailsHelpers';
+
+const SystemPurposeCard = ({ hostDetails }) => {
+  const showEditButton = hasRequiredPermissions(['edit_hosts'], hostDetails?.permissions);
+  const orgId = hostDetails.organization_id;
+  const subscriptionFacetAttributes = hostDetails?.subscription_facet_attributes;
+  const {
+    purposeRole, purposeUsage, purposeAddons, releaseVersion, serviceLevel,
+  } = propsToCamelCase(subscriptionFacetAttributes ?? {});
+  const sysPurposeProps = {
+    purposeRole,
+    purposeUsage,
+    purposeAddons,
+    releaseVersion,
+    serviceLevel,
+  };
+  const hostDetailsStatus = useSelector(selectHostDetailsStatus);
+  const dataIsLoading = hostDetailsStatus === STATUS.PENDING;
+
+  const [editing, setEditing] = useState(false);
+  if (!hostDetails?.id) {
+    return (
+      <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
+        <Card isHoverable ouiaId="system-purpose-card">
+          <Skeleton />
+        </Card>
+      </GridItem>
+    );
+  }
+
+  if (hostIsNotRegistered({ hostDetails })) return null;
+
+  return (
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3}>
+      <Card isHoverable ouiaId="system-purpose-card">
+        <CardHeader>
+          <Flex
+            alignItems={{ default: 'alignItemsCenter' }}
+            justifyContent={{ default: 'justifyContentSpaceBetween' }}
+            style={{ width: '100%' }}
+          >
+            <FlexItem>
+              <Flex
+                alignItems={{ default: 'alignItemsCenter' }}
+                justifyContent={{ default: 'justifyContentSpaceBetween' }}
+              >
+                <FlexItem style={{ marginRight: '0.5em' }}>
+                  <CardTitle>{__('System purpose')}</CardTitle>
+                </FlexItem>
+                <FlexItem>
+                  <Tooltip
+                    content={__('System purpose allows you to set the system\'s intended use on your network and improves the reporting of usage in Subscription Watch.')}
+                    position="top"
+                    enableFlip
+                    isContentLeftAligned
+                  >
+                    <OutlinedQuestionCircleIcon style={{ marginTop: '7px' }} color="gray" />
+                  </Tooltip>
+                </FlexItem>
+              </Flex>
+            </FlexItem>
+            {showEditButton && (
+              <FlexItem>
+                <Button variant="link" isSmall ouiaId="syspurpose-edit-button" onClick={() => setEditing(val => !val)}>{__('Edit')}</Button>
+              </FlexItem>)
+            }
+          </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
+              isOpen={editing}
+              orgId={orgId}
+              closeModal={() => setEditing(false)}
+              hostName={hostDetails.name}
+              hostId={hostDetails.id}
+              {...sysPurposeProps}
+            />
+          )}
+        </CardBody>
+      </Card>
+    </GridItem>
+  );
+};
+
+SystemPurposeCard.propTypes = {
+  hostDetails: PropTypes.shape({
+    name: PropTypes.string,
+    organization_id: PropTypes.number,
+    id: PropTypes.number,
+    subscription_facet_attributes: PropTypes.shape({
+      installed_products: PropTypes.arrayOf(PropTypes.shape({
+        productId: PropTypes.string,
+        productName: PropTypes.string,
+      })),
+    }),
+    permissions: PropTypes.shape({
+      edit_hosts: PropTypes.bool,
+    }),
+  }),
+};
+
+SystemPurposeCard.defaultProps = {
+  hostDetails: {},
+};
+
+export default SystemPurposeCard;

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

@@ -0,0 +1,6 @@
+.system-purpose-card-body {
+  font-size: small;
+  .pf-c-label {
+    font-size: smaller;
+  }
+}

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

@@ -0,0 +1,6 @@
+export const defaultUsages = ['Production', 'Development/Test', 'Disaster Recovery'];
+export const defaultRoles = ['Red Hat Enterprise Linux Server', 'Red Hat Enterprise Linux Workstation', 'Red Hat Enterprise Linux Compute Node'];
+export const defaultServiceLevels = ['Self-Support', 'Standard', 'Premium'];
+
+export const ORGANIZATION = 'ORGANIZATION';
+export const AVAILABLE_RELEASE_VERSIONS = 'AVAILABLE_RELEASE_VERSIONS';