feat: add import taxonomy feature [FC-0036]

package.json

@@ -93,6 +93,7 @@
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest-canvas-mock": "^2.5.2",
+    "jest-each": "^29.7.0",
     "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
     "ts-loader": "^9.5.0"

src/taxonomy/TaxonomyListPage.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button,
@@ -18,14 +18,15 @@ import {
 } from '@edx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Helmet } from 'react-helmet';
+
+import { useOrganizationListData } from '../generic/data/apiHooks';
 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 { useOrganizationListData } from '../generic/data/apiHooks';
-import { TaxonomyContext } from './common/context';
 
 const ALL_TAXONOMIES = 'All taxonomies';
 const UNASSIGNED = 'Unassigned';
@@ -65,7 +66,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>
     </>
@@ -138,21 +143,8 @@ const OrganizationFilterSelector = ({
 
 const TaxonomyListPage = () => {
   const intl = useIntl();
-  const deleteTaxonomy = useDeleteTaxonomy();
-  const { setToastMessage } = useContext(TaxonomyContext);
   const [selectedOrgFilter, setSelectedOrgFilter] = useState(ALL_TAXONOMIES);
 
-  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 {
     data: organizationListData,
     isSuccess: isOrganizationListLoaded,
@@ -221,7 +213,7 @@ const TaxonomyListPage = () => {
             >
               <CardView
                 className="bg-light-400 p-5"
-                CardComponent={(row) => TaxonomyCard({ ...row, onDeleteTaxonomy })}
+                CardComponent={(row) => TaxonomyCard(row)}
               />
             </DataTable>
           )}