katello 4.3.0.rc4 → 4.4.0.rc2

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/ContentDetails.js

@@ -37,7 +37,7 @@ const ContentDetails = (props) => {
         loadingText={__('Loading')}
       >
         <TabContainer id="content-tabs-container" defaultActiveKey={1}>
-          <Grid bsClass="container-fluid">
+          <Grid>
             <Row>
               <Col sm={12}>
                 <Nav id="content-nav-container" bsClass="nav nav-tabs">

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/Details/__tests__/__snapshots__/ContentDetails.test.js.snap

@@ -12,7 +12,7 @@ exports[`Content Details Info should render and contain appropriate components 1
       id="content-tabs-container"
     >
       <Grid
-        bsClass="container-fluid"
+        bsClass="container"
         componentClass="div"
         fluid={false}
       >

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,35 +1,97 @@
 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,
   SecurityIcon,
   EnhancementIcon,
+  SquareIcon,
 } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
 
+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>;
+    break;
+  case 'recommended':
+  case 'bugfix':
+    label = __('Bugfix');
+    ErrataIcon = BugIcon;
+    name = 'bug fixes';
+    color = '#8bc1f7';
+    url = <a href="#/Content/errata?type=bugfix"> {count} {name} </a>;
+    break;
+  case 'enhancement':
+  case 'optional':
+    label = __('Enhancement');
+    ErrataIcon = EnhancementIcon;
+    name = 'enhancements';
+    color = '#002f5d';
+    url = <a href="#/Content/errata?type=enhancement"> {count} {name} </a>;
+    break;
+  default:
+  }
+  if (!ErrataIcon) return null;
+
+  return (
+    <span style={{ whiteSpace: 'normal', fontSize: 'small' }}>
+      <TableText>
+        <SquareIcon size="sm" color={color} />
+        <span style={{ marginLeft: '8px' }}>
+          <ErrataIcon title={label} />
+          {url}
+        </span>
+      </TableText>
+    </span>
+  );
+};
+
+ErrataSummary.propTypes = {
+  type: PropTypes.string.isRequired,
+  count: PropTypes.number.isRequired,
+};
+
 export const ErrataType = ({ type }) => {
   let ErrataIcon;
   let label;
   switch (type) {
-    case 'security':
-      label = __('Security');
-      ErrataIcon = SecurityIcon;
-      break;
-    case 'recommended':
-    case 'bugfix':
-      label = __('Bugfix');
-      ErrataIcon = BugIcon;
-      break;
-    case 'enhancement':
-    case 'optional':
-      label = __('Enhancement');
-      ErrataIcon = EnhancementIcon;
-      break;
-    default:
+  case 'security':
+    label = __('Security');
+    ErrataIcon = SecurityIcon;
+    break;
+  case 'recommended':
+  case 'bugfix':
+    label = __('Bugfix');
+    ErrataIcon = BugIcon;
+    break;
+  case 'enhancement':
+  case 'optional':
+    label = __('Enhancement');
+    ErrataIcon = EnhancementIcon;
+    break;
+  default:
   }
   if (!ErrataIcon) return null;
 
+
   return (
     <TableText wrapModifier="nowrap">
       <ErrataIcon title={label} /> {label}
@@ -46,20 +108,24 @@ export const ErrataSeverity = ({ severity }) => {
   let label;
 
   switch (severity) {
-    case 'Moderate':
-      color = 'yellow';
-      label = __('Moderate');
-      break;
-    case 'Important':
-      color = 'orange';
-      label = __('Important');
-      break;
-    case 'Critical':
-      color = 'red';
-      label = __('Critical');
-      break;
-    default:
-      label = __('N/A');
+  case 'Low':
+    color = pfBlack.value;
+    label = __('Low');
+    break;
+  case 'Moderate':
+    color = pfGold.value;
+    label = __('Moderate');
+    break;
+  case 'Important':
+    color = pfOrange.value;
+    label = __('Important');
+    break;
+  case 'Critical':
+    color = pfRed.value;
+    label = __('Critical');
+    break;
+  default:
+    label = __('N/A');
   }
   return <TableText wrapModifier="nowrap">{color && <SecurityIcon color={color} title={label} />} {label} </TableText>;
 };

data/webpack/components/ErratumTypeLabel.js

@@ -5,22 +5,22 @@ import { translate as __ } from 'foremanReact/common/I18n';
 
 const ErratumTypeLabel = ({ type }) => {
   switch (type) {
-    case 'bugfix':
-      return (
-        <p><BugIcon />{' '}{__('Bugfix')}</p>
-      );
-    case 'enhancement':
-      return (
-        <p><EnhancementIcon />{' '}{__('Enhancement')}</p>
-      );
-    case 'security':
-      return (
-        <p><SecurityIcon />{' '}{__('Security')}</p>
-      );
-    default:
-      return (
-        <p><UnknownIcon /> {type}</p>
-      );
+  case 'bugfix':
+    return (
+      <p><BugIcon />{' '}{__('Bugfix')}</p>
+    );
+  case 'enhancement':
+    return (
+      <p><EnhancementIcon />{' '}{__('Enhancement')}</p>
+    );
+  case 'security':
+    return (
+      <p><SecurityIcon />{' '}{__('Security')}</p>
+    );
+  default:
+    return (
+      <p><UnknownIcon /> {type}</p>
+    );
   }
 };
 

data/webpack/components/MultiSelect/index.js

@@ -34,12 +34,12 @@ function MultiSelect(props) {
 }
 
 MultiSelect.defaultProps = {
-  onChange: () => {},
+  onChange: () => { },
   defaultValues: null,
 };
 
 MultiSelect.propTypes = {
-  options: PropTypes.arrayOf(PropTypes.object).isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   onChange: PropTypes.func,
   defaultValues: PropTypes.arrayOf(PropTypes.string),
 };

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/RoutedTabs/index.js

@@ -33,6 +33,7 @@ const RoutedTabs = ({
     <>
       <Tabs
         activeKey={currentTabFromUrl}
+        className="margin-0-24"
       >
         {tabs.map(({ key, title }) => (
           <a
@@ -49,7 +50,7 @@ const RoutedTabs = ({
           </a>
         ))}
       </Tabs>
-      <div className="tab-body-with-spacing">
+      <div className="margin-16-0">
         <HashRouter key={locationKey}>
           <Switch>
             {tabs.map(({ key, content }) => (