Remove footer when side modal is read-only (#2621)

* Remove sidemodal footer when read-only

* Update test to use X to close modal

* move close button back into SideModal

---------

Co-authored-by: David Crespo <[email protected]>

Author: charliepark

app/components/form/SideModalForm.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+
 import { useEffect, useId, useState, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
 import { NavigationType, useNavigationType } from 'react-router-dom'
@@ -127,11 +128,11 @@ export function SideModalForm<TFieldValues extends FieldValues>({
           {children}
         </form>
       </SideModal.Body>
-      <SideModal.Footer error={!!submitError}>
-        <Button variant="ghost" size="sm" onClick={onDismiss}>
-          Cancel
-        </Button>
-        {onSubmit && (
+      {onSubmit && (
+        <SideModal.Footer error={!!submitError}>
+          <Button variant="ghost" size="sm" onClick={onDismiss}>
+            Cancel
+          </Button>
           <Button
             type="submit"
             size="sm"
@@ -142,8 +143,8 @@ export function SideModalForm<TFieldValues extends FieldValues>({
           >
             {label}
           </Button>
-        )}
-      </SideModal.Footer>
+        </SideModal.Footer>
+      )}
 
       {showNavGuard && (
         <Modal

app/ui/lib/SideModal.tsx

@@ -115,6 +115,14 @@ export function SideModal({
                     </div>
                   )}
                   {children}
+
+                  {/* Close button is here at the end so we aren't automatically focusing on it when the side modal is opened. Positioned in the safe area at the top */}
+                  <Dialog.Close
+                    className="absolute right-[var(--content-gutter)] top-10 -m-2 flex rounded p-2 hover:bg-hover"
+                    aria-label="Close"
+                  >
+                    <Close12Icon className="text-default" />
+                  </Dialog.Close>
                 </AnimatedDialogContent>
               </Dialog.Portal>
             </Dialog.Root>
@@ -161,15 +169,5 @@ SideModal.Footer = ({ children, error }: { children: ReactNode; error?: boolean
       </div>
     )}
     {children}
-    {/*
-      Close button is here at the end so we aren't automatically focusing on it
-      when the side modal is opened. Positioned in the safe area at the top
-     */}
-    <Dialog.Close
-      className="absolute right-[var(--content-gutter)] top-10 -m-2 flex rounded p-2 hover:bg-hover"
-      aria-label="Close"
-    >
-      <Close12Icon className="text-default" />
-    </Dialog.Close>
   </footer>
 )

test/e2e/silos.e2e.ts

@@ -200,7 +200,7 @@ test('Identity providers', async ({ page }) => {
     'groups'
   )
 
-  await page.getByRole('button', { name: 'Cancel' }).click()
+  await page.getByRole('button', { name: 'Close' }).click()
 
   await expect(dialog).toBeHidden()
 
@@ -320,7 +320,7 @@ test('Silo IP pools link pool', async ({ page }) => {
   await expect(modal).toBeVisible()
 
   // close modal works
-  await page.getByRole('button', { name: 'Cancel' }).click()
+  await page.getByRole('button', { name: 'Close' }).click()
   await expect(modal).toBeHidden()
 
   // reopen