katello 4.2.1 → 4.3.0.rc1

data/webpack/components/Errata/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { TableText } from '@patternfly/react-table';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  BugIcon,
+  SecurityIcon,
+  EnhancementIcon,
+} from '@patternfly/react-icons';
+import PropTypes from 'prop-types';
+
+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:
+  }
+  if (!ErrataIcon) return null;
+
+  return (
+    <TableText wrapModifier="nowrap">
+      <ErrataIcon title={label} /> {label}
+    </TableText>
+  );
+};
+
+ErrataType.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export const ErrataSeverity = ({ severity }) => {
+  let color;
+  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');
+  }
+  return <TableText wrapModifier="nowrap">{color && <SecurityIcon color={color} title={label} />} {label} </TableText>;
+};
+
+ErrataSeverity.propTypes = {
+  severity: PropTypes.string.isRequired,
+};

data/webpack/components/ErratumTypeLabel.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BugIcon, EnhancementIcon, SecurityIcon, UnknownIcon } from '@patternfly/react-icons';
+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>
+      );
+  }
+};
+
+ErratumTypeLabel.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export default ErratumTypeLabel;

data/webpack/components/Loading.js

@@ -7,14 +7,15 @@ import {
   EmptyStateIcon,
   Spinner,
 } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
 
-const Loading = ({ size, showText }) => (
+const Loading = ({ size, showText, loadingText }) => (
   <Bullseye>
     <EmptyState>
       <EmptyStateIcon size={size} variant="container" component={Spinner} />
       {showText && (
         <Title size={size} headingLevel="h4">
-          Loading
+          {loadingText || __('Loading')}
         </Title>)}
     </EmptyState>
   </Bullseye>
@@ -23,11 +24,13 @@ const Loading = ({ size, showText }) => (
 Loading.propTypes = {
   size: PropTypes.string,
   showText: PropTypes.bool,
+  loadingText: PropTypes.string,
 };
 
 Loading.defaultProps = {
   size: 'lg',
   showText: true,
+  loadingText: null,
 };
 
 

data/webpack/components/RoutedTabs/__tests__/RoutedTabs.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { renderWithRouter } from 'react-testing-lib-wrapper';
+import { head } from 'lodash';
 
 import RoutedTabs from '../';
 
@@ -8,25 +9,18 @@ const tabs = [
     key: 'apples',
     title: 'Apples',
     content: <>good for pies!</>,
+    path: '/fruits',
   },
   {
     key: 'pears',
     title: 'Pears',
     content: <>good for a snack!</>,
+    path: '/fruits',
   },
 ];
 
 test('can render tabs and show default tab', async () => {
-  const { getByText } = renderWithRouter(<RoutedTabs tabs={tabs} baseUrl="/fruits" defaultTabIndex={1} />);
-
-  expect(getByText('Pears')).toBeInTheDocument();
-  expect(getByText('good for a snack!')).toBeInTheDocument();
-});
-
-test('can switch tabs and render content', async () => {
-  const { getByText } = renderWithRouter(<RoutedTabs tabs={tabs} baseUrl="/fruits" />);
-
-  expect(getByText('good for pies!')).toBeInTheDocument();
-  getByText('Pears').click();
+  const { getAllByLabelText, getByText } = renderWithRouter(<RoutedTabs tabs={tabs} baseUrl="/fruits" defaultTabIndex={1} />);
+  expect(head(getAllByLabelText('Pears'))).toBeInTheDocument();
   expect(getByText('good for a snack!')).toBeInTheDocument();
 });

data/webpack/components/RoutedTabs/index.js

@@ -1,4 +1,79 @@
-import { withRouter } from 'react-router-dom';
-import RoutedTabs from './RoutedTabs';
+import React from 'react';
+import { shape, string, number, element, arrayOf } from 'prop-types';
+import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
+import { Switch, Route, Redirect, useHistory, useLocation, withRouter, HashRouter } from 'react-router-dom';
+import { head, last } from 'lodash';
+
+const RoutedTabs = ({
+  tabs, defaultTabIndex,
+}) => {
+  const { push } = useHistory();
+  const {
+    hash, key: locationKey,
+  } = useLocation();
+
+  // The below transforms #/history/6 to history
+  const currentTabFromUrl = head(last(hash.split('#/')).split('/'));
+
+  const onSelect = (e, key) => {
+    e.preventDefault();
+    // See the below links for understanding of this mouseEvent
+    // https://www.w3schools.com/jsref/event_which.asp
+    // https://www.w3schools.com/jsref/event_button.asp
+    const middleMouseButtonNotUsed = !(e.button === 1 || e.buttons === 4 || e.which === 2);
+    const notCurrentTab = currentTabFromUrl !== key;
+    if (middleMouseButtonNotUsed && notCurrentTab) {
+      push(`#/${key}`);
+    }
+  };
+
+  return (
+    <>
+      <Tabs
+        activeKey={currentTabFromUrl}
+      >
+        {tabs.map(({ key, title }) => (
+          <a
+            key={key}
+            href={`#/${key}`}
+            onMouseUp={e => onSelect(e, key)}
+            style={{ textDecoration: 'none' }}
+          >
+            <Tab
+              eventKey={key}
+              aria-label={title}
+              title={<TabTitleText>{title}</TabTitleText>}
+            />
+          </a>
+        ))}
+      </Tabs>
+      <div className="tab-body-with-spacing">
+        <HashRouter key={locationKey}>
+          <Switch>
+            {tabs.map(({ key, content }) => (
+              <Route key={`${key}-route`} path={`/${key}`}>
+                {content}
+              </Route>))}
+            <Redirect to={`/${currentTabFromUrl || tabs[defaultTabIndex]?.key}`} />
+          </Switch>
+        </HashRouter>
+      </div>
+    </>
+  );
+};
+
+RoutedTabs.propTypes = {
+  tabs: arrayOf(shape({
+    key: string.isRequired,
+    title: string.isRequired,
+    content: element.isRequired,
+  })).isRequired,
+  defaultTabIndex: number,
+};
+
+RoutedTabs.defaultProps = {
+  defaultTabIndex: 0,
+};
 
 export default withRouter(RoutedTabs);
+

data/webpack/components/Search/Search.js

@@ -1,124 +1,111 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { ControlLabel } from 'react-bootstrap';
-import PropTypes from 'prop-types';
+import { loadSetting } from 'foremanReact/components/Settings/SettingsActions';
 import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
 import TypeAhead from '../TypeAhead';
-import api from '../../services/api';
+import api, { foremanApi } from '../../services/api';
 import { stringIncludes } from './helpers';
 import {
   AUTOSEARCH_DELAY,
   AUTOSEARCH_WHILE_TYPING,
 } from '../../scenes/Settings/SettingsConstants';
 
-class Search extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { items: [], typingTimeout: 0 };
-  }
-
-  componentDidMount() {
-    this.onInputUpdate();
-    this.props.loadSetting(AUTOSEARCH_DELAY);
-    this.props.loadSetting(AUTOSEARCH_WHILE_TYPING);
-  }
+const Search = ({
+  onSearch,
+  updateSearchQuery,
+  isDisabled,
+  settings: { autoSearchDelay },
+  initialInputValue,
+  patternfly4,
+  settings: { autoSearchEnabled },
+  getAutoCompleteParams,
+  foremanApiAutoComplete,
+  bookmarkController,
+}) => {
+  const [items, setItems] = useState([]);
+  const dispatch = useDispatch();
 
-  onInputUpdate = async (searchTerm = '') => {
-    const { getAutoCompleteParams, settings: { autoSearchEnabled }, patternfly4 } = this.props;
-    const items = this.state.items.filter(({ text }) => stringIncludes(text, searchTerm));
+  const onInputUpdate = async (searchTerm = '') => {
+    const newItems = items.filter(({ text }) => stringIncludes(text, searchTerm));
 
-    if (items.length !== this.state.items.length) {
-      this.setState({ items });
+    if (newItems.length !== items.length) {
+      setItems(newItems);
     }
 
-    const params = getAutoCompleteParams(searchTerm);
-    const autoCompleteParams = [
-      params.endpoint,
-      params.headers || {},
-      params.params || {},
-    ];
+    const { params, endpoint } = getAutoCompleteParams(searchTerm);
 
-    if (autoCompleteParams[0] !== '') {
-      const { data } = await api.get(...autoCompleteParams);
-      this.setState({
-        items: data.filter(({ error }) => !error).map(({ label }) => ({
-          text: label.trim(),
-        })),
-      });
+    if (endpoint) {
+      let data;
+      if (foremanApiAutoComplete) {
+        data = await foremanApi.get(endpoint, undefined, params);
+      } else {
+        data = await api.get(endpoint, undefined, params);
+      }
+      setItems(data?.data?.filter(({ error }) => !error).map(({ label }) => ({
+        text: label.trim(),
+      })));
     }
 
-    if (autoSearchEnabled && patternfly4 && searchTerm.length > 0) {
-      this.autoSearch(searchTerm);
+    if (autoSearchEnabled && patternfly4) {
+      onSearch(searchTerm || '');
     }
   };
 
-  onSearch = (search) => {
-    if (this.props.updateSearchQuery) this.props.updateSearchQuery(search);
-    this.props.onSearch(search);
-  };
-
-  // Continually clear and set the timeout as the user types. When the typing pauses, perform the
-  // search. This allows us to not overload the server by requesting on each keystroke.
-  autoSearch(searchTerm) {
-    const { settings: { autoSearchDelay } } = this.props;
-    if (this.state.typingTimeout) clearTimeout(this.state.typingTimeout);
+  useEffect(() => {
+    dispatch(loadSetting(AUTOSEARCH_DELAY));
+    dispatch(loadSetting(AUTOSEARCH_WHILE_TYPING));
+  }, [dispatch]);
 
-    this.setState({
-      typingTimeout: setTimeout(() => this.onSearch(searchTerm), autoSearchDelay),
-    });
-  }
+  const onNewSearch = (search) => {
+    if (updateSearchQuery) updateSearchQuery(search);
+    onSearch(search);
+  };
 
-  render() {
-    const { initialInputValue, patternfly4, settings: { autoSearchEnabled } } = this.props;
-    return (
-      <div>
-        <ControlLabel srOnly>{__('Search')}</ControlLabel>
-        <TypeAhead
-          items={this.state.items}
-          onInputUpdate={this.onInputUpdate}
-          onSearch={this.onSearch}
-          initialInputValue={initialInputValue}
-          patternfly4={patternfly4}
-          autoSearchEnabled={autoSearchEnabled}
-        />
-      </div>
-    );
-  }
-}
+  return (
+    <div>
+      <ControlLabel srOnly>{__('Search')}</ControlLabel>
+      <TypeAhead
+        autoSearchDelay={autoSearchDelay}
+        bookmarkController={bookmarkController}
+        isDisabled={isDisabled}
+        items={items}
+        onInputUpdate={onInputUpdate}
+        onSearch={onNewSearch}
+        initialInputValue={initialInputValue}
+        patternfly4={patternfly4}
+        autoSearchEnabled={autoSearchEnabled}
+      />
+    </div>
+  );
+};
 
 Search.propTypes = {
-  /** Callback function when the "Search" button is pressed:
-      onSearch(searchQuery)
-   */
   onSearch: PropTypes.func.isRequired,
-  /** Function returning params for the scoped-search complete api call:
-      getAutoCompleteParams(searchQuery)
-
-      Should return a shape { headers, params, endpoint }, e.g.:
-      {
-        headers: {},
-        params: { organization_id, search },
-        endpoint: '/subscriptions/auto_complete_search'
-      }
-  */
   getAutoCompleteParams: PropTypes.func.isRequired,
-  loadSetting: PropTypes.func.isRequired,
+  foremanApiAutoComplete: PropTypes.bool,
   updateSearchQuery: PropTypes.func,
   initialInputValue: PropTypes.string,
   patternfly4: PropTypes.bool,
+  isDisabled: PropTypes.bool,
   settings: PropTypes.shape({
     autoSearchEnabled: PropTypes.bool,
     autoSearchDelay: PropTypes.number,
   }),
+  bookmarkController: PropTypes.string,
 };
 
 Search.defaultProps = {
   updateSearchQuery: undefined,
+  foremanApiAutoComplete: false,
   initialInputValue: '',
   patternfly4: false,
   settings: {
     autoSearchEnabled: true,
   },
+  isDisabled: undefined,
+  bookmarkController: undefined,
 };
 
 export default Search;

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

@@ -27,6 +27,12 @@ afterEach(() => {
   nock.cleanAll();
 });
 
+jest.mock('../../../utils/useDebounce', () => ({
+  __esModule: true,
+  default: value => value,
+}));
+
+
 test('Autocomplete shows on input', async (done) => {
   const suggestion = 'suggestedQuery';
   const response = [
@@ -52,18 +58,6 @@ test('Autocomplete shows on input', async (done) => {
   assertNockRequest(autocompleteScope, done);
 });
 
-test('autosearch turned on does not show patternfly 4 search button', async (done) => {
-  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, true);
-  const autocompleteScope = mockAutocomplete(nockInstance, endpoint);
-
-  const { queryByLabelText } = renderWithRedux(<Search {...props} />);
-
-  await patientlyWaitFor(() => expect(queryByLabelText(searchButtonLabel)).not.toBeInTheDocument());
-
-  assertNockRequest(autocompleteScope);
-  assertNockRequest(autoSearchScope, done);
-});
-
 test('autosearch turned off does show patternfly 4 search button', async (done) => {
   const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, false);
   const autocompleteScope = mockAutocomplete(nockInstance, endpoint);
@@ -78,18 +72,6 @@ test('autosearch turned off does show patternfly 4 search button', async (done)
   assertNockRequest(autocompleteScope, done);
 });
 
-test('autosearch turned on does not affect patternfly 3 buttons', async (done) => {
-  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, true);
-  const autocompleteScope = mockAutocomplete(nockInstance, endpoint);
-
-  const { getByLabelText } = renderWithRedux(<Search {...{ ...props, patternfly4: false }} />);
-
-  await patientlyWaitFor(() => expect(getByLabelText('patternfly 3 search button')).toBeInTheDocument());
-
-  assertNockRequest(autoSearchScope);
-  assertNockRequest(autocompleteScope, done);
-});
-
 test('search function is called when search is typed into with autosearch', async (done) => {
   const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, true);
   const autocompleteScope = mockAutocomplete(nockInstance, endpoint, true, [], 2);
@@ -97,7 +79,7 @@ test('search function is called when search is typed into with autosearch', asyn
 
   const { getByLabelText } = renderWithRedux(<Search {...{ ...props, onSearch: mockSearch }} />);
   fireEvent.change(getByLabelText(/text input for search/i), { target: { value: 'foo' } });
-  await patientlyWaitFor(() => expect(mockSearch.mock.calls).toHaveLength(1));
+  await patientlyWaitFor(() => expect(mockSearch.mock.calls).toHaveLength(2));
 
   assertNockRequest(autoSearchScope);
   assertNockRequest(autocompleteScope, done);
@@ -117,7 +99,7 @@ test('search function is called by clicking search button without autosearch', a
     expect(searchButton).toBeInTheDocument();
   });
   searchButton.click();
-  expect(mockSearch.mock.calls).toHaveLength(1);
+  expect(mockSearch.mock.calls).toHaveLength(3);
 
   assertNockRequest(autoSearchScope);
   assertNockRequest(autocompleteScope, done);

data/webpack/components/SelectAllCheckbox/SelectAllCheckbox.scss

@@ -0,0 +1,3 @@
+.tablewrapper-select-all-checkbox {
+  font-weight: normal;
+}

data/webpack/components/SelectAllCheckbox/index.js

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle, DropdownToggleCheckbox,
+  DropdownItem } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { noop } from 'foremanReact/common/helpers';
+
+import './SelectAllCheckbox.scss';
+
+const SelectAllCheckbox = ({
+  selectNone,
+  selectPage,
+  selectedCount,
+  pageRowCount,
+  totalCount,
+  areAllRowsOnPageSelected,
+  areAllRowsSelected,
+  selectAll,
+}) => {
+  const [isSelectAllDropdownOpen, setSelectAllDropdownOpen] = useState(false);
+  const [selectionToggle, setSelectionToggle] = useState(false);
+
+  const canSelectAll = selectAll !== noop;
+
+  // Checkbox states: false = unchecked, null = partially-checked, true = checked
+  // Flow: All are selected -> click -> none are selected
+  // Some are selected -> click -> none are selected
+  // None are selected -> click -> page is selected
+  const onSelectAllCheckboxChange = (checked) => {
+    if (checked && selectionToggle !== null) {
+      if (!canSelectAll) {
+        selectPage();
+      } else {
+        selectAll(true);
+      }
+    } else {
+      selectNone();
+    }
+  };
+
+  const onSelectAllDropdownToggle = () => setSelectAllDropdownOpen(isOpen => !isOpen);
+
+  const handleSelectAll = () => {
+    setSelectAllDropdownOpen(false);
+    setSelectionToggle(true);
+    selectAll(true);
+  };
+  const handleSelectPage = () => {
+    setSelectAllDropdownOpen(false);
+    setSelectionToggle(true);
+    selectPage();
+  };
+  const handleSelectNone = () => {
+    setSelectAllDropdownOpen(false);
+    setSelectionToggle(false);
+    selectNone();
+  };
+
+  useEffect(() => {
+    let newCheckedState = null; // null is partially-checked state
+
+    if (areAllRowsSelected) {
+      newCheckedState = true;
+    } else if (selectedCount === 0) {
+      newCheckedState = false;
+    }
+    setSelectionToggle(newCheckedState);
+  }, [selectedCount, areAllRowsSelected]);
+
+  const selectAllDropdownItems = [
+    <DropdownItem key="select-none" component="button" isDisabled={selectedCount === 0} onClick={handleSelectNone} >
+      {`${__('Select none')} (0)`}
+    </DropdownItem>,
+    <DropdownItem key="select-page" component="button" isDisabled={areAllRowsOnPageSelected} onClick={handleSelectPage}>
+      {`${__('Select page')} (${pageRowCount})`}
+    </DropdownItem>,
+  ];
+  if (canSelectAll) {
+    selectAllDropdownItems.push((
+      <DropdownItem key="select-all" id="all" component="button" isDisabled={areAllRowsSelected} onClick={handleSelectAll}>
+        {`${__('Select all')} (${totalCount})`}
+      </DropdownItem>));
+  }
+
+  return (
+    <Dropdown
+      toggle={
+        <DropdownToggle
+          onToggle={onSelectAllDropdownToggle}
+          id="toggle-id-8"
+          splitButtonItems={[
+            <DropdownToggleCheckbox
+              className="tablewrapper-select-all-checkbox"
+              key="tablewrapper-select-all-checkbox"
+              aria-label="Select all"
+              onChange={checked => onSelectAllCheckboxChange(checked)}
+              isChecked={selectionToggle}
+            >
+              {selectedCount > 0 && `${selectedCount} selected`}
+            </DropdownToggleCheckbox>,
+          ]}
+        />
+      }
+      isOpen={isSelectAllDropdownOpen}
+      dropdownItems={selectAllDropdownItems}
+      id="selection-checkbox"
+    />
+  );
+};
+
+SelectAllCheckbox.propTypes = {
+  selectedCount: PropTypes.number.isRequired,
+  selectNone: PropTypes.func.isRequired,
+  selectPage: PropTypes.func.isRequired,
+  selectAll: PropTypes.func,
+  pageRowCount: PropTypes.number.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  areAllRowsOnPageSelected: PropTypes.bool.isRequired,
+  areAllRowsSelected: PropTypes.bool.isRequired,
+};
+
+SelectAllCheckbox.defaultProps = {
+  selectAll: noop,
+};
+
+export default SelectAllCheckbox;

data/webpack/components/SelectableDropdown/SelectableDropdown.js

@@ -5,7 +5,7 @@ import { ErrorCircleOIcon } from '@patternfly/react-icons';
 
 
 const SelectableDropdown = ({
-  items, title, selected, setSelected, loading, error,
+  items, title, showTitle, selected, setSelected, loading, error,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const icon = () => {
@@ -23,14 +23,17 @@ const SelectableDropdown = ({
 
   return (
     <Level>
+      {showTitle &&
       <LevelItem>
         <label htmlFor={`select ${title}`} style={{ margin: '0px 5px' }}>
-          {`${title}:`}
+          {title}
         </label>
       </LevelItem>
+      }
       <LevelItem aria-label={`select ${title} container`}>
         <Select
           id={`select ${title}`}
+          aria-label={`select ${title}`}
           key="type-dropdown"
           variant={SelectVariant.single}
           onToggle={onToggle}
@@ -50,6 +53,7 @@ const SelectableDropdown = ({
 SelectableDropdown.propTypes = {
   items: PropTypes.arrayOf(PropTypes.string).isRequired,
   title: PropTypes.string.isRequired,
+  showTitle: PropTypes.bool,
   selected: PropTypes.string.isRequired,
   setSelected: PropTypes.func.isRequired,
   // If the items are loaded dynamically, you can pass in loading or error states
@@ -60,6 +64,7 @@ SelectableDropdown.propTypes = {
 SelectableDropdown.defaultProps = {
   loading: false,
   error: false,
+  showTitle: true,
 };