@openmrs/esm-cohort-builder-app 3.0.0

package/src/components/saved-queries/saved-queries-options/saved-queries-options.component.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+
+import {
+  ComposedModal,
+  ModalFooter,
+  ModalHeader,
+  OverflowMenu,
+  OverflowMenuItem,
+} from "@carbon/react";
+import { showToast } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import { DefinitionDataRow } from "../../../types";
+
+enum Options {
+  VIEW,
+  DELETE,
+}
+
+interface SavedQueriesOptionsProps {
+  query: DefinitionDataRow;
+  onViewQuery: (queryId: string) => Promise<void>;
+  deleteQuery: (queryId: string) => Promise<void>;
+}
+
+const SavedQueriesOptions: React.FC<SavedQueriesOptionsProps> = ({
+  query,
+  onViewQuery,
+  deleteQuery,
+}) => {
+  const { t } = useTranslation();
+  const [isDeleteQueryModalVisible, setIsDeleteQueryModalVisible] =
+    useState(false);
+
+  const handleOption = async (option: Options) => {
+    switch (option) {
+      case Options.VIEW:
+        handleViewQuery();
+        break;
+      case Options.DELETE:
+        setIsDeleteQueryModalVisible(true);
+        break;
+    }
+  };
+
+  const handleViewQuery = async () => {
+    try {
+      await onViewQuery(query.id);
+    } catch (error) {
+      showToast({
+        title: t("QueryDeleteError", "Something went wrong"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  const handleDeleteQuery = async () => {
+    await deleteQuery(query.id);
+    setIsDeleteQueryModalVisible(false);
+  };
+
+  return (
+    <>
+      <OverflowMenu
+        ariaLabel="overflow-menu"
+        size="md"
+        flipped
+        direction="bottom"
+        data-testid="options"
+      >
+        <OverflowMenuItem
+          data-testid="view"
+          itemText={t("view", "View")}
+          onClick={() => handleOption(Options.VIEW)}
+        />
+        <OverflowMenuItem
+          data-testid="delete"
+          itemText={t("delete", "Delete")}
+          onClick={() => handleOption(Options.DELETE)}
+        />
+      </OverflowMenu>
+
+      <ComposedModal
+        size={"sm"}
+        open={isDeleteQueryModalVisible}
+        onClose={() => setIsDeleteQueryModalVisible(false)}
+      >
+        <ModalHeader>
+          <p>
+            {t(
+              "deleteItem",
+              `Are you sure you want to delete ${query?.name}?`,
+              {
+                item: query?.name,
+              }
+            )}
+          </p>
+        </ModalHeader>
+        <ModalFooter
+          danger
+          onRequestSubmit={handleDeleteQuery}
+          primaryButtonText={t("delete", "Delete")}
+          secondaryButtonText={t("cancel", "Cancel")}
+        />
+      </ComposedModal>
+    </>
+  );
+};
+
+export default SavedQueriesOptions;

package/src/components/saved-queries/saved-queries-options/saved-queries-options.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { screen, render, cleanup, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { DefinitionDataRow } from "../../../types";
+import SavedQueriesOptions from "./saved-queries-options.component";
+
+const query: DefinitionDataRow = {
+  id: "1",
+  name: "Female Patients",
+  description: "Female Patients that are alive",
+};
+
+const testProps = {
+  query: query,
+  onViewQuery: jest.fn(),
+  deleteQuery: jest.fn(),
+};
+
+const renderSavedQueriesOptions = (props = testProps) => {
+  render(<SavedQueriesOptions {...props} />);
+};
+
+describe("Test the saved queries options", () => {
+  afterEach(cleanup);
+  it("should be able to view the saved query", async () => {
+    const user = userEvent.setup();
+    const onViewQuery = jest.fn();
+    renderSavedQueriesOptions({ ...testProps, onViewQuery });
+
+    await waitFor(() => user.click(screen.getByTestId("options")));
+    await waitFor(() => user.click(screen.getByTestId("view")));
+    expect(onViewQuery).toBeCalledWith(query.id);
+  });
+
+  it("should be able delete a query", async () => {
+    const user = userEvent.setup();
+    const deleteQuery = jest.fn();
+    renderSavedQueriesOptions({ ...testProps, deleteQuery });
+
+    await waitFor(() => user.click(screen.getByTestId("options")));
+    await waitFor(() => user.click(screen.getByTestId("delete")));
+    await waitFor(() => user.click(screen.getByText("Delete")));
+    expect(deleteQuery).toBeCalledWith(query.id);
+  });
+});

package/src/components/saved-queries/saved-queries.component.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from "react";
+
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Pagination,
+} from "@carbon/react";
+import { showToast } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import mainStyles from "../../cohort-builder.scss";
+import { DefinitionDataRow, PaginationData } from "../../types";
+import EmptyData from "../empty-data/empty-data.component";
+import SavedQueriesOptions from "./saved-queries-options/saved-queries-options.component";
+import { deleteDataSet, getQueries } from "./saved-queries.resources";
+import styles from "./saved-queries.scss";
+
+interface SavedQueriesProps {
+  onViewQuery: (queryId: string) => Promise<void>;
+}
+
+const SavedQueries: React.FC<SavedQueriesProps> = ({ onViewQuery }) => {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const { t } = useTranslation();
+  const [queries, setQueries] = useState<DefinitionDataRow[]>([]);
+
+  const getTableData = async () => {
+    const queries = await getQueries();
+    setQueries(queries);
+  };
+
+  const deleteQuery = async (queryId: string) => {
+    try {
+      await deleteDataSet(queryId);
+      showToast({
+        title: t("success", "Success"),
+        kind: "success",
+        critical: true,
+        description: t("queryIsDeleted", "the query is deleted"),
+      });
+      getTableData();
+    } catch (error) {
+      showToast({
+        title: t("queryDeleteError", "Error saving the query"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  useEffect(() => {
+    getTableData();
+  }, []);
+
+  const headers = [
+    {
+      key: "name",
+      header: t("name", "Name"),
+    },
+    {
+      key: "description",
+      header: t("description", "Description"),
+    },
+  ];
+
+  const handlePagination = ({ page, pageSize }: PaginationData) => {
+    setPage(page);
+    setPageSize(pageSize);
+  };
+
+  return (
+    <div className={styles.container}>
+      <p className={mainStyles.text}>
+        {t(
+          "savedQueryDescription",
+          "You can only search for Query Definitions that you have saved using a Name."
+        )}
+      </p>
+      <DataTable rows={queries} 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 })} key={index}>
+                    {row.cells.map((cell, index) => (
+                      <TableCell key={index}>{cell.value}</TableCell>
+                    ))}
+                    <TableCell className={mainStyles.optionCell}>
+                      <SavedQueriesOptions
+                        query={queries[index]}
+                        onViewQuery={onViewQuery}
+                        deleteQuery={deleteQuery}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+      {queries.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={queries.length}
+        />
+      )}
+      {!queries.length && <EmptyData displayText={t("queries", "queries")} />}
+    </div>
+  );
+};
+
+export default SavedQueries;

package/src/components/saved-queries/saved-queries.resources.ts

@@ -0,0 +1,39 @@
+import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+
+import { Response, DefinitionDataRow } from "../../types";
+
+/**
+ * @returns Queries
+ */
+export async function getQueries(): Promise<DefinitionDataRow[]> {
+  const response: FetchResponse<{ results: Response[] }> = await openmrsFetch(
+    "/ws/rest/v1/reportingrest/dataSetDefinition?v=full",
+    {
+      method: "GET",
+    }
+  );
+
+  let queries: DefinitionDataRow[] = [];
+  if (response.data.results.length > 0) {
+    response.data.results.map((query: Response) => {
+      const queryData: DefinitionDataRow = {
+        id: query.uuid,
+        name: query.name.replace("[AdHocDataExport]", ""),
+        description: query.description,
+      };
+      queries.push(queryData);
+    });
+  }
+
+  return queries;
+}
+
+export const deleteDataSet = async (queryID: string) => {
+  const dataset: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/reportingrest/adhocdataset/${queryID}?purge=true`,
+    {
+      method: "DELETE",
+    }
+  );
+  return dataset;
+};

package/src/components/saved-queries/saved-queries.scss

@@ -0,0 +1,23 @@
+.container {
+  background: white;
+  padding: 1rem;
+}
+
+.searchContainer {
+ display: flex;
+ margin-bottom: 2rem;
+}
+
+.searchBtn{
+  :global(.cds--btn) {
+    min-height: 1rem;
+  }
+}
+
+.optionCell {
+  padding: 0 !important;
+}
+
+.optionHeader {
+  width: 1.5rem !important;
+}

package/src/components/saved-queries/saved-queries.test.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { render, cleanup, screen, waitFor } from "@testing-library/react";
+
+import { DefinitionDataRow } from "../../types";
+import SavedQueries from "./saved-queries.component";
+import { getQueries } from "./saved-queries.resources";
+
+const mockQueries: DefinitionDataRow[] = [
+  {
+    id: "1",
+    name: "male alive",
+    description: "male Patients that are alive",
+  },
+  {
+    id: "2",
+    name: "Female ages between 10 and 30",
+    description:
+      "male Patients with ages between 10 and 30 years that are alive",
+  },
+];
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock("./saved-queries.resources", () => {
+  const original = jest.requireActual("./saved-queries.resources");
+  return {
+    ...original,
+    getQueries: jest.fn(),
+  };
+});
+
+describe("Test the saved queries component", () => {
+  afterEach(cleanup);
+  it("should be able to search for a query", async () => {
+    // @ts-ignore
+    getQueries.mockImplementation(() => mockQueries);
+    mockOpenmrsFetch.mockReturnValueOnce({
+      data: { results: mockQueries },
+    });
+
+    render(<SavedQueries onViewQuery={jest.fn()} />);
+
+    await waitFor(() =>
+      expect(screen.getByText(mockQueries[0].name)).toBeInTheDocument()
+    );
+    expect(screen.getByText(mockQueries[1].name)).toBeInTheDocument();
+  });
+});

package/src/components/search-button-set/search-button-set.css

@@ -0,0 +1,9 @@
+.container {
+  padding-bottom: 0.5rem;
+  padding-top: 1rem;
+}
+
+.buttonSet {
+ justify-content: end;
+}
+

package/src/components/search-button-set/search-button-set.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { screen, render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import SearchButtonSet from "./search-button-set";
+
+describe("Test the search button set component", () => {
+  it("should be able search and reset", async () => {
+    const user = userEvent.setup();
+    const handleSubmit = jest.fn();
+    const handleReset = jest.fn();
+    render(
+      <SearchButtonSet
+        onHandleReset={handleReset}
+        onHandleSubmit={handleSubmit}
+        isLoading={false}
+      />
+    );
+
+    await user.click(screen.getByTestId("reset-btn"));
+    await waitFor(() => expect(handleReset).toBeCalled());
+    await user.click(screen.getByTestId("search-btn"));
+    await waitFor(() => expect(handleSubmit).toBeCalled());
+  });
+});

package/src/components/search-button-set/search-button-set.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { Button, ButtonSet, Column, InlineLoading } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+
+import styles from "./search-button-set.css";
+
+interface SearchButtonSet {
+  isLoading: boolean;
+  onHandleSubmit: () => void;
+  onHandleReset: () => void;
+}
+
+const SearchButtonSet: React.FC<SearchButtonSet> = ({
+  isLoading,
+  onHandleSubmit,
+  onHandleReset,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Column sm={2} md={{ offset: 4 }} className={styles.container}>
+      <ButtonSet className={styles.buttonSet}>
+        <Button
+          kind="secondary"
+          onClick={onHandleReset}
+          data-testid="reset-btn"
+        >
+          {t("reset", "Reset")}
+        </Button>
+        <Button
+          kind="primary"
+          onClick={onHandleSubmit}
+          data-testid="search-btn"
+        >
+          {isLoading ? (
+            <InlineLoading description={t("loading", "Loading")} />
+          ) : (
+            t("search", "Search")
+          )}
+        </Button>
+      </ButtonSet>
+    </Column>
+  );
+};
+
+export default SearchButtonSet;