Require loading prop on SideModalForm, fix snapshot create (#2539)

require loading prop on side modal form, fix snapshot create

Author: david-crespo

app/components/form/SideModalForm.tsx

@@ -41,9 +41,14 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
   resourceName: string
   /** Must be provided with a reason describing why it's disabled */
   submitDisabled?: string
+
+  // require loading and error so we can't forget to hook them up. there are a
+  // few forms that don't need them, so we'll use dummy values
+
   /** Error from the API call */
   submitError: ApiError | null
-  loading?: boolean
+  loading: boolean
+
   /** Only needed if you need to override the default title (Create/Edit ${resourceName}) */
   title?: string
   subtitle?: ReactNode

app/forms/disk-attach.tsx

@@ -35,7 +35,7 @@ export function AttachDiskSideModalForm({
   onSubmit,
   onDismiss,
   diskNamesToExclude = [],
-  loading,
+  loading = false,
   submitError = null,
 }: AttachDiskProps) {
   const { project } = useProjectSelector()

app/forms/idp/edit.tsx

@@ -58,6 +58,7 @@ export function EditIdpSideModalForm() {
       }
       // TODO: pass actual error when this form is hooked up
       submitError={null}
+      loading={false}
     >
       <PropertiesTable>
         <PropertiesTable.Row label="ID">

app/forms/image-edit.tsx

@@ -86,6 +86,7 @@ export function EditImageSideModalForm({
       }
       // TODO: pass actual error when this form is hooked up
       submitError={null}
+      loading={false}
     >
       <PropertiesTable>
         <PropertiesTable.Row label="Shared with">{type}</PropertiesTable.Row>

app/forms/image-from-snapshot.tsx

@@ -84,6 +84,7 @@ export function CreateImageFromSnapshotSideModalForm() {
         })
       }
       submitError={createImage.error}
+      loading={createImage.isPending}
     >
       <PropertiesTable>
         <PropertiesTable.Row label="Snapshot">{data.name}</PropertiesTable.Row>

app/forms/network-interface-create.tsx

@@ -42,7 +42,7 @@ type CreateNetworkInterfaceFormProps = {
 export function CreateNetworkInterfaceForm({
   onSubmit,
   onDismiss,
-  loading,
+  loading = false,
   submitError = null,
 }: CreateNetworkInterfaceFormProps) {
   const projectSelector = useProjectSelector()

app/forms/snapshot-create.tsx

@@ -72,6 +72,7 @@ export function CreateSnapshotSideModalForm() {
         createSnapshot.mutate({ query: projectSelector, body: values })
       }}
       submitError={createSnapshot.error}
+      loading={createSnapshot.isPending}
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />