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();