place error at the top

Author: Assem-Uber

src/views/schedule-actions/schedule-actions-modal-content/__tests__/schedule-actions-modal-content.test.tsx

@@ -33,6 +33,7 @@ jest.mock('next/navigation', () => ({
 describe(ScheduleActionsModalContent.name, () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    HTMLElement.prototype.scrollIntoView = jest.fn();
   });
 
   it('renders the modal content as expected', async () => {
@@ -84,6 +85,9 @@ describe(ScheduleActionsModalContent.name, () => {
     await waitFor(() => {
       expect(screen.getByText('Failed to pause schedule')).toBeInTheDocument();
     });
+    expect(HTMLElement.prototype.scrollIntoView).toHaveBeenCalledWith({
+      block: 'start',
+    });
     expect(mockOnClose).not.toHaveBeenCalled();
   });
 });

src/views/schedule-actions/schedule-actions-modal-content/schedule-actions-modal-content.styles.ts

@@ -10,7 +10,10 @@ export const styled = {
   ModalBody: withStyle(ModalBody, ({ $theme }: { $theme: Theme }) => ({
     display: 'flex',
     flexDirection: 'column',
+    rowGap: $theme.sizing.scale600,
     marginBottom: $theme.sizing.scale800,
+    overflowY: 'auto',
+    maxHeight: '70vh',
   })),
   ContextBanner: createStyled(
     'div',

src/views/schedule-actions/schedule-actions-modal-content/schedule-actions-modal-content.tsx

@@ -5,6 +5,7 @@ import { KIND as BUTTON_KIND, SIZE } from 'baseui/button';
 import { ModalButton } from 'baseui/modal';
 import { useSnackbar } from 'baseui/snackbar';
 import { useRouter } from 'next/navigation';
+import { useEffect, useRef } from 'react';
 import { type DefaultValues, type FieldValues, useForm } from 'react-hook-form';
 import { MdCheckCircle, MdErrorOutline } from 'react-icons/md';
 
@@ -30,6 +31,7 @@ export default function ScheduleActionsModalContent<
   const queryClient = useQueryClient();
   const router = useRouter();
   const { enqueue, dequeue } = useSnackbar();
+  const errorAlertRef = useRef<HTMLDivElement>(null);
 
   type OptionalFormData = FormData extends FieldValues ? FormData : FieldValues;
 
@@ -85,6 +87,12 @@ export default function ScheduleActionsModalContent<
     queryClient
   );
 
+  useEffect(() => {
+    if (error) {
+      errorAlertRef.current?.scrollIntoView({ block: 'start' });
+    }
+  }, [error]);
+
   const onSubmit = (data: OptionalFormData) => {
     mutate({
       ...params,
@@ -115,6 +123,20 @@ export default function ScheduleActionsModalContent<
       <styled.ModalHeader>{`${action.label} schedule`}</styled.ModalHeader>
       <form onSubmit={handleSubmit(onSubmit)}>
         <styled.ModalBody>
+          {error && (
+            <div ref={errorAlertRef} role="alert">
+              <Banner
+                hierarchy={HIERARCHY.low}
+                kind={BANNER_KIND.negative}
+                overrides={overrides.banner}
+                artwork={{
+                  icon: MdErrorOutline,
+                }}
+              >
+                {error.message}
+              </Banner>
+            </div>
+          )}
           {modalBanner ? (
             <styled.ContextBanner>{modalBanner}</styled.ContextBanner>
           ) : null}
@@ -130,18 +152,6 @@ export default function ScheduleActionsModalContent<
                 scheduleId={params.scheduleId}
               />
             )}
-            {error && (
-              <Banner
-                hierarchy={HIERARCHY.low}
-                kind={BANNER_KIND.negative}
-                overrides={overrides.banner}
-                artwork={{
-                  icon: MdErrorOutline,
-                }}
-              >
-                {error.message}
-              </Banner>
-            )}
           </styled.ModalBodyContent>
         </styled.ModalBody>
         <styled.ModalFooter>