feat: add taxonomy detail page

src/index.jsx

@@ -22,7 +22,7 @@ import CourseAuthoringRoutes from './CourseAuthoringRoutes';
 import Head from './head/Head';
 import { StudioHome } from './studio-home';
 import CourseRerun from './course-rerun';
-import { TaxonomyListPage } from './taxonomy';
+import { TaxonomyDetailPage, TaxonomyListPage } from './taxonomy';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import './index.scss';
@@ -71,12 +71,22 @@ const App = () => {
             }}
           />
           {process.env.ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
-            <Route
-              path="/taxonomy-list"
-            >
-              <TaxonomyListPage />
-            </Route>
+            <>
+              <Route exact path="/taxonomy-list/" component={TaxonomyListPage} />
+              <Route
+                path="/taxonomy-list/:taxonomyId"
+                render={({ match }) => {
+                  const { params: { taxonomyId } } = match;
+                  return (
+                    <TaxonomyDetailPage taxonomyId={Number(taxonomyId)} />
+                  );
+                }}
+              />
+            </>
           )}
+          <Route>
+            No match (404)
+          </Route>
         </Switch>
       </QueryClientProvider>
     </AppProvider>

src/taxonomy/api/hooks/api.js

@@ -5,8 +5,15 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
 const getTaxonomyListApiUrl = () => new URL('api/content_tagging/v1/taxonomies/?enabled=true', getApiBaseUrl()).href;
