feat: Import new taxonomy dialog flow (openedx#1017)

This PR updates the existing import tags wizard to also handle importing new taxonomies.
open-craft · May 24, 2024 · d0b3328 · d0b3328
1 parent c3df0b0
commit d0b3328
Show file tree

Hide file tree

Showing 9 changed files with 352 additions and 175 deletions.
diff --git a/src/taxonomy/TaxonomyListPage.jsx b/src/taxonomy/TaxonomyListPage.jsx
@@ -1,5 +1,5 @@
 // @ts-check
-import React, { useCallback, useContext, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button,
@@ -12,6 +12,7 @@ import {
   Tooltip,
   SelectMenu,
   MenuItem,
+  useToggle,
 } from '@openedx/paragon';
 import {
   Add,
@@ -25,33 +26,24 @@ import { useOrganizationListData } from '../generic/data/apiHooks';
 import SubHeader from '../generic/sub-header/SubHeader';
 import getPageHeadTitle from '../generic/utils';
 import { ALL_TAXONOMIES, apiUrls, UNASSIGNED } from './data/api';
-import { useImportNewTaxonomy, useTaxonomyList } from './data/apiHooks';
-import { importTaxonomy } from './import-tags';
+import { useTaxonomyList } from './data/apiHooks';
+import { ImportTagsWizard } from './import-tags';
 import messages from './messages';
 import TaxonomyCard from './taxonomy-card';
-import { TaxonomyContext } from './common/context';
 
 const TaxonomyListHeaderButtons = ({ canAddTaxonomy }) => {
   const intl = useIntl();
-  const importMutation = useImportNewTaxonomy();
-  const { setToastMessage } = useContext(TaxonomyContext);
 
-  const showImportInProgressAlert = useCallback(() => {
-    /* istanbul ignore next */
-    if (setToastMessage) {
-      setToastMessage(intl.formatMessage(messages.importInProgressAlertDescription));
-    }
-  }, [setToastMessage]);
-
-  const closeImportInProgressAlert = useCallback(() => {
-    /* istanbul ignore next */
-    if (setToastMessage) {
-      setToastMessage(null);
-    }
-  }, [setToastMessage]);
+  const [isImportModalOpen, importModalOpen, importModalClose] = useToggle(false);
 
   return (
     <>
+      {isImportModalOpen && (
+        <ImportTagsWizard
+          isOpen={isImportModalOpen}
+          onClose={importModalClose}
+        />
+      )}
       <OverlayTrigger
         placement="top"
         overlay={(
@@ -86,12 +78,7 @@ const TaxonomyListHeaderButtons = ({ canAddTaxonomy }) => {
       </OverlayTrigger>
       <Button
         iconBefore={Add}
-        onClick={() => importTaxonomy(
-          intl,
-          importMutation,
-          showImportInProgressAlert,
-          closeImportInProgressAlert,
-        )}
+        onClick={importModalOpen}
         data-testid="taxonomy-import-button"
         disabled={!canAddTaxonomy}
       >

diff --git a/src/taxonomy/TaxonomyListPage.test.jsx b/src/taxonomy/TaxonomyListPage.test.jsx
@@ -15,7 +15,6 @@ import MockAdapter from 'axios-mock-adapter';
 import initializeStore from '../store';
 import { apiUrls } from './data/api';
 import TaxonomyListPage from './TaxonomyListPage';
-import { importTaxonomy } from './import-tags';
 import { TaxonomyContext } from './common/context';
 
 let store;
@@ -37,10 +36,6 @@ const listTaxonomiesOrg1Url = `${listTaxonomiesUrl}&org=Org+1`;
 const listTaxonomiesOrg2Url = `${listTaxonomiesUrl}&org=Org+2`;
 const organizations = ['Org 1', 'Org 2'];
 
-jest.mock('./import-tags', () => ({
-  importTaxonomy: jest.fn(),
-}));
-
 const context = {
   toastMessage: null,
   setToastMessage: jest.fn(),
@@ -125,15 +120,16 @@ describe('<TaxonomyListPage />', () => {
     expect(importButton).toBeDisabled();
   });
 
-  it('calls the import taxonomy action when the import button is clicked', async () => {
+  it('opens the import dialog modal when the import button is clicked', async () => {
     axiosMock.onGet(listTaxonomiesUrl).reply(200, { results: [], canAddTaxonomy: true });
 
-    const { getByRole } = render(<RootWrapper />);
+    const { getByRole, getByText } = render(<RootWrapper />);
     const importButton = getByRole('button', { name: 'Import' });
     // Once the API response is received and rendered, the Import button should be enabled:
     await waitFor(() => { expect(importButton).not.toBeDisabled(); });
     fireEvent.click(importButton);
-    expect(importTaxonomy).toHaveBeenCalled();
+
+    expect(getByText('Upload file')).toBeInTheDocument();
   });
 
   it('should show all "All taxonomies", "Unassigned" and org names in taxonomy org filter', async () => {

diff --git a/src/taxonomy/data/apiHooks.js b/src/taxonomy/data/apiHooks.js
@@ -187,7 +187,7 @@ export const useImportPlan = (taxonomyId, file) => useQuery({
   * @type {import("@tanstack/react-query").QueryFunction<string|null>}
   */
   queryFn: async () => {
-    if (file === null) {
+    if (!taxonomyId || file === null) {
       return null;
     }
     const formData = new FormData();