From 509968b0a28f4d95d49df03e5c7da4dd86c3130c Mon Sep 17 00:00:00 2001
From: javoconsultant <jmeliev_consultant@flex.unicon.net>
Date: Thu, 27 Aug 2026 02:20:47 +0500
Subject: [PATCH 1/6] feat(taxonomy): add taxonomy type selection to import
 tags wizard

---
 src/taxonomy/data/apiHooks.test.jsx           | 59 ++++++++++++-------
 src/taxonomy/data/apiHooks.ts                 |  5 +-
 src/taxonomy/import-tags/ImportTagsWizard.jsx | 46 +++++++++++++--
 .../import-tags/ImportTagsWizard.scss         |  6 ++
 .../import-tags/ImportTagsWizard.test.jsx     | 33 +++++++++++
 src/taxonomy/import-tags/constants.ts         | 28 +++++++++
 src/taxonomy/import-tags/messages.ts          | 12 ++++
 7 files changed, 163 insertions(+), 26 deletions(-)
 create mode 100644 src/taxonomy/import-tags/ImportTagsWizard.scss
 create mode 100644 src/taxonomy/import-tags/constants.ts

diff --git a/src/taxonomy/data/apiHooks.test.jsx b/src/taxonomy/data/apiHooks.test.jsx
index f80d2c9025..1078d2c618 100644
--- a/src/taxonomy/data/apiHooks.test.jsx
+++ b/src/taxonomy/data/apiHooks.test.jsx
@@ -17,6 +17,7 @@ import {
   useImportTags,
   useImportNewTaxonomy,
 } from './apiHooks';
+import { TaxonomyType } from '../import-tags/constants';
 
 let axiosMock;
 
