ManageIQ/manageiq-ui-classic

View on GitHub
app/javascript/spec/cloud-volume-actions-form/__snapshots__/cloud-volume-actions-form.spec.js.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Cloud Volume Backup Create form component should render the cloud volume backup create form 1`] = `
<Provider
  store={
    Object {
      "asyncReducers": Object {
        "FormButtons": [Function],
        "miqCustomTabReducer": [Function],
        "notificationReducer": [Function],
      },
      "dispatch": [Function],
      "getState": [Function],
      "injectReducers": [Function],
      "replaceReducer": [Function],
      "subscribe": [Function],
      Symbol(observable): [Function],
    }
  }
>
  <CloudVolumeActions
    name="Cloud volume name"
    recordId="23"
    type="create_backup"
  >
    <Connect(MiqFormRenderer)
      buttonsLabels={
        Object {
          "submitLabel": "Save",
        }
      }
      onCancel={[Function]}
      onSubmit={[Function]}
      schema={
        Object {
          "fields": Array [
            Object {
              "component": "sub-form",
              "fields": Array [
                Object {
                  "component": "text-field",
                  "id": "name",
                  "isRequired": true,
                  "label": "Backup Name",
                  "maxLength": 50,
                  "name": "name",
                  "validate": Array [
                    Object {
                      "type": "required",
                    },
                  ],
                },
              ],
              "id": "basic-information",
              "name": "basic-information",
              "title": "Basic Information",
            },
            Object {
              "component": "sub-form",
              "fields": Array [
                Object {
                  "component": "switch",
                  "id": "incremental",
                  "label": "Incremental?",
                  "maxLength": 50,
                  "name": "incremental",
                },
                Object {
                  "component": "switch",
                  "id": "force",
                  "label": "Force?",
                  "maxLength": 50,
                  "name": "force",
                },
              ],
              "id": "options",
              "name": "options",
              "title": "Options",
            },
          ],
        }
      }
    >
      <MiqFormRenderer
        buttonsLabels={
          Object {
            "submitLabel": "Save",
          }
        }
        canReset={false}
        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": "sub-form",
                "fields": Array [
                  Object {
                    "component": "text-field",
                    "id": "name",
                    "isRequired": true,
                    "label": "Backup Name",
                    "maxLength": 50,
                    "name": "name",
                    "validate": Array [
                      Object {
                        "type": "required",
                      },
                    ],
                  },
                ],
                "id": "basic-information",
                "name": "basic-information",
                "title": "Basic Information",
              },
              Object {
                "component": "sub-form",
                "fields": Array [
                  Object {
                    "component": "switch",
                    "id": "incremental",
                    "label": "Incremental?",
                    "maxLength": 50,
                    "name": "incremental",
                  },
                  Object {
                    "component": "switch",
                    "id": "force",
                    "label": "Force?",
                    "maxLength": 50,
                    "name": "force",
                  },
                ],
                "id": "options",
                "name": "options",
                "title": "Options",
              },
            ],
          }
        }
        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": "sub-form",
                  "fields": Array [
                    Object {
                      "component": "text-field",
                      "id": "name",
                      "isRequired": true,
                      "label": "Backup Name",
                      "maxLength": 50,
                      "name": "name",
                      "validate": Array [
                        Object {
                          "type": "required",
                        },
                      ],
                    },
                  ],
                  "id": "basic-information",
                  "name": "basic-information",
                  "title": "Basic Information",
                },
                Object {
                  "component": "sub-form",
                  "fields": Array [
                    Object {
                      "component": "switch",
                      "id": "incremental",
                      "label": "Incremental?",
                      "maxLength": 50,
                      "name": "incremental",
                    },
                    Object {
                      "component": "switch",
                      "id": "force",
                      "label": "Force?",
                      "maxLength": 50,
                      "name": "force",
                    },
                  ],
                  "id": "options",
                  "name": "options",
                  "title": "Options",
                },
                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,
              }
            }
          >
            <Component
              formFields={
                Array [
                  <SingleField
                    component="sub-form"
                    fields={
                      Array [
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "isRequired": true,
                          "label": "Backup Name",
                          "maxLength": 50,
                          "name": "name",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                      ]
                    }
                    id="basic-information"
                    name="basic-information"
                    title="Basic Information"
                  />,
                  <SingleField
                    component="sub-form"
                    fields={
                      Array [
                        Object {
                          "component": "switch",
                          "id": "incremental",
                          "label": "Incremental?",
                          "maxLength": 50,
                          "name": "incremental",
                        },
                        Object {
                          "component": "switch",
                          "id": "force",
                          "label": "Force?",
                          "maxLength": 50,
                          "name": "force",
                        },
                      ]
                    }
                    id="options"
                    name="options"
                    title="Options"
                  />,
                  <SingleField
                    component="spy-field"
                    name="spy-field"
                  />,
                ]
              }
              schema={
                Object {
                  "fields": Array [
                    Object {
                      "component": "sub-form",
                      "fields": Array [
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "isRequired": true,
                          "label": "Backup Name",
                          "maxLength": 50,
                          "name": "name",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                      ],
                      "id": "basic-information",
                      "name": "basic-information",
                      "title": "Basic Information",
                    },
                    Object {
                      "component": "sub-form",
                      "fields": Array [
                        Object {
                          "component": "switch",
                          "id": "incremental",
                          "label": "Incremental?",
                          "maxLength": 50,
                          "name": "incremental",
                        },
                        Object {
                          "component": "switch",
                          "id": "force",
                          "label": "Force?",
                          "maxLength": 50,
                          "name": "force",
                        },
                      ],
                      "id": "options",
                      "name": "options",
                      "title": "Options",
                    },
                    Object {
                      "component": "spy-field",
                      "initialize": undefined,
                      "name": "spy-field",
                    },
                  ],
                }
              }
            >
              <WrappedFormTemplate
                canReset={false}
                cancelLabel="Cancel"
                disableSubmit={
                  Array [
                    "pristine",
                    "invalid",
                  ]
                }
                formFields={
                  Array [
                    <SingleField
                      component="sub-form"
                      fields={
                        Array [
                          Object {
                            "component": "text-field",
                            "id": "name",
                            "isRequired": true,
                            "label": "Backup Name",
                            "maxLength": 50,
                            "name": "name",
                            "validate": Array [
                              Object {
                                "type": "required",
                              },
                            ],
                          },
                        ]
                      }
                      id="basic-information"
                      name="basic-information"
                      title="Basic Information"
                    />,
                    <SingleField
                      component="sub-form"
                      fields={
                        Array [
                          Object {
                            "component": "switch",
                            "id": "incremental",
                            "label": "Incremental?",
                            "maxLength": 50,
                            "name": "incremental",
                          },
                          Object {
                            "component": "switch",
                            "id": "force",
                            "label": "Force?",
                            "maxLength": 50,
                            "name": "force",
                          },
                        ]
                      }
                      id="options"
                      name="options"
                      title="Options"
                    />,
                    <SingleField
                      component="spy-field"
                      name="spy-field"
                    />,
                  ]
                }
                formWrapperProps={
                  Object {
                    "className": "form-react",
                  }
                }
                resetLabel="Reset"
                schema={
                  Object {
                    "fields": Array [
                      Object {
                        "component": "sub-form",
                        "fields": Array [
                          Object {
                            "component": "text-field",
                            "id": "name",
                            "isRequired": true,
                            "label": "Backup Name",
                            "maxLength": 50,
                            "name": "name",
                            "validate": Array [
                              Object {
                                "type": "required",
                              },
                            ],
                          },
                        ],
                        "id": "basic-information",
                        "name": "basic-information",
                        "title": "Basic Information",
                      },
                      Object {
                        "component": "sub-form",
                        "fields": Array [
                          Object {
                            "component": "switch",
                            "id": "incremental",
                            "label": "Incremental?",
                            "maxLength": 50,
                            "name": "incremental",
                          },
                          Object {
                            "component": "switch",
                            "id": "force",
                            "label": "Force?",
                            "maxLength": 50,
                            "name": "force",
                          },
                        ],
                        "id": "options",
                        "name": "options",
                        "title": "Options",
                      },
                      Object {
                        "component": "spy-field",
                        "initialize": undefined,
                        "name": "spy-field",
                      },
                    ],
                  }
                }
                showFormControls={true}
                submitLabel="Save"
              >
                <FormTemplate
                  Button={[Function]}
                  ButtonGroup={[Function]}
                  Description={[Function]}
                  FormWrapper={[Function]}
                  Header={[Function]}
                  Title={[Function]}
                  buttonOrder={
                    Array [
                      "submit",
                      "reset",
                      "cancel",
                    ]
                  }
                  canReset={false}
                  cancelLabel="Cancel"
                  disableSubmit={
                    Array [
                      "pristine",
                      "invalid",
                    ]
                  }
                  formFields={
                    Array [
                      <SingleField
                        component="sub-form"
                        fields={
                          Array [
                            Object {
                              "component": "text-field",
                              "id": "name",
                              "isRequired": true,
                              "label": "Backup Name",
                              "maxLength": 50,
                              "name": "name",
                              "validate": Array [
                                Object {
                                  "type": "required",
                                },
                              ],
                            },
                          ]
                        }
                        id="basic-information"
                        name="basic-information"
                        title="Basic Information"
                      />,
                      <SingleField
                        component="sub-form"
                        fields={
                          Array [
                            Object {
                              "component": "switch",
                              "id": "incremental",
                              "label": "Incremental?",
                              "maxLength": 50,
                              "name": "incremental",
                            },
                            Object {
                              "component": "switch",
                              "id": "force",
                              "label": "Force?",
                              "maxLength": 50,
                              "name": "force",
                            },
                          ]
                        }
                        id="options"
                        name="options"
                        title="Options"
                      />,
                      <SingleField
                        component="spy-field"
                        name="spy-field"
                      />,
                    ]
                  }
                  formWrapperProps={
                    Object {
                      "className": "form-react",
                    }
                  }
                  resetLabel="Reset"
                  schema={
                    Object {
                      "fields": Array [
                        Object {
                          "component": "sub-form",
                          "fields": Array [
                            Object {
                              "component": "text-field",
                              "id": "name",
                              "isRequired": true,
                              "label": "Backup Name",
                              "maxLength": 50,
                              "name": "name",
                              "validate": Array [
                                Object {
                                  "type": "required",
                                },
                              ],
                            },
                          ],
                          "id": "basic-information",
                          "name": "basic-information",
                          "title": "Basic Information",
                        },
                        Object {
                          "component": "sub-form",
                          "fields": Array [
                            Object {
                              "component": "switch",
                              "id": "incremental",
                              "label": "Incremental?",
                              "maxLength": 50,
                              "name": "incremental",
                            },
                            Object {
                              "component": "switch",
                              "id": "force",
                              "label": "Force?",
                              "maxLength": 50,
                              "name": "force",
                            },
                          ],
                          "id": "options",
                          "name": "options",
                          "title": "Options",
                        },
                        Object {
                          "component": "spy-field",
                          "initialize": undefined,
                          "name": "spy-field",
                        },
                      ],
                    }
                  }
                  showFormControls={true}
                  submitLabel="Save"
                >
                  <Form
                    className="form-react"
                    onSubmit={[Function]}
                  >
                    <Form
                      className="form-0-2-3 form-react"
                      noValidate={true}
                      onSubmit={[Function]}
                    >
                      <form
                        className="bx--form form-0-2-3 form-react"
                        noValidate={true}
                        onSubmit={[Function]}
                      >
                         
                        <SingleField
                          component="sub-form"
                          fields={
                            Array [
                              Object {
                                "component": "text-field",
                                "id": "name",
                                "isRequired": true,
                                "label": "Backup Name",
                                "maxLength": 50,
                                "name": "name",
                                "validate": Array [
                                  Object {
                                    "type": "required",
                                  },
                                ],
                              },
                            ]
                          }
                          id="basic-information"
                          key="basic-information"
                          name="basic-information"
                          title="Basic Information"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "sub-form",
                                "fields": Array [
                                  Object {
                                    "component": "text-field",
                                    "id": "name",
                                    "isRequired": true,
                                    "label": "Backup Name",
                                    "maxLength": 50,
                                    "name": "name",
                                    "validate": Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ],
                                  },
                                ],
                                "id": "basic-information",
                                "name": "basic-information",
                                "title": "Basic Information",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SubForm
                                DescriptionElement="p"
                                TitleElement="h3"
                                component="sub-form"
                                fields={
                                  Array [
                                    Object {
                                      "component": "text-field",
                                      "id": "name",
                                      "isRequired": true,
                                      "label": "Backup Name",
                                      "maxLength": 50,
                                      "name": "name",
                                      "validate": Array [
                                        Object {
                                          "type": "required",
                                        },
                                      ],
                                    },
                                  ]
                                }
                                id="basic-information"
                                name="basic-information"
                                title="Basic Information"
                              >
                                <div
                                  className=""
                                  id="basic-information"
                                  name="basic-information"
                                >
                                  <div>
                                    <h3>
                                      Basic Information
                                    </h3>
                                  </div>
                                  <SingleField
                                    component="text-field"
                                    id="name"
                                    isRequired={true}
                                    key="name"
                                    label="Backup Name"
                                    maxLength={50}
                                    name="name"
                                    validate={
                                      Array [
                                        Object {
                                          "type": "required",
                                        },
                                      ]
                                    }
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "text-field",
                                          "id": "name",
                                          "isRequired": true,
                                          "label": "Backup Name",
                                          "maxLength": 50,
                                          "name": "name",
                                          "validate": Array [
                                            Object {
                                              "type": "required",
                                            },
                                          ],
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <TextField
                                          component="text-field"
                                          id="name"
                                          isRequired={true}
                                          label="Backup Name"
                                          maxLength={50}
                                          name="name"
                                          validate={
                                            Array [
                                              Object {
                                                "type": "required",
                                              },
                                            ]
                                          }
                                        >
                                          <TextInput
                                            id="name"
                                            invalid={false}
                                            invalidText=""
                                            key="name"
                                            labelText={
                                              <IsRequired>
                                                Backup Name
                                              </IsRequired>
                                            }
                                            maxLength={50}
                                            name="name"
                                            onBlur={[Function]}
                                            onChange={[Function]}
                                            onFocus={[Function]}
                                            value=""
                                            warn={false}
                                            warnText=""
                                          >
                                            <div
                                              className="bx--form-item bx--text-input-wrapper"
                                            >
                                              <label
                                                className="bx--label"
                                                htmlFor="name"
                                              >
                                                <IsRequired>
                                                  <span
                                                    aria-hidden="true"
                                                    className="ddorg__carbon-component-mapper_is-required isRequired-0-2-5"
                                                  >
                                                    *
                                                  </span>
                                                  Backup Name
                                                </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="name"
                                                    maxLength={50}
                                                    name="name"
                                                    onBlur={[Function]}
                                                    onChange={[Function]}
                                                    onClick={[Function]}
                                                    onFocus={[Function]}
                                                    type="text"
                                                    value=""
                                                  />
                                                </div>
                                              </div>
                                            </div>
                                          </TextInput>
                                        </TextField>
                                      </FormFieldHideWrapper>
                                    </FormConditionWrapper>
                                  </SingleField>
                                </div>
                              </SubForm>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <SingleField
                          component="sub-form"
                          fields={
                            Array [
                              Object {
                                "component": "switch",
                                "id": "incremental",
                                "label": "Incremental?",
                                "maxLength": 50,
                                "name": "incremental",
                              },
                              Object {
                                "component": "switch",
                                "id": "force",
                                "label": "Force?",
                                "maxLength": 50,
                                "name": "force",
                              },
                            ]
                          }
                          id="options"
                          key="options"
                          name="options"
                          title="Options"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "sub-form",
                                "fields": Array [
                                  Object {
                                    "component": "switch",
                                    "id": "incremental",
                                    "label": "Incremental?",
                                    "maxLength": 50,
                                    "name": "incremental",
                                  },
                                  Object {
                                    "component": "switch",
                                    "id": "force",
                                    "label": "Force?",
                                    "maxLength": 50,
                                    "name": "force",
                                  },
                                ],
                                "id": "options",
                                "name": "options",
                                "title": "Options",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SubForm
                                DescriptionElement="p"
                                TitleElement="h3"
                                component="sub-form"
                                fields={
                                  Array [
                                    Object {
                                      "component": "switch",
                                      "id": "incremental",
                                      "label": "Incremental?",
                                      "maxLength": 50,
                                      "name": "incremental",
                                    },
                                    Object {
                                      "component": "switch",
                                      "id": "force",
                                      "label": "Force?",
                                      "maxLength": 50,
                                      "name": "force",
                                    },
                                  ]
                                }
                                id="options"
                                name="options"
                                title="Options"
                              >
                                <div
                                  className=""
                                  id="options"
                                  name="options"
                                >
                                  <div>
                                    <h3>
                                      Options
                                    </h3>
                                  </div>
                                  <SingleField
                                    component="switch"
                                    id="incremental"
                                    key="incremental"
                                    label="Incremental?"
                                    maxLength={50}
                                    name="incremental"
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "switch",
                                          "id": "incremental",
                                          "label": "Incremental?",
                                          "maxLength": 50,
                                          "name": "incremental",
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <Switch
                                          component="switch"
                                          id="incremental"
                                          label="Incremental?"
                                          maxLength={50}
                                          name="incremental"
                                        >
                                          <div>
                                            <FeatureToggle(Toggle)
                                              id="incremental"
                                              key="incremental"
                                              labelText="Incremental?"
                                              maxLength={50}
                                              name="incremental"
                                              onBlur={[Function]}
                                              onChange={[Function]}
                                              onFocus={[Function]}
                                              toggled={false}
                                              type="checkbox"
                                            >
                                              <Toggle
                                                aria-label="Toggle"
                                                defaultToggled={false}
                                                id="incremental"
                                                labelA="Off"
                                                labelB="On"
                                                labelText="Incremental?"
                                                maxLength={50}
                                                name="incremental"
                                                onBlur={[Function]}
                                                onChange={[Function]}
                                                onFocus={[Function]}
                                                onToggle={[Function]}
                                                toggled={false}
                                                type="checkbox"
                                              >
                                                <div
                                                  className="bx--form-item"
                                                >
                                                  <input
                                                    aria-label={null}
                                                    checked={false}
                                                    className="bx--toggle-input"
                                                    id="incremental"
                                                    maxLength={50}
                                                    name="incremental"
                                                    onBlur={[Function]}
                                                    onChange={[Function]}
                                                    onFocus={[Function]}
                                                    onKeyUp={[Function]}
                                                    type="checkbox"
                                                  />
                                                  <label
                                                    aria-label={null}
                                                    className="bx--toggle-input__label"
                                                    htmlFor="incremental"
                                                  >
                                                    Incremental?
                                                    <span
                                                      className="bx--toggle__switch"
                                                    >
                                                      <span
                                                        aria-hidden="true"
                                                        className="bx--toggle__text--off"
                                                      >
                                                        Off
                                                      </span>
                                                      <span
                                                        aria-hidden="true"
                                                        className="bx--toggle__text--on"
                                                      >
                                                        On
                                                      </span>
                                                    </span>
                                                  </label>
                                                </div>
                                              </Toggle>
                                            </FeatureToggle(Toggle)>
                                            <HelperTextBlock />
                                          </div>
                                        </Switch>
                                      </FormFieldHideWrapper>
                                    </FormConditionWrapper>
                                  </SingleField>
                                  <SingleField
                                    component="switch"
                                    id="force"
                                    key="force"
                                    label="Force?"
                                    maxLength={50}
                                    name="force"
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "switch",
                                          "id": "force",
                                          "label": "Force?",
                                          "maxLength": 50,
                                          "name": "force",
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <Switch
                                          component="switch"
                                          id="force"
                                          label="Force?"
                                          maxLength={50}
                                          name="force"
                                        >
                                          <div>
                                            <FeatureToggle(Toggle)
                                              id="force"
                                              key="force"
                                              labelText="Force?"
                                              maxLength={50}
                                              name="force"
                                              onBlur={[Function]}
                                              onChange={[Function]}
                                              onFocus={[Function]}
                                              toggled={false}
                                              type="checkbox"
                                            >
                                              <Toggle
                                                aria-label="Toggle"
                                                defaultToggled={false}
                                                id="force"
                                                labelA="Off"
                                                labelB="On"
                                                labelText="Force?"
                                                maxLength={50}
                                                name="force"
                                                onBlur={[Function]}
                                                onChange={[Function]}
                                                onFocus={[Function]}
                                                onToggle={[Function]}
                                                toggled={false}
                                                type="checkbox"
                                              >
                                                <div
                                                  className="bx--form-item"
                                                >
                                                  <input
                                                    aria-label={null}
                                                    checked={false}
                                                    className="bx--toggle-input"
                                                    id="force"
                                                    maxLength={50}
                                                    name="force"
                                                    onBlur={[Function]}
                                                    onChange={[Function]}
                                                    onFocus={[Function]}
                                                    onKeyUp={[Function]}
                                                    type="checkbox"
                                                  />
                                                  <label
                                                    aria-label={null}
                                                    className="bx--toggle-input__label"
                                                    htmlFor="force"
                                                  >
                                                    Force?
                                                    <span
                                                      className="bx--toggle__switch"
                                                    >
                                                      <span
                                                        aria-hidden="true"
                                                        className="bx--toggle__text--off"
                                                      >
                                                        Off
                                                      </span>
                                                      <span
                                                        aria-hidden="true"
                                                        className="bx--toggle__text--on"
                                                      >
                                                        On
                                                      </span>
                                                    </span>
                                                  </label>
                                                </div>
                                              </Toggle>
                                            </FeatureToggle(Toggle)>
                                            <HelperTextBlock />
                                          </div>
                                        </Switch>
                                      </FormFieldHideWrapper>
                                    </FormConditionWrapper>
                                  </SingleField>
                                </div>
                              </SubForm>
                            </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>
                          <FormControls
                            Button={[Function]}
                            ButtonGroup={[Function]}
                            FormSpy={[Function]}
                            buttonOrder={
                              Array [
                                "submit",
                                "reset",
                                "cancel",
                              ]
                            }
                            canReset={false}
                            cancelLabel="Cancel"
                            disableSubmit={true}
                            formFields={
                              Array [
                                <SingleField
                                  component="sub-form"
                                  fields={
                                    Array [
                                      Object {
                                        "component": "text-field",
                                        "id": "name",
                                        "isRequired": true,
                                        "label": "Backup Name",
                                        "maxLength": 50,
                                        "name": "name",
                                        "validate": Array [
                                          Object {
                                            "type": "required",
                                          },
                                        ],
                                      },
                                    ]
                                  }
                                  id="basic-information"
                                  name="basic-information"
                                  title="Basic Information"
                                />,
                                <SingleField
                                  component="sub-form"
                                  fields={
                                    Array [
                                      Object {
                                        "component": "switch",
                                        "id": "incremental",
                                        "label": "Incremental?",
                                        "maxLength": 50,
                                        "name": "incremental",
                                      },
                                      Object {
                                        "component": "switch",
                                        "id": "force",
                                        "label": "Force?",
                                        "maxLength": 50,
                                        "name": "force",
                                      },
                                    ]
                                  }
                                  id="options"
                                  name="options"
                                  title="Options"
                                />,
                                <SingleField
                                  component="spy-field"
                                  name="spy-field"
                                />,
                              ]
                            }
                            formSpyProps={
                              Object {
                                "active": undefined,
                                "dirty": false,
                                "dirtyFields": Object {},
                                "dirtyFieldsSinceLastSubmit": Object {},
                                "dirtySinceLastSubmit": false,
                                "error": undefined,
                                "errors": Object {
                                  "name": "Required",
                                },
                                "form": Object {
                                  "batch": [Function],
                                  "blur": [Function],
                                  "change": [Function],
                                  "destroyOnUnregister": false,
                                  "focus": [Function],
                                  "getFieldState": [Function],
                                  "getRegisteredFields": [Function],
                                  "getState": [Function],
                                  "initialize": [Function],
                                  "isValidationPaused": [Function],
                                  "mutators": Object {
                                    "concat": [Function],
                                    "insert": [Function],
                                    "move": [Function],
                                    "pop": [Function],
                                    "push": [Function],
                                    "remove": [Function],
                                    "removeBatch": [Function],
                                    "shift": [Function],
                                    "swap": [Function],
                                    "unshift": [Function],
                                    "update": [Function],
                                  },
                                  "pauseValidation": [Function],
                                  "registerField": [Function],
                                  "reset": [Function],
                                  "resetFieldState": [Function],
                                  "restart": [Function],
                                  "resumeValidation": [Function],
                                  "setConfig": [Function],
                                  "submit": [Function],
                                  "subscribe": [Function],
                                },
                                "hasSubmitErrors": false,
                                "hasValidationErrors": true,
                                "initialValues": Object {},
                                "invalid": true,
                                "modified": Object {
                                  "force": false,
                                  "incremental": false,
                                  "name": false,
                                },
                                "modifiedSinceLastSubmit": false,
                                "pristine": true,
                                "submitError": undefined,
                                "submitErrors": undefined,
                                "submitFailed": false,
                                "submitSucceeded": false,
                                "submitting": false,
                                "touched": Object {
                                  "force": false,
                                  "incremental": false,
                                  "name": false,
                                },
                                "valid": false,
                                "validating": false,
                                "values": Object {},
                                "visited": Object {
                                  "force": false,
                                  "incremental": false,
                                  "name": false,
                                },
                              }
                            }
                            onCancel={[Function]}
                            onReset={[Function]}
                            resetLabel="Reset"
                            schema={
                              Object {
                                "fields": Array [
                                  Object {
                                    "component": "sub-form",
                                    "fields": Array [
                                      Object {
                                        "component": "text-field",
                                        "id": "name",
                                        "isRequired": true,
                                        "label": "Backup Name",
                                        "maxLength": 50,
                                        "name": "name",
                                        "validate": Array [
                                          Object {
                                            "type": "required",
                                          },
                                        ],
                                      },
                                    ],
                                    "id": "basic-information",
                                    "name": "basic-information",
                                    "title": "Basic Information",
                                  },
                                  Object {
                                    "component": "sub-form",
                                    "fields": Array [
                                      Object {
                                        "component": "switch",
                                        "id": "incremental",
                                        "label": "Incremental?",
                                        "maxLength": 50,
                                        "name": "incremental",
                                      },
                                      Object {
                                        "component": "switch",
                                        "id": "force",
                                        "label": "Force?",
                                        "maxLength": 50,
                                        "name": "force",
                                      },
                                    ],
                                    "id": "options",
                                    "name": "options",
                                    "title": "Options",
                                  },
                                  Object {
                                    "component": "spy-field",
                                    "initialize": undefined,
                                    "name": "spy-field",
                                  },
                                ],
                              }
                            }
                            submitLabel="Save"
                          >
                            <ButtonGroup>
                              <ButtonSet
                                className=""
                              >
                                <div
                                  className="bx--btn-set"
                                >
                                  <Button
                                    buttonType="submit"
                                    disabled={true}
                                    key="form-submit"
                                    label="Save"
                                    type="submit"
                                    variant="primary"
                                  >
                                    <Button
                                      disabled={true}
                                      kind="primary"
                                      type="submit"
                                      variant="primary"
                                    >
                                      <button
                                        aria-describedby={null}
                                        aria-pressed={null}
                                        className="bx--btn bx--btn--primary bx--btn--disabled"
                                        disabled={true}
                                        onBlur={[Function]}
                                        onClick={[Function]}
                                        onFocus={[Function]}
                                        onMouseEnter={[Function]}
                                        onMouseLeave={[Function]}
                                        tabIndex={0}
                                        type="submit"
                                        variant="primary"
                                      >
                                        Save
                                      </button>
                                    </Button>
                                  </Button>
                                  <Button
                                    buttonType="cancel"
                                    key="form-cancel"
                                    label="Cancel"
                                    onClick={[Function]}
                                    type="button"
                                  >
                                    <Button
                                      kind="secondary"
                                      onClick={[Function]}
                                      type="button"
                                    >
                                      <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"
                                      >
                                        Cancel
                                      </button>
                                    </Button>
                                  </Button>
                                </div>
                              </ButtonSet>
                            </ButtonGroup>
                          </FormControls>
                        </FormSpy>
                         
                      </form>
                    </Form>
                  </Form>
                </FormTemplate>
              </WrappedFormTemplate>
            </Component>
          </ReactFinalForm>
        </FormRenderer>
      </MiqFormRenderer>
    </Connect(MiqFormRenderer)>
  </CloudVolumeActions>
