diff --git a/app/javascript/spec/cloud-volume-form/__snapshots__/attach-detach-cloud-volume-form.spec.js.snap b/app/javascript/spec/cloud-volume-form/__snapshots__/attach-detach-cloud-volume-form.spec.js.snap
index 120df804862..eb86f377754 100644
--- a/app/javascript/spec/cloud-volume-form/__snapshots__/attach-detach-cloud-volume-form.spec.js.snap
+++ b/app/javascript/spec/cloud-volume-form/__snapshots__/attach-detach-cloud-volume-form.spec.js.snap
@@ -4652,7 +4652,1218 @@ exports[`Attach / Detach form component should submit Attach API call 1`] = `
     dropdownLabel="Instance"
     isAttach={true}
     recordId="1"
-  />
+  >
+    <div
+      className="tasks-form"
+    >
+      <Connect(MiqFormRenderer)
+        FormTemplate={[Function]}
+        buttonsLabels={
+          Object {
+            "submitLabel": "Attach",
+          }
+        }
+        canReset={true}
+        onCancel={[Function]}
+        onSubmit={[Function]}
+        schema={
+          Object {
+            "fields": Array [
+              Object {
+                "component": "select",
+                "id": "dropdown_id",
+                "includeEmpty": true,
+                "isRequired": true,
+                "label": "Instance",
+                "name": "dropdown_id",
+                "options": Array [
+                  Object {
+                    "label": "server1",
+                    "value": "1",
+                  },
+                  Object {
+                    "label": "server2",
+                    "value": "2",
+                  },
+                  Object {
+                    "label": "server3",
+                    "value": "3",
+                  },
+                  Object {
+                    "label": "server4",
+                    "value": "4",
+                  },
+                  Object {
+                    "label": "server5",
+                    "value": "5",
+                  },
+                ],
+              },
+              Array [
+                Object {
+                  "component": "text-field",
+                  "id": "device_mountpoint",
+                  "isRequired": true,
+                  "label": "Device Mountpoint",
+                  "name": "device_mountpoint",
+                  "validate": Array [
+                    Object {
+                      "type": "required",
+                    },
+                  ],
+                },
+              ],
+            ],
+          }
+        }
+      >
+        <MiqFormRenderer
+          FormTemplate={[Function]}
+          buttonsLabels={
+            Object {
+              "submitLabel": "Attach",
+            }
+          }
+          canReset={true}
+          className="form-react"
+          componentMapper={
+            Object {
+              "checkbox": [Function],
+              "code-editor": [Function],
+              "date-picker": [Function],
+              "dual-list-select": [Function],
+              "edit-password-field": [Function],
+              "field-array": [Function],
+              "file-upload": [Function],
+              "font-icon-picker": [Function],
+              "font-icon-picker-ddf": [Function],
+              "multi-select": [Function],
+              "password-field": [Function],
+              "plain-text": [Function],
+              "radio": [Function],
+              "select": [Function],
+              "slider": [Function],
+              "sub-form": [Function],
+              "switch": [Function],
+              "tabs": [Function],
+              "text-field": [Function],
+              "textarea": [Function],
+              "time-picker": [Function],
+              "tree-selector": [Function],
+              "tree-view": [Function],
+              "validate-credentials": [Function],
+              "wizard": [Function],
+            }
+          }
+          disableSubmit={
+            Array [
+              "pristine",
+              "invalid",
+            ]
+          }
+          dispatch={[Function]}
+          onCancel={[Function]}
+          onSubmit={[Function]}
+          schema={
+            Object {
+              "fields": Array [
+                Object {
+                  "component": "select",
+                  "id": "dropdown_id",
+                  "includeEmpty": true,
+                  "isRequired": true,
+                  "label": "Instance",
+                  "name": "dropdown_id",
+                  "options": Array [
+                    Object {
+                      "label": "server1",
+                      "value": "1",
+                    },
+                    Object {
+                      "label": "server2",
+                      "value": "2",
+                    },
+                    Object {
+                      "label": "server3",
+                      "value": "3",
+                    },
+                    Object {
+                      "label": "server4",
+                      "value": "4",
+                    },
+                    Object {
+                      "label": "server5",
+                      "value": "5",
+                    },
+                  ],
+                },
+                Array [
+                  Object {
+                    "component": "text-field",
+                    "id": "device_mountpoint",
+                    "isRequired": true,
+                    "label": "Device Mountpoint",
+                    "name": "device_mountpoint",
+                    "validate": Array [
+                      Object {
+                        "type": "required",
+                      },
+                    ],
+                  },
+                ],
+              ],
+            }
+          }
+          showFormControls={true}
+        >
+          <FormRenderer
+            FormTemplate={[Function]}
+            clearOnUnmount={false}
+            componentMapper={
+              Object {
+                "checkbox": [Function],
+                "code-editor": [Function],
+                "date-picker": [Function],
+                "dual-list-select": [Function],
+                "edit-password-field": [Function],
+                "field-array": [Function],
+                "file-upload": [Function],
+                "font-icon-picker": [Function],
+                "font-icon-picker-ddf": [Function],
+                "multi-select": [Function],
+                "password-field": [Function],
+                "plain-text": [Function],
+                "radio": [Function],
+                "select": [Function],
+                "slider": [Function],
+                "spy-field": [Function],
+                "sub-form": [Function],
+                "switch": [Function],
+                "tabs": [Function],
+                "text-field": [Function],
+                "textarea": [Function],
+                "time-picker": [Function],
+                "tree-selector": [Function],
+                "tree-view": [Function],
+                "validate-credentials": [Function],
+                "wizard": [Function],
+              }
+            }
+            dispatch={[Function]}
+            initialValues={Object {}}
+            onCancel={[Function]}
+            onReset={[Function]}
+            onSubmit={[Function]}
+            schema={
+              Object {
+                "fields": Array [
+                  Object {
+                    "component": "select",
+                    "id": "dropdown_id",
+                    "includeEmpty": true,
+                    "isRequired": true,
+                    "label": "Instance",
+                    "name": "dropdown_id",
+                    "options": Array [
+                      Object {
+                        "label": "server1",
+                        "value": "1",
+                      },
+                      Object {
+                        "label": "server2",
+                        "value": "2",
+                      },
+                      Object {
+                        "label": "server3",
+                        "value": "3",
+                      },
+                      Object {
+                        "label": "server4",
+                        "value": "4",
+                      },
+                      Object {
+                        "label": "server5",
+                        "value": "5",
+                      },
+                    ],
+                  },
+                  Array [
+                    Object {
+                      "component": "text-field",
+                      "id": "device_mountpoint",
+                      "isRequired": true,
+                      "label": "Device Mountpoint",
+                      "name": "device_mountpoint",
+                      "validate": Array [
+                        Object {
+                          "type": "required",
+                        },
+                      ],
+                    },
+                  ],
+                  Object {
+                    "component": "spy-field",
+                    "initialize": undefined,
+                    "name": "spy-field",
+                  },
+                ],
+              }
+            }
+          >
+            <ReactFinalForm
+              decorators={
+                Array [
+                  [Function],
+                ]
+              }
+              dispatch={[Function]}
+              initialValues={Object {}}
+              mutators={
+                Object {
+                  "concat": [Function],
+                  "insert": [Function],
+                  "move": [Function],
+                  "pop": [Function],
+                  "push": [Function],
+                  "remove": [Function],
+                  "removeBatch": [Function],
+                  "shift": [Function],
+                  "swap": [Function],
+                  "unshift": [Function],
+                  "update": [Function],
+                }
+              }
+              onSubmit={[Function]}
+              render={[Function]}
+              subscription={
+                Object {
+                  "pristine": true,
+                  "submitting": true,
+                  "valid": true,
+                }
+              }
+            >
+              <FormTemplate
+                formFields={
+                  Array [
+                    <SingleField
+                      component="select"
+                      id="dropdown_id"
+                      includeEmpty={true}
+                      isRequired={true}
+                      label="Instance"
+                      name="dropdown_id"
+                      options={
+                        Array [
+                          Object {
+                            "label": "server1",
+                            "value": "1",
+                          },
+                          Object {
+                            "label": "server2",
+                            "value": "2",
+                          },
+                          Object {
+                            "label": "server3",
+                            "value": "3",
+                          },
+                          Object {
+                            "label": "server4",
+                            "value": "4",
+                          },
+                          Object {
+                            "label": "server5",
+                            "value": "5",
+                          },
+                        ]
+                      }
+                    />,
+                    Array [
+                      <SingleField
+                        component="text-field"
+                        id="device_mountpoint"
+                        isRequired={true}
+                        label="Device Mountpoint"
+                        name="device_mountpoint"
+                        validate={
+                          Array [
+                            Object {
+                              "type": "required",
+                            },
+                          ]
+                        }
+                      />,
+                    ],
+                    <SingleField
+                      component="spy-field"
+                      name="spy-field"
+                    />,
+                  ]
+                }
+                schema={
+                  Object {
+                    "fields": Array [
+                      Object {
+                        "component": "select",
+                        "id": "dropdown_id",
+                        "includeEmpty": true,
+                        "isRequired": true,
+                        "label": "Instance",
+                        "name": "dropdown_id",
+                        "options": Array [
+                          Object {
+                            "label": "server1",
+                            "value": "1",
+                          },
+                          Object {
+                            "label": "server2",
+                            "value": "2",
+                          },
+                          Object {
+                            "label": "server3",
+                            "value": "3",
+                          },
+                          Object {
+                            "label": "server4",
+                            "value": "4",
+                          },
+                          Object {
+                            "label": "server5",
+                            "value": "5",
+                          },
+                        ],
+                      },
+                      Array [
+                        Object {
+                          "component": "text-field",
+                          "id": "device_mountpoint",
+                          "isRequired": true,
+                          "label": "Device Mountpoint",
+                          "name": "device_mountpoint",
+                          "validate": Array [
+                            Object {
+                              "type": "required",
+                            },
+                          ],
+                        },
+                      ],
+                      Object {
+                        "component": "spy-field",
+                        "initialize": undefined,
+                        "name": "spy-field",
+                      },
+                    ],
+                  }
+                }
+              >
+                <FormTemplate
+                  fields={
+                    Array [
+                      Object {
+                        "component": "text-field",
+                        "id": "device_mountpoint",
+                        "isRequired": true,
+                        "label": "Device Mountpoint",
+                        "name": "device_mountpoint",
+                        "validate": Array [
+                          Object {
+                            "type": "required",
+                          },
+                        ],
+                      },
+                    ]
+                  }
+                  formFields={
+                    Array [
+                      <SingleField
+                        component="select"
+                        id="dropdown_id"
+                        includeEmpty={true}
+                        isRequired={true}
+                        label="Instance"
+                        name="dropdown_id"
+                        options={
+                          Array [
+                            Object {
+                              "label": "server1",
+                              "value": "1",
+                            },
+                            Object {
+                              "label": "server2",
+                              "value": "2",
+                            },
+                            Object {
+                              "label": "server3",
+                              "value": "3",
+                            },
+                            Object {
+                              "label": "server4",
+                              "value": "4",
+                            },
+                            Object {
+                              "label": "server5",
+                              "value": "5",
+                            },
+                          ]
+                        }
+                      />,
+                      Array [
+                        <SingleField
+                          component="text-field"
+                          id="device_mountpoint"
+                          isRequired={true}
+                          label="Device Mountpoint"
+                          name="device_mountpoint"
+                          validate={
+                            Array [
+                              Object {
+                                "type": "required",
+                              },
+                            ]
+                          }
+                        />,
+                      ],
+                      <SingleField
+                        component="spy-field"
+                        name="spy-field"
+                      />,
+                    ]
+                  }
+                  isAttach={true}
+                  schema={
+                    Object {
+                      "fields": Array [
+                        Object {
+                          "component": "select",
+                          "id": "dropdown_id",
+                          "includeEmpty": true,
+                          "isRequired": true,
+                          "label": "Instance",
+                          "name": "dropdown_id",
+                          "options": Array [
+                            Object {
+                              "label": "server1",
+                              "value": "1",
+                            },
+                            Object {
+                              "label": "server2",
+                              "value": "2",
+                            },
+                            Object {
+                              "label": "server3",
+                              "value": "3",
+                            },
+                            Object {
+                              "label": "server4",
+                              "value": "4",
+                            },
+                            Object {
+                              "label": "server5",
+                              "value": "5",
+                            },
+                          ],
+                        },
+                        Array [
+                          Object {
+                            "component": "text-field",
+                            "id": "device_mountpoint",
+                            "isRequired": true,
+                            "label": "Device Mountpoint",
+                            "name": "device_mountpoint",
+                            "validate": Array [
+                              Object {
+                                "type": "required",
+                              },
+                            ],
+                          },
+                        ],
+                        Object {
+                          "component": "spy-field",
+                          "initialize": undefined,
+                          "name": "spy-field",
+                        },
+                      ],
+                    }
+                  }
+                >
+                  <form
+                    onSubmit={[Function]}
+                  >
+                    <SingleField
+                      component="select"
+                      id="dropdown_id"
+                      includeEmpty={true}
+                      isRequired={true}
+                      key="dropdown_id"
+                      label="Instance"
+                      name="dropdown_id"
+                      options={
+                        Array [
+                          Object {
+                            "label": "server1",
+                            "value": "1",
+                          },
+                          Object {
+                            "label": "server2",
+                            "value": "2",
+                          },
+                          Object {
+                            "label": "server3",
+                            "value": "3",
+                          },
+                          Object {
+                            "label": "server4",
+                            "value": "4",
+                          },
+                          Object {
+                            "label": "server5",
+                            "value": "5",
+                          },
+                        ]
+                      }
+                    >
+                      <FormConditionWrapper
+                        field={
+                          Object {
+                            "component": "select",
+                            "id": "dropdown_id",
+                            "includeEmpty": true,
+                            "isRequired": true,
+                            "label": "Instance",
+                            "name": "dropdown_id",
+                            "options": Array [
+                              Object {
+                                "label": "server1",
+                                "value": "1",
+                              },
+                              Object {
+                                "label": "server2",
+                                "value": "2",
+                              },
+                              Object {
+                                "label": "server3",
+                                "value": "3",
+                              },
+                              Object {
+                                "label": "server4",
+                                "value": "4",
+                              },
+                              Object {
+                                "label": "server5",
+                                "value": "5",
+                              },
+                            ],
+                          }
+                        }
+                      >
+                        <FormFieldHideWrapper
+                          hideField={false}
+                        >
+                          <SelectWithOnChange
+                            component="select"
+                            id="dropdown_id"
+                            includeEmpty={true}
+                            isRequired={true}
+                            label="Instance"
+                            name="dropdown_id"
+                            options={
+                              Array [
+                                Object {
+                                  "label": "server1",
+                                  "value": "1",
+                                },
+                                Object {
+                                  "label": "server2",
+                                  "value": "2",
+                                },
+                                Object {
+                                  "label": "server3",
+                                  "value": "3",
+                                },
+                                Object {
+                                  "label": "server4",
+                                  "value": "4",
+                                },
+                                Object {
+                                  "label": "server5",
+                                  "value": "5",
+                                },
+                              ]
+                            }
+                            placeholder="<Choose>"
+                          >
+                            <Select
+                              component="select"
+                              id="dropdown_id"
+                              isRequired={true}
+                              label="Instance"
+                              loadingMessage="Loading..."
+                              name="dropdown_id"
+                              options={
+                                Array [
+                                  Object {
+                                    "label": "<Choose>",
+                                    "value": undefined,
+                                  },
+                                  Object {
+                                    "label": "server1",
+                                    "value": "1",
+                                  },
+                                  Object {
+                                    "label": "server2",
+                                    "value": "2",
+                                  },
+                                  Object {
+                                    "label": "server3",
+                                    "value": "3",
+                                  },
+                                  Object {
+                                    "label": "server4",
+                                    "value": "4",
+                                  },
+                                  Object {
+                                    "label": "server5",
+                                    "value": "5",
+                                  },
+                                ]
+                              }
+                              placeholder="<Choose>"
+                            >
+                              <Select
+                                SelectComponent={[Function]}
+                                id="dropdown_id"
+                                invalidText=""
+                                labelText={
+                                  <IsRequired>
+                                    Instance
+                                  </IsRequired>
+                                }
+                                loadOptionsChangeCounter={1}
+                                loadingMessage="Loading..."
+                                name="dropdown_id"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                options={
+                                  Array [
+                                    Object {
+                                      "label": "<Choose>",
+                                      "value": undefined,
+                                    },
+                                    Object {
+                                      "label": "server1",
+                                      "value": "1",
+                                    },
+                                    Object {
+                                      "label": "server2",
+                                      "value": "2",
+                                    },
+                                    Object {
+                                      "label": "server3",
+                                      "value": "3",
+                                    },
+                                    Object {
+                                      "label": "server4",
+                                      "value": "4",
+                                    },
+                                    Object {
+                                      "label": "server5",
+                                      "value": "5",
+                                    },
+                                  ]
+                                }
+                                placeholder="<Choose>"
+                                simpleValue={false}
+                                value=""
+                              >
+                                <ClearedSelect
+                                  className=""
+                                  closeMenuOnSelect={true}
+                                  hideSelectedOptions={false}
+                                  id="dropdown_id"
+                                  invalidText=""
+                                  isClearable={false}
+                                  isFetching={false}
+                                  isSearchable={false}
+                                  labelText={
+                                    <IsRequired>
+                                      Instance
+                                    </IsRequired>
+                                  }
+                                  name="dropdown_id"
+                                  noOptionsMessage={[Function]}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  onInputChange={[Function]}
+                                  options={
+                                    Array [
+                                      Object {
+                                        "label": "<Choose>",
+                                        "value": undefined,
+                                      },
+                                      Object {
+                                        "label": "server1",
+                                        "value": "1",
+                                      },
+                                      Object {
+                                        "label": "server2",
+                                        "value": "2",
+                                      },
+                                      Object {
+                                        "label": "server3",
+                                        "value": "3",
+                                      },
+                                      Object {
+                                        "label": "server4",
+                                        "value": "4",
+                                      },
+                                      Object {
+                                        "label": "server5",
+                                        "value": "5",
+                                      },
+                                    ]
+                                  }
+                                  placeholder="<Choose>"
+                                  value=""
+                                >
+                                  <Select
+                                    className=""
+                                    disabled={false}
+                                    helperText=""
+                                    id="dropdown_id"
+                                    inline={false}
+                                    invalid={false}
+                                    invalidText=""
+                                    labelText={
+                                      <IsRequired>
+                                        Instance
+                                      </IsRequired>
+                                    }
+                                    light={false}
+                                    name="dropdown_id"
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    value=""
+                                  >
+                                    <div
+                                      className="bx--form-item"
+                                    >
+                                      <div
+                                        className="bx--select"
+                                      >
+                                        <label
+                                          className="bx--label"
+                                          htmlFor="dropdown_id"
+                                        >
+                                          <IsRequired>
+                                            <span
+                                              aria-hidden="true"
+                                              className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
+                                            >
+                                              *
+                                            </span>
+                                            Instance
+                                          </IsRequired>
+                                        </label>
+                                        <div
+                                          className="bx--select-input__wrapper"
+                                          data-invalid={null}
+                                        >
+                                          <select
+                                            className="bx--select-input"
+                                            id="dropdown_id"
+                                            name="dropdown_id"
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            onFocus={[Function]}
+                                            value=""
+                                          >
+                                            <SelectItem
+                                              disabled={false}
+                                              hidden={false}
+                                              key="0"
+                                              label="<Choose>"
+                                              text="<Choose>"
+                                              value=""
+                                            >
+                                              <option
+                                                className="bx--select-option"
+                                                disabled={false}
+                                                hidden={false}
+                                                label="<Choose>"
+                                                value=""
+                                              >
+                                                &lt;Choose&gt;
+                                              </option>
+                                            </SelectItem>
+                                            <SelectItem
+                                              disabled={false}
+                                              hidden={false}
+                                              key="1"
+                                              label="server1"
+                                              text="server1"
+                                              value="1"
+                                            >
+                                              <option
+                                                className="bx--select-option"
+                                                disabled={false}
+                                                hidden={false}
+                                                label="server1"
+                                                value="1"
+                                              >
+                                                server1
+                                              </option>
+                                            </SelectItem>
+                                            <SelectItem
+                                              disabled={false}
+                                              hidden={false}
+                                              key="2"
+                                              label="server2"
+                                              text="server2"
+                                              value="2"
+                                            >
+                                              <option
+                                                className="bx--select-option"
+                                                disabled={false}
+                                                hidden={false}
+                                                label="server2"
+                                                value="2"
+                                              >
+                                                server2
+                                              </option>
+                                            </SelectItem>
+                                            <SelectItem
+                                              disabled={false}
+                                              hidden={false}
+                                              key="3"
+                                              label="server3"
+                                              text="server3"
+                                              value="3"
+                                            >
+                                              <option
+                                                className="bx--select-option"
+                                                disabled={false}
+                                                hidden={false}
+                                                label="server3"
+                                                value="3"
+                                              >
+                                                server3
+                                              </option>
+                                            </SelectItem>
+                                            <SelectItem
+                                              disabled={false}
+                                              hidden={false}
+                                              key="4"
+                                              label="server4"
+                                              text="server4"
+                                              value="4"
+                                            >
+                                              <option
+                                                className="bx--select-option"
+                                                disabled={false}
+                                                hidden={false}
+                                                label="server4"
+                                                value="4"
+                                              >
+                                                server4
+                                              </option>
+                                            </SelectItem>
+                                            <SelectItem
+                                              disabled={false}
+                                              hidden={false}
+                                              key="5"
+                                              label="server5"
+                                              text="server5"
+                                              value="5"
+                                            >
+                                              <option
+                                                className="bx--select-option"
+                                                disabled={false}
+                                                hidden={false}
+                                                label="server5"
+                                                value="5"
+                                              >
+                                                server5
+                                              </option>
+                                            </SelectItem>
+                                          </select>
+                                          <ForwardRef(ChevronDown16)
+                                            className="bx--select__arrow"
+                                          >
+                                            <Icon
+                                              className="bx--select__arrow"
+                                              fill="currentColor"
+                                              height={16}
+                                              preserveAspectRatio="xMidYMid meet"
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="bx--select__arrow"
+                                                fill="currentColor"
+                                                focusable="false"
+                                                height={16}
+                                                preserveAspectRatio="xMidYMid meet"
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                                                />
+                                              </svg>
+                                            </Icon>
+                                          </ForwardRef(ChevronDown16)>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </Select>
+                                </ClearedSelect>
+                              </Select>
+                            </Select>
+                          </SelectWithOnChange>
+                        </FormFieldHideWrapper>
+                      </FormConditionWrapper>
+                    </SingleField>
+                    <SingleField
+                      component="text-field"
+                      id="device_mountpoint"
+                      isRequired={true}
+                      key="device_mountpoint"
+                      label="Device Mountpoint"
+                      name="device_mountpoint"
+                      validate={
+                        Array [
+                          Object {
+                            "type": "required",
+                          },
+                        ]
+                      }
+                    >
+                      <FormConditionWrapper
+                        field={
+                          Object {
+                            "component": "text-field",
+                            "id": "device_mountpoint",
+                            "isRequired": true,
+                            "label": "Device Mountpoint",
+                            "name": "device_mountpoint",
+                            "validate": Array [
+                              Object {
+                                "type": "required",
+                              },
+                            ],
+                          }
+                        }
+                      >
+                        <FormFieldHideWrapper
+                          hideField={false}
+                        >
+                          <TextField
+                            component="text-field"
+                            id="device_mountpoint"
+                            isRequired={true}
+                            label="Device Mountpoint"
+                            name="device_mountpoint"
+                            validate={
+                              Array [
+                                Object {
+                                  "type": "required",
+                                },
+                              ]
+                            }
+                          >
+                            <TextInput
+                              id="device_mountpoint"
+                              invalid={false}
+                              invalidText=""
+                              key="device_mountpoint"
+                              labelText={
+                                <IsRequired>
+                                  Device Mountpoint
+                                </IsRequired>
+                              }
+                              name="device_mountpoint"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              value=""
+                              warn={false}
+                              warnText=""
+                            >
+                              <div
+                                className="bx--form-item bx--text-input-wrapper"
+                              >
+                                <label
+                                  className="bx--label"
+                                  htmlFor="device_mountpoint"
+                                >
+                                  <IsRequired>
+                                    <span
+                                      aria-hidden="true"
+                                      className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
+                                    >
+                                      *
+                                    </span>
+                                    Device Mountpoint
+                                  </IsRequired>
+                                </label>
+                                <div
+                                  className="bx--text-input__field-outer-wrapper"
+                                >
+                                  <div
+                                    className="bx--text-input__field-wrapper"
+                                    data-invalid={null}
+                                  >
+                                    <input
+                                      className="bx--text-input bx--text-input--md"
+                                      disabled={false}
+                                      id="device_mountpoint"
+                                      name="device_mountpoint"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      type="text"
+                                      value=""
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </TextInput>
+                          </TextField>
+                        </FormFieldHideWrapper>
+                      </FormConditionWrapper>
+                    </SingleField>
+                    <SingleField
+                      component="spy-field"
+                      key="spy-field"
+                      name="spy-field"
+                    >
+                      <FormConditionWrapper
+                        field={
+                          Object {
+                            "component": "spy-field",
+                            "initialize": undefined,
+                            "name": "spy-field",
+                          }
+                        }
+                      >
+                        <FormFieldHideWrapper
+                          hideField={false}
+                        >
+                          <SpyField
+                            component="spy-field"
+                            name="spy-field"
+                          >
+                            <FormSpy
+                              onChange={[Function]}
+                              subscription={
+                                Object {
+                                  "pristine": true,
+                                  "valid": true,
+                                }
+                              }
+                            />
+                          </SpyField>
+                        </FormFieldHideWrapper>
+                      </FormConditionWrapper>
+                    </SingleField>
+                    <FormSpy>
+                      <div
+                        className="custom-button-wrapper"
+                      >
+                        <Button
+                          className="btnRight"
+                          disabled={true}
+                          id="submit"
+                          kind="primary"
+                          type="submit"
+                          variant="contained"
+                        >
+                          <button
+                            aria-describedby={null}
+                            aria-pressed={null}
+                            className="btnRight bx--btn bx--btn--primary bx--btn--disabled"
+                            disabled={true}
+                            id="submit"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseEnter={[Function]}
+                            onMouseLeave={[Function]}
+                            tabIndex={0}
+                            type="submit"
+                            variant="contained"
+                          >
+                            Attach
+                          </button>
+                        </Button>
+                        <Button
+                          className="btnRight"
+                          disabled={true}
+                          id="reset"
+                          kind="secondary"
+                          onClick={[Function]}
+                          type="button"
+                          variant="contained"
+                        >
+                          <button
+                            aria-describedby={null}
+                            aria-pressed={null}
+                            className="btnRight bx--btn bx--btn--secondary bx--btn--disabled"
+                            disabled={true}
+                            id="reset"
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseEnter={[Function]}
+                            onMouseLeave={[Function]}
+                            tabIndex={0}
+                            type="button"
+                            variant="contained"
+                          >
+                            Reset
+                          </button>
+                        </Button>
+                        <Button
+                          kind="secondary"
+                          onClick={[Function]}
+                          type="button"
+                          variant="contained"
+                        >
+                          <button
+                            aria-describedby={null}
+                            aria-pressed={null}
+                            className="bx--btn bx--btn--secondary"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onMouseEnter={[Function]}
+                            onMouseLeave={[Function]}
+                            tabIndex={0}
+                            type="button"
+                            variant="contained"
+                          >
+                            Cancel
+                          </button>
+                        </Button>
+                      </div>
+                    </FormSpy>
+                  </form>
+                </FormTemplate>
+              </FormTemplate>
+            </ReactFinalForm>
+          </FormRenderer>
+        </MiqFormRenderer>
+      </Connect(MiqFormRenderer)>
+    </div>
+  </AttachDetachCloudVolumeForm>
 </Provider>
 `;
 
