katello 3.16.2 → 3.17.0.rc1

data/webpack/components/EditableTextInput/EditableTextInput.js

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react';
+import { TextInput, TextArea, Text, TextVariants, Button, Split, SplitItem } from '@patternfly/react-core';
+import { TimesIcon, CheckIcon, PencilAltIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+import PropTypes from 'prop-types';
+import Loading from '../Loading';
+import './editableTextInput.scss';
+
+const EditableTextInput = ({
+  onEdit, value, textArea, attribute,
+}) => {
+  // Tracks input box state
+  const [inputValue, setInputValue] = useState(value);
+  const [editing, setEditing] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  // Setting didCancel to avoid 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) {
+        await onEdit(inputValue, attribute);
+        if (!didCancel) {
+          setSubmitting(false);
+          setEditing(false);
+        }
+      }
+    };
+    onSubmit();
+
+    return () => {
+      didCancel = true;
+    };
+  }, [submitting]);
+
+  // 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 = () => {
+    setInputValue(value);
+    setEditing(false);
+  };
+
+  const inputProps = {
+    value: inputValue || '',
+    onChange: v => setInputValue(v),
+  };
+
+  if (submitting) return <Loading size="sm" />;
+  if (editing) {
+    return (
+      <Split>
+        <SplitItem>
+          {textArea ?
+            (<TextArea {...inputProps} aria-label={`${attribute} text area`} />) :
+            (<TextInput {...inputProps} type="text" aria-label={`${attribute} text input`} />)}
+        </SplitItem>
+        <SplitItem>
+          <Button
+            aria-label={`submit ${attribute}`}
+            variant="plain"
+            onClick={() => setSubmitting(true)}
+          >
+            <CheckIcon />
+          </Button>
+        </SplitItem>
+        <SplitItem>
+          <Button aria-label={`clear ${attribute}`} variant="plain" onClick={onClear}>
+            <TimesIcon />
+          </Button>
+        </SplitItem>
+      </Split>
+    );
+  }
+  return (
+    <Split>
+      <SplitItem>
+        <Text aria-label={`${attribute} text value`} component={TextVariants.p}>
+          {value || (<i>{__('None provided')}</i>)}
+        </Text>
+      </SplitItem>
+      <SplitItem>
+        <Button
+          className="foreman-edit-icon"
+          aria-label={`edit ${attribute}`}
+          variant="plain"
+          onClick={() => setEditing(true)}
+        >
+          <PencilAltIcon />
+        </Button>
+      </SplitItem>
+    </Split>
+  );
+};
+
+EditableTextInput.propTypes = {
+  onEdit: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  attribute: PropTypes.string.isRequired,
+  textArea: PropTypes.bool, // Is a text area instead of input when editing
+};
+
+EditableTextInput.defaultProps = {
+  textArea: false,
+  value: '', // API can return null, so default to empty string
+};
+
+export default EditableTextInput;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import EditableTextInput from '../EditableTextInput';
+
+const actualValue = 'burger';
+const attribute = 'favorite_food';
+const defaultProps = {
+  onEdit: jest.fn(),
+  value: actualValue,
+  attribute,
+};
+
+test('Passed function is called after editing and clicking submit', async () => {
+  const mockEdit = jest.fn();
+  const { getByLabelText } = render(<EditableTextInput {...defaultProps} onEdit={mockEdit} />);
+
+  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
+});
+
+test('Passed function is called after editing and hitting enter', async () => {
+  const mockEdit = jest.fn();
+  const { getByLabelText } = render(<EditableTextInput {...defaultProps} onEdit={mockEdit} />);
+
+  getByLabelText(`edit ${attribute}`).click();
+  const textInputLabel = `${attribute} text input`;
+  fireEvent.change(getByLabelText(textInputLabel), { target: { value: actualValue } });
+  fireEvent.keyDown(getByLabelText(textInputLabel), { key: 'Enter', code: 'Enter' });
+
+  await patientlyWaitFor(() => expect(mockEdit.mock.calls).toHaveLength(1));
+  expect(mockEdit.mock.calls[0][0]).toBe(actualValue); // first arg
+});
+
+test('input is set back to original value after clearing', () => {
+  const value = 'Sandwich';
+  const { getByLabelText } = render(<EditableTextInput {...defaultProps} />);
+
+  // Show original value on load
+  expect(getByLabelText(`${attribute} text value`)).toHaveTextContent(actualValue);
+  getByLabelText(`edit ${attribute}`).click();
+  // Update text input
+  fireEvent.change(getByLabelText(`${attribute} text input`), { target: { value } });
+  expect(getByLabelText(`${attribute} text input`)).toHaveValue(value);
+  // Clear text
+  getByLabelText(`clear ${attribute}`).click();
+  // Original value is still showing even though it's been edited
+  expect(getByLabelText(`${attribute} text value`)).toHaveTextContent(actualValue);
+});

