Update inventory source sync button on kebab

Update inventory source sync button on kebab

See: https://github.com/ansible/awx/issues/8020
This commit is contained in:
nixocio 2021-08-06 15:58:18 -04:00
parent 3a6b228f6f
commit bc083089bb
4 changed files with 64 additions and 17 deletions

View File

@ -0,0 +1,45 @@
import React from 'react';
import { func } from 'prop-types';
import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
import { t } from '@lingui/macro';
import { useKebabifiedMenu } from 'contexts/Kebabified';
function ToolbarSyncSourceButton({ onClick }) {
const { isKebabified } = useKebabifiedMenu();
if (isKebabified) {
return (
<DropdownItem
ouiaId="sync-all-button"
key="add"
component="button"
onClick={onClick}
>
{t`Sync all`}
</DropdownItem>
);
}
return (
<Tooltip key="update" content={t`Sync all sources`} position="top">
<Button
ouiaId="sync-all-button"
onClick={onClick}
aria-label={t`Sync all`}
variant="secondary"
>
{t`Sync all`}
</Button>
</Tooltip>
);
}
ToolbarSyncSourceButton.propTypes = {
onClick: func,
};
ToolbarSyncSourceButton.defaultProps = {
onClick: null,
};
export default ToolbarSyncSourceButton;

View File

@ -0,0 +1,16 @@
import React from 'react';
import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
import ToolbarSyncSourceButton from './ToolbarSyncSourceButton';
describe('<ToolbarSyncSourceButton />', () => {
test('should render button', () => {
const onClick = jest.fn();
const wrapper = mountWithContexts(
<ToolbarSyncSourceButton onClick={onClick} />
);
const button = wrapper.find('button');
expect(button).toHaveLength(1);
button.simulate('click');
expect(onClick).toHaveBeenCalled();
});
});

View File

@ -4,3 +4,4 @@ export { default as HeaderRow, HeaderCell } from './HeaderRow';
export { default as ActionItem } from './ActionItem';
export { default as ToolbarDeleteButton } from './ToolbarDeleteButton';
export { default as ToolbarAddButton } from './ToolbarAddButton';
export { default as ToolbarSyncSourceButton } from './ToolbarSyncSourceButton';

View File

@ -1,7 +1,6 @@
import React, { useCallback, useEffect } from 'react';
import { useParams, useLocation } from 'react-router-dom';
import { t, Plural } from '@lingui/macro';
import { Button, Tooltip } from '@patternfly/react-core';
import useRequest, {
useDeleteItems,
@ -14,6 +13,7 @@ import PaginatedTable, {
HeaderCell,
ToolbarAddButton,
ToolbarDeleteButton,
ToolbarSyncSourceButton,
} from 'components/PaginatedTable';
import useSelected from 'hooks/useSelected';
import DatalistToolbar from 'components/DataListToolbar';
@ -185,22 +185,7 @@ function InventorySourceList() {
}
/>,
...(canSyncSources
? [
<Tooltip
key="update"
content={t`Sync all sources`}
position="top"
>
<Button
ouiaId="sync-all-button"
onClick={syncAll}
aria-label={t`Sync all`}
variant="secondary"
>
{t`Sync all`}
</Button>
</Tooltip>,
]
? [<ToolbarSyncSourceButton onClick={syncAll} />]
: []),
]}
/>