From 0fe4b3c767aa1051c7e0bc5b65d2c255f04606e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=B4mulo=20Penido?= Date: Wed, 29 Nov 2023 12:12:51 -0300 Subject: [PATCH] refactor: change menu item list --- src/taxonomy/taxonomy-card/TaxonomyCard.scss | 17 ------ src/taxonomy/taxonomy-card/index.jsx | 25 ++------ .../taxonomy-detail/TaxonomyDetailPage.jsx | 11 +--- src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx | 61 +++++++++++++------ .../taxonomy-menu/TaxonomyMenu.test.jsx | 51 ++++++++++++++-- 5 files changed, 96 insertions(+), 69 deletions(-) diff --git a/src/taxonomy/taxonomy-card/TaxonomyCard.scss b/src/taxonomy/taxonomy-card/TaxonomyCard.scss index b4839bd1c2..35e198abe8 100644 --- a/src/taxonomy/taxonomy-card/TaxonomyCard.scss +++ b/src/taxonomy/taxonomy-card/TaxonomyCard.scss @@ -29,21 +29,4 @@ text-overflow: ellipsis; white-space: nowrap; } - - .taxonomy-menu-item:focus { - /** - * There is a bug in the menu that auto focus the first item. - * We convert the focus style to a normal style. - */ - background-color: white !important; - font-weight: normal !important; - } - - .taxonomy-menu-item:focus:hover { - /** - * Check the previous block about the focus. - * This enable a normal hover to focused items. - */ - background-color: $light-500 !important; - } } diff --git a/src/taxonomy/taxonomy-card/index.jsx b/src/taxonomy/taxonomy-card/index.jsx index b8aed93178..81cd8cbba9 100644 --- a/src/taxonomy/taxonomy-card/index.jsx +++ b/src/taxonomy/taxonomy-card/index.jsx @@ -71,25 +71,12 @@ const TaxonomyCard = ({ className, original }) => { const intl = useIntl(); - const getHeaderActions = () => { - if (systemDefined) { - // We don't show the export menu, because the system-taxonomies - // can't be exported. The API returns and error. - // The entire menu has been hidden because currently only - // the export menu exists. - // - // TODO When adding more menus, change this logic to hide only the export menu. - return undefined; - } - - return ( - - ); - }; + const getHeaderActions = () => ( + + ); return ( { const getHeaderActions = () => ( ); diff --git a/src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx b/src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx index 3aba9d4d7d..ad87601952 100644 --- a/src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx +++ b/src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx @@ -15,17 +15,38 @@ import { importTaxonomyTags } from '../import-tags'; import messages from './messages'; const TaxonomyMenu = ({ - id, name, iconMenu, disabled, + taxonomy, iconMenu, }) => { const intl = useIntl(); + const getTaxonomyMenuItems = () => { + const { systemDefined, allowFreeText } = taxonomy; + const menuItems = ['import', 'export']; + if (systemDefined) { + // System defined taxonomies cannot be imported + return menuItems.filter((item) => !['import'].includes(item)); + } + if (allowFreeText) { + // Free text taxonomies cannot be imported + return menuItems.filter((item) => !['import'].includes(item)); + } + return menuItems; + }; + + const menuItems = getTaxonomyMenuItems(); + const [isExportModalOpen, exportModalOpen, exportModalClose] = useToggle(false); const menuItemActions = { - import: () => importTaxonomyTags(id, intl), + import: () => importTaxonomyTags(taxonomy.id, intl), export: exportModalOpen, }; + const menuItemMessages = { + import: messages.importMenu, + export: messages.exportMenu, + }; + const onClickMenuItem = (e, menuName) => { e.preventDefault(); menuItemActions[menuName]?.(); @@ -35,8 +56,8 @@ const TaxonomyMenu = ({ ); @@ -47,19 +68,22 @@ const TaxonomyMenu = ({ src={MoreVert} iconAs={Icon} variant="primary" - alt={intl.formatMessage(messages.actionsButtonAlt, { name })} + alt={intl.formatMessage(messages.actionsButtonAlt, { name: taxonomy.name })} data-testid="taxonomy-menu-button" - disabled={disabled} + disabled={menuItems.length === 0} > {intl.formatMessage(messages.actionsButtonLabel)} - onClickMenuItem(e, 'import')}> - {intl.formatMessage(messages.importMenu)} - - onClickMenuItem(e, 'export')}> - {intl.formatMessage(messages.exportMenu)} - + {menuItems.map((item) => ( + onClickMenuItem(e, item)} + > + {intl.formatMessage(menuItemMessages[item])} + + ))} {renderModals()} @@ -67,14 +91,13 @@ const TaxonomyMenu = ({ }; TaxonomyMenu.propTypes = { - id: PropTypes.number.isRequired, - name: PropTypes.string.isRequired, + taxonomy: PropTypes.shape({ + id: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + systemDefined: PropTypes.bool.isRequired, + allowFreeText: PropTypes.bool.isRequired, + }).isRequired, iconMenu: PropTypes.bool.isRequired, - disabled: PropTypes.bool, -}; - -TaxonomyMenu.defaultProps = { - disabled: false, }; export default TaxonomyMenu; diff --git a/src/taxonomy/taxonomy-menu/TaxonomyMenu.test.jsx b/src/taxonomy/taxonomy-menu/TaxonomyMenu.test.jsx index dd1300ba04..142049f2ac 100644 --- a/src/taxonomy/taxonomy-menu/TaxonomyMenu.test.jsx +++ b/src/taxonomy/taxonomy-menu/TaxonomyMenu.test.jsx @@ -22,23 +22,34 @@ jest.mock('../data/api', () => ({ })); const TaxonomyMenuComponent = ({ + systemDefined, + allowFreeText, iconMenu, - disabled, }) => ( - + ); TaxonomyMenuComponent.propTypes = { iconMenu: PropTypes.bool.isRequired, - disabled: PropTypes.bool, + systemDefined: PropTypes.bool, + allowFreeText: PropTypes.bool, }; TaxonomyMenuComponent.defaultProps = { - disabled: false, + systemDefined: false, + allowFreeText: false, }; describe('', async () => { @@ -79,6 +90,38 @@ describe('', async () => { expect(getByTestId('taxonomy-menu-button')).toBeVisible(); }); + test('doesnt show systemDefined taxonomies disabled menus', () => { + const { getByTestId } = render(); + + // Menu closed/doesn't exist yet + expect(() => getByTestId('taxonomy-menu')).toThrow(); + + // Click on the menu button to open + fireEvent.click(getByTestId('taxonomy-menu-button')); + + // Menu opened + expect(getByTestId('taxonomy-menu')).toBeVisible(); + + // Check that the import menu is not show + expect(() => getByTestId('taxonomy-menu-import')).toThrow(); + }); + + test('doesnt show freeText taxonomies disabled menus', () => { + const { getByTestId } = render(); + + // Menu closed/doesn't exist yet + expect(() => getByTestId('taxonomy-menu')).toThrow(); + + // Click on the menu button to open + fireEvent.click(getByTestId('taxonomy-menu-button')); + + // Menu opened + expect(getByTestId('taxonomy-menu')).toBeVisible(); + + // Check that the import menu is not show + expect(() => getByTestId('taxonomy-menu-import')).toThrow(); + }); + test('should open export modal on export menu click', () => { const { getByTestId, getByText } = render();