data/webpack/components/EditableTextInput/editableTextInput.scss

@@ -0,0 +1,14 @@
+.foreman-limited-text {
+  max-width: 200px;
+  margin: auto 0px;
+}
+
+.foreman-limited-editable-text {
+  max-width: 300px;
+  margin: auto 0px;
+}
+
+// Edit icon isn't in line with text
+.foreman-edit-icon {
+  padding-top: 2px;
+}

data/webpack/components/EditableTextInput/index.js

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

data/webpack/{scenes/ContentViews/components → components}/Loading.js

@@ -8,23 +8,26 @@ import {
   Spinner,
 } from '@patternfly/react-core';
 
-const Loading = ({ size }) => (
+const Loading = ({ size, showText }) => (
   <Bullseye>
     <EmptyState>
-      <EmptyStateIcon variant="container" component={Spinner} />
-      <Title size={size}>
-        Loading
-      </Title>
+      <EmptyStateIcon size={size} variant="container" component={Spinner} />
+      {showText && (
+        <Title size={size} headingLevel="h4">
+          Loading
+        </Title>)}
     </EmptyState>
   </Bullseye>
 );
 
 Loading.propTypes = {
   size: PropTypes.string,
+  showText: PropTypes.bool,
 };
 
 Loading.defaultProps = {
   size: 'lg',
+  showText: true,
 };
 
 

data/webpack/components/MultiSelect/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { FormGroup, ControlLabel } from 'react-bootstrap';
-import BootstrapSelect from '../../move_to_pf/react-bootstrap-select';
+import BootstrapSelect from '../../components/react-bootstrap-select';
 
 function MultiSelect(props) {
   const {

data/webpack/components/Search/Search.js

@@ -0,0 +1,124 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { Component } from 'react';
+import { ControlLabel } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import TypeAhead from '../TypeAhead';
+import api 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);
+  }
+
+  onInputUpdate = async (searchTerm = '') => {
+    const { getAutoCompleteParams, settings: { autoSearchEnabled }, patternfly4 } = this.props;
+    const items = this.state.items.filter(({ text }) => stringIncludes(text, searchTerm));
+
+    if (items.length !== this.state.items.length) {
+      this.setState({ items });
+    }
+
+    const params = getAutoCompleteParams(searchTerm);
+    const autoCompleteParams = [
+      params.endpoint,
+      params.headers || {},
+      params.params || {},
+    ];
+
+    if (autoCompleteParams[0] !== '') {
+      const { data } = await api.get(...autoCompleteParams);
+      this.setState({
+        items: data.filter(({ error }) => !error).map(({ label }) => ({
+          text: label.trim(),
+        })),
+      });
+    }
+
+    if (autoSearchEnabled && patternfly4 && searchTerm.length > 0) {
+      this.autoSearch(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);
+
+    this.setState({
+      typingTimeout: setTimeout(() => this.props.onSearch(searchTerm), autoSearchDelay),
+    });
+  }
+
+  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>
+    );
+  }
+}
+
+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,
+  updateSearchQuery: PropTypes.func,
+  initialInputValue: PropTypes.string,
+  patternfly4: PropTypes.bool,
+  settings: PropTypes.shape({
+    autoSearchEnabled: PropTypes.bool,
+    autoSearchDelay: PropTypes.number,
+  }),
+};
+
+Search.defaultProps = {
+  updateSearchQuery: undefined,
+  initialInputValue: '',
+  patternfly4: false,
+  settings: {
+    autoSearchEnabled: true,
+  },
+};
+
+export default Search;

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

