katello 4.4.1 → 4.5.0

data/webpack/components/Bookmark/index.js

@@ -4,14 +4,14 @@ import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { STATUS } from 'foremanReact/constants';
 import { Dropdown, DropdownItem, DropdownToggle, DropdownSeparator } from '@patternfly/react-core';
-import { CaretDownIcon } from '@patternfly/react-icons';
+import { OutlinedBookmarkIcon } from '@patternfly/react-icons';
 import { getBookmarks } from './BookmarkActions';
 import { selectBookmarks, selectBookmarkStatus } from './BookmarkSelectors';
 import './Bookmark.scss';
 import AddBookmarkModal from './AddBookmarkModal';
 
 const Bookmark = ({
-  selectItem, selectedItem, controller = '', isDisabled,
+  selectItem, selectedItem, controller = '', isDisabled, readOnlyBookmarks,
 }) => {
   const dispatch = useDispatch();
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -20,6 +20,7 @@ const Bookmark = ({
     useSelector(state => selectBookmarks(state, controller), shallowEqual);
   const status =
     useSelector(state => selectBookmarkStatus(state, controller), shallowEqual);
+  const showActions = !readOnlyBookmarks;
 
   useEffect(() => {
     dispatch(getBookmarks(controller));
@@ -31,6 +32,7 @@ const Bookmark = ({
     }
     setDropdownOpen(false);
   };
+  if (!results.length && readOnlyBookmarks) return null;
 
   const dropDownItems = [
     ...results.map(({ name, id, query }) => (
@@ -41,16 +43,21 @@ const Bookmark = ({
       >
         {name}
       </DropdownItem >)),
-    <DropdownSeparator key="separator" />,
-    <DropdownItem
-      onClick={() => {
-        setDropdownOpen(false);
-        setModalOpen(true);
-      }}
-      key="ADD_BOOKMARK"
-    >
-      {selectedItem ? __('Bookmark this search') : __('Add new bookmark')}
-    </DropdownItem >];
+  ];
+  if (showActions) {
+    dropDownItems.push(
+      <DropdownSeparator key="separator" />,
+      <DropdownItem
+        onClick={() => {
+          setDropdownOpen(false);
+          setModalOpen(true);
+        }}
+        key="ADD_BOOKMARK"
+      >
+        {selectedItem ? __('Bookmark this search') : __('Add new bookmark')}
+      </DropdownItem >,
+    );
+  }
 
 
   return (
@@ -62,9 +69,8 @@ const Bookmark = ({
             isDisabled={isDisabled || status !== STATUS.RESOLVED}
             onToggle={setDropdownOpen}
             id="toggle-id"
-            toggleIndicator={CaretDownIcon}
           >
-            <i className="fas fa-bookmark" />
+            <OutlinedBookmarkIcon />
           </DropdownToggle>
         }
         isOpen={dropdownOpen}
@@ -85,10 +91,12 @@ Bookmark.propTypes = {
   controller: PropTypes.string.isRequired,
   selectItem: PropTypes.func.isRequired,
   selectedItem: PropTypes.string.isRequired,
+  readOnlyBookmarks: PropTypes.bool,
 };
 
 Bookmark.defaultProps = {
   isDisabled: undefined,
+  readOnlyBookmarks: false,
 };
 
 export default Bookmark;

data/webpack/components/EditableTextInput/EditableTextInput.js

@@ -17,7 +17,7 @@ const PASSWORD_MASK = '••••••••';
 
 const EditableTextInput = ({
   onEdit, value, textArea, attribute, placeholder, isPassword, hasPassword,
-  component, currentAttribute, setCurrentAttribute, disabled,
+  component, currentAttribute, setCurrentAttribute, disabled, ouiaId,
 }) => {
   const [inputValue, setInputValue] = useState(value);
   const [editing, setEditing] = useState(false);
@@ -76,11 +76,17 @@ const EditableTextInput = ({
     <Split>
       <SplitItem>
         {textArea ?
-          (<TextArea {...inputProps} aria-label={`${attribute} text area`} />) :
-          (<TextInput {...inputProps} type={(isPassword && !showPassword) ? 'password' : 'text'} aria-label={`${attribute} text input`} />)}
+          (<TextArea {...inputProps} aria-label={`${attribute} text area`} ouiaId={ouiaId} />) :
+          (<TextInput
+            {...inputProps}
+            type={(isPassword && !showPassword) ? 'password' : 'text'}
+            aria-label={`${attribute} text input`}
+            ouiaId={ouiaId}
+          />)}
       </SplitItem>
       <SplitItem>
         <Button
+          ouiaId={`submit-button-${attribute}`}
           aria-label={`submit ${attribute}`}
           variant="plain"
           onClick={onSubmit}
@@ -89,13 +95,19 @@ const EditableTextInput = ({
         </Button>
       </SplitItem>
       <SplitItem>
-        <Button aria-label={`clear ${attribute}`} variant="plain" onClick={onClear}>
+        <Button ouiaId={`clear-button-${attribute}`} aria-label={`clear ${attribute}`} variant="plain" onClick={onClear}>
           <TimesIcon />
         </Button>
       </SplitItem>
       {isPassword ?
         <SplitItem>
-          <Button aria-label={`show-password ${attribute}`} variant="plain" isDisabled={!inputValue?.length} onClick={toggleShowPassword}>
+          <Button
+            ouiaId={`show-button-${attribute}`}
+            aria-label={`show-password ${attribute}`}
+            variant="plain"
+            isDisabled={!inputValue?.length}
+            onClick={toggleShowPassword}
+          >
             {showPassword ?
               (<EyeSlashIcon />) :
               (<EyeIcon />)}
@@ -123,6 +135,7 @@ const EditableTextInput = ({
           >
             <Button
               className="foreman-edit-icon"
+              ouiaId={`edit-button-${attribute}`}
               aria-label={`edit ${attribute}`}
               variant="plain"
               onClick={onEditClick}
@@ -148,6 +161,7 @@ EditableTextInput.propTypes = {
   disabled: PropTypes.bool,
   isPassword: PropTypes.bool,
   hasPassword: PropTypes.bool,
+  ouiaId: PropTypes.string,
 };
 
 EditableTextInput.defaultProps = {
@@ -160,6 +174,7 @@ EditableTextInput.defaultProps = {
   disabled: false,
   isPassword: false,
   hasPassword: false,
+  ouiaId: undefined,
 };
 
 export default EditableTextInput;

data/webpack/components/Errata/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { TableText } from '@patternfly/react-table';
 import {
   chart_color_black_500 as pfBlack,
@@ -13,39 +14,68 @@ import {
   EnhancementIcon,
   SquareIcon,
 } from '@patternfly/react-icons';
-import PropTypes from 'prop-types';
+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 ErrataSummary = ({ type, count }) => {
   let ErrataIcon;
   let label;
-  let name;
   let url;
   let color;
   switch (type) {
   case 'security':
     label = __('Security');
     ErrataIcon = SecurityIcon;
-    name = 'security advisories';
     color = '#0066cc';
-    url = <a href="#/Content/errata?type=security"> {count} {name} </a>;
+    url = (
+      <TranslatedAnchor
+        id="errata-card-security-count"
+        style={{ marginLeft: '0.4rem' }}
+        href="#/Content/errata?type=security"
+        count={count}
+        plural="security advisories"
+        singular="security advisory"
+        zeroMsg="# security advisories"
+        ariaLabel={`${count} security advisories`}
+      />
+    );
     break;
   case 'recommended':
   case 'bugfix':
     label = __('Bugfix');
     ErrataIcon = BugIcon;
-    name = 'bug fixes';
     color = '#8bc1f7';
-    url = <a href="#/Content/errata?type=bugfix"> {count} {name} </a>;
+    url = (
+      <TranslatedAnchor
+        id="errata-card-bugfix-count"
+        style={{ marginLeft: '0.4rem' }}
+        href="#/Content/errata?type=bugfix"
+        count={count}
+        plural="bug fixes"
+        singular="bug fix"
+        zeroMsg="# bug fixes"
+        ariaLabel={`${count} bug fixes`}
+      />
+    );
     break;
   case 'enhancement':
   case 'optional':
     label = __('Enhancement');
     ErrataIcon = EnhancementIcon;
-    name = 'enhancements';
     color = '#002f5d';
-    url = <a href="#/Content/errata?type=enhancement"> {count} {name} </a>;
+    url = (
+      <TranslatedAnchor
+        id="errata-card-enhancement-count"
+        style={{ marginLeft: '0.4rem' }}
+        href="#/Content/errata?type=enhancement"
+        count={count}
+        plural="enhancements"
+        singular="enhancement"
+        zeroMsg="# enhancements"
+        ariaLabel={`${count} enhancements`}
+      />
+    );
     break;
   default:
   }

data/webpack/components/Packages/index.js

@@ -4,7 +4,6 @@ import { translate as __ } from 'foremanReact/common/I18n';
 import {
   CheckIcon,
   LongArrowAltUpIcon,
-  MinusIcon,
 } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
 
@@ -41,16 +40,14 @@ PackagesStatus.defaultProps = {
 
 export const PackagesLatestVersion = ({ name, upgradable_version: upgradableVersion }) => {
   let label;
-  let color;
 
   if (upgradableVersion == null) {
     label = '';
-    color = 'black';
   } else {
     label = upgradableVersion.replace(`${name}-`, '');
   }
 
-  return <TableText wrapModifier="nowrap">{color && <MinusIcon color={color} title={label} />} {label} </TableText>;
+  return <TableText wrapModifier="nowrap">{label || '—'} </TableText>;
 };
 
 PackagesLatestVersion.propTypes = {

data/webpack/components/Search/Search.js

@@ -22,7 +22,10 @@ const Search = ({
   getAutoCompleteParams,
   foremanApiAutoComplete,
   bookmarkController,
+  readOnlyBookmarks,
   placeholder,
+  isTextInput,
+  setTextInputValue,
 }) => {
   const [items, setItems] = useState([]);
   const dispatch = useDispatch();
@@ -48,9 +51,16 @@ const Search = ({
       }
       // Checking whether the current component is mounted before state change events
       if (!mountedRef.current) return;
-      setItems(data?.data?.filter(({ error }) => !error).map(({ label }) => ({
-        text: label.trim(),
-      })));
+      switch (true) {
+      case endpoint.includes('auto_complete_arch'):
+      case endpoint.includes('auto_complete_name'):
+        setItems(data?.data?.map(label => ({ text: label.trim() })));
+        break;
+      default:
+        setItems(data?.data?.filter(({ error }) => !error).map(({ label }) => ({
+          text: label.trim(),
+        })));
+      }
     }
 
     if (autoSearchEnabled && patternfly4) {
@@ -75,6 +85,7 @@ const Search = ({
       <TypeAhead
         autoSearchDelay={autoSearchDelay}
         bookmarkController={bookmarkController}
+        readOnlyBookmarks={readOnlyBookmarks}
         isDisabled={isDisabled}
         items={items}
         onInputUpdate={onInputUpdate}
@@ -83,6 +94,8 @@ const Search = ({
         patternfly4={patternfly4}
         autoSearchEnabled={autoSearchEnabled}
         placeholder={placeholder}
+        isTextInput={isTextInput}
+        setTextInputValue={setTextInputValue}
       />
     </div>
   );
@@ -101,7 +114,10 @@ Search.propTypes = {
     autoSearchDelay: PropTypes.number,
   }),
   bookmarkController: PropTypes.string,
+  readOnlyBookmarks: PropTypes.bool,
   placeholder: PropTypes.string,
+  isTextInput: PropTypes.bool,
+  setTextInputValue: PropTypes.func,
 };
 
 Search.defaultProps = {
@@ -114,7 +130,10 @@ Search.defaultProps = {
   },
   isDisabled: undefined,
   bookmarkController: undefined,
+  readOnlyBookmarks: false,
   placeholder: undefined,
+  isTextInput: false,
+  setTextInputValue: undefined,
 };
 
 export default Search;

data/webpack/components/SelectAllCheckbox/index.js

@@ -95,6 +95,7 @@ const SelectAllCheckbox = ({
               aria-label="Select all"
               onChange={checked => onSelectAllCheckboxChange(checked)}
               isChecked={selectionToggle}
+              isDisabled={totalCount === 0 && selectedCount === 0}
             >
               {selectedCount > 0 && `${selectedCount} selected`}
             </DropdownToggleCheckbox>,

data/webpack/components/SelectableDropdown/SelectableDropdown.js

@@ -5,7 +5,7 @@ import { ErrorCircleOIcon } from '@patternfly/react-icons';
 
 
 const SelectableDropdown = ({
-  items, title, showTitle, selected, setSelected, loading, error,
+  items, title, showTitle, selected, setSelected, loading, error, isDisabled,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const icon = () => {
@@ -40,7 +40,7 @@ const SelectableDropdown = ({
           onSelect={onSelect}
           selections={selected}
           isOpen={isOpen}
-          isDisabled={loading || error}
+          isDisabled={loading || error || isDisabled}
           toggleIcon={icon()}
         >
           {selectItems}
@@ -59,12 +59,14 @@ SelectableDropdown.propTypes = {
   // If the items are loaded dynamically, you can pass in loading or error states
   loading: PropTypes.bool,
   error: PropTypes.bool,
+  isDisabled: PropTypes.bool,
 };
 
 SelectableDropdown.defaultProps = {
   loading: false,
   error: false,
   showTitle: true,
+  isDisabled: false,
 };
 
 

data/webpack/components/Table/EmptyStateMessage.js

@@ -9,18 +9,21 @@ import {
 } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { CubeIcon, ExclamationCircleIcon, SearchIcon } from '@patternfly/react-icons';
-import { global_danger_color_200 as dangerColor } from '@patternfly/react-tokens';
+import { CubeIcon, ExclamationCircleIcon, SearchIcon, CheckCircleIcon } from '@patternfly/react-icons';
+import { global_danger_color_200 as dangerColor, global_success_color_100 as successColor } from '@patternfly/react-tokens';
 
-const KatelloEmptyStateIcon = ({ error, search, customIcon }) => {
+const KatelloEmptyStateIcon = ({
+  error, search, customIcon, happyIcon,
+}) => {
   if (error) return <EmptyStateIcon icon={ExclamationCircleIcon} color={dangerColor.value} />;
   if (search) return <EmptyStateIcon icon={SearchIcon} />;
+  if (happyIcon) return <EmptyStateIcon icon={CheckCircleIcon} color={successColor.value} />;
   if (customIcon) return <EmptyStateIcon icon={customIcon} />;
   return <EmptyStateIcon icon={CubeIcon} />;
 };
 
 const EmptyStateMessage = ({
-  title, body, error, search, customIcon,
+  title, body, error, search, customIcon, happy,
 }) => {
   let emptyStateTitle = title;
   let emptyStateBody = body;
@@ -37,8 +40,15 @@ const EmptyStateMessage = ({
   }
   return (
     <Bullseye>
-      <EmptyState variant={EmptyStateVariant.small}>
-        <KatelloEmptyStateIcon error={!!error} search={search} customIcon={customIcon} />
+      <EmptyState
+        variant={happy ? EmptyStateVariant.large : EmptyStateVariant.small}
+      >
+        <KatelloEmptyStateIcon
+          error={!!error}
+          search={search}
+          customIcon={customIcon}
+          happyIcon={happy}
+        />
         <Title headingLevel="h2" size="lg">
           {emptyStateTitle}
         </Title>
@@ -54,23 +64,26 @@ KatelloEmptyStateIcon.propTypes = {
   error: PropTypes.bool,
   search: PropTypes.bool,
   customIcon: PropTypes.elementType,
+  happyIcon: PropTypes.bool,
 };
 
 KatelloEmptyStateIcon.defaultProps = {
   error: false,
   search: false,
   customIcon: undefined,
+  happyIcon: undefined,
 };
 
 EmptyStateMessage.propTypes = {
   title: PropTypes.string,
-  body: PropTypes.string,
+  body: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
   error: PropTypes.oneOfType([
     PropTypes.shape({}),
     PropTypes.string,
   ]),
   search: PropTypes.bool,
   customIcon: PropTypes.elementType,
+  happy: PropTypes.bool,
 };
 
 EmptyStateMessage.defaultProps = {
@@ -79,6 +92,7 @@ EmptyStateMessage.defaultProps = {
   error: undefined,
   search: false,
   customIcon: undefined,
+  happy: false,
 };
 
 export default EmptyStateMessage;

data/webpack/components/Table/MainTable.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
 import {
   Table,
   TableHeader,
@@ -15,8 +16,9 @@ import Loading from '../../components/Loading';
 
 const MainTable = ({
   status, cells, rows, error, emptyContentTitle, emptyContentBody,
-  emptySearchTitle, emptySearchBody, searchIsActive, activeFilters,
-  defaultFilters, actionButtons, rowsCount, children, ...extraTableProps
+  emptySearchTitle, emptySearchBody, errorSearchTitle, errorSearchBody,
+  happyEmptyContent, searchIsActive, activeFilters, defaultFilters, actionButtons, rowsCount,
+  children, ...extraTableProps
 }) => {
   const tableHasNoRows = () => {
     if (children) return rowsCount === 0;
@@ -28,6 +30,16 @@ const MainTable = ({
   if (status === STATUS.PENDING) return (<Loading />);
   // Can we display the error message?
   if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
+
+  // scoped_search errors come back as 200 with an error message,
+  // so they should be passed here as errorSearchBody & errorSearchTitle.
+  if (status === STATUS.RESOLVED && !!errorSearchBody) {
+    return (<EmptyStateMessage
+      title={errorSearchTitle}
+      body={errorSearchBody}
+      search
+    />);
+  }
   if (status === STATUS.RESOLVED && isFiltering && tableHasNoRows()) {
     return (<EmptyStateMessage
       title={emptySearchTitle}
@@ -36,7 +48,14 @@ const MainTable = ({
     />);
   }
   if (status === STATUS.RESOLVED && tableHasNoRows()) {
-    return (<EmptyStateMessage title={emptyContentTitle} body={emptyContentBody} />);
+    return (
+      <EmptyStateMessage
+        title={emptyContentTitle}
+        body={emptyContentBody}
+        happy={happyEmptyContent}
+        search={!happyEmptyContent}
+      />
+    );
   }
 
   const tableProps = { cells, rows, ...extraTableProps };
@@ -74,9 +93,11 @@ MainTable.propTypes = {
     PropTypes.string,
   ]),
   emptyContentTitle: PropTypes.string.isRequired,
-  emptyContentBody: PropTypes.string.isRequired,
+  emptyContentBody: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]).isRequired,
   emptySearchTitle: PropTypes.string.isRequired,
   emptySearchBody: PropTypes.string.isRequired,
+  errorSearchTitle: PropTypes.string,
+  errorSearchBody: PropTypes.string,
   searchIsActive: PropTypes.bool,
   activeFilters: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.string,
@@ -92,6 +113,7 @@ MainTable.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]),
+  happyEmptyContent: PropTypes.bool,
 };
 
 MainTable.defaultProps = {
@@ -99,11 +121,14 @@ MainTable.defaultProps = {
   searchIsActive: false,
   activeFilters: [],
   defaultFilters: [],
+  errorSearchTitle: __('Problem searching'),
+  errorSearchBody: '',
   actionButtons: false,
   children: null,
   cells: undefined,
   rows: undefined,
   rowsCount: undefined,
+  happyEmptyContent: false,
 };
 
 export default MainTable;

data/webpack/components/Table/MainTable.scss

@@ -14,4 +14,8 @@
 
 .pf-c-table tbody tr td {
   vertical-align: inherit;
-}
+}
+
+input[type="checkbox"][disabled] {
+  cursor: initial;
+}