katello 3.16.2 → 3.17.0.rc1

data/webpack/components/TabWrapper/TabWrapper.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tab, TabTitleText } from '@patternfly/react-core';
+import './TabWrapper.scss';
+
+// Wrapper for patternfly 4 tabs for styling and consistency purposes
+const TabWrapper = ({ children, title, index }) => (
+  <Tab
+    aria-label={`${title} tab`}
+    key={`${title}`}
+    eventKey={index}
+    title={<TabTitleText>{title}</TabTitleText>}
+  >
+    <div className="tab-body-with-spacing">
+      {children}
+    </div>
+  </Tab>
+);
+
+TabWrapper.propTypes = {
+  children: PropTypes.element.isRequired,
+  title: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
+export default TabWrapper;

data/webpack/components/TabWrapper/index.js

@@ -0,0 +1,3 @@
+import TabbedView from './TabbedView';
+
+export default TabbedView;

data/webpack/components/TabbedView/TabbedView.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+import './TabbedView.scss';
+
+const TabbedView = ({ tabs }) => {
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const handleTabClick = (_event, tabIndex) => setActiveTabKey(tabIndex);
+
+  return (
+    <Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
+      {tabs.map((tab, i) => {
+        const { title, content } = tab;
+        return (
+          <Tab
+            aria-label={`${title} tab`}
+            key={`${title}`}
+            eventKey={i}
+            title={<TabTitleText>{title}</TabTitleText>}
+          >
+            <div className="tab-body-with-spacing">
+              {content}
+            </div>
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+};
+
+TabbedView.propTypes = {
+  tabs: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    content: PropTypes.element,
+  })).isRequired,
+};
+
+export default TabbedView;

data/webpack/components/TabbedView/TabbedView.scss

@@ -0,0 +1,3 @@
+.tab-body-with-spacing {
+  margin: 24px 0px;
+}

data/webpack/components/TabbedView/index.js

@@ -0,0 +1,3 @@
+import TabbedView from './TabbedView';
+
+export default TabbedView;

data/webpack/components/Table/EmptyStateMessage.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Bullseye,
+  Title } from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import { CubeIcon, ExclamationCircleIcon, SearchIcon } from '@patternfly/react-icons';
+import { global_danger_color_200 as dangerColor } from '@patternfly/react-tokens';
+
+const KatelloEmptyStateIcon = ({ error, search }) => {
+  if (error) return <EmptyStateIcon icon={ExclamationCircleIcon} color={dangerColor.value} />;
+  if (search) return <EmptyStateIcon icon={SearchIcon} />;
+  return <EmptyStateIcon icon={CubeIcon} />;
+};
+
+const EmptyStateMessage = ({
+  title, body, error, search,
+}) => (
+  <Bullseye>
+    <EmptyState variant={EmptyStateVariant.small}>
+      <KatelloEmptyStateIcon error={!!error} search={search} />
+      <Title headingLevel="h2" size="lg">
+        {title}
+      </Title>
+      <EmptyStateBody>
+        {body}
+      </EmptyStateBody>
+    </EmptyState>
+  </Bullseye>
+);
+
+KatelloEmptyStateIcon.propTypes = {
+  error: PropTypes.bool,
+  search: PropTypes.bool,
+};
+
+KatelloEmptyStateIcon.defaultProps = {
+  error: false,
+  search: false,
+};
+
+EmptyStateMessage.propTypes = {
+  title: PropTypes.string,
+  body: PropTypes.string,
+  error: PropTypes.oneOfType([
+    PropTypes.shape({}),
+    PropTypes.string,
+  ]),
+  search: PropTypes.bool,
+};
+
+EmptyStateMessage.defaultProps = {
+  title: 'Unable to connect',
+  body: 'There was an error retrieving data from the server. Check your connection and try again.',
+  error: undefined,
+  search: false,
+};
+
+export default EmptyStateMessage;

data/webpack/{scenes/ContentViews/Table/TableWrapper.js → components/Table/MainTable.js}

@@ -4,21 +4,28 @@ import {
   TableHeader,
   TableBody,
 } from '@patternfly/react-table';
-import PropTypes from 'prop-types';
 import { STATUS } from 'foremanReact/constants';
+import PropTypes from 'prop-types';
 
-import EmptyStateMessage from '../components/EmptyStateMessage';
-import Loading from '../components/Loading';
+import EmptyStateMessage from './EmptyStateMessage';
+import Loading from '../../components/Loading';
 
-const TableWrapper = ({
-  status, cells, rows, error, emptyTitle, emptyBody, ...extraTableProps
+const MainTable = ({
+  status, cells, rows, error, emptyContentTitle, emptyContentBody,
+  emptySearchTitle, emptySearchBody, searchIsActive, ...extraTableProps
 }) => {
   if (status === STATUS.PENDING) return (<Loading />);
   // Can we display the error message?
   if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
-  // Can we prevent flash of empty row message while rows are loading with data?
+  if (status === STATUS.RESOLVED && searchIsActive && rows.length === 0) {
+    return (<EmptyStateMessage
+      title={emptySearchTitle}
+      body={emptySearchBody}
+      search
+    />);
+  }
   if (status === STATUS.RESOLVED && rows.length === 0) {
-    return (<EmptyStateMessage title={emptyTitle} body={emptyBody} />);
+    return (<EmptyStateMessage title={emptyContentTitle} body={emptyContentBody} />);
   }
 
   const tableProps = { cells, rows, ...extraTableProps };
@@ -34,7 +41,7 @@ const TableWrapper = ({
   );
 };
 
-TableWrapper.propTypes = {
+MainTable.propTypes = {
   status: PropTypes.string.isRequired,
   cells: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.shape({}),
@@ -44,12 +51,16 @@ TableWrapper.propTypes = {
     PropTypes.shape({}),
     PropTypes.string,
   ]),
-  emptyBody: PropTypes.string.isRequired,
-  emptyTitle: PropTypes.string.isRequired,
+  emptyContentTitle: PropTypes.string.isRequired,
+  emptyContentBody: PropTypes.string.isRequired,
+  emptySearchTitle: PropTypes.string.isRequired,
+  emptySearchBody: PropTypes.string.isRequired,
+  searchIsActive: PropTypes.bool,
 };
 
-TableWrapper.defaultProps = {
+MainTable.defaultProps = {
   error: null,
+  searchIsActive: false,
 };
 
-export default TableWrapper;
+export default MainTable;

data/webpack/components/Table/TableWrapper.js

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from 'react';
+import { Pagination, Flex, FlexItem } from '@patternfly/react-core';
+
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { usePaginationOptions, useForemanSettings } from 'foremanReact/Root/Context/ForemanContext';
+
+import MainTable from './MainTable';
+import Search from '../../components/Search';
+import { orgId } from '../../services/api';
+
+/* Patternfly 4 table wrapper */
+const TableWrapper = ({
+  metadata, fetchItems, autocompleteEndpoint, ...allTableProps
+}) => {
+  const { search: currentSearch } = metadata;
+  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 { total: newTotal, page: newPage, per_page: newPerPage } = data;
+    if (newTotal) setTotal(parseInt(newTotal, 10));
+    if (newPage) setPage(parseInt(newPage, 10));
+    if (newPerPage) setPerPage(parseInt(newPerPage, 10));
+  };
+
+  useEffect(() => updatePagination(metadata), [metadata]);
+
+  const paginationParams = () => ({ per_page: perPage, page });
+
+  const getAutoCompleteParams = search => ({
+    endpoint: autocompleteEndpoint,
+    params: {
+      organization_id: orgId(),
+      search,
+    },
+  });
+
+  const onSearch = search => dispatch(fetchItems({ ...paginationParams(), search }));
+
+  const onPaginationUpdate = (updatedPagination) => {
+    updatePagination(updatedPagination);
+    dispatch(fetchItems({ ...paginationParams(), ...updatedPagination, search: currentSearch }));
+  };
+
+  return (
+    <React.Fragment>
+      <Flex>
+        <FlexItem>
+          <Search patternfly4 {...{ onSearch, getAutoCompleteParams }} />
+        </FlexItem>
+        <FlexItem align={{ default: 'alignRight' }}>
+          <Pagination
+            itemCount={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"
+          />
+        </FlexItem>
+      </Flex>
+      <MainTable searchIsActive={!!currentSearch} {...allTableProps} />
+    </React.Fragment>
+  );
+};
+
+TableWrapper.propTypes = {
+  fetchItems: PropTypes.func.isRequired,
+  metadata: PropTypes.shape({
+    total: PropTypes.number,
+    page: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string, // The API can sometimes return strings
+    ]),
+    per_page: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+    search: PropTypes.string,
+  }),
+  autocompleteEndpoint: PropTypes.string.isRequired,
+};
+
+TableWrapper.defaultProps = {
+  metadata: {},
+};
+
+export default TableWrapper;

data/webpack/components/TypeAhead/TypeAhead.js

@@ -0,0 +1,109 @@
+import React, { Component } from 'react';
+import Downshift from 'downshift';
+import PropTypes from 'prop-types';
+
+import TypeAheadSearch from './pf3Search/TypeAheadSearch';
+// eslint-disable-next-line import/no-named-default
+import { default as TypeAheadSearchPf4 } from './pf4Search/TypeAheadSearch';
+import { getActiveItems } from './helpers/helpers';
+
+import './TypeAhead.scss';
+
+class TypeAhead extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      inputValue: this.props.initialInputValue,
+    };
+  }
+
+  handleStateChange = ({ inputValue }) => {
+    if (typeof inputValue === 'string') {
+      this.props.onInputUpdate(inputValue);
+      this.setState({ inputValue });
+    }
+  };
+
+  clearSearch = () => {
+    this.setState({ inputValue: '' }, () => this.props.onSearch(this.state.inputValue));
+  };
+
+  render() {
+    const {
+      onSearch, onInputUpdate, items, actionText, patternfly4, autoSearchEnabled, ...rest
+    } = this.props;
+
+    const activeItems = getActiveItems(items);
+
+    return (
+      <Downshift
+        onStateChange={this.handleStateChange}
+        defaultHighlightedIndex={0}
+        selectedItem={this.state.inputValue}
+        {...rest}
+      >
+        {({
+          getInputProps,
+          getItemProps,
+          isOpen,
+          inputValue,
+          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,
+           };
+
+            return (
+              <div>
+                {patternfly4 ?
+                  <TypeAheadSearchPf4 autoSearchEnabled={autoSearchEnabled} {...typeAheadProps} /> :
+                  <TypeAheadSearch actionText={actionText} {...typeAheadProps} />}
+              </div>
+          );
+}}
+      </Downshift>
+    );
+  }
+}
+
+TypeAhead.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    /* text to display in MenuItem  */
+    text: PropTypes.string,
+    /* item can be a header or divider or undefined for regular item */
+    type: PropTypes.oneOf(['header', 'divider']),
+    /* optionally disable a regular item */
+    disabled: PropTypes.bool,
+  })).isRequired,
+  onInputUpdate: PropTypes.func.isRequired,
+  onSearch: PropTypes.func.isRequired,
+  actionText: PropTypes.string,
+  initialInputValue: PropTypes.string,
+  patternfly4: PropTypes.bool,
+  autoSearchEnabled: PropTypes.bool.isRequired,
+};
+
+TypeAhead.defaultProps = {
+  actionText: 'Search',
+  initialInputValue: '',
+  patternfly4: false,
+};
+
+export default TypeAhead;

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

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+
+const commonSearchPropTypes = {
+  userInputValue: PropTypes.string.isRequired,
+  clearSearch: PropTypes.func.isRequired,
+  getInputProps: PropTypes.func.isRequired,
+  getItemProps: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  inputValue: PropTypes.string.isRequired,
+  highlightedIndex: PropTypes.number.isRequired,
+  selectedItem: PropTypes.string.isRequired,
+  selectItem: PropTypes.func.isRequired,
+  openMenu: PropTypes.func.isRequired,
+  onSearch: PropTypes.func.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string,
+  })).isRequired,
+  activeItems: PropTypes.arrayOf(PropTypes.string).isRequired,
+  shouldShowItems: PropTypes.bool.isRequired,
+};
+
+export const commonInputPropTypes = {
+  passedProps: PropTypes.shape({}).isRequired,
+  onKeyPress: PropTypes.func.isRequired,
+  onInputFocus: PropTypes.func.isRequired,
+};
+
+export const commonItemPropTypes = {
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  activeItems: PropTypes.arrayOf(PropTypes.string).isRequired,
+  highlightedIndex: PropTypes.number.isRequired,
+  getItemProps: PropTypes.func.isRequired,
+};
+
+export default commonSearchPropTypes;

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

