From c3df1e2bc9181f214fdd0d8991f3246707a1a76f Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Sun, 8 Oct 2023 22:17:43 -0500
Subject: [PATCH] pass mutation error to image from snapshot form, require
 submitError prop

---
 app/components/form/SideModalForm.tsx |  2 +-
 app/forms/idp/edit.tsx                |  2 ++
 app/forms/image-edit.tsx              |  2 ++
 app/forms/image-from-snapshot.tsx     |  1 +
 app/test/e2e/snapshots.e2e.ts         | 15 +++++++++++++++
 5 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
index 87d3595161..770f7fdc12 100644
--- a/app/components/form/SideModalForm.tsx
+++ b/app/components/form/SideModalForm.tsx
@@ -29,7 +29,7 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
   /** Must be provided with a reason describing why it's disabled */
   submitDisabled?: string
   /** Error from the API call */
-  submitError?: ApiError | null
+  submitError: ApiError | null
   loading?: boolean
   title: string
   subtitle?: ReactNode
diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx
index 51ecdc7d83..8f23fcec83 100644
--- a/app/forms/idp/edit.tsx
+++ b/app/forms/idp/edit.tsx
@@ -48,6 +48,8 @@ export function EditIdpSideModalForm() {
           <Access16Icon /> {idp.name}
         </ResourceLabel>
       }
+      // TODO: pass actual error when this form is hooked up
+      submitError={null}
     >
       <PropertiesTable>
         <PropertiesTable.Row label="ID">
diff --git a/app/forms/image-edit.tsx b/app/forms/image-edit.tsx
index 98bd665505..d846776ee4 100644
--- a/app/forms/image-edit.tsx
+++ b/app/forms/image-edit.tsx
@@ -75,6 +75,8 @@ export function EditImageSideModalForm({
           <Images16Icon /> {image.name}
         </ResourceLabel>
       }
+      // TODO: pass actual error when this form is hooked up
+      submitError={null}
     >
       <PropertiesTable>
         <PropertiesTable.Row label="Shared with">{type}</PropertiesTable.Row>
diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx
index 13d2b17c53..ed19bd4188 100644
--- a/app/forms/image-from-snapshot.tsx
+++ b/app/forms/image-from-snapshot.tsx
@@ -78,6 +78,7 @@ export function CreateImageFromSnapshotSideModalForm() {
           body: { ...body, source: { type: 'snapshot', id: data.id } },
         })
       }
+      submitError={createImage.error}
     >
       <PropertiesTable>
         <PropertiesTable.Row label="Snapshot">{data.name}</PropertiesTable.Row>
diff --git a/app/test/e2e/snapshots.e2e.ts b/app/test/e2e/snapshots.e2e.ts
index 0efcc96ca0..0cd3a3f4dc 100644
--- a/app/test/e2e/snapshots.e2e.ts
+++ b/app/test/e2e/snapshots.e2e.ts
@@ -101,3 +101,18 @@ test('Create image from snapshot', async ({ page }) => {
     description: 'image description',
   })
 })
+
+test('Create image from snapshot, name taken', async ({ page }) => {
+  await page.goto('/projects/mock-project/snapshots')
+
+  const row = page.getByRole('row', { name: 'snapshot-1' })
+  await row.getByRole('button', { name: 'Row actions' }).click()
+  await page.getByRole('menuitem', { name: 'Create image' }).click()
+
+  await expectVisible(page, ['role=dialog[name="Create image from snapshot"]'])
+
+  await page.fill('role=textbox[name="Name"]', 'image-1')
+  await page.click('role=button[name="Create image"]')
+
+  await expect(page.getByText('name already exists').nth(0)).toBeVisible()
+})