Use object permissions in Tagging frontend [FC-0036]

src/taxonomy/__mocks__/taxonomyListMock.js

@@ -15,6 +15,12 @@ module.exports = {
       allowFreeText: false,
       systemDefined: true,
       visibleToAuthors: false,
+      userPermissions: {
+        canAdd: true,
+        canView: true,
+        canChange: false,
+        canDelete: false,
+      },
     },
     {
       id: -1,
@@ -25,6 +31,12 @@ module.exports = {
       allowFreeText: false,
       systemDefined: true,
       visibleToAuthors: true,
+      userPermissions: {
+        canAdd: true,
+        canView: true,
+        canChange: false,
+        canDelete: false,
+      },
     },
     {
       id: 1,
@@ -35,6 +47,12 @@ module.exports = {
       allowFreeText: false,
       systemDefined: false,
       visibleToAuthors: true,
+      userPermissions: {
+        canAdd: true,
+        canView: true,
+        canChange: true,
+        canDelete: true,
+      },
     },
     {
       id: 2,
@@ -45,6 +63,12 @@ module.exports = {
       allowFreeText: false,
       systemDefined: false,
       visibleToAuthors: true,
+      userPermissions: {
+        canAdd: true,
+        canView: true,
+        canChange: true,
+        canDelete: true,
+      },
     },
   ],
 };

src/taxonomy/data/types.mjs

@@ -1,5 +1,13 @@
 // @ts-check
 
+/**
+ * @typedef {Object} UserPermissions
+ * @property {boolean} canAdd
+ * @property {boolean} canView
+ * @property {boolean} canChange
+ * @property {boolean} canDelete
+ **/
+
 /**
  * @typedef {Object} TaxonomyData
  * @property {number} id
@@ -12,6 +20,7 @@
  * @property {boolean} visibleToAuthors
  * @property {number} tagsCount
  * @property {string[]} orgs
+ * @property {UserPermissions} userPermissions
  */
 
 /**

src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx

@@ -3,7 +3,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import PropTypes from 'prop-types';
 
 import initializeStore from '../../store';
@@ -16,6 +16,12 @@ const data = {
   id: taxonomyId,
   name: 'Taxonomy 1',
   description: 'This is a description',
+  userPermissions: {
+    canAdd: true,
+    canView: true,
+    canChange: true,
+    canDelete: true,
+  },
 };
 
 const queryClient = new QueryClient();
@@ -40,6 +46,12 @@ TaxonomyCardComponent.propTypes = {
     systemDefined: PropTypes.bool,
     orgsCount: PropTypes.number,
     onDeleteTaxonomy: PropTypes.func,
+    userPermissions: PropTypes.shape({
+      canAdd: PropTypes.bool,
+      canView: PropTypes.bool,
+      canChange: PropTypes.bool,
+      canDelete: PropTypes.bool,
+    }),
   }).isRequired,
 };
 
@@ -62,6 +74,33 @@ describe('<TaxonomyCard />', async () => {
     expect(getByText(data.description)).toBeInTheDocument();
   });
 
+  it('should show the ⋮ menu', () => {
+    const { getByTestId, queryByTestId } = render(<TaxonomyCardComponent original={data} />);
+
+    // Menu closed/doesn't exist yet
+    expect(queryByTestId('taxonomy-menu')).not.toBeInTheDocument();
+
+    // Click on the menu button to open
+    fireEvent.click(getByTestId('taxonomy-menu-button'));
+
+    // Menu opened
+    expect(getByTestId('taxonomy-menu')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-import')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-export')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-delete')).toBeVisible();
+
+    // Click on button again to close the menu
+    fireEvent.click(getByTestId('taxonomy-menu-button'));
+
+    // Menu closed
+    // Jest bug: toBeVisible() isn't checking opacity correctly
+    // expect(getByTestId('taxonomy-menu')).not.toBeVisible();
+    expect(getByTestId('taxonomy-menu').style.opacity).toEqual('0');
+
+    // Menu button still visible
+    expect(getByTestId('taxonomy-menu-button')).toBeVisible();
+  });
+
   it('not show the system-defined badge with normal taxonomies', () => {
     const { queryByText } = render(<TaxonomyCardComponent original={data} />);
     expect(queryByText('System-level')).not.toBeInTheDocument();

src/taxonomy/taxonomy-card/index.jsx

@@ -149,6 +149,12 @@ TaxonomyCard.propTypes = {
     systemDefined: PropTypes.bool,
     orgsCount: PropTypes.number,
     tagsCount: PropTypes.number,
+    userPermissions: PropTypes.shape({
+      canAdd: PropTypes.bool.isRequired,
+      canView: PropTypes.bool.isRequired,
+      canChange: PropTypes.bool.isRequired,
+      canDelete: PropTypes.bool.isRequired,
+    }).isRequired,
   }).isRequired,
 };
 

src/taxonomy/taxonomy-detail/TaxonomyDetailPage.test.jsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { useTaxonomyDetailData } from './data/api';
 import initializeStore from '../../store';
@@ -89,12 +89,62 @@ describe('<TaxonomyDetailPage />', async () => {
         name: 'Test taxonomy',
         description: 'This is a description',
         systemDefined: true,
+        userPreferences: {
+          canAdd: true,
+          canView: true,
+          canChange: true,
+          canDelete: true,
+        },
       },
     });
     const { getByRole } = render(<RootWrapper />);
     expect(getByRole('heading')).toHaveTextContent('Test taxonomy');
   });
 
+  it('should show the Action menu with options', () => {
+    useTaxonomyDetailData.mockReturnValue({
+      isSuccess: true,
+      isFetched: true,
+      isError: false,
+      data: {
+        id: 1,
+        name: 'Test taxonomy',
+        description: 'This is a description',
+        systemDefined: true,
+        userPreferences: {
+          canAdd: true,
+          canView: true,
+          canChange: true,
+          canDelete: true,
+        },
+      },
+    });
+    const { getByTestId, queryByTestId } = render(<RootWrapper />);
+
+    // Menu closed/doesn't exist yet
+    expect(queryByTestId('taxonomy-menu')).not.toBeInTheDocument();
+
+    // Click on the menu button to open
+    fireEvent.click(getByTestId('taxonomy-menu-button'));
+
+    // Menu opened
+    expect(getByTestId('taxonomy-menu')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-import')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-export')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-delete')).toBeVisible();
+
+    // Click on button again to close the menu
+    fireEvent.click(getByTestId('taxonomy-menu-button'));
+
+    // Menu closed
+    // Jest bug: toBeVisible() isn't checking opacity correctly
+    // expect(getByTestId('taxonomy-menu')).not.toBeVisible();
+    expect(getByTestId('taxonomy-menu').style.opacity).toEqual('0');
+
+    // Menu button still visible
+    expect(getByTestId('taxonomy-menu-button')).toBeVisible();
+  });
+
   it('should show system defined badge', async () => {
     useTaxonomyDetailData.mockReturnValue({
       isSuccess: true,
@@ -105,6 +155,7 @@ describe('<TaxonomyDetailPage />', async () => {
         name: 'Test taxonomy',
         description: 'This is a description',
         systemDefined: true,
+        userPreferences: {},
       },
     });
     const { getByText } = render(<RootWrapper />);
@@ -121,6 +172,7 @@ describe('<TaxonomyDetailPage />', async () => {
         name: 'Test taxonomy',
         description: 'This is a description',
         systemDefined: false,
+        userPreferences: {},
       },
     });
     const { queryByText } = render(<RootWrapper />);

src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx

@@ -9,7 +9,7 @@ import {
   IconButton,
 } from '@edx/paragon';
 import { MoreVert } from '@edx/paragon/icons';
-import { omitBy } from 'lodash';
+import { pickBy } from 'lodash';
 import PropTypes from 'prop-types';
 import { useNavigate } from 'react-router-dom';
 
@@ -50,7 +50,7 @@ const TaxonomyMenu = ({
     * @typedef {Object} MenuItem
     * @property {string} title - The title of the menu item
     * @property {() => void} action - The action to perform when the menu item is clicked
-    * @property {boolean} [hide] - Whether or not to hide the menu item
+    * @property {boolean} [show] - Whether or not to show the menu item
     *
     * @constant
     * @type {Record<string, MenuItem>}
@@ -59,23 +59,22 @@ const TaxonomyMenu = ({
     import: {
       title: intl.formatMessage(messages.importMenu),
       action: () => importTaxonomyTags(taxonomy.id, intl),
-      // Hide import menu item if taxonomy is system defined or allows free text
-      hide: taxonomy.systemDefined || taxonomy.allowFreeText,
+      show: taxonomy.userPermissions.canChange,
     },
     export: {
       title: intl.formatMessage(messages.exportMenu),
       action: exportModalOpen,
+      show: taxonomy.userPermissions.canView,
     },
     delete: {
       title: intl.formatMessage(messages.deleteMenu),
       action: deleteDialogOpen,
-      // Hide delete menu item if taxonomy is system defined
-      hide: taxonomy.systemDefined,
+      show: taxonomy.userPermissions.canDelete,
     },
   };
 
   // Remove hidden menu items
-  menuItems = omitBy(menuItems, (value) => value.hide);
+  menuItems = pickBy(menuItems, (value) => value.show);
 
   const renderModals = () => (
     <>
@@ -136,9 +135,13 @@ TaxonomyMenu.propTypes = {
   taxonomy: PropTypes.shape({
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
-    systemDefined: PropTypes.bool.isRequired,
-    allowFreeText: PropTypes.bool.isRequired,
     tagsCount: PropTypes.number.isRequired,
+    userPermissions: PropTypes.shape({
+      canAdd: PropTypes.bool.isRequired,
+      canView: PropTypes.bool.isRequired,
+      canChange: PropTypes.bool.isRequired,
+      canDelete: PropTypes.bool.isRequired,
+    }).isRequired,
   }).isRequired,
   iconMenu: PropTypes.bool,
 };