feat: add download taxonomy template button

open-craft · Nov 1, 2023 · f8cfcb8 · f8cfcb8
1 parent df8432d
commit f8cfcb8
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 11 deletions.
diff --git a/src/taxonomy/TaxonomyListPage.jsx b/src/taxonomy/TaxonomyListPage.jsx
@@ -1,18 +1,58 @@
 import React from 'react';
 import {
+  Button,
   CardView,
   Container,
   DataTable,
+  Dropdown,
+  DropdownButton,
+  OverlayTrigger,
   Spinner,
+  Tooltip,
 } from '@edx/paragon';
+import {
+  Add,
+} from '@edx/paragon/icons';
 import { StudioFooter } from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import Header from '../header';
 import SubHeader from '../generic/sub-header/SubHeader';
+import { downloadTaxonomyTemplate } from './data/thunks';
 import messages from './messages';
 import TaxonomyCard from './taxonomy-card';
 import { useTaxonomyListDataResponse, useIsTaxonomyListDataLoaded } from './hooks';
 
+const TaxonomyListHeaderButtons = () => {
+  const intl = useIntl();
+  return (
+    <>
+      <OverlayTrigger
+        placement="top"
+        overlay={(
+          <Tooltip>
+            {intl.formatMessage(messages.downloadTemplateButtonHint)}
+          </Tooltip>
+        )}
+      >
+        <DropdownButton
+          variant="outline-primary"
+          title={intl.formatMessage(messages.downloadTemplateButtonLabel)}
+        >
+          <Dropdown.Item onClick={() => downloadTaxonomyTemplate('csv')}>
+            {intl.formatMessage(messages.downloadTemplateButtonCSVLabel)}
+          </Dropdown.Item>
+          <Dropdown.Item onClick={() => downloadTaxonomyTemplate('json')}>
+            {intl.formatMessage(messages.downloadTemplateButtonJSONLabel)}
+          </Dropdown.Item>
+        </DropdownButton>
+      </OverlayTrigger>
+      <Button iconBefore={Add} disabled>
+        {intl.formatMessage(messages.importButtonLabel)}
+      </Button>
+    </>
+  );
+};
+
 const TaxonomyListPage = () => {
   const intl = useIntl();
   const useTaxonomyListData = () => {
@@ -23,12 +63,6 @@ const TaxonomyListPage = () => {
 
   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
@@ -50,7 +84,7 @@ const TaxonomyListPage = () => {
           <SubHeader
             title={intl.formatMessage(messages.headerTitle)}
             titleActions={getOrgSelect()}
-            headerActions={getHeaderButtons()}
+            headerActions={<TaxonomyListHeaderButtons />}
             hideBorder
           />
         </Container>

diff --git a/src/taxonomy/data/api.js b/src/taxonomy/data/api.js
@@ -8,6 +8,10 @@ export const getExportTaxonomyApiUrl = (pk, format) => new URL(
   `api/content_tagging/v1/taxonomies/${pk}/export/?output_format=${format}&download=1`,
   getApiBaseUrl(),
 ).href;
+const getTaxonomyTemplateApiUrl = (format) => new URL(
+  `api/content_tagging/v1/taxonomies/import/template.${format}`,
+  getApiBaseUrl(),
+).href;
 
 /**
  * Get list of taxonomies.
@@ -27,3 +31,12 @@ export async function getTaxonomyListData() {
 export function getTaxonomyExportFile(pk, format) {
   window.location.href = getExportTaxonomyApiUrl(pk, format);
 }
+
+/**
+ * Downloads the template file for import taxonomies
+ * @param {('json'|'csv')} format
+ * @returns {void}
+ */
+export function getTaxonomyTemplateFile(format) {
+  window.location.href = getTaxonomyTemplateApiUrl(format);
+}
diff --git a/src/taxonomy/data/thunks.js b/src/taxonomy/data/thunks.js
@@ -1,14 +1,21 @@
 // @ts-check
-import { getTaxonomyExportFile } from './api';
+import { getTaxonomyExportFile, getTaxonomyTemplateFile } from './api';
 
 /**
  * Downloads the file of the exported taxonomy
  * @param {number} pk
  * @param {string} format
  * @returns {void}
  */
-const exportTaxonomy = (pk, format) => (
+export const exportTaxonomy = (pk, format) => (
   getTaxonomyExportFile(pk, format)
 );
 
-export default exportTaxonomy;
+/**
+ * Downloads the template file for import taxonomies
+ * @param {('json'|'csv')} format
+ * @returns {void}
+ */
+export const downloadTaxonomyTemplate = (format) => (
+  getTaxonomyTemplateFile(format)
+);
diff --git a/src/taxonomy/export-modal/index.jsx b/src/taxonomy/export-modal/index.jsx
@@ -8,7 +8,7 @@ import {
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
-import exportTaxonomy from '../data/thunks';
+import { exportTaxonomy } from '../data/thunks';
 
 const ExportModal = ({
   taxonomyId,

diff --git 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',