feat(ui): userPrompt

react-app/src/components/Modal/ConfirmationModal.tsx → react-app/src/components/ConfirmationDialog/ConfirmationDialog.tsx

@@ -24,7 +24,7 @@ export type ConfirmationModalProps = {
 };
 
 /** A modal with optional Cancel and Accept buttons */
-export function ConfirmationModal({
+export function ConfirmationDialog({
   open,
   description,
   title,
@@ -39,24 +39,37 @@ export function ConfirmationModal({
 }: ConfirmationModalProps) {
   return (
     <Dialog open={open} onOpenChange={onCancel}>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[425px]" data-testid="dialog-content">
         <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
+          <DialogTitle data-testid="dialog-title">{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
-        {body && <div className="grid gap-4 py-4">{body}</div>}
+        {body && (
+          <div className="grid gap-4 py-4" data-testid="dialog-body">
+            {body}
+          </div>
+        )}
         <DialogFooter
           className={cn({
             "flex-col sm:flex-row-reverse sm:justify-start": areButtonsReversed,
           })}
         >
           {acceptButtonVisible && (
-            <Button type="submit" onClick={onAccept}>
+            <Button
+              type="submit"
+              onClick={onAccept}
+              data-testid="dialog-accept"
+            >
               {acceptButtonText}
             </Button>
           )}
           {cancelButtonVisible && (
-            <Button type="button" variant={"outline"} onClick={onCancel}>
+            <Button
+              type="button"
+              variant={"outline"}
+              onClick={onCancel}
+              data-testid="dialog-cancel"
+            >
               {cancelButtonText}
             </Button>
           )}

react-app/src/components/ConfirmationDialog/index.tsx

@@ -0,0 +1,2 @@
+export * from "./ConfirmationDialog";
+export * from "./userPrompt";

react-app/src/components/ConfirmationDialog/userPrompt.test.tsx

@@ -0,0 +1,131 @@
+import { act, render } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { UserPrompt, userPrompt } from "./userPrompt";
+import userEvent from "@testing-library/user-event";
+
+describe("userPrompt", () => {
+  test("Hidden on initial render", () => {
+    const { container } = render(<UserPrompt />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test("Create a simple user prompt", () => {
+    const { getByTestId } = render(<UserPrompt />);
+
+    act(() => {
+      userPrompt({
+        header: "Testing",
+        body: "testing",
+        onAccept: vi.fn(),
+      });
+    });
+
+    expect(getByTestId("dialog-content")).toBeInTheDocument();
+  });
+
+  test("User prompt header matches", () => {
+    const { getByTestId } = render(<UserPrompt />);
+
+    act(() => {
+      userPrompt({
+        header: "Testing",
+        body: "testing body",
+        onAccept: vi.fn(),
+      });
+    });
+
+    expect(getByTestId("dialog-title")).toHaveTextContent("Testing");
+  });
+
+  test("User prompt body matches", () => {
+    const { getByTestId } = render(<UserPrompt />);
+
+    act(() => {
+      userPrompt({
+        header: "Testing",
+        body: "testing body",
+        onAccept: vi.fn(),
+      });
+    });
+
+    expect(getByTestId("dialog-body")).toHaveTextContent("testing body");
+  });
+
+  test("Clicking Accept successfully closes the user prompt", async () => {
+    const user = userEvent.setup();
+
+    const { container, getByTestId } = render(<UserPrompt />);
+
+    act(() => {
+      userPrompt({
+        header: "Testing",
+        body: "testing body",
+        onAccept: vi.fn(),
+      });
+    });
+
+    user.click(getByTestId("dialog-accept"));
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test("Clicking Cancel successfully closes the user prompt", async () => {
+    const user = userEvent.setup();
+
+    const { container, getByTestId } = render(<UserPrompt />);
+
+    act(() => {
+      userPrompt({
+        header: "Testing",
+        body: "testing body",
+        onAccept: vi.fn(),
+      });
+    });
+
+    await user.click(getByTestId("dialog-cancel"));
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test("Clicking Accept successfully calls the onAccept callback", async () => {
+    const user = userEvent.setup();
+
+    const { getByTestId } = render(<UserPrompt />);
+
+    const mockOnAccept = vi.fn(() => {});
+
+    act(() => {
+      userPrompt({
+        header: "Testing",
+        body: "testing body",
+        onAccept: mockOnAccept,
+      });
+    });
+
+    await user.click(getByTestId("dialog-accept"));
+
+    expect(mockOnAccept).toHaveBeenCalled();
+  });
+
+  test("Clicking Cancel successfully calls the onCancel callback", async () => {
+    const user = userEvent.setup();
+
+    const { getByTestId } = render(<UserPrompt />);
+
+    const mockOnCancel = vi.fn(() => {});
+
+    act(() => {
+      userPrompt({
+        header: "Testing",
+        body: "testing body",
+        onAccept: vi.fn(),
+        onCancel: mockOnCancel,
+      });
+    });
+
+    await user.click(getByTestId("dialog-cancel"));
+
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+});

react-app/src/components/ConfirmationDialog/userPrompt.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+import { ConfirmationDialog } from "@/components/ConfirmationDialog";
+
+export type UserPrompt = {
+  header: string;
+  body: string;
+  cancelButtonText?: string;
+  acceptButtonText?: string;
+  areButtonsReversed?: boolean;
+  onAccept: () => void;
+  onCancel?: () => void;
+};
+
+class Observer {
+  subscribers: Array<(userPrompt: UserPrompt) => void>;
+  userPrompt: UserPrompt | null;
+
+  constructor() {
+    this.subscribers = [];
+    this.userPrompt = null;
+  }
+
+  subscribe = (subscriber: (userPrompt: UserPrompt | null) => void) => {
+    this.subscribers.push(subscriber);
+
+    return () => {
+      const index = this.subscribers.indexOf(subscriber);
+      this.subscribers.splice(index, 1);
+    };
+  };
+
+  private publish = (data: UserPrompt | null) => {
+    this.subscribers.forEach((subscriber) => subscriber(data));
+  };
+
+  create = (data: UserPrompt) => {
+    this.publish(data);
+    this.userPrompt = { ...data };
+  };
+
+  dismiss = () => {
+    this.publish(null);
+    this.userPrompt = null;
+  };
+}
+
+const userPromptState = new Observer();
+
+export const userPrompt = (newuserPrompt: UserPrompt) => {
+  return userPromptState.create(newuserPrompt);
+};
+
+export const UserPrompt = () => {
+  const [activeUserPrompt, setActiveUserPrompt] = useState<UserPrompt | null>(
+    null,
+  );
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    const unsubscribe = userPromptState.subscribe((userPrompt) => {
+      if (userPrompt) {
+        setActiveUserPrompt(userPrompt);
+        setIsOpen(true);
+      } else {
+        // artificial delay to prevent content from disappearing first
+        setTimeout(() => setActiveUserPrompt(null), 100);
+        setIsOpen(false);
+      }
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const onCancel = () => {
+    if (activeUserPrompt) {
+      if (activeUserPrompt.onCancel) {
+        activeUserPrompt.onCancel();
+      }
+      userPromptState.dismiss();
+    }
+  };
+
+  const onAccept = () => {
+    if (activeUserPrompt) {
+      activeUserPrompt.onAccept();
+      userPromptState.dismiss();
+    }
+  };
+
+  if (activeUserPrompt === null) {
+    return null;
+  }
+
+  return (
+    <ConfirmationDialog
+      open={isOpen}
+      title={activeUserPrompt.header}
+      body={activeUserPrompt.body}
+      onAccept={onAccept}
+      onCancel={onCancel}
+      cancelButtonText={activeUserPrompt.cancelButtonText}
+      acceptButtonText={activeUserPrompt.acceptButtonText}
+      areButtonsReversed={activeUserPrompt.areButtonsReversed}
+    />
+  );
+};

react-app/src/components/Context/index.ts

@@ -1,4 +1,3 @@
 export * from "./userContext";
 export * from "./alertContext";
-export * from "./modalContext";
 export * from "./alertContext";