External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-23 07:28:02 -03:30
Code Issues Packages Projects Releases Wiki Activity

Simplify kebab modal open logic

Browse Source
This commit is contained in:
mabashian 2020-09-10 15:31:32 -04:00
parent 0fc6affe85
commit 130a43f5c4
5 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
@ -42,15 +42,21 @@ function DataListToolbar({
pagination,
}) {
const showExpandCollapse = onCompact && onExpand;
const [kebabIsOpen, setKebabIsOpen] = useState(false);
const [kebabModalIsOpen, setKebabModalIsOpen] = useState(false);
const [advancedSearchShown, setAdvancedSearchShown] = useState(false);
const [isKebabOpen, setIsKebabOpen] = useState(false);
const [isKebabModalOpen, setIsKebabModalOpen] = useState(false);
const [isAdvancedSearchShown, setIsAdvancedSearchShown] = useState(false);
const onShowAdvancedSearch = shown => {
setAdvancedSearchShown(shown);
setKebabIsOpen(false);
setIsAdvancedSearchShown(shown);
setIsKebabOpen(false);
};
useEffect(() => {
if (!isKebabModalOpen) {
setIsKebabOpen(false);
}
}, [isKebabModalOpen]);
return (
<Toolbar
id={`${qsConfig.namespace}-list-toolbar`}
@ -103,44 +109,39 @@ function DataListToolbar({
</>
</ToolbarGroup>
)}
{advancedSearchShown && (
{isAdvancedSearchShown && (
<ToolbarItem>
<KebabifiedProvider
value={{
isKebabified: true,
onKebabModalChange: isOpen => {
if (kebabIsOpen && kebabModalIsOpen && !isOpen) {
setKebabIsOpen(false);
}
setKebabModalIsOpen(isOpen);
},
onKebabModalChange: setIsKebabModalOpen,
}}
>
<Dropdown
toggle={
<KebabToggle
onToggle={isOpen => {
if (!kebabModalIsOpen) {
setKebabIsOpen(isOpen);
if (!isKebabModalOpen) {
setIsKebabOpen(isOpen);
}
}}
/>
}
isOpen={kebabIsOpen || kebabModalIsOpen}
isOpen={isKebabOpen}
isPlain
dropdownItems={additionalControls}
/>
</KebabifiedProvider>
</ToolbarItem>
)}
{!advancedSearchShown && (
{!isAdvancedSearchShown && (
<ToolbarGroup>
{additionalControls.map(control => (
<ToolbarItem key={control.key}>{control}</ToolbarItem>
))}
</ToolbarGroup>
)}
{!advancedSearchShown && pagination && itemCount > 0 && (
{!isAdvancedSearchShown && pagination && itemCount > 0 && (
<ToolbarItem variant="pagination">{pagination}</ToolbarItem>
)}
</ToolbarContent>

11
awx/ui_next/src/components/JobList/JobListCancelButton.jsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { arrayOf, func } from 'prop-types';
@ -23,12 +23,15 @@ function JobListCancelButton({ i18n, jobsToCancel, onCancel }) {
};
const toggleModal = () => {
if (isKebabified) {
onKebabModalChange(!isModalOpen);
}
setIsModalOpen(!isModalOpen);
};
useEffect(() => {
if (isKebabified) {
onKebabModalChange(isModalOpen);
}
}, [isKebabified, isModalOpen, onKebabModalChange]);
const renderTooltip = () => {
const jobsUnableToCancel = jobsToCancel
.filter(cannotCancel)

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

@ -1,4 +1,4 @@
import React, { useContext, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import {
func,
bool,
@ -75,12 +75,15 @@ function ToolbarDeleteButton({
};
const toggleModal = () => {
if (isKebabified) {
onKebabModalChange(!isModalOpen);
}
setIsModalOpen(!isModalOpen);
};
useEffect(() => {
if (isKebabified) {
onKebabModalChange(isModalOpen);
}
}, [isKebabified, isModalOpen, onKebabModalChange]);
const renderTooltip = () => {
const itemsUnableToDelete = itemsToDelete
.filter(cannotDelete)

9
awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.test.jsx
View File

@ -26,8 +26,8 @@ describe('<ToolbarDeleteButton />', () => {
const wrapper = mountWithContexts(
<ToolbarDeleteButton onDelete={() => {}} itemsToDelete={[itemA]} />
);
expect(wrapper.find('Modal')).toHaveLength(0);
wrapper.find('button').simulate('click');
expect(wrapper.find('ToolbarDeleteButton').state('isModalOpen')).toBe(true);
wrapper.update();
expect(wrapper.find('Modal')).toHaveLength(1);
});
@ -37,15 +37,14 @@ describe('<ToolbarDeleteButton />', () => {
const wrapper = mountWithContexts(
<ToolbarDeleteButton onDelete={onDelete} itemsToDelete={[itemA]} />
);
wrapper.find('ToolbarDeleteButton').setState({ isModalOpen: true });
wrapper.find('button').simulate('click');
wrapper.update();
wrapper
.find('ModalBoxFooter button[aria-label="confirm delete"]')
.simulate('click');
wrapper.update();
expect(onDelete).toHaveBeenCalled();
expect(wrapper.find('ToolbarDeleteButton').state('isModalOpen')).toBe(
false
);
expect(wrapper.find('Modal')).toHaveLength(0);
});
test('should disable button when no delete permissions', () => {

8
awx/ui_next/src/screens/Template/TemplateList/TemplateList.test.jsx
View File

@ -261,7 +261,9 @@ describe('<TemplateList />', () => {
},
});
wrapper.find('button[aria-label="Delete"]').prop('onClick')();
await act(async () => {
wrapper.find('button[aria-label="Delete"]').prop('onClick')();
});
wrapper.update();
await act(async () => {
await wrapper
@ -302,7 +304,9 @@ describe('<TemplateList />', () => {
summary_fields: { user_capabilities: { delete: true } },
},
});
wrapper.find('button[aria-label="Delete"]').prop('onClick')();
await act(async () => {
wrapper.find('button[aria-label="Delete"]').prop('onClick')();
});
wrapper.update();
await act(async () => {
await wrapper