katello 4.3.0.rc4 → 4.4.0.rc2

data/webpack/components/Search/Search.js

@@ -16,13 +16,13 @@ const Search = ({
   onSearch,
   updateSearchQuery,
   isDisabled,
-  settings: { autoSearchDelay },
+  settings: { autoSearchDelay, autoSearchEnabled = true },
   initialInputValue,
   patternfly4,
-  settings: { autoSearchEnabled },
   getAutoCompleteParams,
   foremanApiAutoComplete,
   bookmarkController,
+  placeholder,
 }) => {
   const [items, setItems] = useState([]);
   const dispatch = useDispatch();
@@ -82,6 +82,7 @@ const Search = ({
         initialInputValue={initialInputValue}
         patternfly4={patternfly4}
         autoSearchEnabled={autoSearchEnabled}
+        placeholder={placeholder}
       />
     </div>
   );
@@ -100,6 +101,7 @@ Search.propTypes = {
     autoSearchDelay: PropTypes.number,
   }),
   bookmarkController: PropTypes.string,
+  placeholder: PropTypes.string,
 };
 
 Search.defaultProps = {
@@ -112,6 +114,7 @@ Search.defaultProps = {
   },
   isDisabled: undefined,
   bookmarkController: undefined,
+  placeholder: undefined,
 };
 
 export default Search;

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

@@ -19,7 +19,7 @@ const props = {
 
 let searchDelayScope;
 beforeEach(() => {
-  searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY, 500);
+  searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY, 0);
 });
 
 afterEach(() => {
@@ -73,7 +73,7 @@ test('autosearch turned off does show patternfly 4 search button', async (done)
 });
 
 test('search function is called when search is typed into with autosearch', async (done) => {
-  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, true);
+  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING);
   const autocompleteScope = mockAutocomplete(nockInstance, endpoint, true, [], 2);
   const mockSearch = jest.fn();
 
@@ -100,7 +100,6 @@ test('search function is called by clicking search button without autosearch', a
   });
   searchButton.click();
   expect(mockSearch.mock.calls).toHaveLength(3);
-
   assertNockRequest(autoSearchScope);
   assertNockRequest(autocompleteScope, done);
 });

data/webpack/components/Select/Select.js

@@ -28,7 +28,7 @@ export default Select;
 
 Select.propTypes = {
   onChange: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.object).isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   disabled: PropTypes.bool,
   placeholder: PropTypes.string.isRequired,
   value: PropTypes.string,

data/webpack/components/SelectOrg/SelectOrgReducer.js

@@ -11,23 +11,23 @@ export default (state = initialState, action) => {
   const { payload } = action;
 
   switch (action.type) {
-    case GET_ORGANIZATIONS_LIST_REQUEST:
-      return state.set('loading', true);
+  case GET_ORGANIZATIONS_LIST_REQUEST:
+    return state.set('loading', true);
 
-    case GET_ORGANIZATIONS_LIST_SUCCESS:
-      return state
-        .set('list', payload.results)
-        .set('loading', false);
+  case GET_ORGANIZATIONS_LIST_SUCCESS:
+    return state
+      .set('list', payload.results)
+      .set('loading', false);
 
-    case CHANGE_CURRENT_ORGANIZATION_SUCCESS:
-      return state
-        .set('currentId', payload)
-        .set('loading', false);
+  case CHANGE_CURRENT_ORGANIZATION_SUCCESS:
+    return state
+      .set('currentId', payload)
+      .set('loading', false);
 
-    case GET_ORGANIZATIONS_LIST_FAILURE:
-      return state
-        .set('error', payload);
-    default:
-      return state;
+  case GET_ORGANIZATIONS_LIST_FAILURE:
+    return state
+      .set('error', payload);
+  default:
+    return state;
   }
 };

data/webpack/components/SelectOrg/SetOrganization.js

