katello 4.6.2.1 → 4.7.0.rc1

data/webpack/components/Bookmark/index.js

@@ -37,6 +37,7 @@ const Bookmark = ({
   const dropDownItems = [
     ...results.map(({ name, id, query }) => (
       <DropdownItem
+        ouiaId={`bookmarkItem-${id}`}
         onClick={() => setSelectItem(query)}
         key={id}
         tooltip={query}
@@ -46,8 +47,9 @@ const Bookmark = ({
   ];
   if (showActions) {
     dropDownItems.push(
-      <DropdownSeparator key="separator" />,
+      <DropdownSeparator key="separator" ouiaId="bookmark-separator" />,
       <DropdownItem
+        ouiaId="add-bookmark"
         onClick={() => {
           setDropdownOpen(false);
           setModalOpen(true);
@@ -63,9 +65,11 @@ const Bookmark = ({
   return (
     <>
       <Dropdown
+        ouiaId="bookmark-dropdown"
         aria-label="bookmark-dropdown"
         toggle={
           <DropdownToggle
+            ouiaId="bookmark-toggle"
             isDisabled={isDisabled || status !== STATUS.RESOLVED}
             onToggle={setDropdownOpen}
             id="toggle-id"

data/webpack/components/Content/Details/ContentDetails.js

@@ -36,7 +36,7 @@ const ContentDetails = (props) => {
         loading={loading}
         loadingText={__('Loading')}
       >
-        <TabContainer id="content-tabs-container" defaultActiveKey={1}>
+        <TabContainer id="content-tabs-container" defaultActiveKey={1} style={{ margin: '0', padding: '0' }}>
           <Grid>
             <Row>
               <Col sm={12}>

data/webpack/components/Content/Details/__tests__/__snapshots__/ContentDetails.test.js.snap

@@ -10,6 +10,12 @@ exports[`Content Details Info should render and contain appropriate components 1
     <ForwardRef
       defaultActiveKey={1}
       id="content-tabs-container"
+      style={
+        Object {
+          "margin": "0",
+          "padding": "0",
+        }
+      }
     >
       <Grid
         bsClass="container"

data/webpack/components/EditableSwitch.js

@@ -16,6 +16,7 @@ const EditableSwitch = ({
     <Switch
       id={identifier}
       aria-label={identifier}
+      ouiaId={`switch-${identifier}`}
       isChecked={value}
       onChange={onSwitch}
       disabled={disabled}

data/webpack/components/EditableTextInput/EditableTextInput.js

@@ -76,7 +76,7 @@ const EditableTextInput = ({
     <Split>
       <SplitItem>
         {textArea ?
-          (<TextArea {...inputProps} aria-label={`${attribute} text area`} ouiaId={ouiaId} />) :
+          (<TextArea {...inputProps} aria-label={`${attribute} text area`} />) :
           (<TextInput
             {...inputProps}
             type={(isPassword && !showPassword) ? 'password' : 'text'}
@@ -120,10 +120,10 @@ const EditableTextInput = ({
     <Split>
       <SplitItem>
         {inputValue ?
-          <Text aria-label={`${attribute} text value`} component={component}>
+          <Text ouiaId={`${attribute}-text-value`} aria-label={`${attribute} text value`} component={component}>
             {editing ? inputValue : passwordPlaceholder || inputValue}
           </Text> :
-          <Text className="textInput-placeholder" aria-label={`${attribute} text value`} component={component}>
+          <Text ouiaId={`${attribute}-text-value`} className="textInput-placeholder" aria-label={`${attribute} text value`} component={component}>
             {passwordPlaceholder || placeholder}
           </Text>}
       </SplitItem >

data/webpack/components/Errata/errataHelpers.js

@@ -0,0 +1,33 @@
+export const errataStatusContemplation = (errataStatus) => {
+  // from backend errata_status.rb:
+  // NEEDED_SECURITY_ERRATA = 3
+  // NEEDED_ERRATA = 2
+  // UNKNOWN = 1
+  // UP_TO_DATE = 0
+  const neededErrata = ([2, 3].includes(Number(errataStatus)));
+  const allUpToDate = (errataStatus === 0);
+  const otherErrataStatus = (!allUpToDate && !neededErrata);
+
+  return {
+    neededErrata,
+    allUpToDate,
+    otherErrataStatus,
+  };
+};
+
+export const friendlyErrataStatus = (errataStatus) => {
+  switch (errataStatus) {
+  case 0:
+    return 'All up to date';
+  case 1:
+    return 'Unknown';
+  // eslint-disable-next-line no-sequences
+  case 2:
+  case 3:
+    return 'Needed';
+  default:
+    return 'Unknown';
+  }
+};
+
+export default errataStatusContemplation;

data/webpack/components/Errata/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableText } from '@patternfly/react-table';
-import { Tooltip } from '@patternfly/react-core';
+import { Tooltip, ToggleGroupItem } from '@patternfly/react-core';
 import {
   chart_color_black_500 as pfBlack,
   chart_color_gold_400 as pfGold,
@@ -17,9 +17,11 @@ import {
 } from '@patternfly/react-icons';
 import { TranslatedAnchor } from '../Table/components/TranslatedPlural';
 
-export const ErrataMapper = ({ data, id }) => data.map(({ x: type, y: count }) => <ErrataSummary count={count} type={type} key={`${count} ${type}`} id={id} />);
+export const ErrataMapper = ({ data, id, errataCategory }) =>
+  data.map(({ x: type, y: count }) =>
+    <ErrataSummary count={count} type={type} key={`${count} ${type}`} id={id} errataCategory={errataCategory} />);
 
-export const ErrataSummary = ({ type, count }) => {
+export const ErrataSummary = ({ type, count, errataCategory }) => {
   let ErrataIcon;
   let label;
   let url;
@@ -33,7 +35,7 @@ export const ErrataSummary = ({ type, count }) => {
       <TranslatedAnchor
         id="errata-card-security-count"
         style={{ marginLeft: '0.4rem' }}
-        href="#/Content/errata?type=security"
+        href={`#/Content/errata?type=security&show=${errataCategory}`}
         count={count}
         plural="security advisories"
         singular="security advisory"
@@ -51,7 +53,7 @@ export const ErrataSummary = ({ type, count }) => {
       <TranslatedAnchor
         id="errata-card-bugfix-count"
         style={{ marginLeft: '0.4rem' }}
-        href="#/Content/errata?type=bugfix"
+        href={`#/Content/errata?type=bugfix&show=${errataCategory}`}
         count={count}
         plural="bug fixes"
         singular="bug fix"
@@ -69,7 +71,7 @@ export const ErrataSummary = ({ type, count }) => {
       <TranslatedAnchor
         id="errata-card-enhancement-count"
         style={{ marginLeft: '0.4rem' }}
-        href="#/Content/errata?type=enhancement"
+        href={`#/Content/errata?type=enhancement&show=${errataCategory}`}
         count={count}
         plural="enhancements"
         singular="enhancement"
@@ -100,15 +102,18 @@ export const ErrataSummary = ({ type, count }) => {
 ErrataSummary.propTypes = {
   type: PropTypes.string.isRequired,
   count: PropTypes.number.isRequired,
+  errataCategory: PropTypes.string.isRequired,
 };
 
 export const ErrataType = ({ type }) => {
   let ErrataIcon;
   let label;
+  let verticalAlign = '-0.125em';
   switch (type) {
   case 'security':
     label = __('Security');
     ErrataIcon = SecurityIcon;
+    verticalAlign = '-0.2em';
     break;
   case 'recommended':
   case 'bugfix':
@@ -127,9 +132,11 @@ export const ErrataType = ({ type }) => {
 
   return (
     <TableText wrapModifier="nowrap">
-      <Tooltip content={label} >
-        <ErrataIcon style={{ marginRight: '4px' }} />
-      </Tooltip>
+      <span style={{ marginRight: '4px' }}>
+        <Tooltip content={label}>
+          <ErrataIcon style={{ verticalAlign }} />
+        </Tooltip>
+      </span>
       {label}
     </TableText>
   );
@@ -166,9 +173,11 @@ export const ErrataSeverity = ({ severity }) => {
   return (
     <TableText wrapModifier="nowrap">
       {color &&
-        <Tooltip content={label} >
-          <SecurityIcon color={color} />
-        </Tooltip>
+        <span style={{ marginRight: '4px' }}>
+          <Tooltip content={label} >
+            <SecurityIcon color={color} style={{ verticalAlign: '-0.2em' }} />
+          </Tooltip>
+        </span>
       }
       {label}
     </TableText>
@@ -178,3 +187,27 @@ export const ErrataSeverity = ({ severity }) => {
 ErrataSeverity.propTypes = {
   severity: PropTypes.string.isRequired,
 };
+
+export const ErrataToggleGroupItem = ({
+  text, tooltipText, isSelected, onChange, ...toggleGroupItemProps
+}) => (
+  <Tooltip
+    content={tooltipText}
+    position="top"
+    enableFlip
+  >
+    <ToggleGroupItem
+      text={text}
+      isSelected={isSelected}
+      onChange={onChange}
+      {...toggleGroupItemProps}
+    />
+  </Tooltip>
+);
+
+ErrataToggleGroupItem.propTypes = {
+  text: PropTypes.string.isRequired,
+  tooltipText: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+};

data/webpack/components/Loading.js

@@ -6,31 +6,41 @@ import {
   EmptyState,
   EmptyStateIcon,
   Spinner,
+  Skeleton,
 } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-const Loading = ({ size, showText, loadingText }) => (
-  <Bullseye>
-    <EmptyState>
-      <EmptyStateIcon size={size} variant="container" component={Spinner} />
-      {showText && (
+const Loading = ({
+  size, showText, loadingText, skeleton,
+}) => {
+  if (skeleton) {
+    return <Skeleton height="100%" />;
+  }
+  return (
+    <Bullseye>
+      <EmptyState>
+        <EmptyStateIcon size={size} variant="container" component={Spinner} />
+        {showText && (
         <Title size={size} headingLevel="h4" ouiaId="loading-title">
           {loadingText || __('Loading')}
         </Title>)}
-    </EmptyState>
-  </Bullseye>
-);
+      </EmptyState>
+    </Bullseye>
+  );
+};
 
 Loading.propTypes = {
   size: PropTypes.string,
   showText: PropTypes.bool,
   loadingText: PropTypes.string,
+  skeleton: PropTypes.bool,
 };
 
 Loading.defaultProps = {
   size: 'lg',
   showText: true,
   loadingText: null,
+  skeleton: false,
 };
 
 

data/webpack/components/Packages/index.js

@@ -7,12 +7,12 @@ import {
 } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
 
-export const PackagesStatus = ({ upgradable_version: upgradableVersion }) => {
+const PackagesStatus = ({ upgradable_versions: upgradableVersions }) => {
   let PackagesIcon;
   let label;
   let color;
 
-  if (upgradableVersion == null) {
+  if (upgradableVersions === null) {
     color = 'green';
     label = __('Up-to date');
     PackagesIcon = CheckIcon;
@@ -31,30 +31,14 @@ export const PackagesStatus = ({ upgradable_version: upgradableVersion }) => {
 };
 
 PackagesStatus.propTypes = {
-  upgradable_version: PropTypes.string,
+  upgradable_versions: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ])),
 };
 
 PackagesStatus.defaultProps = {
-  upgradable_version: null,
+  upgradable_versions: null,
 };
 
-export const PackagesLatestVersion = ({ name, upgradable_version: upgradableVersion }) => {
-  let label;
-
-  if (upgradableVersion == null) {
-    label = '';
-  } else {
-    label = upgradableVersion.replace(`${name}-`, '');
-  }
-
-  return <TableText wrapModifier="nowrap">{label || '—'} </TableText>;
-};
-
-PackagesLatestVersion.propTypes = {
-  name: PropTypes.string.isRequired,
-  upgradable_version: PropTypes.string,
-};
-
-PackagesLatestVersion.defaultProps = {
-  upgradable_version: null,
-};
+export default PackagesStatus;

data/webpack/components/RoutedTabs/index.js

@@ -18,6 +18,7 @@ const RoutedTabs = ({
     <>
       <Tabs
         activeKey={currentTabFromUrl}
+        ouiaId="routed-tabs"
         className="margin-0-24"
       >
         {tabs.map(({ key, title }) => (

data/webpack/components/Search/Search.js

@@ -12,6 +12,25 @@ import {
   AUTOSEARCH_WHILE_TYPING,
 } from '../../scenes/Settings/SettingsConstants';
 
+// Don't trigger auto-search until you've typed an operator and begun to type a value
+const searchContainsOperator = (search = '') => {
+  const operators = ['>=', '<=', '>', '<', '~', '^', '!^', '=', '!=', '~', '!~'];
+  return operators.some(operator => search.includes(operator) && !search.trim().endsWith(operator));
+};
+// Apply the above function only to the last 'key = value' pair, if there are multiple
+const allowSearch = (originalSearch = '') => {
+  const search = originalSearch.toLowerCase().trim();
+  // find the last occurrence of 'or' or 'and'
+  const lastOr = originalSearch.lastIndexOf(' or ');
+  const lastAnd = originalSearch.lastIndexOf(' and ');
+  if (lastOr === -1 && lastAnd === -1) {
+    return searchContainsOperator(search);
+  }
+  const winningOperator = lastOr > lastAnd ? ' or ' : ' and ';
+  const lastSearch = search.split(winningOperator);
+  return searchContainsOperator(lastSearch[lastSearch.length - 1]);
+};
+
 const Search = ({
   onSearch,
   updateSearchQuery,
@@ -61,8 +80,7 @@ const Search = ({
         })));
       }
     }
-
-    if (autoSearchEnabled && patternfly4) {
+    if (autoSearchEnabled && patternfly4 && allowSearch(searchTerm)) {
       onSearch(searchTerm || '');
     }
   };

data/webpack/components/Search/__tests__/search.test.js

@@ -77,8 +77,8 @@ test('search function is called when search is typed into with autosearch', asyn
   const mockSearch = jest.fn();
 
   const { getByLabelText } = renderWithRedux(<Search {...{ ...props, onSearch: mockSearch }} />);
-  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: 'foo' } });
-  await patientlyWaitFor(() => expect(mockSearch.mock.calls).toHaveLength(2));
+  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: 'name = foo' } });
+  await patientlyWaitFor(() => expect(mockSearch.mock.calls).toHaveLength(1));
 
   assertNockRequest(autoSearchScope);
   assertNockRequest(autocompleteScope, done);
@@ -98,7 +98,7 @@ test('search function is called by clicking search button without autosearch', a
     expect(searchButton).toBeInTheDocument();
   });
   searchButton.click();
-  expect(mockSearch.mock.calls).toHaveLength(3);
+  expect(mockSearch.mock.calls).toHaveLength(1);
   assertNockRequest(autoSearchScope);
   assertNockRequest(autocompleteScope, done);
 });

data/webpack/components/Table/EmptyStateMessage.js

@@ -86,7 +86,7 @@ const EmptyStateMessage = ({
         <EmptyStateBody>
           {emptyStateBody}
         </EmptyStateBody>
-        {showPrimaryAction ? actionButton : null}
+        {showPrimaryAction && actionButton}
         {showSecondaryAction &&
           <EmptyStateSecondaryActions>
             <Button variant="link">

data/webpack/components/Table/PageControls.js

@@ -12,6 +12,7 @@ const PageControls = ({
   return (
     <FlexItem align={{ default: 'alignRight' }}>
       <Pagination
+        ouiaId={`pagination-${variant}`}
         key={variant}
         itemCount={total}
         itemsStart={firstIndex}

data/webpack/components/Table/TableHooks.js

@@ -281,6 +281,10 @@ export const useTableSort = ({
   const [activeSortColumn, setActiveSortColumn] = useState(translatedInitialSortColumnName);
   const [activeSortDirection, setActiveSortDirection] = useState('asc');
 
+  if (!allColumns.includes(activeSortColumn)) {
+    setActiveSortColumn(translatedInitialSortColumnName);
+  }
+
   // Patternfly sort function
   const onSort = (_event, index, direction) => {
     setActiveSortColumn(allColumns?.[index]);

data/webpack/components/Table/TableWrapper.js

@@ -42,7 +42,7 @@ const TableWrapper = ({
   selectedResults,
   clearSelectedResults,
   emptySearchBody,
-  disableSearch,
+  hideSearch,
   nodesBelowSearch,
   bookmarkController,
   readOnlyBookmarks,
@@ -101,8 +101,8 @@ const TableWrapper = ({
     let paramsOverride;
     const activeFiltersHaveChanged = hasChanged(activeFilters, prevActiveFilters.current);
     const searchQueryHasChanged = hasChanged(searchQuery, prevSearch.current);
-    if (searchQuery && !disableSearch) paramsOverride = { search: searchQuery };
-    if (!disableSearch && (searchQueryHasChanged || activeFiltersHaveChanged)) {
+    if (searchQuery && !hideSearch) paramsOverride = { search: searchQuery };
+    if (!hideSearch && (searchQueryHasChanged || activeFiltersHaveChanged)) {
       // Reset page back to 1 when filter or search changes
       prevSearch.current = searchQuery;
       prevActiveFilters.current = activeFilters;
@@ -118,7 +118,7 @@ const TableWrapper = ({
       fetchWithParams();
     }
   }, [
-    disableSearch,
+    hideSearch,
     activeFilters,
     dispatch,
     fetchItems,
@@ -184,7 +184,7 @@ const TableWrapper = ({
             />
           </FlexItem>
         }
-        {!disableSearch && !hideToolbar &&
+        {!hideSearch && !hideToolbar &&
           <FlexItem>
             <Search
               isDisabled={unresolvedStatusOrNoRows && !searchQuery}
@@ -304,7 +304,7 @@ TableWrapper.propTypes = {
   areAllRowsOnPageSelected: PropTypes.func,
   areAllRowsSelected: PropTypes.func,
   emptySearchBody: PropTypes.string,
-  disableSearch: PropTypes.bool,
+  hideSearch: PropTypes.bool,
   nodesBelowSearch: PropTypes.node,
   bookmarkController: PropTypes.string,
   readOnlyBookmarks: PropTypes.bool,
@@ -334,7 +334,7 @@ TableWrapper.defaultProps = {
   areAllRowsOnPageSelected: noop,
   areAllRowsSelected: noop,
   emptySearchBody: __('Try changing your search settings.'),
-  disableSearch: false,
+  hideSearch: false,
   nodesBelowSearch: null,
   bookmarkController: undefined,
   readOnlyBookmarks: false,

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

@@ -41,6 +41,7 @@ const TypeAheadInput = ({
         <Button
           variant={autoSearchEnabled ? 'plain' : 'control'}
           className="search-clear"
+          ouiaId="search-clear-button"
           onClick={clearSearch}
         >
           <TimesIcon />

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

@@ -25,6 +25,7 @@ const TypeAheadItems = ({
     const { onClick, ...dropdownProps } = itemProps;
     return (
       <DropdownItem
+        ouiaId={text}
         {...dropdownProps}
         component={
           <button onClick={onClick}>{text}</button>
@@ -41,6 +42,7 @@ const TypeAheadItems = ({
       isOpen={isOpen}
       dropdownItems={buildDropdownItems()}
       className="typeahead-dropdown"
+      ouiaId="typeahead-dropdown"
     />
   );
 };

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

@@ -50,7 +50,7 @@ const TypeAheadSearch = ({
             controller={bookmarkController}
           />}
         {(!autoSearchEnabled && !isTextInput) &&
-          <Button aria-label="search button" variant="control" onClick={() => onSearch(inputValue)}>
+          <Button ouiaId="search-button" aria-label="search button" variant="control" onClick={() => onSearch(inputValue)}>
             <SearchIcon />
           </Button>}
       </>

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

@@ -138,6 +138,7 @@ const ChangeHostCVModal = ({
   const modalActions = ([
     <Button
       key="add"
+      ouiaId="change-host-cv-modal-add-button"
       variant="primary"
       onClick={handleSave}
       isDisabled={!canSave}
@@ -145,7 +146,7 @@ const ChangeHostCVModal = ({
     >
       {__('Save')}
     </Button>,
-    <Button key="cancel" variant="link" onClick={handleModalClose}>
+    <Button key="cancel" ouiaId="change-host-cv-modal-cancel-button" variant="link" onClick={handleModalClose}>
       Cancel
     </Button>,
   ]);
@@ -159,6 +160,7 @@ const ChangeHostCVModal = ({
       position="top"
       actions={modalActions}
       id="change-host-cv-modal"
+      ouiaId="change-host-cv-modal"
     >
       {contentViewsInEnvStatus === STATUS.RESOLVED &&
         !!selectedEnvForHost.length && contentViewsInEnv.length === 0 &&

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

@@ -53,6 +53,7 @@ const HostContentViewDetails = ({
   const dropdownItems = [
     <DropdownItem
       aria-label="change-host-content-view"
+      ouiaId="change-host-content-view"
       key="change-host-content-view"
       component="button"
       onClick={openModal}
@@ -63,7 +64,7 @@ const HostContentViewDetails = ({
 
   return (
     <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
-      <Card isHoverable>
+      <Card ouiaId="content-view-details-card">
         <CardHeader>
           <Flex
             alignItems={{ default: 'alignItemsCenter' }}