feat: Search Content Tags (#737)

This change adds the ability to search content tags in the content tags
drawer, in order to filter tags. This change also refactors the way data
is loaded from the server, handling pre-loaded data and pagination.

src/taxonomy/data/types.mjs

@@ -5,10 +5,11 @@
  * @property {number} id
  * @property {string} name
  * @property {boolean} enabled
- * @property {boolean} allow_multiple
- * @property {boolean} allow_free_text
- * @property {boolean} system_defined
- * @property {boolean} visible_to_authors
+ * @property {boolean} allowMultiple
+ * @property {boolean} allowFreeText
+ * @property {boolean} systemDefined
+ * @property {boolean} visibleToAuthors
+ * @property {string[]} orgs
  */
 
 /**
@@ -16,10 +17,9 @@
  * @property {string} next
  * @property {string} previous
  * @property {number} count
- * @property {number} num_pages
- * @property {number} current_page
+ * @property {number} numPages
+ * @property {number} currentPage
  * @property {number} start
  * @property {function} refetch
  * @property {TaxonomyData[]} results
  */
-

src/taxonomy/tag-list/data/api.js

@@ -1,4 +1,9 @@
 // @ts-check
+
+// TODO: this file needs to be merged into src/taxonomy/data/api.js
+// We are creating a mess with so many different /data/[api|types].js files in subfolders.
+// There is only one tagging/taxonomy API, and it should be implemented via a single types.mjs and api.js file.
+
 import { useQuery } from '@tanstack/react-query';
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
@@ -9,7 +14,6 @@ const getTagListApiUrl = (taxonomyId, page) => new URL(
   getApiBaseUrl(),
 ).href;
 
-// ToDo: fix types
 /**
  * @param {number} taxonomyId
  * @param {import('./types.mjs').QueryOptions} options

src/taxonomy/tag-list/data/types.mjs

@@ -1,10 +1,15 @@
 // @ts-check
 
+// TODO: this file needs to be merged into src/taxonomy/data/types.mjs
+// We are creating a mess with so many different /data/[api|types].js files in subfolders.
+// There is only one tagging/taxonomy API, and it should be implemented via a single types.mjs and api.js file.
+
 /**
  * @typedef {Object} QueryOptions
  * @property {number} pageIndex
  */
 
+// FIXME: this should be renamed to TagData
 /**
  * @typedef {Object} TagListData
  * @property {number} childCount
@@ -13,9 +18,12 @@
  * @property {number} id
  * @property {string | null} parentValue
  * @property {string | null} subTagsUrl
- * @property {string} value
+ * @property {string} value Unique ID for this tag, also its display text
+ * @property {number?} usageCount
+ * @property {string?} _id Database ID. Don't rely on this, as it is not present for free-text tags.
  */
 
+// FIXME: this should be renamed to TagListData
 /**
  * @typedef {Object} TagData
  * @property {number} count

src/taxonomy/taxonomy-detail/data/api.js

@@ -1,4 +1,9 @@
 // @ts-check
+
+// TODO: this file needs to be merged into src/taxonomy/data/api.js
+// We are creating a mess with so many different /data/[api|types].js files in subfolders.
+// There is only one tagging/taxonomy API, and it should be implemented via a single types.mjs and api.js file.
+
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { useQuery } from '@tanstack/react-query';
@@ -11,7 +16,7 @@ const getTaxonomyDetailApiUrl = (taxonomyId) => new URL(
 
 /**
  * @param {number} taxonomyId
- * @returns {import('@tanstack/react-query').UseQueryResult<import('./types.mjs').TaxonomyData>}
+ * @returns {import('@tanstack/react-query').UseQueryResult<import('../../data/types.mjs').TaxonomyData>}
  */ // eslint-disable-next-line import/prefer-default-export
 export const useTaxonomyDetailData = (taxonomyId) => (
   useQuery({

src/taxonomy/taxonomy-detail/data/apiHooks.jsx

@@ -24,7 +24,7 @@ export const useTaxonomyDetailDataStatus = (taxonomyId) => {
 
 /**
  * @param {number} taxonomyId
- * @returns {import("./types.mjs").TaxonomyData | undefined}
+ * @returns {import("../../data/types.mjs").TaxonomyData | undefined}
  */
 export const useTaxonomyDetailDataResponse = (taxonomyId) => {
   const { isSuccess, data } = useTaxonomyDetailData(taxonomyId);

src/taxonomy/taxonomy-detail/data/types.mjs

@@ -1,19 +0,0 @@
-// @ts-check
-
-/**
- * @typedef {Object} TaxonomyData
- * @property {number} id
- * @property {string} name
- * @property {boolean} enabled
- * @property {boolean} allowMultiple
- * @property {boolean} allowFreeText
- * @property {boolean} systemDefined
- * @property {boolean} visibleToAuthors
- * @property {string[]} orgs
- */
-
-/**
- * @typedef {Object} UseQueryResult
- * @property {Object} data
- * @property {string} status
- */