</Provider>
`;

exports[`Cloud Volume Backup Create form component when adding a new backup of cloud volume 1`] = `
<Provider
  store={
    Object {
      "asyncReducers": Object {
        "FormButtons": [Function],
        "miqCustomTabReducer": [Function],
        "notificationReducer": [Function],
      },
      "dispatch": [Function],
      "getState": [Function],
      "injectReducers": [Function],
      "replaceReducer": [Function],
      "subscribe": [Function],
      Symbol(observable): [Function],
    }
  }
>
  <CloudVolumeActions
    name="Cloud volume name"
    recordId="23"
    type="create_backup"
  >
    <Connect(MiqFormRenderer)
      buttonsLabels={
        Object {
          "submitLabel": "Save",
        }
      }
      onCancel={[Function]}
      onSubmit={[Function]}
      schema={
        Object {
          "fields": Array [
            Object {
              "component": "sub-form",
              "fields": Array [
                Object {
                  "component": "text-field",
                  "id": "name",
                  "isRequired": true,
                  "label": "Backup Name",
                  "maxLength": 50,
                  "name": "name",
                  "validate": Array [
                    Object {
                      "type": "required",
                    },
                  ],
                },
              ],
              "id": "basic-information",
              "name": "basic-information",
              "title": "Basic Information",
            },
            Object {
              "component": "sub-form",
              "fields": Array [
                Object {
                  "component": "switch",
                  "id": "incremental",
                  "label": "Incremental?",
                  "maxLength": 50,
                  "name": "incremental",
                },
                Object {
                  "component": "switch",
                  "id": "force",
                  "label": "Force?",
                  "maxLength": 50,
                  "name": "force",
                },
              ],
              "id": "options",
              "name": "options",
              "title": "Options",
            },
          ],
        }
      }
    >
      <MiqFormRenderer
        buttonsLabels={
          Object {
            "submitLabel": "Save",
          }
        }
        canReset={false}
        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": "sub-form",
                "fields": Array [
                  Object {
                    "component": "text-field",
                    "id": "name",
                    "isRequired": true,
                    "label": "Backup Name",
                    "maxLength": 50,
                    "name": "name",
                    "validate": Array [
                      Object {
                        "type": "required",
                      },
                    ],
                  },
                ],
                "id": "basic-information",
                "name": "basic-information",
                "title": "Basic Information",
              },
              Object {
                "component": "sub-form",
                "fields": Array [
                  Object {
                    "component": "switch",
                    "id": "incremental",
                    "label": "Incremental?",
                    "maxLength": 50,
                    "name": "incremental",
                  },
                  Object {
                    "component": "switch",
                    "id": "force",
                    "label": "Force?",
                    "maxLength": 50,
                    "name": "force",
                  },
                ],
                "id": "options",
                "name": "options",
                "title": "Options",
              },
            ],
          }
        }
        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": "sub-form",
                  "fields": Array [
                    Object {
                      "component": "text-field",
                      "id": "name",
                      "isRequired": true,
                      "label": "Backup Name",
                      "maxLength": 50,
                      "name": "name",
                      "validate": Array [
                        Object {
                          "type": "required",
                        },
                      ],
                    },
                  ],
                  "id": "basic-information",
                  "name": "basic-information",
                  "title": "Basic Information",
                },
                Object {
                  "component": "sub-form",
                  "fields": Array [
                    Object {
                      "component": "switch",
                      "id": "incremental",
                      "label": "Incremental?",
                      "maxLength": 50,
                      "name": "incremental",
                    },
                    Object {
                      "component": "switch",
                      "id": "force",
                      "label": "Force?",
                      "maxLength": 50,
                      "name": "force",
                    },
                  ],
                  "id": "options",
                  "name": "options",
                  "title": "Options",
                },
                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,
              }
            }
          >
            <Component
              formFields={
                Array [
                  <SingleField
                    component="sub-form"
                    fields={
                      Array [
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "isRequired": true,
                          "label": "Backup Name",
                          "maxLength": 50,
                          "name": "name",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                      ]
                    }
                    id="basic-information"
                    name="basic-information"
                    title="Basic Information"
                  />,
                  <SingleField
                    component="sub-form"
                    fields={
                      Array [
                        Object {
                          "component": "switch",
                          "id": "incremental",
                          "label": "Incremental?",
                          "maxLength": 50,
                          "name": "incremental",
                        },
                        Object {
                          "component": "switch",
                          "id": "force",
                          "label": "Force?",
                          "maxLength": 50,
                          "name": "force",
                        },
                      ]
                    }
                    id="options"
                    name="options"
                    title="Options"
                  />,
                  <SingleField
                    component="spy-field"
                    name="spy-field"
                  />,
                ]
              }
              schema={
                Object {
                  "fields": Array [
                    Object {
                      "component": "sub-form",
                      "fields": Array [
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "isRequired": true,
                          "label": "Backup Name",
                          "maxLength": 50,
                          "name": "name",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                      ],
                      "id": "basic-information",
                      "name": "basic-information",
                      "title": "Basic Information",
                    },
                    Object {
                      "component": "sub-form",
                      "fields": Array [
                        Object {
                          "component": "switch",
                          "id": "incremental",
                          "label": "Incremental?",
                          "maxLength": 50,
                          "name": "incremental",
                        },
                        Object {
                          "component": "switch",
                          "id": "force",
                          "label": "Force?",
                          "maxLength": 50,
                          "name": "force",
                        },
                      ],
                      "id": "options",
                      "name": "options",
                      "title": "Options",
                    },
                    Object {
                      "component": "spy-field",
                      "initialize": undefined,
                      "name": "spy-field",
                    },
                  ],
                }
              }
            >
              <WrappedFormTemplate
                canReset={false}
                cancelLabel="Cancel"
                disableSubmit={
                  Array [
                    "pristine",
                    "invalid",
                  ]
                }
                formFields={
                  Array [
                    <SingleField
                      component="sub-form"
                      fields={
                        Array [
                          Object {
                            "component": "text-field",
                            "id": "name",
                            "isRequired": true,
                            "label": "Backup Name",
                            "maxLength": 50,
                            "name": "name",
                            "validate": Array [
                              Object {
                                "type": "required",
                              },
                            ],
                          },
                        ]
                      }
                      id="basic-information"
                      name="basic-information"
                      title="Basic Information"
                    />,
                    <SingleField
                      component="sub-form"
                      fields={
                        Array [
                          Object {
                            "component": "switch",
                            "id": "incremental",
                            "label": "Incremental?",
                            "maxLength": 50,
                            "name": "incremental",
                          },
                          Object {
                            "component": "switch",
                            "id": "force",
                            "label": "Force?",
                            "maxLength": 50,
                            "name": "force",
                          },
                        ]
                      }
                      id="options"
                      name="options"
                      title="Options"
                    />,
                    <SingleField
                      component="spy-field"
                      name="spy-field"
                    />,
                  ]
                }
                formWrapperProps={
                  Object {
                    "className": "form-react",
                  }
                }
                resetLabel="Reset"
                schema={
                  Object {
                    "fields": Array [
                      Object {
                        "component": "sub-form",
                        "fields": Array [
                          Object {
                            "component": "text-field",
                            "id": "name",
                            "isRequired": true,
                            "label": "Backup Name",
                            "maxLength": 50,
                            "name": "name",
                            "validate": Array [
                              Object {
                                "type": "required",
                              },
                            ],
                          },
                        ],
                        "id": "basic-information",
                        "name": "basic-information",
                        "title": "Basic Information",
                      },
                      Object {
                        "component": "sub-form",
                        "fields": Array [
                          Object {
                            "component": "switch",
                            "id": "incremental",
                            "label": "Incremental?",
                            "maxLength": 50,
                            "name": "incremental",
                          },
                          Object {
                            "component": "switch",
                            "id": "force",
                            "label": "Force?",
                            "maxLength": 50,
                            "name": "force",
                          },
                        ],
                        "id": "options",
                        "name": "options",
                        "title": "Options",
                      },
                      Object {
                        "component": "spy-field",
                        "initialize": undefined,
                        "name": "spy-field",
                      },
                    ],
                  }
                }
                showFormControls={true}
                submitLabel="Save"
              >
                <FormTemplate
                  Button={[Function]}
                  ButtonGroup={[Function]}
                  Description={[Function]}
                  FormWrapper={[Function]}
                  Header={[Function]}
                  Title={[Function]}
                  buttonOrder={
                    Array [
                      "submit",
                      "reset",
                      "cancel",
                    ]
                  }
                  canReset={false}
                  cancelLabel="Cancel"
                  disableSubmit={
                    Array [
                      "pristine",
                      "invalid",
                    ]
                  }
                  formFields={
                    Array [
                      <SingleField
                        component="sub-form"
                        fields={
                          Array [
                            Object {
                              "component": "text-field",
                              "id": "name",
                              "isRequired": true,
                              "label": "Backup Name",
                              "maxLength": 50,
                              "name": "name",
                              "validate": Array [
                                Object {
                                  "type": "required",
                                },
                              ],
                            },
                          ]
                        }
                        id="basic-information"
                        name="basic-information"
                        title="Basic Information"
                      />,
                      <SingleField
                        component="sub-form"
                        fields={
                          Array [
                            Object {
                              "component": "switch",
                              "id": "incremental",
                              "label": "Incremental?",
                              "maxLength": 50,
                              "name": "incremental",
                            },
                            Object {
                              "component": "switch",
                              "id": "force",
                              "label": "Force?",
                              "maxLength": 50,
                              "name": "force",
                            },
                          ]
                        }
                        id="options"
                        name="options"
                        title="Options"
                      />,
                      <SingleField
                        component="spy-field"
                        name="spy-field"
                      />,
                    ]
                  }
                  formWrapperProps={
                    Object {
                      "className": "form-react",
                    }
                  }
                  resetLabel="Reset"
                  schema={
                    Object {
                      "fields": Array [
                        Object {
                          "component": "sub-form",
                          "fields": Array [
                            Object {
                              "component": "text-field",
                              "id": "name",
                              "isRequired": true,
                              "label": "Backup Name",
                              "maxLength": 50,
                              "name": "name",
                              "validate": Array [
                                Object {
                                  "type": "required",
                                },
                              ],
                            },
                          ],
                          "id": "basic-information",
                          "name": "basic-information",
                          "title": "Basic Information",
                        },
                        Object {
                          "component": "sub-form",
                          "fields": Array [
                            Object {
                              "component": "switch",
                              "id": "incremental",
                              "label": "Incremental?",
                              "maxLength": 50,
                              "name": "incremental",
                            },
                            Object {
                              "component": "switch",
                              "id": "force",
                              "label": "Force?",
                              "maxLength": 50,
                              "name": "force",
                            },
                          ],
                          "id": "options",
                          "name": "options",
                          "title": "Options",
                        },
                        Object {
                          "component": "spy-field",
                          "initialize": undefined,
                          "name": "spy-field",
                        },
                      ],
                    }
                  }
                  showFormControls={true}
                  submitLabel="Save"
                >
                  <Form
                    className="form-react"
                    onSubmit={[Function]}
                  >
                    <Form
                      className="form-0-2-3 form-react"
                      noValidate={true}
                      onSubmit={[Function]}
                    >
                      <form
                        className="bx--form form-0-2-3 form-react"
                        noValidate={true}
                        onSubmit={[Function]}
                      >
                         
                        <SingleField
                          component="sub-form"
                          fields={
                            Array [
                              Object {
                                "component": "text-field",
                                "id": "name",
                                "isRequired": true,
                                "label": "Backup Name",
                                "maxLength": 50,
                                "name": "name",
                                "validate": Array [
                                  Object {
                                    "type": "required",
                                  },
                                ],
                              },
                            ]
                          }
                          id="basic-information"
                          key="basic-information"
                          name="basic-information"
                          title="Basic Information"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "sub-form",
                                "fields": Array [
                                  Object {
                                    "component": "text-field",
                                    "id": "name",
                                    "isRequired": true,
                                    "label": "Backup Name",
                                    "maxLength": 50,
                                    "name": "name",
                                    "validate": Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ],
                                  },
                                ],
                                "id": "basic-information",
                                "name": "basic-information",
                                "title": "Basic Information",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SubForm
                                DescriptionElement="p"
                                TitleElement="h3"
                                component="sub-form"
                                fields={
                                  Array [
                                    Object {
                                      "component": "text-field",
                                      "id": "name",
                                      "isRequired": true,
                                      "label": "Backup Name",
                                      "maxLength": 50,
                                      "name": "name",
                                      "validate": Array [
                                        Object {
                                          "type": "required",
                                        },
                                      ],
                                    },
                                  ]
                                }
                                id="basic-information"
                                name="basic-information"
                                title="Basic Information"
                              >
                                <div
                                  className=""
                                  id="basic-information"
                                  name="basic-information"
                                >
                                  <div>
                                    <h3>
                                      Basic Information
                                    </h3>
                                  </div>
                                  <SingleField
                                    component="text-field"
                                    id="name"
                                    isRequired={true}
                                    key="name"
                                    label="Backup Name"
                                    maxLength={50}
                                    name="name"
                                    validate={
                                      Array [
                                        Object {
                                          "type": "required",
                                        },
                                      ]
                                    }
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "text-field",
                                          "id": "name",
                                          "isRequired": true,
                                          "label": "Backup Name",
                                          "maxLength": 50,
                                          "name": "name",
                                          "validate": Array [
                                            Object {
                                              "type": "required",
                                            },
                                          ],
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <TextField
                                          component="text-field"
                                          id="name"
                                          isRequired={true}
                                          label="Backup Name"
                                          maxLength={50}
                                          name="name"
                                          validate={
                                            Array [
                                              Object {
                                                "type": "required",
                                              },
                                            ]
                                          }
                                        >
                                          <TextInput
                                            id="name"
                                            invalid={false}
                                            invalidText=""
                                            key="name"
                                            labelText={
                                              <IsRequired>
                                                Backup Name
                                              </IsRequired>
                                            }
                                            maxLength={50}
                                            name="name"
                                            onBlur={[Function]}
                                            onChange={[Function]}
                                            onFocus={[Function]}
                                            value=""
                                            warn={false}
                                            warnText=""
                                          >
                                            <div
                                              className="bx--form-item bx--text-input-wrapper"
                                            >
                                              <label
                                                className="bx--label"
                                                htmlFor="name"
                                              >
                                                <IsRequired>
                                                  <span
                                                    aria-hidden="true"
                                                    className="ddorg__carbon-component-mapper_is-required isRequired-0-2-5"
                                                  >
                                                    *
                                                  </span>
                                                  Backup Name
                                                </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="name"
                                                    maxLength={50}
                                                    name="name"
                                                    onBlur={[Function]}
                                                    onChange={[Function]}
                                                    onClick={[Function]}
                                                    onFocus={[Function]}
                                                    type="text"
                                                    value=""
                                                  />
                                                </div>
                                              </div>
                                            </div>
                                          </TextInput>
                                        </TextField>
                                      </FormFieldHideWrapper>
                                    </FormConditionWrapper>
                                  </SingleField>
                                </div>
                              </SubForm>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <SingleField
                          component="sub-form"
                          fields={
                            Array [
                              Object {
                                "component": "switch",
                                "id": "incremental",
                                "label": "Incremental?",
                                "maxLength": 50,
                                "name": "incremental",
                              },
                              Object {
                                "component": "switch",
                                "id": "force",
                                "label": "Force?",
                                "maxLength": 50,
                                "name": "force",
                              },
                            ]
                          }
                          id="options"
                          key="options"
                          name="options"
                          title="Options"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "sub-form",
                                "fields": Array [
                                  Object {
                                    "component": "switch",
                                    "id": "incremental",
                                    "label": "Incremental?",
                                    "maxLength": 50,
                                    "name": "incremental",
                                  },
                                  Object {
                                    "component": "switch",
                                    "id": "force",
                                    "label": "Force?",
                                    "maxLength": 50,
                                    "name": "force",
                                  },
                                ],
                                "id": "options",
                                "name": "options",
                                "title": "Options",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SubForm
                                DescriptionElement="p"
                                TitleElement="h3"
                                component="sub-form"
                                fields={
                                  Array [
                                    Object {
                                      "component": "switch",
                                      "id": "incremental",
                                      "label": "Incremental?",
                                      "maxLength": 50,
                                      "name": "incremental",
                                    },
                                    Object {
                                      "component": "switch",
                                      "id": "force",
                                      "label": "Force?",
                                      "maxLength": 50,
                                      "name": "force",
                                    },
                                  ]
                                }
                                id="options"
                                name="options"
                                title="Options"
                              >
                                <div
                                  className=""
                                  id="options"
                                  name="options"
                                >
                                  <div>
                                    <h3>
                                      Options
                                    </h3>
                                  </div>
                                  <SingleField
                                    component="switch"
                                    id="incremental"
                                    key="incremental"
                                    label="Incremental?"
                                    maxLength={50}
                                    name="incremental"
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "switch",
                                          "id": "incremental",
                                          "label": "Incremental?",
                                          "maxLength": 50,
                                          "name": "incremental",
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <Switch
                                          component="switch"
                                          id="incremental"
                                          label="Incremental?"
                                          maxLength={50}
                                          name="incremental"
                                        >
                                          <div>
                                            <FeatureToggle(Toggle)
                                              id="incremental"
                                              key="incremental"
                                              labelText="Incremental?"
                                              maxLength={50}
                                              name="incremental"
                                              onBlur={[Function]}
                                              onChange={[Function]}
                                              onFocus={[Function]}
                                              toggled={false}
                                              type="checkbox"
                                            >
                                              <Toggle
                                                aria-label="Toggle"
                                                defaultToggled={false}
                                                id="incremental"
                                                labelA="Off"
                                                labelB="On"
                                                labelText="Incremental?"
                                                maxLength={50}
                                                name="incremental"
                                                onBlur={[Function]}
                                                onChange={[Function]}
                                                onFocus={[Function]}
                                                onToggle={[Function]}
                                                toggled={false}
                                                type="checkbox"
                                              >
                                                <div
                                                  className="bx--form-item"
                                                >
                                                  <input
                                                    aria-label={null}
                                                    checked={false}
                                                    className="bx--toggle-input"
                                                    id="incremental"
                                                    maxLength={50}
                                                    name="incremental"
                                                    onBlur={[Function]}
                                                    onChange={[Function]}
                                                    onFocus={[Function]}
                                                    onKeyUp={[Function]}
                                                    type="checkbox"
                                                  />
                                                  <label
                                                    aria-label={null}
                                                    className="bx--toggle-input__label"
                                                    htmlFor="incremental"
                                                  >
                                                    Incremental?
                                                    <span
                                                      className="bx--toggle__switch"
                                                    >
                                                      <span
                                                        aria-hidden="true"
                                                        className="bx--toggle__text--off"
                                                      >
                                                        Off
                                                      </span>
                                                      <span
                                                        aria-hidden="true"
                                                        className="bx--toggle__text--on"
                                                      >
                                                        On
                                                      </span>
                                                    </span>
                                                  </label>
                                                </div>
                                              </Toggle>
                                            </FeatureToggle(Toggle)>
                                            <HelperTextBlock />
                                          </div>
                                        </Switch>
                                      </FormFieldHideWrapper>
                                    </FormConditionWrapper>
                                  </SingleField>
                                  <SingleField
                                    component="switch"
                                    id="force"
                                    key="force"
                                    label="Force?"
                                    maxLength={50}
                                    name="force"
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "switch",
                                          "id": "force",
                                          "label": "Force?",
                                          "maxLength": 50,
                                          "name": "force",
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <Switch
                                          component="switch"
                                          id="force"
                                          label="Force?"
                                          maxLength={50}
                                          name="force"
                                        >
                                          <div>
                                            <FeatureToggle(Toggle)
                                              id="force"
                                              key="force"
                                              labelText="Force?"
                                              maxLength={50}
                                              name="force"
                                              onBlur={[Function]}
                                              onChange={[Function]}
                                              onFocus={[Function]}
                                              toggled={false}
                                              type="checkbox"
                                            >
                                              <Toggle
                                                aria-label="Toggle"
                                                defaultToggled={false}
                                                id="force"
                                                labelA="Off"
                                                labelB="On"
                                                labelText="Force?"
                                                maxLength={50}
                                                name="force"
                                                onBlur={[Function]}
                                                onChange={[Function]}
                                                onFocus={[Function]}
                                                onToggle={[Function]}
                                                toggled={false}
                                                type="checkbox"
                                              >
                                                <div
                                                  className="bx--form-item"
                                                >
                                                  <input
                                                    aria-label={null}
                                                    checked={false}
                                                    className="bx--toggle-input"
                                                    id="force"
                                                    maxLength={50}
                                                    name="force"
                                                    onBlur={[Function]}
                                                    onChange={[Function]}
                                                    onFocus={[Function]}
                                                    onKeyUp={[Function]}
                                                    type="checkbox"
                                                  />
                                                  <label
                                                    aria-label={null}
                                                    className="bx--toggle-input__label"
                                                    htmlFor="force"
                                                  >
                                                    Force?
                                                    <span
                                                      className="bx--toggle__switch"
                                                    >
                                                      <span
                                                        aria-hidden="true"
                                                        className="bx--toggle__text--off"
                                                      >
                                                        Off
                                                      </span>
                                                      <span
                                                        aria-hidden="true"
                                                        className="bx--toggle__text--on"
                                                      >
                                                        On
                                                      </span>
                                                    </span>
                                                  </label>
                                                </div>
                                              </Toggle>
                                            </FeatureToggle(Toggle)>
                                            <HelperTextBlock />
                                          </div>
                                        </Switch>
                                      </FormFieldHideWrapper>
                                    </FormConditionWrapper>
                                  </SingleField>
                                </div>
                              </SubForm>
                            </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>
                          <FormControls
                            Button={[Function]}
                            ButtonGroup={[Function]}
                            FormSpy={[Function]}
                            buttonOrder={
                              Array [
                                "submit",
                                "reset",
                                "cancel",
                              ]
                            }
                            canReset={false}
                            cancelLabel="Cancel"
                            disableSubmit={true}
                            formFields={
                              Array [
                                <SingleField
                                  component="sub-form"
                                  fields={
                                    Array [
                                      Object {
                                        "component": "text-field",
                                        "id": "name",
                                        "isRequired": true,
                                        "label": "Backup Name",
                                        "maxLength": 50,
                                        "name": "name",
                                        "validate": Array [
                                          Object {
                                            "type": "required",
                                          },
                                        ],
                                      },
                                    ]
                                  }
                                  id="basic-information"
                                  name="basic-information"
                                  title="Basic Information"
                                />,
                                <SingleField
                                  component="sub-form"
                                  fields={
                                    Array [
                                      Object {
                                        "component": "switch",
                                        "id": "incremental",
                                        "label": "Incremental?",
                                        "maxLength": 50,
                                        "name": "incremental",
                                      },
                                      Object {
                                        "component": "switch",
                                        "id": "force",
                                        "label": "Force?",
                                        "maxLength": 50,
                                        "name": "force",
                                      },
                                    ]
                                  }
                                  id="options"
                                  name="options"
                                  title="Options"
                                />,
                                <SingleField
                                  component="spy-field"
                                  name="spy-field"
                                />,
                              ]
                            }
                            formSpyProps={
                              Object {
                                "active": undefined,
                                "dirty": false,
                                "dirtyFields": Object {},
                                "dirtyFieldsSinceLastSubmit": Object {},
                                "dirtySinceLastSubmit": false,
                                "error": undefined,
                                "errors": Object {
                                  "name": "Required",
                                },
                                "form": Object {
                                  "batch": [Function],
                                  "blur": [Function],
                                  "change": [Function],
                                  "destroyOnUnregister": false,
                                  "focus": [Function],
                                  "getFieldState": [Function],
                                  "getRegisteredFields": [Function],
                                  "getState": [Function],
                                  "initialize": [Function],
                                  "isValidationPaused": [Function],
                                  "mutators": Object {
                                    "concat": [Function],
                                    "insert": [Function],
                                    "move": [Function],
                                    "pop": [Function],
                                    "push": [Function],
                                    "remove": [Function],
                                    "removeBatch": [Function],
                                    "shift": [Function],
                                    "swap": [Function],
                                    "unshift": [Function],
                                    "update": [Function],
                                  },
                                  "pauseValidation": [Function],
                                  "registerField": [Function],
                                  "reset": [Function],
                                  "resetFieldState": [Function],
                                  "restart": [Function],
                                  "resumeValidation": [Function],
                                  "setConfig": [Function],
                                  "submit": [Function],
                                  "subscribe": [Function],
                                },
                                "hasSubmitErrors": false,
                                "hasValidationErrors": true,
                                "initialValues": Object {},
                                "invalid": true,
                                "modified": Object {
                                  "force": false,
                                  "incremental": false,
                                  "name": false,
                                },
                                "modifiedSinceLastSubmit": false,
                                "pristine": true,
                                "submitError": undefined,
                                "submitErrors": undefined,
                                "submitFailed": false,
                                "submitSucceeded": false,
                                "submitting": false,
                                "touched": Object {
                                  "force": false,
                                  "incremental": false,
                                  "name": false,
                                },
                                "valid": false,
                                "validating": false,
                                "values": Object {},
                                "visited": Object {
                                  "force": false,
                                  "incremental": false,
                                  "name": false,
                                },
                              }
                            }
                            onCancel={[Function]}
                            onReset={[Function]}
                            resetLabel="Reset"
                            schema={
                              Object {
                                "fields": Array [
                                  Object {
                                    "component": "sub-form",
                                    "fields": Array [
                                      Object {
                                        "component": "text-field",
                                        "id": "name",
                                        "isRequired": true,
                                        "label": "Backup Name",
                                        "maxLength": 50,
                                        "name": "name",
                                        "validate": Array [
                                          Object {
                                            "type": "required",
                                          },
                                        ],
                                      },
                                    ],
                                    "id": "basic-information",
                                    "name": "basic-information",
                                    "title": "Basic Information",
                                  },
                                  Object {
                                    "component": "sub-form",
                                    "fields": Array [
                                      Object {
                                        "component": "switch",
                                        "id": "incremental",
                                        "label": "Incremental?",
                                        "maxLength": 50,
                                        "name": "incremental",
                                      },
                                      Object {
                                        "component": "switch",
                                        "id": "force",
                                        "label": "Force?",
                                        "maxLength": 50,
                                        "name": "force",
                                      },
                                    ],
                                    "id": "options",
                                    "name": "options",
                                    "title": "Options",
                                  },
                                  Object {
                                    "component": "spy-field",
                                    "initialize": undefined,
                                    "name": "spy-field",
                                  },
                                ],
                              }
                            }
                            submitLabel="Save"
                          >
                            <ButtonGroup>
                              <ButtonSet
                                className=""
                              >
                                <div
                                  className="bx--btn-set"
                                >
                                  <Button
                                    buttonType="submit"
                                    disabled={true}
                                    key="form-submit"
                                    label="Save"
                                    type="submit"
                                    variant="primary"
                                  >
                                    <Button
                                      disabled={true}
                                      kind="primary"
                                      type="submit"
                                      variant="primary"
                                    >
                                      <button
                                        aria-describedby={null}
                                        aria-pressed={null}
                                        className="bx--btn bx--btn--primary bx--btn--disabled"
                                        disabled={true}
                                        onBlur={[Function]}
                                        onClick={[Function]}
                                        onFocus={[Function]}
                                        onMouseEnter={[Function]}
                                        onMouseLeave={[Function]}
                                        tabIndex={0}
                                        type="submit"
                                        variant="primary"
                                      >
                                        Save
                                      </button>
                                    </Button>
                                  </Button>
                                  <Button
                                    buttonType="cancel"
                                    key="form-cancel"
                                    label="Cancel"
                                    onClick={[Function]}
                                    type="button"
                                  >
                                    <Button
                                      kind="secondary"
                                      onClick={[Function]}
                                      type="button"
                                    >
                                      <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"
                                      >
                                        Cancel
                                      </button>
                                    </Button>
                                  </Button>
                                </div>
                              </ButtonSet>
                            </ButtonGroup>
                          </FormControls>
                        </FormSpy>
                         
                      </form>
                    </Form>
                  </Form>
                </FormTemplate>
              </WrappedFormTemplate>
            </Component>
          </ReactFinalForm>
        </FormRenderer>
      </MiqFormRenderer>
    </Connect(MiqFormRenderer)>
  </CloudVolumeActions>
