From 4edecaca06276ab3f811ddf11f972e5af5bf4c9c Mon Sep 17 00:00:00 2001
From: Adam Baker <bakerac4@gmail.com>
Date: Tue, 28 Jan 2025 14:36:52 -0500
Subject: [PATCH] Fixing PR issues - adding title slot prop and renaming
 actionChildren to be actions

---
 app/src/core/components/Modal.tsx              | 18 +++++++++++++-----
 .../core/components/__tests__/Modal.test.tsx   | 12 +++++++++++-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/src/core/components/Modal.tsx b/app/src/core/components/Modal.tsx
index fc04ba5..68cb87c 100644
--- a/app/src/core/components/Modal.tsx
+++ b/app/src/core/components/Modal.tsx
@@ -2,9 +2,10 @@ import Dialog, { DialogProps } from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
-import { DialogActions } from '@mui/material';
+import { DialogActions, DialogTitle } from '@mui/material';
+import { ReactNode } from 'react';
 
-interface ResponsiveModalProps extends DialogProps {
+interface ResponsiveModalProps extends Omit<DialogProps, 'title'> {
     /**
      * Callback function to be called when the modal is closed
      *
@@ -22,16 +23,22 @@ interface ResponsiveModalProps extends DialogProps {
      *
      * @memberof ResponsiveModalProps
      */
-    actionChildren?: DialogProps['children'];
+    actions?: ReactNode;
     /**
      * Overrides the default fullscreen behavior of showing full screen based upon the theme breakpoints (md or less)
      *
      * @memberof ResponsiveModalProps
      */
     fullScreen?: boolean;
+    /**
+     * Title of the modal
+     *
+     * @memberof ResponsiveModalProps
+     */
+    title?: ReactNode;
 }
 
-export default function Modal({ children, onCloseCallback, closeDisabled, actionChildren, fullScreen, ...rest }: ResponsiveModalProps) {
+export default function Modal({ title, children, onCloseCallback, closeDisabled, actions, fullScreen, ...rest }: ResponsiveModalProps) {
     const theme = useTheme();
     const isFullScreen = fullScreen ?? useMediaQuery(theme.breakpoints.down('md'));
 
@@ -45,8 +52,9 @@ export default function Modal({ children, onCloseCallback, closeDisabled, action
 
     return (
         <Dialog {...rest} fullScreen={isFullScreen} onClose={onClose}>
+            {title && <DialogTitle>{title}</DialogTitle>}
             <DialogContent>{children}</DialogContent>
-            {actionChildren && <DialogActions>{actionChildren}</DialogActions>}
+            {actions && <DialogActions>{actions}</DialogActions>}
         </Dialog>
     );
 }
diff --git a/app/src/core/components/__tests__/Modal.test.tsx b/app/src/core/components/__tests__/Modal.test.tsx
index 6294ef8..ddd5d87 100644
--- a/app/src/core/components/__tests__/Modal.test.tsx
+++ b/app/src/core/components/__tests__/Modal.test.tsx
@@ -17,7 +17,7 @@ describe('Modal', () => {
 
     it('renders action children when provided', () => {
         render(
-            <Modal open actionChildren={<button>Action Button</button>}>
+            <Modal open actions={<button>Action Button</button>}>
                 <div>Test Content</div>
             </Modal>
         );
@@ -95,4 +95,14 @@ describe('Modal', () => {
 
         expect(document.querySelector('.MuiDialog-paperFullScreen')).not.toBeInTheDocument();
     });
+
+    it('renders title when provided', () => {
+        render(
+            <Modal open title="Test Title">
+                <div>Test Content</div>
+            </Modal>
+        );
+
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
+    });
 });