katello 4.4.1 → 4.5.0

data/webpack/components/Table/TableHooks.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { isEmpty } from 'lodash';
 import { useLocation } from 'react-router-dom';
 import { friendlySearchParam } from '../../utils/helpers';
@@ -53,28 +53,32 @@ class ReactConnectedSet extends Set {
 }
 
 export const useSet = (initialArry) => {
-  const [, setToggle] = useState(0);
+  const [, setToggle] = useState(Date.now());
   // needed because mutating a Ref won't cause React to rerender
-  const forceRender = () => setToggle(prev => prev + 1);
+  const forceRender = () => setToggle(Date.now());
   const set = useRef(new ReactConnectedSet(initialArry, forceRender));
   return set.current;
 };
 
 export const useSelectionSet = ({
-  results, metadata,
+  results,
+  metadata,
   initialArry = [],
   idColumn = 'id',
   isSelectable = () => true,
 }) => {
   const selectionSet = useSet(initialArry);
   const pageIds = results?.map(result => result[idColumn]) ?? [];
-  const selectableResults = results?.filter(result => isSelectable(result)) ?? [];
-  const selectableIds = new Set(selectableResults.map(result => result[idColumn]));
+  const selectableResults = useMemo(() => results?.filter(result =>
+    isSelectable(result)) ?? [], [results, isSelectable]);
   const selectedResults = useRef({}); // { id: result }
-  const canSelect = id => selectableIds.has(id);
+  const canSelect = useCallback((id) => {
+    const selectableIds = new Set(selectableResults.map(result => result[idColumn]));
+    return selectableIds.has(id);
+  }, [idColumn, selectableResults]);
   const areAllRowsOnPageSelected = () =>
     Number(pageIds?.length) > 0 &&
-        pageIds.every(result => selectionSet.has(result) || !canSelect(result));
+    pageIds.every(result => selectionSet.has(result) || !canSelect(result));
 
   const areAllRowsSelected = () =>
     Number(selectionSet.size) > 0 && selectionSet.size === Number(metadata.selectable);
@@ -108,7 +112,8 @@ export const useSelectionSet = ({
 
   const selectedCount = selectionSet.size;
 
-  const isSelected = id => canSelect(id) && selectionSet.has(id);
+  const isSelected = useCallback(id =>
+    canSelect(id) && selectionSet.has(id), [canSelect, selectionSet]);
 
   return {
     selectOne,
@@ -142,9 +147,9 @@ export const useBulkSelect = ({
   isSelectable,
 }) => {
   const { selectionSet: inclusionSet, ...selectOptions } =
-                useSelectionSet({
-                  results, metadata, initialArry, idColumn, isSelectable,
-                });
+    useSelectionSet({
+      results, metadata, initialArry, idColumn, isSelectable,
+    });
   const exclusionSet = useSet([]);
   const [searchQuery, updateSearchQuery] = useState(initialSearchQuery);
   const [selectAllMode, setSelectAllMode] = useState(false);
@@ -152,12 +157,12 @@ export const useBulkSelect = ({
     Number(metadata.selectable) - exclusionSet.size : selectOptions.selectedCount;
 
   const areAllRowsOnPageSelected = () => selectAllMode ||
-                                         selectOptions.areAllRowsOnPageSelected();
+    selectOptions.areAllRowsOnPageSelected();
 
   const areAllRowsSelected = () => (selectAllMode && exclusionSet.size === 0) ||
-                                   selectOptions.areAllRowsSelected();
+    selectOptions.areAllRowsSelected();
 
-  const isSelected = (id) => {
+  const isSelected = useCallback((id) => {
     if (!selectOptions.isSelectable(id)) {
       return false;
     }
@@ -165,7 +170,7 @@ export const useBulkSelect = ({
       return !exclusionSet.has(id);
     }
     return inclusionSet.has(id);
-  };
+  }, [exclusionSet, inclusionSet, selectAllMode, selectOptions]);
 
   const selectPage = () => {
     setSelectAllMode(false);
@@ -200,16 +205,16 @@ export const useBulkSelect = ({
     }
   };
 
-  const fetchBulkParams = () => {
+  const fetchBulkParams = (idColumnName = idColumn) => {
     const searchQueryWithExclusionSet = () => {
       const query = [searchQuery,
-        !isEmpty(exclusionSet) && `${idColumn} !^ (${[...exclusionSet].join(',')})`];
+        !isEmpty(exclusionSet) && `${idColumnName} !^ (${[...exclusionSet].join(',')})`];
       return query.filter(item => item).join(' and ');
     };
 
     const searchQueryWithInclusionSet = () => {
       if (isEmpty(inclusionSet)) throw new Error('Cannot build a search query with no items selected');
-      return `${idColumn} ^ (${[...inclusionSet].join(',')})`;
+      return `${idColumnName} ^ (${[...inclusionSet].join(',')})`;
     };
 
     return selectAllMode ? searchQueryWithExclusionSet() : searchQueryWithInclusionSet();
@@ -221,7 +226,7 @@ export const useBulkSelect = ({
     // if search value changed and cleared from a string to empty value
     // And it was select all -> then reset selections
     if ((prevSearchRef && !isEmpty(prevSearchRef.searchQuery)) &&
-        isEmpty(searchQuery) && selectAllMode) {
+      isEmpty(searchQuery) && selectAllMode) {
       selectNone();
     }
   }, [searchQuery, selectAllMode, prevSearchRef, selectNone]);
@@ -259,3 +264,43 @@ export const useUrlParams = () => {
     ...urlParams,
   };
 };
+
+export const useTableSort = ({
+  allColumns,
+  columnsToSortParams,
+  initialSortColumnName = allColumns[0],
+}) => {
+  if (!Object.keys(columnsToSortParams).includes(initialSortColumnName)) {
+    throw new Error(`initialSortColumnName '${initialSortColumnName}' must also be defined in columnsToSortParams`);
+  }
+  const [activeSortColumn, setActiveSortColumn] = useState(initialSortColumnName);
+  const [activeSortDirection, setActiveSortDirection] = useState('asc');
+
+  // Patternfly sort function
+  const onSort = (_event, index, direction) => {
+    setActiveSortColumn(allColumns?.[index]);
+    setActiveSortDirection(direction);
+  };
+
+  // Patternfly sort params to pass to the <Th> component.
+  // (but you should probably just use <SortableColumnHeaders> instead)
+  const pfSortParams = (columnName, newSortColIndex) => ({
+    columnIndex: newSortColIndex ?? allColumns?.indexOf(columnName),
+    sortBy: {
+      defaultDirection: 'asc',
+      direction: activeSortDirection,
+      index: allColumns?.indexOf(activeSortColumn),
+    },
+    onSort,
+  });
+
+  return {
+    pfSortParams,
+    apiSortParams: { // scoped_search params to pass to the Katello API
+      sort_by: columnsToSortParams[activeSortColumn],
+      sort_order: activeSortDirection,
+    },
+    activeSortColumn, // state values to pass as additionalListeners
+    activeSortDirection,
+  };
+};

data/webpack/components/Table/TableWrapper.js

@@ -43,6 +43,7 @@ const TableWrapper = ({
   disableSearch,
   nodesBelowSearch,
   bookmarkController,
+  readOnlyBookmarks,
   ...allTableProps
 }) => {
   const dispatch = useDispatch();
@@ -50,6 +51,7 @@ const TableWrapper = ({
   const perPage = Number(metadata?.per_page ?? foremanPerPage);
   const page = Number(metadata?.page ?? 1);
   const total = Number(metadata?.subtotal ?? 0);
+  const totalSelectableCount = Number(metadata?.selectable ?? total);
   const { pageRowCount } = getPageStats({ total, page, perPage });
   const unresolvedStatus = !!allTableProps?.status && allTableProps.status !== STATUS.RESOLVED;
   const unresolvedStatusOrNoRows = unresolvedStatus || pageRowCount === 0;
@@ -160,7 +162,6 @@ const TableWrapper = ({
     paginationChangePending.current = pagData;
   };
 
-
   return (
     <>
       <Flex style={{ alignItems: 'center' }} className="margin-16-24">
@@ -175,7 +176,7 @@ const TableWrapper = ({
                 pageRowCount,
               }
               }
-              totalCount={Number(metadata?.selectable ?? total)}
+              totalCount={totalSelectableCount}
               areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
               areAllRowsSelected={areAllRowsSelected()}
             />
@@ -191,6 +192,7 @@ const TableWrapper = ({
               getAutoCompleteParams={getAutoCompleteParams}
               foremanApiAutoComplete={foremanApiAutoComplete}
               bookmarkController={bookmarkController}
+              readOnlyBookmarks={readOnlyBookmarks}
               placeholder={searchPlaceholderText}
             />
           </FlexItem>
@@ -244,6 +246,8 @@ const TableWrapper = ({
 };
 
 TableWrapper.propTypes = {
+  // ouiaId is needed on all tables for automation testing
+  ouiaId: PropTypes.string.isRequired,
   searchQuery: PropTypes.string.isRequired,
   updateSearchQuery: PropTypes.func.isRequired,
   fetchItems: PropTypes.func.isRequired,
@@ -270,7 +274,7 @@ TableWrapper.propTypes = {
   actionButtons: PropTypes.node,
   toggleGroup: PropTypes.node,
   children: PropTypes.node,
-  // additionalListeners are anything that can trigger another API call, e.g. a filter
+  // additionalListeners are anything that should trigger another API call, e.g. a filter
   additionalListeners: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string,
@@ -298,6 +302,7 @@ TableWrapper.propTypes = {
   disableSearch: PropTypes.bool,
   nodesBelowSearch: PropTypes.node,
   bookmarkController: PropTypes.string,
+  readOnlyBookmarks: PropTypes.bool,
 };
 
 TableWrapper.defaultProps = {
@@ -324,6 +329,7 @@ TableWrapper.defaultProps = {
   disableSearch: false,
   nodesBelowSearch: null,
   bookmarkController: undefined,
+  readOnlyBookmarks: false,
 };
 
 export default TableWrapper;

data/webpack/components/Table/components/SortableColumnHeaders.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Th } from '@patternfly/react-table';
+
+const SortableColumnHeaders = ({
+  columnHeaders,
+  pfSortParams,
+  columnsToSortParams,
+}) => (
+  columnHeaders.map(col => (
+    <Th
+      key={col}
+      sort={columnsToSortParams[col] ? pfSortParams(col) : undefined}
+    >
+      {col}
+    </Th>
+  ))
+);
+
+export default SortableColumnHeaders;

data/webpack/components/Table/components/TranslatedPlural.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+
+// a defaultMessage like
+// "{count, plural, =0 {No errata} one {# erratum} other {# errata}}"
+// will give us properly translated pluralized strings!
+// see https://formatjs.io/docs/react-intl/components/#message-syntax
+export const TranslatedPlural = ({
+  count, singular,
+  plural = `${singular}s`,
+  zeroMsg = `No ${plural}`,
+  id,
+  ...props
+}) => (
+  <FormattedMessage
+    defaultMessage={`{count, plural, =0 {${zeroMsg}} one {# ${singular}} other {# ${plural}}}`}
+    values={{
+      count,
+    }}
+    id={id}
+    {...props}
+  />
+);
+
+TranslatedPlural.propTypes = {
+  count: PropTypes.number.isRequired,
+  singular: PropTypes.string.isRequired,
+  plural: PropTypes.string,
+  zeroMsg: PropTypes.string,
+  id: PropTypes.string.isRequired,
+};
+
+TranslatedPlural.defaultProps = {
+  plural: undefined,
+  zeroMsg: undefined,
+};
+
+export const TranslatedAnchor = ({
+  href, style, ariaLabel, ...props
+}) => (
+  <a href={href} style={style} aria-label={ariaLabel}>
+    <TranslatedPlural
+      {...props}
+    />
+  </a>
+);
+
+TranslatedAnchor.propTypes = {
+  href: PropTypes.string.isRequired,
+  style: PropTypes.shape({}),
+  ariaLabel: PropTypes.string.isRequired,
+};
+
+TranslatedAnchor.defaultProps = {
+  style: undefined,
+};

data/webpack/components/TypeAhead/TypeAhead.js

@@ -22,7 +22,10 @@ const TypeAhead = ({
   autoSearchEnabled,
   autoSearchDelay,
   bookmarkController,
+  readOnlyBookmarks,
   placeholder,
+  isTextInput,
+  setTextInputValue,
 }) => {
   const [inputValue, setInputValue] = useState(initialInputValue);
 
@@ -38,6 +41,7 @@ const TypeAhead = ({
   const handleStateChange = ({ inputValue: value }) => {
     if (typeof value === 'string') {
       setInputValue(value);
+      if (setTextInputValue) setTextInputValue(value);
     }
   };
 
@@ -66,6 +70,7 @@ const TypeAhead = ({
       }) => {
         const typeAheadProps = {
           bookmarkController,
+          readOnlyBookmarks,
           isDisabled,
           userInputValue: inputValue,
           clearSearch,
@@ -82,6 +87,7 @@ const TypeAhead = ({
           activeItems,
           placeholder,
           shouldShowItems: isOpen && items.length > 0,
+          isTextInput,
         };
 
         return (
@@ -114,7 +120,10 @@ TypeAhead.propTypes = {
   autoSearchEnabled: PropTypes.bool.isRequired,
   autoSearchDelay: PropTypes.number,
   bookmarkController: PropTypes.string,
+  readOnlyBookmarks: PropTypes.bool,
   placeholder: PropTypes.string,
+  isTextInput: PropTypes.bool,
+  setTextInputValue: PropTypes.func,
 };
 
 TypeAhead.defaultProps = {
@@ -124,7 +133,10 @@ TypeAhead.defaultProps = {
   isDisabled: undefined,
   autoSearchDelay: 500,
   bookmarkController: undefined,
+  readOnlyBookmarks: false,
   placeholder: undefined,
+  isTextInput: false,
+  setTextInputValue: undefined,
 };
 
 export default TypeAhead;

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

@@ -8,7 +8,7 @@ import { commonInputPropTypes } from '../helpers/commonPropTypes';
 import './TypeAheadInput.scss';
 
 const TypeAheadInput = ({
-  onKeyPress, onInputFocus, passedProps, isDisabled, autoSearchEnabled, placeholder,
+  onKeyPress, onInputFocus, passedProps, isDisabled, autoSearchEnabled, placeholder, isTextInput,
 }) => {
   const inputRef = useRef(null);
   const {
@@ -31,19 +31,19 @@ const TypeAheadInput = ({
         onFocus={onInputFocus}
         aria-label="text input for search"
         onChange={onChangeWrapper}
-        type="search"
-        iconVariant={autoSearchEnabled && 'search'}
+        type="text"
+        iconVariant={autoSearchEnabled && !isTextInput ? 'search' : undefined}
         placeholder={placeholder}
       />
       {
-        value && (
-          <Button
-            variant={autoSearchEnabled ? 'plain' : 'control'}
-            className="search-clear"
-            onClick={clearSearch}
-          >
-            <TimesIcon />
-          </Button>)}
+        (value && !isTextInput) &&
+        <Button
+          variant={autoSearchEnabled ? 'plain' : 'control'}
+          className="search-clear"
+          onClick={clearSearch}
+        >
+          <TimesIcon />
+        </Button>}
     </>);
 };
 
@@ -52,11 +52,13 @@ TypeAheadInput.propTypes = {
   autoSearchEnabled: PropTypes.bool.isRequired,
   ...commonInputPropTypes,
   placeholder: PropTypes.string,
+  isTextInput: PropTypes.bool,
 };
 
 TypeAheadInput.defaultProps = {
   isDisabled: undefined,
   placeholder: '',
+  isTextInput: false,
 };
 
 export default TypeAheadInput;

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

@@ -12,7 +12,8 @@ import Bookmark from './../../../components/Bookmark';
 const TypeAheadSearch = ({
   userInputValue, clearSearch, getInputProps, getItemProps, isOpen, highlightedIndex,
   selectedItem, selectItem, openMenu, onSearch, items, activeItems, shouldShowItems,
-  autoSearchEnabled, isDisabled, bookmarkController, inputValue, placeholder,
+  autoSearchEnabled, isDisabled, bookmarkController, inputValue, placeholder, isTextInput,
+  readOnlyBookmarks,
 }) => (
   <>
     <InputGroup>
@@ -35,6 +36,7 @@ const TypeAheadSearch = ({
         passedProps={{ ...getInputProps(), clearSearch }}
         autoSearchEnabled={autoSearchEnabled}
         placeholder={placeholder}
+        isTextInput={isTextInput}
       />
       <>
         {bookmarkController &&
@@ -43,10 +45,11 @@ const TypeAheadSearch = ({
               isDisabled,
               selectedItem,
               selectItem,
+              readOnlyBookmarks,
             }}
             controller={bookmarkController}
           />}
-        {!autoSearchEnabled &&
+        {(!autoSearchEnabled && !isTextInput) &&
           <Button aria-label="search button" variant="control" onClick={() => onSearch(inputValue)}>
             <SearchIcon />
           </Button>}
@@ -65,12 +68,14 @@ TypeAheadSearch.propTypes = {
   isDisabled: PropTypes.bool,
   autoSearchEnabled: PropTypes.bool.isRequired,
   bookmarkController: PropTypes.string,
+  isTextInput: PropTypes.bool,
   ...commonSearchPropTypes,
 };
 
 TypeAheadSearch.defaultProps = {
   bookmarkController: undefined,
   isDisabled: undefined,
+  isTextInput: false,
 };
 
 export default TypeAheadSearch;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { DropdownItem } from '@patternfly/react-core';
+import { CubeIcon } from '@patternfly/react-icons';
+
+import { translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+
+import { selectHostDetails } from '../HostDetailsSelectors';
+
+const HostActionsBar = () => {
+  const hostDetails = useSelector(selectHostDetails);
+
+  return (
+    <>
+      <DropdownItem
+        key="katello-change-host-content-source"
+        href={foremanUrl(`/change_host_content_source?host_id=${hostDetails?.id}`)}
+        icon={<CubeIcon />}
+      >
+        {__('Change content source')}
+      </DropdownItem>
+    </>
+  );
+};
+
+export default HostActionsBar;