katello 4.4.2.2 → 4.5.0.rc1

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

@@ -23,6 +23,8 @@ const Search = ({
   foremanApiAutoComplete,
   bookmarkController,
   placeholder,
+  isTextInput,
+  setTextInputValue,
 }) => {
   const [items, setItems] = useState([]);
   const dispatch = useDispatch();
@@ -48,9 +50,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) {
@@ -83,6 +92,8 @@ const Search = ({
         patternfly4={patternfly4}
         autoSearchEnabled={autoSearchEnabled}
         placeholder={placeholder}
+        isTextInput={isTextInput}
+        setTextInputValue={setTextInputValue}
       />
     </div>
   );
@@ -102,6 +113,8 @@ Search.propTypes = {
   }),
   bookmarkController: PropTypes.string,
   placeholder: PropTypes.string,
+  isTextInput: PropTypes.bool,
+  setTextInputValue: PropTypes.func,
 };
 
 Search.defaultProps = {
@@ -115,6 +128,8 @@ Search.defaultProps = {
   isDisabled: undefined,
   bookmarkController: undefined,
   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/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,
@@ -139,13 +144,12 @@ export const useBulkSelect = ({
   initialArry = [],
   initialSearchQuery = '',
   idColumn = 'id',
-  filtersQuery = '',
   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);
@@ -153,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;
     }
@@ -166,7 +170,7 @@ export const useBulkSelect = ({
       return !exclusionSet.has(id);
     }
     return inclusionSet.has(id);
-  };
+  }, [exclusionSet, inclusionSet, selectAllMode, selectOptions]);
 
   const selectPage = () => {
     setSelectAllMode(false);
@@ -203,7 +207,7 @@ export const useBulkSelect = ({
 
   const fetchBulkParams = (idColumnName = idColumn) => {
     const searchQueryWithExclusionSet = () => {
-      const query = [searchQuery, filtersQuery,
+      const query = [searchQuery,
         !isEmpty(exclusionSet) && `${idColumnName} !^ (${[...exclusionSet].join(',')})`];
       return query.filter(item => item).join(' and ');
     };
@@ -222,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]);
@@ -260,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

@@ -50,6 +50,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 +161,6 @@ const TableWrapper = ({
     paginationChangePending.current = pagData;
   };
 
-
   return (
     <>
       <Flex style={{ alignItems: 'center' }} className="margin-16-24">
@@ -175,7 +175,7 @@ const TableWrapper = ({
                 pageRowCount,
               }
               }
-              totalCount={Number(metadata?.selectable ?? total)}
+              totalCount={totalSelectableCount}
               areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
               areAllRowsSelected={areAllRowsSelected()}
             />
@@ -244,6 +244,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,

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;