feat(taxonomy): add CompetencyManagementPage

Author: javoconsultant

src/index.jsx

@@ -36,7 +36,12 @@ import CourseAuthoringRoutes from './CourseAuthoringRoutes';
 import Head from './head/Head';
 import { StudioHome } from './studio-home';
 import CourseRerun from './course-rerun';
-import { TaxonomyLayout, TaxonomyDetailPage, TaxonomyListPage } from './taxonomy';
+import {
+  CompetencyManagementPage,
+  TaxonomyDetailPage,
+  TaxonomyLayout,
+  TaxonomyListPage,
+} from './taxonomy';
 import { ContentTagsDrawer } from './content-tags-drawer';
 import AccessibilityPage from './accessibility-page';
 import { ToastProvider } from './generic/toast-context';
@@ -110,6 +115,7 @@ const App = () => {
             </Route>
             <Route path="/taxonomy" element={<TaxonomyLayout />}>
               <Route path="/taxonomy/:taxonomyId" element={<TaxonomyDetailPage />} />
+              <Route path="/taxonomy/:taxonomyId/competencies" element={<CompetencyManagementPage />} />
             </Route>
             <Route
               path="/tagging/components/widget/:contentId"

src/taxonomy/competency-management/CompetencyManagementPage.test.tsx

@@ -0,0 +1,58 @@
+import { initializeMocks, render, type RouteOptions } from '@src/testUtils';
+import { apiUrls } from '../data/api';
+import { CompetencyManagementPage } from '.';
+
+const taxonomyId = 1;
+
+const route: RouteOptions = {
+  path: '/taxonomy/:taxonomyId/competencies',
+  params: { taxonomyId: `${taxonomyId}` },
+};
+
+const taxonomyResponse = {
+  id: taxonomyId,
+  name: 'Test taxonomy',
+  description: 'This is a description',
+  taxonomy_type: 'competency',
+  read_only: false,
+  can_change_taxonomy: true,
+  can_delete_taxonomy: true,
+};
+
+describe('<CompetencyManagementPage />', () => {
+  let axiosMock;
+
+  beforeEach(() => {
+    ({ axiosMock } = initializeMocks());
+  });
+
+  it('shows the spinner before the query is complete', () => {
+    // Use an unresolved promise to keep the Loading visible
+    axiosMock.onGet(apiUrls.taxonomy(taxonomyId)).reply(() => new Promise(() => {}));
+
+    const { getByRole } = render(<CompetencyManagementPage />, route);
+
+    expect(getByRole('status').textContent).toEqual('Loading...');
+  });
+
+  it('shows the connection error component if no taxonomy is returned', async () => {
+    // Use an empty response to trigger the error. Returning an error does not
+    // work because the query will retry.
+    axiosMock.onGet(apiUrls.taxonomy(taxonomyId)).reply(200);
+
+    const { findByTestId } = render(<CompetencyManagementPage />, route);
+
+    expect(await findByTestId('connectionErrorAlert')).toBeInTheDocument();
+  });
+
+  it('shows the taxonomy name as the title, under a breadcrumb back to the list', async () => {
+    axiosMock.onGet(apiUrls.taxonomy(taxonomyId)).reply(200, taxonomyResponse);
+
+    const { findByRole, getByRole, queryByRole } = render(<CompetencyManagementPage />, route);
+
+    expect(await findByRole('heading')).toHaveTextContent('Test taxonomy');
+    expect(getByRole('link', { name: 'Taxonomies' })).toHaveAttribute('href', '/taxonomies/');
+    // The taxonomy name is the breadcrumb's active step, so it is text rather than a link
+    expect(queryByRole('link', { name: 'Test taxonomy' })).not.toBeInTheDocument();
+  });
+});

src/taxonomy/competency-management/CompetencyManagementPage.tsx

@@ -0,0 +1,61 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Breadcrumb, Container } from '@openedx/paragon';
+import { Helmet } from 'react-helmet';
+import { Link, useParams } from 'react-router-dom';
+
+import ConnectionErrorAlert from '@src/generic/ConnectionErrorAlert';
+import Loading from '@src/generic/Loading';
+import SubHeader from '@src/generic/sub-header/SubHeader';
+import getPageHeadTitle from '@src/generic/utils';
+import taxonomyMessages from '../messages';
+import { useTaxonomyDetails } from '../data/apiHooks';
+
+/**
+ * Page where competencies of a taxonomy are managed and applied to course content.
+ *
+ * The page is a placeholder for now: it carries the breadcrumb and the title, the same
+ * way the taxonomy detail page does. The competency tree and its actions are added by a
+ * later ticket.
+ */
+export const CompetencyManagementPage = () => {
+  const intl = useIntl();
+  const { taxonomyId: taxonomyIdString } = useParams();
+  const taxonomyId = Number(taxonomyIdString);
+
+  const {
+    data: taxonomy,
+    isError,
+    isFetched,
+  } = useTaxonomyDetails(taxonomyId);
+
+  if (!isFetched) {
+    return <Loading />;
+  }
+
+  if (isError || !taxonomy) {
+    return <ConnectionErrorAlert />;
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>{getPageHeadTitle(intl.formatMessage(taxonomyMessages.headerTitle), taxonomy.name)}</title>
+      </Helmet>
+      <div className="pt-4.5 pr-4.5 pl-4.5 pb-2 bg-light-100 box-shadow-down-2">
+        <Container size="xl">
+          <Breadcrumb
+            links={[
+              { label: intl.formatMessage(taxonomyMessages.headerTitle), to: '/taxonomies/' },
+            ]}
+            activeLabel={taxonomy.name}
+            linkAs={Link}
+          />
+          <SubHeader
+            title={taxonomy.name}
+            hideBorder
+          />
+        </Container>
+      </div>
+    </>
+  );
+};

