added to workaround PF bug:
- https://github.com/patternfly/patternfly-react/issues/2855
- */
- return (
-
-
- {tooltip && (
-
-
-
- )}
-
+ {tooltip && }
+ (
+ dispatch({ type: 'SELECT_ITEM', item })}
+ deselectItem={item => dispatch({ type: 'DESELECT_ITEM', item })}
/>
-
-
- );
- }
+ )}
+ />
+
+
+ );
}
InstanceGroupsLookup.propTypes = {
- value: PropTypes.arrayOf(PropTypes.object).isRequired,
- tooltip: PropTypes.string,
- onChange: PropTypes.func.isRequired,
+ value: arrayOf(object).isRequired,
+ tooltip: string,
+ onChange: func.isRequired,
+ className: string,
+ required: bool,
};
InstanceGroupsLookup.defaultProps = {
tooltip: '',
+ className: '',
+ required: false,
};
-export default withI18n()(InstanceGroupsLookup);
+export default withI18n()(withRouter(InstanceGroupsLookup));
diff --git a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx
index d570e79128..0286561a6a 100644
--- a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import { string, func, bool } from 'prop-types';
+import { withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { FormGroup } from '@patternfly/react-core';
@@ -7,61 +8,94 @@ import { InventoriesAPI } from '@api';
import { Inventory } from '@types';
import Lookup from '@components/Lookup';
import { FieldTooltip } from '@components/FormField';
+import { getQSConfig, parseQueryString } from '@util/qs';
+import OptionsList from './shared/OptionsList';
+import LookupErrorMessage from './shared/LookupErrorMessage';
-const getInventories = async params => InventoriesAPI.read(params);
+const QS_CONFIG = getQSConfig('inventory', {
+ page: 1,
+ page_size: 5,
+ order_by: 'name',
+});
-class InventoryLookup extends React.Component {
- render() {
- const {
- value,
- tooltip,
- onChange,
- onBlur,
- required,
- isValid,
- helperTextInvalid,
- i18n,
- } = this.props;
+function InventoryLookup({
+ value,
+ tooltip,
+ onChange,
+ onBlur,
+ required,
+ isValid,
+ helperTextInvalid,
+ i18n,
+ history,
+}) {
+ const [inventories, setInventories] = useState([]);
+ const [count, setCount] = useState(0);
+ const [error, setError] = useState(null);
- return (
-
- {tooltip && }
-
-
- );
- }
+ useEffect(() => {
+ (async () => {
+ const params = parseQueryString(QS_CONFIG, history.location.search);
+ try {
+ const { data } = await InventoriesAPI.read(params);
+ setInventories(data.results);
+ setCount(data.count);
+ } catch (err) {
+ setError(err);
+ }
+ })();
+ }, [history.location]);
+
+ return (
+
+ {tooltip && }
+ (
+ dispatch({ type: 'SELECT_ITEM', item })}
+ deselectItem={item => dispatch({ type: 'DESELECT_ITEM', item })}
+ />
+ )}
+ />
+
+
+ );
}
InventoryLookup.propTypes = {
@@ -77,4 +111,4 @@ InventoryLookup.defaultProps = {
required: false,
};
-export default withI18n()(InventoryLookup);
+export default withI18n()(withRouter(InventoryLookup));
diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx
index ce2f85f24b..500c4ce986 100644
--- a/awx/ui_next/src/components/Lookup/Lookup.jsx
+++ b/awx/ui_next/src/components/Lookup/Lookup.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useReducer, useEffect } from 'react';
import {
string,
bool,
@@ -15,20 +15,14 @@ import {
ButtonVariant,
InputGroup as PFInputGroup,
Modal,
- ToolbarItem,
} from '@patternfly/react-core';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import styled from 'styled-components';
-import AnsibleSelect from '../AnsibleSelect';
-import PaginatedDataList from '../PaginatedDataList';
-import VerticalSeperator from '../VerticalSeparator';
-import DataListToolbar from '../DataListToolbar';
-import CheckboxListItem from '../CheckboxListItem';
-import SelectedList from '../SelectedList';
-import { ChipGroup, Chip, CredentialChip } from '../Chip';
-import { getQSConfig, parseQueryString } from '../../util/qs';
+import reducer, { initReducer } from './shared/reducer';
+import { ChipGroup, Chip } from '../Chip';
+import { QSConfig } from '@types';
const SearchButton = styled(Button)`
::after {
@@ -36,6 +30,7 @@ const SearchButton = styled(Button)`
var(--pf-global--BorderColor--200);
}
`;
+SearchButton.displayName = 'SearchButton';
const InputGroup = styled(PFInputGroup)`
${props =>
@@ -54,315 +49,124 @@ const ChipHolder = styled.div`
border-bottom-right-radius: 3px;
`;
-class Lookup extends React.Component {
- constructor(props) {
- super(props);
+function Lookup(props) {
+ const {
+ id,
+ header,
+ onChange,
+ onBlur,
+ value,
+ multiple,
+ required,
+ qsConfig,
+ renderItemChip,
+ renderOptionsList,
+ history,
+ i18n,
+ } = props;
- this.assertCorrectValueType();
- let lookupSelectedItems = [];
- if (props.value) {
- lookupSelectedItems = props.multiple ? [...props.value] : [props.value];
- }
- this.state = {
- isModalOpen: false,
- lookupSelectedItems,
- results: [],
- count: 0,
- error: null,
- };
- this.qsConfig = getQSConfig(props.qsNamespace, {
- page: 1,
- page_size: 5,
- order_by: props.sortedColumnKey,
- });
- this.handleModalToggle = this.handleModalToggle.bind(this);
- this.toggleSelected = this.toggleSelected.bind(this);
- this.saveModal = this.saveModal.bind(this);
- this.getData = this.getData.bind(this);
- this.clearQSParams = this.clearQSParams.bind(this);
- }
+ const [state, dispatch] = useReducer(
+ reducer,
+ { value, multiple, required },
+ initReducer
+ );
- componentDidMount() {
- this.getData();
- }
+ useEffect(() => {
+ dispatch({ type: 'SET_MULTIPLE', value: multiple });
+ }, [multiple]);
- componentDidUpdate(prevProps) {
- const { location, selectedCategory } = this.props;
- if (
- location !== prevProps.location ||
- prevProps.selectedCategory !== selectedCategory
- ) {
- this.getData();
- }
- }
+ useEffect(() => {
+ dispatch({ type: 'SET_VALUE', value });
+ }, [value]);
- assertCorrectValueType() {
- const { multiple, value, selectCategoryOptions } = this.props;
- if (selectCategoryOptions) {
- return;
- }
- if (!multiple && Array.isArray(value)) {
- throw new Error(
- 'Lookup value must not be an array unless `multiple` is set'
- );
- }
- if (multiple && !Array.isArray(value)) {
- throw new Error('Lookup value must be an array if `multiple` is set');
- }
- }
-
- async getData() {
- const {
- getItems,
- location: { search },
- } = this.props;
- const queryParams = parseQueryString(this.qsConfig, search);
-
- this.setState({ error: false });
- try {
- const { data } = await getItems(queryParams);
- const { results, count } = data;
-
- this.setState({
- results,
- count,
- });
- } catch (err) {
- this.setState({ error: true });
- }
- }
-
- toggleSelected(row) {
- const {
- name,
- onLookupSave,
- multiple,
- onToggleItem,
- selectCategoryOptions,
- } = this.props;
- const {
- lookupSelectedItems: updatedSelectedItems,
- isModalOpen,
- } = this.state;
-
- const selectedIndex = updatedSelectedItems.findIndex(
- selectedRow => selectedRow.id === row.id
- );
- if (multiple) {
- if (selectCategoryOptions) {
- onToggleItem(row, isModalOpen);
- }
- if (selectedIndex > -1) {
- updatedSelectedItems.splice(selectedIndex, 1);
- this.setState({ lookupSelectedItems: updatedSelectedItems });
- } else {
- this.setState(prevState => ({
- lookupSelectedItems: [...prevState.lookupSelectedItems, row],
- }));
- }
- } else {
- this.setState({ lookupSelectedItems: [row] });
- }
-
- // Updates the selected items from parent state
- // This handles the case where the user removes chips from the lookup input
- // while the modal is closed
- if (!isModalOpen) {
- onLookupSave(updatedSelectedItems, name);
- }
- }
-
- handleModalToggle() {
- const { isModalOpen } = this.state;
- const { value, multiple, selectCategory } = this.props;
- // Resets the selected items from parent state whenever modal is opened
- // This handles the case where the user closes/cancels the modal and
- // opens it again
- if (!isModalOpen) {
- let lookupSelectedItems = [];
- if (value) {
- lookupSelectedItems = multiple ? [...value] : [value];
- }
- this.setState({ lookupSelectedItems });
- } else {
- this.clearQSParams();
- if (selectCategory) {
- selectCategory(null, 'Machine');
- }
- }
- this.setState(prevState => ({
- isModalOpen: !prevState.isModalOpen,
- }));
- }
-
- saveModal() {
- const { onLookupSave, name, multiple } = this.props;
- const { lookupSelectedItems } = this.state;
- const value = multiple
- ? lookupSelectedItems
- : lookupSelectedItems[0] || null;
-
- this.handleModalToggle();
- onLookupSave(value, name);
- }
-
- clearQSParams() {
- const { history } = this.props;
+ const clearQSParams = () => {
const parts = history.location.search.replace(/^\?/, '').split('&');
- const ns = this.qsConfig.namespace;
+ const ns = qsConfig.namespace;
const otherParts = parts.filter(param => !param.startsWith(`${ns}.`));
history.push(`${history.location.pathname}?${otherParts.join('&')}`);
- }
+ };
- render() {
- const {
- isModalOpen,
- lookupSelectedItems,
- error,
- results,
- count,
- } = this.state;
- const {
- form,
- id,
- lookupHeader,
- value,
- columns,
- multiple,
- name,
- onBlur,
- selectCategory,
- required,
- i18n,
- selectCategoryOptions,
- selectedCategory,
- } = this.props;
- const header = lookupHeader || i18n._(t`Items`);
- const canDelete = !required || (multiple && value.length > 1);
- const chips = () => {
- return selectCategoryOptions && selectCategoryOptions.length > 0 ? (
-
- {(multiple ? value : [value]).map(chip => (
- this.toggleSelected(chip)}
- isReadOnly={!canDelete}
- credential={chip}
- />
- ))}
-
- ) : (
-
- {(multiple ? value : [value]).map(chip => (
- this.toggleSelected(chip)}
- isReadOnly={!canDelete}
- >
- {chip.name}
-
- ))}
-
- );
- };
- return (
-
-
-
-
-
-
- {value ? chips(value) : null}
-
-
-
- {i18n._(t`Save`)}
- ,
- ,
- ]}
- >
- {selectCategoryOptions && selectCategoryOptions.length > 0 && (
-
- Selected Category
-
-
-
- )}
- (
- i.id === item.id)
- : lookupSelectedItems.some(i => i.id === item.id)
- }
- onSelect={() => this.toggleSelected(item)}
- isRadio={
- !multiple ||
- (selectCategoryOptions &&
- selectCategoryOptions.length &&
- selectedCategory.value !== 'Vault')
- }
- />
- )}
- renderToolbar={props => }
- showPageSizeOptions={false}
- />
- {lookupSelectedItems.length > 0 && (
- 0
- }
- />
- )}
- {error ? error
: ''}
-
-
- );
+ const save = () => {
+ const { selectedItems } = state;
+ const val = multiple ? selectedItems : selectedItems[0] || null;
+ onChange(val);
+ clearQSParams();
+ dispatch({ type: 'CLOSE_MODAL' });
+ };
+
+ const removeItem = item => {
+ if (multiple) {
+ onChange(value.filter(i => i.id !== item.id));
+ } else {
+ onChange(null);
+ }
+ };
+
+ const closeModal = () => {
+ clearQSParams();
+ dispatch({ type: 'CLOSE_MODAL' });
+ };
+
+ const { isModalOpen, selectedItems } = state;
+ const canDelete = !required || (multiple && value.length > 1);
+ let items = [];
+ if (multiple) {
+ items = value;
+ } else if (value) {
+ items.push(value);
}
+ return (
+
+
+ dispatch({ type: 'TOGGLE_MODAL' })}
+ variant={ButtonVariant.tertiary}
+ >
+
+
+
+
+ {items.map(item =>
+ renderItemChip({
+ item,
+ removeItem,
+ canDelete,
+ })
+ )}
+
+
+
+
+ {i18n._(t`Select`)}
+ ,
+ ,
+ ]}
+ >
+ {renderOptionsList({
+ state,
+ dispatch,
+ canDelete,
+ })}
+
+
+ );
}
const Item = shape({
@@ -371,25 +175,33 @@ const Item = shape({
Lookup.propTypes = {
id: string,
- getItems: func.isRequired,
- lookupHeader: string,
- name: string,
- onLookupSave: func.isRequired,
+ header: string,
+ onChange: func.isRequired,
value: oneOfType([Item, arrayOf(Item)]),
- sortedColumnKey: string.isRequired,
multiple: bool,
required: bool,
- qsNamespace: string,
+ onBlur: func,
+ qsConfig: QSConfig.isRequired,
+ renderItemChip: func,
+ renderOptionsList: func.isRequired,
};
Lookup.defaultProps = {
id: 'lookup-search',
- lookupHeader: null,
- name: null,
+ header: null,
value: null,
multiple: false,
required: false,
- qsNamespace: 'lookup',
+ onBlur: () => {},
+ renderItemChip: ({ item, removeItem, canDelete }) => (
+
removeItem(item)}
+ isReadOnly={!canDelete}
+ >
+ {item.name}
+
+ ),
};
export { Lookup as _Lookup };
diff --git a/awx/ui_next/src/components/Lookup/Lookup.test.jsx b/awx/ui_next/src/components/Lookup/Lookup.test.jsx
index 09a44a77b8..143ba5a709 100644
--- a/awx/ui_next/src/components/Lookup/Lookup.test.jsx
+++ b/awx/ui_next/src/components/Lookup/Lookup.test.jsx
@@ -1,11 +1,9 @@
/* eslint-disable react/jsx-pascal-case */
import React from 'react';
-import { createMemoryHistory } from 'history';
+import { act } from 'react-dom/test-utils';
import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
-import Lookup, { _Lookup } from './Lookup';
-
-let mockData = [{ name: 'foo', id: 1, isChecked: false }];
-const mockColumns = [{ name: 'Name', key: 'name', isSortable: true }];
+import { getQSConfig } from '@util/qs';
+import Lookup from './Lookup';
/**
* Check that an element is present on the document body
@@ -44,348 +42,118 @@ async function checkInputTagValues(wrapper, expected) {
});
}
-/**
- * Check lookup modal list for expected values
- * @param {wrapper} enzyme wrapper instance
- * @param {expected} array of [selected, text] pairs describing
- * the expected visible state of the modal data list
- */
-async function checkModalListValues(wrapper, expected) {
- // fail if modal isn't actually visible
- checkRootElementPresent('body div[role="dialog"]');
- // check list item values
- const rows = await waitForElement(
- wrapper,
- 'DataListItemRow',
- el => el.length === expected.length
- );
- expect(rows).toHaveLength(expected.length);
- rows.forEach((el, index) => {
- const [expectedChecked, expectedText] = expected[index];
- expect(expectedText).toEqual(el.text());
- expect(expectedChecked).toEqual(el.find('input').props().checked);
- });
-}
-
-/**
- * Check lookup modal selection tags for expected values
- * @param {wrapper} enzyme wrapper instance
- * @param {expected} array of expected tag values
- */
-async function checkModalTagValues(wrapper, expected) {
- // fail if modal isn't actually visible
- checkRootElementPresent('body div[role="dialog"]');
- // check modal chip values
- const chips = await waitForElement(
- wrapper,
- 'Modal Chip span',
- el => el.length === expected.length
- );
- expect(chips).toHaveLength(expected.length);
- chips.forEach((el, index) => {
- expect(el.text()).toEqual(expected[index]);
- });
-}
-
-describe('
', () => {
- let wrapper;
- let onChange;
-
- beforeEach(() => {
- const mockSelected = [{ name: 'foo', id: 1, url: '/api/v2/item/1' }];
- onChange = jest.fn();
- document.body.innerHTML = '';
- wrapper = mountWithContexts(
-
({
- data: {
- count: 2,
- results: [
- ...mockSelected,
- { name: 'bar', id: 2, url: '/api/v2/item/2' },
- ],
- },
- })}
- columns={mockColumns}
- sortedColumnKey="name"
- />
- );
- });
-
- test('Initially renders succesfully', () => {
- expect(wrapper.find('Lookup')).toHaveLength(1);
- });
-
- test('Expected items are shown', async done => {
- expect(wrapper.find('Lookup')).toHaveLength(1);
- await checkInputTagValues(wrapper, ['foo']);
- done();
- });
-
- test('Open and close modal', async done => {
- checkRootElementNotPresent('body div[role="dialog"]');
- wrapper.find('button[aria-label="Search"]').simulate('click');
- checkRootElementPresent('body div[role="dialog"]');
- // This check couldn't pass unless api response was formatted properly
- await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
- wrapper.find('Modal button[aria-label="Close"]').simulate('click');
- checkRootElementNotPresent('body div[role="dialog"]');
- wrapper.find('button[aria-label="Search"]').simulate('click');
- checkRootElementPresent('body div[role="dialog"]');
- wrapper
- .find('Modal button')
- .findWhere(e => e.text() === 'Cancel')
- .first()
- .simulate('click');
- checkRootElementNotPresent('body div[role="dialog"]');
- done();
- });
-
- test('Add item with checkbox then save', async done => {
- wrapper.find('button[aria-label="Search"]').simulate('click');
- await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
- wrapper
- .find('DataListItemRow')
- .findWhere(el => el.text() === 'bar')
- .find('input[type="checkbox"]')
- .simulate('change');
- await checkModalListValues(wrapper, [[true, 'foo'], [true, 'bar']]);
- wrapper
- .find('Modal button')
- .findWhere(e => e.text() === 'Save')
- .first()
- .simulate('click');
- expect(onChange).toHaveBeenCalledTimes(1);
- expect(onChange.mock.calls[0][0].map(({ name }) => name)).toEqual([
- 'foo',
- 'bar',
- ]);
- done();
- });
-
- test('Add item with checkbox then cancel', async done => {
- wrapper.find('button[aria-label="Search"]').simulate('click');
- await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
- wrapper
- .find('DataListItemRow')
- .findWhere(el => el.text() === 'bar')
- .find('input[type="checkbox"]')
- .simulate('change');
- await checkModalListValues(wrapper, [[true, 'foo'], [true, 'bar']]);
- wrapper
- .find('Modal button')
- .findWhere(e => e.text() === 'Cancel')
- .first()
- .simulate('click');
- expect(onChange).toHaveBeenCalledTimes(0);
- await checkInputTagValues(wrapper, ['foo']);
- done();
- });
-
- test('Remove item with checkbox', async done => {
- wrapper.find('button[aria-label="Search"]').simulate('click');
- await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
- await checkModalTagValues(wrapper, ['foo']);
- wrapper
- .find('DataListItemRow')
- .findWhere(el => el.text() === 'foo')
- .find('input[type="checkbox"]')
- .simulate('change');
- await checkModalListValues(wrapper, [[false, 'foo'], [false, 'bar']]);
- await checkModalTagValues(wrapper, []);
- done();
- });
-
- test('Remove item with selected icon button', async done => {
- wrapper.find('button[aria-label="Search"]').simulate('click');
- await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
- await checkModalTagValues(wrapper, ['foo']);
- wrapper
- .find('Modal Chip')
- .findWhere(el => el.text() === 'foo')
- .first()
- .find('button')
- .simulate('click');
- await checkModalListValues(wrapper, [[false, 'foo'], [false, 'bar']]);
- await checkModalTagValues(wrapper, []);
- done();
- });
-
- test('Remove item with input group button', async done => {
- await checkInputTagValues(wrapper, ['foo']);
- wrapper
- .find('Lookup InputGroup Chip')
- .findWhere(el => el.text() === 'foo')
- .first()
- .find('button')
- .simulate('click');
- expect(onChange).toHaveBeenCalledTimes(1);
- expect(onChange).toHaveBeenCalledWith([], 'foobar');
- done();
- });
-});
+const QS_CONFIG = getQSConfig('test', {});
+const TestList = () => ;
describe('', () => {
let wrapper;
let onChange;
+ async function mountWrapper() {
+ const mockSelected = [{ name: 'foo', id: 1, url: '/api/v2/item/1' }];
+ await act(async () => {
+ wrapper = mountWithContexts(
+ (
+
+ )}
+ />
+ );
+ });
+ return wrapper;
+ }
+
beforeEach(() => {
- const mockSelected = { name: 'foo', id: 1, url: '/api/v2/item/1' };
onChange = jest.fn();
document.body.innerHTML = '';
- wrapper = mountWithContexts(
- ({
- data: {
- count: 2,
- results: [
- mockSelected,
- { name: 'bar', id: 2, url: '/api/v2/item/2' },
- ],
- },
- })}
- columns={mockColumns}
- sortedColumnKey="name"
- />
- );
});
- test('Initially renders succesfully', () => {
+ afterEach(() => {
+ jest.restoreAllMocks();
+ });
+
+ test('should render succesfully', async () => {
+ wrapper = await mountWrapper();
expect(wrapper.find('Lookup')).toHaveLength(1);
});
- test('Expected items are shown', async done => {
+ test('should show selected items', async () => {
+ wrapper = await mountWrapper();
expect(wrapper.find('Lookup')).toHaveLength(1);
await checkInputTagValues(wrapper, ['foo']);
- done();
});
- test('Open and close modal', async done => {
- checkRootElementNotPresent('body div[role="dialog"]');
- wrapper.find('button[aria-label="Search"]').simulate('click');
- checkRootElementPresent('body div[role="dialog"]');
- // This check couldn't pass unless api response was formatted properly
- await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
- wrapper.find('Modal button[aria-label="Close"]').simulate('click');
+ test('should open and close modal', async () => {
+ wrapper = await mountWrapper();
checkRootElementNotPresent('body div[role="dialog"]');
wrapper.find('button[aria-label="Search"]').simulate('click');
checkRootElementPresent('body div[role="dialog"]');
+ const list = wrapper.find('TestList');
+ expect(list).toHaveLength(1);
+ expect(list.prop('state')).toEqual({
+ selectedItems: [{ id: 1, name: 'foo', url: '/api/v2/item/1' }],
+ value: [{ id: 1, name: 'foo', url: '/api/v2/item/1' }],
+ multiple: true,
+ isModalOpen: true,
+ required: false,
+ });
+ expect(list.prop('dispatch')).toBeTruthy();
+ expect(list.prop('canDelete')).toEqual(true);
wrapper
.find('Modal button')
.findWhere(e => e.text() === 'Cancel')
.first()
.simulate('click');
checkRootElementNotPresent('body div[role="dialog"]');
- done();
});
- test('Change selected item with radio control then save', async done => {
- wrapper.find('button[aria-label="Search"]').simulate('click');
- await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
- await checkModalTagValues(wrapper, ['foo']);
+ test('should remove item when X button clicked', async () => {
+ wrapper = await mountWrapper();
+ await checkInputTagValues(wrapper, ['foo']);
wrapper
- .find('DataListItemRow')
- .findWhere(el => el.text() === 'bar')
- .find('input[type="radio"]')
- .simulate('change');
- await checkModalListValues(wrapper, [[false, 'foo'], [true, 'bar']]);
- await checkModalTagValues(wrapper, ['bar']);
- wrapper
- .find('Modal button')
- .findWhere(e => e.text() === 'Save')
+ .find('Lookup InputGroup Chip')
+ .findWhere(el => el.text() === 'foo')
.first()
- .simulate('click');
- expect(onChange).toHaveBeenCalledTimes(1);
- const [[{ name }]] = onChange.mock.calls;
- expect(name).toEqual('bar');
- done();
- });
-
- test('Change selected item with checkbox then cancel', async done => {
- wrapper.find('button[aria-label="Search"]').simulate('click');
- await checkModalListValues(wrapper, [[true, 'foo'], [false, 'bar']]);
- await checkModalTagValues(wrapper, ['foo']);
- wrapper
- .find('DataListItemRow')
- .findWhere(el => el.text() === 'bar')
- .find('input[type="radio"]')
- .simulate('change');
- await checkModalListValues(wrapper, [[false, 'foo'], [true, 'bar']]);
- await checkModalTagValues(wrapper, ['bar']);
- wrapper
- .find('Modal button')
- .findWhere(e => e.text() === 'Cancel')
- .first()
- .simulate('click');
- expect(onChange).toHaveBeenCalledTimes(0);
- done();
- });
-
- test('should re-fetch data when URL params change', async done => {
- mockData = [{ name: 'foo', id: 1, isChecked: false }];
- const history = createMemoryHistory({
- initialEntries: ['/organizations/add'],
- });
- const getItems = jest.fn();
- const LookupWrapper = mountWithContexts(
- <_Lookup
- multiple
- name="foo"
- lookupHeader="Foo Bar"
- onLookupSave={() => {}}
- value={mockData}
- columns={mockColumns}
- sortedColumnKey="name"
- getItems={getItems}
- location={{ history }}
- i18n={{ _: val => val.toString() }}
- />
- );
- expect(getItems).toHaveBeenCalledTimes(1);
- history.push('organizations/add?page=2');
- LookupWrapper.setProps({
- location: { history },
- });
- LookupWrapper.update();
- expect(getItems).toHaveBeenCalledTimes(2);
- done();
- });
-
- test('should clear its query params when closed', async () => {
- mockData = [{ name: 'foo', id: 1, isChecked: false }];
- const history = createMemoryHistory({
- initialEntries: ['/organizations/add?inventory.name=foo&bar=baz'],
- });
- wrapper = mountWithContexts(
- <_Lookup
- multiple
- name="foo"
- lookupHeader="Foo Bar"
- onLookupSave={() => {}}
- value={mockData}
- columns={mockColumns}
- sortedColumnKey="name"
- getItems={() => {}}
- location={{ history }}
- history={history}
- qsNamespace="inventory"
- i18n={{ _: val => val.toString() }}
- />
- );
- wrapper
- .find('InputGroup Button')
- .at(0)
.invoke('onClick')();
- wrapper.find('Modal').invoke('onClose')();
- expect(history.location.search).toEqual('?bar=baz');
+ expect(onChange).toHaveBeenCalledTimes(1);
+ expect(onChange).toHaveBeenCalledWith([]);
+ });
+
+ test('should pass canDelete false if required single select', async () => {
+ await act(async () => {
+ const mockSelected = { name: 'foo', id: 1, url: '/api/v2/item/1' };
+ wrapper = mountWithContexts(
+ (
+
+ )}
+ />
+ );
+ });
+ wrapper.find('button[aria-label="Search"]').simulate('click');
+ const list = wrapper.find('TestList');
+ expect(list.prop('canDelete')).toEqual(false);
});
});
diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
index 5b978b2c66..1effa9282d 100644
--- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
@@ -1,146 +1,167 @@
-import React from 'react';
+import React, { Fragment, useState, useEffect } from 'react';
+import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
-import { FormGroup, Tooltip } from '@patternfly/react-core';
-import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons';
-import styled from 'styled-components';
-
+import { FormGroup, ToolbarItem } from '@patternfly/react-core';
import { CredentialsAPI, CredentialTypesAPI } from '@api';
-import Lookup from '@components/Lookup';
+import AnsibleSelect from '@components/AnsibleSelect';
+import { FieldTooltip } from '@components/FormField';
+import { CredentialChip } from '@components/Chip';
+import VerticalSeperator from '@components/VerticalSeparator';
+import { getQSConfig, parseQueryString } from '@util/qs';
+import Lookup from './Lookup';
+import OptionsList from './shared/OptionsList';
-const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
- margin-left: 10px;
-`;
+const QS_CONFIG = getQSConfig('credentials', {
+ page: 1,
+ page_size: 5,
+ order_by: 'name',
+});
-class MultiCredentialsLookup extends React.Component {
- constructor(props) {
- super(props);
+async function loadCredentialTypes() {
+ const { data } = await CredentialTypesAPI.read();
+ const acceptableTypes = ['machine', 'cloud', 'net', 'ssh', 'vault'];
+ return data.results.filter(type => acceptableTypes.includes(type.kind));
+}
- this.state = {
- selectedCredentialType: { label: 'Machine', id: 1, kind: 'ssh' },
- credentialTypes: [],
- };
- this.loadCredentialTypes = this.loadCredentialTypes.bind(this);
- this.handleCredentialTypeSelect = this.handleCredentialTypeSelect.bind(
- this
- );
- this.loadCredentials = this.loadCredentials.bind(this);
- this.toggleCredentialSelection = this.toggleCredentialSelection.bind(this);
- }
+async function loadCredentials(params, selectedCredentialTypeId) {
+ params.credential_type = selectedCredentialTypeId || 1;
+ const { data } = await CredentialsAPI.read(params);
+ return data;
+}
- componentDidMount() {
- this.loadCredentialTypes();
- }
+function MultiCredentialsLookup(props) {
+ const { tooltip, value, onChange, onError, history, i18n } = props;
+ const [credentialTypes, setCredentialTypes] = useState([]);
+ const [selectedType, setSelectedType] = useState(null);
+ const [credentials, setCredentials] = useState([]);
+ const [credentialsCount, setCredentialsCount] = useState(0);
- async loadCredentialTypes() {
- const { onError } = this.props;
- try {
- const { data } = await CredentialTypesAPI.read();
- const acceptableTypes = ['machine', 'cloud', 'net', 'ssh', 'vault'];
- const credentialTypes = [];
- data.results.forEach(cred => {
- acceptableTypes.forEach(aT => {
- if (aT === cred.kind) {
- // This object has several repeated values as some of it's children
- // require different field values.
- cred = {
- id: cred.id,
- key: cred.id,
- kind: cred.kind,
- type: cred.namespace,
- value: cred.name,
- label: cred.name,
- isDisabled: false,
- };
- credentialTypes.push(cred);
- }
- });
- });
- this.setState({ credentialTypes });
- } catch (err) {
- onError(err);
- }
- }
+ useEffect(() => {
+ (async () => {
+ try {
+ const types = await loadCredentialTypes();
+ setCredentialTypes(types);
+ const match = types.find(type => type.kind === 'ssh') || types[0];
+ setSelectedType(match);
+ } catch (err) {
+ onError(err);
+ }
+ })();
+ }, [onError]);
- async loadCredentials(params) {
- const { selectedCredentialType } = this.state;
- params.credential_type = selectedCredentialType.id || 1;
- return CredentialsAPI.read(params);
- }
+ useEffect(() => {
+ (async () => {
+ if (!selectedType) {
+ return;
+ }
+ try {
+ const params = parseQueryString(QS_CONFIG, history.location.search);
+ const { results, count } = await loadCredentials(
+ params,
+ selectedType.id
+ );
+ setCredentials(results);
+ setCredentialsCount(count);
+ } catch (err) {
+ onError(err);
+ }
+ })();
+ }, [selectedType, history.location.search, onError]);
- toggleCredentialSelection(newCredential) {
- const { onChange, credentials: credentialsToUpdate } = this.props;
+ const renderChip = ({ item, removeItem, canDelete }) => (
+ removeItem(item)}
+ isReadOnly={!canDelete}
+ credential={item}
+ />
+ );
- let newCredentialsList;
- const isSelectedCredentialInState =
- credentialsToUpdate.filter(cred => cred.id === newCredential.id).length >
- 0;
+ const isMultiple = selectedType && selectedType.kind === 'vault';
- if (isSelectedCredentialInState) {
- newCredentialsList = credentialsToUpdate.filter(
- cred => cred.id !== newCredential.id
- );
- } else {
- newCredentialsList = credentialsToUpdate.filter(
- credential =>
- credential.kind === 'vault' || credential.kind !== newCredential.kind
- );
- newCredentialsList = [...newCredentialsList, newCredential];
- }
- onChange(newCredentialsList);
- }
-
- handleCredentialTypeSelect(value, type) {
- const { credentialTypes } = this.state;
- const selectedType = credentialTypes.filter(item => item.label === type);
- this.setState({ selectedCredentialType: selectedType[0] });
- }
-
- render() {
- const { selectedCredentialType, credentialTypes } = this.state;
- const { tooltip, i18n, credentials } = this.props;
- return (
-
- {tooltip && (
-
-
-
- )}
- {credentialTypes && (
- {}}
- getItems={this.loadCredentials}
- qsNamespace="credentials"
- columns={[
- {
- name: i18n._(t`Name`),
- key: 'name',
- isSortable: true,
- isSearchable: true,
- },
- ]}
- sortedColumnKey="name"
- />
- )}
-
- );
- }
+ return (
+
+ {tooltip && }
+ {
+ return (
+
+ {credentialTypes && credentialTypes.length > 0 && (
+
+ {i18n._(t`Selected Category`)}
+
+ ({
+ key: type.id,
+ value: type.id,
+ label: type.name,
+ isDisabled: false,
+ }))}
+ value={selectedType && selectedType.id}
+ onChange={(e, id) => {
+ setSelectedType(
+ credentialTypes.find(o => o.id === parseInt(id, 10))
+ );
+ }}
+ />
+
+ )}
+ {
+ if (isMultiple) {
+ return dispatch({ type: 'SELECT_ITEM', item });
+ }
+ const selectedItems = state.selectedItems.filter(
+ i => i.kind !== item.kind
+ );
+ selectedItems.push(item);
+ return dispatch({
+ type: 'SET_SELECTED_ITEMS',
+ selectedItems,
+ });
+ }}
+ deselectItem={item => dispatch({ type: 'DESELECT_ITEM', item })}
+ renderItemChip={renderChip}
+ />
+
+ );
+ }}
+ />
+
+ );
}
MultiCredentialsLookup.propTypes = {
tooltip: PropTypes.string,
- credentials: PropTypes.arrayOf(
+ value: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number,
name: PropTypes.string,
@@ -155,8 +176,8 @@ MultiCredentialsLookup.propTypes = {
MultiCredentialsLookup.defaultProps = {
tooltip: '',
- credentials: [],
+ value: [],
};
-export { MultiCredentialsLookup as _MultiCredentialsLookup };
-export default withI18n()(MultiCredentialsLookup);
+export { MultiCredentialsLookup as _MultiCredentialsLookup };
+export default withI18n()(withRouter(MultiCredentialsLookup));
diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
index cc00396525..fa73edad3a 100644
--- a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
+++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
-
-import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
import MultiCredentialsLookup from './MultiCredentialsLookup';
import { CredentialsAPI, CredentialTypesAPI } from '@api';
@@ -8,9 +8,6 @@ jest.mock('@api');
describe('', () => {
let wrapper;
- let lookup;
- let credLookup;
- let onChange;
const credentials = [
{ id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
@@ -18,8 +15,9 @@ describe('', () => {
{ name: 'Gatsby', id: 21, kind: 'vault' },
{ name: 'Gatsby', id: 8, kind: 'Machine' },
];
+
beforeEach(() => {
- CredentialTypesAPI.read.mockResolvedValue({
+ CredentialTypesAPI.read.mockResolvedValueOnce({
data: {
results: [
{
@@ -46,17 +44,6 @@ describe('', () => {
count: 3,
},
});
- onChange = jest.fn();
- wrapper = mountWithContexts(
- {}}
- credentials={credentials}
- onChange={onChange}
- tooltip="This is credentials look up"
- />
- );
- lookup = wrapper.find('Lookup');
- credLookup = wrapper.find('MultiCredentialsLookup');
});
afterEach(() => {
@@ -64,16 +51,40 @@ describe('', () => {
wrapper.unmount();
});
- test('MultiCredentialsLookup renders properly', () => {
+ test('MultiCredentialsLookup renders properly', async () => {
+ const onChange = jest.fn();
+ await act(async () => {
+ wrapper = mountWithContexts(
+ {}}
+ />
+ );
+ });
expect(wrapper.find('MultiCredentialsLookup')).toHaveLength(1);
expect(CredentialTypesAPI.read).toHaveBeenCalled();
});
test('onChange is called when you click to remove a credential from input', async () => {
- const chip = wrapper.find('PFChip').find({ isOverflowChip: false });
- const button = chip.at(1).find('ChipButton');
+ const onChange = jest.fn();
+ await act(async () => {
+ wrapper = mountWithContexts(
+ {}}
+ />
+ );
+ });
+ const chip = wrapper.find('CredentialChip');
expect(chip).toHaveLength(4);
- button.prop('onClick')();
+ const button = chip.at(1).find('ChipButton');
+ await act(async () => {
+ button.invoke('onClick')();
+ });
expect(onChange).toBeCalledWith([
{ id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
{ id: 21, kind: 'vault', name: 'Gatsby' },
@@ -81,33 +92,122 @@ describe('', () => {
]);
});
- test('can change credential types', () => {
- lookup.prop('selectCategory')({}, 'Vault');
- expect(credLookup.state('selectedCredentialType')).toEqual({
- id: 500,
- key: 500,
- kind: 'vault',
- type: 'buzz',
- value: 'Vault',
- label: 'Vault',
- isDisabled: false,
+ test('should change credential types', async () => {
+ await act(async () => {
+ wrapper = mountWithContexts(
+ {}}
+ onError={() => {}}
+ />
+ );
});
- expect(CredentialsAPI.read).toHaveBeenCalled();
+ const searchButton = await waitForElement(wrapper, 'SearchButton');
+ await act(async () => {
+ searchButton.invoke('onClick')();
+ });
+ const select = await waitForElement(wrapper, 'AnsibleSelect');
+ CredentialsAPI.read.mockResolvedValueOnce({
+ data: {
+ results: [
+ { id: 1, kind: 'cloud', name: 'New Cred', url: 'www.google.com' },
+ ],
+ count: 1,
+ },
+ });
+ expect(CredentialsAPI.read).toHaveBeenCalledTimes(2);
+ await act(async () => {
+ select.invoke('onChange')({}, 500);
+ });
+ wrapper.update();
+ expect(CredentialsAPI.read).toHaveBeenCalledTimes(3);
+ expect(wrapper.find('OptionsList').prop('options')).toEqual([
+ { id: 1, kind: 'cloud', name: 'New Cred', url: 'www.google.com' },
+ ]);
});
- test('Toggle credentials only adds 1 credential per credential type except vault(see below)', () => {
- lookup.prop('onToggleItem')({ name: 'Party', id: 9, kind: 'Machine' });
+
+ test('should only add 1 credential per credential type except vault(see below)', async () => {
+ const onChange = jest.fn();
+ await act(async () => {
+ wrapper = mountWithContexts(
+ {}}
+ />
+ );
+ });
+ const searchButton = await waitForElement(wrapper, 'SearchButton');
+ await act(async () => {
+ searchButton.invoke('onClick')();
+ });
+ wrapper.update();
+ const optionsList = wrapper.find('OptionsList');
+ expect(optionsList.prop('multiple')).toEqual(false);
+ act(() => {
+ optionsList.invoke('selectItem')({
+ id: 5,
+ kind: 'Machine',
+ name: 'Cred 5',
+ url: 'www.google.com',
+ });
+ });
+ wrapper.update();
+ act(() => {
+ wrapper.find('Button[variant="primary"]').invoke('onClick')();
+ });
expect(onChange).toBeCalledWith([
{ id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
{ id: 2, kind: 'ssh', name: 'Alex', url: 'www.google.com' },
{ id: 21, kind: 'vault', name: 'Gatsby' },
- { id: 9, kind: 'Machine', name: 'Party' },
+ { id: 5, kind: 'Machine', name: 'Cred 5', url: 'www.google.com' },
]);
});
- test('Toggle credentials only adds 1 credential per credential type', () => {
- lookup.prop('onToggleItem')({ name: 'Party', id: 22, kind: 'vault' });
+
+ test('should allow multiple vault credentials', async () => {
+ const onChange = jest.fn();
+ await act(async () => {
+ wrapper = mountWithContexts(
+ {}}
+ />
+ );
+ });
+ const searchButton = await waitForElement(wrapper, 'SearchButton');
+ await act(async () => {
+ searchButton.invoke('onClick')();
+ });
+ wrapper.update();
+ const typeSelect = wrapper.find('AnsibleSelect');
+ act(() => {
+ typeSelect.invoke('onChange')({}, 500);
+ });
+ wrapper.update();
+ const optionsList = wrapper.find('OptionsList');
+ expect(optionsList.prop('multiple')).toEqual(true);
+ act(() => {
+ optionsList.invoke('selectItem')({
+ id: 5,
+ kind: 'Machine',
+ name: 'Cred 5',
+ url: 'www.google.com',
+ });
+ });
+ wrapper.update();
+ act(() => {
+ wrapper.find('Button[variant="primary"]').invoke('onClick')();
+ });
expect(onChange).toBeCalledWith([
- ...credentials,
- { name: 'Party', id: 22, kind: 'vault' },
+ { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' },
+ { id: 2, kind: 'ssh', name: 'Alex', url: 'www.google.com' },
+ { id: 21, kind: 'vault', name: 'Gatsby' },
+ { id: 8, kind: 'Machine', name: 'Gatsby' },
+ { id: 5, kind: 'Machine', name: 'Cred 5', url: 'www.google.com' },
]);
});
});
diff --git a/awx/ui_next/src/components/Lookup/OrganizationLookup.jsx b/awx/ui_next/src/components/Lookup/OrganizationLookup.jsx
index 8efb43b091..9fd5c4bb88 100644
--- a/awx/ui_next/src/components/Lookup/OrganizationLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/OrganizationLookup.jsx
@@ -1,13 +1,21 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { string, func, bool } from 'prop-types';
+import { withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
-import { string, func, bool } from 'prop-types';
import { OrganizationsAPI } from '@api';
import { Organization } from '@types';
import { FormGroup } from '@patternfly/react-core';
-import Lookup from '@components/Lookup';
+import { getQSConfig, parseQueryString } from '@util/qs';
+import Lookup from './Lookup';
+import OptionsList from './shared/OptionsList';
+import LookupErrorMessage from './shared/LookupErrorMessage';
-const getOrganizations = async params => OrganizationsAPI.read(params);
+const QS_CONFIG = getQSConfig('organizations', {
+ page: 1,
+ page_size: 5,
+ order_by: 'name',
+});
function OrganizationLookup({
helperTextInvalid,
@@ -17,7 +25,25 @@ function OrganizationLookup({
onChange,
required,
value,
+ history,
}) {
+ const [organizations, setOrganizations] = useState([]);
+ const [count, setCount] = useState(0);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ (async () => {
+ const params = parseQueryString(QS_CONFIG, history.location.search);
+ try {
+ const { data } = await OrganizationsAPI.read(params);
+ setOrganizations(data.results);
+ setCount(data.count);
+ } catch (err) {
+ setError(err);
+ }
+ })();
+ }, [history.location]);
+
return (
(
+ dispatch({ type: 'SELECT_ITEM', item })}
+ deselectItem={item => dispatch({ type: 'DESELECT_ITEM', item })}
+ />
+ )}
/>
+
);
}
@@ -58,5 +98,5 @@ OrganizationLookup.defaultProps = {
value: null,
};
-export default withI18n()(OrganizationLookup);
export { OrganizationLookup as _OrganizationLookup };
+export default withI18n()(withRouter(OrganizationLookup));
diff --git a/awx/ui_next/src/components/Lookup/OrganizationLookup.test.jsx b/awx/ui_next/src/components/Lookup/OrganizationLookup.test.jsx
index fef9a90281..1470537e29 100644
--- a/awx/ui_next/src/components/Lookup/OrganizationLookup.test.jsx
+++ b/awx/ui_next/src/components/Lookup/OrganizationLookup.test.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { act } from 'react-dom/test-utils';
import { mountWithContexts } from '@testUtils/enzymeHelpers';
import OrganizationLookup, { _OrganizationLookup } from './OrganizationLookup';
import { OrganizationsAPI } from '@api';
@@ -8,18 +9,22 @@ jest.mock('@api');
describe('OrganizationLookup', () => {
let wrapper;
- beforeEach(() => {
- wrapper = mountWithContexts( {}} />);
- });
-
afterEach(() => {
jest.clearAllMocks();
+ wrapper.unmount();
});
- test('initially renders successfully', () => {
+ test('should render successfully', async () => {
+ await act(async () => {
+ wrapper = mountWithContexts( {}} />);
+ });
expect(wrapper).toHaveLength(1);
});
- test('should fetch organizations', () => {
+
+ test('should fetch organizations', async () => {
+ await act(async () => {
+ wrapper = mountWithContexts( {}} />);
+ });
expect(OrganizationsAPI.read).toHaveBeenCalledTimes(1);
expect(OrganizationsAPI.read).toHaveBeenCalledWith({
order_by: 'name',
@@ -27,11 +32,19 @@ describe('OrganizationLookup', () => {
page_size: 5,
});
});
- test('should display "Organization" label', () => {
+
+ test('should display "Organization" label', async () => {
+ await act(async () => {
+ wrapper = mountWithContexts( {}} />);
+ });
const title = wrapper.find('FormGroup .pf-c-form__label-text');
expect(title.text()).toEqual('Organization');
});
- test('should define default value for function props', () => {
+
+ test('should define default value for function props', async () => {
+ await act(async () => {
+ wrapper = mountWithContexts( {}} />);
+ });
expect(_OrganizationLookup.defaultProps.onBlur).toBeInstanceOf(Function);
expect(_OrganizationLookup.defaultProps.onBlur).not.toThrow();
});
diff --git a/awx/ui_next/src/components/Lookup/ProjectLookup.jsx b/awx/ui_next/src/components/Lookup/ProjectLookup.jsx
index 90d36a64a7..983a214661 100644
--- a/awx/ui_next/src/components/Lookup/ProjectLookup.jsx
+++ b/awx/ui_next/src/components/Lookup/ProjectLookup.jsx
@@ -1,59 +1,90 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import { string, func, bool } from 'prop-types';
+import { withRouter } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { FormGroup } from '@patternfly/react-core';
import { ProjectsAPI } from '@api';
import { Project } from '@types';
-import Lookup from '@components/Lookup';
import { FieldTooltip } from '@components/FormField';
+import { getQSConfig, parseQueryString } from '@util/qs';
+import Lookup from './Lookup';
+import OptionsList from './shared/OptionsList';
+import LookupErrorMessage from './shared/LookupErrorMessage';
-class ProjectLookup extends React.Component {
- render() {
- const {
- helperTextInvalid,
- i18n,
- isValid,
- onChange,
- required,
- tooltip,
- value,
- onBlur,
- } = this.props;
+const QS_CONFIG = getQSConfig('project', {
+ page: 1,
+ page_size: 5,
+ order_by: 'name',
+});
- const loadProjects = async params => {
- const response = await ProjectsAPI.read(params);
- const { results, count } = response.data;
- if (count === 1) {
- onChange(results[0], 'project');
+function ProjectLookup({
+ helperTextInvalid,
+ i18n,
+ isValid,
+ onChange,
+ required,
+ tooltip,
+ value,
+ onBlur,
+ history,
+}) {
+ const [projects, setProjects] = useState([]);
+ const [count, setCount] = useState(0);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ (async () => {
+ const params = parseQueryString(QS_CONFIG, history.location.search);
+ try {
+ const { data } = await ProjectsAPI.read(params);
+ setProjects(data.results);
+ setCount(data.count);
+ if (data.count === 1) {
+ onChange(data.results[0]);
+ }
+ } catch (err) {
+ setError(err);
}
- return response;
- };
+ })();
+ }, [onChange, history.location]);
- return (
-
- {tooltip && }
-
-
- );
- }
+ return (
+
+ {tooltip && }
+ (
+ dispatch({ type: 'SELECT_ITEM', item })}
+ deselectItem={item => dispatch({ type: 'DESELECT_ITEM', item })}
+ />
+ )}
+ />
+
+
+ );
}
ProjectLookup.propTypes = {
@@ -75,4 +106,5 @@ ProjectLookup.defaultProps = {
onBlur: () => {},
};
-export default withI18n()(ProjectLookup);
+export { ProjectLookup as _ProjectLookup };
+export default withI18n()(withRouter(ProjectLookup));
diff --git a/awx/ui_next/src/components/Lookup/ProjectLookup.test.jsx b/awx/ui_next/src/components/Lookup/ProjectLookup.test.jsx
index 00fd2ad4bf..743067745e 100644
--- a/awx/ui_next/src/components/Lookup/ProjectLookup.test.jsx
+++ b/awx/ui_next/src/components/Lookup/ProjectLookup.test.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { act } from 'react-dom/test-utils';
import { mountWithContexts } from '@testUtils/enzymeHelpers';
import { sleep } from '@testUtils/testUtils';
import { ProjectsAPI } from '@api';
@@ -15,9 +16,11 @@ describe('', () => {
},
});
const onChange = jest.fn();
- mountWithContexts();
+ await act(async () => {
+ mountWithContexts();
+ });
await sleep(0);
- expect(onChange).toHaveBeenCalledWith({ id: 1 }, 'project');
+ expect(onChange).toHaveBeenCalledWith({ id: 1 });
});
test('should not auto-select project when multiple available', async () => {
@@ -28,7 +31,9 @@ describe('', () => {
},
});
const onChange = jest.fn();
- mountWithContexts();
+ await act(async () => {
+ mountWithContexts();
+ });
await sleep(0);
expect(onChange).not.toHaveBeenCalled();
});
diff --git a/awx/ui_next/src/components/Lookup/README.md b/awx/ui_next/src/components/Lookup/README.md
new file mode 100644
index 0000000000..4d5dc69674
--- /dev/null
+++ b/awx/ui_next/src/components/Lookup/README.md
@@ -0,0 +1,5 @@
+# Lookup
+
+required single select lookups should not include a close X on the tag... you would have to select something else to change it
+
+optional single select lookups should include a close X to remove it on the spot
diff --git a/awx/ui_next/src/components/Lookup/shared/LookupErrorMessage.jsx b/awx/ui_next/src/components/Lookup/shared/LookupErrorMessage.jsx
new file mode 100644
index 0000000000..3197417449
--- /dev/null
+++ b/awx/ui_next/src/components/Lookup/shared/LookupErrorMessage.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+
+function LookupErrorMessage({ error, i18n }) {
+ if (!error) {
+ return null;
+ }
+
+ return (
+
+ {error.message || i18n._(t`An error occured`)}
+
+ );
+}
+
+export default withI18n()(LookupErrorMessage);
diff --git a/awx/ui_next/src/components/Lookup/shared/OptionsList.jsx b/awx/ui_next/src/components/Lookup/shared/OptionsList.jsx
new file mode 100644
index 0000000000..77b4611c61
--- /dev/null
+++ b/awx/ui_next/src/components/Lookup/shared/OptionsList.jsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import {
+ arrayOf,
+ shape,
+ bool,
+ func,
+ number,
+ string,
+ oneOfType,
+} from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import SelectedList from '../../SelectedList';
+import PaginatedDataList from '../../PaginatedDataList';
+import CheckboxListItem from '../../CheckboxListItem';
+import DataListToolbar from '../../DataListToolbar';
+import { QSConfig } from '@types';
+
+function OptionsList({
+ value,
+ options,
+ optionCount,
+ columns,
+ multiple,
+ header,
+ name,
+ qsConfig,
+ readOnly,
+ selectItem,
+ deselectItem,
+ renderItemChip,
+ isLoading,
+ i18n,
+}) {
+ return (
+
+ {value.length > 0 && (
+
deselectItem(item)}
+ isReadOnly={readOnly}
+ renderItemChip={renderItemChip}
+ />
+ )}
+ (
+ i.id === item.id)}
+ onSelect={() => selectItem(item)}
+ onDeselect={() => deselectItem(item)}
+ isRadio={!multiple}
+ />
+ )}
+ renderToolbar={props => }
+ showPageSizeOptions={false}
+ />
+