Create the ApiErrorModal (#80)

uhawaii-system-its-ti-iam · Sep 20, 2024 · cd24b3f · cd24b3f
1 parent a29f968
commit cd24b3f
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 11 deletions.
diff --git a/ui/src/components/layout/navbar/navbar.tsx b/ui/src/components/layout/navbar/navbar.tsx
@@ -35,17 +35,19 @@ const Navbar = async () => {
                             </Link>
                         </div>
                         <div className="text-lg text-uh-black my-auto lg:space-x-5">
-                            {NavbarLinks
-                                .filter((navbarLink) =>
-                                    currentUser.roles.includes(Role.ADMIN) || 
-                                    currentUser.roles.includes(navbarLink.role))
-                                .map((navbarLink) => 
-                                    <Link
-                                        href={navbarLink.link}
-                                        key={navbarLink.name}
-                                        className="hover:text-uh-teal lg:inline hidden">
-                                        {navbarLink.name}
-                                    </Link>)}
+                            {NavbarLinks.filter(
+                                (navbarLink) =>
+                                    currentUser.roles.includes(Role.ADMIN) ||
+                                    currentUser.roles.includes(navbarLink.role)
+                            ).map((navbarLink) => (
+                                <Link
+                                    href={navbarLink.link}
+                                    key={navbarLink.name}
+                                    className="hover:text-uh-teal lg:inline hidden"
+                                >
+                                    {navbarLink.name}
+                                </Link>
+                            ))}
                             <LoginButton currentUser={currentUser} />
                         </div>
                     </div>

diff --git a/ui/src/components/modal/api-error-modal.tsx b/ui/src/components/modal/api-error-modal.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import {
+    AlertDialog,
+    AlertDialogHeader,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogTitle,
+    AlertDialogFooter,
+    AlertDialogAction,
+    AlertDialogCancel
+} from '@/components/ui/alert-dialog';
+import Link from 'next/link';
+import { useState } from 'react';
+
+const ApiErrorModal = ({ open }: { open: boolean }) => {
+    const [openApiErrorModal, setOpenApiErrorModal] = useState(open);
+
+    /**
+     * Closes the modal.
+     */
+    const close = () => {
+        setOpenApiErrorModal(false);
+    };
+    return (
+        <AlertDialog open={openApiErrorModal}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Error</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        There was an unexpected communications problem. Please use your browser to refresh the page and
+                        try again.
+                        <br />
+                        <br />
+                        If the error persists please refer to our
+                        <Link className="text-text-color" href={'/feedback'} onClick={() => close()}>
+                            {' '}
+                            feedback page.
+                        </Link>
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel onClick={() => close()}>OK</AlertDialogCancel>
+                    <Link href={'/feedback'}>
+                        <AlertDialogAction onClick={() => close()}>Feedback</AlertDialogAction>
+                    </Link>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+};
+
+export default ApiErrorModal;
diff --git a/ui/tests/app/_components/modal/api-error-modal.test.tsx b/ui/tests/app/_components/modal/api-error-modal.test.tsx
@@ -0,0 +1,51 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import ApiErrorModal from '@/components/modal/api-error-modal';
+
+jest.mock('@/access/authentication');
+
+describe('ApiErrorModal', () => {
+    it('should open the API Error modal', () => {
+        render(<ApiErrorModal open={true} />);
+        fireEvent.focus(document);
+
+        expect(screen.getByRole('alertdialog', { name: 'Error' })).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: 'feedback page.' })).toHaveAttribute('href', '/feedback');
+        expect(screen.getByRole('link', { name: 'Feedback' })).toHaveAttribute('href', '/feedback');
+        expect(screen.getByRole('button', { name: 'OK' }));
+        expect(screen.getByRole('button', { name: 'Feedback' }));
+    });
+
+    it('should close the API Error modal if open evaluates to false', () => {
+        render(<ApiErrorModal open={false} />);
+        fireEvent.focus(document);
+
+        expect(screen.queryByRole('alertdialog', { name: 'Error' })).not.toBeInTheDocument();
+    });
+
+    it('should close the modal after clicking the Feedback button', () => {
+        render(<ApiErrorModal open={true} />);
+        fireEvent.focus(document);
+
+        expect(screen.getByRole('alertdialog', { name: 'Error' })).toBeInTheDocument();
+        fireEvent.click(screen.getByRole('button', { name: 'Feedback' }));
+        expect(screen.queryByRole('alertdialog', { name: 'Error' })).not.toBeInTheDocument();
+    });
+
+    it('should close the modal after clicking the provided link', () => {
+        render(<ApiErrorModal open={true} />);
+        fireEvent.focus(document);
+
+        expect(screen.getByRole('alertdialog', { name: 'Error' })).toBeInTheDocument();
+        fireEvent.click(screen.getByRole('link', { name: 'feedback page.' }));
+        expect(screen.queryByRole('alertdialog', { name: 'Error' })).not.toBeInTheDocument();
+    });
+
+    it('should close the modal after clicking the OK button', () => {
+        render(<ApiErrorModal open={true} />);
+        fireEvent.focus(document);
+
+        expect(screen.getByRole('alertdialog', { name: 'Error' })).toBeInTheDocument();
+        fireEvent.click(screen.getByRole('button', { name: 'OK' }));
+        expect(screen.queryByRole('alertdialog', { name: 'Error' })).not.toBeInTheDocument();
+    });
+});