src/taxonomy/competency-management/index.ts

@@ -0,0 +1 @@
+export { CompetencyManagementPage } from './CompetencyManagementPage';

src/taxonomy/data/utils.ts

@@ -0,0 +1,6 @@
+import { TaxonomyType } from './constants';
+
+/** Whether a taxonomy holds competencies rather than plain tags */
+export const isCompetencyTaxonomy = (
+  taxonomy: { taxonomyType?: TaxonomyType; },
+) => taxonomy.taxonomyType === TaxonomyType.Competency;

src/taxonomy/index.ts

@@ -1,3 +1,4 @@
+export { CompetencyManagementPage } from './competency-management';
 export { TaxonomyDetailPage } from './taxonomy-detail';
 export { TaxonomyLayout } from './TaxonomyLayout';
 export { TaxonomyListPage } from './TaxonomyListPage';

src/taxonomy/taxonomy-card/TaxonomyCard.scss

@@ -2,6 +2,11 @@
   width: 400px;
   height: 317px;
 
+  &.pgn__card {
+    display: flex;
+    flex-direction: column;
+  }
+
   .taxonomy-card-title-text {
     /* Allow the title to shrink (and truncate) next to the taxonomy type icon */
     min-width: 0;
@@ -27,4 +32,25 @@
     max-height: 190px;
     -webkit-line-clamp: 6;
   }
+
+  .pgn__card-footer {
+    margin-top: auto;
+  }
+
+  /*
+    The footer takes two lines' worth of room away from the description. As above, each
+    max-height is the section's 20px top padding plus whole 28px lines (the bottom
+    padding is what overflow hides), so the clamp's ellipsis lands on a visible line.
+  */
+  .taxonomy-card-body-with-footer {
+    &.taxonomy-card-body-overflow-m {
+      max-height: 162px;
+      -webkit-line-clamp: 5;
+    }
+
+    &.taxonomy-card-body-overflow-sm {
+      max-height: 134px;
+      -webkit-line-clamp: 4;
+    }
+  }
 }

src/taxonomy/taxonomy-card/TaxonomyCard.test.tsx

@@ -10,6 +10,12 @@ import { TaxonomyType } from '../data/constants';
 import { TaxonomyCard } from '.';
 import { TaxonomyCardData } from './TaxonomyCard';
 
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
 let store;
 const taxonomyId = 1;
 
