@openmrs/esm-cohort-builder-app 3.0.0

package/src/components/search-history/search-history-options/search-history-options.test.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+
+import { screen, render, cleanup, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Cohort, Query } from "../../../types";
+import SearchHistoryOptions from "./search-history-options.component";
+import * as apis from "./search-history-options.resources";
+
+jest.mock("./search-history-options.resources");
+
+const searchHistoryItem = {
+  description: "Patients with NO Chronic viral hepatitis",
+  patients: [
+    {
+      firstname: "Horatio",
+      gender: "M",
+      patientId: 2,
+      age: 81,
+      lastname: "Hornblower",
+      id: "2",
+      name: "Horatio Hornblower",
+    },
+    {
+      firstname: "John",
+      gender: "M",
+      patientId: 3,
+      age: 47,
+      lastname: "Patient",
+      id: "3",
+      name: "John Patient",
+    },
+  ],
+  parameters: {
+    type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+    columns: [
+      {
+        name: "firstname",
+        key: "reporting.library.patientDataDefinition.builtIn.preferredName.givenName",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        name: "lastname",
+        key: "reporting.library.patientDataDefinition.builtIn.preferredName.familyName",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        name: "gender",
+        key: "reporting.library.patientDataDefinition.builtIn.gender",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        name: "age",
+        key: "reporting.library.patientDataDefinition.builtIn.ageOnDate.fullYears",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        name: "patientId",
+        key: "reporting.library.patientDataDefinition.builtIn.patientId",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+    ],
+    rowFilters: [
+      {
+        key: "reporting.library.cohortDefinition.builtIn.codedObsSearchAdvanced",
+        parameterValues: {
+          operator1: "LESS_THAN",
+          question: "145131AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+          timeModifier: "NO",
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+    ],
+    customRowFilterCombination: "1",
+  },
+  id: "1",
+  results: "2",
+};
+
+const testProps = {
+  searchItem: searchHistoryItem,
+  updateSearchHistory: jest.fn(),
+};
+
+describe("Test the search history options", () => {
+  afterEach(cleanup);
+  it("should be able to save the search history item as a cohort", async () => {
+    const user = userEvent.setup();
+    const cohort: Cohort = {
+      memberIds: [2, 3],
+      description: "Patients with NO Chronic viral hepatitis",
+      name: "Chronic viral hepatitis cohort",
+      display: "Chronic viral hepatitis cohort",
+    };
+
+    render(<SearchHistoryOptions {...testProps} />);
+
+    await waitFor(() => user.click(screen.getByTestId("options")));
+    await waitFor(() => user.click(screen.getByTestId("save-cohort")));
+    await waitFor(() =>
+      user.type(
+        screen.getByTestId("cohort-name"),
+        "Chronic viral hepatitis cohort"
+      )
+    );
+    await waitFor(() => user.click(screen.getByTestId("cohort-save-button")));
+    await waitFor(() =>
+      expect(jest.spyOn(apis, "createCohort")).toBeCalledWith(cohort)
+    );
+  });
+
+  it("should be able to save the search history item as a query", async () => {
+    const user = userEvent.setup();
+    const query: Query = searchHistoryItem.parameters;
+    render(<SearchHistoryOptions {...testProps} />);
+
+    await waitFor(() => user.click(screen.getByTestId("options")));
+    await waitFor(() => user.click(screen.getByTestId("save-query")));
+    await waitFor(() =>
+      user.type(
+        screen.getByTestId("query-name"),
+        "Chronic viral hepatitis query"
+      )
+    );
+    await waitFor(() => user.click(screen.getByTestId("query-save-button")));
+    expect(jest.spyOn(apis, "createQuery")).toBeCalledWith(query);
+  });
+
+  it("should be able delete search history item", async () => {
+    const user = userEvent.setup();
+    const updateSearchHistory = jest.fn();
+    render(
+      <SearchHistoryOptions
+        searchItem={searchHistoryItem}
+        updateSearchHistory={updateSearchHistory}
+      />
+    );
+
+    await waitFor(() => user.click(screen.getByTestId("options")));
+    await waitFor(() => user.click(screen.getByTestId("deleteFromHistory")));
+    await waitFor(() => user.click(screen.getByText("Delete")));
+    expect(updateSearchHistory).toBeCalledWith(searchHistoryItem);
+  });
+});

package/src/components/search-history/search-history.component.tsx

@@ -0,0 +1,174 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+import {
+  Button,
+  ComposedModal,
+  DataTable,
+  ModalFooter,
+  ModalHeader,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+
+import mainStyles from "../../cohort-builder.scss";
+import { PaginationData, SearchHistoryItem } from "../../types";
+import EmptyData from "../empty-data/empty-data.component";
+import SearchHistoryOptions from "./search-history-options/search-history-options.component";
+import styles from "./search-history.style.scss";
+import { getSearchHistory } from "./search-history.utils";
+
+interface SearchHistoryProps {
+  isHistoryUpdated: boolean;
+  setIsHistoryUpdated: Dispatch<SetStateAction<boolean>>;
+}
+
+const SearchHistory: React.FC<SearchHistoryProps> = ({
+  isHistoryUpdated,
+  setIsHistoryUpdated,
+}) => {
+  const { t } = useTranslation();
+  const [searchResults, setSearchResults] = useState<SearchHistoryItem[]>([]);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [isClearHistoryModalVisible, setIsClearHistoryModalVisible] =
+    useState(false);
+
+  useEffect(() => {
+    if (isHistoryUpdated) {
+      setSearchResults(getSearchHistory());
+      setIsHistoryUpdated(false);
+    }
+  }, [isHistoryUpdated, setIsHistoryUpdated]);
+
+  const handlePagination = ({ page, pageSize }: PaginationData) => {
+    setPage(page);
+    setPageSize(pageSize);
+  };
+
+  const headers = [
+    {
+      key: "id",
+      header: "#",
+    },
+    {
+      key: "description",
+      header: t("query", "Query"),
+    },
+    {
+      key: "results",
+      header: t("results", "Results"),
+    },
+  ];
+
+  const clearHistory = () => {
+    window.sessionStorage.removeItem("openmrsHistory");
+    setSearchResults([]);
+    setIsClearHistoryModalVisible(false);
+  };
+
+  const updateSearchHistory = (selectedSearchItem: SearchHistoryItem) => {
+    const updatedSearchResults = [...searchResults].filter(
+      (searchResult, index) =>
+        index != searchResults.indexOf(selectedSearchItem)
+    );
+    setSearchResults(updatedSearchResults);
+    window.sessionStorage.setItem(
+      "openmrsHistory",
+      JSON.stringify(updatedSearchResults)
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <p className={mainStyles.heading}>
+          {t("searchHistory", "Search History")}
+        </p>
+        {searchResults.length > 0 && (
+          <Button
+            kind="danger--tertiary"
+            onClick={() => setIsClearHistoryModalVisible(true)}
+          >
+            {t("clearHistory", "Clear Search History")}
+          </Button>
+        )}
+      </div>
+      <DataTable rows={searchResults} headers={headers} useZebraStyles>
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+                <TableHeader className={mainStyles.optionHeader}></TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows
+                .slice((page - 1) * pageSize)
+                .slice(0, pageSize)
+                .map((row, index: number) => (
+                  <TableRow {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                    <TableCell className={mainStyles.optionCell}>
+                      <SearchHistoryOptions
+                        searchItem={searchResults[index]}
+                        updateSearchHistory={updateSearchHistory}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+      {searchResults.length > 10 && (
+        <Pagination
+          backwardText={t("previousPage", "Previous page")}
+          forwardText={t("nextPage", "Next page")}
+          itemsPerPageText={t("itemsPerPage:", "Items per page:")}
+          onChange={handlePagination}
+          page={1}
+          pageSize={10}
+          pageSizes={[10, 20, 30, 40, 50]}
+          size="md"
+          totalItems={searchResults.length}
+        />
+      )}
+      {!searchResults.length && <EmptyData displayText={t("data", "data")} />}
+      <ComposedModal
+        size={"sm"}
+        open={isClearHistoryModalVisible}
+        onClose={() => setIsClearHistoryModalVisible(false)}
+      >
+        <ModalHeader>
+          <p>
+            {t(
+              "clearHistoryMsg",
+              "Are you sure you want to clear the search history?"
+            )}
+          </p>
+        </ModalHeader>
+        <ModalFooter
+          danger
+          onRequestSubmit={clearHistory}
+          primaryButtonText={t("clear", "Clear")}
+          secondaryButtonText={t("cancel", "Cancel")}
+        />
+      </ComposedModal>
+    </div>
+  );
+};
+
+export default SearchHistory;

package/src/components/search-history/search-history.style.scss

@@ -0,0 +1,12 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem
+}
+
+.container {
+  margin-top: 1rem;
+  background: white;
+  padding: 1rem;
+}

package/src/components/search-history/search-history.test.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+
+import { render, cleanup, screen } from "@testing-library/react";
+
+import translations from "../../../translations/en.json";
+import SearchHistory from "./search-history.component";
+import * as utils from "./search-history.utils";
+
+jest.mock("./search-history.utils.ts");
+
+const mockSearchHistory = [
+  {
+    description: "Patients with NO Chronic viral hepatitis",
+    patients: [
+      {
+        firstname: "Horatio",
+        gender: "M",
+        patientId: 2,
+        age: 81,
+        lastname: "Hornblower",
+        id: "2",
+        name: "Horatio Hornblower",
+      },
+      {
+        firstname: "John",
+        gender: "M",
+        patientId: 3,
+        age: 47,
+        lastname: "Patient",
+        id: "3",
+        name: "John Patient",
+      },
+    ],
+    parameters: {
+      type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      columns: [
+        {
+          name: "firstname",
+          key: "reporting.library.patientDataDefinition.builtIn.preferredName.givenName",
+          type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+        },
+        {
+          name: "lastname",
+          key: "reporting.library.patientDataDefinition.builtIn.preferredName.familyName",
+          type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+        },
+        {
+          name: "gender",
+          key: "reporting.library.patientDataDefinition.builtIn.gender",
+          type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+        },
+        {
+          name: "age",
+          key: "reporting.library.patientDataDefinition.builtIn.ageOnDate.fullYears",
+          type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+        },
+        {
+          name: "patientId",
+          key: "reporting.library.patientDataDefinition.builtIn.patientId",
+          type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+        },
+      ],
+      rowFilters: [
+        {
+          key: "reporting.library.cohortDefinition.builtIn.codedObsSearchAdvanced",
+          parameterValues: {
+            operator1: "LESS_THAN",
+            question: "145131AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+            timeModifier: "NO",
+          },
+          type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+        },
+      ],
+      customRowFilterCombination: "1",
+    },
+    id: "1",
+    results: "2",
+  },
+];
+
+describe("Test the search history component", () => {
+  afterEach(cleanup);
+  it("should render a message when there's no history to display", async () => {
+    render(
+      <SearchHistory isHistoryUpdated={false} setIsHistoryUpdated={jest.fn()} />
+    );
+
+    expect(
+      screen.getByText("There are no data to display")
+    ).toBeInTheDocument();
+  });
+
+  it("should display the search history", async () => {
+    jest.spyOn(utils, "getSearchHistory").mockReturnValue(mockSearchHistory);
+
+    render(
+      <SearchHistory isHistoryUpdated={true} setIsHistoryUpdated={jest.fn()} />
+    );
+
+    expect(screen.getByText(translations.clearHistory)).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+    expect(
+      screen.getByText(mockSearchHistory[0].description)
+    ).toBeInTheDocument();
+  });
+});

package/src/components/search-history/search-history.utils.ts

@@ -0,0 +1,14 @@
+import { SearchHistoryItem } from "../../types";
+
+export const getSearchHistory = () => {
+  const history = JSON.parse(window.sessionStorage.getItem("openmrsHistory"));
+  let searchHistory: SearchHistoryItem[] = [];
+  history?.map((historyItem, index) =>
+    searchHistory.push({
+      ...historyItem,
+      id: (index + 1).toString(),
+      results: historyItem.patients.length,
+    })
+  );
+  return searchHistory;
+};

package/src/components/search-results-table/search-results-table.component.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Pagination,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+
+import mainStyle from "../../cohort-builder.scss";
+import { PaginationData, Patient } from "../../types";
+import EmptyData from "../empty-data/empty-data.component";
+import styles from "./search-results-table.scss";
+
+interface SearchResultsTableProps {
+  patients: Patient[];
+}
+
+const SearchResultsTable: React.FC<SearchResultsTableProps> = ({
+  patients,
+}) => {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const { t } = useTranslation();
+
+  const headers = [
+    {
+      key: "id",
+      header: t("openmrsId", "OpenMRS ID"),
+    },
+    {
+      key: "name",
+      header: t("name", "Name"),
+    },
+    {
+      key: "age",
+      header: t("age", "Age"),
+    },
+    {
+      key: "gender",
+      header: t("gender", "Gender"),
+    },
+  ];
+
+  const handlePagination = ({ page, pageSize }: PaginationData) => {
+    setPage(page);
+    setPageSize(pageSize);
+  };
+
+  return (
+    <div className={styles.container}>
+      <p className={mainStyle.heading}>
+        {t("searchResults", "Search Results")}
+      </p>
+      <DataTable rows={patients} headers={headers} useZebraStyles>
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows
+                .slice((page - 1) * pageSize)
+                .slice(0, pageSize)
+                .map((row, index) => (
+                  <TableRow {...getRowProps({ row })} key={index}>
+                    {row.cells.map((cell, index) => (
+                      <TableCell key={index}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+      {patients.length > 10 && (
+        <Pagination
+          backwardText={t("previousPage", "Previous page")}
+          forwardText={t("nextPage", "Next page")}
+          itemsPerPageText={t("itemsPerPage:", "Items per page:")}
+          onChange={handlePagination}
+          page={1}
+          pageSize={10}
+          pageSizes={[10, 20, 30, 40, 50]}
+          size="md"
+          totalItems={patients.length}
+        />
+      )}
+      {!patients.length && <EmptyData displayText={t("data", "data")} />}
+    </div>
+  );
+};
+
+export default SearchResultsTable;

package/src/components/search-results-table/search-results-table.scss

@@ -0,0 +1,4 @@
+.container {
+  background: white;
+  padding: 1rem;
+}

package/src/components/search-results-table/search-results-table.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { render, cleanup } from "@testing-library/react";
+
+import SearchResultsTable from "./search-results-table.component";
+
+const mockPatients = [
+  {
+    firstname: "Horatio",
+    gender: "M",
+    patientId: 2,
+    age: 81,
+    lastname: "Hornblower",
+    id: "2",
+    name: "Horatio Hornblower",
+  },
+  {
+    firstname: "John",
+    gender: "M",
+    patientId: 3,
+    age: 47,
+    lastname: "Patient",
+    id: "3",
+    name: "John Patient",
+  },
+];
+
+describe("Test the search results component", () => {
+  afterEach(cleanup);
+  it("should render a message when there's no results to display", async () => {
+    const { getByText } = render(<SearchResultsTable patients={[]} />);
+    expect(getByText("There are no data to display")).toBeInTheDocument();
+  });
+
+  it("should display the search results", () => {
+    const { getAllByRole } = render(
+      <SearchResultsTable patients={mockPatients} />
+    );
+    const rows = getAllByRole("row");
+    const cells = getAllByRole("cell");
+    expect(rows).toHaveLength(mockPatients.length + 1);
+    expect(cells[1].textContent).toBe(mockPatients[0].name);
+    expect(cells[5].textContent).toBe(mockPatients[1].name);
+    expect(cells[0].textContent).toBe(mockPatients[0].id);
+    expect(cells[4].textContent).toBe(mockPatients[1].id);
+  });
+});

package/src/declarations.d.tsx

@@ -0,0 +1,2 @@
+declare module "*.css";
+declare module "*.scss";

package/src/index.ts

@@ -0,0 +1,47 @@
+import { getAsyncLifecycle } from "@openmrs/esm-framework";
+
+const importTranslation = require.context(
+  "../translations",
+  false,
+  /.json$/,
+  "lazy"
+);
+
+const backendDependencies = {
+  fhir2: "^1.2.0",
+  "webservices.rest": "^2.2.0",
+  reportingrest: "^1.0.0",
+  reporting: "^1.0.0",
+};
+
+function setupOpenMRS() {
+  const moduleName = "@openmrs/esm-cohort-builder";
+
+  const options = {
+    featureName: "cohort-builder",
+    moduleName,
+  };
+
+  return {
+    pages: [
+      {
+        load: getAsyncLifecycle(() => import("./cohort-builder"), options),
+        route: "cohort-builder",
+      },
+    ],
+    extensions: [
+      {
+        id: "cohort-builder-app-link",
+        slot: "app-menu-slot",
+        load: getAsyncLifecycle(
+          () => import("./cohort-builder-app-menu-link"),
+          options
+        ),
+        online: true,
+        offline: false,
+      },
+    ],
+  };
+}
+
+export { backendDependencies, importTranslation, setupOpenMRS };

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";