diff --git a/app/javascript/spec/cloud-volume-form/attach-detach-cloud-volume-form.spec.js b/app/javascript/spec/cloud-volume-form/attach-detach-cloud-volume-form.spec.js
index 6c6a5a374a1..b6cbd4ef3da 100644
--- a/app/javascript/spec/cloud-volume-form/attach-detach-cloud-volume-form.spec.js
+++ b/app/javascript/spec/cloud-volume-form/attach-detach-cloud-volume-form.spec.js
@@ -33,8 +33,7 @@ describe('Attach / Detach form component', () => {
   };
 
   beforeEach(() => {
-    fetchMock
-      .once('/api/cloud_volumes/1?option_action=attach', response);
+    fetchMock.once('/api/cloud_volumes/1?option_action=attach', response);
   });
 
   afterEach(() => {
@@ -42,23 +41,22 @@ describe('Attach / Detach form component', () => {
     fetchMock.restore();
   });
 
-  it('should render form', (done) => {
-    const wrapper = shallow(<AttachDetachCloudVolumeForm />);
-    setImmediate(() => {
-      wrapper.update();
-      expect(toJson(wrapper)).toMatchSnapshot();
-      done();
+  it('should render form', async () => {
+    let wrapper;
+    await act(async() => {
+      wrapper = shallow(<AttachDetachCloudVolumeForm />);
     });
+    expect(toJson(wrapper)).toMatchSnapshot();
   });
 
-/* Steps to reach page tested:
-  1. Storage > Volume
-  2. Configuration > Attach / Detach to an Instance
-*/
+  /** Steps to reach page tested:
+    1. Storage > Volume
+    2. Configuration > Attach / Detach to an Instance
+  */
   it('should render Attach Selected Cloud Volume to an Instance form', async(done) => {
     let wrapper;
     await act(async() => {
-      wrapper = mount(<AttachDetachCloudVolumeForm recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel={"Instance"} />);
+      wrapper = mount(<AttachDetachCloudVolumeForm recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel="Instance" />);
     });
 
     setImmediate(() => {
@@ -71,7 +69,7 @@ describe('Attach / Detach form component', () => {
   it('should render Detach Selected Cloud Volume from an Instance form', async(done) => {
     let wrapper;
     await act(async() => {
-      wrapper = mount(<AttachDetachCloudVolumeForm isAttach={false} recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel={"Instance"} />);
+      wrapper = mount(<AttachDetachCloudVolumeForm isAttach={false} recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel="Instance" />);
     });
 
     setImmediate(() => {
@@ -81,15 +79,15 @@ describe('Attach / Detach form component', () => {
     });
   });
 
-/* Steps to reach page tested:
+  /**  Steps to reach page tested:
     1. Compute > Cloud > Instances
     2. Select an Instance that allows for attach/detach (Openstack, IBM Cloud, Amazon)
     3. Configuration > Attach / Detach a Cloud Volume from this Instance
-*/
+  */
   it('should render Attach Cloud Volume to the Selected Instance form', async(done) => {
     let wrapper;
     await act(async() => {
-      wrapper = mount(<AttachDetachCloudVolumeForm recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel={"Volume"} />);
+      wrapper = mount(<AttachDetachCloudVolumeForm recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel="Volume" />);
     });
 
     setImmediate(() => {
@@ -102,7 +100,7 @@ describe('Attach / Detach form component', () => {
   it('should render Detach Cloud Volume from the Selected Instance form', async(done) => {
     let wrapper;
     await act(async() => {
-      wrapper = mount(<AttachDetachCloudVolumeForm isAttach={false} recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel={"Volume"} />);
+      wrapper = mount(<AttachDetachCloudVolumeForm isAttach={false} recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel="Volume" />);
     });
 
     setImmediate(() => {
@@ -112,35 +110,38 @@ describe('Attach / Detach form component', () => {
     });
   });
 
-/*
- * Submit Logic
- */
-
+  /** Submit Logic */
   it('should submit Attach API call', async(done) => {
+    let wrapper;
     const submitData = {
-      "action": "attach",
-      "resource": {
-        "vm_id": "1",
-        "device": "",
-      }
-    }
+      action: 'attach',
+      resource: {
+        vm_id: '1',
+        device: '',
+      },
+    };
     fetchMock.postOnce('/api/cloud_volumes/1', submitData);
-    const wrapper = mount(<AttachDetachCloudVolumeForm recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel={"Instance"}/>);
-    expect(toJson(wrapper)).toMatchSnapshot();
-    done();
-  });
+    await act(async() => {
+      wrapper = mount(<AttachDetachCloudVolumeForm recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel="Instance" />);
+    });
 
+    setImmediate(() => {
+      wrapper.update();
+      expect(toJson(wrapper)).toMatchSnapshot();
+      done();
+    });
+  });
 
   it('should submit Detach API call', async(done) => {
     const submitData = {
-      "action": "attach",
-      "resource": {
-        "vm_id": "1",
-        "device": "",
-      }
-    }
+      action: 'attach',
+      resource: {
+        vm_id: '1',
+        device: '',
+      },
+    };
     fetchMock.postOnce('/api/cloud_volumes/1', submitData);
-    const wrapper = mount(<AttachDetachCloudVolumeForm isAttach={false} recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel={"Volume"}/>);
+    const wrapper = mount(<AttachDetachCloudVolumeForm isAttach={false} recordId="1" dropdownChoices={sampleVmChoice} dropdownLabel="Volume" />);
     expect(toJson(wrapper)).toMatchSnapshot();
     done();
   });