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