</Provider>
`;

exports[`Cloud Volume Restore from backup form component should render the cloud volume backup restore form 1`] = `
<Provider
  store={
    Object {
      "asyncReducers": Object {
        "FormButtons": [Function],
        "miqCustomTabReducer": [Function],
        "notificationReducer": [Function],
      },
      "dispatch": [Function],
      "getState": [Function],
      "injectReducers": [Function],
      "replaceReducer": [Function],
      "subscribe": [Function],
      Symbol(observable): [Function],
    }
  }
>
  <CloudVolumeActions
    name="Cloud volume name"
    recordId="23"
    type="restore_from_backup"
  >
    <Connect(MiqFormRenderer)
      buttonsLabels={
        Object {
          "submitLabel": "Save",
        }
      }
      onCancel={[Function]}
      onSubmit={[Function]}
      schema={
        Object {
          "fields": Array [
            Object {
              "component": "sub-form",
              "fields": Array [
                Object {
                  "component": "select",
                  "id": "backup_id",
                  "includeEmpty": true,
                  "isRequired": true,
                  "label": "Cloud Volume Backup",
                  "loadOptions": [Function],
                  "name": "backup_id",
                  "placeholder": "<Choose>",
                  "validate": Array [
                    Object {
                      "type": "required",
                    },
                  ],
                },
              ],
              "id": "basic-information",
              "name": "basic-information",
              "title": "Basic Information",
            },
          ],
        }
      }
    >
      <MiqFormRenderer
        buttonsLabels={
          Object {
            "submitLabel": "Save",
          }
        }
        canReset={false}
        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": "sub-form",
                "fields": Array [
                  Object {
                    "component": "select",
                    "id": "backup_id",
                    "includeEmpty": true,
                    "isRequired": true,
                    "label": "Cloud Volume Backup",
                    "loadOptions": [Function],
                    "name": "backup_id",
                    "placeholder": "<Choose>",
                    "validate": Array [
                      Object {
                        "type": "required",
                      },
                    ],
                  },
                ],
                "id": "basic-information",
                "name": "basic-information",
                "title": "Basic Information",
              },
            ],
          }
        }
        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": "sub-form",
                  "fields": Array [
                    Object {
                      "component": "select",
                      "id": "backup_id",
                      "includeEmpty": true,
                      "isRequired": true,
                      "label": "Cloud Volume Backup",
                      "loadOptions": [Function],
                      "name": "backup_id",
                      "placeholder": "<Choose>",
                      "validate": Array [
                        Object {
                          "type": "required",
                        },
                      ],
                    },
                  ],
                  "id": "basic-information",
                  "name": "basic-information",
                  "title": "Basic Information",
                },
                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,
              }
            }
          >
            <Component
              formFields={
                Array [
                  <SingleField
                    component="sub-form"
                    fields={
                      Array [
                        Object {
                          "component": "select",
                          "id": "backup_id",
                          "includeEmpty": true,
                          "isRequired": true,
                          "label": "Cloud Volume Backup",
                          "loadOptions": [Function],
                          "name": "backup_id",
                          "placeholder": "<Choose>",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                      ]
                    }
                    id="basic-information"
                    name="basic-information"
                    title="Basic Information"
                  />,
                  <SingleField
                    component="spy-field"
                    name="spy-field"
                  />,
                ]
              }
              schema={
                Object {
                  "fields": Array [
                    Object {
                      "component": "sub-form",
                      "fields": Array [
                        Object {
                          "component": "select",
                          "id": "backup_id",
                          "includeEmpty": true,
                          "isRequired": true,
                          "label": "Cloud Volume Backup",
                          "loadOptions": [Function],
                          "name": "backup_id",
                          "placeholder": "<Choose>",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                      ],
                      "id": "basic-information",
                      "name": "basic-information",
                      "title": "Basic Information",
                    },
                    Object {
                      "component": "spy-field",
                      "initialize": undefined,
                      "name": "spy-field",
                    },
                  ],
                }
              }
            >
              <WrappedFormTemplate
                canReset={false}
                cancelLabel="Cancel"
                disableSubmit={
                  Array [
                    "pristine",
                    "invalid",
                  ]
                }
                formFields={
                  Array [
                    <SingleField
                      component="sub-form"
                      fields={
                        Array [
                          Object {
                            "component": "select",
                            "id": "backup_id",
                            "includeEmpty": true,
                            "isRequired": true,
                            "label": "Cloud Volume Backup",
                            "loadOptions": [Function],
                            "name": "backup_id",
                            "placeholder": "<Choose>",
                            "validate": Array [
                              Object {
                                "type": "required",
                              },
                            ],
                          },
                        ]
                      }
                      id="basic-information"
                      name="basic-information"
                      title="Basic Information"
                    />,
                    <SingleField
                      component="spy-field"
                      name="spy-field"
                    />,
                  ]
                }
                formWrapperProps={
                  Object {
                    "className": "form-react",
                  }
                }
                resetLabel="Reset"
                schema={
                  Object {
                    "fields": Array [
                      Object {
                        "component": "sub-form",
                        "fields": Array [
                          Object {
                            "component": "select",
                            "id": "backup_id",
                            "includeEmpty": true,
                            "isRequired": true,
                            "label": "Cloud Volume Backup",
                            "loadOptions": [Function],
                            "name": "backup_id",
                            "placeholder": "<Choose>",
                            "validate": Array [
                              Object {
                                "type": "required",
                              },
                            ],
                          },
                        ],
                        "id": "basic-information",
                        "name": "basic-information",
                        "title": "Basic Information",
                      },
                      Object {
                        "component": "spy-field",
                        "initialize": undefined,
                        "name": "spy-field",
                      },
                    ],
                  }
                }
                showFormControls={true}
                submitLabel="Save"
              >
                <FormTemplate
                  Button={[Function]}
                  ButtonGroup={[Function]}
                  Description={[Function]}
                  FormWrapper={[Function]}
                  Header={[Function]}
                  Title={[Function]}
                  buttonOrder={
                    Array [
                      "submit",
                      "reset",
                      "cancel",
                    ]
                  }
                  canReset={false}
                  cancelLabel="Cancel"
                  disableSubmit={
                    Array [
                      "pristine",
                      "invalid",
                    ]
                  }
                  formFields={
                    Array [
                      <SingleField
                        component="sub-form"
                        fields={
                          Array [
                            Object {
                              "component": "select",
                              "id": "backup_id",
                              "includeEmpty": true,
                              "isRequired": true,
                              "label": "Cloud Volume Backup",
                              "loadOptions": [Function],
                              "name": "backup_id",
                              "placeholder": "<Choose>",
                              "validate": Array [
                                Object {
                                  "type": "required",
                                },
                              ],
                            },
                          ]
                        }
                        id="basic-information"
                        name="basic-information"
                        title="Basic Information"
                      />,
                      <SingleField
                        component="spy-field"
                        name="spy-field"
                      />,
                    ]
                  }
                  formWrapperProps={
                    Object {
                      "className": "form-react",
                    }
                  }
                  resetLabel="Reset"
                  schema={
                    Object {
                      "fields": Array [
                        Object {
                          "component": "sub-form",
                          "fields": Array [
                            Object {
                              "component": "select",
                              "id": "backup_id",
                              "includeEmpty": true,
                              "isRequired": true,
                              "label": "Cloud Volume Backup",
                              "loadOptions": [Function],
                              "name": "backup_id",
                              "placeholder": "<Choose>",
                              "validate": Array [
                                Object {
                                  "type": "required",
                                },
                              ],
                            },
                          ],
                          "id": "basic-information",
                          "name": "basic-information",
                          "title": "Basic Information",
                        },
                        Object {
                          "component": "spy-field",
                          "initialize": undefined,
                          "name": "spy-field",
                        },
                      ],
                    }
                  }
                  showFormControls={true}
                  submitLabel="Save"
                >
                  <Form
                    className="form-react"
                    onSubmit={[Function]}
                  >
                    <Form
                      className="form-0-2-3 form-react"
                      noValidate={true}
                      onSubmit={[Function]}
                    >
                      <form
                        className="bx--form form-0-2-3 form-react"
                        noValidate={true}
                        onSubmit={[Function]}
                      >
                         
                        <SingleField
                          component="sub-form"
                          fields={
                            Array [
                              Object {
                                "component": "select",
                                "id": "backup_id",
                                "includeEmpty": true,
                                "isRequired": true,
                                "label": "Cloud Volume Backup",
                                "loadOptions": [Function],
                                "name": "backup_id",
                                "placeholder": "<Choose>",
                                "validate": Array [
                                  Object {
                                    "type": "required",
                                  },
                                ],
                              },
                            ]
                          }
                          id="basic-information"
                          key="basic-information"
                          name="basic-information"
                          title="Basic Information"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "sub-form",
                                "fields": Array [
                                  Object {
                                    "component": "select",
                                    "id": "backup_id",
                                    "includeEmpty": true,
                                    "isRequired": true,
                                    "label": "Cloud Volume Backup",
                                    "loadOptions": [Function],
                                    "name": "backup_id",
                                    "placeholder": "<Choose>",
                                    "validate": Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ],
                                  },
                                ],
                                "id": "basic-information",
                                "name": "basic-information",
                                "title": "Basic Information",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SubForm
                                DescriptionElement="p"
                                TitleElement="h3"
                                component="sub-form"
                                fields={
                                  Array [
                                    Object {
                                      "component": "select",
                                      "id": "backup_id",
                                      "includeEmpty": true,
                                      "isRequired": true,
                                      "label": "Cloud Volume Backup",
                                      "loadOptions": [Function],
                                      "name": "backup_id",
                                      "placeholder": "<Choose>",
                                      "validate": Array [
                                        Object {
                                          "type": "required",
                                        },
                                      ],
                                    },
                                  ]
                                }
                                id="basic-information"
                                name="basic-information"
                                title="Basic Information"
                              >
                                <div
                                  className=""
                                  id="basic-information"
                                  name="basic-information"
                                >
                                  <div>
                                    <h3>
                                      Basic Information
                                    </h3>
                                  </div>
                                  <SingleField
                                    component="select"
                                    id="backup_id"
                                    includeEmpty={true}
                                    isRequired={true}
                                    key="backup_id"
                                    label="Cloud Volume Backup"
                                    loadOptions={[Function]}
                                    name="backup_id"
                                    placeholder="<Choose>"
                                    validate={
                                      Array [
                                        Object {
                                          "type": "required",
                                        },
                                      ]
                                    }
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "select",
                                          "id": "backup_id",
                                          "includeEmpty": true,
                                          "isRequired": true,
                                          "label": "Cloud Volume Backup",
                                          "loadOptions": [Function],
                                          "name": "backup_id",
                                          "placeholder": "<Choose>",
                                          "validate": Array [
                                            Object {
                                              "type": "required",
                                            },
                                          ],
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <SelectWithOnChange
                                          component="select"
                                          id="backup_id"
                                          includeEmpty={true}
                                          isRequired={true}
                                          label="Cloud Volume Backup"
                                          loadOptions={[Function]}
                                          name="backup_id"
                                          placeholder="<Choose>"
                                          validate={
                                            Array [
                                              Object {
                                                "type": "required",
                                              },
                                            ]
                                          }
                                        >
                                          <Select
                                            component="select"
                                            id="backup_id"
                                            isRequired={true}
                                            label="Cloud Volume Backup"
                                            loadOptions={[Function]}
                                            loadingMessage="Loading..."
                                            name="backup_id"
                                            placeholder="<Choose>"
                                            validate={
                                              Array [
                                                Object {
                                                  "type": "required",
                                                },
                                              ]
                                            }
                                          >
                                            <Select
                                              SelectComponent={[Function]}
                                              id="backup_id"
                                              invalidText=""
                                              labelText={
                                                <IsRequired>
                                                  Cloud Volume Backup
                                                </IsRequired>
                                              }
                                              loadOptions={[Function]}
                                              loadOptionsChangeCounter={0}
                                              loadingMessage="Loading..."
                                              name="backup_id"
                                              onBlur={[Function]}
                                              onChange={[Function]}
                                              onFocus={[Function]}
                                              placeholder="<Choose>"
                                              simpleValue={false}
                                              value=""
                                            >
                                              <ClearedSelect
                                                className=""
                                                closeMenuOnSelect={true}
                                                hideSelectedOptions={false}
                                                id="backup_id"
                                                invalidText=""
                                                isClearable={false}
                                                isFetching={false}
                                                isSearchable={false}
                                                labelText={
                                                  <IsRequired>
                                                    Cloud Volume Backup
                                                  </IsRequired>
                                                }
                                                name="backup_id"
                                                noOptionsMessage={[Function]}
                                                onBlur={[Function]}
                                                onChange={[Function]}
                                                onFocus={[Function]}
                                                onInputChange={[Function]}
                                                options={Array []}
                                                placeholder="<Choose>"
                                                value=""
                                              >
                                                <Select
                                                  className=""
                                                  disabled={false}
                                                  helperText=""
                                                  id="backup_id"
                                                  inline={false}
                                                  invalid={false}
                                                  invalidText=""
                                                  labelText={
                                                    <IsRequired>
                                                      Cloud Volume Backup
                                                    </IsRequired>
                                                  }
                                                  light={false}
                                                  name="backup_id"
                                                  onBlur={[Function]}
                                                  onChange={[Function]}
                                                  onFocus={[Function]}
                                                  value=""
                                                >
                                                  <div
                                                    className="bx--form-item"
                                                  >
                                                    <div
                                                      className="bx--select"
                                                    >
                                                      <label
                                                        className="bx--label"
                                                        htmlFor="backup_id"
                                                      >
                                                        <IsRequired>
                                                          <span
                                                            aria-hidden="true"
                                                            className="ddorg__carbon-component-mapper_is-required isRequired-0-2-5"
                                                          >
                                                            *
                                                          </span>
                                                          Cloud Volume Backup
                                                        </IsRequired>
                                                      </label>
                                                      <div
                                                        className="bx--select-input__wrapper"
                                                        data-invalid={null}
                                                      >
                                                        <select
                                                          className="bx--select-input"
                                                          id="backup_id"
                                                          name="backup_id"
                                                          onBlur={[Function]}
                                                          onChange={[Function]}
                                                          onFocus={[Function]}
                                                          value=""
                                                        />
                                                        <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>
                                </div>
                              </SubForm>
                            </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>
                          <FormControls
                            Button={[Function]}
                            ButtonGroup={[Function]}
                            FormSpy={[Function]}
                            buttonOrder={
                              Array [
                                "submit",
                                "reset",
                                "cancel",
                              ]
                            }
                            canReset={false}
                            cancelLabel="Cancel"
                            disableSubmit={true}
                            formFields={
                              Array [
                                <SingleField
                                  component="sub-form"
                                  fields={
                                    Array [
                                      Object {
                                        "component": "select",
                                        "id": "backup_id",
                                        "includeEmpty": true,
                                        "isRequired": true,
                                        "label": "Cloud Volume Backup",
                                        "loadOptions": [Function],
                                        "name": "backup_id",
                                        "placeholder": "<Choose>",
                                        "validate": Array [
                                          Object {
                                            "type": "required",
                                          },
                                        ],
                                      },
                                    ]
                                  }
                                  id="basic-information"
                                  name="basic-information"
                                  title="Basic Information"
                                />,
                                <SingleField
                                  component="spy-field"
                                  name="spy-field"
                                />,
                              ]
                            }
                            formSpyProps={
                              Object {
                                "active": undefined,
                                "dirty": false,
                                "dirtyFields": Object {},
                                "dirtyFieldsSinceLastSubmit": Object {},
                                "dirtySinceLastSubmit": false,
                                "error": undefined,
                                "errors": Object {},
                                "form": Object {
                                  "batch": [Function],
                                  "blur": [Function],
                                  "change": [Function],
                                  "destroyOnUnregister": false,
                                  "focus": [Function],
                                  "getFieldState": [Function],
                                  "getRegisteredFields": [Function],
                                  "getState": [Function],
                                  "initialize": [Function],
                                  "isValidationPaused": [Function],
                                  "mutators": Object {
                                    "concat": [Function],
                                    "insert": [Function],
                                    "move": [Function],
                                    "pop": [Function],
                                    "push": [Function],
                                    "remove": [Function],
                                    "removeBatch": [Function],
                                    "shift": [Function],
                                    "swap": [Function],
                                    "unshift": [Function],
                                    "update": [Function],
                                  },
                                  "pauseValidation": [Function],
                                  "registerField": [Function],
                                  "reset": [Function],
                                  "resetFieldState": [Function],
                                  "restart": [Function],
                                  "resumeValidation": [Function],
                                  "setConfig": [Function],
                                  "submit": [Function],
                                  "subscribe": [Function],
                                },
                                "hasSubmitErrors": false,
                                "hasValidationErrors": false,
                                "initialValues": Object {},
                                "invalid": false,
                                "modified": Object {},
                                "modifiedSinceLastSubmit": false,
                                "pristine": true,
                                "submitError": undefined,
                                "submitErrors": undefined,
                                "submitFailed": false,
                                "submitSucceeded": false,
                                "submitting": false,
                                "touched": Object {},
                                "valid": true,
                                "validating": false,
                                "values": Object {},
                                "visited": Object {},
                              }
                            }
                            onCancel={[Function]}
                            onReset={[Function]}
                            resetLabel="Reset"
                            schema={
                              Object {
                                "fields": Array [
                                  Object {
                                    "component": "sub-form",
                                    "fields": Array [
                                      Object {
                                        "component": "select",
                                        "id": "backup_id",
                                        "includeEmpty": true,
                                        "isRequired": true,
                                        "label": "Cloud Volume Backup",
                                        "loadOptions": [Function],
                                        "name": "backup_id",
                                        "placeholder": "<Choose>",
                                        "validate": Array [
                                          Object {
                                            "type": "required",
                                          },
                                        ],
                                      },
                                    ],
                                    "id": "basic-information",
                                    "name": "basic-information",
                                    "title": "Basic Information",
                                  },
                                  Object {
                                    "component": "spy-field",
                                    "initialize": undefined,
                                    "name": "spy-field",
                                  },
                                ],
                              }
                            }
                            submitLabel="Save"
                          >
                            <ButtonGroup>
                              <ButtonSet
                                className=""
                              >
                                <div
                                  className="bx--btn-set"
                                >
                                  <Button
                                    buttonType="submit"
                                    disabled={true}
                                    key="form-submit"
                                    label="Save"
                                    type="submit"
                                    variant="primary"
                                  >
                                    <Button
                                      disabled={true}
                                      kind="primary"
                                      type="submit"
                                      variant="primary"
                                    >
                                      <button
                                        aria-describedby={null}
                                        aria-pressed={null}
                                        className="bx--btn bx--btn--primary bx--btn--disabled"
                                        disabled={true}
                                        onBlur={[Function]}
                                        onClick={[Function]}
                                        onFocus={[Function]}
                                        onMouseEnter={[Function]}
                                        onMouseLeave={[Function]}
                                        tabIndex={0}
                                        type="submit"
                                        variant="primary"
                                      >
                                        Save
                                      </button>
                                    </Button>
                                  </Button>
                                  <Button
                                    buttonType="cancel"
                                    key="form-cancel"
                                    label="Cancel"
                                    onClick={[Function]}
                                    type="button"
                                  >
                                    <Button
                                      kind="secondary"
                                      onClick={[Function]}
                                      type="button"
                                    >
                                      <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"
                                      >
                                        Cancel
                                      </button>
                                    </Button>
                                  </Button>
                                </div>
                              </ButtonSet>
                            </ButtonGroup>
                          </FormControls>
                        </FormSpy>
                         
                      </form>
                    </Form>
                  </Form>
                </FormTemplate>
              </WrappedFormTemplate>
            </Component>
          </ReactFinalForm>
        </FormRenderer>
      </MiqFormRenderer>
    </Connect(MiqFormRenderer)>
  </CloudVolumeActions>
</Provider>
`;

exports[`Cloud Volume Restore from backup form component when restoring cloud volume from backup 1`] = `
<Provider
  store={
    Object {
      "asyncReducers": Object {
        "FormButtons": [Function],
        "miqCustomTabReducer": [Function],
        "notificationReducer": [Function],
      },
      "dispatch": [Function],
      "getState": [Function],
      "injectReducers": [Function],
      "replaceReducer": [Function],
      "subscribe": [Function],
      Symbol(observable): [Function],
    }
  }
>
  <CloudVolumeActions
    name="Cloud volume name"
    recordId="23"
    type="restore_from_backup"
  >
    <Connect(MiqFormRenderer)
      buttonsLabels={
        Object {
          "submitLabel": "Save",
        }
      }
      onCancel={[Function]}
      onSubmit={[Function]}
      schema={
        Object {
          "fields": Array [
            Object {
              "component": "sub-form",
              "fields": Array [
                Object {
                  "component": "select",
                  "id": "backup_id",
                  "includeEmpty": true,
                  "isRequired": true,
                  "label": "Cloud Volume Backup",
                  "loadOptions": [Function],
                  "name": "backup_id",
                  "placeholder": "<Choose>",
                  "validate": Array [
                    Object {
                      "type": "required",
                    },
                  ],
                },
              ],
              "id": "basic-information",
              "name": "basic-information",
              "title": "Basic Information",
            },
          ],
        }
      }
    >
      <MiqFormRenderer
        buttonsLabels={
          Object {
            "submitLabel": "Save",
          }
        }
        canReset={false}
        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": "sub-form",
                "fields": Array [
                  Object {
                    "component": "select",
                    "id": "backup_id",
                    "includeEmpty": true,
                    "isRequired": true,
                    "label": "Cloud Volume Backup",
                    "loadOptions": [Function],
                    "name": "backup_id",
                    "placeholder": "<Choose>",
                    "validate": Array [
                      Object {
                        "type": "required",
                      },
                    ],
                  },
                ],
                "id": "basic-information",
                "name": "basic-information",
                "title": "Basic Information",
              },
            ],
          }
        }
        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": "sub-form",
                  "fields": Array [
                    Object {
                      "component": "select",
                      "id": "backup_id",
                      "includeEmpty": true,
                      "isRequired": true,
                      "label": "Cloud Volume Backup",
                      "loadOptions": [Function],
                      "name": "backup_id",
                      "placeholder": "<Choose>",
                      "validate": Array [
                        Object {
                          "type": "required",
                        },
                      ],
                    },
                  ],
                  "id": "basic-information",
                  "name": "basic-information",
                  "title": "Basic Information",
                },
                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,
              }
            }
          >
            <Component
              formFields={
                Array [
                  <SingleField
                    component="sub-form"
                    fields={
                      Array [
                        Object {
                          "component": "select",
                          "id": "backup_id",
                          "includeEmpty": true,
                          "isRequired": true,
                          "label": "Cloud Volume Backup",
                          "loadOptions": [Function],
                          "name": "backup_id",
                          "placeholder": "<Choose>",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                      ]
                    }
                    id="basic-information"
                    name="basic-information"
                    title="Basic Information"
                  />,
                  <SingleField
                    component="spy-field"
                    name="spy-field"
                  />,
                ]
              }
              schema={
                Object {
                  "fields": Array [
                    Object {
                      "component": "sub-form",
                      "fields": Array [
                        Object {
                          "component": "select",
                          "id": "backup_id",
                          "includeEmpty": true,
                          "isRequired": true,
                          "label": "Cloud Volume Backup",
                          "loadOptions": [Function],
                          "name": "backup_id",
                          "placeholder": "<Choose>",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                      ],
                      "id": "basic-information",
                      "name": "basic-information",
                      "title": "Basic Information",
                    },
                    Object {
                      "component": "spy-field",
                      "initialize": undefined,
                      "name": "spy-field",
                    },
                  ],
                }
              }
            >
              <WrappedFormTemplate
                canReset={false}
                cancelLabel="Cancel"
                disableSubmit={
                  Array [
                    "pristine",
                    "invalid",
                  ]
                }
                formFields={
                  Array [
                    <SingleField
                      component="sub-form"
                      fields={
                        Array [
                          Object {
                            "component": "select",
                            "id": "backup_id",
                            "includeEmpty": true,
                            "isRequired": true,
                            "label": "Cloud Volume Backup",
                            "loadOptions": [Function],
                            "name": "backup_id",
                            "placeholder": "<Choose>",
                            "validate": Array [
                              Object {
                                "type": "required",
                              },
                            ],
                          },
                        ]
                      }
                      id="basic-information"
                      name="basic-information"
                      title="Basic Information"
                    />,
                    <SingleField
                      component="spy-field"
                      name="spy-field"
                    />,
                  ]
                }
                formWrapperProps={
                  Object {
                    "className": "form-react",
                  }
                }
                resetLabel="Reset"
                schema={
                  Object {
                    "fields": Array [
                      Object {
                        "component": "sub-form",
                        "fields": Array [
                          Object {
                            "component": "select",
                            "id": "backup_id",
                            "includeEmpty": true,
                            "isRequired": true,
                            "label": "Cloud Volume Backup",
                            "loadOptions": [Function],
                            "name": "backup_id",
                            "placeholder": "<Choose>",
                            "validate": Array [
                              Object {
                                "type": "required",
                              },
                            ],
                          },
                        ],
                        "id": "basic-information",
                        "name": "basic-information",
                        "title": "Basic Information",
                      },
                      Object {
                        "component": "spy-field",
                        "initialize": undefined,
                        "name": "spy-field",
                      },
                    ],
                  }
                }
                showFormControls={true}
                submitLabel="Save"
              >
                <FormTemplate
                  Button={[Function]}
                  ButtonGroup={[Function]}
                  Description={[Function]}
                  FormWrapper={[Function]}
                  Header={[Function]}
                  Title={[Function]}
                  buttonOrder={
                    Array [
                      "submit",
                      "reset",
                      "cancel",
                    ]
                  }
                  canReset={false}
                  cancelLabel="Cancel"
                  disableSubmit={
                    Array [
                      "pristine",
                      "invalid",
                    ]
                  }
                  formFields={
                    Array [
                      <SingleField
                        component="sub-form"
                        fields={
                          Array [
                            Object {
                              "component": "select",
                              "id": "backup_id",
                              "includeEmpty": true,
                              "isRequired": true,
                              "label": "Cloud Volume Backup",
                              "loadOptions": [Function],
                              "name": "backup_id",
                              "placeholder": "<Choose>",
                              "validate": Array [
                                Object {
                                  "type": "required",
                                },
                              ],
                            },
                          ]
                        }
                        id="basic-information"
                        name="basic-information"
                        title="Basic Information"
                      />,
                      <SingleField
                        component="spy-field"
                        name="spy-field"
                      />,
                    ]
                  }
                  formWrapperProps={
                    Object {
                      "className": "form-react",
                    }
                  }
                  resetLabel="Reset"
                  schema={
                    Object {
                      "fields": Array [
                        Object {
                          "component": "sub-form",
                          "fields": Array [
                            Object {
                              "component": "select",
                              "id": "backup_id",
                              "includeEmpty": true,
                              "isRequired": true,
                              "label": "Cloud Volume Backup",
                              "loadOptions": [Function],
                              "name": "backup_id",
                              "placeholder": "<Choose>",
                              "validate": Array [
                                Object {
                                  "type": "required",
                                },
                              ],
                            },
                          ],
                          "id": "basic-information",
                          "name": "basic-information",
                          "title": "Basic Information",
                        },
                        Object {
                          "component": "spy-field",
                          "initialize": undefined,
                          "name": "spy-field",
                        },
                      ],
                    }
                  }
                  showFormControls={true}
                  submitLabel="Save"
                >
                  <Form
                    className="form-react"
                    onSubmit={[Function]}
                  >
                    <Form
                      className="form-0-2-3 form-react"
                      noValidate={true}
                      onSubmit={[Function]}
                    >
                      <form
                        className="bx--form form-0-2-3 form-react"
                        noValidate={true}
                        onSubmit={[Function]}
                      >
                         
                        <SingleField
                          component="sub-form"
                          fields={
                            Array [
                              Object {
                                "component": "select",
                                "id": "backup_id",
                                "includeEmpty": true,
                                "isRequired": true,
                                "label": "Cloud Volume Backup",
                                "loadOptions": [Function],
                                "name": "backup_id",
                                "placeholder": "<Choose>",
                                "validate": Array [
                                  Object {
                                    "type": "required",
                                  },
                                ],
                              },
                            ]
                          }
                          id="basic-information"
                          key="basic-information"
                          name="basic-information"
                          title="Basic Information"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "sub-form",
                                "fields": Array [
                                  Object {
                                    "component": "select",
                                    "id": "backup_id",
                                    "includeEmpty": true,
                                    "isRequired": true,
                                    "label": "Cloud Volume Backup",
                                    "loadOptions": [Function],
                                    "name": "backup_id",
                                    "placeholder": "<Choose>",
                                    "validate": Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ],
                                  },
                                ],
                                "id": "basic-information",
                                "name": "basic-information",
                                "title": "Basic Information",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SubForm
                                DescriptionElement="p"
                                TitleElement="h3"
                                component="sub-form"
                                fields={
                                  Array [
                                    Object {
                                      "component": "select",
                                      "id": "backup_id",
                                      "includeEmpty": true,
                                      "isRequired": true,
                                      "label": "Cloud Volume Backup",
                                      "loadOptions": [Function],
                                      "name": "backup_id",
                                      "placeholder": "<Choose>",
                                      "validate": Array [
                                        Object {
                                          "type": "required",
                                        },
                                      ],
                                    },
                                  ]
                                }
                                id="basic-information"
                                name="basic-information"
                                title="Basic Information"
                              >
                                <div
                                  className=""
                                  id="basic-information"
                                  name="basic-information"
                                >
                                  <div>
                                    <h3>
                                      Basic Information
                                    </h3>
                                  </div>
                                  <SingleField
                                    component="select"
                                    id="backup_id"
                                    includeEmpty={true}
                                    isRequired={true}
                                    key="backup_id"
                                    label="Cloud Volume Backup"
                                    loadOptions={[Function]}
                                    name="backup_id"
                                    placeholder="<Choose>"
                                    validate={
                                      Array [
                                        Object {
                                          "type": "required",
                                        },
                                      ]
                                    }
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "select",
                                          "id": "backup_id",
                                          "includeEmpty": true,
                                          "isRequired": true,
                                          "label": "Cloud Volume Backup",
                                          "loadOptions": [Function],
                                          "name": "backup_id",
                                          "placeholder": "<Choose>",
                                          "validate": Array [
                                            Object {
                                              "type": "required",
                                            },
                                          ],
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <SelectWithOnChange
                                          component="select"
                                          id="backup_id"
                                          includeEmpty={true}
                                          isRequired={true}
                                          label="Cloud Volume Backup"
                                          loadOptions={[Function]}
                                          name="backup_id"
                                          placeholder="<Choose>"
                                          validate={
                                            Array [
                                              Object {
                                                "type": "required",
                                              },
                                            ]
                                          }
                                        >
                                          <Select
                                            component="select"
                                            id="backup_id"
                                            isRequired={true}
                                            label="Cloud Volume Backup"
                                            loadOptions={[Function]}
                                            loadingMessage="Loading..."
                                            name="backup_id"
                                            placeholder="<Choose>"
                                            validate={
                                              Array [
                                                Object {
                                                  "type": "required",
                                                },
                                              ]
                                            }
                                          >
                                            <Select
                                              SelectComponent={[Function]}
                                              id="backup_id"
                                              invalidText=""
                                              labelText={
                                                <IsRequired>
                                                  Cloud Volume Backup
                                                </IsRequired>
                                              }
                                              loadOptions={[Function]}
                                              loadOptionsChangeCounter={0}
                                              loadingMessage="Loading..."
                                              name="backup_id"
                                              onBlur={[Function]}
                                              onChange={[Function]}
                                              onFocus={[Function]}
                                              placeholder="<Choose>"
                                              simpleValue={false}
                                              value=""
                                            >
                                              <ClearedSelect
                                                className=""
                                                closeMenuOnSelect={true}
                                                hideSelectedOptions={false}
                                                id="backup_id"
                                                invalidText=""
                                                isClearable={false}
                                                isFetching={false}
                                                isSearchable={false}
                                                labelText={
                                                  <IsRequired>
                                                    Cloud Volume Backup
                                                  </IsRequired>
                                                }
                                                name="backup_id"
                                                noOptionsMessage={[Function]}
                                                onBlur={[Function]}
                                                onChange={[Function]}
                                                onFocus={[Function]}
                                                onInputChange={[Function]}
                                                options={Array []}
                                                placeholder="<Choose>"
                                                value=""
                                              >
                                                <Select
                                                  className=""
                                                  disabled={false}
                                                  helperText=""
                                                  id="backup_id"
                                                  inline={false}
                                                  invalid={false}
                                                  invalidText=""
                                                  labelText={
                                                    <IsRequired>
                                                      Cloud Volume Backup
                                                    </IsRequired>
                                                  }
                                                  light={false}
                                                  name="backup_id"
                                                  onBlur={[Function]}
                                                  onChange={[Function]}
                                                  onFocus={[Function]}
                                                  value=""
                                                >
                                                  <div
                                                    className="bx--form-item"
                                                  >
                                                    <div
                                                      className="bx--select"
                                                    >
                                                      <label
                                                        className="bx--label"
                                                        htmlFor="backup_id"
                                                      >
                                                        <IsRequired>
                                                          <span
                                                            aria-hidden="true"
                                                            className="ddorg__carbon-component-mapper_is-required isRequired-0-2-5"
                                                          >
                                                            *
                                                          </span>
                                                          Cloud Volume Backup
                                                        </IsRequired>
                                                      </label>
                                                      <div
                                                        className="bx--select-input__wrapper"
                                                        data-invalid={null}
                                                      >
                                                        <select
                                                          className="bx--select-input"
                                                          id="backup_id"
                                                          name="backup_id"
                                                          onBlur={[Function]}
                                                          onChange={[Function]}
                                                          onFocus={[Function]}
                                                          value=""
                                                        />
                                                        <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>
                                </div>
                              </SubForm>
                            </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>
                          <FormControls
                            Button={[Function]}
                            ButtonGroup={[Function]}
                            FormSpy={[Function]}
                            buttonOrder={
                              Array [
                                "submit",
                                "reset",
                                "cancel",
                              ]
                            }
                            canReset={false}
                            cancelLabel="Cancel"
                            disableSubmit={true}
                            formFields={
                              Array [
                                <SingleField
                                  component="sub-form"
                                  fields={
                                    Array [
                                      Object {
                                        "component": "select",
                                        "id": "backup_id",
                                        "includeEmpty": true,
                                        "isRequired": true,
                                        "label": "Cloud Volume Backup",
                                        "loadOptions": [Function],
                                        "name": "backup_id",
                                        "placeholder": "<Choose>",
                                        "validate": Array [
                                          Object {
                                            "type": "required",
                                          },
                                        ],
                                      },
                                    ]
                                  }
                                  id="basic-information"
                                  name="basic-information"
                                  title="Basic Information"
                                />,
                                <SingleField
                                  component="spy-field"
                                  name="spy-field"
                                />,
                              ]
                            }
                            formSpyProps={
                              Object {
                                "active": undefined,
                                "dirty": false,
                                "dirtyFields": Object {},
                                "dirtyFieldsSinceLastSubmit": Object {},
                                "dirtySinceLastSubmit": false,
                                "error": undefined,
                                "errors": Object {},
                                "form": Object {
                                  "batch": [Function],
                                  "blur": [Function],
                                  "change": [Function],
                                  "destroyOnUnregister": false,
                                  "focus": [Function],
                                  "getFieldState": [Function],
                                  "getRegisteredFields": [Function],
                                  "getState": [Function],
                                  "initialize": [Function],
                                  "isValidationPaused": [Function],
                                  "mutators": Object {
                                    "concat": [Function],
                                    "insert": [Function],
                                    "move": [Function],
                                    "pop": [Function],
                                    "push": [Function],
                                    "remove": [Function],
                                    "removeBatch": [Function],
                                    "shift": [Function],
                                    "swap": [Function],
                                    "unshift": [Function],
                                    "update": [Function],
                                  },
                                  "pauseValidation": [Function],
                                  "registerField": [Function],
                                  "reset": [Function],
                                  "resetFieldState": [Function],
                                  "restart": [Function],
                                  "resumeValidation": [Function],
                                  "setConfig": [Function],
                                  "submit": [Function],
                                  "subscribe": [Function],
                                },
                                "hasSubmitErrors": false,
                                "hasValidationErrors": false,
                                "initialValues": Object {},
                                "invalid": false,
                                "modified": Object {},
                                "modifiedSinceLastSubmit": false,
                                "pristine": true,
                                "submitError": undefined,
                                "submitErrors": undefined,
                                "submitFailed": false,
                                "submitSucceeded": false,
                                "submitting": false,
                                "touched": Object {},
                                "valid": true,
                                "validating": false,
                                "values": Object {},
                                "visited": Object {},
                              }
                            }
                            onCancel={[Function]}
                            onReset={[Function]}
                            resetLabel="Reset"
                            schema={
                              Object {
                                "fields": Array [
                                  Object {
                                    "component": "sub-form",
                                    "fields": Array [
                                      Object {
                                        "component": "select",
                                        "id": "backup_id",
                                        "includeEmpty": true,
                                        "isRequired": true,
                                        "label": "Cloud Volume Backup",
                                        "loadOptions": [Function],
                                        "name": "backup_id",
                                        "placeholder": "<Choose>",
                                        "validate": Array [
                                          Object {
                                            "type": "required",
                                          },
                                        ],
                                      },
                                    ],
                                    "id": "basic-information",
                                    "name": "basic-information",
                                    "title": "Basic Information",
                                  },
                                  Object {
                                    "component": "spy-field",
                                    "initialize": undefined,
                                    "name": "spy-field",
                                  },
                                ],
                              }
                            }
                            submitLabel="Save"
                          >
                            <ButtonGroup>
                              <ButtonSet
                                className=""
                              >
                                <div
                                  className="bx--btn-set"
                                >
                                  <Button
                                    buttonType="submit"
                                    disabled={true}
                                    key="form-submit"
                                    label="Save"
                                    type="submit"
                                    variant="primary"
                                  >
                                    <Button
                                      disabled={true}
                                      kind="primary"
                                      type="submit"
                                      variant="primary"
                                    >
                                      <button
                                        aria-describedby={null}
                                        aria-pressed={null}
                                        className="bx--btn bx--btn--primary bx--btn--disabled"
                                        disabled={true}
                                        onBlur={[Function]}
                                        onClick={[Function]}
                                        onFocus={[Function]}
                                        onMouseEnter={[Function]}
                                        onMouseLeave={[Function]}
                                        tabIndex={0}
                                        type="submit"
                                        variant="primary"
                                      >
                                        Save
                                      </button>
                                    </Button>
                                  </Button>
                                  <Button
                                    buttonType="cancel"
                                    key="form-cancel"
                                    label="Cancel"
                                    onClick={[Function]}
                                    type="button"
                                  >
                                    <Button
                                      kind="secondary"
                                      onClick={[Function]}
                                      type="button"
                                    >
                                      <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"
                                      >
                                        Cancel
                                      </button>
                                    </Button>
                                  </Button>
                                </div>
                              </ButtonSet>
                            </ButtonGroup>
                          </FormControls>
                        </FormSpy>
                         
                      </form>
                    </Form>
                  </Form>
                </FormTemplate>
              </WrappedFormTemplate>
            </Component>
          </ReactFinalForm>
        </FormRenderer>
      </MiqFormRenderer>
    </Connect(MiqFormRenderer)>
  </CloudVolumeActions>
</Provider>
`;

exports[`Cloud Volume Snapshot Create form component should render the cloud volume snapshot create form 1`] = `
<Provider
  store={
    Object {
      "asyncReducers": Object {
        "FormButtons": [Function],
        "miqCustomTabReducer": [Function],
        "notificationReducer": [Function],
      },
      "dispatch": [Function],
      "getState": [Function],
      "injectReducers": [Function],
      "replaceReducer": [Function],
      "subscribe": [Function],
      Symbol(observable): [Function],
    }
  }
>
  <CloudVolumeActions
    name="Cloud volume name"
    recordId="23"
    type="create_snapshot"
  >
    <Connect(MiqFormRenderer)
      buttonsLabels={
        Object {
          "submitLabel": "Save",
        }
      }
      onCancel={[Function]}
      onSubmit={[Function]}
      schema={
        Object {
          "fields": Array [
            Object {
              "component": "sub-form",
              "fields": Array [
                Object {
                  "component": "text-field",
                  "id": "name",
                  "label": "Snapshot Name",
                  "maxLength": 50,
                  "name": "name",
                },
              ],
              "id": "basic-information",
              "name": "basic-information",
              "title": "Basic Information",
            },
          ],
        }
      }
    >
      <MiqFormRenderer
        buttonsLabels={
          Object {
            "submitLabel": "Save",
          }
        }
        canReset={false}
        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": "sub-form",
                "fields": Array [
                  Object {
                    "component": "text-field",
                    "id": "name",
                    "label": "Snapshot Name",
                    "maxLength": 50,
                    "name": "name",
                  },
                ],
                "id": "basic-information",
                "name": "basic-information",
                "title": "Basic Information",
              },
            ],
          }
        }
        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": "sub-form",
                  "fields": Array [
                    Object {
                      "component": "text-field",
                      "id": "name",
                      "label": "Snapshot Name",
                      "maxLength": 50,
                      "name": "name",
                    },
                  ],
                  "id": "basic-information",
                  "name": "basic-information",
                  "title": "Basic Information",
                },
                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,
              }
            }
          >
            <Component
              formFields={
                Array [
                  <SingleField
                    component="sub-form"
                    fields={
                      Array [
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "label": "Snapshot Name",
                          "maxLength": 50,
                          "name": "name",
                        },
                      ]
                    }
                    id="basic-information"
                    name="basic-information"
                    title="Basic Information"
                  />,
                  <SingleField
                    component="spy-field"
                    name="spy-field"
                  />,
                ]
              }
              schema={
                Object {
                  "fields": Array [
                    Object {
                      "component": "sub-form",
                      "fields": Array [
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "label": "Snapshot Name",
                          "maxLength": 50,
                          "name": "name",
                        },
                      ],
                      "id": "basic-information",
                      "name": "basic-information",
                      "title": "Basic Information",
                    },
                    Object {
                      "component": "spy-field",
                      "initialize": undefined,
                      "name": "spy-field",
                    },
                  ],
                }
              }
            >
              <WrappedFormTemplate
                canReset={false}
                cancelLabel="Cancel"
                disableSubmit={
                  Array [
                    "pristine",
                    "invalid",
                  ]
                }
                formFields={
                  Array [
                    <SingleField
                      component="sub-form"
                      fields={
                        Array [
                          Object {
                            "component": "text-field",
                            "id": "name",
                            "label": "Snapshot Name",
                            "maxLength": 50,
                            "name": "name",
                          },
                        ]
                      }
                      id="basic-information"
                      name="basic-information"
                      title="Basic Information"
                    />,
                    <SingleField
                      component="spy-field"
                      name="spy-field"
                    />,
                  ]
                }
                formWrapperProps={
                  Object {
                    "className": "form-react",
                  }
                }
                resetLabel="Reset"
                schema={
                  Object {
                    "fields": Array [
                      Object {
                        "component": "sub-form",
                        "fields": Array [
                          Object {
                            "component": "text-field",
                            "id": "name",
                            "label": "Snapshot Name",
                            "maxLength": 50,
                            "name": "name",
                          },
                        ],
                        "id": "basic-information",
                        "name": "basic-information",
                        "title": "Basic Information",
                      },
                      Object {
                        "component": "spy-field",
                        "initialize": undefined,
                        "name": "spy-field",
                      },
                    ],
                  }
                }
                showFormControls={true}
                submitLabel="Save"
              >
                <FormTemplate
                  Button={[Function]}
                  ButtonGroup={[Function]}
                  Description={[Function]}
                  FormWrapper={[Function]}
                  Header={[Function]}
                  Title={[Function]}
                  buttonOrder={
                    Array [
                      "submit",
                      "reset",
                      "cancel",
                    ]
                  }
                  canReset={false}
                  cancelLabel="Cancel"
                  disableSubmit={
                    Array [
                      "pristine",
                      "invalid",
                    ]
                  }
                  formFields={
                    Array [
                      <SingleField
                        component="sub-form"
                        fields={
                          Array [
                            Object {
                              "component": "text-field",
                              "id": "name",
                              "label": "Snapshot Name",
                              "maxLength": 50,
                              "name": "name",
                            },
                          ]
                        }
                        id="basic-information"
                        name="basic-information"
                        title="Basic Information"
                      />,
                      <SingleField
                        component="spy-field"
                        name="spy-field"
                      />,
                    ]
                  }
                  formWrapperProps={
                    Object {
                      "className": "form-react",
                    }
                  }
                  resetLabel="Reset"
                  schema={
                    Object {
                      "fields": Array [
                        Object {
                          "component": "sub-form",
                          "fields": Array [
                            Object {
                              "component": "text-field",
                              "id": "name",
                              "label": "Snapshot Name",
                              "maxLength": 50,
                              "name": "name",
                            },
                          ],
                          "id": "basic-information",
                          "name": "basic-information",
                          "title": "Basic Information",
                        },
                        Object {
                          "component": "spy-field",
                          "initialize": undefined,
                          "name": "spy-field",
                        },
                      ],
                    }
                  }
                  showFormControls={true}
                  submitLabel="Save"
                >
                  <Form
                    className="form-react"
                    onSubmit={[Function]}
                  >
                    <Form
                      className="form-0-2-3 form-react"
                      noValidate={true}
                      onSubmit={[Function]}
                    >
                      <form
                        className="bx--form form-0-2-3 form-react"
                        noValidate={true}
                        onSubmit={[Function]}
                      >
                         
                        <SingleField
                          component="sub-form"
                          fields={
                            Array [
                              Object {
                                "component": "text-field",
                                "id": "name",
                                "label": "Snapshot Name",
                                "maxLength": 50,
                                "name": "name",
                              },
                            ]
                          }
                          id="basic-information"
                          key="basic-information"
                          name="basic-information"
                          title="Basic Information"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "sub-form",
                                "fields": Array [
                                  Object {
                                    "component": "text-field",
                                    "id": "name",
                                    "label": "Snapshot Name",
                                    "maxLength": 50,
                                    "name": "name",
                                  },
                                ],
                                "id": "basic-information",
                                "name": "basic-information",
                                "title": "Basic Information",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SubForm
                                DescriptionElement="p"
                                TitleElement="h3"
                                component="sub-form"
                                fields={
                                  Array [
                                    Object {
                                      "component": "text-field",
                                      "id": "name",
                                      "label": "Snapshot Name",
                                      "maxLength": 50,
                                      "name": "name",
                                    },
                                  ]
                                }
                                id="basic-information"
                                name="basic-information"
                                title="Basic Information"
                              >
                                <div
                                  className=""
                                  id="basic-information"
                                  name="basic-information"
                                >
                                  <div>
                                    <h3>
                                      Basic Information
                                    </h3>
                                  </div>
                                  <SingleField
                                    component="text-field"
                                    id="name"
                                    key="name"
                                    label="Snapshot Name"
                                    maxLength={50}
                                    name="name"
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "text-field",
                                          "id": "name",
                                          "label": "Snapshot Name",
                                          "maxLength": 50,
                                          "name": "name",
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <TextField
                                          component="text-field"
                                          id="name"
                                          label="Snapshot Name"
                                          maxLength={50}
                                          name="name"
                                        >
                                          <TextInput
                                            id="name"
                                            invalid={false}
                                            invalidText=""
                                            key="name"
                                            labelText="Snapshot Name"
                                            maxLength={50}
                                            name="name"
                                            onBlur={[Function]}
                                            onChange={[Function]}
                                            onFocus={[Function]}
                                            value=""
                                            warn={false}
                                            warnText=""
                                          >
                                            <div
                                              className="bx--form-item bx--text-input-wrapper"
                                            >
                                              <label
                                                className="bx--label"
                                                htmlFor="name"
                                              >
                                                Snapshot Name
                                              </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="name"
                                                    maxLength={50}
                                                    name="name"
                                                    onBlur={[Function]}
                                                    onChange={[Function]}
                                                    onClick={[Function]}
                                                    onFocus={[Function]}
                                                    type="text"
                                                    value=""
                                                  />
                                                </div>
                                              </div>
                                            </div>
                                          </TextInput>
                                        </TextField>
                                      </FormFieldHideWrapper>
                                    </FormConditionWrapper>
                                  </SingleField>
                                </div>
                              </SubForm>
                            </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>
                          <FormControls
                            Button={[Function]}
                            ButtonGroup={[Function]}
                            FormSpy={[Function]}
                            buttonOrder={
                              Array [
                                "submit",
                                "reset",
                                "cancel",
                              ]
                            }
                            canReset={false}
                            cancelLabel="Cancel"
                            disableSubmit={true}
                            formFields={
                              Array [
                                <SingleField
                                  component="sub-form"
                                  fields={
                                    Array [
                                      Object {
                                        "component": "text-field",
                                        "id": "name",
                                        "label": "Snapshot Name",
                                        "maxLength": 50,
                                        "name": "name",
                                      },
                                    ]
                                  }
                                  id="basic-information"
                                  name="basic-information"
                                  title="Basic Information"
                                />,
                                <SingleField
                                  component="spy-field"
                                  name="spy-field"
                                />,
                              ]
                            }
                            formSpyProps={
                              Object {
                                "active": undefined,
                                "dirty": false,
                                "dirtyFields": Object {},
                                "dirtyFieldsSinceLastSubmit": Object {},
                                "dirtySinceLastSubmit": false,
                                "error": undefined,
                                "errors": Object {},
                                "form": Object {
                                  "batch": [Function],
                                  "blur": [Function],
                                  "change": [Function],
                                  "destroyOnUnregister": false,
                                  "focus": [Function],
                                  "getFieldState": [Function],
                                  "getRegisteredFields": [Function],
                                  "getState": [Function],
                                  "initialize": [Function],
                                  "isValidationPaused": [Function],
                                  "mutators": Object {
                                    "concat": [Function],
                                    "insert": [Function],
                                    "move": [Function],
                                    "pop": [Function],
                                    "push": [Function],
                                    "remove": [Function],
                                    "removeBatch": [Function],
                                    "shift": [Function],
                                    "swap": [Function],
                                    "unshift": [Function],
                                    "update": [Function],
                                  },
                                  "pauseValidation": [Function],
                                  "registerField": [Function],
                                  "reset": [Function],
                                  "resetFieldState": [Function],
                                  "restart": [Function],
                                  "resumeValidation": [Function],
                                  "setConfig": [Function],
                                  "submit": [Function],
                                  "subscribe": [Function],
                                },
                                "hasSubmitErrors": false,
                                "hasValidationErrors": false,
                                "initialValues": Object {},
                                "invalid": false,
                                "modified": Object {},
                                "modifiedSinceLastSubmit": false,
                                "pristine": true,
                                "submitError": undefined,
                                "submitErrors": undefined,
                                "submitFailed": false,
                                "submitSucceeded": false,
                                "submitting": false,
                                "touched": Object {},
                                "valid": true,
                                "validating": false,
                                "values": Object {},
                                "visited": Object {},
                              }
                            }
                            onCancel={[Function]}
                            onReset={[Function]}
                            resetLabel="Reset"
                            schema={
                              Object {
                                "fields": Array [
                                  Object {
                                    "component": "sub-form",
                                    "fields": Array [
                                      Object {
                                        "component": "text-field",
                                        "id": "name",
                                        "label": "Snapshot Name",
                                        "maxLength": 50,
                                        "name": "name",
                                      },
                                    ],
                                    "id": "basic-information",
                                    "name": "basic-information",
                                    "title": "Basic Information",
                                  },
                                  Object {
                                    "component": "spy-field",
                                    "initialize": undefined,
                                    "name": "spy-field",
                                  },
                                ],
                              }
                            }
                            submitLabel="Save"
                          >
                            <ButtonGroup>
                              <ButtonSet
                                className=""
                              >
                                <div
                                  className="bx--btn-set"
                                >
                                  <Button
                                    buttonType="submit"
                                    disabled={true}
                                    key="form-submit"
                                    label="Save"
                                    type="submit"
                                    variant="primary"
                                  >
                                    <Button
                                      disabled={true}
                                      kind="primary"
                                      type="submit"
                                      variant="primary"
                                    >
                                      <button
                                        aria-describedby={null}
                                        aria-pressed={null}
                                        className="bx--btn bx--btn--primary bx--btn--disabled"
                                        disabled={true}
                                        onBlur={[Function]}
                                        onClick={[Function]}
                                        onFocus={[Function]}
                                        onMouseEnter={[Function]}
                                        onMouseLeave={[Function]}
                                        tabIndex={0}
                                        type="submit"
                                        variant="primary"
                                      >
                                        Save
                                      </button>
                                    </Button>
                                  </Button>
                                  <Button
                                    buttonType="cancel"
                                    key="form-cancel"
                                    label="Cancel"
                                    onClick={[Function]}
                                    type="button"
                                  >
                                    <Button
                                      kind="secondary"
                                      onClick={[Function]}
                                      type="button"
                                    >
                                      <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"
                                      >
                                        Cancel
                                      </button>
                                    </Button>
                                  </Button>
                                </div>
                              </ButtonSet>
                            </ButtonGroup>
                          </FormControls>
                        </FormSpy>
                         
                      </form>
                    </Form>
                  </Form>
                </FormTemplate>
              </WrappedFormTemplate>
            </Component>
          </ReactFinalForm>
        </FormRenderer>
      </MiqFormRenderer>
    </Connect(MiqFormRenderer)>
  </CloudVolumeActions>
