feat: add import taxonomy feature [FC-0036]

src/taxonomy/TaxonomyListPage.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
   Button,
   CardView,
@@ -13,14 +13,15 @@ import {
   Add,
 } from '@edx/paragon/icons';
 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 { getTaxonomyTemplateApiUrl } from './data/api';
+import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './data/apiHooks';
+import { importTaxonomy } from './import-tags';
 import messages from './messages';
 import TaxonomyCard from './taxonomy-card';
-import { getTaxonomyTemplateApiUrl } from './data/api';
-import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded, useDeleteTaxonomy } from './data/apiHooks';
-import { TaxonomyContext } from './common/context';
 
 const TaxonomyListHeaderButtons = () => {
   const intl = useIntl();
@@ -57,7 +58,11 @@ const TaxonomyListHeaderButtons = () => {
           </Dropdown.Menu>
         </Dropdown>
       </OverlayTrigger>
-      <Button iconBefore={Add} disabled>
+      <Button
+        iconBefore={Add}
+        onClick={() => importTaxonomy(intl)}
+        data-testid="taxonomy-import-button"
+      >
         {intl.formatMessage(messages.importButtonLabel)}
       </Button>
     </>
@@ -66,19 +71,6 @@ const TaxonomyListHeaderButtons = () => {
 
 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();
@@ -139,7 +131,7 @@ const TaxonomyListPage = () => {
             >
               <CardView
                 className="bg-light-400 p-5"
-                CardComponent={(row) => TaxonomyCard({ ...row, onDeleteTaxonomy })}
+                CardComponent={(row) => TaxonomyCard(row)}
               />
             </DataTable>
           )}

src/taxonomy/TaxonomyListPage.test.jsx

@@ -1,50 +1,53 @@
-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 { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, fireEvent, render } from '@testing-library/react';
 
 import initializeStore from '../store';
 import { getTaxonomyTemplateApiUrl } from './data/api';
 import TaxonomyListPage from './TaxonomyListPage';
 import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './data/apiHooks';
+import { importTaxonomy } from './import-tags';
 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', () => ({
+  ...jest.requireActual('./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,
-  }), []);
+jest.mock('./import-tags', () => ({
+  importTaxonomy: jest.fn(),
+}));
+
+const context = {
+  toastMessage: null,
+  setToastMessage: jest.fn(),
+};
+
+const queryClient = new QueryClient();
 
-  return (
-    <AppProvider store={store}>
-      <IntlProvider locale="en" messages={{}}>
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
         <TaxonomyContext.Provider value={context}>
           <TaxonomyListPage intl={injectIntl} />
         </TaxonomyContext.Provider>
-      </IntlProvider>
-    </AppProvider>
-  );
-};
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
 
 describe('<TaxonomyListPage />', async () => {
   beforeEach(async () => {
@@ -102,20 +105,21 @@ describe('<TaxonomyListPage />', async () => {
     expect(templateButton.href).toBe(getTaxonomyTemplateApiUrl(fileFormat.toLowerCase()));
   });
 
-  it('should show the success toast after delete', async () => {
+  it('calls the import taxonomy action when the import button is clicked', async () => {
     useIsTaxonomyListDataLoaded.mockReturnValue(true);
     useTaxonomyListDataResponse.mockReturnValue({
-      results: taxonomies,
+      results: [{
+        id: 1,
+        name: 'Taxonomy',
+        description: 'This is a description',
+      }],
     });
-    mockDeleteTaxonomy.mockImplementationOnce(async (params, callbacks) => {
-      callbacks.onSuccess();
+    await act(async () => {
+      const { getByTestId } = render(<RootWrapper />);
+      const importButton = getByTestId('taxonomy-import-button');
+      expect(importButton).toBeInTheDocument();
+      importButton.click();
+      expect(importTaxonomy).toHaveBeenCalled();
     });
-    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/common/context.js

@@ -1,7 +1,8 @@
+// @ts-check
 /* eslint-disable import/prefer-default-export */
 import React from 'react';
 
 export const TaxonomyContext = React.createContext({
-  toastMessage: null,
-  setToastMessage: null,
+  toastMessage: /** @type{null|string} */ (null),
+  setToastMessage: /** @type{null|function} */ (null),
 });

src/taxonomy/data/types.mjs

@@ -4,11 +4,13 @@
  * @typedef {Object} TaxonomyData
  * @property {number} id
  * @property {string} name
+ * @property {string} description
  * @property {boolean} enabled
  * @property {boolean} allowMultiple
  * @property {boolean} allowFreeText
  * @property {boolean} systemDefined
  * @property {boolean} visibleToAuthors
+ * @property {number} tagsCount
  * @property {string[]} orgs
  */
 

src/taxonomy/delete-dialog/index.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import {
   ActionRow,
   Button,
+  Container,
   Form,
   ModalDialog,
   Icon,
@@ -36,55 +37,57 @@ const DeleteDialog = ({
   }, [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>,
+    <Container onClick={(e) => e.stopPropagation() /* This prevents calling onClick handler from the parent */}>
+      <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 : '(?)',
             })}
-          </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>
+          </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>
+    </Container>
   );
 };