refactor: change menu item list

open-craft · Nov 29, 2023 · 0fe4b3c · 0fe4b3c
1 parent 689071c
commit 0fe4b3c
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 69 deletions.
diff --git 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
@@ -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 (
-      <TaxonomyMenu
-        id={id}
-        name={name}
-        iconMenu
-      />
-    );
-  };
+  const getHeaderActions = () => (
+    <TaxonomyMenu
+      taxonomy={original}
+      iconMenu
+    />
+  );
 
   return (
     <Card

diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
@@ -40,16 +40,7 @@ const TaxonomyDetailPage = () => {
 
   const getHeaderActions = () => (
     <TaxonomyMenu
-      id={taxonomy.id}
-      name={taxonomy.name}
-      disabled={
-        // 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 disabled because currently only
-        // the export menu exists.
-        // ToDo: When adding more menus, change this logic to hide only the export menu.
-        taxonomy.systemDefined
-      }
+      taxonomy={taxonomy}
     />
   );
 

diff --git 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 = ({
     <ExportModal
       isOpen={isExportModalOpen}
       onClose={exportModalClose}
-      taxonomyId={id}
-      taxonomyName={name}
+      taxonomyId={taxonomy.id}
+      taxonomyName={taxonomy.name}
     />
   );
 
@@ -47,34 +68,36 @@ 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)}
       </Dropdown.Toggle>
       <Dropdown.Menu data-testid="taxonomy-menu">
-        <Dropdown.Item data-testid="taxonomy-menu-import" onClick={(e) => onClickMenuItem(e, 'import')}>
-          {intl.formatMessage(messages.importMenu)}
-        </Dropdown.Item>
-        <Dropdown.Item data-testid="taxonomy-menu-export" onClick={(e) => onClickMenuItem(e, 'export')}>
-          {intl.formatMessage(messages.exportMenu)}
-        </Dropdown.Item>
+        {menuItems.map((item) => (
+          <Dropdown.Item
+            key={item}
+            data-testid={`taxonomy-menu-${item}`}
+            onClick={(e) => onClickMenuItem(e, item)}
+          >
+            {intl.formatMessage(menuItemMessages[item])}
+          </Dropdown.Item>
+        ))}
       </Dropdown.Menu>
       {renderModals()}
     </Dropdown>
   );
 };
 
 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
@@ -22,23 +22,34 @@ jest.mock('../data/api', () => ({
 }));
 
 const TaxonomyMenuComponent = ({
+  systemDefined,
+  allowFreeText,
   iconMenu,
-  disabled,
 }) => (
   <AppProvider store={store}>
     <IntlProvider locale="en" messages={{}}>
-      <TaxonomyMenu id={taxonomyId} name={taxonomyName} iconMenu={iconMenu} disabled={disabled} />
+      <TaxonomyMenu
+        taxonomy={{
+          id: taxonomyId,
+          name: taxonomyName,
+          systemDefined,
+          allowFreeText,
+        }}
+        iconMenu={iconMenu}
+      />
     </IntlProvider>
   </AppProvider>
 );
 
 TaxonomyMenuComponent.propTypes = {
   iconMenu: PropTypes.bool.isRequired,
-  disabled: PropTypes.bool,
+  systemDefined: PropTypes.bool,
+  allowFreeText: PropTypes.bool,
 };
 
 TaxonomyMenuComponent.defaultProps = {
-  disabled: false,
+  systemDefined: false,
+  allowFreeText: false,
 };
 
 describe('<TaxonomyMenu />', async () => {
@@ -79,6 +90,38 @@ describe('<TaxonomyMenu />', async () => {
       expect(getByTestId('taxonomy-menu-button')).toBeVisible();
     });
 
+    test('doesnt show systemDefined taxonomies disabled menus', () => {
+      const { getByTestId } = render(<TaxonomyMenuComponent iconMenu={iconMenu} systemDefined />);
+
+      // 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(<TaxonomyMenuComponent iconMenu={iconMenu} allowFreeText />);
+
+      // 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(<TaxonomyMenuComponent iconMenu={iconMenu} />);