@@ -63,7 +63,7 @@ class SetOrganization extends Component {
                   placeholder={__('Select an organization')}
                   id="organization"
                   name="organization"
-                  className="form-control"
+                  className="form-control without_select2"
                   options={list}
                   onChange={this.onSelectItem}
                 />
@@ -87,7 +87,7 @@ class SetOrganization extends Component {
 
 
 SetOrganization.propTypes = {
-  list: PropTypes.arrayOf(PropTypes.object),
+  list: PropTypes.arrayOf(PropTypes.shape({})),
   loading: PropTypes.bool.isRequired,
   history: PropTypes.shape({
     push: PropTypes.func,

data/webpack/components/Table/PageControls.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Pagination, PaginationVariant, FlexItem } from '@patternfly/react-core';
-import { usePaginationOptions } from 'foremanReact/components/Pagination/PaginationHooks';
+import { FlexItem } from '@patternfly/react-core';
+import Pagination from 'foremanReact/components/Pagination';
 
 import { getPageStats } from './helpers';
 
@@ -18,10 +18,7 @@ const PageControls = ({
         itemsEnd={lastIndex}
         page={page}
         perPage={perPage}
-        isCompact={variant === PaginationVariant.top}
-        onSetPage={(_evt, updated) => onPaginationUpdate({ page: updated })}
-        onPerPageSelect={(_evt, updated) => onPaginationUpdate({ per_page: updated })}
-        perPageOptions={usePaginationOptions().map(p => ({ title: p.toString(), value: p }))}
+        onChange={onPaginationUpdate}
         variant={variant}
       />
     </FlexItem>

data/webpack/components/Table/TableHooks.js

@@ -1,5 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { isEmpty } from 'lodash';
+import { useLocation } from 'react-router-dom';
+import { friendlySearchParam } from '../../utils/helpers';
 
 class ReactConnectedSet extends Set {
   constructor(initialValue, forceRender) {
@@ -68,6 +70,7 @@ export const useSelectionSet = ({
   const pageIds = results?.map(result => result[idColumn]) ?? [];
   const selectableResults = results?.filter(result => isSelectable(result)) ?? [];
   const selectableIds = new Set(selectableResults.map(result => result[idColumn]));
+  const selectedResults = useRef({}); // { id: result }
   const canSelect = id => selectableIds.has(id);
   const areAllRowsOnPageSelected = () =>
     Number(pageIds?.length) > 0 &&
@@ -76,13 +79,28 @@ export const useSelectionSet = ({
   const areAllRowsSelected = () =>
     Number(selectionSet.size) > 0 && selectionSet.size === Number(metadata.selectable);
 
-  const selectPage = () => selectionSet.addAll(pageIds.filter(canSelect));
-  const selectNone = () => selectionSet.clear();
-  const selectOne = (isSelected, id) => {
+  const selectPage = () => {
+    const selectablePageIds = pageIds.filter(canSelect);
+    selectionSet.addAll(selectablePageIds);
+    // eslint-disable-next-line no-restricted-syntax
+    for (const result of selectableResults) {
+      selectedResults.current[result[idColumn]] = result;
+    }
+  };
+  const clearSelectedResults = () => {
+    selectedResults.current = {};
+  };
+  const selectNone = () => {
+    selectionSet.clear();
+    clearSelectedResults();
+  };
+  const selectOne = (isSelected, id, data) => {
     if (canSelect(id)) {
       if (isSelected) {
+        if (data) selectedResults.current[id] = data;
         selectionSet.add(id);
       } else {
+        delete selectedResults.current[id];
         selectionSet.delete(id);
       }
     }
@@ -102,6 +120,8 @@ export const useSelectionSet = ({
     isSelected,
     isSelectable: canSelect,
     selectionSet,
+    selectedResults: Object.values(selectedResults.current),
+    clearSelectedResults,
   };
 };
 
@@ -117,6 +137,7 @@ export const useBulkSelect = ({
   results,
   metadata,
   initialArry = [],
+  initialSearchQuery = '',
   idColumn = 'id',
   isSelectable,
 }) => {
@@ -125,7 +146,7 @@ export const useBulkSelect = ({
                   results, metadata, initialArry, idColumn, isSelectable,
                 });
   const exclusionSet = useSet([]);
-  const [searchQuery, updateSearchQuery] = useState('');
+  const [searchQuery, updateSearchQuery] = useState(initialSearchQuery);
   const [selectAllMode, setSelectAllMode] = useState(false);
   const selectedCount = selectAllMode ?
     Number(metadata.selectable) - exclusionSet.size : selectOptions.selectedCount;
@@ -155,9 +176,10 @@ export const useBulkSelect = ({
     setSelectAllMode(false);
     exclusionSet.clear();
     inclusionSet.clear();
-  }, [exclusionSet, inclusionSet]);
+    selectOptions.clearSelectedResults();
+  }, [exclusionSet, inclusionSet, selectOptions]);
 
-  const selectOne = (isRowSelected, id) => {
+  const selectOne = (isRowSelected, id, data) => {
     if (selectAllMode) {
       if (isRowSelected) {
         exclusionSet.delete(id);
@@ -165,7 +187,7 @@ export const useBulkSelect = ({
         exclusionSet.add(id);
       }
     } else {
-      selectOptions.selectOne(isRowSelected, id);
+      selectOptions.selectOne(isRowSelected, id, data);
     }
   };
 
@@ -209,6 +231,7 @@ export const useBulkSelect = ({
     selectPage,
     selectNone,
     selectAll,
+    selectAllMode,
     isSelected,
     selectedCount,
     fetchBulkParams,
@@ -219,3 +242,20 @@ export const useBulkSelect = ({
     areAllRowsSelected,
   };
 };
+
+// takes a url query like ?type=security&search=name+~+foo
+// and returns an object
+// {
+//   type: 'security',
+//   searchParam: 'name ~ foo'
+// }
+export const useUrlParams = () => {
+  const location = useLocation();
+  const { search: urlSearchParam, ...urlParams }
+    = Object.fromEntries(new URLSearchParams(location.search).entries());
+  const searchParam = urlSearchParam ? friendlySearchParam(urlSearchParam) : '';
+  return {
+    searchParam,
+    ...urlParams,
+  };
+};

data/webpack/components/Table/TableWrapper.js

@@ -26,15 +26,19 @@ const TableWrapper = ({
   foremanApiAutoComplete,
   searchQuery,
   updateSearchQuery,
+  searchPlaceholderText,
   additionalListeners,
   activeFilters,
   displaySelectAllCheckbox,
   selectAll,
+  selectAllMode,
   selectNone,
   selectPage,
   areAllRowsOnPageSelected,
   areAllRowsSelected,
   selectedCount,
+  selectedResults,
+  clearSelectedResults,
   emptySearchBody,
   disableSearch,
   nodesBelowSearch,
@@ -159,7 +163,7 @@ const TableWrapper = ({
 
   return (
     <>
-      <Flex>
+      <Flex style={{ alignItems: 'center' }} className="margin-16-24">
         {displaySelectAllCheckbox &&
           <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
             <SelectAllCheckbox
@@ -182,19 +186,21 @@ const TableWrapper = ({
             <Search
               isDisabled={unresolvedStatusOrNoRows && !searchQuery}
               patternfly4
+              initialInputValue={searchQuery && searchQuery}
               onSearch={search => updateSearchQuery(search)}
               getAutoCompleteParams={getAutoCompleteParams}
               foremanApiAutoComplete={foremanApiAutoComplete}
               bookmarkController={bookmarkController}
+              placeholder={searchPlaceholderText}
             />
           </FlexItem>
         }
         {showToggleGroup &&
-          <FlexItem style={{ marginLeft: '16px' }}>
+          <FlexItem>
             {toggleGroup}
           </FlexItem>}
         {showActionButtons &&
-          <FlexItem style={{ marginLeft: '16px' }}>
+          <FlexItem>
             {actionButtons}
           </FlexItem>}
 
@@ -208,7 +214,11 @@ const TableWrapper = ({
           />
         }
       </Flex>
-      {nodesBelowSearch}
+      {nodesBelowSearch &&
+        <Flex className="margin-16-24 gap-16" style={{ alignItems: 'center' }}>
+          {nodesBelowSearch}
+        </Flex>
+      }
       <MainTable
         searchIsActive={!!searchQuery}
         activeFilters={activeFilters}
@@ -256,6 +266,7 @@ TableWrapper.propTypes = {
   }),
   autocompleteEndpoint: PropTypes.string.isRequired,
   foremanApiAutoComplete: PropTypes.bool,
+  searchPlaceholderText: PropTypes.string,
   actionButtons: PropTypes.node,
   toggleGroup: PropTypes.node,
   children: PropTypes.node,
@@ -275,7 +286,10 @@ TableWrapper.propTypes = {
   ])),
   displaySelectAllCheckbox: PropTypes.bool,
   selectedCount: PropTypes.number,
+  selectedResults: PropTypes.arrayOf(PropTypes.shape({})),
+  clearSelectedResults: PropTypes.func,
   selectAll: PropTypes.func,
+  selectAllMode: PropTypes.bool,
   selectNone: PropTypes.func,
   selectPage: PropTypes.func,
   areAllRowsOnPageSelected: PropTypes.func,
@@ -293,13 +307,17 @@ TableWrapper.defaultProps = {
   activeFilters: [],
   defaultFilters: [],
   foremanApiAutoComplete: false,
+  searchPlaceholderText: undefined,
   actionButtons: null,
   toggleGroup: null,
   displaySelectAllCheckbox: false,
   selectedCount: 0,
-  selectAll: noop,
-  selectNone: noop,
-  selectPage: noop,
+  selectedResults: [],
+  clearSelectedResults: noop,
+  selectAll: undefined,
+  selectAllMode: false,
+  selectNone: undefined,
+  selectPage: undefined,
   areAllRowsOnPageSelected: noop,
   areAllRowsSelected: noop,
   emptySearchBody: __('Try changing your search settings.'),

data/webpack/components/TypeAhead/TypeAhead.js

@@ -22,6 +22,7 @@ const TypeAhead = ({
   autoSearchEnabled,
   autoSearchDelay,
   bookmarkController,
+  placeholder,
 }) => {
   const [inputValue, setInputValue] = useState(initialInputValue);
 
@@ -79,6 +80,7 @@ const TypeAhead = ({
           onSearch,
           items,
           activeItems,
+          placeholder,
           shouldShowItems: isOpen && items.length > 0,
         };
 
@@ -86,7 +88,7 @@ const TypeAhead = ({
           <div>
             {patternfly4 ?
               <TypeAheadSearchPf4 autoSearchEnabled={autoSearchEnabled} {...typeAheadProps} /> :
-              <TypeAheadSearch actionText={actionText} {...typeAheadProps} />}
+              <TypeAheadSearch actionText={actionText} {...typeAheadProps} placeholder={null} />}
           </div>
         );
       }}
@@ -112,6 +114,7 @@ TypeAhead.propTypes = {
   autoSearchEnabled: PropTypes.bool.isRequired,
   autoSearchDelay: PropTypes.number,
   bookmarkController: PropTypes.string,
+  placeholder: PropTypes.string,
 };
 
 TypeAhead.defaultProps = {
@@ -121,6 +124,7 @@ TypeAhead.defaultProps = {
   isDisabled: undefined,
   autoSearchDelay: 500,
   bookmarkController: undefined,
+  placeholder: undefined,
 };
 
 export default TypeAhead;

data/webpack/components/TypeAhead/helpers/commonPropTypes.js

@@ -26,7 +26,7 @@ export const commonInputPropTypes = {
 };
 
 export const commonItemPropTypes = {
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   activeItems: PropTypes.arrayOf(PropTypes.string).isRequired,
   highlightedIndex: PropTypes.number.isRequired,
   getItemProps: PropTypes.func.isRequired,

data/webpack/components/TypeAhead/helpers/helpers.js

@@ -5,22 +5,22 @@ const keyPressHandler = (
   selectItem, userInputValue, onSearch,
 ) => {
   switch (e.keyCode) {
-    case KEYCODES.TAB_KEY:
-      if (isOpen && activeItems[highlightedIndex]) {
-        selectItem(activeItems[highlightedIndex]);
-        e.preventDefault();
-      }
-      break;
+  case KEYCODES.TAB_KEY:
+    if (isOpen && activeItems[highlightedIndex]) {
+      selectItem(activeItems[highlightedIndex]);
+      e.preventDefault();
+    }
+    break;
 
-    case KEYCODES.ENTER:
-      if (!isOpen || !activeItems[highlightedIndex]) {
-        onSearch(userInputValue);
-        e.preventDefault();
-      }
-      break;
+  case KEYCODES.ENTER:
+    if (!isOpen || !activeItems[highlightedIndex]) {
+      onSearch(userInputValue);
+      e.preventDefault();
+    }
+    break;
 
-    default:
-      break;
+  default:
+    break;
   }
 };
 

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

@@ -18,7 +18,7 @@ const TypeAheadSearch = ({
         onKeyPress={e => keyPressHandler(
           e, isOpen, activeItems, highlightedIndex,
           selectItem, userInputValue, onSearch,
-)}
+        )}
         onInputFocus={openMenu}
         passedProps={getInputProps()}
       />

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,
+  onKeyPress, onInputFocus, passedProps, isDisabled, autoSearchEnabled, placeholder,
 }) => {
   const inputRef = useRef(null);
   const {
@@ -33,6 +33,7 @@ const TypeAheadInput = ({
         onChange={onChangeWrapper}
         type="search"
         iconVariant={autoSearchEnabled && 'search'}
+        placeholder={placeholder}
       />
       {
         value && (
@@ -50,10 +51,12 @@ TypeAheadInput.propTypes = {
   isDisabled: PropTypes.bool,
   autoSearchEnabled: PropTypes.bool.isRequired,
   ...commonInputPropTypes,
+  placeholder: PropTypes.string,
 };
 
 TypeAheadInput.defaultProps = {
   isDisabled: undefined,
+  placeholder: '',
 };
 
 export default TypeAheadInput;

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

@@ -12,7 +12,7 @@ import Bookmark from './../../../components/Bookmark';
 const TypeAheadSearch = ({
   userInputValue, clearSearch, getInputProps, getItemProps, isOpen, highlightedIndex,
   selectedItem, selectItem, openMenu, onSearch, items, activeItems, shouldShowItems,
-  autoSearchEnabled, isDisabled, bookmarkController, inputValue,
+  autoSearchEnabled, isDisabled, bookmarkController, inputValue, placeholder,
 }) => (
   <>
     <InputGroup>
@@ -34,6 +34,7 @@ const TypeAheadSearch = ({
         onInputFocus={openMenu}
         passedProps={{ ...getInputProps(), clearSearch }}
         autoSearchEnabled={autoSearchEnabled}
+        placeholder={placeholder}
       />
       <>
         {bookmarkController &&

data/webpack/components/WithOrganization/withOrganization.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-indent */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
@@ -46,14 +47,13 @@ function withOrganization(WrappedComponent) {
 
       if (newOrgSelected) {
         if (!organization.label && !organization.loading) { this.props.loadOrganization(); }
-
         return <WrappedComponent {...this.props} />;
       } else if (this.state.orgId === '') {
         return (
-          <React.Fragment>
+          <>
             <Header title={__('Select Organization')} />
             <SetOrganization />
-          </React.Fragment>);
+          </>);
       }
       return <WrappedComponent {...this.props} />;
     }

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

@@ -26,7 +26,7 @@ const HostContentViewDetails = ({
   }
 
   return (
-    <GridItem rowSpan={2} md={6} lg={4}>
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
       <Card isHoverable>
         <CardHeader>
           <CardTitle>{__('Content view details')}</CardTitle>

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  Flex,
+  FlexItem,
+  GridItem,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { propsToCamelCase } from 'foremanReact/common/helpers';
+import PropTypes from 'prop-types';
+import { ChartPie } from '@patternfly/react-charts';
+import { ErrataMapper } from '../../../../components/Errata';
+
+function HostInstallableErrata({
+  id, errataCounts,
+}) {
+  const errataTotal = errataCounts.total;
+  const errataSecurity = errataCounts.security;
+  const errataBug = errataCounts.bugfix;
+  const errataEnhance = errataCounts.enhancement;
+  const chartData = [{
+    w: 'security advisories', x: 'security', y: errataSecurity, z: errataTotal,
+  }, {
+    w: 'bug fixes', x: 'bugfix', y: errataBug, z: errataTotal,
+  }, {
+    w: 'enhancements', x: 'enhancement', y: errataEnhance, z: errataTotal,
+  }];
+  return (
+    <GridItem rowSpan={1} md={6} lg={4} xl2={3} >
+      <Card isHoverable>
+        <CardHeader>
+          <CardTitle>{__('Installable Errata')}</CardTitle>
+        </CardHeader>
+        <CardBody>
+          <Flex direction="column">
+            <FlexItem>
+              <a href="#/Content/errata">
+                {errataTotal} errata
+              </a>
+            </FlexItem>
+            <Flex flexWrap={{ xl: 'nowrap' }} direction="row" alignItems={{ default: 'alignItemsCenter' }}>
+              <div className="piechart-overflow" style={{ overflow: 'visible', minWidth: '140px', maxHeight: '155px' }}>
+                <div className="erratachart" style={{ minWidth: '300px', minHeight: '300px' }}>
+                  <ChartPie
+                    ariaDesc="errataChart"
+                    data={chartData}
+                    constrainToVisibleArea
+                    labels={({ datum }) => `${datum.y} ${datum.w}`}
+                    padding={{
+                      bottom: 20,
+                      left: 20,
+                      right: 140,
+                      top: 20,
+                    }}
+                    width={250}
+                    height={130}
+                  />
+                </div>
+              </div>
+              <div className="erratalegend" style={{ minWidth: '140px' }}>
+                <FlexItem>
+                  <ErrataMapper data={chartData} id={id} />
+                </FlexItem>
+              </div>
+            </Flex>
+          </Flex>
+        </CardBody>
+      </Card>
+    </GridItem>
+  );
+}
+
+const ErrataOverviewCard = ({ hostDetails }) => {
+  if (hostDetails.content_facet_attributes) {
+    const { id: hostId } = hostDetails;
+    return (<HostInstallableErrata
+      {...propsToCamelCase(hostDetails.content_facet_attributes)}
+      id={hostId}
+    />);
+  }
+  return null;
+};
+
+HostInstallableErrata.propTypes = {
+  id: PropTypes.number.isRequired,
+  errataCounts: PropTypes.shape({
+    bugfix: PropTypes.number,
+    enhancement: PropTypes.number,
+    security: PropTypes.number,
+    total: PropTypes.number,
+  }).isRequired,
+};
+
+ErrataOverviewCard.propTypes = {
+  hostDetails: PropTypes.shape({
+    content_facet_attributes: PropTypes.shape({}),
+    id: PropTypes.number,
+  }),
+};
+
+ErrataOverviewCard.defaultProps = {
+  hostDetails: {},
+};
+
+export default ErrataOverviewCard;