-export const getExportTaxonomyApiUrl = (pk, format) => new URL(
+const getExportTaxonomyApiUrl = (pk, format) => new URL(
   `api/content_tagging/v1/taxonomies/${pk}/export/?output_format=${format}&download=1`,
+).href;
+const getTaxonomyDetailApiUrl = (taxonomyId) => new URL(
+  `api/content_tagging/v1/taxonomies/${taxonomyId}/`,
+  getApiBaseUrl(),
+).href;
+const getTagListApiUrl = (taxonomyId) => new URL(
+  `api/content_tagging/v1/taxonomies/${taxonomyId}/tags/`,
   getApiBaseUrl(),
 ).href;
 
@@ -24,3 +31,29 @@ export const useTaxonomyListData = () => (
 export const exportTaxonomy = (pk, format) => {
   window.location.href = getExportTaxonomyApiUrl(pk, format);
 };
+
+/**
+ * @param {number} taxonomyId
+ * @returns {import('@tanstack/react-query').UseQueryResult<import('../types.mjs').TaxonomyData>}
+ */
+export const useTaxonomyDetailData = (taxonomyId) => (
+  useQuery({
+    queryKey: ['taxonomyList', taxonomyId],
+    queryFn: () => getAuthenticatedHttpClient().get(getTaxonomyDetailApiUrl(taxonomyId))
+      .then(camelCaseObject)
+      .then((response) => response.data),
+  })
+);
+
+/**
+ * @param {number} taxonomyId
+ * @returns {import('@tanstack/react-query').UseQueryResult<import('../types.mjs').TaxonomyData>}
+ */
+export const useTagListData = (taxonomyId) => (
+  useQuery({
+    queryKey: ['tagList', taxonomyId],
+    queryFn: () => getAuthenticatedHttpClient().get(getTagListApiUrl(taxonomyId))
+      .then(camelCaseObject)
+      .then((response) => response.data),
+  })
+);

src/taxonomy/api/hooks/selectors.js

@@ -1,6 +1,8 @@
 // @ts-check
 import {
+  useTaxonomyDetailData,
   useTaxonomyListData,
+  useTagListData,
   exportTaxonomy,
 } from './api';
 
@@ -25,3 +27,67 @@ export const useIsTaxonomyListDataLoaded = () => (
 export const callExportTaxonomy = (pk, format) => (
   exportTaxonomy(pk, format)
 );
+
+/**
+ * @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;
+};
+
+/**
+ * @param {number} taxonomyId
+ * @returns {Pick<import('@tanstack/react-query').UseQueryResult, "error" | "isError" | "isFetched" | "isSuccess">}
+ */
+export const useTagListDataStatus = (taxonomyId) => {
+  const {
+    isError,
+    error,
+    isFetched,
+    isSuccess,
+  } = useTagListData(taxonomyId);
+  return {
+    isError,
+    error,
+    isFetched,
+    isSuccess,
+  };
+};
+
+/**
+ * @param {number} taxonomyId
+ * @returns {import("../types.mjs").TaxonomyData | undefined}
+ */
+export const useTagListDataResponse = (taxonomyId) => {
+  const { isSuccess, data } = useTagListData(taxonomyId);
+  if (isSuccess) {
+    return data;
+  }
+
+  return undefined;
+};

src/taxonomy/index.js

@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as TaxonomyListPage } from './TaxonomyListPage';
+export { default as TaxonomyDetailPage } from './taxonomy-detail/TaxonomyDetailPage';

src/taxonomy/taxonomy-card/TaxonomyCard.jsx

@@ -7,6 +7,8 @@ import {
 } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
 import classNames from 'classnames';
 import messages from '../messages';
 import TaxonomyCardMenu from './TaxonomyCardMenu';
@@ -101,7 +103,8 @@ const TaxonomyCard = ({ className, original, intl }) => {
 
   return (
     <>
-      <Card className={classNames('taxonomy-card', className)} data-testid={`taxonomy-card-${id}`}>
+      <Card isClickable className={classNames('taxonomy-card', className)} data-testid={`taxonomy-card-${id}`}>
+        <Link className="stretched-link" to={`taxonomy-list/${id}`} aria-label="view taxonomy details" />
         <Card.Header
           title={name}
           subtitle={getHeaderSubtitle()}

src/taxonomy/taxonomy-card/TaxonomyCard.scss

@@ -30,6 +30,11 @@
     white-space: nowrap;
   }
 
+  .pgn__card-header-actions, .badge {
+    z-index: 100; 
+    position: relative;
+  }
+
   .taxonomy-menu-item:focus {
     /**
      * There is a bug in the menu that auto focus the first item.

src/taxonomy/taxonomy-card/TaxonomyCardMenu.jsx

@@ -25,6 +25,7 @@ const TaxonomyCardMenu = ({
   return (
     <>
       <IconButton
+        className="streched-link"
         variant="primary"
         onClick={() => setMenuIsOpen(true)}
         ref={setMenuTarget}

src/taxonomy/taxonomy-detail/TagListTable.jsx

@@ -0,0 +1,50 @@
+import {
+  DataTable,
+  TextFilter,
+} from '@edx/paragon';
+import Proptypes from 'prop-types';
+
+import { useTagListDataResponse, useTagListDataStatus } from '../api/hooks/selectors';
+
+const TagListTable = ({ taxonomyId }) => {
+  const useTagListData = () => {
+    const { isError, isFetched } = useTagListDataStatus(taxonomyId);
+    const tagList = useTagListDataResponse(taxonomyId);
+    return { isError, isFetched, tagList };
+  };
+
+  const { isError, isFetched, tagList } = useTagListData(taxonomyId);
+
+  if (!tagList || !tagList.results) {
+    if (tagList)
+      return JSON.stringify(tagList);
+
+    return 'Loading...';
+  }
+
+  return (
+    <DataTable
+      isFilterable
+      isSortable
+      defaultColumnValues={{ Filter: TextFilter }}
+      data={tagList.results}
+      columns={[
+        {
+          Header: 'Name',
+          accessor: 'name',
+        },
+      ]}
+    >
+      <DataTable.TableControlBar />
+      <DataTable.Table />
+      <DataTable.EmptyTable content="No results found" />
+      <DataTable.TableFooter />
+    </DataTable>
+  );
+};
+
+TagListTable.propTypes = {
+  taxonomyId: Proptypes.number.isRequired,
+};
+
+export default TagListTable;

src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import {
+  Container,
+  Layout,
+} from '@edx/paragon';
+import Proptypes from 'prop-types';
+
+import PermissionDeniedAlert from '../../generic/PermissionDeniedAlert';
+import Loading from '../../generic/Loading';
+import Header from '../../header';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
+import TagListTable from './TagListTable';
+import ExportModal from '../modals/ExportModal';
+import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from '../api/hooks/selectors';
+
+const TaxonomyDetailContent = ({ taxonomyId }) => {
+  const useTaxonomyDetailData = () => {
+    const { isError, isFetched } = useTaxonomyDetailDataStatus(taxonomyId);
+    const taxonomy = useTaxonomyDetailDataResponse(taxonomyId);
+    return { isError, isFetched, taxonomy };
+  };
+
+  const { isError, isFetched, taxonomy } = useTaxonomyDetailData(taxonomyId);
+
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+
+  if (isError) {
+    return (
+      <PermissionDeniedAlert />
+    );
+  }
+
+  if (!isFetched) {
+    return (
+      <Loading />
+    );
+  }
+
+  const renderModals = () => (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {isExportModalOpen && (
+        <ExportModal
+          isOpen={isExportModalOpen}
+          onClose={() => setIsExportModalOpen(false)}
+          taxonomyId={taxonomyId}
+          taxonomyName={taxonomy.name}
+        />
+      )}
+    </>
+  );
+
+  if (taxonomy) {
+    return (
+      <>
+        <div className="pt-4.5 pr-4.5 pl-4.5 pb-2 bg-light-100 box-shadow-down-2">
+          <Container size="xl">
+            <SubHeader
+              title={taxonomy.name}
+              hideBorder
+            />
+          </Container>
+        </div>
+        <div className="bg-light-400 m-4">
+          <Container size="xl">
+            <Layout
+              lg={[{ span: 9 }, { span: 3 }]}
+              md={[{ span: 9 }, { span: 3 }]}
+              sm={[{ span: 9 }, { span: 3 }]}
+              xs={[{ span: 9 }, { span: 3 }]}
+              xl={[{ span: 9 }, { span: 3 }]}
+            >
+              <Layout.Element>
+                <TagListTable taxonomyId={taxonomyId} />
+              </Layout.Element>
+              <Layout.Element>
+                <TaxonomyDetailSideCard taxonomy={taxonomy} />
+              </Layout.Element>
+            </Layout>
+          </Container>
+        </div>
+        {renderModals()}
+      </>
+    );
+  }
+
+  return undefined;
+};
+
+const TaxonomyDetailPage = ({ taxonomyId }) => (
+  <>
+    <style>
+      {`
+        body {
+            background-color: #E9E6E4; /* light-400 */
+        }
+      `}
+    </style>
+    <Header isHiddenMainMenu />
+    <TaxonomyDetailContent taxonomyId={taxonomyId} />
+  </>
+);
+
+TaxonomyDetailPage.propTypes = {
+  taxonomyId: Proptypes.number,
+};
+
+TaxonomyDetailPage.defaultProps = {
+  taxonomyId: undefined,
+};
+
+TaxonomyDetailContent.propTypes = TaxonomyDetailPage.propTypes;
+TaxonomyDetailContent.defaultProps = TaxonomyDetailPage.defaultProps;
+
+export default TaxonomyDetailPage;

src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx

@@ -0,0 +1,27 @@
+import {
+  Card,
+} from '@edx/paragon';
+import Proptypes from 'prop-types';
+
+const TaxonomyDetailSideCard = ({ taxonomy }) => (
+  <Card>
+    <Card.Header title="Taxonomy details" />
+    <Card.Section title="Title">
+      {taxonomy.name}
+    </Card.Section>
+    <Card.Divider className="ml-3 mr-3" />
+    <Card.Section title="Description">
+      {taxonomy.description}
+    </Card.Section>
+    <Card.Divider className="ml-3 mr-3" />
+    <Card.Section title="Copyright">
+      No copyright added
+    </Card.Section>
+  </Card>
+);
+
+TaxonomyDetailSideCard.propTypes = {
+  taxonomy: Proptypes.object.isRequired,
+};
+
+export default TaxonomyDetailSideCard;