@@ -39,6 +45,7 @@ const TaxonomyCardComponent = ({ original }: { original: TaxonomyCardData; }) =>
 
 describe('<TaxonomyCard />', () => {
   beforeEach(async () => {
+    jest.clearAllMocks();
     initializeMockApp({
       authenticatedUser: {
         userId: 3,
@@ -128,6 +135,38 @@ describe('<TaxonomyCard />', () => {
     expect(queryByTestId('taxonomy-type-icon-competency')).not.toBeInTheDocument();
   });
 
+  const applyCompetenciesLabel = 'Apply Competencies';
+
+  it('shows a footer button that opens the competency management page of a competency taxonomy', () => {
+    const cardData = { ...data, taxonomyType: TaxonomyType.Competency };
+
+    const { getByRole } = render(<TaxonomyCardComponent original={cardData} />);
+    fireEvent.click(getByRole('button', { name: applyCompetenciesLabel }));
+
+    expect(mockNavigate).toHaveBeenCalledWith(`/taxonomy/${taxonomyId}/competencies`);
+  });
+
+  it('still links the card itself to the taxonomy editing page', () => {
+    const cardData = { ...data, taxonomyType: TaxonomyType.Competency };
+
+    const { getByRole } = render(<TaxonomyCardComponent original={cardData} />);
+    expect(getByRole('link')).toHaveAttribute('href', `/taxonomy/${taxonomyId}/`);
+  });
+
+  it('does not show the footer button on tags taxonomies', () => {
+    const cardData = { ...data, taxonomyType: TaxonomyType.Tags };
+
+    const { queryByRole } = render(<TaxonomyCardComponent original={cardData} />);
+    expect(queryByRole('button', { name: applyCompetenciesLabel })).not.toBeInTheDocument();
+  });
+
+  it('does not show the footer button to users who cannot change the taxonomy', () => {
+    const cardData = { ...data, taxonomyType: TaxonomyType.Competency, canChangeTaxonomy: false };
+
+    const { queryByRole } = render(<TaxonomyCardComponent original={cardData} />);
+    expect(queryByRole('button', { name: applyCompetenciesLabel })).not.toBeInTheDocument();
+  });
+
   it('shows a type icon even when the taxonomy has no type, along with the read-only badge', () => {
     const cardData = { ...data, readOnly: true };
 

src/taxonomy/taxonomy-card/TaxonomyCard.tsx

@@ -1,12 +1,16 @@
-import { Card } from '@openedx/paragon';
-import { NavLink } from 'react-router-dom';
+import type { MouseEvent } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Card } from '@openedx/paragon';
+import { NavLink, useNavigate } from 'react-router-dom';
 import classNames from 'classnames';
 
 import { TaxonomyMenu } from '../taxonomy-menu';
 import { TaxonomyCardHeaderSubtitle } from './TaxonomyCardHeaderSubtitle';
 import { TaxonomyCardHeaderTitle } from './TaxonomyCardHeaderTitle';
+import messages from './messages';
 import { orgsCountEnabled } from './utils';
 import { TaxonomyType } from '../data/constants';
+import { isCompetencyTaxonomy } from '../data/utils';
 import { TaxonomyData } from '../data/types';
 
 type TaxonomyCardFields = Pick<
@@ -33,8 +37,14 @@ export const TaxonomyCard = ({ className = '', original }: TaxonomyCardProps) =>
     readOnly,
     orgsCount,
     taxonomyType,
+    canChangeTaxonomy,
   } = original;
 
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const showApplyCompetencies = canChangeTaxonomy && isCompetencyTaxonomy(original);
+
   return (
     <Card
       isClickable
@@ -68,12 +78,28 @@ export const TaxonomyCard = ({ className = '', original }: TaxonomyCardProps) =>
         className={classNames('taxonomy-card-body', {
           'taxonomy-card-body-overflow-m': !readOnly && !orgsCountEnabled(orgsCount),
           'taxonomy-card-body-overflow-sm': readOnly || orgsCountEnabled(orgsCount),
+          'taxonomy-card-body-with-footer': showApplyCompetencies,
         })}
       >
         <Card.Section>
           {description}
         </Card.Section>
       </Card.Body>
+      {showApplyCompetencies && (
+        <Card.Footer className="justify-content-end">
+          <Button
+            variant="primary"
+            // The whole card is a link, so stop the click here instead of nesting another one inside it.
+            onClick={(e: MouseEvent) => {
+              e.preventDefault();
+              e.stopPropagation();
+              navigate(`/taxonomy/${id}/competencies`);
+            }}
+          >
+            {intl.formatMessage(messages.applyCompetenciesButton)}
+          </Button>
+        </Card.Footer>
+      )}
     </Card>
   );
 };

src/taxonomy/taxonomy-card/messages.ts

@@ -5,6 +5,11 @@ const messages = defineMessages({
     id: 'course-authoring.taxonomy-list.orgs-count.label',
     defaultMessage: 'Assigned to {orgsCount} orgs',
   },
+  applyCompetenciesButton: {
+    id: 'course-authoring.taxonomy-list.button.apply-competencies.label',
+    defaultMessage: 'Apply Competencies',
+    description: 'Button on a competency taxonomy card that opens its competency management page.',
+  },
 });
 
 export default messages;