feat: assign taxonomy to organizations [FC-0036] (#760)

This PR adds a UI to assign organizations to a Taxonomy.

Co-authored-by: Jillian <[email protected]>

src/taxonomy/TaxonomyListPage.jsx

@@ -17,6 +17,7 @@ import {
   Check,
 } from '@edx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
+
 import { Helmet } from 'react-helmet';
 
 import { useOrganizationListData } from '../generic/data/apiHooks';

src/taxonomy/TaxonomyListPage.test.jsx

@@ -47,9 +47,7 @@ const RootWrapper = () => (
     <IntlProvider locale="en" messages={{}}>
       <QueryClientProvider client={queryClient}>
         <TaxonomyContext.Provider value={context}>
-          <QueryClientProvider client={queryClient}>
-            <TaxonomyListPage intl={injectIntl} />
-          </QueryClientProvider>
+          <TaxonomyListPage intl={injectIntl} />
         </TaxonomyContext.Provider>
       </QueryClientProvider>
     </IntlProvider>
@@ -71,6 +69,10 @@ describe('<TaxonomyListPage />', () => {
     axiosMock.onGet(organizationsListUrl).reply(200, organizations);
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should render page and page title correctly', () => {
     const { getByText } = render(<RootWrapper />);
     expect(getByText('Taxonomies')).toBeInTheDocument();
@@ -134,7 +136,11 @@ describe('<TaxonomyListPage />', () => {
   it('should show all "All taxonomies", "Unassigned" and org names in taxonomy org filter', async () => {
     useIsTaxonomyListDataLoaded.mockReturnValue(true);
     useTaxonomyListDataResponse.mockReturnValue({
-      results: taxonomies,
+      results: [{
+        id: 1,
+        name: 'Taxonomy',
+        description: 'This is a description',
+      }],
     });
 
     const {

src/taxonomy/data/api.js

@@ -22,10 +22,17 @@ export const getExportTaxonomyApiUrl = (pk, format) => new URL(
   `api/content_tagging/v1/taxonomies/${pk}/export/?output_format=${format}&download=1`,
   getApiBaseUrl(),
 ).href;
+
 export const getTaxonomyTemplateApiUrl = (format) => new URL(
   `api/content_tagging/v1/taxonomies/import/template.${format}`,
   getApiBaseUrl(),
 ).href;
+
+/**
+  * Get the URL for a Taxonomy
+  * @param {number} pk
+  * @returns {string}
+  */
 export const getTaxonomyApiUrl = (pk) => new URL(`api/content_tagging/v1/taxonomies/${pk}/`, getApiBaseUrl()).href;
 
 /**
@@ -47,6 +54,15 @@ export async function deleteTaxonomy(pk) {
   await getAuthenticatedHttpClient().delete(getTaxonomyApiUrl(pk));
 }
 
+/** Get a Taxonomy
+  * @param {number} pk
+  * @returns {Promise<import("./types.mjs").TaxonomyData>}
+  */
+export async function getTaxonomy(pk) {
+  const { data } = await getAuthenticatedHttpClient().get(getTaxonomyApiUrl(pk));
+  return camelCaseObject(data);
+}
+
 /**
  * Downloads the file of the exported taxonomy
  * @param {number} pk

src/taxonomy/data/api.test.js

@@ -10,6 +10,7 @@ import {
   getTaxonomyListApiUrl,
   getTaxonomyListData,
   getTaxonomyApiUrl,
+  getTaxonomy,
   deleteTaxonomy,
 } from './api';
 
@@ -65,6 +66,13 @@ describe('taxonomy api calls', () => {
     expect(axiosMock.history.delete[0].url).toEqual(getTaxonomyApiUrl());
   });
 
+  it('should call get taxonomy', async () => {
+    axiosMock.onGet(getTaxonomyApiUrl(1)).reply(200);
+    await getTaxonomy(1);
+
+    expect(axiosMock.history.get[0].url).toEqual(getTaxonomyApiUrl(1));
+  });
+
   it('Export should set window.location.href correctly', () => {
     const pk = 1;
     const format = 'json';

src/taxonomy/data/apiHooks.jsx

@@ -12,7 +12,7 @@
  *   Ex. useTaxonomyListDataResponse & useIsTaxonomyListDataLoaded.
  */
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { getTaxonomyListData, deleteTaxonomy } from './api';
+import { getTaxonomyListData, deleteTaxonomy, getTaxonomy } from './api';
 
 /**
  * Builds the query to get the taxonomy list
@@ -41,6 +41,16 @@ export const useDeleteTaxonomy = () => {
   return mutate;
 };
 
+/** Builds the query to get the taxonomy detail
+  * @param {number} taxonomyId
+  */
+const useTaxonomyDetailData = (taxonomyId) => (
+  useQuery({
+    queryKey: ['taxonomyDetail', taxonomyId],
+    queryFn: async () => getTaxonomy(taxonomyId),
+  })
+);
+
 /**
  * Gets the taxonomy list data
  * @param {string} org Optional organization query param
@@ -62,3 +72,35 @@ export const useTaxonomyListDataResponse = (org) => {
 export const useIsTaxonomyListDataLoaded = (org) => (
   useTaxonomyListData(org).status === 'success'
 );
+
+/**
+ * @param {number} taxonomyId
+ * @returns {Pick<import('@tanstack/react-query').UseQueryResult, "error" | "isError" | "isFetched" | "isSuccess">}
+ */
+export const useTaxonomyDetailDataStatus = (taxonomyId) => {
+  const {
+    isError,
+    error,
+    isFetched,
+    isSuccess,
+  } = useTaxonomyDetailData(taxonomyId);
+  return {
+    isError,
+    error,
+    isFetched,
+    isSuccess,
+  };
+};
+
+/**
+ * @param {number} taxonomyId
+ * @returns {import("./types.mjs").TaxonomyData | undefined}
+ */
+export const useTaxonomyDetailDataResponse = (taxonomyId) => {
+  const { isSuccess, data } = useTaxonomyDetailData(taxonomyId);
+  if (isSuccess) {
+    return data;
+  }
+
+  return undefined;
+};

src/taxonomy/data/apiHooks.test.jsx

@@ -1,5 +1,6 @@
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { act } from '@testing-library/react';
+
 import {
   useTaxonomyListDataResponse,
   useIsTaxonomyListDataLoaded,

src/taxonomy/data/types.mjs

@@ -12,6 +12,7 @@
  * @property {boolean} visibleToAuthors
  * @property {number} tagsCount
  * @property {string[]} orgs
+ * @property {boolean} allOrgs
  */
 
 /**