feat(error): action buttons

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/components/Oops.test.tsx

@@ -1,4 +1,7 @@
-import { act } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { PersonIcon } from '@primer/octicons-react';
 
 import {
   ensureStableEmojis,
@@ -7,6 +10,12 @@ import {
 
 import { Oops } from './Oops';
 
+const navigateMock = vi.fn();
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
+  useNavigate: () => navigateMock,
+}));
+
 describe('renderer/components/Oops.tsx', () => {
   beforeEach(() => {
     ensureStableEmojis();
@@ -37,4 +46,26 @@ describe('renderer/components/Oops.tsx', () => {
 
     expect(tree.container).toMatchSnapshot();
   });
+
+  it('should render action buttons and navigate on click', async () => {
+    const mockError = {
+      title: 'Error title',
+      descriptions: ['Error description'],
+      emojis: ['🔥'],
+      actions: [
+        {
+          label: 'Go somewhere',
+          route: '/somewhere',
+          variant: 'danger' as const,
+          icon: PersonIcon,
+        },
+      ],
+    };
+
+    renderWithAppContext(<Oops error={mockError} />);
+
+    await userEvent.click(screen.getByText('Go somewhere'));
+
+    expect(navigateMock).toHaveBeenCalledWith('/somewhere');
+  });
 });

src/renderer/components/Oops.tsx

@@ -1,4 +1,7 @@
 import { type FC, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '@primer/react';
 
 import { EmojiSplash } from './layout/EmojiSplash';
 
@@ -16,14 +19,29 @@ export const Oops: FC<OopsProps> = ({
   fullHeight = true,
 }: OopsProps) => {
   const err = error ?? Errors.UNKNOWN;
+  const navigate = useNavigate();
 
   const emoji = useMemo(
     () => err.emojis[Math.floor(Math.random() * err.emojis.length)],
     [err],
   );
 
+  const actions = err.actions?.length
+    ? err.actions.map((action) => (
+        <Button
+          key={action.route}
+          leadingVisual={action.icon}
+          onClick={() => navigate(action.route)}
+          variant={action.variant}
+        >
+          {action.label}
+        </Button>
+      ))
+    : null;
+
   return (
     <EmojiSplash
+      actions={actions}
       emoji={emoji}
       fullHeight={fullHeight}
       heading={err.title}

src/renderer/components/layout/EmojiSplash.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
 import { Stack } from '@primer/react';
 
@@ -11,15 +11,12 @@ interface EmojiSplashProps {
   heading: string;
   subHeadings?: string[];
   fullHeight?: boolean;
+  actions?: ReactNode;
 }
 
-export const EmojiSplash: FC<EmojiSplashProps> = ({
-  fullHeight = true,
-  subHeadings = [],
-  ...props
-}: EmojiSplashProps) => {
+export const EmojiSplash: FC<EmojiSplashProps> = (props: EmojiSplashProps) => {
   return (
-    <Centered fullHeight={fullHeight}>
+    <Centered fullHeight={props.fullHeight}>
       <Stack
         align="center"
         direction="vertical"
@@ -31,14 +28,16 @@ export const EmojiSplash: FC<EmojiSplashProps> = ({
           <div className="text-xl font-semibold">{props.heading}</div>
         </Stack>
 
-        {subHeadings.map((description, i) => {
+        {props.subHeadings?.map((description, i) => {
           const key = `error_description_${i}`;
           return (
             <div className="text-center" key={key}>
               {description}
             </div>
           );
         })}
+
+        {props.actions && <div className="mt-2">{props.actions}</div>}
       </Stack>
     </Centered>
   );