@@ -3,12 +3,13 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import { mock as mockApi } from '../../mockRequest';
 
-import Search from '../Search';
+import Search from '../Search/Search';
 
 describe('Search component', () => {
   const getBaseProps = () => ({
     onSearch: () => {},
     getAutoCompleteParams: () => ({ endpoint: '/fake' }),
+    loadSetting: jest.fn(),
   });
 
   describe('rendering', () => {

data/webpack/components/Search/__snapshots__/Search.test.js.snap

@@ -10,10 +10,12 @@ exports[`Search component rendering renders correctly 1`] = `
   </ControlLabel>
   <TypeAhead
     actionText="Search"
+    autoSearchEnabled={true}
     initialInputValue=""
     items={Array []}
     onInputUpdate={[Function]}
     onSearch={[Function]}
+    patternfly4={false}
   />
 </div>
 `;

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import nock, {
+  nockInstance, assertNockRequest, mockAutocomplete, mockSetting,
+} from '../../../test-utils/nockWrapper';
+import { AUTOSEARCH_WHILE_TYPING, AUTOSEARCH_DELAY } from '../../../scenes/Settings/SettingsConstants.js';
+import Search from '../../Search';
+
+const endpoint = '/fake_endpoint';
+const searchButtonLabel = 'search button';
+const props = {
+  onSearch: jest.fn(),
+  getAutoCompleteParams: search => ({
+    params: { organization_id: 1, search },
+    endpoint,
+  }),
+  patternfly4: true,
+};
+
+let searchDelayScope;
+beforeEach(() => {
+  searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY, 500);
+});
+
+afterEach(() => {
+  assertNockRequest(searchDelayScope);
+  nock.cleanAll();
+});
+
+test('Autocomplete shows on input', async (done) => {
+  const suggestion = 'suggestedQuery';
+  const response = [
+    {
+      completed: '', part: ` ${suggestion} `, label: ` ${suggestion} `, category: '',
+    },
+  ];
+  const query = { organization_id: 1, search: 'foo' };
+  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, true);
+  const initialScope = mockAutocomplete(nockInstance, endpoint, { ...query, search: '' }, []);
+  const autocompleteScope = mockAutocomplete(nockInstance, endpoint, query, response);
+
+  const { getByLabelText, getByText, queryByText } = renderWithRedux(<Search {...props} />);
+
+  expect(queryByText(`${suggestion}`)).not.toBeInTheDocument();
+
+  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: 'foo' } });
+
+  await patientlyWaitFor(() => expect(getByText(`${suggestion}`)).toBeInTheDocument());
+
+  assertNockRequest(initialScope);
+  assertNockRequest(autoSearchScope);
+  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);
+
+  const { getByLabelText } = renderWithRedux(<Search {...props} />);
+
+  // Using patientlyWaitFor as the autoSearch setting defaults to true,
+  // it won't be changed until http call
+  await patientlyWaitFor(() => expect(getByLabelText(searchButtonLabel)).toBeInTheDocument());
+
+  assertNockRequest(autoSearchScope);
+  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);
+  const mockSearch = jest.fn();
+
+  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));
+
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(autocompleteScope, done);
+});
+
+test('search function is called by clicking search button without autosearch', async (done) => {
+  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, false);
+  const autocompleteScope = mockAutocomplete(nockInstance, endpoint, true, [], 2);
+  const mockSearch = jest.fn();
+
+  const { getByLabelText } = renderWithRedux(<Search {...{ ...props, onSearch: mockSearch }} />);
+
+  fireEvent.change(getByLabelText(/text input for search/i), { target: { value: 'foo' } });
+  let searchButton;
+  await patientlyWaitFor(() => {
+    searchButton = getByLabelText(searchButtonLabel);
+    expect(searchButton).toBeInTheDocument();
+  });
+  searchButton.click();
+  expect(mockSearch.mock.calls).toHaveLength(1);
+
+  assertNockRequest(autoSearchScope);
+  assertNockRequest(autocompleteScope, done);
+});

