From 1eff48915873f8867af96909bc9e9aea3c5dec20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chris=20Ch=C3=A1vez?= <christofer@opencraft.com>
Date: Tue, 12 Dec 2023 07:24:39 -0500
Subject: [PATCH] feat: Taxonomy delete dialog (#684)

This adds:
    New submenu 'Delete' on the Taxonomy card menu
    Delete Dialog with the functionality to delete a Taxonomy
    Show a Toast after delete the Taxonomy
    Enable export for System defined Taxonomies
---
 src/content-tags-drawer/data/api.js           |   6 +-
 src/content-tags-drawer/data/apiHooks.jsx     |   3 -
 src/content-tags-drawer/data/types.mjs        |   5 -
 src/index.scss                                |   2 +-
 src/taxonomy/TaxonomyLayout.jsx               |  35 ++++--
 src/taxonomy/TaxonomyLayout.test.jsx          |  21 +++-
 src/taxonomy/TaxonomyListPage.jsx             |  26 +++-
 src/taxonomy/TaxonomyListPage.test.jsx        |  63 +++++++---
 src/taxonomy/common/context.js                |   7 ++
 src/taxonomy/data/api.js                      |  12 +-
 src/taxonomy/data/api.test.js                 |   9 ++
 src/taxonomy/data/apiHooks.jsx                |  23 +++-
 src/taxonomy/data/apiHooks.test.jsx           |  34 +++++-
 src/taxonomy/data/types.mjs                   |  11 +-
 src/taxonomy/delete-dialog/DeleteDialog.scss  |   6 +
 src/taxonomy/delete-dialog/index.jsx          |  99 +++++++++++++++
 src/taxonomy/delete-dialog/messages.js        |  30 +++++
 src/taxonomy/export-modal/index.jsx           |   4 +-
 src/taxonomy/index.scss                       |   2 +
 src/taxonomy/messages.js                      |   4 +
 .../taxonomy-card/TaxonomyCard.test.jsx       |  56 ++++++++-
 .../taxonomy-card/TaxonomyCardMenu.jsx        |  29 +++--
 src/taxonomy/taxonomy-card/index.jsx          |  46 +++++--
 src/taxonomy/taxonomy-card/messages.js        |   4 +
 .../taxonomy-detail/TaxonomyDetailMenu.jsx    |  18 ++-
 .../taxonomy-detail/TaxonomyDetailPage.jsx    |  80 ++++++++----
 .../TaxonomyDetailPage.test.jsx               | 114 ++++++++++++++++--
 src/taxonomy/taxonomy-detail/messages.js      |   4 +
 28 files changed, 634 insertions(+), 119 deletions(-)
 create mode 100644 src/taxonomy/common/context.js
 create mode 100644 src/taxonomy/delete-dialog/DeleteDialog.scss
 create mode 100644 src/taxonomy/delete-dialog/index.jsx
 create mode 100644 src/taxonomy/delete-dialog/messages.js
 create mode 100644 src/taxonomy/index.scss

diff --git a/src/content-tags-drawer/data/api.js b/src/content-tags-drawer/data/api.js
index 562bfaa1ec..a6082b33da 100644
--- a/src/content-tags-drawer/data/api.js
+++ b/src/content-tags-drawer/data/api.js
@@ -12,7 +12,7 @@ export const getContentDataApiUrl = (contentId) => new URL(`/xblock/outline/${co
  * @param {number} taxonomyId The id of the taxonomy to fetch tags for
  * @param {string} fullPathProvided Optional param that contains the full URL to fetch data
  *                 If provided, we use it instead of generating the URL. This is usually for fetching subTags
- * @returns {Promise<Object>}
+ * @returns {Promise<import("./types.mjs").TaxonomyTagsData>}
  */
 export async function getTaxonomyTagsData(taxonomyId, fullPathProvided) {
   const { data } = await getAuthenticatedHttpClient().get(
@@ -24,7 +24,7 @@ export async function getTaxonomyTagsData(taxonomyId, fullPathProvided) {
 /**
  * Get the tags that are applied to the content object
  * @param {string} contentId The id of the content object to fetch the applied tags for
- * @returns {Promise<Object>}
+ * @returns {Promise<import("./types.mjs").ContentTaxonomyTagsData>}
  */
 export async function getContentTaxonomyTagsData(contentId) {
   const { data } = await getAuthenticatedHttpClient().get(getContentTaxonomyTagsApiUrl(contentId));
@@ -34,7 +34,7 @@ export async function getContentTaxonomyTagsData(contentId) {
 /**
  * Fetch meta data (eg: display_name) about the content object (unit/compoenent)
  * @param {string} contentId The id of the content object (unit/component)
- * @returns {Promise<Object>}
+ * @returns {Promise<import("./types.mjs").ContentData>}
  */
 export async function getContentData(contentId) {
   const { data } = await getAuthenticatedHttpClient().get(getContentDataApiUrl(contentId));
diff --git a/src/content-tags-drawer/data/apiHooks.jsx b/src/content-tags-drawer/data/apiHooks.jsx
index df5f49bebf..97ffde2fe2 100644
--- a/src/content-tags-drawer/data/apiHooks.jsx
+++ b/src/content-tags-drawer/data/apiHooks.jsx
@@ -12,7 +12,6 @@ import {
  * @param {number} taxonomyId The id of the taxonomy to fetch tags for
  * @param {string} fullPathProvided Optional param that contains the full URL to fetch data
  *                 If provided, we use it instead of generating the URL. This is usually for fetching subTags
- * @returns {import("@tanstack/react-query").UseQueryResult<import("./types.mjs").TaxonomyTagsData>}
  */
 export const useTaxonomyTagsData = (taxonomyId, fullPathProvided) => (
   useQuery({
@@ -24,7 +23,6 @@ export const useTaxonomyTagsData = (taxonomyId, fullPathProvided) => (
 /**
  * Builds the query to get the taxonomy tags applied to the content object
  * @param {string} contentId The id of the content object to fetch the applied tags for
- * @returns {import("@tanstack/react-query").UseQueryResult<import("./types.mjs").ContentTaxonomyTagsData>}
  */
 export const useContentTaxonomyTagsData = (contentId) => (
   useQuery({
@@ -36,7 +34,6 @@ export const useContentTaxonomyTagsData = (contentId) => (
 /**
  * Builds the query to get meta data about the content object
  * @param {string} contentId The id of the content object (unit/component)
- * @returns {import("@tanstack/react-query").UseQueryResult<import("./types.mjs").ContentData>}
  */
 export const useContentData = (contentId) => (
   useQuery({
diff --git a/src/content-tags-drawer/data/types.mjs b/src/content-tags-drawer/data/types.mjs
index 00b3fefd4c..c16cb45ea6 100644
--- a/src/content-tags-drawer/data/types.mjs
+++ b/src/content-tags-drawer/data/types.mjs
@@ -100,8 +100,3 @@
  * @property {TaxonomyTagData[]} results
  */
 
-/**
- * @typedef {Object} UseQueryResult
- * @property {Object} data
- * @property {string} status
- */
diff --git a/src/index.scss b/src/index.scss
index 6b7a1f42ae..2a3dc06794 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -18,7 +18,7 @@
 @import "course-updates/CourseUpdates";
 @import "export-page/CourseExportPage";
 @import "import-page/CourseImportPage";
-@import "taxonomy/taxonomy-card/TaxonomyCard";
+@import "taxonomy";
 @import "files-and-videos";
 @import "content-tags-drawer/TagBubble";
 @import "course-outline/CourseOutline";
diff --git a/src/taxonomy/TaxonomyLayout.jsx b/src/taxonomy/TaxonomyLayout.jsx
index eb992b2b42..c49c55ee84 100644
--- a/src/taxonomy/TaxonomyLayout.jsx
+++ b/src/taxonomy/TaxonomyLayout.jsx
@@ -1,14 +1,35 @@
+import React, { useMemo, useState } from 'react';
 import { StudioFooter } from '@edx/frontend-component-footer';
 import { Outlet } from 'react-router-dom';
+import { Toast } from '@edx/paragon';
 
 import Header from '../header';
+import { TaxonomyContext } from './common/context';
 
-const TaxonomyLayout = () => (
-  <div className="bg-light-400">
-    <Header isHiddenMainMenu />
-    <Outlet />
-    <StudioFooter />
-  </div>
-);
+const TaxonomyLayout = () => {
+  // Use `setToastMessage` to show the toast.
+  const [toastMessage, setToastMessage] = useState(null);
+
+  const context = useMemo(() => ({
+    toastMessage, setToastMessage,
+  }), []);
+
+  return (
+    <TaxonomyContext.Provider value={context}>
+      <div className="bg-light-400">
+        <Header isHiddenMainMenu />
+        <Outlet />
+        <StudioFooter />
+        <Toast
+          show={toastMessage !== null}
+          onClose={() => setToastMessage(null)}
+          data-testid="taxonomy-toast"
+        >
+          {toastMessage}
+        </Toast>
+      </div>
+    </TaxonomyContext.Provider>
+  );
+};
 
 export default TaxonomyLayout;
diff --git a/src/taxonomy/TaxonomyLayout.test.jsx b/src/taxonomy/TaxonomyLayout.test.jsx
index 924e7465e9..d833809997 100644
--- a/src/taxonomy/TaxonomyLayout.test.jsx
+++ b/src/taxonomy/TaxonomyLayout.test.jsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 
 import initializeStore from '../store';
 import TaxonomyLayout from './TaxonomyLayout';
 
 let store;
-
+const toastMessage = 'Hello, this is a toast!';
 jest.mock('../header', () => jest.fn(() => <div data-testid="mock-header" />));
 jest.mock('@edx/frontend-component-footer', () => ({
   StudioFooter: jest.fn(() => <div data-testid="mock-footer" />),
@@ -17,6 +17,15 @@ jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   Outlet: jest.fn(() => <div data-testid="mock-content" />),
 }));
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: jest.fn((initial) => {
+    if (initial === null) {
+      return [toastMessage, jest.fn()];
+    }
+    return [initial, jest.fn()];
+  }),
+}));
 
 const RootWrapper = () => (
   <AppProvider store={store}>
@@ -45,4 +54,12 @@ describe('<TaxonomyLayout />', async () => {
     expect(getByTestId('mock-content')).toBeInTheDocument();
     expect(getByTestId('mock-footer')).toBeInTheDocument();
   });
+
+  it('should show toast', async () => {
+    const { getByTestId, getByText } = render(<RootWrapper />);
+    act(() => {
+      expect(getByTestId('taxonomy-toast')).toBeInTheDocument();
+      expect(getByText(toastMessage)).toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/taxonomy/TaxonomyListPage.jsx b/src/taxonomy/TaxonomyListPage.jsx
index 20287b693f..9a1e69ffd9 100644
--- a/src/taxonomy/TaxonomyListPage.jsx
+++ b/src/taxonomy/TaxonomyListPage.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {
   CardView,
   Container,
@@ -7,21 +7,34 @@ import {
 } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
-
 import SubHeader from '../generic/sub-header/SubHeader';
 import getPageHeadTitle from '../generic/utils';
 import messages from './messages';
 import TaxonomyCard from './taxonomy-card';
-import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './data/apiHooks';
+import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded, useDeleteTaxonomy } from './data/apiHooks';
+import { TaxonomyContext } from './common/context';
 
 const TaxonomyListPage = () => {
   const intl = useIntl();
+  const deleteTaxonomy = useDeleteTaxonomy();
+  const { setToastMessage } = useContext(TaxonomyContext);
+
+  const onDeleteTaxonomy = React.useCallback((id, name) => {
+    deleteTaxonomy({ pk: id }, {
+      onSuccess: async () => {
+        setToastMessage(intl.formatMessage(messages.taxonomyDeleteToast, { name }));
+      },
+      onError: async () => {
+        // TODO: display the error to the user
+      },
+    });
+  }, [setToastMessage]);
+
   const useTaxonomyListData = () => {
     const taxonomyListData = useTaxonomyListDataResponse();
     const isLoaded = useIsTaxonomyListDataLoaded();
     return { taxonomyListData, isLoaded };
   };
-
   const { taxonomyListData, isLoaded } = useTaxonomyListData();
 
   const getHeaderButtons = () => (
@@ -70,11 +83,14 @@ const TaxonomyListPage = () => {
                 {
                   accessor: 'systemDefined',
                 },
+                {
+                  accessor: 'tagsCount',
+                },
               ]}
             >
               <CardView
                 className="bg-light-400 p-5"
-                CardComponent={TaxonomyCard}
+                CardComponent={(row) => TaxonomyCard({ ...row, onDeleteTaxonomy })}
               />
             </DataTable>
           )}
diff --git a/src/taxonomy/TaxonomyListPage.test.jsx b/src/taxonomy/TaxonomyListPage.test.jsx
index 8e68347568..17c95034e2 100644
--- a/src/taxonomy/TaxonomyListPage.test.jsx
+++ b/src/taxonomy/TaxonomyListPage.test.jsx
@@ -1,28 +1,50 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { act, render } from '@testing-library/react';
+import { act, render, fireEvent } from '@testing-library/react';
 
 import initializeStore from '../store';
 
 import TaxonomyListPage from './TaxonomyListPage';
 import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './data/apiHooks';
+import { TaxonomyContext } from './common/context';
 
 let store;
+const mockSetToastMessage = jest.fn();
+const mockDeleteTaxonomy = jest.fn();
+const taxonomies = [{
+  id: 1,
+  name: 'Taxonomy',
+  description: 'This is a description',
+}];
 
 jest.mock('./data/apiHooks', () => ({
   useTaxonomyListDataResponse: jest.fn(),
   useIsTaxonomyListDataLoaded: jest.fn(),
+  useDeleteTaxonomy: () => mockDeleteTaxonomy,
 }));
+jest.mock('./taxonomy-card/TaxonomyCardMenu', () => jest.fn(({ onClickMenuItem }) => (
+  // eslint-disable-next-line jsx-a11y/control-has-associated-label
+  <button type="button" data-testid="test-delete-button" onClick={() => onClickMenuItem('delete')} />
+)));
 
-const RootWrapper = () => (
-  <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <TaxonomyListPage intl={injectIntl} />
-    </IntlProvider>
-  </AppProvider>
-);
+const RootWrapper = () => {
+  const context = useMemo(() => ({
+    toastMessage: null,
+    setToastMessage: mockSetToastMessage,
+  }), []);
+
+  return (
+    <AppProvider store={store}>
+      <IntlProvider locale="en" messages={{}}>
+        <TaxonomyContext.Provider value={context}>
+          <TaxonomyListPage intl={injectIntl} />
+        </TaxonomyContext.Provider>
+      </IntlProvider>
+    </AppProvider>
+  );
+};
 
 describe('<TaxonomyListPage />', async () => {
   beforeEach(async () => {
@@ -54,15 +76,28 @@ describe('<TaxonomyListPage />', async () => {
   it('shows the data table after the query is complete', async () => {
     useIsTaxonomyListDataLoaded.mockReturnValue(true);
     useTaxonomyListDataResponse.mockReturnValue({
-      results: [{
-        id: 1,
-        name: 'Taxonomy',
-        description: 'This is a description',
-      }],
+      results: taxonomies,
     });
     await act(async () => {
       const { getByTestId } = render(<RootWrapper />);
       expect(getByTestId('taxonomy-card-1')).toBeInTheDocument();
     });
   });
+
+  it('should show the success toast after delete', async () => {
+    useIsTaxonomyListDataLoaded.mockReturnValue(true);
+    useTaxonomyListDataResponse.mockReturnValue({
+      results: taxonomies,
+    });
+    mockDeleteTaxonomy.mockImplementationOnce(async (params, callbacks) => {
+      callbacks.onSuccess();
+    });
+    const { getByTestId, getByLabelText } = render(<RootWrapper />);
+    fireEvent.click(getByTestId('test-delete-button'));
+    fireEvent.change(getByLabelText('Type DELETE to confirm'), { target: { value: 'DELETE' } });
+    fireEvent.click(getByTestId('delete-button'));
+
+    expect(mockDeleteTaxonomy).toBeCalledTimes(1);
+    expect(mockSetToastMessage).toBeCalledWith(`"${taxonomies[0].name}" deleted`);
+  });
 });
diff --git a/src/taxonomy/common/context.js b/src/taxonomy/common/context.js
new file mode 100644
index 0000000000..58d3bf0bba
--- /dev/null
+++ b/src/taxonomy/common/context.js
@@ -0,0 +1,7 @@
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+
+export const TaxonomyContext = React.createContext({
+  toastMessage: null,
+  setToastMessage: null,
+});
diff --git a/src/taxonomy/data/api.js b/src/taxonomy/data/api.js
index 126f272356..f7fdf447c5 100644
--- a/src/taxonomy/data/api.js
+++ b/src/taxonomy/data/api.js
@@ -18,17 +18,27 @@ export const getExportTaxonomyApiUrl = (pk, format) => new URL(
   `api/content_tagging/v1/taxonomies/${pk}/export/?output_format=${format}&download=1`,
   getApiBaseUrl(),
 ).href;
+export const getTaxonomyApiUrl = (pk) => new URL(`api/content_tagging/v1/taxonomies/${pk}/`, getApiBaseUrl()).href;
 
 /**
  * Get list of taxonomies.
  * @param {string} org Optioanl organization query param
- * @returns {Promise<Object>}
+ * @returns {Promise<import("./types.mjs").TaxonomyListData>}
  */
 export async function getTaxonomyListData(org) {
   const { data } = await getAuthenticatedHttpClient().get(getTaxonomyListApiUrl(org));
   return camelCaseObject(data);
 }
 
+/**
+ * Delete a Taxonomy
+ * @param {number} pk
+ * @returns {Promise<Object>}
+ */
+export async function deleteTaxonomy(pk) {
+  await getAuthenticatedHttpClient().delete(getTaxonomyApiUrl(pk));
+}
+
 /**
  * Downloads the file of the exported taxonomy
  * @param {number} pk
diff --git a/src/taxonomy/data/api.test.js b/src/taxonomy/data/api.test.js
index e5a01d17f4..3b83dd1b28 100644
--- a/src/taxonomy/data/api.test.js
+++ b/src/taxonomy/data/api.test.js
@@ -9,6 +9,8 @@ import {
   getExportTaxonomyApiUrl,
   getTaxonomyListData,
   getTaxonomyExportFile,
+  getTaxonomyApiUrl,
+  deleteTaxonomy,
 } from './api';
 
 let axiosMock;
@@ -59,6 +61,13 @@ describe('taxonomy api calls', () => {
     expect(result).toEqual(taxonomyListMock);
   });
 
+  it('should delete a taxonomy', async () => {
+    axiosMock.onDelete(getTaxonomyApiUrl()).reply(200);
+    await deleteTaxonomy();
+
+    expect(axiosMock.history.delete[0].url).toEqual(getTaxonomyApiUrl());
+  });
+
   it('should set window.location.href correctly', () => {
     const pk = 1;
     const format = 'json';
diff --git a/src/taxonomy/data/apiHooks.jsx b/src/taxonomy/data/apiHooks.jsx
index fcdc9ad373..827057ea38 100644
--- a/src/taxonomy/data/apiHooks.jsx
+++ b/src/taxonomy/data/apiHooks.jsx
@@ -11,13 +11,12 @@
  * - Hooks that calls the query hook, prepare and return the data.
  *   Ex. useTaxonomyListDataResponse & useIsTaxonomyListDataLoaded.
  */
-import { useQuery } from '@tanstack/react-query';
-import { getTaxonomyListData } from './api';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { getTaxonomyListData, deleteTaxonomy } from './api';
 
 /**
  * Builds the query to get the taxonomy list
  * @param {string} org Optional organization query param
- * @returns {import("./types.mjs").UseQueryResult}
  */
 const useTaxonomyListData = (org) => (
   useQuery({
@@ -26,6 +25,22 @@ const useTaxonomyListData = (org) => (
   })
 );
 
+/**
+ * Builds the mutation to delete a taxonomy.
+ * @returns An object with the mutation configuration.
+ */
+export const useDeleteTaxonomy = () => {
+  const queryClient = useQueryClient();
+  const { mutate } = useMutation({
+    /** @type {import("@tanstack/react-query").MutateFunction<any, any, {pk: number}>} */
+    mutationFn: async ({ pk }) => deleteTaxonomy(pk),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['taxonomyList'] });
+    },
+  });
+  return mutate;
+};
+
 /**
  * Gets the taxonomy list data
  * @param {string} org Optional organization query param
@@ -34,7 +49,7 @@ const useTaxonomyListData = (org) => (
 export const useTaxonomyListDataResponse = (org) => {
   const response = useTaxonomyListData(org);
   if (response.status === 'success') {
-    return response.data;
+    return { ...response.data, refetch: response.refetch };
   }
   return undefined;
 };
diff --git a/src/taxonomy/data/apiHooks.test.jsx b/src/taxonomy/data/apiHooks.test.jsx
index 66715b04c9..e0160ad8d7 100644
--- a/src/taxonomy/data/apiHooks.test.jsx
+++ b/src/taxonomy/data/apiHooks.test.jsx
@@ -1,13 +1,26 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { act } from '@testing-library/react';
 import {
   useTaxonomyListDataResponse,
   useIsTaxonomyListDataLoaded,
+  useDeleteTaxonomy,
 } from './apiHooks';
+import { deleteTaxonomy } from './api';
 
 jest.mock('@tanstack/react-query', () => ({
   useQuery: jest.fn(),
+  useMutation: jest.fn(),
+  useQueryClient: jest.fn(),
 }));
 
+jest.mock('./api', () => ({
+  deleteTaxonomy: jest.fn(),
+}));
+
+/*
+ * TODO: We can refactor this test: Mock the API response using axiosMock.
+ * Ref: https://github.com/openedx/frontend-app-course-authoring/pull/684#issuecomment-1847694090
+ */
 describe('useTaxonomyListDataResponse', () => {
   it('should return data when status is success', () => {
     useQuery.mockReturnValueOnce({ status: 'success', data: { data: 'data' } });
@@ -43,3 +56,22 @@ describe('useIsTaxonomyListDataLoaded', () => {
     expect(result).toBe(false);
   });
 });
+
+describe('useDeleteTaxonomy', () => {
+  it('should call the delete function', async () => {
+    useMutation.mockReturnValueOnce({ mutate: jest.fn() });
+
+    const mutation = useDeleteTaxonomy();
+    mutation();
+
+    expect(useMutation).toBeCalled();
+
+    const [config] = useMutation.mock.calls[0];
+    const { mutationFn } = config;
+
+    await act(async () => {
+      await mutationFn({ pk: 1 });
+      expect(deleteTaxonomy).toBeCalledWith(1);
+    });
+  });
+});
diff --git a/src/taxonomy/data/types.mjs b/src/taxonomy/data/types.mjs
index 7c7f4c0677..e2c1026fd8 100644
--- a/src/taxonomy/data/types.mjs
+++ b/src/taxonomy/data/types.mjs
@@ -19,16 +19,7 @@
  * @property {number} num_pages
  * @property {number} current_page
  * @property {number} start
+ * @property {function} refetch
  * @property {TaxonomyData[]} results
  */
 
-/**
- * @typedef {Object} QueryTaxonomyListData
- * @property {TaxonomyListData} data
- */
-
-/**
- * @typedef {Object} UseQueryResult
- * @property {Object} data
- * @property {string} status
- */
diff --git a/src/taxonomy/delete-dialog/DeleteDialog.scss b/src/taxonomy/delete-dialog/DeleteDialog.scss
new file mode 100644
index 0000000000..8f05e3ab2c
--- /dev/null
+++ b/src/taxonomy/delete-dialog/DeleteDialog.scss
@@ -0,0 +1,6 @@
+.taxonomy-delete-dialog {
+  .warning-icon {
+    top: 5px;
+    right: 5px;
+  }
+}
diff --git a/src/taxonomy/delete-dialog/index.jsx b/src/taxonomy/delete-dialog/index.jsx
new file mode 100644
index 0000000000..93854f1972
--- /dev/null
+++ b/src/taxonomy/delete-dialog/index.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import {
+  ActionRow,
+  Button,
+  Form,
+  ModalDialog,
+  Icon,
+} from '@edx/paragon';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Warning } from '@edx/paragon/icons';
+import messages from './messages';
+
+const DeleteDialog = ({
+  taxonomyName,
+  tagsCount,
+  isOpen,
+  onClose,
+  onDelete,
+}) => {
+  const intl = useIntl();
+  const [deleteButtonDisabled, setDeleteButtonDisabled] = useState(true);
+  const deleteLabel = intl.formatMessage(messages.deleteDialogConfirmDeleteLabel);
+
+  const handleInputChange = React.useCallback((event) => {
+    if (event.target.value === deleteLabel) {
+      setDeleteButtonDisabled(false);
+    } else {
+      setDeleteButtonDisabled(true);
+    }
+  });
+
+  const onClickDelete = React.useCallback(() => {
+    onClose();
+    onDelete();
+  }, [onClose, onDelete]);
+
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages.deleteDialogTitle, { taxonomyName })}
+      isOpen={isOpen}
+      onClose={onClose}
+      size="md"
+      hasCloseButton={false}
+      variant="warning"
+      className="taxonomy-delete-dialog"
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          <Icon src={Warning} className="d-inline-block text-warning warning-icon" />
+          {intl.formatMessage(messages.deleteDialogTitle, { taxonomyName })}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        <div className="mb-4">
+          {/* Delete `(?)` after implement get tags count of a taxonomy */}
+          {intl.formatMessage(messages.deleteDialogBody, {
+            tagsCount: tagsCount !== undefined ? tagsCount : '(?)',
+          })}
+        </div>
+        <Form.Group>
+          <Form.Label>
+            {intl.formatMessage(messages.deleteDialogConfirmLabel, {
+              deleteLabel: <b>{deleteLabel}</b>,
+            })}
+          </Form.Label>
+          <Form.Control
+            onChange={handleInputChange}
+          />
+        </Form.Group>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {intl.formatMessage(messages.deleteDialogCancelLabel)}
+          </ModalDialog.CloseButton>
+          <Button
+            variant="primary"
+            disabled={deleteButtonDisabled}
+            onClick={onClickDelete}
+            data-testid="delete-button"
+          >
+            {intl.formatMessage(messages.deleteDialogDeleteLabel)}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+DeleteDialog.propTypes = {
+  taxonomyName: PropTypes.string.isRequired,
+  tagsCount: PropTypes.number.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+export default DeleteDialog;
diff --git a/src/taxonomy/delete-dialog/messages.js b/src/taxonomy/delete-dialog/messages.js
new file mode 100644
index 0000000000..42654e1c7f
--- /dev/null
+++ b/src/taxonomy/delete-dialog/messages.js
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  deleteDialogTitle: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.title',
+    defaultMessage: 'Delete "{taxonomyName}"',
+  },
+  deleteDialogBody: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.body',
+    defaultMessage: 'Warning! You are about to delete a taxonomy containing {tagsCount} tags. Assigned organizations will no longer be able to access the taxonomy, and any tags applied to course content will be removed.',
+  },
+  deleteDialogConfirmLabel: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.confirm.label',
+    defaultMessage: 'Type {deleteLabel} to confirm',
+  },
+  deleteDialogConfirmDeleteLabel: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.confirmDelete.label',
+    defaultMessage: 'DELETE',
+  },
+  deleteDialogCancelLabel: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.cancel.label',
+    defaultMessage: 'Cancel',
+  },
+  deleteDialogDeleteLabel: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.delete.label',
+    defaultMessage: 'Delete',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/export-modal/index.jsx b/src/taxonomy/export-modal/index.jsx
index 76fd71c2fc..21ceedfe44 100644
--- a/src/taxonomy/export-modal/index.jsx
+++ b/src/taxonomy/export-modal/index.jsx
@@ -18,10 +18,10 @@ const ExportModal = ({
   const intl = useIntl();
   const [outputFormat, setOutputFormat] = useState('csv');
 
-  const onClickExport = () => {
+  const onClickExport = React.useCallback(() => {
     onClose();
     getTaxonomyExportFile(taxonomyId, outputFormat);
-  };
+  }, [onClose, taxonomyId, outputFormat]);
 
   return (
     <ModalDialog
diff --git a/src/taxonomy/index.scss b/src/taxonomy/index.scss
new file mode 100644
index 0000000000..be1464fd9c
--- /dev/null
+++ b/src/taxonomy/index.scss
@@ -0,0 +1,2 @@
+@import "taxonomy/taxonomy-card/TaxonomyCard";
+@import "taxonomy/delete-dialog/DeleteDialog";
diff --git a/src/taxonomy/messages.js b/src/taxonomy/messages.js
index 82467e09ba..0a60c4725d 100644
--- a/src/taxonomy/messages.js
+++ b/src/taxonomy/messages.js
@@ -21,6 +21,10 @@ const messages = defineMessages({
     id: 'course-authoring.taxonomy-list.spinner.loading',
     defaultMessage: 'Loading',
   },
+  taxonomyDeleteToast: {
+    id: 'course-authoring.taxonomy-list.toast.delete',
+    defaultMessage: '"{name}" deleted',
+  },
 });
 
 export default messages;
diff --git a/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx b/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx
index fd61bf0cdb..4b2b2146dd 100644
--- a/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx
+++ b/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { render, fireEvent } from '@testing-library/react';
@@ -11,6 +11,7 @@ import TaxonomyCard from '.';
 
 let store;
 const taxonomyId = 1;
+const onDeleteTaxonomy = jest.fn();
 
 const data = {
   id: taxonomyId,
@@ -25,7 +26,10 @@ jest.mock('../data/api', () => ({
 const TaxonomyCardComponent = ({ original }) => (
   <AppProvider store={store}>
     <IntlProvider locale="en" messages={{}}>
-      <TaxonomyCard intl={injectIntl} original={original} />
+      <TaxonomyCard
+        original={original}
+        onDeleteTaxonomy={onDeleteTaxonomy}
+      />
     </IntlProvider>
   </AppProvider>
 );
@@ -37,6 +41,7 @@ TaxonomyCardComponent.propTypes = {
     description: PropTypes.string,
     systemDefined: PropTypes.bool,
     orgsCount: PropTypes.number,
+    onDeleteTaxonomy: PropTypes.func,
   }).isRequired,
 };
 
@@ -147,4 +152,51 @@ describe('<TaxonomyCard />', async () => {
     expect(() => getByText('Select format to export')).toThrow();
     expect(getTaxonomyExportFile).toHaveBeenCalledWith(taxonomyId, 'json');
   });
+
+  test('should open delete dialog on delete menu click', () => {
+    const { getByTestId, getByText } = render(<TaxonomyCardComponent original={data} />);
+
+    // Modal closed
+    expect(() => getByText(`Delete "${data.name}"`)).toThrow();
+
+    // Click on delete menu
+    fireEvent.click(getByTestId('taxonomy-card-menu-button-1'));
+    fireEvent.click(getByText('Delete'));
+
+    // Modal opened
+    expect(getByText(`Delete "${data.name}"`)).toBeInTheDocument();
+
+    // Click on cancel button
+    fireEvent.click(getByText('Cancel'));
+
+    // Modal closed
+    expect(() => getByText(`Delete "${data.name}"`)).toThrow();
+  });
+
+  test('should delete a taxonomy', () => {
+    const { getByTestId, getByText, getByLabelText } = render(<TaxonomyCardComponent original={data} />);
+
+    // Click on delete menu
+    fireEvent.click(getByTestId('taxonomy-card-menu-button-1'));
+    fireEvent.click(getByText('Delete'));
+
+    const deleteButton = getByTestId('delete-button');
+
+    // The delete button must to be disabled
+    expect(deleteButton).toBeDisabled();
+
+    // Testing delete button enabled/disabled changes
+    const input = getByLabelText('Type DELETE to confirm');
+    fireEvent.change(input, { target: { value: 'DELETE_INVALID' } });
+    expect(deleteButton).toBeDisabled();
+    fireEvent.change(input, { target: { value: 'DELETE' } });
+    expect(deleteButton).toBeEnabled();
+
+    // Click on delete button
+    fireEvent.click(deleteButton);
+
+    // Modal closed
+    expect(() => getByText(`Delete "${data.name}"`)).toThrow();
+    expect(onDeleteTaxonomy).toHaveBeenCalledWith(taxonomyId, data.name);
+  });
 });
diff --git a/src/taxonomy/taxonomy-card/TaxonomyCardMenu.jsx b/src/taxonomy/taxonomy-card/TaxonomyCardMenu.jsx
index 1b27c8ee61..dc4f9b7340 100644
--- a/src/taxonomy/taxonomy-card/TaxonomyCardMenu.jsx
+++ b/src/taxonomy/taxonomy-card/TaxonomyCardMenu.jsx
@@ -9,12 +9,17 @@ import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
+const menuMessages = {
+  export: messages.taxonomyCardExportMenu,
+  delete: messages.taxonomyCardDeleteMenu,
+};
+
 const TaxonomyCardMenu = ({
-  id, name, onClickMenuItem,
+  id, name, onClickMenuItem, disabled, menuItems,
 }) => {
   const intl = useIntl();
 
-  const onClickItem = (e, menuName) => {
+  const onClickItem = (menuName) => (e) => {
     e.preventDefault();
     onClickMenuItem(menuName);
   };
@@ -29,16 +34,18 @@ const TaxonomyCardMenu = ({
         alt={intl.formatMessage(messages.taxonomyMenuAlt, { name })}
         id={`taxonomy-card-menu-button-${id}`}
         data-testid={`taxonomy-card-menu-button-${id}`}
+        disabled={disabled}
       />
       <Dropdown.Menu data-testid={`taxonomy-card-menu-${id}`}>
-        {/* Add more menu items here */}
-        <Dropdown.Item
-          className="taxonomy-menu-item"
-          data-testid={`taxonomy-card-menu-export-${id}`}
-          onClick={(e) => onClickItem(e, 'export')}
-        >
-          {intl.formatMessage(messages.taxonomyCardExportMenu)}
-        </Dropdown.Item>
+        { menuItems.map(item => (
+          <Dropdown.Item
+            className="taxonomy-menu-item"
+            data-testid={`taxonomy-card-menu-${item}-${id}`}
+            onClick={onClickItem(item)}
+          >
+            {intl.formatMessage(menuMessages[item])}
+          </Dropdown.Item>
+        ))}
       </Dropdown.Menu>
     </Dropdown>
   );
@@ -48,6 +55,8 @@ TaxonomyCardMenu.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   onClickMenuItem: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  menuItems: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 export default TaxonomyCardMenu;
diff --git a/src/taxonomy/taxonomy-card/index.jsx b/src/taxonomy/taxonomy-card/index.jsx
index f1080e9e12..2b94763556 100644
--- a/src/taxonomy/taxonomy-card/index.jsx
+++ b/src/taxonomy/taxonomy-card/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Badge,
   Card,
@@ -12,6 +12,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import TaxonomyCardMenu from './TaxonomyCardMenu';
 import ExportModal from '../export-modal';
+import DeleteDialog from '../delete-dialog';
 
 const orgsCountEnabled = (orgsCount) => orgsCount !== undefined && orgsCount !== 0;
 
@@ -64,38 +65,50 @@ HeaderSubtitle.propTypes = {
   orgsCount: PropTypes.number.isRequired,
 };
 
-const TaxonomyCard = ({ className, original }) => {
+const TaxonomyCard = ({ className, original, onDeleteTaxonomy }) => {
   const {
-    id, name, description, systemDefined, orgsCount,
+    id, name, description, systemDefined, orgsCount, tagsCount,
   } = original;
 
   const intl = useIntl();
   const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isMenuEnalbed, setIsMenuEnabled] = useState(true);
+
+  useEffect(() => {
+    // Resets the card to the initial state
+    setIsMenuEnabled(true);
+  }, [id]);
 
   // Add here more menu item actions
   const menuItemActions = {
     export: () => setIsExportModalOpen(true),
+    delete: () => setIsDeleteDialogOpen(true),
   };
+  const menuItems = ['export', 'delete'];
+  const systemDefinedMenuItems = ['export'];
 
   const onClickMenuItem = (menuName) => (
     menuItemActions[menuName]?.()
   );
 
+  const onClickDeleteTaxonomy = () => {
+    setIsMenuEnabled(false);
+    onDeleteTaxonomy(id, name);
+  };
+
   const getHeaderActions = () => {
+    let enabledMenuItems = menuItems;
     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;
+      enabledMenuItems = systemDefinedMenuItems;
     }
     return (
       <TaxonomyCardMenu
         id={id}
         name={name}
         onClickMenuItem={onClickMenuItem}
+        disabled={!isMenuEnalbed}
+        menuItems={enabledMenuItems}
       />
     );
   };
@@ -108,6 +121,16 @@ const TaxonomyCard = ({ className, original }) => {
     />
   );
 
+  const renderDeleteDialog = () => isDeleteDialogOpen && (
+    <DeleteDialog
+      isOpen={isDeleteDialogOpen}
+      onClose={() => setIsDeleteDialogOpen(false)}
+      onDelete={onClickDeleteTaxonomy}
+      taxonomyName={name}
+      tagsCount={tagsCount}
+    />
+  );
+
   return (
     <>
       <Card
@@ -140,6 +163,7 @@ const TaxonomyCard = ({ className, original }) => {
         </Card.Body>
       </Card>
       {renderExportModal()}
+      {renderDeleteDialog()}
     </>
   );
 };
@@ -156,7 +180,9 @@ TaxonomyCard.propTypes = {
     description: PropTypes.string,
     systemDefined: PropTypes.bool,
     orgsCount: PropTypes.number,
+    tagsCount: PropTypes.number,
   }).isRequired,
+  onDeleteTaxonomy: PropTypes.func.isRequired,
 };
 
 export default TaxonomyCard;
diff --git a/src/taxonomy/taxonomy-card/messages.js b/src/taxonomy/taxonomy-card/messages.js
index 6886c2f99c..8be1793529 100644
--- a/src/taxonomy/taxonomy-card/messages.js
+++ b/src/taxonomy/taxonomy-card/messages.js
@@ -21,6 +21,10 @@ const messages = defineMessages({
     id: 'course-authoring.taxonomy-list.menu.export.label',
     defaultMessage: 'Export',
   },
+  taxonomyCardDeleteMenu: {
+    id: 'course-authoring.taxonomy-list.menu.delete.label',
+    defaultMessage: 'Delete',
+  },
   taxonomyMenuAlt: {
     id: 'course-authoring.taxonomy-list.menu.alt',
     defaultMessage: '{name} menu',
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailMenu.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailMenu.jsx
index 1f2aa839d2..81da2227a8 100644
--- a/src/taxonomy/taxonomy-detail/TaxonomyDetailMenu.jsx
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailMenu.jsx
@@ -8,8 +8,13 @@ import PropTypes from 'prop-types';
 
 import messages from './messages';
 
+const menuMessages = {
+  export: messages.exportMenu,
+  delete: messages.deleteMenu,
+};
+
 const TaxonomyDetailMenu = ({
-  id, name, disabled, onClickMenuItem,
+  id, name, disabled, onClickMenuItem, menuItems,
 }) => {
   const intl = useIntl();
 
@@ -20,9 +25,13 @@ const TaxonomyDetailMenu = ({
       alt={intl.formatMessage(messages.actionsButtonAlt, { name })}
       disabled={disabled}
     >
-      <Dropdown.Item onClick={() => onClickMenuItem('export')}>
-        {intl.formatMessage(messages.exportMenu)}
-      </Dropdown.Item>
+      { menuItems.map(item => (
+        <Dropdown.Item
+          onClick={() => onClickMenuItem(item)}
+        >
+          {intl.formatMessage(menuMessages[item])}
+        </Dropdown.Item>
+      ))}
     </DropdownButton>
   );
 };
@@ -32,6 +41,7 @@ TaxonomyDetailMenu.propTypes = {
   name: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   onClickMenuItem: PropTypes.func.isRequired,
+  menuItems: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 TaxonomyDetailMenu.defaultProps = {
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
index 177bac326d..af1c89e5e8 100644
--- a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
@@ -1,5 +1,4 @@
-// ts-check
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Breadcrumb,
@@ -7,7 +6,7 @@ import {
   Layout,
 } from '@edx/paragon';
 import { Helmet } from 'react-helmet';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useParams, useNavigate } from 'react-router-dom';
 
 import ConnectionErrorAlert from '../../generic/ConnectionErrorAlert';
 import Loading from '../../generic/Loading';
@@ -19,16 +18,42 @@ import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
 import { TagListTable } from '../tag-list';
 import ExportModal from '../export-modal';
 import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from './data/apiHooks';
+import DeleteDialog from '../delete-dialog';
+import { useDeleteTaxonomy } from '../data/apiHooks';
+import { TaxonomyContext } from '../common/context';
 
 const TaxonomyDetailPage = () => {
   const intl = useIntl();
   const { taxonomyId: taxonomyIdString } = useParams();
+  const { setToastMessage } = useContext(TaxonomyContext);
   const taxonomyId = Number(taxonomyIdString);
 
   const taxonomy = useTaxonomyDetailDataResponse(taxonomyId);
   const { isError, isFetched } = useTaxonomyDetailDataStatus(taxonomyId);
 
   const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const deleteTaxonomy = useDeleteTaxonomy();
+  const navigate = useNavigate();
+
+  const onClickDeleteTaxonomy = React.useCallback(() => {
+    deleteTaxonomy({ pk: taxonomy.id }, {
+      onSuccess: async () => {
+        setToastMessage(intl.formatMessage(taxonomyMessages.taxonomyDeleteToast, { name: taxonomy.name }));
+        navigate('/taxonomies');
+      },
+      onError: async () => {
+        // TODO: display the error to the user
+      },
+    });
+  }, [setToastMessage, taxonomy]);
+
+  const menuItems = ['export', 'delete'];
+  const systemDefinedMenuItems = ['export'];
+  const menuItemActions = {
+    export: () => setIsExportModalOpen(true),
+    delete: () => setIsDeleteDialogOpen(true),
+  };
 
   if (!isFetched) {
     return (
@@ -47,36 +72,38 @@ const TaxonomyDetailPage = () => {
       isOpen={isExportModalOpen}
       onClose={() => setIsExportModalOpen(false)}
       taxonomyId={taxonomy.id}
+    />
+  );
+
+  const renderDeleteDialog = () => isDeleteDialogOpen && (
+    <DeleteDialog
+      isOpen={isDeleteDialogOpen}
+      onClose={() => setIsDeleteDialogOpen(false)}
+      onDelete={onClickDeleteTaxonomy}
       taxonomyName={taxonomy.name}
+      tagsCount={0}
     />
   );
 
-  const onClickMenuItem = (menuName) => {
-    switch (menuName) {
-    case 'export':
-      setIsExportModalOpen(true);
-      break;
-    default:
-      break;
+  const onClickMenuItem = (menuName) => (
+    menuItemActions[menuName]?.()
+  );
+
+  const getHeaderActions = () => {
+    let enabledMenuItems = menuItems;
+    if (taxonomy.systemDefined) {
+      enabledMenuItems = systemDefinedMenuItems;
     }
+    return (
+      <TaxonomyDetailMenu
+        id={taxonomy.id}
+        name={taxonomy.name}
+        onClickMenuItem={onClickMenuItem}
+        menuItems={enabledMenuItems}
+      />
+    );
   };
 
-  const getHeaderActions = () => (
-    <TaxonomyDetailMenu
-      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
-      }
-      onClickMenuItem={onClickMenuItem}
-    />
-  );
-
   return (
     <>
       <Helmet>
@@ -117,6 +144,7 @@ const TaxonomyDetailPage = () => {
         </Container>
       </div>
       {renderModals()}
+      {renderDeleteDialog()}
     </>
   );
 };
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.test.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.test.jsx
index 085ea59b85..bd95a7500e 100644
--- a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.test.jsx
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.test.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+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';
@@ -7,8 +7,12 @@ import { fireEvent, render } from '@testing-library/react';
 import { useTaxonomyDetailData } from './data/api';
 import initializeStore from '../../store';
 import TaxonomyDetailPage from './TaxonomyDetailPage';
+import { TaxonomyContext } from '../common/context';
 
 let store;
+const mockNavigate = jest.fn();
+const mockMutate = jest.fn();
+const mockSetToastMessage = jest.fn();
 
 jest.mock('./data/api', () => ({
   useTaxonomyDetailData: jest.fn(),
@@ -18,18 +22,31 @@ jest.mock('react-router-dom', () => ({
   useParams: () => ({
     taxonomyId: '1',
   }),
+  useNavigate: () => mockNavigate,
+}));
+jest.mock('../data/apiHooks', () => ({
+  useDeleteTaxonomy: () => mockMutate,
 }));
 
 jest.mock('./TaxonomyDetailSideCard', () => jest.fn(() => <>Mock TaxonomyDetailSideCard</>));
 jest.mock('../tag-list/TagListTable', () => jest.fn(() => <>Mock TagListTable</>));
 
-const RootWrapper = () => (
-  <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <TaxonomyDetailPage />
-    </IntlProvider>
-  </AppProvider>
-);
+const RootWrapper = () => {
+  const context = useMemo(() => ({
+    toastMessage: null,
+    setToastMessage: mockSetToastMessage,
+  }), []);
+
+  return (
+    <AppProvider store={store}>
+      <IntlProvider locale="en" messages={{}}>
+        <TaxonomyContext.Provider value={context}>
+          <TaxonomyDetailPage />
+        </TaxonomyContext.Provider>
+      </IntlProvider>
+    </AppProvider>
+  );
+};
 
 describe('<TaxonomyDetailPage />', async () => {
   beforeEach(async () => {
@@ -71,7 +88,7 @@ describe('<TaxonomyDetailPage />', async () => {
         id: 1,
         name: 'Test taxonomy',
         description: 'This is a description',
-        systemDefined: false,
+        systemDefined: true,
       },
     });
     const { getByRole } = render(<RootWrapper />);
@@ -108,4 +125,83 @@ describe('<TaxonomyDetailPage />', async () => {
     // Modal closed
     expect(() => getByText('Select format to export')).toThrow();
   });
+
+  it('should open delete dialog on delete menu click', () => {
+    const taxonomyName = 'Test taxonomy';
+
+    useTaxonomyDetailData.mockReturnValue({
+      isSuccess: true,
+      isFetched: true,
+      isError: false,
+      data: {
+        id: 1,
+        name: taxonomyName,
+        description: 'This is a description',
+      },
+    });
+
+    const { getByRole, getByText } = render(<RootWrapper />);
+
+    // Modal closed
+    expect(() => getByText(`Delete "${taxonomyName}"`)).toThrow();
+
+    // Click on delete menu
+    fireEvent.click(getByRole('button'));
+    fireEvent.click(getByText('Delete'));
+
+    // Modal opened
+    expect(getByText(`Delete "${taxonomyName}"`)).toBeInTheDocument();
+
+    // Click on cancel button
+    fireEvent.click(getByText('Cancel'));
+
+    // Modal closed
+    expect(() => getByText(`Delete "${taxonomyName}"`)).toThrow();
+  });
+
+  it('should delete a taxonomy', () => {
+    const taxonomyName = 'Test taxonomy';
+
+    useTaxonomyDetailData.mockReturnValue({
+      isSuccess: true,
+      isFetched: true,
+      isError: false,
+      data: {
+        id: 1,
+        name: taxonomyName,
+        description: 'This is a description',
+      },
+    });
+    mockMutate.mockImplementationOnce(async (params, callbacks) => {
+      callbacks.onSuccess();
+    });
+
+    const {
+      getByRole, getByText, getByLabelText, getByTestId,
+    } = render(<RootWrapper />);
+
+    // Modal closed
+    expect(() => getByText(`Delete "${taxonomyName}"`)).toThrow();
+
+    // Click on delete menu
+    fireEvent.click(getByRole('button'));
+    fireEvent.click(getByText('Delete'));
+
+    // Modal opened
+    expect(getByText(`Delete "${taxonomyName}"`)).toBeInTheDocument();
+
+    const input = getByLabelText('Type DELETE to confirm');
+    fireEvent.change(input, { target: { value: 'DELETE' } });
+
+    // Click on delete button
+    fireEvent.click(getByTestId('delete-button'));
+
+    // Modal closed
+    expect(() => getByText(`Delete "${taxonomyName}"`)).toThrow();
+    expect(mockMutate).toBeCalledTimes(1);
+
+    // Should redirect after a success delete
+    expect(mockSetToastMessage).toBeCalledTimes(1);
+    expect(mockNavigate).toBeCalledWith('/taxonomies');
+  });
 });
diff --git a/src/taxonomy/taxonomy-detail/messages.js b/src/taxonomy/taxonomy-detail/messages.js
index ec5291f6c0..6a50e95558 100644
--- a/src/taxonomy/taxonomy-detail/messages.js
+++ b/src/taxonomy/taxonomy-detail/messages.js
@@ -26,6 +26,10 @@ const messages = defineMessages({
     id: 'course-authoring.taxonomy-detail.action.export',
     defaultMessage: 'Export',
   },
+  deleteMenu: {
+    id: 'course-authoring.taxonomy-detail.action.delete',
+    defaultMessage: 'Delete',
+  },
 });
 
 export default messages;