External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-24 09:07:45 -02:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7880 from jlmitch5/kebabifyAdvancedSearch

Browse Source 
kebabify additional controls when advanced search is displayed

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
2020-08-12 13:53:52 +00:00
committed by GitHub
parent 0adb9cfd45 54d13b6397
commit 019ad9da73
7 changed files with 308 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
awx/ui_next/src/components/AddDropDownButton/AddDropDownButton.jsx
View File

@@ -1,25 +1,46 @@
import React, { useState, useRef, useEffect } from 'react';
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import PropTypes from 'prop-types';
import { Dropdown, DropdownPosition } from '@patternfly/react-core';
import {
Dropdown,
DropdownPosition,
DropdownItem,
} from '@patternfly/react-core';
import { ToolbarAddButton } from '../PaginatedDataList';
import { toTitleCase } from '../../util/strings';
import { useKebabifiedMenu } from '../../contexts/Kebabified';
function AddDropDownButton({ dropdownItems }) {
function AddDropDownButton({ dropdownItems, i18n }) {
const { isKebabified } = useKebabifiedMenu();
const [isOpen, setIsOpen] = useState(false);
const element = useRef(null);
useEffect(() => {
const toggle = e => {
if (!element || !element.current.contains(e.target)) {
if (!isKebabified && (!element || !element.current.contains(e.target))) {
setIsOpen(false);
}
};
useEffect(() => {
document.addEventListener('click', toggle, false);
return () => {
document.removeEventListener('click', toggle);
};
}, []);
}, [isKebabified]);
if (isKebabified) {
return (
<Fragment>
{dropdownItems.map(item => (
<DropdownItem key={item.url} component={Link} to={item.url}>
{toTitleCase(`${i18n._(t`Add`)} ${item.label}`)}
</DropdownItem>
))}
</Fragment>
);
}
return (
<div ref={element} key="add">
@@ -52,4 +73,4 @@ AddDropDownButton.propTypes = {
};
export { AddDropDownButton as _AddDropDownButton };
export default AddDropDownButton;
export default withI18n()(AddDropDownButton);

43
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

@@ -1,4 +1,4 @@
import React, { Fragment } from 'react';
import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
@@ -9,17 +9,17 @@ import {
ToolbarGroup,
ToolbarItem,
ToolbarToggleGroup,
Dropdown,
KebabToggle,
} from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons';
import ExpandCollapse from '../ExpandCollapse';
import Search from '../Search';
import Sort from '../Sort';
import { SearchColumns, SortColumns, QSConfig } from '../../types';
import { KebabifiedProvider } from '../../contexts/Kebabified';
class DataListToolbar extends React.Component {
render() {
const {
function DataListToolbar({
itemCount,
clearAllFilters,
searchColumns,
@@ -40,9 +40,16 @@ class DataListToolbar extends React.Component {
i18n,
qsConfig,
pagination,
} = this.props;
}) {
const showExpandCollapse = onCompact && onExpand;
const [kebabIsOpen, setKebabIsOpen] = useState(false);
const [advancedSearchShown, setAdvancedSearchShown] = useState(false);
const onShowAdvancedSearch = shown => {
setAdvancedSearchShown(shown);
setKebabIsOpen(false);
};
return (
<Toolbar
id={`${qsConfig.namespace}-list-toolbar`}
@@ -74,6 +81,7 @@ class DataListToolbar extends React.Component {
relatedSearchableKeys={relatedSearchableKeys}
onSearch={onSearch}
onReplaceSearch={onReplaceSearch}
onShowAdvancedSearch={onShowAdvancedSearch}
onRemove={onRemove}
/>
</ToolbarItem>
@@ -94,19 +102,36 @@ class DataListToolbar extends React.Component {
</Fragment>
</ToolbarGroup>
)}
{advancedSearchShown && (
<ToolbarItem>
<Dropdown
toggle={<KebabToggle onToggle={setKebabIsOpen} />}
isOpen={kebabIsOpen}
isPlain
dropdownItems={additionalControls.map(control => {
return (
<KebabifiedProvider value={{ isKebabified: true }}>
{control}
</KebabifiedProvider>
);
})}
/>
</ToolbarItem>
)}
{!advancedSearchShown && (
<ToolbarGroup>
{additionalControls.map(control => (
<ToolbarItem key={control.key}>{control}</ToolbarItem>
))}
</ToolbarGroup>
{pagination && itemCount > 0 && (
)}
{!advancedSearchShown && pagination && itemCount > 0 && (
<ToolbarItem variant="pagination">{pagination}</ToolbarItem>
)}
</ToolbarContent>
</Toolbar>
);
}
}
DataListToolbar.propTypes = {
itemCount: PropTypes.number,

18
awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx
View File

@@ -1,16 +1,32 @@
import React from 'react';
import { string, func } from 'prop-types';
import { Link } from 'react-router-dom';
import { Button, Tooltip } from '@patternfly/react-core';
import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { useKebabifiedMenu } from '../../contexts/Kebabified';
function ToolbarAddButton({ linkTo, onClick, i18n, isDisabled }) {
const { isKebabified } = useKebabifiedMenu();
if (!linkTo && !onClick) {
throw new Error(
'ToolbarAddButton requires either `linkTo` or `onClick` prop'
);
}
if (isKebabified) {
return (
<DropdownItem
key="add"
isDisabled={isDisabled}
component={linkTo ? Link : Button}
to={linkTo}
onClick={!onClick ? undefined : onClick}
>
{i18n._(t`Add`)}
</DropdownItem>
);
}
if (linkTo) {
return (
<Tooltip content={i18n._(t`Add`)} position="top">

18
awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx
View File

@@ -8,10 +8,11 @@ import {
shape,
checkPropTypes,
} from 'prop-types';
import { Button, Tooltip } from '@patternfly/react-core';
import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import AlertModal from '../AlertModal';
import { Kebabified } from '../../contexts/Kebabified';
const requireNameOrUsername = props => {
const { name, username } = props;
@@ -138,7 +139,19 @@ class ToolbarDeleteButton extends React.Component {
// we can delete the extra <div> around the <DeleteButton> below.
// See: https://github.com/patternfly/patternfly-react/issues/1894
return (
<Kebabified>
{({ isKebabified }) => (
<Fragment>
{isKebabified ? (
<DropdownItem
key="add"
isDisabled={isDisabled}
component="Button"
onClick={this.handleConfirmDelete}
>
{i18n._(t`Delete`)}
</DropdownItem>
) : (
<Tooltip content={this.renderTooltip()} position="top">
<div>
<Button
@@ -151,6 +164,7 @@ class ToolbarDeleteButton extends React.Component {
</Button>
</div>
</Tooltip>
)}
{isModalOpen && (
<AlertModal
variant="danger"
@@ -186,6 +200,8 @@ class ToolbarDeleteButton extends React.Component {
</AlertModal>
)}
</Fragment>
)}
</Kebabified>
);
}
}

4
awx/ui_next/src/components/Search/Search.jsx
View File

@@ -40,6 +40,7 @@ function Search({
location,
searchableKeys,
relatedSearchableKeys,
onShowAdvancedSearch,
}) {
const [isSearchDropdownOpen, setIsSearchDropdownOpen] = useState(false);
const [searchKey, setSearchKey] = useState(
@@ -62,7 +63,7 @@ function Search({
const { key: actualSearchKey } = columns.find(
({ name }) => name === target.innerText
);
onShowAdvancedSearch(actualSearchKey === 'advanced');
setIsFilterDropdownOpen(false);
setSearchKey(actualSearchKey);
};
@@ -301,6 +302,7 @@ Search.propTypes = {
columns: SearchColumns.isRequired,
onSearch: PropTypes.func,
onRemove: PropTypes.func,
onShowAdvancedSearch: PropTypes.func.isRequired,
};
Search.defaultProps = {

86
awx/ui_next/src/components/Search/Search.test.jsx
View File

@@ -36,7 +36,12 @@ describe('<Search />', () => {
collapseListedFiltersBreakpoint="lg"
>
<ToolbarContent>
<Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
<Search
qsConfig={QS_CONFIG}
columns={columns}
onSearch={onSearch}
onShowAdvancedSearch={jest.fn}
/>
</ToolbarContent>
</Toolbar>
);
@@ -64,7 +69,12 @@ describe('<Search />', () => {
collapseListedFiltersBreakpoint="lg"
>
<ToolbarContent>
<Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
<Search
qsConfig={QS_CONFIG}
columns={columns}
onSearch={onSearch}
onShowAdvancedSearch={jest.fn}
/>
</ToolbarContent>
</Toolbar>
);
@@ -83,6 +93,50 @@ describe('<Search />', () => {
expect(onSearch).toBeCalledWith('description__icontains', 'test-321');
});
test('changing key select to and from advanced causes onShowAdvancedSearch callback to be invoked', () => {
const columns = [
{ name: 'Name', key: 'name__icontains', isDefault: true },
{ name: 'Description', key: 'description__icontains' },
{ name: 'Advanced', key: 'advanced' },
];
const onSearch = jest.fn();
const onShowAdvancedSearch = jest.fn();
const wrapper = mountWithContexts(
<Toolbar
id={`${QS_CONFIG.namespace}-list-toolbar`}
clearAllFilters={() => {}}
collapseListedFiltersBreakpoint="lg"
>
<ToolbarContent>
<Search
qsConfig={QS_CONFIG}
columns={columns}
onSearch={onSearch}
onShowAdvancedSearch={onShowAdvancedSearch}
/>
</ToolbarContent>
</Toolbar>
);
act(() => {
wrapper
.find('Select[aria-label="Simple key select"]')
.invoke('onSelect')({ target: { innerText: 'Advanced' } });
});
wrapper.update();
expect(onShowAdvancedSearch).toHaveBeenCalledTimes(1);
expect(onShowAdvancedSearch).toBeCalledWith(true);
jest.clearAllMocks();
act(() => {
wrapper
.find('Select[aria-label="Simple key select"]')
.invoke('onSelect')({ target: { innerText: 'Description' } });
});
wrapper.update();
expect(onShowAdvancedSearch).toHaveBeenCalledTimes(1);
expect(onShowAdvancedSearch).toBeCalledWith(false);
});
test('attempt to search with empty string', () => {
const searchButton = 'button[aria-label="Search submit button"]';
const searchTextInput = 'input[aria-label="Search text input"]';
@@ -95,7 +149,12 @@ describe('<Search />', () => {
collapseListedFiltersBreakpoint="lg"
>
<ToolbarContent>
<Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
<Search
qsConfig={QS_CONFIG}
columns={columns}
onSearch={onSearch}
onShowAdvancedSearch={jest.fn}
/>
</ToolbarContent>
</Toolbar>
);
@@ -119,7 +178,12 @@ describe('<Search />', () => {
collapseListedFiltersBreakpoint="lg"
>
<ToolbarContent>
<Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
<Search
qsConfig={QS_CONFIG}
columns={columns}
onSearch={onSearch}
onShowAdvancedSearch={jest.fn}
/>
</ToolbarContent>
</Toolbar>
);
@@ -150,7 +214,11 @@ describe('<Search />', () => {
collapseListedFiltersBreakpoint="lg"
>
<ToolbarContent>
<Search qsConfig={QS_CONFIG} columns={columns} />
<Search
qsConfig={QS_CONFIG}
columns={columns}
onShowAdvancedSearch={jest.fn}
/>
</ToolbarContent>
</Toolbar>,
{ context: { router: { history } } }
@@ -197,6 +265,7 @@ describe('<Search />', () => {
qsConfig={qsConfigNew}
columns={columns}
onRemove={onRemove}
onShowAdvancedSearch={jest.fn}
/>
</ToolbarContent>
</Toolbar>,
@@ -243,6 +312,7 @@ describe('<Search />', () => {
qsConfig={qsConfigNew}
columns={columns}
onRemove={onRemove}
onShowAdvancedSearch={jest.fn}
/>
</ToolbarContent>
</Toolbar>,
@@ -277,7 +347,11 @@ describe('<Search />', () => {
collapseListedFiltersBreakpoint="lg"
>
<ToolbarContent>
<Search qsConfig={QS_CONFIG} columns={columns} />
<Search
qsConfig={QS_CONFIG}
columns={columns}
onShowAdvancedSearch={jest.fn}
/>
</ToolbarContent>
</Toolbar>,
{ context: { router: { history } } }

8
awx/ui_next/src/contexts/Kebabified.jsx Normal file
View File

@@ -0,0 +1,8 @@
import React, { useContext } from 'react';
// eslint-disable-next-line import/prefer-default-export
export const KebabifiedContext = React.createContext({});
export const KebabifiedProvider = KebabifiedContext.Provider;
export const Kebabified = KebabifiedContext.Consumer;
export const useKebabifiedMenu = () => useContext(KebabifiedContext);