data/webpack/components/Search/index.js

@@ -1,91 +1,15 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import React, { Component } from 'react';
-import { ControlLabel } from 'react-bootstrap';
-import PropTypes from 'prop-types';
-import { translate as __ } from 'foremanReact/common/I18n';
-import TypeAhead from '../../move_to_pf/TypeAhead/TypeAhead';
-import api from '../../services/api';
-import { stringIncludes } from './helpers';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as settingActions from 'foremanReact/components/Settings/SettingsActions';
+import { selectSettings } from '../../scenes/Settings/SettingsSelectors';
+import Search from './Search';
 
-class Search extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { items: [] };
-    this.onInputUpdate = this.onInputUpdate.bind(this);
-    this.onSearch = this.onSearch.bind(this);
-  }
+const mapStateToProps = state => ({
+  settings: selectSettings(state),
+});
 
-  componentDidMount() {
-    this.onInputUpdate();
-  }
+const actions = { ...settingActions };
 
-  async onInputUpdate(searchTerm = '') {
-    const items = this.state.items.filter(({ text }) => stringIncludes(text, searchTerm));
+const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);
 
-    if (items.length !== this.state.items.length) {
-      this.setState({ items });
-    }
-
-    const params = this.props.getAutoCompleteParams(searchTerm);
-    const autoCompleteParams = [
-      params.endpoint,
-      params.headers || {},
-      params.params || {},
-    ];
-
-    if (autoCompleteParams[0] !== '') {
-      const { data } = await api.get(...autoCompleteParams);
-      this.setState({
-        items: data.filter(({ error }) => !error).map(({ label }) => ({
-          text: label.trim(),
-        })),
-      });
-    }
-  }
-
-  onSearch(search) {
-    if (this.props.updateSearchQuery) this.props.updateSearchQuery(search);
-    this.props.onSearch(search);
-  }
-
-  render() {
-    const { initialInputValue } = this.props;
-    return (
-      <div>
-        <ControlLabel srOnly>{__('Search')}</ControlLabel>
-        <TypeAhead
-          items={this.state.items}
-          onInputUpdate={this.onInputUpdate}
-          onSearch={this.onSearch}
-          initialInputValue={initialInputValue}
-        />
-      </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,
-  updateSearchQuery: PropTypes.func,
-  initialInputValue: PropTypes.string,
-};
-
-Search.defaultProps = {
-  updateSearchQuery: undefined,
-  initialInputValue: '',
-};
-export default Search;
+export default connect(mapStateToProps, mapDispatchToProps)(Search);

data/webpack/components/SelectOrg/SetOrganization.js

@@ -5,10 +5,10 @@ import { Form, Button } from 'patternfly-react';
 import { withRouter } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import Select from '../../move_to_pf/Select/Select';
+import Select from '../../components/Select/Select';
 import * as SelectOrgActions from './SelectOrgAction';
 import reducer from './SelectOrgReducer';
-import { LoadingState } from '../../move_to_pf/LoadingState';
+import { LoadingState } from '../../components/LoadingState';
 import './SelectOrg.scss';
 
 class SetOrganization extends Component {