katello 4.3.0 → 4.4.0.rc1

data/webpack/__mocks__/foremanReact/{redux/actions/toasts.js → components/ToastsList/index.js}

@@ -1,7 +1,8 @@
 export const addToast = toast => ({
-  type: 'TOASTS_ADD',
+  type: 'toasts/addToast',
   payload: {
-    message: toast,
+    key: 'addToast',
+    toast,
   },
 });
 

data/webpack/components/ActionableDetail.js

@@ -4,6 +4,7 @@ import {
   TextListItemVariants,
   Tooltip,
   TooltipPosition,
+  Spinner,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
@@ -23,33 +24,43 @@ const ActionableDetail = ({
   currentAttribute,
   setCurrentAttribute,
   disabled,
+  loading,
+  ...rest
 }) => {
   const displayProps = {
-    attribute, value, onEdit, disabled,
+    attribute, value, onEdit, disabled, currentAttribute, setCurrentAttribute, ...rest,
   };
 
   return (
     <React.Fragment key={label}>
-      <TextListItem component={TextListItemVariants.dt}>
-        {label}
-        {tooltip &&
-          <span className="foreman-spaced-icon">
-            <Tooltip
-              position={TooltipPosition.top}
-              content={tooltip}
-            >
-              <OutlinedQuestionCircleIcon />
-            </Tooltip>
-          </span>
-        }
-      </TextListItem>
+      {label &&
+        <TextListItem component={TextListItemVariants.dt}>
+          {label}
+          {tooltip &&
+            <span className="foreman-spaced-icon">
+              <Tooltip
+                position={TooltipPosition.top}
+                content={tooltip}
+              >
+                <OutlinedQuestionCircleIcon />
+              </Tooltip>
+            </span>
+          }
+        </TextListItem>
+      }
       <TextListItem component={TextListItemVariants.dd} className="foreman-spaced-list">
-        {boolean ?
-          <EditableSwitch {...displayProps} /> :
-          <EditableTextInput {...{
-            ...displayProps, textArea, onEdit, currentAttribute, setCurrentAttribute,
-          }}
-          />}
+        {loading ?
+          <Spinner
+            key={label + currentAttribute}
+            size="lg"
+          /> :
+          <>{boolean ?
+            <EditableSwitch {...displayProps} /> :
+            <EditableTextInput {...{
+              ...displayProps, textArea,
+            }}
+            />}
+          </>}
       </TextListItem>
     </React.Fragment>
   );
@@ -57,7 +68,7 @@ const ActionableDetail = ({
 
 ActionableDetail.propTypes = {
   attribute: PropTypes.string.isRequired, // back-end name for API call
-  label: PropTypes.string.isRequired, // displayed label
+  label: PropTypes.string,
   value: PropTypes.oneOfType([ // displayed value
     PropTypes.string,
     PropTypes.bool,
@@ -69,9 +80,11 @@ ActionableDetail.propTypes = {
   currentAttribute: PropTypes.string,
   setCurrentAttribute: PropTypes.func,
   disabled: PropTypes.bool,
+  loading: PropTypes.bool,
 };
 
 ActionableDetail.defaultProps = {
+  label: undefined,
   textArea: false,
   boolean: false,
   tooltip: null,
@@ -79,6 +92,7 @@ ActionableDetail.defaultProps = {
   currentAttribute: undefined,
   setCurrentAttribute: undefined,
   disabled: false,
+  loading: false,
 };
 
 export default ActionableDetail;

data/webpack/components/Content/Details/__tests__/ContentDetailInfo.test.js

@@ -4,8 +4,6 @@ import toJson from 'enzyme-to-json';
 import { Table } from 'react-bootstrap';
 import ContentDetailInfo from '../ContentDetailInfo';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper', () => (<div>Pagination Mock</div>));
-
 describe('Content Details Info', () => {
   it('should render and contain appropriate components', async () => {
     const displayMap = new Map([

data/webpack/components/Content/Details/__tests__/ContentDetailRepositories.test.js

@@ -1,8 +1,6 @@
 import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
 import ContentDetailRepositories from '../ContentDetailRepositories';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper');
-
 const fixtures = {
   'renders with repositories': {
     repositories: [

data/webpack/components/Content/Details/__tests__/ContentDetails.test.js

@@ -6,8 +6,6 @@ import ContentDetailInfo from '../ContentDetailInfo';
 import ContentDetailRepositories from '../ContentDetailRepositories';
 import ContentDetails from '../ContentDetails';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper', () => (<div>Pagination Mock</div>));
-
 describe('Content Details Info', () => {
   it('should render and contain appropriate components', async () => {
     const detail = {

data/webpack/components/Content/__tests__/ContentPage.test.js

@@ -5,8 +5,6 @@ import ContentPage from '../ContentPage';
 import ContentTable from '../ContentTable';
 import Search from '../../../components/Search/index';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper', () => (<div>Pagination Mock</div>));
-
 describe('Content page', () => {
   it('should render and contain appropriate components', async () => {
     const contentHeader = 'Content Header';

data/webpack/components/Content/__tests__/ContentTable.test.js

@@ -5,8 +5,6 @@ import ContentTable from '../ContentTable';
 import { LoadingState } from '../../../components/LoadingState';
 import { Table } from '../../../components/pf3Table';
 
-jest.mock('foremanReact/components/Pagination/PaginationWrapper', () => (<div>Pagination Mock</div>));
-
 describe('Content Table', () => {
   it('should render and contain appropriate components', async () => {
     const content = {

data/webpack/components/EditableSwitch.js

@@ -4,16 +4,20 @@ import { noop } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
 
 const EditableSwitch = ({
-  value, attribute, onEdit, disabled,
+  value, attribute, onEdit, disabled, setCurrentAttribute,
 }) => {
   const identifier = `${attribute} switch`;
+  const onSwitch = (val) => {
+    if (setCurrentAttribute) setCurrentAttribute(attribute);
+    onEdit(val, attribute);
+  };
 
   return (
     <Switch
       id={identifier}
       aria-label={identifier}
       isChecked={value}
-      onChange={v => onEdit(v, attribute)}
+      onChange={onSwitch}
       disabled={disabled}
     />
   );
@@ -24,12 +28,14 @@ EditableSwitch.propTypes = {
   attribute: PropTypes.string,
   onEdit: PropTypes.func,
   disabled: PropTypes.bool,
+  setCurrentAttribute: PropTypes.func,
 };
 
 EditableSwitch.defaultProps = {
   attribute: '',
   onEdit: noop,
   disabled: false,
+  setCurrentAttribute: undefined,
 };
 
 export default EditableSwitch;

data/webpack/components/EditableTextInput/EditableTextInput.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import {
-  TextInput, TextArea, Text, Button, Split,
-  SplitItem, Tooltip, TooltipPosition,
+  TextInput, TextArea, Text, Button, Split, SplitItem, Tooltip, TooltipPosition,
 } from '@patternfly/react-core';
 import {
   EyeIcon,
@@ -12,7 +11,6 @@ import {
 } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
-import Loading from '../Loading';
 import './editableTextInput.scss';
 
 const PASSWORD_MASK = '••••••••';
@@ -21,10 +19,8 @@ const EditableTextInput = ({
   onEdit, value, textArea, attribute, placeholder, isPassword, hasPassword,
   component, currentAttribute, setCurrentAttribute, disabled,
 }) => {
-  // Tracks input box state
   const [inputValue, setInputValue] = useState(value);
   const [editing, setEditing] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
   const [passwordPlaceholder, setPasswordPlaceholder] = useState(hasPassword
     ? PASSWORD_MASK : null);
   const [showPassword, setShowPassword] = useState(false);
@@ -39,63 +35,26 @@ const EditableTextInput = ({
 
   const onEditClick = () => {
     setEditing(true);
-    if (setCurrentAttribute) setCurrentAttribute(attribute);
+    if (isPassword) setPasswordPlaceholder(null);
+    if (setCurrentAttribute && attribute !== currentAttribute) setCurrentAttribute(attribute);
+  };
 
+  const onSubmit = async () => {
+    setEditing(false);
     if (isPassword) {
-      if (passwordPlaceholder) {
-        setPasswordPlaceholder(null);
+      if (inputValue?.length > 0) {
+        setPasswordPlaceholder(PASSWORD_MASK);
       }
     }
+    await onEdit(inputValue, attribute);
   };
 
-  // Setting didCancel to prevent actions from happening after component has been unmounted
-  // see https://overreacted.io/a-complete-guide-to-useeffect/#speaking-of-race-conditions
-  useEffect(() => {
-    let didCancel = false;
-
-    const onSubmit = async () => {
-      if (submitting) { // no dependency array because this check takes care of it
-        await onEdit(inputValue, attribute);
-
-        if (!didCancel) {
-          setSubmitting(false);
-          setEditing(false);
-
-          if (isPassword) {
-            if (inputValue?.length > 0) {
-              setPasswordPlaceholder(PASSWORD_MASK);
-            }
-          }
-        }
-      }
-    };
-    onSubmit();
-
-    return () => {
-      didCancel = true;
-    };
-  });
-
-  // Listen for enter and trigger submit workflow on enter
-  useEffect(() => {
-    const listener = (event) => {
-      if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-        if (editing) setSubmitting(true);
-      }
-    };
-    document.addEventListener('keydown', listener);
-    return () => {
-      document.removeEventListener('keydown', listener);
-    };
-  }, [editing]);
-
   const onClear = () => {
     if (isPassword) {
       if (hasPassword || inputValue?.length > 0) {
         setPasswordPlaceholder(PASSWORD_MASK);
       }
     }
-
     setInputValue(value);
     setEditing(false);
   };
@@ -104,49 +63,48 @@ const EditableTextInput = ({
     setShowPassword(prevShowPassword => !prevShowPassword);
   };
 
+  const onKeyUp = ({ key, charCode }) => (key === 'Enter' || charCode === '13') && onSubmit();
+
   const inputProps = {
+    onKeyUp,
     component,
     value: inputValue || '',
-    onChange: v => setInputValue(v),
+    onChange: setInputValue,
   };
 
-  if (submitting) return <Loading size="sm" />;
-  if (editing) {
-    return (
-      <Split>
-        <SplitItem>
-          {textArea ?
-            (<TextArea {...inputProps} aria-label={`${attribute} text area`} />) :
-            (<TextInput {...inputProps} type={(isPassword && !showPassword) ? 'password' : 'text'} aria-label={`${attribute} text input`} />)}
-        </SplitItem>
-        <SplitItem>
-          <Button
-            aria-label={`submit ${attribute}`}
-            variant="plain"
-            onClick={() => setSubmitting(true)}
-          >
-            <CheckIcon />
-          </Button>
-        </SplitItem>
+  return editing ? (
+    <Split>
+      <SplitItem>
+        {textArea ?
+          (<TextArea {...inputProps} aria-label={`${attribute} text area`} />) :
+          (<TextInput {...inputProps} type={(isPassword && !showPassword) ? 'password' : 'text'} aria-label={`${attribute} text input`} />)}
+      </SplitItem>
+      <SplitItem>
+        <Button
+          aria-label={`submit ${attribute}`}
+          variant="plain"
+          onClick={onSubmit}
+        >
+          <CheckIcon />
+        </Button>
+      </SplitItem>
+      <SplitItem>
+        <Button aria-label={`clear ${attribute}`} variant="plain" onClick={onClear}>
+          <TimesIcon />
+        </Button>
+      </SplitItem>
+      {isPassword ?
         <SplitItem>
-          <Button aria-label={`clear ${attribute}`} variant="plain" onClick={onClear}>
-            <TimesIcon />
+          <Button aria-label={`show-password ${attribute}`} variant="plain" isDisabled={!inputValue?.length} onClick={toggleShowPassword}>
+            {showPassword ?
+              (<EyeSlashIcon />) :
+              (<EyeIcon />)}
           </Button>
-        </SplitItem>
-        {isPassword ?
-          <SplitItem>
-            <Button aria-label={`show-password ${attribute}`} variant="plain" isDisabled={!inputValue?.length} onClick={toggleShowPassword}>
-              {showPassword ?
-                (<EyeSlashIcon />) :
-                (<EyeIcon />)}
-            </Button>
-          </SplitItem> :
-          null
-        }
-      </Split>
-    );
-  }
-  return (
+        </SplitItem> :
+        null
+      }
+    </Split>
+  ) : (
     <Split>
       <SplitItem>
         {inputValue ?

data/webpack/components/EditableTextInput/__tests__/editableTextInput.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { head } from 'lodash';
 import EditableTextInput from '../EditableTextInput';
 
 const actualValue = 'burger';
@@ -17,7 +18,6 @@ test('Passed function is called after editing and clicking submit', async () =>
   getByLabelText(`edit ${attribute}`).click();
   fireEvent.change(getByLabelText(`${attribute} text input`), { target: { value: actualValue } });
   getByLabelText(`submit ${attribute}`).click();
-
   await patientlyWaitFor(() => expect(mockEdit.mock.calls).toHaveLength(1));
   expect(mockEdit.mock.calls[0][0]).toBe(actualValue); // first arg
 });
@@ -29,10 +29,10 @@ test('Passed function is called after editing and hitting enter', async () => {
   getByLabelText(`edit ${attribute}`).click();
   const textInputLabel = `${attribute} text input`;
   fireEvent.change(getByLabelText(textInputLabel), { target: { value: actualValue } });
-  fireEvent.keyDown(getByLabelText(textInputLabel), { key: 'Enter', code: 'Enter' });
+  fireEvent.keyUp(getByLabelText(textInputLabel), { key: 'Enter', code: 'Enter' });
 
   await patientlyWaitFor(() => expect(mockEdit.mock.calls).toHaveLength(1));
-  expect(mockEdit.mock.calls[0][0]).toBe(actualValue); // first arg
+  expect(head(mockEdit.mock.calls)).toContain(actualValue); // first arg
 });
 
 test('input is set back to original value after clearing', () => {

data/webpack/components/Errata/index.js

@@ -1,5 +1,11 @@
 import React from 'react';
 import { TableText } from '@patternfly/react-table';
+import {
+  chart_color_black_500 as pfBlack,
+  chart_color_gold_400 as pfGold,
+  chart_color_orange_300 as pfOrange,
+  chart_color_red_200 as pfRed,
+} from '@patternfly/react-tokens';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {
   BugIcon,
@@ -8,11 +14,10 @@ import {
   SquareIcon,
 } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
-import { urlBuilder } from 'foremanReact/common/urlHelpers';
 
 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, id }) => {
+export const ErrataSummary = ({ type, count }) => {
   let ErrataIcon;
   let label;
   let name;
@@ -24,7 +29,7 @@ export const ErrataSummary = ({ type, count, id }) => {
       ErrataIcon = SecurityIcon;
       name = 'security advisories';
       color = '#0066cc';
-      url = <a href={urlBuilder(`content_hosts/${id}/errata`, '')}> {count} {name} </a>;
+      url = <a href="#/Content/errata?type=security"> {count} {name} </a>;
       break;
     case 'recommended':
     case 'bugfix':
@@ -32,7 +37,7 @@ export const ErrataSummary = ({ type, count, id }) => {
       ErrataIcon = BugIcon;
       name = 'bug fixes';
       color = '#8bc1f7';
-      url = <a href={urlBuilder(`content_hosts/${id}/errata`, '')}> {count} {name} </a>;
+      url = <a href="#/Content/errata?type=bugfix"> {count} {name} </a>;
       break;
     case 'enhancement':
     case 'optional':
@@ -40,15 +45,15 @@ export const ErrataSummary = ({ type, count, id }) => {
       ErrataIcon = EnhancementIcon;
       name = 'enhancements';
       color = '#002f5d';
-      url = <a href={urlBuilder(`content_hosts/${id}/errata`, '')}> {count} {name} </a>;
+      url = <a href="#/Content/errata?type=enhancement"> {count} {name} </a>;
       break;
     default:
   }
   if (!ErrataIcon) return null;
 
   return (
-    <span style={{ whiteSpace: 'nowrap' }}>
-      <TableText wrapModifier="nowrap">
+    <span style={{ whiteSpace: 'normal', fontSize: 'small' }}>
+      <TableText>
         <SquareIcon size="sm" color={color} />
         <span style={{ marginLeft: '8px' }}>
           <ErrataIcon title={label} />
@@ -62,7 +67,6 @@ export const ErrataSummary = ({ type, count, id }) => {
 ErrataSummary.propTypes = {
   type: PropTypes.string.isRequired,
   count: PropTypes.number.isRequired,
-  id: PropTypes.number.isRequired,
 };
 
 export const ErrataType = ({ type }) => {
@@ -104,16 +108,20 @@ export const ErrataSeverity = ({ severity }) => {
   let label;
 
   switch (severity) {
+    case 'Low':
+      color = pfBlack.value;
+      label = __('Low');
+      break;
     case 'Moderate':
-      color = 'yellow';
+      color = pfGold.value;
       label = __('Moderate');
       break;
     case 'Important':
-      color = 'orange';
+      color = pfOrange.value;
       label = __('Important');
       break;
     case 'Critical':
-      color = 'red';
+      color = pfRed.value;
       label = __('Critical');
       break;
     default:

data/webpack/components/Packages/index.js

@@ -45,7 +45,7 @@ export const PackagesLatestVersion = ({ name, upgradable_version: upgradableVers
 
   if (upgradableVersion == null) {
     label = '';
-    color = 'green';
+    color = 'black';
   } else {
     label = upgradableVersion.replace(`${name}-`, '');
   }

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/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}
                 />

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>