Revert "feat: Taxonomy delete dialog (#684)"

This reverts commit 1eff489.

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<import("./types.mjs").TaxonomyTagsData>}
+ * @returns {Promise<Object>}
  */
 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<import("./types.mjs").ContentTaxonomyTagsData>}
+ * @returns {Promise<Object>}
  */
 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<import("./types.mjs").ContentData>}
+ * @returns {Promise<Object>}
  */
 export async function getContentData(contentId) {
   const { data } = await getAuthenticatedHttpClient().get(getContentDataApiUrl(contentId));

src/content-tags-drawer/data/apiHooks.jsx

@@ -12,6 +12,7 @@ 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({
@@ -23,6 +24,7 @@ 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({
@@ -34,6 +36,7 @@ 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({

src/content-tags-drawer/data/types.mjs

@@ -100,3 +100,8 @@
  * @property {TaxonomyTagData[]} results
  */
 
+/**
+ * @typedef {Object} UseQueryResult
+ * @property {Object} data
+ * @property {string} status
+ */

src/index.scss

@@ -18,7 +18,7 @@
 @import "course-updates/CourseUpdates";
 @import "export-page/CourseExportPage";
 @import "import-page/CourseImportPage";
-@import "taxonomy";
+@import "taxonomy/taxonomy-card/TaxonomyCard";
 @import "files-and-videos";
 @import "content-tags-drawer/TagBubble";
 @import "course-outline/CourseOutline";

src/taxonomy/TaxonomyLayout.jsx

@@ -1,35 +1,14 @@
-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 = () => {
-  // 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>
-  );
-};
+const TaxonomyLayout = () => (
+  <div className="bg-light-400">
+    <Header isHiddenMainMenu />
+    <Outlet />
+    <StudioFooter />
+  </div>
+);
 
 export default TaxonomyLayout;

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, act } from '@testing-library/react';
+import { render } 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,15 +17,6 @@ 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}>
@@ -54,12 +45,4 @@ 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();
-    });
-  });
 });

src/taxonomy/TaxonomyListPage.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
   CardView,
   Container,
@@ -7,34 +7,21 @@ 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, useDeleteTaxonomy } from './data/apiHooks';
-import { TaxonomyContext } from './common/context';
+import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './data/apiHooks';
 
 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 = () => (
@@ -83,14 +70,11 @@ const TaxonomyListPage = () => {
                 {
                   accessor: 'systemDefined',
                 },
-                {
-                  accessor: 'tagsCount',
-                },
               ]}
             >
               <CardView
                 className="bg-light-400 p-5"
-                CardComponent={(row) => TaxonomyCard({ ...row, onDeleteTaxonomy })}
+                CardComponent={TaxonomyCard}
               />
             </DataTable>
           )}

src/taxonomy/TaxonomyListPage.test.jsx

@@ -1,50 +1,28 @@
-import React, { useMemo } from 'react';
+import React 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, fireEvent } from '@testing-library/react';
+import { act, render } 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 = () => {
-  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>
-  );
-};
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <TaxonomyListPage intl={injectIntl} />
+    </IntlProvider>
+  </AppProvider>
+);
 
 describe('<TaxonomyListPage />', async () => {
   beforeEach(async () => {
@@ -76,28 +54,15 @@ describe('<TaxonomyListPage />', async () => {
   it('shows the data table after the query is complete', async () => {
     useIsTaxonomyListDataLoaded.mockReturnValue(true);
     useTaxonomyListDataResponse.mockReturnValue({
-      results: taxonomies,
+      results: [{
+        id: 1,
+        name: 'Taxonomy',
+        description: 'This is a description',
+      }],
     });
     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`);
-  });
 });

src/taxonomy/data/api.js

@@ -18,27 +18,17 @@ 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<import("./types.mjs").TaxonomyListData>}
+ * @returns {Promise<Object>}
  */
 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

src/taxonomy/data/api.test.js

@@ -9,8 +9,6 @@ import {
   getExportTaxonomyApiUrl,
   getTaxonomyListData,
   getTaxonomyExportFile,
-  getTaxonomyApiUrl,
-  deleteTaxonomy,
 } from './api';
 
 let axiosMock;
@@ -61,13 +59,6 @@ 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';