feat: program details pane

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

@@ -53,6 +53,24 @@ test.describe("program management page", () => {
     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 nonColorViolationsSidePanel =
+      accessibilityScanResultsSidePanel.violations.filter(
+        (v) => v.id !== "color-contrast",
+      );
+    expect(nonColorViolationsSidePanel).toEqual([]);
+
+    await page.getByRole("button", { name: "Close this window" }).click();
+
     // Open create form to test already assigned modal
     await page.getByText("Create program area").click();
     await expect(page.getByText(`Condition in ${conditionName}`)).toBeVisible();
@@ -66,9 +84,10 @@ test.describe("program management page", () => {
 
     // axe struggles with the modal background, but all manual testing
     // points to contrast being fine
-    const nonColorViolations = accessibilityScanResultsModal.violations.filter(
-      (v) => v.id !== "color-contrast",
-    );
-    expect(nonColorViolations).toEqual([]);
+    const nonColorViolationsModal =
+      accessibilityScanResultsModal.violations.filter(
+        (v) => v.id !== "color-contrast",
+      );
+    expect(nonColorViolationsModal).toEqual([]);
   });
 });

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

@@ -16,7 +16,7 @@ import {
 import { FieldSet } from "@/app/components/forms/FieldSet";
 import { FormPageContent } from "@/app/components/forms/FormPageContent";
 import { ListedCondition } from "@/app/services/listConditionsService";
-import { toKebabCase } from "@/app/utils/format-utils";
+import { toKebabCase, makePlural } from "@/app/utils/format-utils";
 import { ExpandCollapseAccordionControlled } from "@/app/view-data/components/ExpandCollapseAccordion";
 import { AccordionItem } from "@/app/view-data/types";
 import { Modal } from "@/components/Modal";
@@ -275,7 +275,7 @@ const ConditionFieldSet = ({
       </span>
       <p className="text-bold font-size-md">
         {numConditionsSelected} condition
-        {numConditionsSelected === 1 ? "" : "s"} selected
+        {makePlural(numConditionsSelected)} selected
       </p>
       <ExpandCollapseAccordionControlled
         descriptor="condition categories"

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

@@ -1,27 +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"}`,
-  },
-];
+import { makePlural } from "@/app/utils/format-utils";
 
 /**
  *
@@ -34,11 +26,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${makePlural(conditions.length)}`,
+    },
+  ];
   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/admin/user/UserTable.tsx

@@ -15,7 +15,7 @@ import {
 import { formatDateTime } from "@/app/services/formatDateService";
 import { ListedProgramArea } from "@/app/services/programAreaService";
 import { ListedUser, NamedUserPogramArea } from "@/app/services/userService";
-import { toSentenceCase } from "@/app/utils/format-utils";
+import { makePlural, toSentenceCase } from "@/app/utils/format-utils";
 import { ForceClient } from "@/app/view-data/components/ForceClient";
 
 /**
@@ -158,7 +158,7 @@ const ProgramAreaContent = ({
               <span>{pa.name}</span>
               <span>
                 {conditionNames.length} condition
-                {conditionNames.length !== 1 && "s"}
+                {makePlural(conditionNames.length)}
               </span>
             </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", () => {