@@ -0,0 +1,32 @@
+import { KEYCODES } from 'foremanReact/common/keyCodes';
+
+const keyPressHandler = (
+  e, isOpen, activeItems, highlightedIndex,
+  selectItem, userInputValue, onSearch,
+) => {
+  switch (e.keyCode) {
+    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;
+
+    default:
+      break;
+  }
+};
+
+export const getActiveItems = items =>
+  items
+    .filter(({ disabled, type }) => !disabled && !['header', 'divider'].includes(type))
+    .map(({ text }) => text);
+
+export default keyPressHandler;

data/webpack/components/TypeAhead/index.js

@@ -0,0 +1,3 @@
+import TypeAhead from './TypeAhead';
+
+export default TypeAhead;

data/webpack/{move_to_pf/TypeAhead → components/TypeAhead/pf3Search}/TypeAheadInput.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { FormControl } from 'patternfly-react';
 
+import { commonInputPropTypes } from '../helpers/commonPropTypes';
+
 class TypeAheadInput extends Component {
   constructor(props) {
     super(props);
@@ -38,10 +39,6 @@ class TypeAheadInput extends Component {
   }
 }
 
-TypeAheadInput.propTypes = {
-  passedProps: PropTypes.shape({}).isRequired,
-  onKeyPress: PropTypes.func.isRequired,
-  onInputFocus: PropTypes.func.isRequired,
-};
+TypeAheadInput.propTypes = commonInputPropTypes;
 
 export default TypeAheadInput;

data/webpack/{move_to_pf/TypeAhead → components/TypeAhead/pf3Search}/TypeAheadItems.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Dropdown, MenuItem } from 'patternfly-react';
 