</Provider>
`;

exports[`Cloud Volume Snapshot Create form component when adding a new snapshot of cloud volume 1`] = `
<Provider
  store={
    Object {
      "asyncReducers": Object {
        "FormButtons": [Function],
        "miqCustomTabReducer": [Function],
        "notificationReducer": [Function],
      },
      "dispatch": [Function],
      "getState": [Function],
      "injectReducers": [Function],
      "replaceReducer": [Function],
      "subscribe": [Function],
      Symbol(observable): [Function],
    }
  }
>
  <CloudVolumeActions
    name="Cloud volume name"
    recordId="23"
    type="create_snapshot"
  >
    <Connect(MiqFormRenderer)
      buttonsLabels={
        Object {
          "submitLabel": "Save",
        }
      }
      onCancel={[Function]}
      onSubmit={[Function]}
      schema={
        Object {
          "fields": Array [
            Object {
              "component": "sub-form",
              "fields": Array [
                Object {
                  "component": "text-field",
                  "id": "name",
                  "label": "Snapshot Name",
                  "maxLength": 50,
                  "name": "name",
                },
              ],
              "id": "basic-information",
              "name": "basic-information",
              "title": "Basic Information",
            },
          ],
        }
      }
    >
      <MiqFormRenderer
        buttonsLabels={
          Object {
            "submitLabel": "Save",
          }
        }
        canReset={false}
        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": "sub-form",
                "fields": Array [
                  Object {
                    "component": "text-field",
                    "id": "name",
                    "label": "Snapshot Name",
                    "maxLength": 50,
                    "name": "name",
                  },
                ],
                "id": "basic-information",
                "name": "basic-information",
                "title": "Basic Information",
              },
            ],
          }
        }
        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": "sub-form",
                  "fields": Array [
                    Object {
                      "component": "text-field",
                      "id": "name",
                      "label": "Snapshot Name",
                      "maxLength": 50,
                      "name": "name",
                    },
                  ],
                  "id": "basic-information",
                  "name": "basic-information",
                  "title": "Basic Information",
                },
                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,
              }
            }
          >
            <Component
              formFields={
                Array [
                  <SingleField
                    component="sub-form"
                    fields={
                      Array [
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "label": "Snapshot Name",
                          "maxLength": 50,
                          "name": "name",
                        },
                      ]
                    }
                    id="basic-information"
                    name="basic-information"
                    title="Basic Information"
                  />,
                  <SingleField
                    component="spy-field"
                    name="spy-field"
                  />,
                ]
              }
              schema={
                Object {
                  "fields": Array [
                    Object {
                      "component": "sub-form",
                      "fields": Array [
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "label": "Snapshot Name",
                          "maxLength": 50,
                          "name": "name",
                        },
                      ],
                      "id": "basic-information",
                      "name": "basic-information",
                      "title": "Basic Information",
                    },
                    Object {
                      "component": "spy-field",
                      "initialize": undefined,
                      "name": "spy-field",
                    },
                  ],
                }
              }
            >
              <WrappedFormTemplate
                canReset={false}
                cancelLabel="Cancel"
                disableSubmit={
                  Array [
                    "pristine",
                    "invalid",
                  ]
                }
                formFields={
                  Array [
                    <SingleField
                      component="sub-form"
                      fields={
                        Array [
                          Object {
                            "component": "text-field",
                            "id": "name",
                            "label": "Snapshot Name",
                            "maxLength": 50,
                            "name": "name",
                          },
                        ]
                      }
                      id="basic-information"
                      name="basic-information"
                      title="Basic Information"
                    />,
                    <SingleField
                      component="spy-field"
                      name="spy-field"
                    />,
                  ]
                }
                formWrapperProps={
                  Object {
                    "className": "form-react",
                  }
                }
                resetLabel="Reset"
                schema={
                  Object {
                    "fields": Array [
                      Object {
                        "component": "sub-form",
                        "fields": Array [
                          Object {
                            "component": "text-field",
                            "id": "name",
                            "label": "Snapshot Name",
                            "maxLength": 50,
                            "name": "name",
                          },
                        ],
                        "id": "basic-information",
                        "name": "basic-information",
                        "title": "Basic Information",
                      },
                      Object {
                        "component": "spy-field",
                        "initialize": undefined,
                        "name": "spy-field",
                      },
                    ],
                  }
                }
                showFormControls={true}
                submitLabel="Save"
              >
                <FormTemplate
                  Button={[Function]}
                  ButtonGroup={[Function]}
                  Description={[Function]}
                  FormWrapper={[Function]}
                  Header={[Function]}
                  Title={[Function]}
                  buttonOrder={
                    Array [
                      "submit",
                      "reset",
                      "cancel",
                    ]
                  }
                  canReset={false}
                  cancelLabel="Cancel"
                  disableSubmit={
                    Array [
                      "pristine",
                      "invalid",
                    ]
                  }
                  formFields={
                    Array [
                      <SingleField
                        component="sub-form"
                        fields={
                          Array [
                            Object {
                              "component": "text-field",
                              "id": "name",
                              "label": "Snapshot Name",
                              "maxLength": 50,
                              "name": "name",
                            },
                          ]
                        }
                        id="basic-information"
                        name="basic-information"
                        title="Basic Information"
                      />,
                      <SingleField
                        component="spy-field"
                        name="spy-field"
                      />,
                    ]
                  }
                  formWrapperProps={
                    Object {
                      "className": "form-react",
                    }
                  }
                  resetLabel="Reset"
                  schema={
                    Object {
                      "fields": Array [
                        Object {
                          "component": "sub-form",
                          "fields": Array [
                            Object {
                              "component": "text-field",
                              "id": "name",
                              "label": "Snapshot Name",
                              "maxLength": 50,
                              "name": "name",
                            },
                          ],
                          "id": "basic-information",
                          "name": "basic-information",
                          "title": "Basic Information",
                        },
                        Object {
                          "component": "spy-field",
                          "initialize": undefined,
                          "name": "spy-field",
                        },
                      ],
                    }
                  }
                  showFormControls={true}
                  submitLabel="Save"
                >
                  <Form
                    className="form-react"
                    onSubmit={[Function]}
                  >
                    <Form
                      className="form-0-2-3 form-react"
                      noValidate={true}
                      onSubmit={[Function]}
                    >
                      <form
                        className="bx--form form-0-2-3 form-react"
                        noValidate={true}
                        onSubmit={[Function]}
                      >
                         
                        <SingleField
                          component="sub-form"
                          fields={
                            Array [
                              Object {
                                "component": "text-field",
                                "id": "name",
                                "label": "Snapshot Name",
                                "maxLength": 50,
                                "name": "name",
                              },
                            ]
                          }
                          id="basic-information"
                          key="basic-information"
                          name="basic-information"
                          title="Basic Information"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "sub-form",
                                "fields": Array [
                                  Object {
                                    "component": "text-field",
                                    "id": "name",
                                    "label": "Snapshot Name",
                                    "maxLength": 50,
                                    "name": "name",
                                  },
                                ],
                                "id": "basic-information",
                                "name": "basic-information",
                                "title": "Basic Information",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SubForm
                                DescriptionElement="p"
                                TitleElement="h3"
                                component="sub-form"
                                fields={
                                  Array [
                                    Object {
                                      "component": "text-field",
                                      "id": "name",
                                      "label": "Snapshot Name",
                                      "maxLength": 50,
                                      "name": "name",
                                    },
                                  ]
                                }
                                id="basic-information"
                                name="basic-information"
                                title="Basic Information"
                              >
                                <div
                                  className=""
                                  id="basic-information"
                                  name="basic-information"
                                >
                                  <div>
                                    <h3>
                                      Basic Information
                                    </h3>
                                  </div>
                                  <SingleField
                                    component="text-field"
                                    id="name"
                                    key="name"
                                    label="Snapshot Name"
                                    maxLength={50}
                                    name="name"
                                  >
                                    <FormConditionWrapper
                                      field={
                                        Object {
                                          "component": "text-field",
                                          "id": "name",
                                          "label": "Snapshot Name",
                                          "maxLength": 50,
                                          "name": "name",
                                        }
                                      }
                                    >
                                      <FormFieldHideWrapper
                                        hideField={false}
                                      >
                                        <TextField
                                          component="text-field"
                                          id="name"
                                          label="Snapshot Name"
                                          maxLength={50}
                                          name="name"
                                        >
                                          <TextInput
                                            id="name"
                                            invalid={false}
                                            invalidText=""
                                            key="name"
                                            labelText="Snapshot Name"
                                            maxLength={50}
                                            name="name"
                                            onBlur={[Function]}
                                            onChange={[Function]}
                                            onFocus={[Function]}
                                            value=""
                                            warn={false}
                                            warnText=""
                                          >
                                            <div
                                              className="bx--form-item bx--text-input-wrapper"
                                            >
                                              <label
                                                className="bx--label"
                                                htmlFor="name"
                                              >
                                                Snapshot Name
                                              </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="name"
                                                    maxLength={50}
                                                    name="name"
                                                    onBlur={[Function]}
                                                    onChange={[Function]}
                                                    onClick={[Function]}
                                                    onFocus={[Function]}
                                                    type="text"
                                                    value=""
                                                  />
                                                </div>
                                              </div>
                                            </div>
                                          </TextInput>
                                        </TextField>
                                      </FormFieldHideWrapper>
                                    </FormConditionWrapper>
                                  </SingleField>
                                </div>
                              </SubForm>
                            </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>
                          <FormControls
                            Button={[Function]}
                            ButtonGroup={[Function]}
                            FormSpy={[Function]}
                            buttonOrder={
                              Array [
                                "submit",
                                "reset",
                                "cancel",
                              ]
                            }
                            canReset={false}
                            cancelLabel="Cancel"
                            disableSubmit={true}
                            formFields={
                              Array [
                                <SingleField
                                  component="sub-form"
                                  fields={
                                    Array [
                                      Object {
                                        "component": "text-field",
                                        "id": "name",
                                        "label": "Snapshot Name",
                                        "maxLength": 50,
                                        "name": "name",
                                      },
                                    ]
                                  }
                                  id="basic-information"
                                  name="basic-information"
                                  title="Basic Information"
                                />,
                                <SingleField
                                  component="spy-field"
                                  name="spy-field"
                                />,
                              ]
                            }
                            formSpyProps={
                              Object {
                                "active": undefined,
                                "dirty": false,
                                "dirtyFields": Object {},
                                "dirtyFieldsSinceLastSubmit": Object {},
                                "dirtySinceLastSubmit": false,
                                "error": undefined,
                                "errors": Object {},
                                "form": Object {
                                  "batch": [Function],
                                  "blur": [Function],
                                  "change": [Function],
                                  "destroyOnUnregister": false,
                                  "focus": [Function],
                                  "getFieldState": [Function],
                                  "getRegisteredFields": [Function],
                                  "getState": [Function],
                                  "initialize": [Function],
                                  "isValidationPaused": [Function],
                                  "mutators": Object {
                                    "concat": [Function],
                                    "insert": [Function],
                                    "move": [Function],
                                    "pop": [Function],
                                    "push": [Function],
                                    "remove": [Function],
                                    "removeBatch": [Function],
                                    "shift": [Function],
                                    "swap": [Function],
                                    "unshift": [Function],
                                    "update": [Function],
                                  },
                                  "pauseValidation": [Function],
                                  "registerField": [Function],
                                  "reset": [Function],
                                  "resetFieldState": [Function],
                                  "restart": [Function],
                                  "resumeValidation": [Function],
                                  "setConfig": [Function],
                                  "submit": [Function],
                                  "subscribe": [Function],
                                },
                                "hasSubmitErrors": false,
                                "hasValidationErrors": false,
                                "initialValues": Object {},
                                "invalid": false,
                                "modified": Object {},
                                "modifiedSinceLastSubmit": false,
                                "pristine": true,
                                "submitError": undefined,
                                "submitErrors": undefined,
                                "submitFailed": false,
                                "submitSucceeded": false,
                                "submitting": false,
                                "touched": Object {},
                                "valid": true,
                                "validating": false,
                                "values": Object {},
                                "visited": Object {},
                              }
                            }
                            onCancel={[Function]}
                            onReset={[Function]}
                            resetLabel="Reset"
                            schema={
                              Object {
                                "fields": Array [
                                  Object {
                                    "component": "sub-form",
                                    "fields": Array [
                                      Object {
                                        "component": "text-field",
                                        "id": "name",
                                        "label": "Snapshot Name",
                                        "maxLength": 50,
                                        "name": "name",
                                      },
                                    ],
                                    "id": "basic-information",
                                    "name": "basic-information",
                                    "title": "Basic Information",
                                  },
                                  Object {
                                    "component": "spy-field",
                                    "initialize": undefined,
                                    "name": "spy-field",
                                  },
                                ],
                              }
                            }
                            submitLabel="Save"
                          >
                            <ButtonGroup>
                              <ButtonSet
                                className=""
                              >
                                <div
                                  className="bx--btn-set"
                                >
                                  <Button
                                    buttonType="submit"
                                    disabled={true}
                                    key="form-submit"
                                    label="Save"
                                    type="submit"
                                    variant="primary"
                                  >
                                    <Button
                                      disabled={true}
                                      kind="primary"
                                      type="submit"
                                      variant="primary"
                                    >
                                      <button
                                        aria-describedby={null}
                                        aria-pressed={null}
                                        className="bx--btn bx--btn--primary bx--btn--disabled"
                                        disabled={true}
                                        onBlur={[Function]}
                                        onClick={[Function]}
                                        onFocus={[Function]}
                                        onMouseEnter={[Function]}
                                        onMouseLeave={[Function]}
                                        tabIndex={0}
                                        type="submit"
                                        variant="primary"
                                      >
                                        Save
                                      </button>
                                    </Button>
                                  </Button>
                                  <Button
                                    buttonType="cancel"
                                    key="form-cancel"
                                    label="Cancel"
                                    onClick={[Function]}
                                    type="button"
                                  >
                                    <Button
                                      kind="secondary"
                                      onClick={[Function]}
                                      type="button"
                                    >
                                      <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"
                                      >
                                        Cancel
                                      </button>
                                    </Button>
                                  </Button>
                                </div>
                              </ButtonSet>
                            </ButtonGroup>
                          </FormControls>
                        </FormSpy>
                         
                      </form>
                    </Form>
                  </Form>
                </FormTemplate>
              </WrappedFormTemplate>
            </Component>
          </ReactFinalForm>
        </FormRenderer>
      </MiqFormRenderer>
    </Connect(MiqFormRenderer)>
  </CloudVolumeActions>
</Provider>
`;