@@ -30,14 +31,14 @@ const queryClient = new QueryClient({
 
 const wrapper = ({ children }) => (
   <QueryClientProvider client={queryClient}>
-    <IntlProvider locale="en">
-      {children}
-    </IntlProvider>
+    <IntlProvider locale="en">{children}</IntlProvider>
   </QueryClientProvider>
 );
 
 const emptyFile = new File([], 'empty.csv');
 
+const taxonomyTypes = Object.values(TaxonomyType);
+
 describe('import taxonomy api calls', () => {
   beforeEach(() => {
     initializeMockApp({
@@ -55,24 +56,40 @@ describe('import taxonomy api calls', () => {
     jest.clearAllMocks();
   });
 
-  it('should call import new taxonomy', async () => {
-    const mockResult = {
-      id: 8,
-      name: 'Taxonomy name',
-      exportId: 'taxonomy_export_id',
-      description: 'Taxonomy description',
-    };
-    axiosMock.onPost(apiUrls.createTaxonomyFromImport()).reply(201, mockResult);
-    const { result } = renderHook(() => useImportNewTaxonomy(), { wrapper });
-    const mutateResult = await result.current.mutateAsync({
-      name: 'Taxonomy name',
-      description: 'Taxonomy description',
-      file: emptyFile,
-    });
-
-    expect(axiosMock.history.post[0].url).toEqual(apiUrls.createTaxonomyFromImport());
-    expect(mutateResult).toEqual(mockResult);
-  });
+  it.each(taxonomyTypes)(
+    'should call import new taxonomy with the %s type',
+    async (taxonomyType) => {
+      const mockResult = {
+        id: 8,
+        name: 'Taxonomy name',
+        exportId: 'taxonomy_export_id',
+        description: 'Taxonomy description',
+      };
+      axiosMock
+        .onPost(apiUrls.createTaxonomyFromImport())
+        .reply(201, mockResult);
+      const { result } = renderHook(() => useImportNewTaxonomy(), {
+        wrapper,
+      });
+      const mutateResult = await result.current.mutateAsync({
+        name: 'Taxonomy name',
+        description: 'Taxonomy description',
+        taxonomyType,
+        file: emptyFile,
+      });
+
+      expect(axiosMock.history.post[0].url).toEqual(
+        apiUrls.createTaxonomyFromImport(),
+      );
+      const formData = axiosMock.history.post[0].data;
+      expect(formData.get('taxonomy_name')).toEqual('Taxonomy name');
+      expect(formData.get('taxonomy_description')).toEqual(
+        'Taxonomy description',
+      );
+      expect(formData.get('taxonomy_type')).toEqual(taxonomyType);
+      expect(mutateResult).toEqual(mockResult);
+    },
+  );
 
   it('should call import tags', async () => {
     const taxonomy = { id: 1, name: 'taxonomy name' };
diff --git a/src/taxonomy/data/apiHooks.ts b/src/taxonomy/data/apiHooks.ts
index fd40a10097..639b0cf7c7 100644
--- a/src/taxonomy/data/apiHooks.ts
+++ b/src/taxonomy/data/apiHooks.ts
@@ -16,6 +16,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { apiUrls, ALL_TAXONOMIES, getApiErrorMessage } from './api';
 import * as api from './api';
 import type { QueryOptions, TagListData } from './types';
+import { TaxonomyType } from '../import-tags/constants';
 
 // Query key patterns. Allows an easy way to clear all data related to a given taxonomy.
 // https://github.com/openedx/frontend-app-admin-portal/blob/2ba315d/docs/decisions/0006-tanstack-react-query.rst
@@ -116,11 +117,13 @@ export const useImportNewTaxonomy = () => {
     mutationFn: async ({
       name,
       description,
+      taxonomyType,
       file,
-    }: { name: string; description: string; file: File; }) => {
+    }: { name: string; description: string; taxonomyType: TaxonomyType; file: File; }) => {
       const formData = new FormData();
       formData.append('taxonomy_name', name);
       formData.append('taxonomy_description', description);
+      formData.append('taxonomy_type', taxonomyType);
       formData.append('file', file);
 
       const { data } = await getAuthenticatedHttpClient().post(apiUrls.createTaxonomyFromImport(), formData);
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.jsx b/src/taxonomy/import-tags/ImportTagsWizard.jsx
index 3fedf6c0c9..88cabc7878 100644
--- a/src/taxonomy/import-tags/ImportTagsWizard.jsx
+++ b/src/taxonomy/import-tags/ImportTagsWizard.jsx
@@ -12,6 +12,8 @@ import {
   Stack,
   Stepper,
   Form,
+  MenuItem,
+  SelectMenu,
 } from '@openedx/paragon';
 import {
   DeleteOutline,
@@ -21,13 +23,16 @@ import {
 } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 
-import LoadingButton from '../../generic/loading-button';
-import { LoadingSpinner } from '../../generic/Loading';
-import { getFileSizeToClosestByte } from '../../utils';
 import { TaxonomyContext } from '../common/context';
 import { getTaxonomyExportFile, apiUrls } from '../data/api';
 import { useImportTags, useImportPlan, useImportNewTaxonomy } from '../data/apiHooks';
 import messages from './messages';
+import { TaxonomyType, TAXONOMY_TYPE_OPTIONS } from './constants';
+import LoadingButton from '@src/generic/loading-button';
+import { LoadingSpinner } from '@src/generic/Loading';
+import { getFileSizeToClosestByte } from '@src/utils';
+
+import './ImportTagsWizard.scss';
 
 const linebreak = (
   <>
@@ -198,6 +203,10 @@ const PopulateStep = ({
     setTaxonomyPopulateData(updatedState);
   };
 
+  const handleTypeChange = (taxonomyType) => {
+    setTaxonomyPopulateData({ ...taxonomyPopulateData, taxonomyType });
+  };
+
   return (
     <Stepper.Step eventKey="populate" title={intl.formatMessage(messages.importWizardStepperPopulateStepTitle)}>
       <Stack gap={3} data-testid="populate-step">
@@ -214,6 +223,32 @@ const PopulateStep = ({
             onChange={handleDescChange}
           />
         </Form.Group>
+        <Form.Group>
+          <Form.Label id="taxonomy-type-label">
+            {intl.formatMessage(messages.importWizardStepPopulateTaxonomyType)}
+          </Form.Label>
+          <SelectMenu
+            role="group"
+            className="taxonomy-type-select"
+            variant="outline-primary"
+            aria-labelledby="taxonomy-type-label"
+            data-testid="taxonomy-type-select"
+          >
+            {TAXONOMY_TYPE_OPTIONS.map(({ value, message }) => {
+              const isSelected = value === taxonomyPopulateData.taxonomyType;
+              return (
+                <MenuItem
+                  key={value}
+                  defaultSelected={isSelected}
+                  data-autofocus={isSelected || undefined}
+                  onClick={() => handleTypeChange(value)}
+                >
+                  {intl.formatMessage(message)}
+                </MenuItem>
+              );
+            })}
+          </SelectMenu>
+        </Form.Group>
       </Stack>
     </Stepper.Step>
   );
@@ -223,6 +258,7 @@ PopulateStep.propTypes = {
   taxonomyPopulateData: PropTypes.shape({
     taxonomyName: PropTypes.string.isRequired,
     taxonomyDesc: PropTypes.string.isRequired,
+    taxonomyType: PropTypes.oneOf(TAXONOMY_TYPE_OPTIONS.map(({ value }) => value)).isRequired,
   }).isRequired,
   setTaxonomyPopulateData: PropTypes.func.isRequired,
 };
@@ -305,6 +341,7 @@ const ImportTagsWizard = ({
   const [taxonomyPopulateData, setTaxonomyPopulateData] = useState({
     taxonomyName: '',
     taxonomyDesc: '',
+    taxonomyType: TaxonomyType.Tags,
   });
 
   const importNewTaxonomyMutation = useImportNewTaxonomy();
@@ -312,11 +349,12 @@ const ImportTagsWizard = ({
   const importNewTaxonomy = async () => {
     disableDialog();
     try {
-      const { taxonomyName, taxonomyDesc } = taxonomyPopulateData;
+      const { taxonomyName, taxonomyDesc, taxonomyType } = taxonomyPopulateData;
       if (file) {
         await importNewTaxonomyMutation.mutateAsync({
           name: taxonomyName,
           description: taxonomyDesc,
+          taxonomyType,
           file,
         });
       }
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.scss b/src/taxonomy/import-tags/ImportTagsWizard.scss
new file mode 100644
index 0000000000..80632106a6
--- /dev/null
+++ b/src/taxonomy/import-tags/ImportTagsWizard.scss
@@ -0,0 +1,6 @@
+.taxonomy-type-select {
+    .btn {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.test.jsx b/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
index 613d953c03..fb623d66a2 100644
--- a/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
+++ b/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
@@ -10,6 +10,7 @@ import {
   render,
   waitFor,
   screen,
+  within,
 } from '@testing-library/react';
 import PropTypes from 'prop-types';
 
@@ -327,12 +328,43 @@ describe('<ImportTagsWizard />', () => {
       target: { value: 'New Taxonomy Description' },
     });
 
+    // The taxonomy type dropdown is a `SelectMenu`, whose options are rendered as links.
+    const taxonomyTypeSelectEl = screen.getByLabelText('Taxonomy Type');
+    expect(taxonomyTypeSelectEl).toBe(getByTestId('taxonomy-type-select'));
+    const taxonomyTypeOptions = () => within(taxonomyTypeSelectEl).getAllByRole('link');
+    const selectedTaxonomyTypes = () =>
+      taxonomyTypeOptions()
+        .filter((option) => option.getAttribute('aria-current') === 'page')
+        .map((option) => option.textContent);
+    const checkedTaxonomyTypes = () =>
+      taxonomyTypeOptions()
+        .filter((option) => option.querySelector('.btn-icon-after'))
+        .map((option) => option.textContent);
+
+    const taxonomyTypeToggleEl = within(taxonomyTypeSelectEl).getByRole('button');
+    expect(taxonomyTypeToggleEl).toHaveTextContent('Tags');
+    fireEvent.click(taxonomyTypeToggleEl);
+    expect(taxonomyTypeOptions().map((option) => option.textContent)).toEqual(['Tags', 'Competency']);
+    expect(selectedTaxonomyTypes()).toEqual(['Tags']);
+    expect(checkedTaxonomyTypes()).toEqual(['Tags']);
+
+    fireEvent.click(within(taxonomyTypeSelectEl).getByRole('link', { name: 'Competency' }));
+    expect(taxonomyTypeToggleEl).toHaveTextContent('Competency');
+    fireEvent.click(taxonomyTypeToggleEl);
+    expect(selectedTaxonomyTypes()).toEqual(['Competency']);
+    expect(checkedTaxonomyTypes()).toEqual(['Competency']);
+    await waitFor(() => {
+      expect(within(taxonomyTypeSelectEl).getByRole('link', { name: 'Competency' })).toHaveFocus();
+    });
+    fireEvent.keyDown(taxonomyTypeSelectEl, { key: 'Escape' });
+
     // Test back button
     fireEvent.click(getByTestId('back-button'));
     expect(getByTestId('upload-step')).toBeInTheDocument();
     fireEvent.click(getByRole('button', { name: 'Continue' }));
 
     expect(getByTestId('populate-step')).toBeInTheDocument();
+    expect(within(getByTestId('taxonomy-type-select')).getByRole('button')).toHaveTextContent('Competency');
 
     if (expectedResult === 'success') {
       axiosMock.onPost(doImportNewTaxonomyUrl).replyOnce(200, {});
@@ -353,6 +385,7 @@ describe('<ImportTagsWizard />', () => {
       await waitFor(() => {
         expect(mockSetToastMessage).toHaveBeenCalledWith(`"${newTaxonomyName}" imported`);
       });
+      expect(axiosMock.history.post[0].data.get('taxonomy_type')).toEqual('competency');
     } else {
       // Alert message shown
       await waitFor(() => {
diff --git a/src/taxonomy/import-tags/constants.ts b/src/taxonomy/import-tags/constants.ts
new file mode 100644
index 0000000000..837004c40a
--- /dev/null
+++ b/src/taxonomy/import-tags/constants.ts
@@ -0,0 +1,28 @@
+import messages from './messages';
+
+/**
+ * The type of a taxonomy.
+ *
+ * Note: the backend also has a "system" type, reserved for platform-defined
+ * taxonomies. It is intentionally not selectable by users.
+ */
+export enum TaxonomyType {
+  Tags = 'tags',
+  Competency = 'competency',
+}
+
+/**
+ * The taxonomy types a user can pick when importing a taxonomy.
+ * The backend also supports a "system" type, but it is reserved for
+ * platform-defined taxonomies and must not be offered here.
+ */
+export const TAXONOMY_TYPE_OPTIONS = [
+  {
+    value: TaxonomyType.Tags,
+    message: messages.importWizardStepPopulateTaxonomyTypeTags,
+  },
+  {
+    value: TaxonomyType.Competency,
+    message: messages.importWizardStepPopulateTaxonomyTypeCompetency,
+  },
+];
diff --git a/src/taxonomy/import-tags/messages.ts b/src/taxonomy/import-tags/messages.ts
index f6f0b86726..1526e32a02 100644
--- a/src/taxonomy/import-tags/messages.ts
+++ b/src/taxonomy/import-tags/messages.ts
@@ -86,6 +86,18 @@ const messages = defineMessages({
     id: 'course-authoring.import-tags.wizard.step-populate.desc',
     defaultMessage: 'Taxonomy Description',
   },
+  importWizardStepPopulateTaxonomyType: {
+    id: 'course-authoring.import-tags.wizard.step-populate.type',
+    defaultMessage: 'Taxonomy Type',
+  },
+  importWizardStepPopulateTaxonomyTypeTags: {
+    id: 'course-authoring.import-tags.wizard.step-populate.type.tags',
+    defaultMessage: 'Tags',
+  },
+  importWizardStepPopulateTaxonomyTypeCompetency: {
+    id: 'course-authoring.import-tags.wizard.step-populate.type.competency',
+    defaultMessage: 'Competency',
+  },
   importWizardStepPlanTitle: {
     id: 'course-authoring.import-tags.wizard.step-plan.title',
     defaultMessage: 'Differences between files',

From d1fd0f91bfb135f9a27ffb81d31f8bd4aa35bea2 Mon Sep 17 00:00:00 2001
From: javoconsultant <jmeliev_consultant@flex.unicon.net>
Date: Fri, 28 Aug 2026 16:57:15 +0500
Subject: [PATCH 2/6] test: simplify taxonomy type selection assertions in
 ImportTagsWizard tests

---
 src/taxonomy/import-tags/ImportTagsWizard.test.jsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/taxonomy/import-tags/ImportTagsWizard.test.jsx b/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
index fb623d66a2..2debd8e0a2 100644
--- a/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
+++ b/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
@@ -336,23 +336,17 @@ describe('<ImportTagsWizard />', () => {
       taxonomyTypeOptions()
         .filter((option) => option.getAttribute('aria-current') === 'page')
         .map((option) => option.textContent);
-    const checkedTaxonomyTypes = () =>
-      taxonomyTypeOptions()
-        .filter((option) => option.querySelector('.btn-icon-after'))
-        .map((option) => option.textContent);
 
     const taxonomyTypeToggleEl = within(taxonomyTypeSelectEl).getByRole('button');
     expect(taxonomyTypeToggleEl).toHaveTextContent('Tags');
     fireEvent.click(taxonomyTypeToggleEl);
     expect(taxonomyTypeOptions().map((option) => option.textContent)).toEqual(['Tags', 'Competency']);
     expect(selectedTaxonomyTypes()).toEqual(['Tags']);
-    expect(checkedTaxonomyTypes()).toEqual(['Tags']);
 
     fireEvent.click(within(taxonomyTypeSelectEl).getByRole('link', { name: 'Competency' }));
     expect(taxonomyTypeToggleEl).toHaveTextContent('Competency');
     fireEvent.click(taxonomyTypeToggleEl);
     expect(selectedTaxonomyTypes()).toEqual(['Competency']);
-    expect(checkedTaxonomyTypes()).toEqual(['Competency']);
     await waitFor(() => {
       expect(within(taxonomyTypeSelectEl).getByRole('link', { name: 'Competency' })).toHaveFocus();
     });

From a1a869259072746a82044ae212154488ad64d443 Mon Sep 17 00:00:00 2001
From: javoconsultant <jmeliev_consultant@flex.unicon.net>
Date: Fri, 28 Aug 2026 20:11:49 +0500
Subject: [PATCH 3/6] refactor(taxonomy): reorganize taxonomy type imports and
 constants

---
 src/taxonomy/data/apiHooks.test.jsx           | 17 +++--------------
 src/taxonomy/data/apiHooks.ts                 |  2 +-
 src/taxonomy/data/constants.ts                | 11 +++++++++++
 src/taxonomy/import-tags/ImportTagsWizard.jsx |  5 +++--
 src/taxonomy/import-tags/constants.ts         | 12 +-----------
 5 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/taxonomy/data/apiHooks.test.jsx b/src/taxonomy/data/apiHooks.test.jsx
index 1078d2c618..d655902ee4 100644
--- a/src/taxonomy/data/apiHooks.test.jsx
+++ b/src/taxonomy/data/apiHooks.test.jsx
@@ -1,14 +1,11 @@
 // @ts-check
 import React from 'react'; // Required to use JSX syntax without type errors
 
-import { initializeMockApp } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { renderHook, waitFor } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import MockAdapter from 'axios-mock-adapter';
-
+import { initializeMocks } from '@src/testUtils';
 import { apiUrls } from './api';
 
 import {
@@ -17,7 +14,7 @@ import {
   useImportTags,
   useImportNewTaxonomy,
 } from './apiHooks';
-import { TaxonomyType } from '../import-tags/constants';
+import { TaxonomyType } from './constants';
 
 let axiosMock;
 
@@ -41,15 +38,7 @@ const taxonomyTypes = Object.values(TaxonomyType);
 
 describe('import taxonomy api calls', () => {
   beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    ({ axiosMock } = initializeMocks());
   });
 
   afterEach(() => {
diff --git a/src/taxonomy/data/apiHooks.ts b/src/taxonomy/data/apiHooks.ts
index 639b0cf7c7..a008039655 100644
--- a/src/taxonomy/data/apiHooks.ts
+++ b/src/taxonomy/data/apiHooks.ts
@@ -16,7 +16,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { apiUrls, ALL_TAXONOMIES, getApiErrorMessage } from './api';
 import * as api from './api';
 import type { QueryOptions, TagListData } from './types';
-import { TaxonomyType } from '../import-tags/constants';
+import { TaxonomyType } from './constants';
 
 // Query key patterns. Allows an easy way to clear all data related to a given taxonomy.
 // https://github.com/openedx/frontend-app-admin-portal/blob/2ba315d/docs/decisions/0006-tanstack-react-query.rst
diff --git a/src/taxonomy/data/constants.ts b/src/taxonomy/data/constants.ts
index dc205768a2..2cca630d22 100644
--- a/src/taxonomy/data/constants.ts
+++ b/src/taxonomy/data/constants.ts
@@ -6,3 +6,14 @@
  * will be incomplete because the backend only supports a taxonomy size of 10,000 items or fewer.
  */
 export const MAX_TAXONOMY_ITEMS = 10000;
+
+/**
+ * The type of a taxonomy.
+ *
+ * Note: the backend also has a "system" type, reserved for platform-defined
+ * taxonomies. It is intentionally not selectable by users.
+ */
+export enum TaxonomyType {
+  Tags = 'tags',
+  Competency = 'competency',
+}
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.jsx b/src/taxonomy/import-tags/ImportTagsWizard.jsx
index 88cabc7878..b21b9efb4c 100644
--- a/src/taxonomy/import-tags/ImportTagsWizard.jsx
+++ b/src/taxonomy/import-tags/ImportTagsWizard.jsx
@@ -27,7 +27,8 @@ import { TaxonomyContext } from '../common/context';
 import { getTaxonomyExportFile, apiUrls } from '../data/api';
 import { useImportTags, useImportPlan, useImportNewTaxonomy } from '../data/apiHooks';
 import messages from './messages';
-import { TaxonomyType, TAXONOMY_TYPE_OPTIONS } from './constants';
+import { TAXONOMY_TYPE_OPTIONS } from './constants';
+import { TaxonomyType } from '@src/taxonomy/data/constants';
 import LoadingButton from '@src/generic/loading-button';
 import { LoadingSpinner } from '@src/generic/Loading';
 import { getFileSizeToClosestByte } from '@src/utils';
@@ -258,7 +259,7 @@ PopulateStep.propTypes = {
   taxonomyPopulateData: PropTypes.shape({
     taxonomyName: PropTypes.string.isRequired,
     taxonomyDesc: PropTypes.string.isRequired,
-    taxonomyType: PropTypes.oneOf(TAXONOMY_TYPE_OPTIONS.map(({ value }) => value)).isRequired,
+    taxonomyType: PropTypes.string.isRequired,
   }).isRequired,
   setTaxonomyPopulateData: PropTypes.func.isRequired,
 };
diff --git a/src/taxonomy/import-tags/constants.ts b/src/taxonomy/import-tags/constants.ts
index 837004c40a..32e7159352 100644
--- a/src/taxonomy/import-tags/constants.ts
+++ b/src/taxonomy/import-tags/constants.ts
@@ -1,16 +1,6 @@
+import { TaxonomyType } from '@src/taxonomy/data/constants';
 import messages from './messages';
 
-/**
- * The type of a taxonomy.
- *
- * Note: the backend also has a "system" type, reserved for platform-defined
- * taxonomies. It is intentionally not selectable by users.
- */
-export enum TaxonomyType {
-  Tags = 'tags',
-  Competency = 'competency',
-}
-
 /**
  * The taxonomy types a user can pick when importing a taxonomy.
  * The backend also supports a "system" type, but it is reserved for

From ba2f6976e616dd50664aeab0d1045afd793e8189 Mon Sep 17 00:00:00 2001
From: javoconsultant <jmeliev_consultant@flex.unicon.net>
Date: Fri, 28 Aug 2026 20:39:59 +0500
Subject: [PATCH 4/6] refactor(import-tags): replace SelectMenu with native
 select for taxonomy type and remove unused styles

---
 src/taxonomy/import-tags/ImportTagsWizard.jsx | 39 +++++++------------
 .../import-tags/ImportTagsWizard.scss         |  6 ---
 .../import-tags/ImportTagsWizard.test.jsx     | 27 ++++---------
 3 files changed, 20 insertions(+), 52 deletions(-)
 delete mode 100644 src/taxonomy/import-tags/ImportTagsWizard.scss

diff --git a/src/taxonomy/import-tags/ImportTagsWizard.jsx b/src/taxonomy/import-tags/ImportTagsWizard.jsx
index b21b9efb4c..f11b18583e 100644
--- a/src/taxonomy/import-tags/ImportTagsWizard.jsx
+++ b/src/taxonomy/import-tags/ImportTagsWizard.jsx
@@ -12,8 +12,6 @@ import {
   Stack,
   Stepper,
   Form,
-  MenuItem,
-  SelectMenu,
 } from '@openedx/paragon';
 import {
   DeleteOutline,
@@ -33,8 +31,6 @@ import LoadingButton from '@src/generic/loading-button';
 import { LoadingSpinner } from '@src/generic/Loading';
 import { getFileSizeToClosestByte } from '@src/utils';
 
-import './ImportTagsWizard.scss';
-
 const linebreak = (
   <>
     <br /> <br />
@@ -204,8 +200,8 @@ const PopulateStep = ({
     setTaxonomyPopulateData(updatedState);
   };
 
-  const handleTypeChange = (taxonomyType) => {
-    setTaxonomyPopulateData({ ...taxonomyPopulateData, taxonomyType });
+  const handleTypeChange = (e) => {
+    setTaxonomyPopulateData({ ...taxonomyPopulateData, taxonomyType: e.target.value });
   };
 
   return (
@@ -225,30 +221,21 @@ const PopulateStep = ({
           />
         </Form.Group>
         <Form.Group>
-          <Form.Label id="taxonomy-type-label">
+          <Form.Label>
             {intl.formatMessage(messages.importWizardStepPopulateTaxonomyType)}
           </Form.Label>
-          <SelectMenu
-            role="group"
-            className="taxonomy-type-select"
-            variant="outline-primary"
-            aria-labelledby="taxonomy-type-label"
+          <Form.Control
+            as="select"
             data-testid="taxonomy-type-select"
+            value={taxonomyPopulateData.taxonomyType}
+            onChange={handleTypeChange}
           >
-            {TAXONOMY_TYPE_OPTIONS.map(({ value, message }) => {
-              const isSelected = value === taxonomyPopulateData.taxonomyType;
-              return (
-                <MenuItem
-                  key={value}
-                  defaultSelected={isSelected}
-                  data-autofocus={isSelected || undefined}
-                  onClick={() => handleTypeChange(value)}
-                >
-                  {intl.formatMessage(message)}
-                </MenuItem>
-              );
-            })}
-          </SelectMenu>
+            {TAXONOMY_TYPE_OPTIONS.map(({ value, message }) => (
+              <option key={value} value={value}>
+                {intl.formatMessage(message)}
+              </option>
+            ))}
+          </Form.Control>
         </Form.Group>
       </Stack>
     </Stepper.Step>
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.scss b/src/taxonomy/import-tags/ImportTagsWizard.scss
deleted file mode 100644
index 80632106a6..0000000000
--- a/src/taxonomy/import-tags/ImportTagsWizard.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.taxonomy-type-select {
-    .btn {
-        width: 100%;
-        justify-content: space-between;
-    }
-}
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.test.jsx b/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
index 2debd8e0a2..8f90f1b5bb 100644
--- a/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
+++ b/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
@@ -328,29 +328,16 @@ describe('<ImportTagsWizard />', () => {
       target: { value: 'New Taxonomy Description' },
     });
 
-    // The taxonomy type dropdown is a `SelectMenu`, whose options are rendered as links.
+    // The taxonomy type dropdown is a native `<select>`, whose options are rendered as `<option>`s.
     const taxonomyTypeSelectEl = screen.getByLabelText('Taxonomy Type');
     expect(taxonomyTypeSelectEl).toBe(getByTestId('taxonomy-type-select'));
-    const taxonomyTypeOptions = () => within(taxonomyTypeSelectEl).getAllByRole('link');
-    const selectedTaxonomyTypes = () =>
-      taxonomyTypeOptions()
-        .filter((option) => option.getAttribute('aria-current') === 'page')
-        .map((option) => option.textContent);
-
-    const taxonomyTypeToggleEl = within(taxonomyTypeSelectEl).getByRole('button');
-    expect(taxonomyTypeToggleEl).toHaveTextContent('Tags');
-    fireEvent.click(taxonomyTypeToggleEl);
+    const taxonomyTypeOptions = () => within(taxonomyTypeSelectEl).getAllByRole('option');
+
+    expect(taxonomyTypeSelectEl).toHaveValue('tags');
     expect(taxonomyTypeOptions().map((option) => option.textContent)).toEqual(['Tags', 'Competency']);
-    expect(selectedTaxonomyTypes()).toEqual(['Tags']);
 
-    fireEvent.click(within(taxonomyTypeSelectEl).getByRole('link', { name: 'Competency' }));
-    expect(taxonomyTypeToggleEl).toHaveTextContent('Competency');
-    fireEvent.click(taxonomyTypeToggleEl);
-    expect(selectedTaxonomyTypes()).toEqual(['Competency']);
-    await waitFor(() => {
-      expect(within(taxonomyTypeSelectEl).getByRole('link', { name: 'Competency' })).toHaveFocus();
-    });
-    fireEvent.keyDown(taxonomyTypeSelectEl, { key: 'Escape' });
+    fireEvent.change(taxonomyTypeSelectEl, { target: { value: 'competency' } });
+    expect(taxonomyTypeSelectEl).toHaveValue('competency');
 
     // Test back button
     fireEvent.click(getByTestId('back-button'));
@@ -358,7 +345,7 @@ describe('<ImportTagsWizard />', () => {
     fireEvent.click(getByRole('button', { name: 'Continue' }));
 
     expect(getByTestId('populate-step')).toBeInTheDocument();
-    expect(within(getByTestId('taxonomy-type-select')).getByRole('button')).toHaveTextContent('Competency');
+    expect(getByTestId('taxonomy-type-select')).toHaveValue('competency');
 
     if (expectedResult === 'success') {
       axiosMock.onPost(doImportNewTaxonomyUrl).replyOnce(200, {});

From 79190a2a88a89c7ac28a5b8f27fe6f6a59210068 Mon Sep 17 00:00:00 2001
From: javoconsultant <jmeliev_consultant@flex.unicon.net>
Date: Mon, 31 Aug 2026 19:12:50 +0500
Subject: [PATCH 5/6] refactor(taxonomy): convert to tsx

---
 src/taxonomy/data/apiHooks.ts                 |  12 +-
 src/taxonomy/data/constants.ts                |   6 -
 src/taxonomy/import-tags/ImportTagsWizard.jsx | 590 ------------------
 ...ard.test.jsx => ImportTagsWizard.test.tsx} |  44 +-
 src/taxonomy/import-tags/ImportTagsWizard.tsx | 308 +++++++++
 src/taxonomy/import-tags/messages.ts          |  52 +-
 .../import-tags/steps/ConfirmStep.tsx         |  35 ++
 src/taxonomy/import-tags/steps/ExportStep.tsx |  55 ++
 src/taxonomy/import-tags/steps/PlanStep.tsx   |  42 ++
 .../import-tags/steps/PopulateStep.tsx        |  72 +++
 src/taxonomy/import-tags/steps/UploadStep.tsx | 124 ++++
 .../import-tags/{ => steps}/constants.ts      |   4 +-
 src/taxonomy/import-tags/types.ts             |  17 +
 13 files changed, 716 insertions(+), 645 deletions(-)
 delete mode 100644 src/taxonomy/import-tags/ImportTagsWizard.jsx
 rename src/taxonomy/import-tags/{ImportTagsWizard.test.jsx => ImportTagsWizard.test.tsx} (93%)
 create mode 100644 src/taxonomy/import-tags/ImportTagsWizard.tsx
 create mode 100644 src/taxonomy/import-tags/steps/ConfirmStep.tsx
 create mode 100644 src/taxonomy/import-tags/steps/ExportStep.tsx
 create mode 100644 src/taxonomy/import-tags/steps/PlanStep.tsx
 create mode 100644 src/taxonomy/import-tags/steps/PopulateStep.tsx
 create mode 100644 src/taxonomy/import-tags/steps/UploadStep.tsx
 rename src/taxonomy/import-tags/{ => steps}/constants.ts (70%)
 create mode 100644 src/taxonomy/import-tags/types.ts

diff --git a/src/taxonomy/data/apiHooks.ts b/src/taxonomy/data/apiHooks.ts
index a008039655..4483ca9ab5 100644
--- a/src/taxonomy/data/apiHooks.ts
+++ b/src/taxonomy/data/apiHooks.ts
@@ -70,7 +70,12 @@ export const taxonomyQueryKeys = {
    * @param taxonomyId ID of the taxonomy
    * @param fileId Some string to uniquely identify the file we want to upload
    */
-  importPlan: (taxonomyId: number, fileId: string) => [...taxonomyQueryKeys.all, 'importPlan', taxonomyId, fileId],
+  importPlan: (taxonomyId: number | undefined, fileId: string) => [
+    ...taxonomyQueryKeys.all,
+    'importPlan',
+    taxonomyId ?? '',
+    fileId,
+  ],
 } satisfies Record<string, (string | number)[] | ((...args: any[]) => (string | number)[])>;
 
 /**
@@ -168,10 +173,11 @@ export const useImportTags = () => {
 
 /**
  * Preview the results of importing the given file into an existing taxonomy.
- * @param taxonomyId The ID of the taxonomy whose tags we're updating.
+ * @param taxonomyId The ID of the taxonomy whose tags we're updating, or undefined if a new taxonomy is
+ *   being created (in which case there is no plan to preview).
  * @param file The file that we want to import
  */
-export const useImportPlan = (taxonomyId: number, file: File | null) =>
+export const useImportPlan = (taxonomyId: number | undefined, file: File | null) =>
   useQuery({
     queryKey: taxonomyQueryKeys.importPlan(taxonomyId, file ? `${file.name}${file.lastModified}${file.size}` : ''),
     queryFn: async (): Promise<string | null> => {
diff --git a/src/taxonomy/data/constants.ts b/src/taxonomy/data/constants.ts
index 2cca630d22..a699f4f208 100644
--- a/src/taxonomy/data/constants.ts
+++ b/src/taxonomy/data/constants.ts
@@ -7,12 +7,6 @@
  */
 export const MAX_TAXONOMY_ITEMS = 10000;
 
-/**
- * The type of a taxonomy.
- *
- * Note: the backend also has a "system" type, reserved for platform-defined
- * taxonomies. It is intentionally not selectable by users.
- */
 export enum TaxonomyType {
   Tags = 'tags',
   Competency = 'competency',
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.jsx b/src/taxonomy/import-tags/ImportTagsWizard.jsx
deleted file mode 100644
index f11b18583e..0000000000
--- a/src/taxonomy/import-tags/ImportTagsWizard.jsx
+++ /dev/null
@@ -1,590 +0,0 @@
-// @ts-check
-import React, { useState, useContext, useMemo } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  useToggle,
-  Button,
-  Container,
-  Dropzone,
-  Icon,
-  IconButton,
-  ModalDialog,
-  Stack,
-  Stepper,
-  Form,
-} from '@openedx/paragon';
-import {
-  DeleteOutline,
-  Download,
-  InsertDriveFile,
-  Warning,
-} from '@openedx/paragon/icons';
-import PropTypes from 'prop-types';
-
-import { TaxonomyContext } from '../common/context';
-import { getTaxonomyExportFile, apiUrls } from '../data/api';
-import { useImportTags, useImportPlan, useImportNewTaxonomy } from '../data/apiHooks';
-import messages from './messages';
-import { TAXONOMY_TYPE_OPTIONS } from './constants';
-import { TaxonomyType } from '@src/taxonomy/data/constants';
-import LoadingButton from '@src/generic/loading-button';
-import { LoadingSpinner } from '@src/generic/Loading';
-import { getFileSizeToClosestByte } from '@src/utils';
-
-const linebreak = (
-  <>
-    <br /> <br />
-  </>
-);
-
-const TaxonomyProp = PropTypes.shape({
-  id: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired,
-});
-
-const ExportStep = ({ taxonomy }) => {
-  const intl = useIntl();
-
-  return (
-    <Stepper.Step eventKey="export" title={intl.formatMessage(messages.importWizardStepperExportStepTitle)}>
-      <Stack gap={3} data-testid="export-step">
-        <p>{intl.formatMessage(messages.importWizardStepExportBody, { br: linebreak })}</p>
-        <Stack gap={3} direction="horizontal">
-          <Button
-            iconBefore={Download}
-            variant="outline-primary"
-            onClick={() => getTaxonomyExportFile(taxonomy.id, 'csv')}
-            data-testid="export-csv-button"
-          >
-            {intl.formatMessage(messages.importWizardStepExportCSVButton)}
-          </Button>
-          <Button
-            iconBefore={Download}
-            variant="outline-primary"
-            onClick={() => getTaxonomyExportFile(taxonomy.id, 'json')}
-            data-testid="export-json-button"
-          >
-            {intl.formatMessage(messages.importWizardStepExportJSONButton)}
-          </Button>
-        </Stack>
-      </Stack>
-    </Stepper.Step>
-  );
-};
-
-ExportStep.propTypes = {
-  taxonomy: TaxonomyProp.isRequired,
-};
-
-const UploadStep = ({
-  file,
-  setFile,
-  importPlanError,
-  reimport,
-}) => {
-  const intl = useIntl();
-
-  const csvTemplateUrl = (
-    <a href={apiUrls.taxonomyTemplate('csv')} download>{intl.formatMessage(messages.csvTemplateTitle)}</a>
-  );
-
-  const jsonTemplateUrl = (
-    <a href={apiUrls.taxonomyTemplate('json')} download>{intl.formatMessage(messages.jsonTemplateTitle)}</a>
-  );
-
-  /** @type {(args: {fileData: FormData}) => void} */
-  const handleFileLoad = ({ fileData }) => {
-    setFile(fileData.get('file'));
-  };
-
-  const clearFile = (e) => {
-    e.stopPropagation();
-    setFile(null);
-  };
-
-  return (
-    <Stepper.Step
-      eventKey="upload"
-      title={intl.formatMessage(messages.importWizardStepperUploadStepTitle)}
-      hasError={!!importPlanError}
-    >
-      <Stack gap={3} data-testid="upload-step">
-        <p>
-          {reimport
-            ? intl.formatMessage(messages.importWizardStepReuploadBody, { br: linebreak })
-            : intl.formatMessage(
-              messages.importWizardStepUploadBody,
-              { csvTemplateUrl, jsonTemplateUrl, br: linebreak },
-            )}
-        </p>
-        <div>
-          {!file ?
-            (
-              <Dropzone
-                maxSize={100 * 1024 * 1024 /* 100MB */}
-                accept={{
-                  'text/csv': ['.csv'],
-                  'application/json': ['.json'],
-                }}
-                onProcessUpload={handleFileLoad}
-                data-testid="dropzone"
-                /*
-                  className is working on Dropzone: https://github.com/openedx/paragon/pull/2950
-                  className="h-200px"
-              */
-                style={{ height: '200px' }}
-              />
-            ) :
-            (
-              <Stack
-                gap={3}
-                direction="horizontal"
-                className="h-200px border-top p-4 align-items-start flex-wrap"
-                data-testid="file-info"
-              >
-                <Icon src={InsertDriveFile} style={{ height: '48px', width: '48px' }} />
-                <Stack gap={0} className="align-self-start">
-                  <div>{file.name}</div>
-                  <div className="x-small text-gray-500">{getFileSizeToClosestByte(file.size)}</div>
-                </Stack>
-                <IconButton
-                  src={DeleteOutline}
-                  iconAs={Icon}
-                  alt={intl.formatMessage(messages.importWizardStepUploadClearFile)}
-                  variant="secondary"
-                  className="ml-auto"
-                  onClick={clearFile}
-                  data-testid="clear-file-button"
-                />
-              </Stack>
-            )}
-        </div>
-
-        {importPlanError && <Container className="alert alert-danger">{importPlanError}</Container>}
-      </Stack>
-    </Stepper.Step>
-  );
-};
-
-UploadStep.propTypes = {
-  file: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    size: PropTypes.number.isRequired,
-  }),
-  setFile: PropTypes.func.isRequired,
-  importPlanError: PropTypes.string,
-  reimport: PropTypes.bool,
-};
-
-UploadStep.defaultProps = {
-  file: null,
-  importPlanError: null,
-  reimport: false,
-};
-
-const PopulateStep = ({
-  taxonomyPopulateData,
-  setTaxonomyPopulateData,
-}) => {
-  const intl = useIntl();
-
-  const handleNameChange = (e) => {
-    const updatedState = { ...taxonomyPopulateData };
-    updatedState.taxonomyName = e.target.value;
-    setTaxonomyPopulateData(updatedState);
-  };
-
-  const handleDescChange = (e) => {
-    const updatedState = { ...taxonomyPopulateData };
-    updatedState.taxonomyDesc = e.target.value;
-    setTaxonomyPopulateData(updatedState);
-  };
-
-  const handleTypeChange = (e) => {
-    setTaxonomyPopulateData({ ...taxonomyPopulateData, taxonomyType: e.target.value });
-  };
-
-  return (
-    <Stepper.Step eventKey="populate" title={intl.formatMessage(messages.importWizardStepperPopulateStepTitle)}>
-      <Stack gap={3} data-testid="populate-step">
-        <Form.Group>
-          <Form.Label>{intl.formatMessage(messages.importWizardStepPopulateTaxonomyName)}</Form.Label>
-          <Form.Control value={taxonomyPopulateData.taxonomyName} onChange={handleNameChange} />
-        </Form.Group>
-        <Form.Group>
-          <Form.Label>{intl.formatMessage(messages.importWizardStepPopulateTaxonomyDesc)}</Form.Label>
-          <Form.Control
-            as="textarea"
-            autoResize
-            value={taxonomyPopulateData.taxonomyDesc}
-            onChange={handleDescChange}
-          />
-        </Form.Group>
-        <Form.Group>
-          <Form.Label>
-            {intl.formatMessage(messages.importWizardStepPopulateTaxonomyType)}
-          </Form.Label>
-          <Form.Control
-            as="select"
-            data-testid="taxonomy-type-select"
-            value={taxonomyPopulateData.taxonomyType}
-            onChange={handleTypeChange}
-          >
-            {TAXONOMY_TYPE_OPTIONS.map(({ value, message }) => (
-              <option key={value} value={value}>
-                {intl.formatMessage(message)}
-              </option>
-            ))}
-          </Form.Control>
-        </Form.Group>
-      </Stack>
-    </Stepper.Step>
-  );
-};
-
-PopulateStep.propTypes = {
-  taxonomyPopulateData: PropTypes.shape({
-    taxonomyName: PropTypes.string.isRequired,
-    taxonomyDesc: PropTypes.string.isRequired,
-    taxonomyType: PropTypes.string.isRequired,
-  }).isRequired,
-  setTaxonomyPopulateData: PropTypes.func.isRequired,
-};
-
-const PlanStep = ({ importPlan }) => {
-  const intl = useIntl();
-
-  return (
-    <Stepper.Step eventKey="plan" title={intl.formatMessage(messages.importWizardStepperPlanStepTitle)}>
-      <Stack gap={3} data-testid="plan-step">
-        {intl.formatMessage(messages.importWizardStepPlanBody, { br: linebreak, changeCount: importPlan?.length })}
-        <ul className="h-200px" style={{ overflow: 'scroll' }}>
-          {importPlan?.length ?
-            (
-              importPlan.map((line) => <li key={line} data-testid="plan-action">{line}</li>)
-            ) :
-            <li>{intl.formatMessage(messages.importWizardStepPlanNoChanges)}</li>}
-        </ul>
-      </Stack>
-    </Stepper.Step>
-  );
-};
-
-PlanStep.propTypes = {
-  importPlan: PropTypes.arrayOf(PropTypes.string),
-};
-
-PlanStep.defaultProps = {
-  importPlan: null,
-};
-
-const ConfirmStep = ({ importPlan }) => {
-  const intl = useIntl();
-
-  return (
-    <Stepper.Step eventKey="confirm" title={intl.formatMessage(messages.importWizardStepperConfirmStepTitle)}>
-      <Stack data-testid="confirm-step">
-        {intl.formatMessage(
-          messages.importWizardStepConfirmBody,
-          { br: linebreak, changeCount: importPlan?.length },
-        )}
-      </Stack>
-    </Stepper.Step>
-  );
-};
-
-ConfirmStep.propTypes = {
-  importPlan: PropTypes.arrayOf(PropTypes.string),
-};
-
-ConfirmStep.defaultProps = {
-  importPlan: null,
-};
-
-const DefaultModalHeader = ({ children }) => (
-  <ModalDialog.Header>
-    <ModalDialog.Title>{children}</ModalDialog.Title>
-  </ModalDialog.Header>
-);
-
-DefaultModalHeader.propTypes = {
-  children: PropTypes.string.isRequired,
-};
-
-const ImportTagsWizard = ({
-  taxonomy,
-  isOpen,
-  onClose,
-  reimport,
-}) => {
-  const intl = useIntl();
-  const { setToastMessage, setAlertError } = useContext(TaxonomyContext);
-
-  const [currentStep, setCurrentStep] = useState(reimport ? 'export' : 'upload');
-
-  const [file, setFile] = useState(/** @type {null|File} */ (null));
-
-  const [isDialogDisabled, disableDialog, enableDialog] = useToggle(false);
-
-  const [taxonomyPopulateData, setTaxonomyPopulateData] = useState({
-    taxonomyName: '',
-    taxonomyDesc: '',
-    taxonomyType: TaxonomyType.Tags,
-  });
-
-  const importNewTaxonomyMutation = useImportNewTaxonomy();
-
-  const importNewTaxonomy = async () => {
-    disableDialog();
-    try {
-      const { taxonomyName, taxonomyDesc, taxonomyType } = taxonomyPopulateData;
-      if (file) {
-        await importNewTaxonomyMutation.mutateAsync({
-          name: taxonomyName,
-          description: taxonomyDesc,
-          taxonomyType,
-          file,
-        });
-      }
-      if (setToastMessage) {
-        setToastMessage(intl.formatMessage(messages.importNewTaxonomyToast, { name: taxonomyName }));
-      }
-    } catch (/** @type {unknown} */ error) {
-      if (setAlertError) {
-        setAlertError({
-          title: intl.formatMessage(messages.importTaxonomyErrorAlert),
-          error,
-        });
-      }
-    } finally {
-      enableDialog();
-      onClose();
-    }
-  };
-
-  const importPlanResult = useImportPlan(taxonomy?.id, file);
-
-  const importPlan = useMemo(() => {
-    if (!importPlanResult.data) {
-      return null;
-    }
-    let planArrayTemp = importPlanResult.data.split('\n');
-    planArrayTemp = planArrayTemp.slice(2); // Removes the first two lines
-    planArrayTemp = planArrayTemp.slice(0, -1); // Removes the last line
-    const planArray = planArrayTemp
-      .filter((line) => !(line.includes('No changes'))) // Removes the "No changes" lines
-      .map((line) => line.split(':')[1].trim()); // Get only the action message
-    return /** @type {string[]} */ (planArray);
-  }, [importPlanResult.data]);
-
-  const importTagsMutation = useImportTags();
-
-  const generatePlan = React.useCallback(() => {
-    setCurrentStep('plan');
-  }, []);
-
-  const populateData = React.useCallback(() => {
-    setCurrentStep('populate');
-  }, []);
-
-  const confirmImportTags = async () => {
-    disableDialog();
-    try {
-      if (file) {
-        await importTagsMutation.mutateAsync({
-          taxonomyId: taxonomy.id,
-          file,
-        });
-      }
-      if (setToastMessage) {
-        setToastMessage(intl.formatMessage(messages.importTaxonomyToast, { name: taxonomy?.name }));
-      }
-    } catch (/** @type {unknown} */ error) {
-      if (setAlertError) {
-        setAlertError({
-          title: intl.formatMessage(messages.importTaxonomyErrorAlert),
-          error,
-        });
-      }
-    } finally {
-      enableDialog();
-      onClose();
-    }
-  };
-
-  const stepHeaders = {
-    export: (
-      <DefaultModalHeader>
-        {intl.formatMessage(messages.importWizardStepExportTitle, { name: taxonomy?.name })}
-      </DefaultModalHeader>
-    ),
-    upload: (
-      <DefaultModalHeader>
-        {intl.formatMessage(messages.importWizardStepUploadTitle)}
-      </DefaultModalHeader>
-    ),
-    populate: (
-      <DefaultModalHeader>
-        {intl.formatMessage(messages.importWizardStepPopulateTitle)}
-      </DefaultModalHeader>
-    ),
-    plan: (
-      <DefaultModalHeader>
-        {intl.formatMessage(messages.importWizardStepPlanTitle)}
-      </DefaultModalHeader>
-    ),
-    confirm: (
-      <ModalDialog.Header className="bg-warning-100">
-        <Stack gap={2} direction="horizontal">
-          <Icon src={Warning} className="text-warning" />
-          <ModalDialog.Title>
-            {intl.formatMessage(messages.importWizardStepConfirmTitle, { changeCount: importPlan?.length })}
-          </ModalDialog.Title>
-        </Stack>
-      </ModalDialog.Header>
-    ),
-  };
-
-  return (
-    <Container
-      onClick={(e) => e.stopPropagation() /* This prevents calling onClick handler from the parent */}
-    >
-      <ModalDialog
-        title=""
-        isOpen={isOpen}
-        isBlocking
-        onClose={onClose}
-        size="lg"
-        isOverflowVisible
-      >
-        {isDialogDisabled && (
-          // This div is used to prevent the user from interacting with the dialog while the import is happening
-          <div className="position-absolute w-100 h-100 d-block zindex-9" />
-        )}
-
-        {stepHeaders[currentStep]}
-
-        <hr className="mx-4" />
-
-        <Stepper activeKey={currentStep}>
-          <ModalDialog.Body>
-            {reimport && <ExportStep taxonomy={taxonomy} />}
-            <UploadStep
-              file={file}
-              setFile={setFile}
-              importPlanError={/** @type {Error|undefined} */ (importPlanResult.error)?.message}
-              reimport={reimport}
-            />
-            <PopulateStep
-              taxonomyPopulateData={taxonomyPopulateData}
-              setTaxonomyPopulateData={setTaxonomyPopulateData}
-            />
-            <PlanStep importPlan={importPlan} />
-            <ConfirmStep importPlan={importPlan} />
-          </ModalDialog.Body>
-
-          <hr className="mx-4" />
-
-          <ModalDialog.Footer>
-            <Stepper.ActionRow eventKey="export">
-              <Button variant="tertiary" onClick={onClose} data-testid="cancel-button">
-                {intl.formatMessage(messages.importWizardButtonCancel)}
-              </Button>
-              <Button onClick={() => setCurrentStep('upload')} data-testid="next-button">
-                {intl.formatMessage(messages.importWizardButtonNext)}
-              </Button>
-            </Stepper.ActionRow>
-
-            <Stepper.ActionRow eventKey="upload">
-              {reimport
-                && (
-                  <Button variant="outline-primary" onClick={() => setCurrentStep('export')} data-testid="back-button">
-                    {intl.formatMessage(messages.importWizardButtonPrevious)}
-                  </Button>
-                )}
-              <Stepper.ActionRow.Spacer />
-              <Button variant="tertiary" onClick={onClose}>
-                {intl.formatMessage(messages.importWizardButtonCancel)}
-              </Button>
-              {importPlanResult.isLoading ?
-                <LoadingSpinner />
-                : (
-                  <LoadingButton
-                    label={reimport
-                      ? intl.formatMessage(messages.importWizardButtonImport)
-                      : intl.formatMessage(messages.importWizardButtonContinue)}
-                    disabled={!file || importPlanResult.isLoading || !!importPlanResult.error}
-                    onClick={reimport ? generatePlan : populateData}
-                  />
-                )}
-            </Stepper.ActionRow>
-
-            <Stepper.ActionRow eventKey="populate">
-              <Button variant="outline-primary" onClick={() => setCurrentStep('upload')} data-testid="back-button">
-                {intl.formatMessage(messages.importWizardButtonPrevious)}
-              </Button>
-              <Stepper.ActionRow.Spacer />
-              <Button variant="tertiary" onClick={onClose}>
-                {intl.formatMessage(messages.importWizardButtonCancel)}
-              </Button>
-              <LoadingButton
-                label={intl.formatMessage(messages.importWizardButtonImport)}
-                disabled={!taxonomyPopulateData.taxonomyName || !taxonomyPopulateData.taxonomyDesc}
-                onClick={importNewTaxonomy}
-                data-testid="import-button"
-              />
-            </Stepper.ActionRow>
-
-            <Stepper.ActionRow eventKey="plan">
-              <Button variant="outline-primary" onClick={() => setCurrentStep('upload')} data-testid="back-button">
-                {intl.formatMessage(messages.importWizardButtonPrevious)}
-              </Button>
-              <Stepper.ActionRow.Spacer />
-              <Button variant="tertiary" onClick={onClose}>
-                {intl.formatMessage(messages.importWizardButtonCancel)}
-              </Button>
-              <Button
-                disabled={!importPlan?.length}
-                onClick={() => setCurrentStep('confirm')}
-                data-testid="continue-button"
-              >
-                {intl.formatMessage(messages.importWizardButtonContinue)}
-              </Button>
-            </Stepper.ActionRow>
-
-            <Stepper.ActionRow eventKey="confirm">
-              {reimport
-                && (
-                  <Button variant="outline-primary" onClick={() => setCurrentStep('plan')} data-testid="back-button">
-                    {intl.formatMessage(messages.importWizardButtonPrevious)}
-                  </Button>
-                )}
-              <Stepper.ActionRow.Spacer />
-              <Button variant="tertiary" onClick={onClose}>
-                {intl.formatMessage(messages.importWizardButtonCancel)}
-              </Button>
-              <LoadingButton
-                label={intl.formatMessage(messages.importWizardButtonConfirm)}
-                onClick={confirmImportTags}
-              />
-            </Stepper.ActionRow>
-          </ModalDialog.Footer>
-        </Stepper>
-      </ModalDialog>
-    </Container>
-  );
-};
-
-ImportTagsWizard.defaultProps = {
-  taxonomy: null,
-  reimport: false,
-};
-
-ImportTagsWizard.propTypes = {
-  taxonomy: TaxonomyProp,
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  reimport: PropTypes.bool,
-};
-
-export { ImportTagsWizard };
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.test.jsx b/src/taxonomy/import-tags/ImportTagsWizard.test.tsx
similarity index 93%
rename from src/taxonomy/import-tags/ImportTagsWizard.test.jsx
rename to src/taxonomy/import-tags/ImportTagsWizard.test.tsx
index 8f90f1b5bb..988d949787 100644
--- a/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
+++ b/src/taxonomy/import-tags/ImportTagsWizard.test.tsx
@@ -12,29 +12,30 @@ import {
   screen,
   within,
 } from '@testing-library/react';
-import PropTypes from 'prop-types';
 
-import initializeStore from '../../store';
-import { getTaxonomyExportFile } from '../data/api';
-import { TaxonomyContext } from '../common/context';
+import initializeStore from '@src/store';
+import { getTaxonomyExportFile } from '@src/taxonomy/data/api';
+import { TaxonomyContext } from '@src/taxonomy/common/context';
+import type { TaxonomyContextData } from '@src/taxonomy/common/context';
 import { ImportTagsWizard } from './ImportTagsWizard';
+import type { ImportTaxonomy } from './types';
 
-let store;
+let store: ReturnType<typeof initializeStore>;
 
 const queryClient = new QueryClient();
-let axiosMock;
+let axiosMock: MockAdapter;
 
-jest.mock('../data/api', () => ({
-  ...jest.requireActual('../data/api'),
+jest.mock('@src/taxonomy/data/api', () => ({
+  ...jest.requireActual('@src/taxonomy/data/api'),
   getTaxonomyExportFile: jest.fn(),
 }));
 
 const mockSetToastMessage = jest.fn();
 const mockSetAlertError = jest.fn();
-const context = {
+const context: TaxonomyContextData = {
   toastMessage: null,
   setToastMessage: mockSetToastMessage,
-  alertProps: null,
+  alertError: null,
   setAlertError: mockSetAlertError,
 };
 
@@ -42,12 +43,18 @@ const planImportUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/
 const doImportUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/import/';
 const doImportNewTaxonomyUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/import/';
 
-const sampleTaxonomy = {
+const sampleTaxonomy: ImportTaxonomy = {
   id: 1,
   name: 'Test Taxonomy',
 };
 
-const RootWrapper = ({ onClose, reimport, taxonomy }) => (
+interface RootWrapperProps {
+  onClose: () => void;
+  reimport?: boolean;
+  taxonomy?: ImportTaxonomy | null;
+}
+
+const RootWrapper = ({ onClose, reimport, taxonomy }: RootWrapperProps) => (
   <AppProvider store={store}>
     <IntlProvider locale="en" messages={{}}>
       <QueryClientProvider client={queryClient}>
@@ -59,15 +66,6 @@ const RootWrapper = ({ onClose, reimport, taxonomy }) => (
   </AppProvider>
 );
 
-RootWrapper.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  reimport: PropTypes.bool.isRequired,
-  taxonomy: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
 describe('<ImportTagsWizard />', () => {
   beforeEach(() => {
     initializeMockApp({
@@ -146,7 +144,7 @@ describe('<ImportTagsWizard />', () => {
     expect(getByTestId('dropzone')).toBeInTheDocument();
     expect(importButton).toHaveAttribute('aria-disabled', 'true');
 
-    const makeJson = (filename) => new File(['{}'], filename, { type: 'application/json' });
+    const makeJson = (filename: string) => new File(['{}'], filename, { type: 'application/json' });
 
     // Correct file type
     axiosMock.onPut(planImportUrl).replyOnce(200, { plan: 'Import plan' });
@@ -281,7 +279,7 @@ describe('<ImportTagsWizard />', () => {
     expect(getByTestId('dropzone')).toBeInTheDocument();
     expect(continueButton).toHaveAttribute('aria-disabled', 'true');
 
-    const makeJson = (filename) => new File(['{}'], filename, { type: 'application/json' });
+    const makeJson = (filename: string) => new File(['{}'], filename, { type: 'application/json' });
 
     // Correct file type
     fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [makeJson('example1.json')], types: ['Files'] } });
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.tsx b/src/taxonomy/import-tags/ImportTagsWizard.tsx
new file mode 100644
index 0000000000..5ba668c873
--- /dev/null
+++ b/src/taxonomy/import-tags/ImportTagsWizard.tsx
@@ -0,0 +1,308 @@
+import React, { useContext, useMemo, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  useToggle,
+  Button,
+  Container,
+  Icon,
+  ModalDialog,
+  Stack,
+  Stepper,
+} from '@openedx/paragon';
+import { Warning } from '@openedx/paragon/icons';
+
+import LoadingButton from '@src/generic/loading-button';
+import { LoadingSpinner } from '@src/generic/Loading';
+import { TaxonomyContext } from '@src/taxonomy/common/context';
+import { TaxonomyType } from '@src/taxonomy/data/constants';
+import { useImportNewTaxonomy, useImportPlan, useImportTags } from '@src/taxonomy/data/apiHooks';
+import { ConfirmStep } from './steps/ConfirmStep';
+import { ExportStep } from './steps/ExportStep';
+import { PlanStep } from './steps/PlanStep';
+import { PopulateStep } from './steps/PopulateStep';
+import { UploadStep } from './steps/UploadStep';
+import messages from './messages';
+import type { ImportTaxonomy, ImportWizardStep, TaxonomyPopulateData } from './types';
+
+/**
+ * The header shown at the top of most of the wizard's steps.
+ */
+export const DefaultModalHeader = ({ children }: { children: string; }) => (
+  <ModalDialog.Header>
+    <ModalDialog.Title>{children}</ModalDialog.Title>
+  </ModalDialog.Header>
+);
+
+interface ImportTagsWizardProps {
+  /** The taxonomy to import tags into. Only used (and required) when `reimport` is true. */
+  taxonomy?: ImportTaxonomy | null;
+  isOpen: boolean;
+  onClose: () => void;
+  /** True to import tags into `taxonomy`; false to create a new taxonomy from the uploaded file. */
+  reimport?: boolean;
+}
+
+/**
+ * A wizard that imports a taxonomy from a file, either creating a new taxonomy or replacing the
+ * tags of an existing one.
+ */
+export const ImportTagsWizard = ({
+  taxonomy = null,
+  isOpen,
+  onClose,
+  reimport = false,
+}: ImportTagsWizardProps) => {
+  const intl = useIntl();
+  const { setToastMessage, setAlertError } = useContext(TaxonomyContext);
+
+  const [currentStep, setCurrentStep] = useState<ImportWizardStep>(reimport ? 'export' : 'upload');
+
+  const [file, setFile] = useState<File | null>(null);
+
+  const [isDialogDisabled, disableDialog, enableDialog] = useToggle(false);
+
+  const [taxonomyPopulateData, setTaxonomyPopulateData] = useState<TaxonomyPopulateData>({
+    taxonomyName: '',
+    taxonomyDesc: '',
+    taxonomyType: TaxonomyType.Tags,
+  });
+
+  const importNewTaxonomyMutation = useImportNewTaxonomy();
+
+  const importNewTaxonomy = async () => {
+    disableDialog();
+    try {
+      const { taxonomyName, taxonomyDesc, taxonomyType } = taxonomyPopulateData;
+      if (file) {
+        await importNewTaxonomyMutation.mutateAsync({
+          name: taxonomyName,
+          description: taxonomyDesc,
+          taxonomyType,
+          file,
+        });
+      }
+      if (setToastMessage) {
+        setToastMessage(intl.formatMessage(messages.importNewTaxonomyToast, { name: taxonomyName }));
+      }
+    } catch (error) {
+      if (setAlertError) {
+        setAlertError({
+          title: intl.formatMessage(messages.importTaxonomyErrorAlert),
+          error,
+        });
+      }
+    } finally {
+      enableDialog();
+      onClose();
+    }
+  };
+
+  const importPlanResult = useImportPlan(taxonomy?.id, file);
+
+  const importPlan = useMemo(() => {
+    if (!importPlanResult.data) {
+      return null;
+    }
+    let planArrayTemp = importPlanResult.data.split('\n');
+    planArrayTemp = planArrayTemp.slice(2); // Removes the first two lines
+    planArrayTemp = planArrayTemp.slice(0, -1); // Removes the last line
+    return planArrayTemp
+      .filter((line) => !(line.includes('No changes'))) // Removes the "No changes" lines
+      .map((line) => line.split(':')[1].trim()); // Get only the action message
+  }, [importPlanResult.data]);
+
+  const importTagsMutation = useImportTags();
+
+  const generatePlan = React.useCallback(() => {
+    setCurrentStep('plan');
+  }, []);
+
+  const populateData = React.useCallback(() => {
+    setCurrentStep('populate');
+  }, []);
+
+  const confirmImportTags = async () => {
+    disableDialog();
+    try {
+      if (file && taxonomy) {
+        await importTagsMutation.mutateAsync({
+          taxonomyId: taxonomy.id,
+          file,
+        });
+      }
+      if (setToastMessage) {
+        setToastMessage(intl.formatMessage(messages.importTaxonomyToast, { name: taxonomy?.name }));
+      }
+    } catch (error) {
+      if (setAlertError) {
+        setAlertError({
+          title: intl.formatMessage(messages.importTaxonomyErrorAlert),
+          error,
+        });
+      }
+    } finally {
+      enableDialog();
+      onClose();
+    }
+  };
+
+  const stepHeaders: Record<ImportWizardStep, React.ReactNode> = {
+    export: (
+      <DefaultModalHeader>
+        {intl.formatMessage(messages.importWizardStepExportTitle, { name: taxonomy?.name })}
+      </DefaultModalHeader>
+    ),
+    upload: (
+      <DefaultModalHeader>
+        {intl.formatMessage(messages.importWizardStepUploadTitle)}
+      </DefaultModalHeader>
+    ),
+    populate: (
+      <DefaultModalHeader>
+        {intl.formatMessage(messages.importWizardStepPopulateTitle)}
+      </DefaultModalHeader>
+    ),
+    plan: (
+      <DefaultModalHeader>
+        {intl.formatMessage(messages.importWizardStepPlanTitle)}
+      </DefaultModalHeader>
+    ),
+    confirm: (
+      <ModalDialog.Header className="bg-warning-100">
+        <Stack gap={2} direction="horizontal">
+          <Icon src={Warning} className="text-warning" />
+          <ModalDialog.Title>
+            {intl.formatMessage(messages.importWizardStepConfirmTitle, { changeCount: importPlan?.length })}
+          </ModalDialog.Title>
+        </Stack>
+      </ModalDialog.Header>
+    ),
+  };
+
+  return (
+    <Container onClick={(e: React.MouseEvent) => e.stopPropagation()}>
+      <ModalDialog
+        title=""
+        isOpen={isOpen}
+        isBlocking
+        onClose={onClose}
+        size="lg"
+        isOverflowVisible
+      >
+        {isDialogDisabled && (
+          // This div is used to prevent the user from interacting with the dialog while the import is happening
+          <div className="position-absolute w-100 h-100 d-block zindex-9" />
+        )}
+
+        {stepHeaders[currentStep]}
+
+        <hr className="mx-4" />
+
+        <Stepper activeKey={currentStep}>
+          <ModalDialog.Body>
+            {reimport && taxonomy && <ExportStep taxonomy={taxonomy} />}
+            <UploadStep
+              file={file}
+              setFile={setFile}
+              importPlanError={importPlanResult.error?.message}
+              reimport={reimport}
+            />
+            <PopulateStep
+              taxonomyPopulateData={taxonomyPopulateData}
+              setTaxonomyPopulateData={setTaxonomyPopulateData}
+            />
+            <PlanStep importPlan={importPlan} />
+            <ConfirmStep importPlan={importPlan} />
+          </ModalDialog.Body>
+
+          <hr className="mx-4" />
+
+          <ModalDialog.Footer>
+            <Stepper.ActionRow eventKey="export">
+              <Button variant="tertiary" onClick={onClose} data-testid="cancel-button">
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              <Button onClick={() => setCurrentStep('upload')} data-testid="next-button">
+                {intl.formatMessage(messages.importWizardButtonNext)}
+              </Button>
+            </Stepper.ActionRow>
+
+            <Stepper.ActionRow eventKey="upload">
+              {reimport
+                && (
+                  <Button variant="outline-primary" onClick={() => setCurrentStep('export')} data-testid="back-button">
+                    {intl.formatMessage(messages.importWizardButtonPrevious)}
+                  </Button>
+                )}
+              <Stepper.ActionRow.Spacer />
+              <Button variant="tertiary" onClick={onClose}>
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              {importPlanResult.isLoading ?
+                <LoadingSpinner />
+                : (
+                  <LoadingButton
+                    label={reimport
+                      ? intl.formatMessage(messages.importWizardButtonImport)
+                      : intl.formatMessage(messages.importWizardButtonContinue)}
+                    disabled={!file || importPlanResult.isLoading || !!importPlanResult.error}
+                    onClick={reimport ? generatePlan : populateData}
+                  />
+                )}
+            </Stepper.ActionRow>
+
+            <Stepper.ActionRow eventKey="populate">
+              <Button variant="outline-primary" onClick={() => setCurrentStep('upload')} data-testid="back-button">
+                {intl.formatMessage(messages.importWizardButtonPrevious)}
+              </Button>
+              <Stepper.ActionRow.Spacer />
+              <Button variant="tertiary" onClick={onClose}>
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              <LoadingButton
+                label={intl.formatMessage(messages.importWizardButtonImport)}
+                disabled={!taxonomyPopulateData.taxonomyName || !taxonomyPopulateData.taxonomyDesc}
+                onClick={importNewTaxonomy}
+                data-testid="import-button"
+              />
+            </Stepper.ActionRow>
+
+            <Stepper.ActionRow eventKey="plan">
+              <Button variant="outline-primary" onClick={() => setCurrentStep('upload')} data-testid="back-button">
+                {intl.formatMessage(messages.importWizardButtonPrevious)}
+              </Button>
+              <Stepper.ActionRow.Spacer />
+              <Button variant="tertiary" onClick={onClose}>
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              <Button
+                disabled={!importPlan?.length}
+                onClick={() => setCurrentStep('confirm')}
+                data-testid="continue-button"
+              >
+                {intl.formatMessage(messages.importWizardButtonContinue)}
+              </Button>
+            </Stepper.ActionRow>
+
+            <Stepper.ActionRow eventKey="confirm">
+              {reimport
+                && (
+                  <Button variant="outline-primary" onClick={() => setCurrentStep('plan')} data-testid="back-button">
+                    {intl.formatMessage(messages.importWizardButtonPrevious)}
+                  </Button>
+                )}
+              <Stepper.ActionRow.Spacer />
+              <Button variant="tertiary" onClick={onClose}>
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              <LoadingButton
+                label={intl.formatMessage(messages.importWizardButtonConfirm)}
+                onClick={confirmImportTags}
+              />
+            </Stepper.ActionRow>
+          </ModalDialog.Footer>
+        </Stepper>
+      </ModalDialog>
+    </Container>
+  );
+};
diff --git a/src/taxonomy/import-tags/messages.ts b/src/taxonomy/import-tags/messages.ts
index 1526e32a02..2ec84b108d 100644
--- a/src/taxonomy/import-tags/messages.ts
+++ b/src/taxonomy/import-tags/messages.ts
@@ -29,13 +29,16 @@ const messages = defineMessages({
     id: 'course-authoring.import-tags.wizard.step-export.title',
     defaultMessage: 'Update "{name}"',
   },
-  importWizardStepExportBody: {
-    id: 'course-authoring.import-tags.wizard.step-export.body',
+  importWizardStepExportReplaceWarning: {
+    id: 'course-authoring.import-tags.wizard.step-export.replace-warning',
     defaultMessage: 'To update this taxonomy you need to import a new CSV or JSON file. The current taxonomy will '
       + 'be completely replaced by the contents of the imported file (e.g. if a tag in the current taxonomy is not '
       + 'present in the imported file, it will be removed - both from the taxonomy and from any tagged course '
-      + 'content).'
-      + '{br}You may wish to export the taxonomy in its current state before importing the new file.',
+      + 'content).',
+  },
+  importWizardStepExportBackupSuggestion: {
+    id: 'course-authoring.import-tags.wizard.step-export.backup-suggestion',
+    defaultMessage: 'You may wish to export the taxonomy in its current state before importing the new file.',
   },
   importWizardStepExportCSVButton: {
     id: 'course-authoring.import-tags.wizard.step-export.button-csv',
@@ -53,18 +56,21 @@ const messages = defineMessages({
     id: 'course-authoring.import-tags.wizard.step-upload.clear-file',
     defaultMessage: 'Clear file',
   },
-  importWizardStepUploadBody: {
-    id: 'course-authoring.import-tags.wizard.step-upload.body',
+  importWizardStepUploadFormatInfo: {
+    id: 'course-authoring.import-tags.wizard.step-upload.format-info',
     defaultMessage: 'You can upload a CSV or JSON file to create a new taxonomy. You may use any spreadsheet tool '
       + '(for CSV files), or any text editor (for JSON files) to create the file that you wish to import. '
-      + 'For an example of the required format, download the {csvTemplateUrl} or {jsonTemplateUrl}.'
-      + '{br}Once the file is ready to be imported, drag and drop it into the box below, or click to upload.',
+      + 'For an example of the required format, download the <csvLink>{csvTemplateTitle}</csvLink> or '
+      + '<jsonLink>{jsonTemplateTitle}</jsonLink>.',
   },
-  importWizardStepReuploadBody: {
-    id: 'course-authoring.import-tags.wizard.step-reupload.body',
+  importWizardStepReuploadFormatInfo: {
+    id: 'course-authoring.import-tags.wizard.step-reupload.format-info',
     defaultMessage: 'You may use any spreadsheet tool (for CSV files), or any text editor (for JSON files) to create '
-      + 'the file that you wish to import.'
-      + '{br}Once the file is ready to be imported, drag and drop it into the box below, or click to upload.',
+      + 'the file that you wish to import.',
+  },
+  importWizardStepUploadDropInstruction: {
+    id: 'course-authoring.import-tags.wizard.step-upload.drop-instruction',
+    defaultMessage: 'Once the file is ready to be imported, drag and drop it into the box below, or click to upload.',
   },
   csvTemplateTitle: {
     id: 'course-authoring.import-tags.wizard.step-upload.csv-template',
@@ -102,11 +108,14 @@ const messages = defineMessages({
     id: 'course-authoring.import-tags.wizard.step-plan.title',
     defaultMessage: 'Differences between files',
   },
-  importWizardStepPlanBody: {
-    id: 'course-authoring.import-tags.wizard.step-plan.body',
+  importWizardStepPlanSummary: {
+    id: 'course-authoring.import-tags.wizard.step-plan.summary',
     defaultMessage: 'Importing this file will make {changeCount} updates to the existing taxonomy. '
-      + 'The content of the imported file will replace any existing values that do not match the new values.'
-      + '{br}Importing this file will cause the following updates:',
+      + 'The content of the imported file will replace any existing values that do not match the new values.',
+  },
+  importWizardStepPlanListLabel: {
+    id: 'course-authoring.import-tags.wizard.step-plan.list-label',
+    defaultMessage: 'Importing this file will cause the following updates:',
   },
   importWizardStepPlanNoChanges: {
     id: 'course-authoring.import-tags.wizard.step-plan.no-changes',
@@ -116,11 +125,14 @@ const messages = defineMessages({
     id: 'course-authoring.import-tags.wizard.step-confirm.title',
     defaultMessage: 'Import and replace tags',
   },
-  importWizardStepConfirmBody: {
-    id: 'course-authoring.import-tags.wizard.step-confirm.body',
+  importWizardStepConfirmWarning: {
+    id: 'course-authoring.import-tags.wizard.step-confirm.warning',
     defaultMessage: 'Warning! You are about to make {changeCount} changes to the existing taxonomy. Any tags applied '
-      + 'to course content will be updated or removed. This cannot be undone.'
-      + '{br}Are you sure you want to continue importing this file?',
+      + 'to course content will be updated or removed. This cannot be undone.',
+  },
+  importWizardStepConfirmQuestion: {
+    id: 'course-authoring.import-tags.wizard.step-confirm.question',
+    defaultMessage: 'Are you sure you want to continue importing this file?',
   },
   promptTaxonomyName: {
     id: 'course-authoring.import-tags.prompt.taxonomy-name',
diff --git a/src/taxonomy/import-tags/steps/ConfirmStep.tsx b/src/taxonomy/import-tags/steps/ConfirmStep.tsx
new file mode 100644
index 0000000000..1f1fa52589
--- /dev/null
+++ b/src/taxonomy/import-tags/steps/ConfirmStep.tsx
@@ -0,0 +1,35 @@
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Stack,
+  Stepper,
+} from '@openedx/paragon';
+
+import messages from '../messages';
+
+interface ConfirmStepProps {
+  /** The changes that importing the file will make, one per line. */
+  importPlan?: string[] | null;
+}
+
+/**
+ * Wizard step where the user confirms that the previewed changes should be applied.
+ */
+export const ConfirmStep = ({ importPlan = null }: ConfirmStepProps) => {
+  const intl = useIntl();
+
+  return (
+    <Stepper.Step eventKey="confirm" title={intl.formatMessage(messages.importWizardStepperConfirmStepTitle)}>
+      <Stack gap={3} data-testid="confirm-step">
+        <p className="mb-0">
+          <FormattedMessage
+            {...messages.importWizardStepConfirmWarning}
+            values={{ changeCount: importPlan?.length }}
+          />
+        </p>
+        <p className="mb-0">
+          <FormattedMessage {...messages.importWizardStepConfirmQuestion} />
+        </p>
+      </Stack>
+    </Stepper.Step>
+  );
+};
diff --git a/src/taxonomy/import-tags/steps/ExportStep.tsx b/src/taxonomy/import-tags/steps/ExportStep.tsx
new file mode 100644
index 0000000000..bc0fca43bc
--- /dev/null
+++ b/src/taxonomy/import-tags/steps/ExportStep.tsx
@@ -0,0 +1,55 @@
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Stack,
+  Stepper,
+} from '@openedx/paragon';
+import { Download } from '@openedx/paragon/icons';
+
+import { getTaxonomyExportFile } from '@src/taxonomy/data/api';
+
+import messages from '../messages';
+import { ImportTaxonomy } from '../types';
+
+interface ExportStepProps {
+  taxonomy: ImportTaxonomy;
+}
+
+/**
+ * Wizard step that offers to export the existing taxonomy, so that the user can edit the exported
+ * file and then re-import it.
+ */
+export const ExportStep = ({ taxonomy }: ExportStepProps) => {
+  const intl = useIntl();
+
+  return (
+    <Stepper.Step eventKey="export" title={intl.formatMessage(messages.importWizardStepperExportStepTitle)}>
+      <Stack gap={3} data-testid="export-step">
+        <p className="mb-0">
+          <FormattedMessage {...messages.importWizardStepExportReplaceWarning} />
+        </p>
+        <p className="mb-0">
+          <FormattedMessage {...messages.importWizardStepExportBackupSuggestion} />
+        </p>
+        <Stack gap={3} direction="horizontal">
+          <Button
+            iconBefore={Download}
+            variant="outline-primary"
+            onClick={() => getTaxonomyExportFile(taxonomy.id, 'csv')}
+            data-testid="export-csv-button"
+          >
+            {intl.formatMessage(messages.importWizardStepExportCSVButton)}
+          </Button>
+          <Button
+            iconBefore={Download}
+            variant="outline-primary"
+            onClick={() => getTaxonomyExportFile(taxonomy.id, 'json')}
+            data-testid="export-json-button"
+          >
+            {intl.formatMessage(messages.importWizardStepExportJSONButton)}
+          </Button>
+        </Stack>
+      </Stack>
+    </Stepper.Step>
+  );
+};
diff --git a/src/taxonomy/import-tags/steps/PlanStep.tsx b/src/taxonomy/import-tags/steps/PlanStep.tsx
new file mode 100644
index 0000000000..7f9e785e6b
--- /dev/null
+++ b/src/taxonomy/import-tags/steps/PlanStep.tsx
@@ -0,0 +1,42 @@
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Stack,
+  Stepper,
+} from '@openedx/paragon';
+
+import messages from '../messages';
+
+interface PlanStepProps {
+  /** The changes that importing the file will make, one per line. */
+  importPlan?: string[] | null;
+}
+
+/**
+ * Wizard step that previews the changes that importing the file will make.
+ */
+export const PlanStep = ({ importPlan = null }: PlanStepProps) => {
+  const intl = useIntl();
+
+  return (
+    <Stepper.Step eventKey="plan" title={intl.formatMessage(messages.importWizardStepperPlanStepTitle)}>
+      <Stack gap={3} data-testid="plan-step">
+        <p className="mb-0">
+          <FormattedMessage
+            {...messages.importWizardStepPlanSummary}
+            values={{ changeCount: importPlan?.length }}
+          />
+        </p>
+        <p className="mb-0">
+          <FormattedMessage {...messages.importWizardStepPlanListLabel} />
+        </p>
+        <ul className="h-200px" style={{ overflow: 'scroll' }}>
+          {importPlan?.length ?
+            (
+              importPlan.map((line) => <li key={line} data-testid="plan-action">{line}</li>)
+            ) :
+            <li>{intl.formatMessage(messages.importWizardStepPlanNoChanges)}</li>}
+        </ul>
+      </Stack>
+    </Stepper.Step>
+  );
+};
diff --git a/src/taxonomy/import-tags/steps/PopulateStep.tsx b/src/taxonomy/import-tags/steps/PopulateStep.tsx
new file mode 100644
index 0000000000..78a6aeeb92
--- /dev/null
+++ b/src/taxonomy/import-tags/steps/PopulateStep.tsx
@@ -0,0 +1,72 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Form,
+  Stack,
+  Stepper,
+} from '@openedx/paragon';
+
+import type { TaxonomyType } from '@src/taxonomy/data/constants';
+import messages from '../messages';
+import type { TaxonomyPopulateData } from '../types';
+import { TAXONOMY_TYPE_OPTIONS } from './constants';
+
+interface PopulateStepProps {
+  taxonomyPopulateData: TaxonomyPopulateData;
+  setTaxonomyPopulateData: (data: TaxonomyPopulateData) => void;
+}
+
+/**
+ * Wizard step where the user describes the new taxonomy that will be created from the uploaded file.
+ */
+export const PopulateStep = ({ taxonomyPopulateData, setTaxonomyPopulateData }: PopulateStepProps) => {
+  const intl = useIntl();
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTaxonomyPopulateData({ ...taxonomyPopulateData, taxonomyName: e.target.value });
+  };
+
+  const handleDescChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setTaxonomyPopulateData({ ...taxonomyPopulateData, taxonomyDesc: e.target.value });
+  };
+
+  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setTaxonomyPopulateData({ ...taxonomyPopulateData, taxonomyType: e.target.value as TaxonomyType });
+  };
+
+  return (
+    <Stepper.Step eventKey="populate" title={intl.formatMessage(messages.importWizardStepperPopulateStepTitle)}>
+      <Stack gap={3} data-testid="populate-step">
+        <Form.Group>
+          <Form.Label>{intl.formatMessage(messages.importWizardStepPopulateTaxonomyName)}</Form.Label>
+          <Form.Control value={taxonomyPopulateData.taxonomyName} onChange={handleNameChange} />
+        </Form.Group>
+        <Form.Group>
+          <Form.Label>{intl.formatMessage(messages.importWizardStepPopulateTaxonomyDesc)}</Form.Label>
+          <Form.Control
+            as="textarea"
+            autoResize
+            value={taxonomyPopulateData.taxonomyDesc}
+            onChange={handleDescChange}
+          />
+        </Form.Group>
+        <Form.Group>
+          <Form.Label>
+            {intl.formatMessage(messages.importWizardStepPopulateTaxonomyType)}
+          </Form.Label>
+          <Form.Control
+            as="select"
+            data-testid="taxonomy-type-select"
+            value={taxonomyPopulateData.taxonomyType}
+            onChange={handleTypeChange}
+          >
+            {TAXONOMY_TYPE_OPTIONS.map(({ value, message }) => (
+              <option key={value} value={value}>
+                {intl.formatMessage(message)}
+              </option>
+            ))}
+          </Form.Control>
+        </Form.Group>
+      </Stack>
+    </Stepper.Step>
+  );
+};
diff --git a/src/taxonomy/import-tags/steps/UploadStep.tsx b/src/taxonomy/import-tags/steps/UploadStep.tsx
new file mode 100644
index 0000000000..af0e2b6025
--- /dev/null
+++ b/src/taxonomy/import-tags/steps/UploadStep.tsx
@@ -0,0 +1,124 @@
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Container,
+  Dropzone,
+  Icon,
+  IconButton,
+  Stack,
+  Stepper,
+} from '@openedx/paragon';
+import {
+  DeleteOutline,
+  InsertDriveFile,
+} from '@openedx/paragon/icons';
+
+import { apiUrls } from '@src/taxonomy/data/api';
+import { getFileSizeToClosestByte } from '@src/utils';
+import messages from '../messages';
+
+const csvLink = (chunks) => <a href={apiUrls.taxonomyTemplate('csv')} download>{chunks}</a>;
+
+const jsonLink = (chunks) => <a href={apiUrls.taxonomyTemplate('json')} download>{chunks}</a>;
+
+interface UploadStepProps {
+  file: File | null;
+  setFile: (file: File | null) => void;
+  /** Error that occurred while previewing the import, if any. */
+  importPlanError?: string;
+  /** True when importing into an existing taxonomy, rather than creating a new one. */
+  reimport?: boolean;
+}
+
+/**
+ * Wizard step where the user selects the file to import.
+ */
+export const UploadStep = ({
+  file,
+  setFile,
+  importPlanError,
+  reimport = false,
+}: UploadStepProps) => {
+  const intl = useIntl();
+
+  const handleFileLoad = ({ fileData }: { fileData: FormData; }) => {
+    setFile(fileData.get('file') as File);
+  };
+
+  const clearFile = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setFile(null);
+  };
+
+  return (
+    <Stepper.Step
+      eventKey="upload"
+      title={intl.formatMessage(messages.importWizardStepperUploadStepTitle)}
+      hasError={!!importPlanError}
+    >
+      <Stack gap={3} data-testid="upload-step">
+        <p className="mb-0">
+          {reimport
+            ? <FormattedMessage {...messages.importWizardStepReuploadFormatInfo} />
+            : (
+              <FormattedMessage
+                {...messages.importWizardStepUploadFormatInfo}
+                values={{
+                  csvTemplateTitle: intl.formatMessage(messages.csvTemplateTitle),
+                  jsonTemplateTitle: intl.formatMessage(messages.jsonTemplateTitle),
+                  csvLink,
+                  jsonLink,
+                }}
+              />
+            )}
+        </p>
+        <p className="mb-0">
+          <FormattedMessage {...messages.importWizardStepUploadDropInstruction} />
+        </p>
+        <div>
+          {!file ?
+            (
+              <Dropzone
+                maxSize={100 * 1024 * 1024 /* 100MB */}
+                accept={{
+                  'text/csv': ['.csv'],
+                  'application/json': ['.json'],
+                }}
+                onProcessUpload={handleFileLoad}
+                data-testid="dropzone"
+                /*
+                  className is working on Dropzone: https://github.com/openedx/paragon/pull/2950
+                  className="h-200px"
+              */
+                style={{ height: '200px' }}
+              />
+            ) :
+            (
+              <Stack
+                gap={3}
+                direction="horizontal"
+                className="h-200px border-top p-4 align-items-start flex-wrap"
+                data-testid="file-info"
+              >
+                <Icon src={InsertDriveFile} style={{ height: '48px', width: '48px' }} />
+                <Stack gap={0} className="align-self-start">
+                  <div>{file.name}</div>
+                  <div className="x-small text-gray-500">{getFileSizeToClosestByte(file.size)}</div>
+                </Stack>
+                <IconButton
+                  src={DeleteOutline}
+                  iconAs={Icon}
+                  alt={intl.formatMessage(messages.importWizardStepUploadClearFile)}
+                  variant="secondary"
+                  className="ml-auto"
+                  onClick={clearFile}
+                  data-testid="clear-file-button"
+                />
+              </Stack>
+            )}
+        </div>
+
+        {importPlanError && <Container className="alert alert-danger">{importPlanError}</Container>}
+      </Stack>
+    </Stepper.Step>
+  );
+};
diff --git a/src/taxonomy/import-tags/constants.ts b/src/taxonomy/import-tags/steps/constants.ts
similarity index 70%
rename from src/taxonomy/import-tags/constants.ts
rename to src/taxonomy/import-tags/steps/constants.ts
index 32e7159352..5eb4451ce8 100644
--- a/src/taxonomy/import-tags/constants.ts
+++ b/src/taxonomy/import-tags/steps/constants.ts
@@ -1,10 +1,8 @@
 import { TaxonomyType } from '@src/taxonomy/data/constants';
-import messages from './messages';
+import messages from '../messages';
 
 /**
  * The taxonomy types a user can pick when importing a taxonomy.
- * The backend also supports a "system" type, but it is reserved for
- * platform-defined taxonomies and must not be offered here.
  */
 export const TAXONOMY_TYPE_OPTIONS = [
   {
diff --git a/src/taxonomy/import-tags/types.ts b/src/taxonomy/import-tags/types.ts
new file mode 100644
index 0000000000..26e7c0c0c4
--- /dev/null
+++ b/src/taxonomy/import-tags/types.ts
@@ -0,0 +1,17 @@
+import type { TaxonomyType } from '@src/taxonomy/data/constants';
+import type { TaxonomyData } from '@src/taxonomy/data/types';
+
+/**
+ * The taxonomy that tags are being imported into.
+ */
+export type ImportTaxonomy = Pick<TaxonomyData, 'id' | 'name'>;
+
+/** The steps of the import wizard, in the order the user goes through them. */
+export type ImportWizardStep = 'export' | 'upload' | 'populate' | 'plan' | 'confirm';
+
+/** The details of the new taxonomy that is being created from the uploaded file. */
+export interface TaxonomyPopulateData {
+  taxonomyName: string;
+  taxonomyDesc: string;
+  taxonomyType: TaxonomyType;
+}

From 03087d0369513f4e1170d257d1fb13287993866f Mon Sep 17 00:00:00 2001
From: javoconsultant <jmeliev_consultant@flex.unicon.net>
Date: Wed, 2 Sep 2026 15:46:00 +0500
Subject: [PATCH 6/6] feat(taxonomy): enhance taxonomy type descriptions and
 update tests for import tags wizard

---
 src/taxonomy/data/constants.ts                |   8 +
 .../import-tags/ImportTagsWizard.test.tsx     | 236 +++++++++++-------
 src/taxonomy/import-tags/messages.ts          |  18 ++
 src/taxonomy/import-tags/steps/constants.ts   |   5 +
 4 files changed, 177 insertions(+), 90 deletions(-)

diff --git a/src/taxonomy/data/constants.ts b/src/taxonomy/data/constants.ts
index a699f4f208..0ce4e8efbd 100644
--- a/src/taxonomy/data/constants.ts
+++ b/src/taxonomy/data/constants.ts
@@ -8,6 +8,14 @@
 export const MAX_TAXONOMY_ITEMS = 10000;
 
 export enum TaxonomyType {
+  /**
+   * A taxonomy whose tags are only labels for content. They say what a piece of content is about,
+   * and carry no rules about demonstrating mastery of what they describe.
+   */
   Tags = 'tags',
+  /**
+   * A taxonomy of skills. Beyond labelling content, choosing this type enables the Competency
+   * Management page, where the rules used to demonstrate mastery of those skills are configured.
+   */
   Competency = 'competency',
 }
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.test.tsx b/src/taxonomy/import-tags/ImportTagsWizard.test.tsx
index 988d949787..6d03c11354 100644
--- a/src/taxonomy/import-tags/ImportTagsWizard.test.tsx
+++ b/src/taxonomy/import-tags/ImportTagsWizard.test.tsx
@@ -1,28 +1,22 @@
-import MockAdapter from 'axios-mock-adapter';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type MockAdapter from 'axios-mock-adapter';
+
 import {
   act,
   fireEvent,
+  initializeMocks,
   render,
-  waitFor,
   screen,
+  userEvent,
+  waitFor,
   within,
-} from '@testing-library/react';
-
-import initializeStore from '@src/store';
+} from '@src/testUtils';
 import { getTaxonomyExportFile } from '@src/taxonomy/data/api';
 import { TaxonomyContext } from '@src/taxonomy/common/context';
 import type { TaxonomyContextData } from '@src/taxonomy/common/context';
+import { TaxonomyType } from '@src/taxonomy/data/constants';
 import { ImportTagsWizard } from './ImportTagsWizard';
 import type { ImportTaxonomy } from './types';
 
-let store: ReturnType<typeof initializeStore>;
-
-const queryClient = new QueryClient();
 let axiosMock: MockAdapter;
 
 jest.mock('@src/taxonomy/data/api', () => ({
@@ -39,6 +33,10 @@ const context: TaxonomyContextData = {
   setAlertError: mockSetAlertError,
 };
 
+const TaxonomyContextProvider = ({ children }: { children: React.ReactNode; }) => (
+  <TaxonomyContext.Provider value={context}>{children}</TaxonomyContext.Provider>
+);
+
 const planImportUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/import/plan/';
 const doImportUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/import/';
 const doImportNewTaxonomyUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/import/';
@@ -48,46 +46,64 @@ const sampleTaxonomy: ImportTaxonomy = {
   name: 'Test Taxonomy',
 };
 
-interface RootWrapperProps {
+interface RenderWizardProps {
   onClose: () => void;
   reimport?: boolean;
   taxonomy?: ImportTaxonomy | null;
 }
 
-const RootWrapper = ({ onClose, reimport, taxonomy }: RootWrapperProps) => (
-  <AppProvider store={store}>
-    <IntlProvider locale="en" messages={{}}>
-      <QueryClientProvider client={queryClient}>
-        <TaxonomyContext.Provider value={context}>
-          <ImportTagsWizard taxonomy={taxonomy} isOpen onClose={onClose} reimport={reimport} />
-        </TaxonomyContext.Provider>
-      </QueryClientProvider>
-    </IntlProvider>
-  </AppProvider>
-);
+const renderWizard = ({ onClose, reimport, taxonomy }: RenderWizardProps) =>
+  render(
+    <ImportTagsWizard taxonomy={taxonomy} isOpen onClose={onClose} reimport={reimport} />,
+    { extraWrapper: TaxonomyContextProvider },
+  );
+
+const makeJson = (filename: string) => new File(['{}'], filename, { type: 'application/json' });
+
+/**
+ * Drop a valid file onto the upload step of the "create a new taxonomy" flow, then continue to the
+ * populate step.
+ */
+const goToPopulateStep = async () => {
+  fireEvent.drop(screen.getByTestId('dropzone'), {
+    dataTransfer: { files: [makeJson('example1.json')], types: ['Files'] },
+  });
+  expect(await screen.findByTestId('file-info')).toBeInTheDocument();
 
-describe('<ImportTagsWizard />', () => {
-  beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  const continueButton = await screen.findByRole('button', { name: 'Continue' });
+  await waitFor(() => {
+    expect(continueButton).not.toHaveAttribute('aria-disabled', 'true');
   });
+  fireEvent.click(continueButton);
+
+  expect(await screen.findByTestId('populate-step')).toBeInTheDocument();
+};
+
+/** Fill in the name and description of the populate step, which the Import button requires. */
+const fillInRequiredFields = (name: string) => {
+  fireEvent.change(screen.getByLabelText('Taxonomy Name'), { target: { value: name } });
+  fireEvent.change(screen.getByLabelText('Taxonomy Description'), { target: { value: `${name} Description` } });
+};
 
-  afterEach(() => {
-    jest.clearAllMocks();
-    queryClient.clear();
+/** Click Import on the populate step, once enabled, and wait for the request to be made. */
+const clickImport = async () => {
+  await waitFor(() => {
+    expect(screen.getByRole('button', { name: 'Import' })).not.toHaveAttribute('aria-disabled', 'true');
+  });
+
+  act(() => {
+    fireEvent.click(screen.getByRole('button', { name: 'Import' }));
+  });
+};
+
+describe('<ImportTagsWizard />', () => {
+  beforeEach(() => {
+    ({ axiosMock } = initializeMocks());
   });
 
   it('render the dialog in the reimport first step can close on cancel', async () => {
     const onClose = jest.fn();
-    const { findByTestId, getByTestId } = render(<RootWrapper taxonomy={sampleTaxonomy} onClose={onClose} reimport />);
+    const { findByTestId, getByTestId } = renderWizard({ taxonomy: sampleTaxonomy, onClose, reimport: true });
 
     expect(await findByTestId('export-step')).toBeInTheDocument();
 
@@ -98,7 +114,7 @@ describe('<ImportTagsWizard />', () => {
 
   it('can export taxonomies from the reimport dialog', async () => {
     const onClose = jest.fn();
-    const { findByTestId, getByTestId } = render(<RootWrapper taxonomy={sampleTaxonomy} onClose={onClose} reimport />);
+    const { findByTestId, getByTestId } = renderWizard({ taxonomy: sampleTaxonomy, onClose, reimport: true });
 
     expect(await findByTestId('export-step')).toBeInTheDocument();
 
@@ -120,7 +136,7 @@ describe('<ImportTagsWizard />', () => {
       getAllByTestId,
       getByTestId,
       getByText,
-    } = render(<RootWrapper taxonomy={sampleTaxonomy} onClose={onClose} reimport />);
+    } = renderWizard({ taxonomy: sampleTaxonomy, onClose, reimport: true });
 
     expect(await findByTestId('export-step')).toBeInTheDocument();
 
@@ -144,8 +160,6 @@ describe('<ImportTagsWizard />', () => {
     expect(getByTestId('dropzone')).toBeInTheDocument();
     expect(importButton).toHaveAttribute('aria-disabled', 'true');
 
-    const makeJson = (filename: string) => new File(['{}'], filename, { type: 'application/json' });
-
     // Correct file type
     axiosMock.onPut(planImportUrl).replyOnce(200, { plan: 'Import plan' });
     fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [makeJson('example1.json')], types: ['Files'] } });
@@ -258,7 +272,7 @@ describe('<ImportTagsWizard />', () => {
       getByTestId,
       getByText,
       queryByTestId,
-    } = render(<RootWrapper taxonomy={null} onClose={onClose} />);
+    } = renderWizard({ taxonomy: null, onClose });
 
     // Check that there is no export step
     expect(queryByTestId('export-step')).not.toBeInTheDocument();
@@ -269,8 +283,7 @@ describe('<ImportTagsWizard />', () => {
     expect(getByTestId('upload-step')).toBeInTheDocument();
 
     // Continue flow
-    await waitFor(() => expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument());
-    let continueButton = getByRole('button', { name: 'Continue' });
+    let continueButton = await screen.findByRole('button', { name: 'Continue' });
     expect(continueButton).toHaveAttribute('aria-disabled', 'true');
 
     // Invalid file type
@@ -279,8 +292,6 @@ describe('<ImportTagsWizard />', () => {
     expect(getByTestId('dropzone')).toBeInTheDocument();
     expect(continueButton).toHaveAttribute('aria-disabled', 'true');
 
-    const makeJson = (filename: string) => new File(['{}'], filename, { type: 'application/json' });
-
     // Correct file type
     fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [makeJson('example1.json')], types: ['Files'] } });
     expect(await findByTestId('file-info')).toBeInTheDocument();
@@ -296,8 +307,7 @@ describe('<ImportTagsWizard />', () => {
     expect(getByText('example1.json')).toBeInTheDocument();
 
     // Click continue once button enabled
-    await waitFor(() => expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument());
-    continueButton = getByRole('button', { name: 'Continue' });
+    continueButton = await screen.findByRole('button', { name: 'Continue' });
     await waitFor(() => {
       expect(continueButton).not.toHaveAttribute('aria-disabled', 'true');
     });
@@ -312,38 +322,11 @@ describe('<ImportTagsWizard />', () => {
     expect(await findByTestId('populate-step')).toBeInTheDocument();
 
     // Check import button is disabled when fields not populated
-    const importButton = getByRole('button', { name: 'Import' });
-    expect(importButton).toHaveAttribute('aria-disabled', 'true');
+    expect(getByRole('button', { name: 'Import' })).toHaveAttribute('aria-disabled', 'true');
 
-    // Populate new taxonomy information
+    // Populate new taxonomy information, leaving the taxonomy type at its default.
     const newTaxonomyName = 'New Taxonomy';
-    const taxonomyNameInputEl = screen.getByLabelText('Taxonomy Name');
-    fireEvent.change(taxonomyNameInputEl, {
-      target: { value: newTaxonomyName },
-    });
-    const taxonomyDescInputEl = screen.getByLabelText('Taxonomy Description');
-    fireEvent.change(taxonomyDescInputEl, {
-      target: { value: 'New Taxonomy Description' },
-    });
-
-    // The taxonomy type dropdown is a native `<select>`, whose options are rendered as `<option>`s.
-    const taxonomyTypeSelectEl = screen.getByLabelText('Taxonomy Type');
-    expect(taxonomyTypeSelectEl).toBe(getByTestId('taxonomy-type-select'));
-    const taxonomyTypeOptions = () => within(taxonomyTypeSelectEl).getAllByRole('option');
-
-    expect(taxonomyTypeSelectEl).toHaveValue('tags');
-    expect(taxonomyTypeOptions().map((option) => option.textContent)).toEqual(['Tags', 'Competency']);
-
-    fireEvent.change(taxonomyTypeSelectEl, { target: { value: 'competency' } });
-    expect(taxonomyTypeSelectEl).toHaveValue('competency');
-
-    // Test back button
-    fireEvent.click(getByTestId('back-button'));
-    expect(getByTestId('upload-step')).toBeInTheDocument();
-    fireEvent.click(getByRole('button', { name: 'Continue' }));
-
-    expect(getByTestId('populate-step')).toBeInTheDocument();
-    expect(getByTestId('taxonomy-type-select')).toHaveValue('competency');
+    fillInRequiredFields(newTaxonomyName);
 
     if (expectedResult === 'success') {
       axiosMock.onPost(doImportNewTaxonomyUrl).replyOnce(200, {});
@@ -351,20 +334,15 @@ describe('<ImportTagsWizard />', () => {
       axiosMock.onPost(doImportNewTaxonomyUrl).replyOnce(400);
     }
 
-    await waitFor(() => {
-      expect(getByRole('button', { name: 'Import' })).not.toHaveAttribute('aria-disabled', 'true');
-    });
-
-    act(() => {
-      fireEvent.click(getByRole('button', { name: 'Import' }));
-    });
+    await clickImport();
 
     if (expectedResult === 'success') {
       // Toast message shown
       await waitFor(() => {
         expect(mockSetToastMessage).toHaveBeenCalledWith(`"${newTaxonomyName}" imported`);
       });
-      expect(axiosMock.history.post[0].data.get('taxonomy_type')).toEqual('competency');
+      // The default taxonomy type is submitted when the user never touches the dropdown.
+      expect(axiosMock.history.post[0].data.get('taxonomy_type')).toEqual(TaxonomyType.Tags);
     } else {
       // Alert message shown
       await waitFor(() => {
@@ -377,4 +355,82 @@ describe('<ImportTagsWizard />', () => {
       });
     }
   });
+
+  describe('taxonomy type dropdown', () => {
+    it('defaults to Tags and offers every taxonomy type', async () => {
+      renderWizard({ taxonomy: null, onClose: jest.fn() });
+      await goToPopulateStep();
+
+      // The dropdown is a native `<select>`, whose options are rendered as `<option>`s.
+      const select = screen.getByLabelText('Taxonomy Type');
+      expect(select).toBe(screen.getByTestId('taxonomy-type-select'));
+
+      expect(select).toHaveValue(TaxonomyType.Tags);
+      expect(within(select).getAllByRole('option').map((option) => option.textContent))
+        .toEqual(['Tags', 'Competency']);
+      expect(within(select).getAllByRole('option').map((option) => option.getAttribute('value')))
+        .toEqual(Object.values(TaxonomyType));
+    });
+
+    it('keeps the selected type when the user steps back and forward again', async () => {
+      renderWizard({ taxonomy: null, onClose: jest.fn() });
+      await goToPopulateStep();
+
+      const select = screen.getByTestId('taxonomy-type-select');
+      fireEvent.change(select, { target: { value: TaxonomyType.Competency } });
+      expect(select).toHaveValue(TaxonomyType.Competency);
+
+      fireEvent.click(screen.getByTestId('back-button'));
+      expect(screen.getByTestId('upload-step')).toBeInTheDocument();
+      fireEvent.click(screen.getByRole('button', { name: 'Continue' }));
+
+      expect(screen.getByTestId('populate-step')).toBeInTheDocument();
+      expect(screen.getByTestId('taxonomy-type-select')).toHaveValue(TaxonomyType.Competency);
+    });
+
+    it.each(Object.values(TaxonomyType))('submits the %s type to the import API', async (taxonomyType) => {
+      renderWizard({ taxonomy: null, onClose: jest.fn() });
+      await goToPopulateStep();
+
+      const newTaxonomyName = `New ${taxonomyType} Taxonomy`;
+      fillInRequiredFields(newTaxonomyName);
+      fireEvent.change(screen.getByTestId('taxonomy-type-select'), { target: { value: taxonomyType } });
+
+      axiosMock.onPost(doImportNewTaxonomyUrl).replyOnce(200, {});
+
+      await clickImport();
+
+      await waitFor(() => {
+        expect(mockSetToastMessage).toHaveBeenCalledWith(`"${newTaxonomyName}" imported`);
+      });
+
+      const formData = axiosMock.history.post[0].data;
+      expect(formData.get('taxonomy_name')).toEqual(newTaxonomyName);
+      expect(formData.get('taxonomy_type')).toEqual(taxonomyType);
+    });
+
+    it('is labelled and reachable with the keyboard', async () => {
+      const user = userEvent.setup();
+      renderWizard({ taxonomy: null, onClose: jest.fn() });
+      await goToPopulateStep();
+
+      const select = screen.getByTestId('taxonomy-type-select');
+      expect(select).toHaveAccessibleName('Taxonomy Type');
+
+      // Tabbing forward from the description field must land on the dropdown, so that a keyboard
+      // user reaches it in the same order as the fields above it.
+      screen.getByLabelText('Taxonomy Description').focus();
+      await user.tab();
+      expect(select).toHaveFocus();
+
+      // Note: we can't assert on arrowing between the options here. This is a native `<select>`, so
+      // the browser (not the page) draws and controls the option list, and jsdom implements none of
+      // that -- arrow keys, Enter and type-ahead all leave `select.value` untouched under jsdom.
+      // What the component owns, and what is asserted above and in the tests before this one, is
+      // that the control is focusable, labelled, and carries every option with the right value.
+      await user.selectOptions(select, TaxonomyType.Competency);
+      expect(select).toHaveValue(TaxonomyType.Competency);
+      expect(select).toHaveFocus();
+    });
+  });
 });
diff --git a/src/taxonomy/import-tags/messages.ts b/src/taxonomy/import-tags/messages.ts
index 2ec84b108d..ab99b48913 100644
--- a/src/taxonomy/import-tags/messages.ts
+++ b/src/taxonomy/import-tags/messages.ts
@@ -35,10 +35,14 @@ const messages = defineMessages({
       + 'be completely replaced by the contents of the imported file (e.g. if a tag in the current taxonomy is not '
       + 'present in the imported file, it will be removed - both from the taxonomy and from any tagged course '
       + 'content).',
+    description: 'Warning on the first step of the re-import wizard, explaining that the imported file replaces the '
+      + 'whole taxonomy rather than being merged into it.',
   },
   importWizardStepExportBackupSuggestion: {
     id: 'course-authoring.import-tags.wizard.step-export.backup-suggestion',
     defaultMessage: 'You may wish to export the taxonomy in its current state before importing the new file.',
+    description: 'Advice on the first step of the re-import wizard, suggesting the user export a backup of the '
+      + 'taxonomy before replacing it.',
   },
   importWizardStepExportCSVButton: {
     id: 'course-authoring.import-tags.wizard.step-export.button-csv',
@@ -62,15 +66,20 @@ const messages = defineMessages({
       + '(for CSV files), or any text editor (for JSON files) to create the file that you wish to import. '
       + 'For an example of the required format, download the <csvLink>{csvTemplateTitle}</csvLink> or '
       + '<jsonLink>{jsonTemplateTitle}</jsonLink>.',
+    description: 'Explains which file formats can be used to create a new taxonomy. The link text comes from the "CSV '
+      + 'template" and "JSON template" messages.',
   },
   importWizardStepReuploadFormatInfo: {
     id: 'course-authoring.import-tags.wizard.step-reupload.format-info',
     defaultMessage: 'You may use any spreadsheet tool (for CSV files), or any text editor (for JSON files) to create '
       + 'the file that you wish to import.',
+    description: 'Explains which tools can be used to prepare the file when re-importing tags into an existing '
+      + 'taxonomy.',
   },
   importWizardStepUploadDropInstruction: {
     id: 'course-authoring.import-tags.wizard.step-upload.drop-instruction',
     defaultMessage: 'Once the file is ready to be imported, drag and drop it into the box below, or click to upload.',
+    description: 'Instruction above the drag-and-drop area of the upload step.',
   },
   csvTemplateTitle: {
     id: 'course-authoring.import-tags.wizard.step-upload.csv-template',
@@ -95,14 +104,17 @@ const messages = defineMessages({
   importWizardStepPopulateTaxonomyType: {
     id: 'course-authoring.import-tags.wizard.step-populate.type',
     defaultMessage: 'Taxonomy Type',
+    description: 'Label for the dropdown where the user selects the type of taxonomy being imported.',
   },
   importWizardStepPopulateTaxonomyTypeTags: {
     id: 'course-authoring.import-tags.wizard.step-populate.type.tags',
     defaultMessage: 'Tags',
+    description: 'Option in the Taxonomy Type dropdown for a standard tag taxonomy.',
   },
   importWizardStepPopulateTaxonomyTypeCompetency: {
     id: 'course-authoring.import-tags.wizard.step-populate.type.competency',
     defaultMessage: 'Competency',
+    description: 'Option in the Taxonomy Type dropdown for a competency taxonomy.',
   },
   importWizardStepPlanTitle: {
     id: 'course-authoring.import-tags.wizard.step-plan.title',
@@ -112,10 +124,13 @@ const messages = defineMessages({
     id: 'course-authoring.import-tags.wizard.step-plan.summary',
     defaultMessage: 'Importing this file will make {changeCount} updates to the existing taxonomy. '
       + 'The content of the imported file will replace any existing values that do not match the new values.',
+    description: 'Summary at the top of the wizard step that previews an import. {changeCount} is the number of '
+      + 'changes the import will make.',
   },
   importWizardStepPlanListLabel: {
     id: 'course-authoring.import-tags.wizard.step-plan.list-label',
     defaultMessage: 'Importing this file will cause the following updates:',
+    description: 'Introduces the list of individual changes an import will make, shown on the preview step.',
   },
   importWizardStepPlanNoChanges: {
     id: 'course-authoring.import-tags.wizard.step-plan.no-changes',
@@ -129,10 +144,13 @@ const messages = defineMessages({
     id: 'course-authoring.import-tags.wizard.step-confirm.warning',
     defaultMessage: 'Warning! You are about to make {changeCount} changes to the existing taxonomy. Any tags applied '
       + 'to course content will be updated or removed. This cannot be undone.',
+    description: 'Warning on the final confirmation step, shown before the import is applied. {changeCount} is the '
+      + 'number of changes the import will make.',
   },
   importWizardStepConfirmQuestion: {
     id: 'course-authoring.import-tags.wizard.step-confirm.question',
     defaultMessage: 'Are you sure you want to continue importing this file?',
+    description: 'Question on the final confirmation step, asking the user to confirm the import.',
   },
   promptTaxonomyName: {
     id: 'course-authoring.import-tags.prompt.taxonomy-name',
diff --git a/src/taxonomy/import-tags/steps/constants.ts b/src/taxonomy/import-tags/steps/constants.ts
index 5eb4451ce8..de6ce7d128 100644
--- a/src/taxonomy/import-tags/steps/constants.ts
+++ b/src/taxonomy/import-tags/steps/constants.ts
@@ -3,6 +3,11 @@ import messages from '../messages';
 
 /**
  * The taxonomy types a user can pick when importing a taxonomy.
+ *
+ * A `Tags` taxonomy is just a way to label content: its tags carry no rules for demonstrating
+ * mastery of what they describe. A `Competency` taxonomy is a taxonomy of skills, and choosing it
+ * enables the Competency Management page, where the rules used to demonstrate mastery of those
+ * skills are configured.
  */
 export const TAXONOMY_TYPE_OPTIONS = [
   {