katello 4.2.2 → 4.3.0.rc1

data/webpack/components/Table/TableWrapper.js

@@ -1,58 +1,115 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
-import { Pagination, Flex, FlexItem } from '@patternfly/react-core';
-
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
+import { isEqual } from 'lodash';
+import { STATUS } from 'foremanReact/constants';
+import { noop } from 'foremanReact/common/helpers';
 import { useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
-import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
-
+import { PaginationVariant, Flex, FlexItem } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PageControls from './PageControls';
 import MainTable from './MainTable';
+import { getPageStats } from './helpers';
 import Search from '../../components/Search';
+import SelectAllCheckbox from '../SelectAllCheckbox';
 import { orgId } from '../../services/api';
 
 /* Patternfly 4 table wrapper */
 const TableWrapper = ({
+  actionButtons,
+  toggleGroup,
   children,
   metadata,
   fetchItems,
   autocompleteEndpoint,
+  foremanApiAutoComplete,
   searchQuery,
   updateSearchQuery,
   additionalListeners,
   activeFilters,
+  displaySelectAllCheckbox,
+  selectAll,
+  selectNone,
+  selectPage,
+  areAllRowsOnPageSelected,
+  areAllRowsSelected,
+  selectedCount,
+  emptySearchBody,
+  disableSearch,
+  nodesBelowSearch,
+  bookmarkController,
   ...allTableProps
 }) => {
   const dispatch = useDispatch();
-  const { foremanPerPage = 20 } = useForemanSettings();
-  // setting pagination to local state so it doesn't disappear when page reloads
-  const [perPage, setPerPage] = useState(foremanPerPage);
-  const [page, setPage] = useState(1);
-  const [total, setTotal] = useState(0);
-
-  const updatePagination = (data) => {
-    const { subtotal: newTotal, page: newPage, per_page: newPerPage } = data;
-    if (newTotal !== undefined) setTotal(parseInt(newTotal, 10));
-    if (newPage !== undefined) setPage(parseInt(newPage, 10));
-    if (newPerPage !== undefined) setPerPage(parseInt(newPerPage, 10));
-  };
-  const paginationParams = useCallback(() => ({ per_page: perPage, page }), [perPage, page]);
+  const foremanPerPage = useForemanSettings().perPage || 20;
+  const perPage = Number(metadata?.per_page ?? foremanPerPage);
+  const page = Number(metadata?.page ?? 1);
+  const total = Number(metadata?.subtotal ?? 0);
+  const { pageRowCount } = getPageStats({ total, page, perPage });
+  const unresolvedStatus = !!allTableProps?.status && allTableProps.status !== STATUS.RESOLVED;
+  const unresolvedStatusOrNoRows = unresolvedStatus || pageRowCount === 0;
+  const showPagination = !unresolvedStatusOrNoRows;
+  const showActionButtons = actionButtons && !unresolvedStatus;
+  const showToggleGroup = toggleGroup && !unresolvedStatus;
+  const paginationParams = useCallback(() =>
+    ({ per_page: perPage, page }), [perPage, page]);
+  const prevRequest = useRef({});
+  const prevSearch = useRef('');
+  const prevAdditionalListeners = useRef([]);
+  const prevActiveFilters = useRef([]);
+  const paginationChangePending = useRef(null);
 
-  useEffect(() => updatePagination(metadata), [metadata]);
+  const hasChanged = (oldValue, newValue) => !isEqual(oldValue, newValue);
 
-  // The search component will update the search query when a search is performed, listen for that
-  // and perform the search so we can be sure the searchQuery is updated when search is performed.
-  useDeepCompareEffect(() => {
+  const spawnFetch = useCallback((paginationData) => {
+    // The search component will update the search query when a search is performed, listen for that
+    // and perform the search so we can be sure the searchQuery is updated when search is performed.
     const fetchWithParams = (allParams = {}) => {
-      dispatch(fetchItems({ ...paginationParams(), ...allParams }));
+      const newRequest = {
+        ...(paginationData ?? paginationParams()),
+        ...allParams,
+      };
+      const pagParamsHaveChanged = (newPagParams, oldPagParams) =>
+        (newPagParams.page && hasChanged(newPagParams.page, oldPagParams.page)) ||
+        (newPagParams.per_page && hasChanged(newPagParams.per_page, oldPagParams.per_page));
+      const newRequestHasStalePagination = !!(paginationChangePending.current &&
+        pagParamsHaveChanged(newRequest, paginationChangePending.current));
+      const newRequestHasChanged = hasChanged(newRequest, prevRequest.current);
+      const additionalListenersHaveChanged =
+        hasChanged(additionalListeners, prevAdditionalListeners.current);
+      // If a pagination change is in-flight,
+      // don't send another request with stale data
+      if (newRequestHasStalePagination && !additionalListenersHaveChanged) return;
+      paginationChangePending.current = null;
+      if (newRequestHasChanged || additionalListenersHaveChanged) {
+        // don't fire the same request twice in a row
+        prevRequest.current = newRequest;
+        prevAdditionalListeners.current = additionalListeners;
+        dispatch(fetchItems(newRequest));
+      }
     };
-    if (searchQuery || activeFilters) {
+    let paramsOverride;
+    const activeFiltersHaveChanged = hasChanged(activeFilters, prevActiveFilters.current);
+    const searchQueryHasChanged = hasChanged(searchQuery, prevSearch.current);
+    if (searchQuery && !disableSearch) paramsOverride = { search: searchQuery };
+    if (!disableSearch && (searchQueryHasChanged || activeFiltersHaveChanged)) {
       // Reset page back to 1 when filter or search changes
-      fetchWithParams({ search: searchQuery, page: 1 });
+      prevSearch.current = searchQuery;
+      prevActiveFilters.current = activeFilters;
+      paramsOverride = { search: searchQuery, page: 1 };
+    }
+    if (paramsOverride) {
+      // paramsOverride may have both page and search, or just search
+      const pageOverride = !!paramsOverride.page;
+      if (pageOverride) paginationChangePending.current = null;
+      fetchWithParams(paramsOverride);
+      if (pageOverride) paginationChangePending.current = paramsOverride;
     } else {
       fetchWithParams();
     }
   }, [
+    disableSearch,
     activeFilters,
     dispatch,
     fetchItems,
@@ -61,6 +118,10 @@ const TableWrapper = ({
     additionalListeners,
   ]);
 
+  useDeepCompareEffect(() => {
+    spawnFetch();
+  }, [searchQuery, spawnFetch, additionalListeners]);
+
   const getAutoCompleteParams = search => ({
     endpoint: autocompleteEndpoint,
     params: {
@@ -69,37 +130,106 @@ const TableWrapper = ({
     },
   });
 
+  // If the new page wouldn't exist because of a perPage change,
+  // we should set the current page to the last page.
+  const validatePagination = (data) => {
+    const mergedData = { ...paginationParams(), ...data };
+    const { page: requestedPage, per_page: newPerPage } = mergedData;
+    const { lastPage } = getPageStats({
+      page: requestedPage,
+      perPage: newPerPage,
+      total,
+    });
+    const result = {};
+    if (requestedPage) {
+      const newPage = (requestedPage > lastPage) ? lastPage : requestedPage;
+      result.page = Number(newPage);
+    }
+    if (newPerPage) result.per_page = Number(newPerPage);
+    return result;
+  };
+
   const onPaginationUpdate = (updatedPagination) => {
-    updatePagination(updatedPagination);
+    const pagData = validatePagination(updatedPagination);
+    paginationChangePending.current = null;
+    spawnFetch(pagData);
+    paginationChangePending.current = pagData;
   };
 
+
   return (
-    <React.Fragment>
+    <>
       <Flex>
-        <FlexItem>
-          <Search
-            patternfly4
-            onSearch={search => updateSearchQuery(search)}
-            getAutoCompleteParams={getAutoCompleteParams}
-          />
-        </FlexItem>
-        <FlexItem>
-          {children}
-        </FlexItem>
-        <FlexItem align={{ default: 'alignRight' }}>
-          <Pagination
-            itemCount={total}
+        {displaySelectAllCheckbox &&
+          <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
+            <SelectAllCheckbox
+              {...{
+                selectAll,
+                selectPage,
+                selectNone,
+                selectedCount,
+                pageRowCount,
+              }
+              }
+              totalCount={Number(metadata?.selectable ?? total)}
+              areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
+              areAllRowsSelected={areAllRowsSelected()}
+            />
+          </FlexItem>
+        }
+        {!disableSearch &&
+          <FlexItem>
+            <Search
+              isDisabled={unresolvedStatusOrNoRows && !searchQuery}
+              patternfly4
+              onSearch={search => updateSearchQuery(search)}
+              getAutoCompleteParams={getAutoCompleteParams}
+              foremanApiAutoComplete={foremanApiAutoComplete}
+              bookmarkController={bookmarkController}
+            />
+          </FlexItem>
+        }
+        {showToggleGroup &&
+          <FlexItem style={{ marginLeft: '16px' }}>
+            {toggleGroup}
+          </FlexItem>}
+        {showActionButtons &&
+          <FlexItem style={{ marginLeft: '16px' }}>
+            {actionButtons}
+          </FlexItem>}
+
+        {showPagination &&
+          <PageControls
+            variant={PaginationVariant.top}
+            total={total}
             page={page}
             perPage={perPage}
-            onSetPage={(_evt, updated) => onPaginationUpdate({ page: updated })}
-            onPerPageSelect={(_evt, updated) => onPaginationUpdate({ per_page: updated })}
-            perPageOptions={usePaginationOptions().map(p => ({ title: p.toString(), value: p }))}
-            variant="top"
+            onPaginationUpdate={onPaginationUpdate}
           />
-        </FlexItem>
+        }
       </Flex>
-      <MainTable searchIsActive={!!searchQuery} activeFilters={activeFilters} {...allTableProps} />
-    </React.Fragment>
+      {nodesBelowSearch}
+      <MainTable
+        searchIsActive={!!searchQuery}
+        activeFilters={activeFilters}
+        rowsCount={pageRowCount}
+        emptySearchBody={emptySearchBody}
+        {...allTableProps}
+      >
+        {children}
+      </MainTable>
+      {showPagination &&
+        <Flex>
+          <PageControls
+            variant={PaginationVariant.bottom}
+            total={total}
+            page={page}
+            perPage={perPage}
+            onPaginationUpdate={onPaginationUpdate}
+          />
+        </Flex>
+      }
+    </>
   );
 };
 
@@ -108,11 +238,16 @@ TableWrapper.propTypes = {
   updateSearchQuery: PropTypes.func.isRequired,
   fetchItems: PropTypes.func.isRequired,
   metadata: PropTypes.shape({
+    selectable: PropTypes.number,
     total: PropTypes.number,
     page: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.string, // The API can sometimes return strings
     ]),
+    subtotal: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string, // The API can sometimes return strings
+    ]),
     per_page: PropTypes.oneOfType([
       PropTypes.number,
       PropTypes.string,
@@ -120,6 +255,9 @@ TableWrapper.propTypes = {
     search: PropTypes.string,
   }),
   autocompleteEndpoint: PropTypes.string.isRequired,
+  foremanApiAutoComplete: PropTypes.bool,
+  actionButtons: PropTypes.node,
+  toggleGroup: PropTypes.node,
   children: PropTypes.node,
   // additionalListeners are anything that can trigger another API call, e.g. a filter
   additionalListeners: PropTypes.arrayOf(PropTypes.oneOfType([
@@ -127,14 +265,47 @@ TableWrapper.propTypes = {
     PropTypes.string,
     PropTypes.bool,
   ])),
-  activeFilters: PropTypes.bool,
+  activeFilters: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ])),
+  defaultFilters: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ])),
+  displaySelectAllCheckbox: PropTypes.bool,
+  selectedCount: PropTypes.number,
+  selectAll: PropTypes.func,
+  selectNone: PropTypes.func,
+  selectPage: PropTypes.func,
+  areAllRowsOnPageSelected: PropTypes.func,
+  areAllRowsSelected: PropTypes.func,
+  emptySearchBody: PropTypes.string,
+  disableSearch: PropTypes.bool,
+  nodesBelowSearch: PropTypes.node,
+  bookmarkController: PropTypes.string,
 };
 
 TableWrapper.defaultProps = {
-  metadata: {},
+  metadata: { subtotal: 0, selectable: 0 },
   children: null,
   additionalListeners: [],
-  activeFilters: false,
+  activeFilters: [],
+  defaultFilters: [],
+  foremanApiAutoComplete: false,
+  actionButtons: null,
+  toggleGroup: null,
+  displaySelectAllCheckbox: false,
+  selectedCount: 0,
+  selectAll: noop,
+  selectNone: noop,
+  selectPage: noop,
+  areAllRowsOnPageSelected: noop,
+  areAllRowsSelected: noop,
+  emptySearchBody: __('Try changing your search settings.'),
+  disableSearch: false,
+  nodesBelowSearch: null,
+  bookmarkController: undefined,
 };
 
 export default TableWrapper;

data/webpack/components/Table/helpers.js

@@ -12,3 +12,20 @@ const onSelect = (rows, setRows) => (_event, isSelected, rowId) => {
 };
 
 export default onSelect;
+
+export const getPageStats = ({ total, page, perPage }) => {
+  // logic adapted from patternfly so that we can know the number of items per page
+  const lastPage = Math.ceil(total / perPage) ?? 0;
+  const firstIndex = total <= 0 ? 0 : ((page - 1) * perPage) + 1;
+  let lastIndex;
+  if (total <= 0) {
+    lastIndex = 0;
+  } else {
+    lastIndex = page === lastPage ? total : page * perPage;
+  }
+  let pageRowCount = (lastIndex - firstIndex) + 1;
+  if (total <= 0) pageRowCount = 0;
+  return {
+    firstIndex, lastIndex, pageRowCount, lastPage,
+  };
+};

data/webpack/components/TypeAhead/TypeAhead.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
@@ -9,80 +9,90 @@ import { default as TypeAheadSearchPf4 } from './pf4Search/TypeAheadSearch';
 import { getActiveItems } from './helpers/helpers';
 
 import './TypeAhead.scss';
+import useDebounce from '../../utils/useDebounce';
 
-class TypeAhead extends Component {
-  constructor(props) {
-    super(props);
+const TypeAhead = ({
+  items,
+  isDisabled,
+  onInputUpdate,
+  onSearch,
+  actionText,
+  initialInputValue,
+  patternfly4,
+  autoSearchEnabled,
+  autoSearchDelay,
+  bookmarkController,
+}) => {
+  const [inputValue, setInputValue] = useState(initialInputValue);
 
-    this.state = {
-      inputValue: this.props.initialInputValue,
-    };
-  }
+  const debouncedValue = useDebounce(inputValue, autoSearchDelay);
+  useEffect(
+    () => {
+      onInputUpdate(debouncedValue);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [debouncedValue],
+  );
 
-  handleStateChange = ({ inputValue }) => {
-    if (typeof inputValue === 'string') {
-      this.props.onInputUpdate(inputValue);
-      this.setState({ inputValue });
+  const handleStateChange = ({ inputValue: value }) => {
+    if (typeof value === 'string') {
+      setInputValue(value);
     }
   };
 
-  clearSearch = () => {
-    this.setState({ inputValue: '' }, () => this.props.onSearch(this.state.inputValue));
+  const clearSearch = () => {
+    setInputValue('');
+    onSearch('');
   };
 
-  render() {
-    const {
-      onSearch, onInputUpdate, items, actionText, patternfly4, autoSearchEnabled, ...rest
-    } = this.props;
+  const activeItems = getActiveItems(items);
 
-    const activeItems = getActiveItems(items);
-
-    return (
-      <Downshift
-        onStateChange={this.handleStateChange}
-        defaultHighlightedIndex={0}
-        selectedItem={this.state.inputValue}
-        {...rest}
-      >
-        {({
+  return (
+    <Downshift
+      onStateChange={handleStateChange}
+      defaultHighlightedIndex={0}
+      selectedItem={inputValue}
+    >
+      {({
+        getInputProps,
+        getItemProps,
+        isOpen,
+        inputValue: internalInputValue,
+        highlightedIndex,
+        selectedItem,
+        selectItem,
+        openMenu,
+      }) => {
+        const typeAheadProps = {
+          bookmarkController,
+          isDisabled,
+          userInputValue: inputValue,
+          clearSearch,
           getInputProps,
           getItemProps,
           isOpen,
-          inputValue,
+          inputValue: internalInputValue,
           highlightedIndex,
           selectedItem,
           selectItem,
           openMenu,
-        }) => {
-            const typeAheadProps = {
-              userInputValue: this.state.inputValue,
-              clearSearch: this.clearSearch,
-              getInputProps,
-              getItemProps,
-              isOpen,
-              inputValue,
-              highlightedIndex,
-              selectedItem,
-              selectItem,
-              openMenu,
-              onSearch,
-              items,
-              activeItems,
-              shouldShowItems: isOpen && items.length > 0,
-           };
+          onSearch,
+          items,
+          activeItems,
+          shouldShowItems: isOpen && items.length > 0,
+        };
 
-            return (
-              <div>
-                {patternfly4 ?
-                  <TypeAheadSearchPf4 autoSearchEnabled={autoSearchEnabled} {...typeAheadProps} /> :
-                  <TypeAheadSearch actionText={actionText} {...typeAheadProps} />}
-              </div>
-          );
-}}
-      </Downshift>
-    );
-  }
-}
+        return (
+          <div>
+            {patternfly4 ?
+              <TypeAheadSearchPf4 autoSearchEnabled={autoSearchEnabled} {...typeAheadProps} /> :
+              <TypeAheadSearch actionText={actionText} {...typeAheadProps} />}
+          </div>
+        );
+      }}
+    </Downshift>
+  );
+};
 
 TypeAhead.propTypes = {
   items: PropTypes.arrayOf(PropTypes.shape({
@@ -93,18 +103,24 @@ TypeAhead.propTypes = {
     /* optionally disable a regular item */
     disabled: PropTypes.bool,
   })).isRequired,
+  isDisabled: PropTypes.bool,
   onInputUpdate: PropTypes.func.isRequired,
   onSearch: PropTypes.func.isRequired,
   actionText: PropTypes.string,
   initialInputValue: PropTypes.string,
   patternfly4: PropTypes.bool,
   autoSearchEnabled: PropTypes.bool.isRequired,
+  autoSearchDelay: PropTypes.number,
+  bookmarkController: PropTypes.string,
 };
 
 TypeAhead.defaultProps = {
   actionText: __('Search'),
   initialInputValue: '',
   patternfly4: false,
+  isDisabled: undefined,
+  autoSearchDelay: 500,
+  bookmarkController: undefined,
 };
 
 export default TypeAhead;

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

@@ -1,18 +1,19 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput } from '@patternfly/react-core';
-import { SearchIcon } from '@patternfly/react-icons';
-
+import { TextInput, Button } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
 import useEventListener from '../../../utils/useEventListener';
 import { commonInputPropTypes } from '../helpers/commonPropTypes';
 
 import './TypeAheadInput.scss';
 
 const TypeAheadInput = ({
-  onKeyPress, onInputFocus, passedProps, autoSearchEnabled,
+  onKeyPress, onInputFocus, passedProps, isDisabled, autoSearchEnabled,
 }) => {
   const inputRef = useRef(null);
-  const { onChange, ...downshiftProps } = passedProps;
+  const {
+    onChange, value, clearSearch, ...downshiftProps
+  } = passedProps;
 
   // What patternfly4 expects for args and what downshift creates as a function is different,
   // downshift only expects the event handler
@@ -21,24 +22,38 @@ const TypeAheadInput = ({
   useEventListener('keydown', onKeyPress, inputRef.current);
 
   return (
-    <React.Fragment>
+    <>
       <TextInput
+        isDisabled={isDisabled}
+        value={value}
         {...downshiftProps}
         ref={inputRef}
         onFocus={onInputFocus}
         aria-label="text input for search"
         onChange={onChangeWrapper}
-        className={autoSearchEnabled ? 'foreman-pf4-search-input' : ''}
         type="search"
+        iconVariant={autoSearchEnabled && 'search'}
       />
-      {autoSearchEnabled && <SearchIcon size="sm" className="foreman-pf4-search-icon" />}
-    </React.Fragment>
-  );
+      {
+        value && (
+          <Button
+            variant={autoSearchEnabled ? 'plain' : 'control'}
+            className="search-clear"
+            onClick={clearSearch}
+          >
+            <TimesIcon />
+          </Button>)}
+    </>);
 };
 
 TypeAheadInput.propTypes = {
+  isDisabled: PropTypes.bool,
   autoSearchEnabled: PropTypes.bool.isRequired,
   ...commonInputPropTypes,
 };
 
+TypeAheadInput.defaultProps = {
+  isDisabled: undefined,
+};
+
 export default TypeAheadInput;

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

@@ -1,11 +1,12 @@
-// Influenced by https://github.com/RedHatInsights/frontend-components/blob/41d66f3227e582a081af5f445dbdea3f97fe5160/packages/components/src/Components/ConditionalFilter/conditional-filter.scss
-
-.foreman-pf4-search-icon {
-  position: relative;
-  height: auto;
+.highlighted {
+  --pf-c-dropdown__menu-item--Color: var(--pf-c-dropdown__menu-item--hover--Color);
+  --pf-c-dropdown__menu-item--BackgroundColor: var(--pf-c-dropdown__menu-item--hover--BackgroundColor);
+  text-decoration: none;
 }
 
-.foreman-pf4-search-input {
-  padding-right: 35px;
-  margin-right: -23px;
+.search-clear {
+  margin-left: -36px;
+  z-index: 2;
+  padding: 10px;
+  display: flex;
 }

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

@@ -14,13 +14,13 @@ const TypeAheadItems = ({
   const buildDropdownItems = () => items.map(({ text, type, disabled = false }, index) => {
     const key = `${text}${index}`;
     if (type === 'divider') return (<DropdownSeparator key={key} />);
-    const isHovered = activeItems[highlightedIndex] === text;
+    const isHighlighted = highlightedIndex === index;
     const itemProps = getItemProps({
       index: activeItems.indexOf(text),
       item: text,
       key,
-      isHovered,
       disabled,
+      className: isHighlighted ? 'highlighted' : '',
     });
     const { onClick, ...dropdownProps } = itemProps;
     return (