ManageIQ/manageiq-ui-classic

View on GitHub
app/javascript/spec/ansible-credentials-form/__snapshots__/ansible-credentials-form.spec.js.snap

Summary

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

exports[`Ansible Credential Form Component should render adding a new credential 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],
    }
  }
>
  <AnsibleCredentialsForm>
    <Connect(MiqFormRenderer)
      buttonsLabels={
        Object {
          "submitLabel": "Add",
        }
      }
      canReset={false}
      initialValues={
        Object {
          "manager_resource": Object {
            "href": "http://localhost:3000/api/providers/1",
          },
        }
      }
      onCancel={[Function]}
      onSubmit={[Function]}
      schema={
        Object {
          "fields": Array [
            Object {
              "component": "text-field",
              "hideField": true,
              "label": "manager_resource",
              "name": "manager_resource",
              "value": "",
            },
            Object {
              "component": "text-field",
              "id": "name",
              "isRequired": true,
              "label": "Name",
              "maxLength": 128,
              "name": "name",
              "validate": Array [
                Object {
                  "type": "required",
                },
              ],
            },
            Object {
              "component": "select",
              "id": "type",
              "includeEmpty": true,
              "isDisabled": false,
              "isRequired": true,
              "label": "Credential type",
              "loadOptions": [Function],
              "name": "type",
              "onChange": [Function],
              "placeholder": "<Choose>",
              "validate": Array [
                Object {
                  "type": "required",
                },
              ],
            },
          ],
        }
      }
    >
      <MiqFormRenderer
        buttonsLabels={
          Object {
            "submitLabel": "Add",
          }
        }
        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]}
        initialValues={
          Object {
            "manager_resource": Object {
              "href": "http://localhost:3000/api/providers/1",
            },
          }
        }
        onCancel={[Function]}
        onSubmit={[Function]}
        schema={
          Object {
            "fields": Array [
              Object {
                "component": "text-field",
                "hideField": true,
                "label": "manager_resource",
                "name": "manager_resource",
                "value": "",
              },
              Object {
                "component": "text-field",
                "id": "name",
                "isRequired": true,
                "label": "Name",
                "maxLength": 128,
                "name": "name",
                "validate": Array [
                  Object {
                    "type": "required",
                  },
                ],
              },
              Object {
                "component": "select",
                "id": "type",
                "includeEmpty": true,
                "isDisabled": false,
                "isRequired": true,
                "label": "Credential type",
                "loadOptions": [Function],
                "name": "type",
                "onChange": [Function],
                "placeholder": "<Choose>",
                "validate": Array [
                  Object {
                    "type": "required",
                  },
                ],
              },
            ],
          }
        }
        showFormControls={true}
      >
        <FormRenderer
          FormTemplate={[Function]}
          clearOnUnmount={false}
          componentMapper={
            Object {
              "checkbox": [Function],
              "code-editor": [Function],
              "date-picker": [Function],
              "dual-list-select": [Function],
              "edit-password-field": [Function],
              "field-array": [Function],
              "file-upload": [Function],
              "font-icon-picker": [Function],
              "font-icon-picker-ddf": [Function],
              "multi-select": [Function],
              "password-field": [Function],
              "plain-text": [Function],
              "radio": [Function],
              "select": [Function],
              "slider": [Function],
              "spy-field": [Function],
              "sub-form": [Function],
              "switch": [Function],
              "tabs": [Function],
              "text-field": [Function],
              "textarea": [Function],
              "time-picker": [Function],
              "tree-selector": [Function],
              "tree-view": [Function],
              "validate-credentials": [Function],
              "wizard": [Function],
            }
          }
          dispatch={[Function]}
          initialValues={
            Object {
              "manager_resource": Object {
                "href": "http://localhost:3000/api/providers/1",
              },
            }
          }
          onCancel={[Function]}
          onReset={[Function]}
          onSubmit={[Function]}
          schema={
            Object {
              "fields": Array [
                Object {
                  "component": "text-field",
                  "hideField": true,
                  "label": "manager_resource",
                  "name": "manager_resource",
                  "value": "",
                },
                Object {
                  "component": "text-field",
                  "id": "name",
                  "isRequired": true,
                  "label": "Name",
                  "maxLength": 128,
                  "name": "name",
                  "validate": Array [
                    Object {
                      "type": "required",
                    },
                  ],
                },
                Object {
                  "component": "select",
                  "id": "type",
                  "includeEmpty": true,
                  "isDisabled": false,
                  "isRequired": true,
                  "label": "Credential type",
                  "loadOptions": [Function],
                  "name": "type",
                  "onChange": [Function],
                  "placeholder": "<Choose>",
                  "validate": Array [
                    Object {
                      "type": "required",
                    },
                  ],
                },
                Object {
                  "component": "spy-field",
                  "initialize": undefined,
                  "name": "spy-field",
                },
              ],
            }
          }
        >
          <ReactFinalForm
            decorators={
              Array [
                [Function],
              ]
            }
            dispatch={[Function]}
            initialValues={
              Object {
                "manager_resource": Object {
                  "href": "http://localhost:3000/api/providers/1",
                },
              }
            }
            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="text-field"
                    hideField={true}
                    label="manager_resource"
                    name="manager_resource"
                    value=""
                  />,
                  <SingleField
                    component="text-field"
                    id="name"
                    isRequired={true}
                    label="Name"
                    maxLength={128}
                    name="name"
                    validate={
                      Array [
                        Object {
                          "type": "required",
                        },
                      ]
                    }
                  />,
                  <SingleField
                    component="select"
                    id="type"
                    includeEmpty={true}
                    isDisabled={false}
                    isRequired={true}
                    label="Credential type"
                    loadOptions={[Function]}
                    name="type"
                    onChange={[Function]}
                    placeholder="<Choose>"
                    validate={
                      Array [
                        Object {
                          "type": "required",
                        },
                      ]
                    }
                  />,
                  <SingleField
                    component="spy-field"
                    name="spy-field"
                  />,
                ]
              }
              schema={
                Object {
                  "fields": Array [
                    Object {
                      "component": "text-field",
                      "hideField": true,
                      "label": "manager_resource",
                      "name": "manager_resource",
                      "value": "",
                    },
                    Object {
                      "component": "text-field",
                      "id": "name",
                      "isRequired": true,
                      "label": "Name",
                      "maxLength": 128,
                      "name": "name",
                      "validate": Array [
                        Object {
                          "type": "required",
                        },
                      ],
                    },
                    Object {
                      "component": "select",
                      "id": "type",
                      "includeEmpty": true,
                      "isDisabled": false,
                      "isRequired": true,
                      "label": "Credential type",
                      "loadOptions": [Function],
                      "name": "type",
                      "onChange": [Function],
                      "placeholder": "<Choose>",
                      "validate": Array [
                        Object {
                          "type": "required",
                        },
                      ],
                    },
                    Object {
                      "component": "spy-field",
                      "initialize": undefined,
                      "name": "spy-field",
                    },
                  ],
                }
              }
            >
              <WrappedFormTemplate
                canReset={false}
                cancelLabel="Cancel"
                disableSubmit={
                  Array [
                    "pristine",
                    "invalid",
                  ]
                }
                formFields={
                  Array [
                    <SingleField
                      component="text-field"
                      hideField={true}
                      label="manager_resource"
                      name="manager_resource"
                      value=""
                    />,
                    <SingleField
                      component="text-field"
                      id="name"
                      isRequired={true}
                      label="Name"
                      maxLength={128}
                      name="name"
                      validate={
                        Array [
                          Object {
                            "type": "required",
                          },
                        ]
                      }
                    />,
                    <SingleField
                      component="select"
                      id="type"
                      includeEmpty={true}
                      isDisabled={false}
                      isRequired={true}
                      label="Credential type"
                      loadOptions={[Function]}
                      name="type"
                      onChange={[Function]}
                      placeholder="<Choose>"
                      validate={
                        Array [
                          Object {
                            "type": "required",
                          },
                        ]
                      }
                    />,
                    <SingleField
                      component="spy-field"
                      name="spy-field"
                    />,
                  ]
                }
                formWrapperProps={
                  Object {
                    "className": "form-react",
                  }
                }
                resetLabel="Reset"
                schema={
                  Object {
                    "fields": Array [
                      Object {
                        "component": "text-field",
                        "hideField": true,
                        "label": "manager_resource",
                        "name": "manager_resource",
                        "value": "",
                      },
                      Object {
                        "component": "text-field",
                        "id": "name",
                        "isRequired": true,
                        "label": "Name",
                        "maxLength": 128,
                        "name": "name",
                        "validate": Array [
                          Object {
                            "type": "required",
                          },
                        ],
                      },
                      Object {
                        "component": "select",
                        "id": "type",
                        "includeEmpty": true,
                        "isDisabled": false,
                        "isRequired": true,
                        "label": "Credential type",
                        "loadOptions": [Function],
                        "name": "type",
                        "onChange": [Function],
                        "placeholder": "<Choose>",
                        "validate": Array [
                          Object {
                            "type": "required",
                          },
                        ],
                      },
                      Object {
                        "component": "spy-field",
                        "initialize": undefined,
                        "name": "spy-field",
                      },
                    ],
                  }
                }
                showFormControls={true}
                submitLabel="Add"
              >
                <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="text-field"
                        hideField={true}
                        label="manager_resource"
                        name="manager_resource"
                        value=""
                      />,
                      <SingleField
                        component="text-field"
                        id="name"
                        isRequired={true}
                        label="Name"
                        maxLength={128}
                        name="name"
                        validate={
                          Array [
                            Object {
                              "type": "required",
                            },
                          ]
                        }
                      />,
                      <SingleField
                        component="select"
                        id="type"
                        includeEmpty={true}
                        isDisabled={false}
                        isRequired={true}
                        label="Credential type"
                        loadOptions={[Function]}
                        name="type"
                        onChange={[Function]}
                        placeholder="<Choose>"
                        validate={
                          Array [
                            Object {
                              "type": "required",
                            },
                          ]
                        }
                      />,
                      <SingleField
                        component="spy-field"
                        name="spy-field"
                      />,
                    ]
                  }
                  formWrapperProps={
                    Object {
                      "className": "form-react",
                    }
                  }
                  resetLabel="Reset"
                  schema={
                    Object {
                      "fields": Array [
                        Object {
                          "component": "text-field",
                          "hideField": true,
                          "label": "manager_resource",
                          "name": "manager_resource",
                          "value": "",
                        },
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "isRequired": true,
                          "label": "Name",
                          "maxLength": 128,
                          "name": "name",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                        Object {
                          "component": "select",
                          "id": "type",
                          "includeEmpty": true,
                          "isDisabled": false,
                          "isRequired": true,
                          "label": "Credential type",
                          "loadOptions": [Function],
                          "name": "type",
                          "onChange": [Function],
                          "placeholder": "<Choose>",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                        Object {
                          "component": "spy-field",
                          "initialize": undefined,
                          "name": "spy-field",
                        },
                      ],
                    }
                  }
                  showFormControls={true}
                  submitLabel="Add"
                >
                  <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="text-field"
                          hideField={true}
                          key="manager_resource"
                          label="manager_resource"
                          name="manager_resource"
                          value=""
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "text-field",
                                "label": "manager_resource",
                                "name": "manager_resource",
                                "value": "",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={true}
                            >
                              <div
                                hidden={true}
                              >
                                <TextField
                                  component="text-field"
                                  label="manager_resource"
                                  name="manager_resource"
                                  value=""
                                >
                                  <TextInput
                                    id="manager_resource"
                                    invalid={false}
                                    invalidText=""
                                    key="manager_resource"
                                    labelText="manager_resource"
                                    name="manager_resource"
                                    onBlur={[Function]}
                                    onChange={[Function]}
                                    onFocus={[Function]}
                                    value=""
                                    warn={false}
                                    warnText=""
                                  >
                                    <div
                                      className="bx--form-item bx--text-input-wrapper"
                                    >
                                      <label
                                        className="bx--label"
                                        htmlFor="manager_resource"
                                      >
                                        manager_resource
                                      </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="manager_resource"
                                            name="manager_resource"
                                            onBlur={[Function]}
                                            onChange={[Function]}
                                            onClick={[Function]}
                                            onFocus={[Function]}
                                            type="text"
                                            value=""
                                          />
                                        </div>
                                      </div>
                                    </div>
                                  </TextInput>
                                </TextField>
                              </div>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <SingleField
                          component="text-field"
                          id="name"
                          isRequired={true}
                          key="name"
                          label="Name"
                          maxLength={128}
                          name="name"
                          validate={
                            Array [
                              Object {
                                "type": "required",
                              },
                            ]
                          }
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "text-field",
                                "id": "name",
                                "isRequired": true,
                                "label": "Name",
                                "maxLength": 128,
                                "name": "name",
                                "validate": Array [
                                  Object {
                                    "type": "required",
                                  },
                                ],
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <TextField
                                component="text-field"
                                id="name"
                                isRequired={true}
                                label="Name"
                                maxLength={128}
                                name="name"
                                validate={
                                  Array [
                                    Object {
                                      "type": "required",
                                    },
                                  ]
                                }
                              >
                                <TextInput
                                  id="name"
                                  invalid={false}
                                  invalidText=""
                                  key="name"
                                  labelText={
                                    <IsRequired>
                                      Name
                                    </IsRequired>
                                  }
                                  maxLength={128}
                                  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-4"
                                        >
                                          *
                                        </span>
                                        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={128}
                                          name="name"
                                          onBlur={[Function]}
                                          onChange={[Function]}
                                          onClick={[Function]}
                                          onFocus={[Function]}
                                          type="text"
                                          value=""
                                        />
                                      </div>
                                    </div>
                                  </div>
                                </TextInput>
                              </TextField>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <SingleField
                          component="select"
                          id="type"
                          includeEmpty={true}
                          isDisabled={false}
                          isRequired={true}
                          key="type"
                          label="Credential type"
                          loadOptions={[Function]}
                          name="type"
                          onChange={[Function]}
                          placeholder="<Choose>"
                          validate={
                            Array [
                              Object {
                                "type": "required",
                              },
                            ]
                          }
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "select",
                                "id": "type",
                                "includeEmpty": true,
                                "isDisabled": false,
                                "isRequired": true,
                                "label": "Credential type",
                                "loadOptions": [Function],
                                "name": "type",
                                "onChange": [Function],
                                "placeholder": "<Choose>",
                                "validate": Array [
                                  Object {
                                    "type": "required",
                                  },
                                ],
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SelectWithOnChange
                                component="select"
                                id="type"
                                includeEmpty={true}
                                isDisabled={false}
                                isRequired={true}
                                label="Credential type"
                                loadOptions={[Function]}
                                name="type"
                                onChange={[Function]}
                                placeholder="<Choose>"
                                validate={
                                  Array [
                                    Object {
                                      "type": "required",
                                    },
                                  ]
                                }
                              >
                                <Select
                                  component="select"
                                  id="type"
                                  isDisabled={false}
                                  isRequired={true}
                                  label="Credential type"
                                  loadOptions={[Function]}
                                  loadingMessage="Loading..."
                                  name="type"
                                  placeholder="<Choose>"
                                  validate={
                                    Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ]
                                  }
                                >
                                  <Select
                                    SelectComponent={[Function]}
                                    disabled={false}
                                    id="type"
                                    invalidText=""
                                    labelText={
                                      <IsRequired>
                                        Credential type
                                      </IsRequired>
                                    }
                                    loadOptions={[Function]}
                                    loadOptionsChangeCounter={1}
                                    loadingMessage="Loading..."
                                    name="type"
                                    onBlur={[Function]}
                                    onChange={[Function]}
                                    onFocus={[Function]}
                                    placeholder="<Choose>"
                                    simpleValue={false}
                                    value=""
                                  >
                                    <ClearedSelect
                                      className=""
                                      closeMenuOnSelect={true}
                                      disabled={false}
                                      hideSelectedOptions={false}
                                      id="type"
                                      invalidText=""
                                      isClearable={false}
                                      isFetching={false}
                                      isSearchable={false}
                                      labelText={
                                        <IsRequired>
                                          Credential type
                                        </IsRequired>
                                      }
                                      name="type"
                                      noOptionsMessage={[Function]}
                                      onBlur={[Function]}
                                      onChange={[Function]}
                                      onFocus={[Function]}
                                      onInputChange={[Function]}
                                      options={
                                        Array [
                                          Object {
                                            "label": "<Choose>",
                                            "value": undefined,
                                          },
                                          Object {
                                            "label": "Amazon",
                                            "value": "foo",
                                          },
                                          Object {
                                            "label": undefined,
                                            "value": "bar",
                                          },
                                        ]
                                      }
                                      placeholder="<Choose>"
                                      value=""
                                    >
                                      <Select
                                        className=""
                                        disabled={false}
                                        helperText=""
                                        id="type"
                                        inline={false}
                                        invalid={false}
                                        invalidText=""
                                        labelText={
                                          <IsRequired>
                                            Credential type
                                          </IsRequired>
                                        }
                                        light={false}
                                        name="type"
                                        onBlur={[Function]}
                                        onChange={[Function]}
                                        onFocus={[Function]}
                                        value=""
                                      >
                                        <div
                                          className="bx--form-item"
                                        >
                                          <div
                                            className="bx--select"
                                          >
                                            <label
                                              className="bx--label"
                                              htmlFor="type"
                                            >
                                              <IsRequired>
                                                <span
                                                  aria-hidden="true"
                                                  className="ddorg__carbon-component-mapper_is-required isRequired-0-2-4"
                                                >
                                                  *
                                                </span>
                                                Credential type
                                              </IsRequired>
                                            </label>
                                            <div
                                              className="bx--select-input__wrapper"
                                              data-invalid={null}
                                            >
                                              <select
                                                className="bx--select-input"
                                                id="type"
                                                name="type"
                                                onBlur={[Function]}
                                                onChange={[Function]}
                                                onFocus={[Function]}
                                                value=""
                                              >
                                                <SelectItem
                                                  disabled={false}
                                                  hidden={false}
                                                  key="0"
                                                  label="<Choose>"
                                                  text="<Choose>"
                                                  value=""
                                                >
                                                  <option
                                                    className="bx--select-option"
                                                    disabled={false}
                                                    hidden={false}
                                                    label="<Choose>"
                                                    value=""
                                                  >
                                                    &lt;Choose&gt;
                                                  </option>
                                                </SelectItem>
                                                <SelectItem
                                                  disabled={false}
                                                  hidden={false}
                                                  key="foo"
                                                  label="Amazon"
                                                  text="Amazon"
                                                  value="foo"
                                                >
                                                  <option
                                                    className="bx--select-option"
                                                    disabled={false}
                                                    hidden={false}
                                                    label="Amazon"
                                                    value="foo"
                                                  >
                                                    Amazon
                                                  </option>
                                                </SelectItem>
                                                <SelectItem
                                                  disabled={false}
                                                  hidden={false}
                                                  key="bar"
                                                  text=""
                                                  value="bar"
                                                >
                                                  <option
                                                    className="bx--select-option"
                                                    disabled={false}
                                                    hidden={false}
                                                    value="bar"
                                                  />
                                                </SelectItem>
                                              </select>
                                              <ForwardRef(ChevronDown16)
                                                className="bx--select__arrow"
                                              >
                                                <Icon
                                                  className="bx--select__arrow"
                                                  fill="currentColor"
                                                  height={16}
                                                  preserveAspectRatio="xMidYMid meet"
                                                  viewBox="0 0 16 16"
                                                  width={16}
                                                  xmlns="http://www.w3.org/2000/svg"
                                                >
                                                  <svg
                                                    aria-hidden={true}
                                                    className="bx--select__arrow"
                                                    fill="currentColor"
                                                    focusable="false"
                                                    height={16}
                                                    preserveAspectRatio="xMidYMid meet"
                                                    viewBox="0 0 16 16"
                                                    width={16}
                                                    xmlns="http://www.w3.org/2000/svg"
                                                  >
                                                    <path
                                                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
                                                    />
                                                  </svg>
                                                </Icon>
                                              </ForwardRef(ChevronDown16)>
                                            </div>
                                          </div>
                                        </div>
                                      </Select>
                                    </ClearedSelect>
                                  </Select>
                                </Select>
                              </SelectWithOnChange>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <SingleField
                          component="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="text-field"
                                  hideField={true}
                                  label="manager_resource"
                                  name="manager_resource"
                                  value=""
                                />,
                                <SingleField
                                  component="text-field"
                                  id="name"
                                  isRequired={true}
                                  label="Name"
                                  maxLength={128}
                                  name="name"
                                  validate={
                                    Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ]
                                  }
                                />,
                                <SingleField
                                  component="select"
                                  id="type"
                                  includeEmpty={true}
                                  isDisabled={false}
                                  isRequired={true}
                                  label="Credential type"
                                  loadOptions={[Function]}
                                  name="type"
                                  onChange={[Function]}
                                  placeholder="<Choose>"
                                  validate={
                                    Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ]
                                  }
                                />,
                                <SingleField
                                  component="spy-field"
                                  name="spy-field"
                                />,
                              ]
                            }
                            formSpyProps={
                              Object {
                                "active": undefined,
                                "dirty": false,
                                "dirtyFields": Object {},
                                "dirtyFieldsSinceLastSubmit": Object {
                                  "manager_resource": true,
                                },
                                "dirtySinceLastSubmit": false,
                                "error": undefined,
                                "errors": Object {
                                  "name": "Required",
                                  "type": "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 {
                                  "manager_resource": Object {
                                    "href": "http://localhost:3000/api/providers/1",
                                  },
                                },
                                "invalid": true,
                                "modified": Object {
                                  "manager_resource": false,
                                  "name": false,
                                  "type": false,
                                },
                                "modifiedSinceLastSubmit": false,
                                "pristine": true,
                                "submitError": undefined,
                                "submitErrors": undefined,
                                "submitFailed": false,
                                "submitSucceeded": false,
                                "submitting": false,
                                "touched": Object {
                                  "manager_resource": false,
                                  "name": false,
                                  "type": false,
                                },
                                "valid": false,
                                "validating": false,
                                "values": Object {
                                  "manager_resource": Object {
                                    "href": "http://localhost:3000/api/providers/1",
                                  },
                                },
                                "visited": Object {
                                  "manager_resource": false,
                                  "name": false,
                                  "type": false,
                                },
                              }
                            }
                            onCancel={[Function]}
                            onReset={[Function]}
                            resetLabel="Reset"
                            schema={
                              Object {
                                "fields": Array [
                                  Object {
                                    "component": "text-field",
                                    "hideField": true,
                                    "label": "manager_resource",
                                    "name": "manager_resource",
                                    "value": "",
                                  },
                                  Object {
                                    "component": "text-field",
                                    "id": "name",
                                    "isRequired": true,
                                    "label": "Name",
                                    "maxLength": 128,
                                    "name": "name",
                                    "validate": Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ],
                                  },
                                  Object {
                                    "component": "select",
                                    "id": "type",
                                    "includeEmpty": true,
                                    "isDisabled": false,
                                    "isRequired": true,
                                    "label": "Credential type",
                                    "loadOptions": [Function],
                                    "name": "type",
                                    "onChange": [Function],
                                    "placeholder": "<Choose>",
                                    "validate": Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ],
                                  },
                                  Object {
                                    "component": "spy-field",
                                    "initialize": undefined,
                                    "name": "spy-field",
                                  },
                                ],
                              }
                            }
                            submitLabel="Add"
                          >
                            <ButtonGroup>
                              <ButtonSet
                                className=""
                              >
                                <div
                                  className="bx--btn-set"
                                >
                                  <Button
                                    buttonType="submit"
                                    disabled={true}
                                    key="form-submit"
                                    label="Add"
                                    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"
                                      >
                                        Add
                                      </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)>
  </AnsibleCredentialsForm>
</Provider>
`;

exports[`Ansible Credential Form Component should render editing a credential 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],
    }
  }
>
  <AnsibleCredentialsForm
    recordId="1"
  >
    <Connect(MiqFormRenderer)
      buttonsLabels={
        Object {
          "submitLabel": "Save",
        }
      }
      canReset={true}
      initialValues={
        Object {
          "type": "foo",
          "userid": "test",
        }
      }
      onCancel={[Function]}
      onSubmit={[Function]}
      schema={
        Object {
          "fields": Array [
            Object {
              "component": "text-field",
              "hideField": true,
              "label": "manager_resource",
              "name": "manager_resource",
              "value": "",
            },
            Object {
              "component": "text-field",
              "id": "name",
              "isRequired": true,
              "label": "Name",
              "maxLength": 128,
              "name": "name",
              "validate": Array [
                Object {
                  "type": "required",
                },
              ],
            },
            Object {
              "component": "select",
              "id": "type",
              "includeEmpty": true,
              "isDisabled": true,
              "isRequired": true,
              "label": "Credential type",
              "loadOptions": [Function],
              "name": "type",
              "onChange": [Function],
              "placeholder": "<Choose>",
              "validate": Array [
                Object {
                  "type": "required",
                },
              ],
            },
            Object {
              "component": "text-field",
              "helperText": "AWS Access Key for this credential",
              "id": "userid",
              "isRequired": true,
              "label": "Access Key",
              "name": "userid",
            },
          ],
        }
      }
    >
      <MiqFormRenderer
        buttonsLabels={
          Object {
            "submitLabel": "Save",
          }
        }
        canReset={true}
        className="form-react"
        componentMapper={
          Object {
            "checkbox": [Function],
            "code-editor": [Function],
            "date-picker": [Function],
            "dual-list-select": [Function],
            "edit-password-field": [Function],
            "field-array": [Function],
            "file-upload": [Function],
            "font-icon-picker": [Function],
            "font-icon-picker-ddf": [Function],
            "multi-select": [Function],
            "password-field": [Function],
            "plain-text": [Function],
            "radio": [Function],
            "select": [Function],
            "slider": [Function],
            "sub-form": [Function],
            "switch": [Function],
            "tabs": [Function],
            "text-field": [Function],
            "textarea": [Function],
            "time-picker": [Function],
            "tree-selector": [Function],
            "tree-view": [Function],
            "validate-credentials": [Function],
            "wizard": [Function],
          }
        }
        disableSubmit={
          Array [
            "pristine",
            "invalid",
          ]
        }
        dispatch={[Function]}
        initialValues={
          Object {
            "type": "foo",
            "userid": "test",
          }
        }
        onCancel={[Function]}
        onSubmit={[Function]}
        schema={
          Object {
            "fields": Array [
              Object {
                "component": "text-field",
                "hideField": true,
                "label": "manager_resource",
                "name": "manager_resource",
                "value": "",
              },
              Object {
                "component": "text-field",
                "id": "name",
                "isRequired": true,
                "label": "Name",
                "maxLength": 128,
                "name": "name",
                "validate": Array [
                  Object {
                    "type": "required",
                  },
                ],
              },
              Object {
                "component": "select",
                "id": "type",
                "includeEmpty": true,
                "isDisabled": true,
                "isRequired": true,
                "label": "Credential type",
                "loadOptions": [Function],
                "name": "type",
                "onChange": [Function],
                "placeholder": "<Choose>",
                "validate": Array [
                  Object {
                    "type": "required",
                  },
                ],
              },
              Object {
                "component": "text-field",
                "helperText": "AWS Access Key for this credential",
                "id": "userid",
                "isRequired": true,
                "label": "Access Key",
                "name": "userid",
              },
            ],
          }
        }
        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 {
              "type": "foo",
              "userid": "test",
            }
          }
          onCancel={[Function]}
          onReset={[Function]}
          onSubmit={[Function]}
          schema={
            Object {
              "fields": Array [
                Object {
                  "component": "text-field",
                  "hideField": true,
                  "label": "manager_resource",
                  "name": "manager_resource",
                  "value": "",
                },
                Object {
                  "component": "text-field",
                  "id": "name",
                  "isRequired": true,
                  "label": "Name",
                  "maxLength": 128,
                  "name": "name",
                  "validate": Array [
                    Object {
                      "type": "required",
                    },
                  ],
                },
                Object {
                  "component": "select",
                  "id": "type",
                  "includeEmpty": true,
                  "isDisabled": true,
                  "isRequired": true,
                  "label": "Credential type",
                  "loadOptions": [Function],
                  "name": "type",
                  "onChange": [Function],
                  "placeholder": "<Choose>",
                  "validate": Array [
                    Object {
                      "type": "required",
                    },
                  ],
                },
                Object {
                  "component": "text-field",
                  "helperText": "AWS Access Key for this credential",
                  "id": "userid",
                  "isRequired": true,
                  "label": "Access Key",
                  "name": "userid",
                },
                Object {
                  "component": "spy-field",
                  "initialize": undefined,
                  "name": "spy-field",
                },
              ],
            }
          }
        >
          <ReactFinalForm
            decorators={
              Array [
                [Function],
              ]
            }
            dispatch={[Function]}
            initialValues={
              Object {
                "type": "foo",
                "userid": "test",
              }
            }
            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="text-field"
                    hideField={true}
                    label="manager_resource"
                    name="manager_resource"
                    value=""
                  />,
                  <SingleField
                    component="text-field"
                    id="name"
                    isRequired={true}
                    label="Name"
                    maxLength={128}
                    name="name"
                    validate={
                      Array [
                        Object {
                          "type": "required",
                        },
                      ]
                    }
                  />,
                  <SingleField
                    component="select"
                    id="type"
                    includeEmpty={true}
                    isDisabled={true}
                    isRequired={true}
                    label="Credential type"
                    loadOptions={[Function]}
                    name="type"
                    onChange={[Function]}
                    placeholder="<Choose>"
                    validate={
                      Array [
                        Object {
                          "type": "required",
                        },
                      ]
                    }
                  />,
                  <SingleField
                    component="text-field"
                    helperText="AWS Access Key for this credential"
                    id="userid"
                    isRequired={true}
                    label="Access Key"
                    name="userid"
                  />,
                  <SingleField
                    component="spy-field"
                    name="spy-field"
                  />,
                ]
              }
              schema={
                Object {
                  "fields": Array [
                    Object {
                      "component": "text-field",
                      "hideField": true,
                      "label": "manager_resource",
                      "name": "manager_resource",
                      "value": "",
                    },
                    Object {
                      "component": "text-field",
                      "id": "name",
                      "isRequired": true,
                      "label": "Name",
                      "maxLength": 128,
                      "name": "name",
                      "validate": Array [
                        Object {
                          "type": "required",
                        },
                      ],
                    },
                    Object {
                      "component": "select",
                      "id": "type",
                      "includeEmpty": true,
                      "isDisabled": true,
                      "isRequired": true,
                      "label": "Credential type",
                      "loadOptions": [Function],
                      "name": "type",
                      "onChange": [Function],
                      "placeholder": "<Choose>",
                      "validate": Array [
                        Object {
                          "type": "required",
                        },
                      ],
                    },
                    Object {
                      "component": "text-field",
                      "helperText": "AWS Access Key for this credential",
                      "id": "userid",
                      "isRequired": true,
                      "label": "Access Key",
                      "name": "userid",
                    },
                    Object {
                      "component": "spy-field",
                      "initialize": undefined,
                      "name": "spy-field",
                    },
                  ],
                }
              }
            >
              <WrappedFormTemplate
                canReset={true}
                cancelLabel="Cancel"
                disableSubmit={
                  Array [
                    "pristine",
                    "invalid",
                  ]
                }
                formFields={
                  Array [
                    <SingleField
                      component="text-field"
                      hideField={true}
                      label="manager_resource"
                      name="manager_resource"
                      value=""
                    />,
                    <SingleField
                      component="text-field"
                      id="name"
                      isRequired={true}
                      label="Name"
                      maxLength={128}
                      name="name"
                      validate={
                        Array [
                          Object {
                            "type": "required",
                          },
                        ]
                      }
                    />,
                    <SingleField
                      component="select"
                      id="type"
                      includeEmpty={true}
                      isDisabled={true}
                      isRequired={true}
                      label="Credential type"
                      loadOptions={[Function]}
                      name="type"
                      onChange={[Function]}
                      placeholder="<Choose>"
                      validate={
                        Array [
                          Object {
                            "type": "required",
                          },
                        ]
                      }
                    />,
                    <SingleField
                      component="text-field"
                      helperText="AWS Access Key for this credential"
                      id="userid"
                      isRequired={true}
                      label="Access Key"
                      name="userid"
                    />,
                    <SingleField
                      component="spy-field"
                      name="spy-field"
                    />,
                  ]
                }
                formWrapperProps={
                  Object {
                    "className": "form-react",
                  }
                }
                resetLabel="Reset"
                schema={
                  Object {
                    "fields": Array [
                      Object {
                        "component": "text-field",
                        "hideField": true,
                        "label": "manager_resource",
                        "name": "manager_resource",
                        "value": "",
                      },
                      Object {
                        "component": "text-field",
                        "id": "name",
                        "isRequired": true,
                        "label": "Name",
                        "maxLength": 128,
                        "name": "name",
                        "validate": Array [
                          Object {
                            "type": "required",
                          },
                        ],
                      },
                      Object {
                        "component": "select",
                        "id": "type",
                        "includeEmpty": true,
                        "isDisabled": true,
                        "isRequired": true,
                        "label": "Credential type",
                        "loadOptions": [Function],
                        "name": "type",
                        "onChange": [Function],
                        "placeholder": "<Choose>",
                        "validate": Array [
                          Object {
                            "type": "required",
                          },
                        ],
                      },
                      Object {
                        "component": "text-field",
                        "helperText": "AWS Access Key for this credential",
                        "id": "userid",
                        "isRequired": true,
                        "label": "Access Key",
                        "name": "userid",
                      },
                      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={true}
                  cancelLabel="Cancel"
                  disableSubmit={
                    Array [
                      "pristine",
                      "invalid",
                    ]
                  }
                  formFields={
                    Array [
                      <SingleField
                        component="text-field"
                        hideField={true}
                        label="manager_resource"
                        name="manager_resource"
                        value=""
                      />,
                      <SingleField
                        component="text-field"
                        id="name"
                        isRequired={true}
                        label="Name"
                        maxLength={128}
                        name="name"
                        validate={
                          Array [
                            Object {
                              "type": "required",
                            },
                          ]
                        }
                      />,
                      <SingleField
                        component="select"
                        id="type"
                        includeEmpty={true}
                        isDisabled={true}
                        isRequired={true}
                        label="Credential type"
                        loadOptions={[Function]}
                        name="type"
                        onChange={[Function]}
                        placeholder="<Choose>"
                        validate={
                          Array [
                            Object {
                              "type": "required",
                            },
                          ]
                        }
                      />,
                      <SingleField
                        component="text-field"
                        helperText="AWS Access Key for this credential"
                        id="userid"
                        isRequired={true}
                        label="Access Key"
                        name="userid"
                      />,
                      <SingleField
                        component="spy-field"
                        name="spy-field"
                      />,
                    ]
                  }
                  formWrapperProps={
                    Object {
                      "className": "form-react",
                    }
                  }
                  resetLabel="Reset"
                  schema={
                    Object {
                      "fields": Array [
                        Object {
                          "component": "text-field",
                          "hideField": true,
                          "label": "manager_resource",
                          "name": "manager_resource",
                          "value": "",
                        },
                        Object {
                          "component": "text-field",
                          "id": "name",
                          "isRequired": true,
                          "label": "Name",
                          "maxLength": 128,
                          "name": "name",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                        Object {
                          "component": "select",
                          "id": "type",
                          "includeEmpty": true,
                          "isDisabled": true,
                          "isRequired": true,
                          "label": "Credential type",
                          "loadOptions": [Function],
                          "name": "type",
                          "onChange": [Function],
                          "placeholder": "<Choose>",
                          "validate": Array [
                            Object {
                              "type": "required",
                            },
                          ],
                        },
                        Object {
                          "component": "text-field",
                          "helperText": "AWS Access Key for this credential",
                          "id": "userid",
                          "isRequired": true,
                          "label": "Access Key",
                          "name": "userid",
                        },
                        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="text-field"
                          hideField={true}
                          key="manager_resource"
                          label="manager_resource"
                          name="manager_resource"
                          value=""
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "text-field",
                                "label": "manager_resource",
                                "name": "manager_resource",
                                "value": "",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={true}
                            >
                              <div
                                hidden={true}
                              >
                                <TextField
                                  component="text-field"
                                  label="manager_resource"
                                  name="manager_resource"
                                  value=""
                                >
                                  <TextInput
                                    id="manager_resource"
                                    invalid={false}
                                    invalidText=""
                                    key="manager_resource"
                                    labelText="manager_resource"
                                    name="manager_resource"
                                    onBlur={[Function]}
                                    onChange={[Function]}
                                    onFocus={[Function]}
                                    value=""
                                    warn={false}
                                    warnText=""
                                  >
                                    <div
                                      className="bx--form-item bx--text-input-wrapper"
                                    >
                                      <label
                                        className="bx--label"
                                        htmlFor="manager_resource"
                                      >
                                        manager_resource
                                      </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="manager_resource"
                                            name="manager_resource"
                                            onBlur={[Function]}
                                            onChange={[Function]}
                                            onClick={[Function]}
                                            onFocus={[Function]}
                                            type="text"
                                            value=""
                                          />
                                        </div>
                                      </div>
                                    </div>
                                  </TextInput>
                                </TextField>
                              </div>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <SingleField
                          component="text-field"
                          id="name"
                          isRequired={true}
                          key="name"
                          label="Name"
                          maxLength={128}
                          name="name"
                          validate={
                            Array [
                              Object {
                                "type": "required",
                              },
                            ]
                          }
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "text-field",
                                "id": "name",
                                "isRequired": true,
                                "label": "Name",
                                "maxLength": 128,
                                "name": "name",
                                "validate": Array [
                                  Object {
                                    "type": "required",
                                  },
                                ],
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <TextField
                                component="text-field"
                                id="name"
                                isRequired={true}
                                label="Name"
                                maxLength={128}
                                name="name"
                                validate={
                                  Array [
                                    Object {
                                      "type": "required",
                                    },
                                  ]
                                }
                              >
                                <TextInput
                                  id="name"
                                  invalid={false}
                                  invalidText=""
                                  key="name"
                                  labelText={
                                    <IsRequired>
                                      Name
                                    </IsRequired>
                                  }
                                  maxLength={128}
                                  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-4"
                                        >
                                          *
                                        </span>
                                        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={128}
                                          name="name"
                                          onBlur={[Function]}
                                          onChange={[Function]}
                                          onClick={[Function]}
                                          onFocus={[Function]}
                                          type="text"
                                          value=""
                                        />
                                      </div>
                                    </div>
                                  </div>
                                </TextInput>
                              </TextField>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <SingleField
                          component="select"
                          id="type"
                          includeEmpty={true}
                          isDisabled={true}
                          isRequired={true}
                          key="type"
                          label="Credential type"
                          loadOptions={[Function]}
                          name="type"
                          onChange={[Function]}
                          placeholder="<Choose>"
                          validate={
                            Array [
                              Object {
                                "type": "required",
                              },
                            ]
                          }
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "select",
                                "id": "type",
                                "includeEmpty": true,
                                "isDisabled": true,
                                "isRequired": true,
                                "label": "Credential type",
                                "loadOptions": [Function],
                                "name": "type",
                                "onChange": [Function],
                                "placeholder": "<Choose>",
                                "validate": Array [
                                  Object {
                                    "type": "required",
                                  },
                                ],
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SelectWithOnChange
                                component="select"
                                id="type"
                                includeEmpty={true}
                                isDisabled={true}
                                isRequired={true}
                                label="Credential type"
                                loadOptions={[Function]}
                                name="type"
                                onChange={[Function]}
                                placeholder="<Choose>"
                                validate={
                                  Array [
                                    Object {
                                      "type": "required",
                                    },
                                  ]
                                }
                              >
                                <Select
                                  component="select"
                                  id="type"
                                  isDisabled={true}
                                  isRequired={true}
                                  label="Credential type"
                                  loadOptions={[Function]}
                                  loadingMessage="Loading..."
                                  name="type"
                                  placeholder="<Choose>"
                                  validate={
                                    Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ]
                                  }
                                >
                                  <Select
                                    SelectComponent={[Function]}
                                    disabled={true}
                                    id="type"
                                    invalidText=""
                                    labelText={
                                      <IsRequired>
                                        Credential type
                                      </IsRequired>
                                    }
                                    loadOptions={[Function]}
                                    loadOptionsChangeCounter={1}
                                    loadingMessage="Loading..."
                                    name="type"
                                    onBlur={[Function]}
                                    onChange={[Function]}
                                    onFocus={[Function]}
                                    placeholder="<Choose>"
                                    simpleValue={false}
                                    value="foo"
                                  >
                                    <ClearedSelect
                                      className=""
                                      closeMenuOnSelect={true}
                                      disabled={true}
                                      hideSelectedOptions={false}
                                      id="type"
                                      invalidText=""
                                      isClearable={false}
                                      isFetching={false}
                                      isSearchable={false}
                                      labelText={
                                        <IsRequired>
                                          Credential type
                                        </IsRequired>
                                      }
                                      name="type"
                                      noOptionsMessage={[Function]}
                                      onBlur={[Function]}
                                      onChange={[Function]}
                                      onFocus={[Function]}
                                      onInputChange={[Function]}
                                      options={
                                        Array [
                                          Object {
                                            "label": "<Choose>",
                                            "value": undefined,
                                          },
                                          Object {
                                            "label": "Amazon",
                                            "value": "foo",
                                          },
                                          Object {
                                            "label": undefined,
                                            "value": "bar",
                                          },
                                        ]
                                      }
                                      placeholder="<Choose>"
                                      value="foo"
                                    >
                                      <Select
                                        className=""
                                        disabled={true}
                                        helperText=""
                                        id="type"
                                        inline={false}
                                        invalid={false}
                                        invalidText=""
                                        labelText={
                                          <IsRequired>
                                            Credential type
                                          </IsRequired>
                                        }
                                        light={false}
                                        name="type"
                                        onBlur={[Function]}
                                        onChange={[Function]}
                                        onFocus={[Function]}
                                        value="foo"
                                      >
                                        <div
                                          className="bx--form-item"
                                        >
                                          <div
                                            className="bx--select bx--select--disabled"
                                          >
                                            <label
                                              className="bx--label bx--label--disabled"
                                              htmlFor="type"
                                            >
                                              <IsRequired>
                                                <span
                                                  aria-hidden="true"
                                                  className="ddorg__carbon-component-mapper_is-required isRequired-0-2-4"
                                                >
                                                  *
                                                </span>
                                                Credential type
                                              </IsRequired>
                                            </label>
                                            <div
                                              className="bx--select-input__wrapper"
                                              data-invalid={null}
                                            >
                                              <select
                                                className="bx--select-input"
                                                disabled={true}
                                                id="type"
                                                name="type"
                                                onBlur={[Function]}
                                                onChange={[Function]}
                                                onFocus={[Function]}
                                                value="foo"
                                              >
                                                <SelectItem
                                                  disabled={false}
                                                  hidden={false}
                                                  key="0"
                                                  label="<Choose>"
                                                  text="<Choose>"
                                                  value=""
                                                >
                                                  <option
                                                    className="bx--select-option"
                                                    disabled={false}
                                                    hidden={false}
                                                    label="<Choose>"
                                                    value=""
                                                  >
                                                    &lt;Choose&gt;
                                                  </option>
                                                </SelectItem>
                                                <SelectItem
                                                  disabled={false}
                                                  hidden={false}
                                                  key="foo"
                                                  label="Amazon"
                                                  text="Amazon"
                                                  value="foo"
                                                >
                                                  <option
                                                    className="bx--select-option"
                                                    disabled={false}
                                                    hidden={false}
                                                    label="Amazon"
                                                    value="foo"
                                                  >
                                                    Amazon
                                                  </option>
                                                </SelectItem>
                                                <SelectItem
                                                  disabled={false}
                                                  hidden={false}
                                                  key="bar"
                                                  text=""
                                                  value="bar"
                                                >
                                                  <option
                                                    className="bx--select-option"
                                                    disabled={false}
                                                    hidden={false}
                                                    value="bar"
                                                  />
                                                </SelectItem>
                                              </select>
                                              <ForwardRef(ChevronDown16)
                                                className="bx--select__arrow"
                                              >
                                                <Icon
                                                  className="bx--select__arrow"
                                                  fill="currentColor"
                                                  height={16}
                                                  preserveAspectRatio="xMidYMid meet"
                                                  viewBox="0 0 16 16"
                                                  width={16}
                                                  xmlns="http://www.w3.org/2000/svg"
                                                >
                                                  <svg
                                                    aria-hidden={true}
                                                    className="bx--select__arrow"
                                                    fill="currentColor"
                                                    focusable="false"
                                                    height={16}
                                                    preserveAspectRatio="xMidYMid meet"
                                                    viewBox="0 0 16 16"
                                                    width={16}
                                                    xmlns="http://www.w3.org/2000/svg"
                                                  >
                                                    <path
                                                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
                                                    />
                                                  </svg>
                                                </Icon>
                                              </ForwardRef(ChevronDown16)>
                                            </div>
                                          </div>
                                        </div>
                                      </Select>
                                    </ClearedSelect>
                                  </Select>
                                </Select>
                              </SelectWithOnChange>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <SingleField
                          component="text-field"
                          helperText="AWS Access Key for this credential"
                          id="userid"
                          isRequired={true}
                          key="userid"
                          label="Access Key"
                          name="userid"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "text-field",
                                "helperText": "AWS Access Key for this credential",
                                "id": "userid",
                                "isRequired": true,
                                "label": "Access Key",
                                "name": "userid",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <TextField
                                component="text-field"
                                helperText="AWS Access Key for this credential"
                                id="userid"
                                isRequired={true}
                                label="Access Key"
                                name="userid"
                              >
                                <TextInput
                                  helperText="AWS Access Key for this credential"
                                  id="userid"
                                  invalid={false}
                                  invalidText=""
                                  key="userid"
                                  labelText={
                                    <IsRequired>
                                      Access Key
                                    </IsRequired>
                                  }
                                  name="userid"
                                  onBlur={[Function]}
                                  onChange={[Function]}
                                  onFocus={[Function]}
                                  value="test"
                                  warn={false}
                                  warnText=""
                                >
                                  <div
                                    className="bx--form-item bx--text-input-wrapper"
                                  >
                                    <label
                                      className="bx--label"
                                      htmlFor="userid"
                                    >
                                      <IsRequired>
                                        <span
                                          aria-hidden="true"
                                          className="ddorg__carbon-component-mapper_is-required isRequired-0-2-4"
                                        >
                                          *
                                        </span>
                                        Access Key
                                      </IsRequired>
                                    </label>
                                    <div
                                      className="bx--text-input__field-outer-wrapper"
                                    >
                                      <div
                                        className="bx--text-input__field-wrapper"
                                        data-invalid={null}
                                      >
                                        <input
                                          aria-describedby="userid-helper-text"
                                          className="bx--text-input bx--text-input--md"
                                          disabled={false}
                                          id="userid"
                                          name="userid"
                                          onBlur={[Function]}
                                          onChange={[Function]}
                                          onClick={[Function]}
                                          onFocus={[Function]}
                                          type="text"
                                          value="test"
                                        />
                                      </div>
                                      <div
                                        className="bx--form__helper-text"
                                        id="userid-helper-text"
                                      >
                                        AWS Access Key for this credential
                                      </div>
                                    </div>
                                  </div>
                                </TextInput>
                              </TextField>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <SingleField
                          component="spy-field"
                          key="spy-field"
                          name="spy-field"
                        >
                          <FormConditionWrapper
                            field={
                              Object {
                                "component": "spy-field",
                                "initialize": undefined,
                                "name": "spy-field",
                              }
                            }
                          >
                            <FormFieldHideWrapper
                              hideField={false}
                            >
                              <SpyField
                                component="spy-field"
                                name="spy-field"
                              >
                                <FormSpy
                                  onChange={[Function]}
                                  subscription={
                                    Object {
                                      "pristine": true,
                                      "valid": true,
                                    }
                                  }
                                />
                              </SpyField>
                            </FormFieldHideWrapper>
                          </FormConditionWrapper>
                        </SingleField>
                        <FormSpy>
                          <FormControls
                            Button={[Function]}
                            ButtonGroup={[Function]}
                            FormSpy={[Function]}
                            buttonOrder={
                              Array [
                                "submit",
                                "reset",
                                "cancel",
                              ]
                            }
                            canReset={true}
                            cancelLabel="Cancel"
                            disableSubmit={true}
                            formFields={
                              Array [
                                <SingleField
                                  component="text-field"
                                  hideField={true}
                                  label="manager_resource"
                                  name="manager_resource"
                                  value=""
                                />,
                                <SingleField
                                  component="text-field"
                                  id="name"
                                  isRequired={true}
                                  label="Name"
                                  maxLength={128}
                                  name="name"
                                  validate={
                                    Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ]
                                  }
                                />,
                                <SingleField
                                  component="select"
                                  id="type"
                                  includeEmpty={true}
                                  isDisabled={true}
                                  isRequired={true}
                                  label="Credential type"
                                  loadOptions={[Function]}
                                  name="type"
                                  onChange={[Function]}
                                  placeholder="<Choose>"
                                  validate={
                                    Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ]
                                  }
                                />,
                                <SingleField
                                  component="text-field"
                                  helperText="AWS Access Key for this credential"
                                  id="userid"
                                  isRequired={true}
                                  label="Access Key"
                                  name="userid"
                                />,
                                <SingleField
                                  component="spy-field"
                                  name="spy-field"
                                />,
                              ]
                            }
                            formSpyProps={
                              Object {
                                "active": undefined,
                                "dirty": false,
                                "dirtyFields": Object {},
                                "dirtyFieldsSinceLastSubmit": Object {
                                  "type": true,
                                  "userid": true,
                                },
                                "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 {
                                  "type": "foo",
                                  "userid": "test",
                                },
                                "invalid": true,
                                "modified": Object {
                                  "manager_resource": false,
                                  "name": false,
                                  "type": false,
                                  "userid": false,
                                },
                                "modifiedSinceLastSubmit": false,
                                "pristine": true,
                                "submitError": undefined,
                                "submitErrors": undefined,
                                "submitFailed": false,
                                "submitSucceeded": false,
                                "submitting": false,
                                "touched": Object {
                                  "manager_resource": false,
                                  "name": false,
                                  "type": false,
                                  "userid": false,
                                },
                                "valid": false,
                                "validating": false,
                                "values": Object {
                                  "type": "foo",
                                  "userid": "test",
                                },
                                "visited": Object {
                                  "manager_resource": false,
                                  "name": false,
                                  "type": false,
                                  "userid": false,
                                },
                              }
                            }
                            onCancel={[Function]}
                            onReset={[Function]}
                            resetLabel="Reset"
                            schema={
                              Object {
                                "fields": Array [
                                  Object {
                                    "component": "text-field",
                                    "hideField": true,
                                    "label": "manager_resource",
                                    "name": "manager_resource",
                                    "value": "",
                                  },
                                  Object {
                                    "component": "text-field",
                                    "id": "name",
                                    "isRequired": true,
                                    "label": "Name",
                                    "maxLength": 128,
                                    "name": "name",
                                    "validate": Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ],
                                  },
                                  Object {
                                    "component": "select",
                                    "id": "type",
                                    "includeEmpty": true,
                                    "isDisabled": true,
                                    "isRequired": true,
                                    "label": "Credential type",
                                    "loadOptions": [Function],
                                    "name": "type",
                                    "onChange": [Function],
                                    "placeholder": "<Choose>",
                                    "validate": Array [
                                      Object {
                                        "type": "required",
                                      },
                                    ],
                                  },
                                  Object {
                                    "component": "text-field",
                                    "helperText": "AWS Access Key for this credential",
                                    "id": "userid",
                                    "isRequired": true,
                                    "label": "Access Key",
                                    "name": "userid",
                                  },
                                  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="reset"
                                    disabled={true}
                                    key="form-reset"
                                    label="Reset"
                                    onClick={[Function]}
                                    type="button"
                                  >
                                    <Button
                                      disabled={true}
                                      kind="secondary"
                                      onClick={[Function]}
                                      type="button"
                                    >
                                      <button
                                        aria-describedby={null}
                                        aria-pressed={null}
                                        className="bx--btn bx--btn--secondary bx--btn--disabled"
                                        disabled={true}
                                        onBlur={[Function]}
                                        onClick={[Function]}
                                        onFocus={[Function]}
                                        onMouseEnter={[Function]}
                                        onMouseLeave={[Function]}
                                        tabIndex={0}
                                        type="button"
                                      >
                                        Reset
                                      </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)>
  </AnsibleCredentialsForm>
</Provider>
`;