feat: program details pane

containers/ecr-viewer/e2e/dual/admin-program.spec.ts

@@ -52,5 +52,21 @@ test.describe("program management page", () => {
     await page.waitForURL("/ecr-viewer/admin/program");
     await expect(page.getByText("Program management")).toBeVisible();
     await expect(page.getByText(conditionName)).toBeVisible();
+
+    // open up side panel
+    await page.getByText(conditionName).click();
+    await expect(page.getByText("Program area information")).toBeVisible();
+
+    const accessibilityScanResultsSidePanel = await new AxeBuilder({
+      page,
+    }).analyze();
+
+    // axe struggles with the modal background, but all manual testing
+    // points to contrast being fine
+    const nonColorViolations =
+      accessibilityScanResultsSidePanel.violations.filter(
+        (v) => v.id !== "color-contrast",
+      );
+    expect(nonColorViolations).toEqual([]);
   });
 });

containers/ecr-viewer/src/app/admin/program/ProgramTable.tsx

@@ -1,28 +1,19 @@
 "use client";
+import { useState } from "react";
+
+import {
+  DetailsSidePanel,
+  DetailsTrigger,
+  useDetailsRef,
+} from "@/app/components/DetailsSidePanel";
 import {
   PaginatedSortableTable,
   TableColumn,
 } from "@/app/components/table/PaginatedSortableTable";
 import { ConditionReference } from "@/app/data/metadataDb/types/core";
+import { formatDateTime } from "@/app/services/formatDateService";
 import { ListedProgramArea } from "@/app/services/programAreaService";
 
-const tableHeaders: TableColumn<ListedProgramArea>[] = [
-  {
-    id: "name",
-    value: "Program Area",
-    dataSortable: true,
-    sortDirection: "ASC",
-  },
-  {
-    id: "conditions",
-    value: "Number of Conditions",
-    dataSortable: false,
-    sortDirection: "",
-    formatter: (conditions: ConditionReference[]) =>
-      `${conditions.length} condition${conditions.length === 1 ? "" : "s"}`,
-  },
-];
-
 /**
  *
  * @param props React props
@@ -34,11 +25,77 @@ export const ProgramTable = ({
 }: {
   programAreas: ListedProgramArea[];
 }) => {
+  const detailsRef = useDetailsRef();
+  const [selectedProgramArea, setSelectedProgramArea] =
+    useState<ListedProgramArea | null>(null);
+
+  const tableHeaders: TableColumn<ListedProgramArea>[] = [
+    {
+      id: "name",
+      value: "Program Area",
+      dataSortable: true,
+      sortDirection: "ASC",
+      formatter: (v: string, programArea: ListedProgramArea) => (
+        <DetailsTrigger
+          detailsRef={detailsRef}
+          onClick={() => {
+            setSelectedProgramArea(programArea);
+          }}
+        >
+          {v}
+        </DetailsTrigger>
+      ),
+    },
+    {
+      id: "conditions",
+      value: "Number of Conditions",
+      dataSortable: false,
+      sortDirection: "",
+      formatter: (conditions: ConditionReference[]) =>
+        `${conditions.length} condition${conditions.length === 1 ? "" : "s"}`,
+    },
+  ];
   return (
-    <PaginatedSortableTable
-      initHeaders={tableHeaders}
-      items={programAreas}
-      itemType="Program areas"
-    />
+    <div>
+      <DetailsSidePanel
+        detailsRef={detailsRef}
+        title={selectedProgramArea?.name!}
+        subtitle={`Created on ${formatDateTime(
+          selectedProgramArea?.date_created.toISOString(),
+        )}`}
+        description="Program area information"
+        details={[
+          {
+            title: "Name",
+            value: selectedProgramArea?.name,
+          },
+          {
+            title: "Conditions",
+            value:
+              selectedProgramArea?.conditions.length === 0 ? (
+                "No conditions assigned"
+              ) : (
+                <ul className="add-list-reset">
+                  {selectedProgramArea?.conditions
+                    .sort()
+                    .map(({ condition_name, code }) => (
+                      <li
+                        key={code}
+                        className="border-bottom border-base-lightest padding-y-1"
+                      >
+                        {condition_name}
+                      </li>
+                    ))}
+                </ul>
+              ),
+          },
+        ]}
+      />
+      <PaginatedSortableTable
+        initHeaders={tableHeaders}
+        items={programAreas}
+        itemType="Program areas"
+      />
+    </div>
   );
 };

containers/ecr-viewer/src/app/tests/ProgramAdminPage.test.tsx

@@ -1,4 +1,5 @@
 import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import { notFound } from "next/navigation";
 
@@ -76,14 +77,14 @@ describe("Program Admin Page", () => {
           {
             code: "456",
             concept_name: "condition 1 (disease)",
-            condition_name: "condition",
+            condition_name: "condition 1",
             condition_category: "category",
             program_area_uuid: "789",
           },
           {
             code: "789",
             concept_name: "condition 2 (disease)",
-            condition_name: "condition",
+            condition_name: "condition 2",
             condition_category: "category",
             program_area_uuid: "789",
           },
@@ -97,6 +98,13 @@ describe("Program Admin Page", () => {
       screen.queryByText("No program areas added"),
     ).not.toBeInTheDocument();
     expect(container).toMatchSnapshot();
+
+    const user = userEvent.setup();
+    await user.click(
+      screen.getByRole("button", { name: "Program Area Three" }),
+    );
+    expect(screen.getByText("Program area information")).toBeInTheDocument();
+    expect(screen.getByText("condition 1")).toBeInTheDocument();
   });
 
   describe("Creating programs", () => {