diff --git a/src/taxonomy/TaxonomyListPage.jsx b/src/taxonomy/TaxonomyListPage.jsx
index 5d73ef6644..4cd187c2c5 100644
--- a/src/taxonomy/TaxonomyListPage.jsx
+++ b/src/taxonomy/TaxonomyListPage.jsx
@@ -1,18 +1,59 @@
import React from 'react';
import {
+ Button,
CardView,
Container,
DataTable,
+ Dropdown,
+ DropdownButton,
+ OverlayTrigger,
Spinner,
+ Tooltip,
} from '@edx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+ Add,
+} from '@edx/paragon/icons';
+import { injectIntl, intlShape, useIntl } from '@edx/frontend-platform/i18n';
import { StudioFooter } from '@edx/frontend-component-footer';
+
+import { getTaxonomyTemplateFile } from './data/api';
import Header from '../header';
import SubHeader from '../generic/sub-header/SubHeader';
import messages from './messages';
import TaxonomyCard from './TaxonomyCard';
import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './api/hooks/selectors';
+const TaxonomyListHeaderButtons = () => {
+ const intl = useIntl();
+ return (
+ <>
+
+ {intl.formatMessage(messages.downloadTemplateButtonHint)}
+
+ )}
+ >
+
+ getTaxonomyTemplateFile('csv')}>
+ {intl.formatMessage(messages.downloadTemplateButtonCSVLabel)}
+
+ getTaxonomyTemplateFile('json')}>
+ {intl.formatMessage(messages.downloadTemplateButtonJSONLabel)}
+
+
+
+
+ >
+ );
+};
+
const TaxonomyListPage = ({ intl }) => {
const useTaxonomyListData = () => {
const taxonomyListData = useTaxonomyListDataResponse();
@@ -22,12 +63,6 @@ const TaxonomyListPage = ({ intl }) => {
const { taxonomyListData, isLoaded } = useTaxonomyListData();
- const getHeaderButtons = () => (
- // Download template and import buttons.
- // TODO Add functionality to this buttons.
- undefined
- );
-
const getOrgSelect = () => (
// Organization select component
// TODO Add functionality to this component
@@ -49,7 +84,7 @@ const TaxonomyListPage = ({ intl }) => {
}
hideBorder
/>
diff --git a/src/taxonomy/data/api.js b/src/taxonomy/data/api.js
new file mode 100644
index 0000000000..bfa6d64379
--- /dev/null
+++ b/src/taxonomy/data/api.js
@@ -0,0 +1,17 @@
+// @ts-check
+import { getConfig } from '@edx/frontend-platform';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+const getTaxonomyTemplateApiUrl = (format) => new URL(
+ `api/content_tagging/v1/taxonomies/import/template.${format}`,
+ getApiBaseUrl(),
+).href;
+
+/**
+ * Downloads the template file for import taxonomies
+ * @param {('json'|'csv')} format
+ * @returns {void}
+ */
+export function getTaxonomyTemplateFile(format) { // eslint-disable-line import/prefer-default-export
+ window.location.href = getTaxonomyTemplateApiUrl(format);
+}
diff --git a/src/taxonomy/messages.js b/src/taxonomy/messages.js
index a15d762838..97fa0ec41c 100644
--- a/src/taxonomy/messages.js
+++ b/src/taxonomy/messages.js
@@ -9,6 +9,18 @@ const messages = defineMessages({
id: 'course-authoring.taxonomy-list.button.download-template.label',
defaultMessage: 'Download template',
},
+ downloadTemplateButtonCSVLabel: {
+ id: 'course-authoring.taxonomy-list.button.download-template.csv.label',
+ defaultMessage: 'CSV template',
+ },
+ downloadTemplateButtonJSONLabel: {
+ id: 'course-authoring.taxonomy-list.button.download-template.json.label',
+ defaultMessage: 'JSON template',
+ },
+ downloadTemplateButtonHint: {
+ id: 'course-authoring.taxonomy-list.butotn.download-template.hint',
+ defaultMessage: 'Download example taxonomy',
+ },
importButtonLabel: {
id: 'course-authoring.taxonomy-list.button.import.label',
defaultMessage: 'Import',