diff --git a/__tests__/components/DataListToolbar.test.jsx b/__tests__/components/DataListToolbar.test.jsx index a7ad38cca7..51dabba0db 100644 --- a/__tests__/components/DataListToolbar.test.jsx +++ b/__tests__/components/DataListToolbar.test.jsx @@ -69,19 +69,14 @@ describe('', () => { { name: 'Baz', key: 'baz' } ]; - const onSearch = jest.fn(); const onSort = jest.fn(); - const onSelectAll = jest.fn(); toolbar = mountWithContexts( ); const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector); @@ -97,13 +92,10 @@ describe('', () => { sortDropdownItems.at(0).simulate('click', mockedSortEvent); toolbar = mountWithContexts( ); toolbar.update(); @@ -141,20 +133,12 @@ describe('', () => { const numericColumns = [{ name: 'ID', key: 'id', isSortable: true, isNumeric: true }]; const alphaColumns = [{ name: 'Name', key: 'name', isSortable: true, isNumeric: false }]; - const onSearch = jest.fn(); - const onSort = jest.fn(); - const onSelectAll = jest.fn(); toolbar = mountWithContexts( ); @@ -163,13 +147,9 @@ describe('', () => { toolbar = mountWithContexts( ); @@ -178,13 +158,9 @@ describe('', () => { toolbar = mountWithContexts( ); @@ -193,13 +169,9 @@ describe('', () => { toolbar = mountWithContexts( ); @@ -211,29 +183,43 @@ describe('', () => { const columns = [{ name: 'Name', key: 'name', isSortable: true }]; const onOpenDeleteModal = jest.fn(); const openDeleteModalButton = 'button[aria-label="Delete"]'; - const onSearch = jest.fn(); - const onSort = jest.fn(); - const onSelectAll = jest.fn(); - const showDelete = true; - const disableTrashCanIcon = false; toolbar = mountWithContexts( [1, 2, 3, 4]} - sortedColumnKey="name" - sortOrder="ascending" columns={columns} - onSearch={onSearch} - onSort={onSort} - onSelectAll={onSelectAll} onOpenDeleteModal={onOpenDeleteModal} - showDelete={showDelete} - disableTrashCanIcon={disableTrashCanIcon} + showDelete + disableDelete={false} + /> + ); + toolbar.find(openDeleteModalButton).simulate('click'); + expect(onOpenDeleteModal).toHaveBeenCalled(); + }); + + test('Tooltip says "Select a row to delete" when trash can icon is disabled', () => { + toolbar = mountWithContexts( + ); - toolbar.find(openDeleteModalButton).simulate('click'); - expect(onOpenDeleteModal).toBeCalled(); + const toolTip = toolbar.find('.pf-c-tooltip__content'); + toolTip.simulate('mouseover'); + expect(toolTip.text()).toBe('Select a row to delete'); + }); + + test('Delete Org tooltip says "Delete" when trash can icon is enabled', () => { + toolbar = mountWithContexts( + + ); + const toolTip = toolbar.find('.pf-c-tooltip__content'); + toolTip.simulate('mouseover'); + expect(toolTip.text()).toBe('Delete'); }); }); diff --git a/__tests__/pages/Organizations/components/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap b/__tests__/pages/Organizations/components/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap index da12524981..57b9ffa547 100644 --- a/__tests__/pages/Organizations/components/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap +++ b/__tests__/pages/Organizations/components/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap @@ -56,6 +56,7 @@ exports[` should render initially 1`] = ` ] } isOpen={true} + onClose={[Function]} title="Remove Team Access" variant="danger" > diff --git a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap index 2f06d04b0e..7a4d68e761 100644 --- a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap +++ b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap @@ -205,6 +205,7 @@ exports[` initially renders succesfully 1`] = ` ] } deleteTooltip="Delete" + disableDelete={true} isAllSelected={false} isCompact={false} noLeftMargin={false} @@ -916,8 +917,20 @@ exports[` initially renders succesfully 1`] = ` - -
+ +
diff --git a/package-lock.json b/package-lock.json index 1b3ffb0778..5f5b1a3d5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2219,7 +2219,7 @@ }, "ansi-colors": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==", "requires": { "ansi-wrap": "^0.1.0" @@ -2616,7 +2616,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "requires": { @@ -3239,12 +3239,12 @@ }, "babel-plugin-syntax-class-properties": { "version": "6.13.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=" }, "babel-plugin-syntax-flow": { "version": "6.18.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0=" }, "babel-plugin-syntax-jsx": { @@ -4138,7 +4138,7 @@ }, "camelcase-keys": { "version": "2.1.0", - "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "requires": { @@ -5421,7 +5421,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", @@ -6640,7 +6640,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", @@ -7027,7 +7027,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -7048,12 +7049,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7068,17 +7071,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -7195,7 +7201,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -7207,6 +7214,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7221,6 +7229,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7228,12 +7237,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7252,6 +7263,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -7332,7 +7344,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -7344,6 +7357,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -7429,7 +7443,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -7465,6 +7480,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7484,6 +7500,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7527,12 +7544,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -10606,7 +10625,7 @@ }, "kind-of": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=" }, "kleur": { @@ -10646,7 +10665,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -10705,18 +10724,6 @@ "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz", "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==" }, - "lodash.assign": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", - "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=", - "dev": true - }, - "lodash.clonedeep": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", - "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", - "dev": true - }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -10741,12 +10748,6 @@ "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", "dev": true }, - "lodash.mergewith": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz", - "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==", - "dev": true - }, "lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", @@ -10994,7 +10995,7 @@ }, "meow": { "version": "3.7.0", - "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "requires": { @@ -11012,7 +11013,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true } @@ -11372,7 +11373,8 @@ "version": "2.11.1", "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz", "integrity": "sha512-iji6k87OSXa0CcrLl9z+ZiYSuR2o+c0bGuNmXdrhTQTakxytAFsC56SArGYoiHlJlFoHSnvmhpceZJaXkVuOtA==", - "dev": true + "dev": true, + "optional": true }, "nanomatch": { "version": "1.2.13", @@ -11523,7 +11525,7 @@ }, "semver": { "version": "5.3.0", - "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", "dev": true } @@ -11639,9 +11641,9 @@ } }, "node-sass": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz", - "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz", + "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==", "dev": true, "requires": { "async-foreach": "^0.1.3", @@ -11651,12 +11653,10 @@ "get-stdin": "^4.0.1", "glob": "^7.0.3", "in-publish": "^2.0.0", - "lodash.assign": "^4.2.0", - "lodash.clonedeep": "^4.3.2", - "lodash.mergewith": "^4.6.0", + "lodash": "^4.17.11", "meow": "^3.7.0", "mkdirp": "^0.5.1", - "nan": "^2.10.0", + "nan": "^2.13.2", "node-gyp": "^3.8.0", "npmlog": "^4.0.0", "request": "^2.88.0", @@ -11674,6 +11674,12 @@ "lru-cache": "^4.0.1", "which": "^1.2.9" } + }, + "nan": { + "version": "2.13.2", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz", + "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==", + "dev": true } } }, @@ -13884,7 +13890,7 @@ }, "os-locale": { "version": "1.4.0", - "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", + "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=", "dev": true, "requires": { @@ -14660,7 +14666,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "requires": { diff --git a/package.json b/package.json index c4f67774a8..a4edfe39e6 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "file-loader": "^2.0.0", "history": "^4.9.0", "jest": "^24.7.1", - "node-sass": "^4.11.0", + "node-sass": "^4.12.0", "react-hot-loader": "^4.3.3", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", diff --git a/src/components/AddRole/AddResourceRole.jsx b/src/components/AddRole/AddResourceRole.jsx index 1b205a7c96..279a3f1363 100644 --- a/src/components/AddRole/AddResourceRole.jsx +++ b/src/components/AddRole/AddResourceRole.jsx @@ -238,6 +238,7 @@ class AddResourceRole extends React.Component { return ( @@ -111,33 +115,38 @@ class DataListToolbar extends React.Component { )}
- - { showDelete && ( + + {showDelete && ( - +
- +
)} {showAdd && addUrl && ( - + + )} {showAdd && add && ( @@ -154,14 +163,17 @@ class DataListToolbar extends React.Component { DataListToolbar.propTypes = { add: PropTypes.node, + addBtnToolTipContent: PropTypes.string, addUrl: PropTypes.string, columns: PropTypes.arrayOf(PropTypes.object).isRequired, deleteTooltip: PropTypes.node, + disableDelete: PropTypes.bool, isAllSelected: PropTypes.bool, isCompact: PropTypes.bool, noLeftMargin: PropTypes.bool, onCompact: PropTypes.func, onExpand: PropTypes.func, + onOpenDeleteModal: PropTypes.func, onSearch: PropTypes.func, onSelectAll: PropTypes.func, onSort: PropTypes.func, @@ -169,18 +181,21 @@ DataListToolbar.propTypes = { showDelete: PropTypes.bool, showSelectAll: PropTypes.bool, sortOrder: PropTypes.string, - sortedColumnKey: PropTypes.string + sortedColumnKey: PropTypes.string, }; DataListToolbar.defaultProps = { add: null, + addBtnToolTipContent: i18nMark('Add'), addUrl: null, deleteTooltip: i18nMark('Delete'), + disableDelete: true, isAllSelected: false, isCompact: false, noLeftMargin: false, onCompact: null, onExpand: null, + onOpenDeleteModal: null, onSearch: null, onSelectAll: null, onSort: null, @@ -188,7 +203,7 @@ DataListToolbar.defaultProps = { showDelete: false, showSelectAll: false, sortOrder: 'ascending', - sortedColumnKey: 'name' + sortedColumnKey: 'name', }; export default DataListToolbar; diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss index b05068218f..865ec3af88 100644 --- a/src/components/DataListToolbar/styles.scss +++ b/src/components/DataListToolbar/styles.scss @@ -30,6 +30,7 @@ .awx-toolbar button.pf-c-button { height: 30px; + width: 30px; padding: 0px; } @@ -76,19 +77,18 @@ margin-right: 20px; } -.awx-toolbar .pf-c-button { - margin-right: 20px; -} - .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain { font-size: 18px; } -.pf-c-button--disabled--BackgroundColor{ - background-color: #b7b7b7; -} + .awx-ToolBarBtn{ width: 30px; + display: flex; + justify-content: center; + margin-right: 20px; + border-radius: 3px; } + .awx-ToolBarBtn:hover{ .awx-ToolBarTrashCanIcon { color:white; @@ -96,3 +96,17 @@ background-color:#d9534f; } +.awx-ToolBarBtn--disabled:hover{ + .awx-ToolBarTrashCanIcon { + color: #d2d2d2; + } + background-color:white; + cursor: not-allowed; +} + +.pf-l-toolbar >div{ + &:last-child{ + display:none; + } +} + diff --git a/src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx b/src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx index 6a6d324710..4f4760b864 100644 --- a/src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx +++ b/src/pages/Organizations/components/DeleteRoleConfirmationModal.jsx @@ -33,7 +33,7 @@ class DeleteRoleConfirmationModal extends React.Component { variant="danger" title={i18nMark(title)} isOpen - onClose={this.hideWarning} + onClose={onCancel} actions={[