feat: Taxonomy export menu [FC-0036] (#645)

* feat: System-defined tooltip added
* feat: Taxonomy card menu added. Export menu item added
* feat: Modal for export taxonomy
* feat: Connect with export API
* test: Tests for API and selectors
* feat: Use windows.location.href to call the export endpoint
* test: ExportModal.test added
* style: Delete unnecessary code
* docs: README updated with taxonomy feature
* style: TaxonomyCard updated to a better code style
* style: injectIntl replaced by useIntl on taxonomy pages and components
* refactor: Move and rename taxonomy UI components to match 0002 ADR
* refactor: Move api to data to match with 0002 ADR
* test: Refactor ExportModal tests
* chore: Fix validations
* chore: Lint
* refactor: Moving hooks to apiHooks
* style: Nit on return null

---------

Co-authored-by: Rômulo Penido <romulo@dash.dev.br>
Co-authored-by: Christofer Chavez <christofer@example.com>

src/taxonomy/export-modal/index.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import {
+  ActionRow,
+  Button,
+  Form,
+  ModalDialog,
+} from '@edx/paragon';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import { getTaxonomyExportFile } from '../data/api';
+
+const ExportModal = ({
+  taxonomyId,
+  isOpen,
+  onClose,
+}) => {
+  const intl = useIntl();
+  const [outputFormat, setOutputFormat] = useState('csv');
+
+  const onClickExport = () => {
+    onClose();
+    getTaxonomyExportFile(taxonomyId, outputFormat);
+  };
+
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages.exportModalTitle)}
+      isOpen={isOpen}
+      onClose={onClose}
+      size="lg"
+      hasCloseButton
+      isFullscreenOnMobile
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {intl.formatMessage(messages.exportModalTitle)}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="pb-5 mt-2">
+        <Form.Group>
+          <Form.Label>
+            {intl.formatMessage(messages.exportModalBodyDescription)}
+          </Form.Label>
+          <Form.RadioSet
+            name="export-format"
+            value={outputFormat}
+            onChange={(e) => setOutputFormat(e.target.value)}
+          >
+            <Form.Radio
+              key={`export-csv-format-${taxonomyId}`}
+              value="csv"
+            >
+              {intl.formatMessage(messages.taxonomyCSVFormat)}
+            </Form.Radio>
+            <Form.Radio
+              key={`export-json-format-${taxonomyId}`}
+              value="json"
+            >
+              {intl.formatMessage(messages.taxonomyJSONFormat)}
+            </Form.Radio>
+          </Form.RadioSet>
+        </Form.Group>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {intl.formatMessage(messages.taxonomyModalsCancelLabel)}
+          </ModalDialog.CloseButton>
+          <Button variant="primary" onClick={onClickExport}>
+            {intl.formatMessage(messages.exportModalSubmitButtonLabel)}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+ExportModal.propTypes = {
+  taxonomyId: PropTypes.number.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ExportModal;

src/taxonomy/export-modal/messages.js

@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  exportModalTitle: {
+    id: 'course-authoring.taxonomy-list.modal.export.title',
+    defaultMessage: 'Select format to export',
+  },
+  exportModalBodyDescription: {
+    id: 'course-authoring.taxonomy-list.modal.export.body',
+    defaultMessage: 'Select the file format in which you would like the taxonomy to be exported:',
+  },
+  exportModalSubmitButtonLabel: {
+    id: 'course-authoring.taxonomy-list.modal.export.submit.label',
+    defaultMessage: 'Export',
+  },
+  taxonomyCSVFormat: {
+    id: 'course-authoring.taxonomy-list.csv-format',
+    defaultMessage: 'CSV file',
+  },
+  taxonomyJSONFormat: {
+    id: 'course-authoring.taxonomy-list.json-format',
+    defaultMessage: 'JSON file',
+  },
+  taxonomyModalsCancelLabel: {
+    id: 'course-authoring.taxonomy-list.modal.cancel',
+    defaultMessage: 'Cancel',
+  },
+});
+
+export default messages;