+import { commonItemPropTypes } from '../helpers/commonPropTypes';
+
 const TypeAheadItems = ({
   items, activeItems, getItemProps, highlightedIndex,
 }) => (
@@ -50,11 +51,6 @@ const TypeAheadItems = ({
   </Dropdown.Menu>
 );
 
-TypeAheadItems.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  activeItems: PropTypes.arrayOf(PropTypes.string).isRequired,
-  highlightedIndex: PropTypes.number.isRequired,
-  getItemProps: PropTypes.func.isRequired,
-};
+TypeAheadItems.propTypes = commonItemPropTypes;
 
 export default TypeAheadItems;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { InputGroup, Button, Icon } from 'patternfly-react';
+import PropTypes from 'prop-types';
+
+import TypeAheadInput from './TypeAheadInput';
+import TypeAheadItems from './TypeAheadItems';
+import keyPressHandler from '../helpers/helpers';
+import commonSearchPropTypes from '../helpers/commonPropTypes';
+
+const TypeAheadSearch = ({
+  userInputValue, clearSearch, getInputProps, getItemProps, isOpen, inputValue, highlightedIndex,
+  selectedItem, selectItem, openMenu, onSearch, items, activeItems, actionText, shouldShowItems,
+}) => (
+  <div>
+    <InputGroup>
+      <TypeAheadInput
+        onKeyPress={e => keyPressHandler(
+          e, isOpen, activeItems, highlightedIndex,
+          selectItem, userInputValue, onSearch,
+)}
+        onInputFocus={openMenu}
+        passedProps={getInputProps()}
+      />
+      {userInputValue &&
+        <InputGroup.Button>
+          <Button onClick={clearSearch}>
+            <Icon name="times" />
+          </Button>
+        </InputGroup.Button>
+      }
+      <InputGroup.Button>
+        <Button aria-label="patternfly 3 search button" onClick={() => onSearch(inputValue)}>{actionText}</Button>
+      </InputGroup.Button>
+    </InputGroup>
+
+    {shouldShowItems && <TypeAheadItems {...{
+      items, highlightedIndex, selectedItem, getItemProps, activeItems,
+    }}
+    />}
+  </div>
+);
+
+TypeAheadSearch.propTypes = {
+  ...commonSearchPropTypes,
+  actionText: PropTypes.string,
+};
+
+TypeAheadSearch.defaultProps = {
+  actionText: 'Search',
+};
+
+export default TypeAheadSearch;

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

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

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

@@ -0,0 +1,11 @@
+// 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;
+}
+
+.foreman-pf4-search-input {
+  padding-right: 35px;
+  margin-right: -23px;
+}