Show mutation error on snapshot-to-image form (#1779)

pass mutation error to image from snapshot form, require submitError prop

Author: david-crespo

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

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">

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>

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>

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()
+})