app/javascript/spec/cloud-volume-form/__snapshots__/attach-detach-cloud-volume-form.spec.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Attach / Detach form component should render Attach Cloud Volume to the Selected Instance form 1`] = `
<Provider
store={
Object {
"asyncReducers": Object {
"FormButtons": [Function],
"miqCustomTabReducer": [Function],
"notificationReducer": [Function],
},
"dispatch": [Function],
"getState": [Function],
"injectReducers": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<AttachDetachCloudVolumeForm
dropdownChoices={
Array [
Array [
"server1",
1,
],
Array [
"server2",
2,
],
Array [
"server3",
3,
],
Array [
"server4",
4,
],
Array [
"server5",
5,
],
]
}
dropdownLabel="Volume"
isAttach={true}
recordId="1"
>
<div
className="tasks-form"
>
<Connect(MiqFormRenderer)
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Attach",
}
}
canReset={true}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
],
}
}
>
<MiqFormRenderer
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Attach",
}
}
canReset={true}
className="form-react"
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
disableSubmit={
Array [
"pristine",
"invalid",
]
}
dispatch={[Function]}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
],
}
}
showFormControls={true}
>
<FormRenderer
FormTemplate={[Function]}
clearOnUnmount={false}
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"spy-field": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
dispatch={[Function]}
initialValues={Object {}}
onCancel={[Function]}
onReset={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<ReactFinalForm
decorators={
Array [
[Function],
]
}
dispatch={[Function]}
initialValues={Object {}}
mutators={
Object {
"concat": [Function],
"insert": [Function],
"move": [Function],
"pop": [Function],
"push": [Function],
"remove": [Function],
"removeBatch": [Function],
"shift": [Function],
"swap": [Function],
"unshift": [Function],
"update": [Function],
}
}
onSubmit={[Function]}
render={[Function]}
subscription={
Object {
"pristine": true,
"submitting": true,
"valid": true,
}
}
>
<FormTemplate
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [
<SingleField
component="text-field"
id="device_mountpoint"
isRequired={true}
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
/>,
],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<FormTemplate
fields={
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
]
}
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [
<SingleField
component="text-field"
id="device_mountpoint"
isRequired={true}
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
/>,
],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
isAttach={true}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<form
onSubmit={[Function]}
>
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
key="dropdown_id"
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
>
<FormConditionWrapper
field={
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SelectWithOnChange
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
component="select"
id="dropdown_id"
isRequired={true}
label="Volume"
loadingMessage="Loading..."
name="dropdown_id"
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
SelectComponent={[Function]}
id="dropdown_id"
invalidText=""
labelText={
<IsRequired>
Volume
</IsRequired>
}
loadOptionsChangeCounter={1}
loadingMessage="Loading..."
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
simpleValue={false}
value=""
>
<ClearedSelect
className=""
closeMenuOnSelect={true}
hideSelectedOptions={false}
id="dropdown_id"
invalidText=""
isClearable={false}
isFetching={false}
isSearchable={false}
labelText={
<IsRequired>
Volume
</IsRequired>
}
name="dropdown_id"
noOptionsMessage={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onInputChange={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
value=""
>
<Select
className=""
disabled={false}
helperText=""
id="dropdown_id"
inline={false}
invalid={false}
invalidText=""
labelText={
<IsRequired>
Volume
</IsRequired>
}
light={false}
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<div
className="bx--form-item"
>
<div
className="bx--select"
>
<label
className="bx--label"
htmlFor="dropdown_id"
>
<IsRequired>
<span
aria-hidden="true"
className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
>
*
</span>
Volume
</IsRequired>
</label>
<div
className="bx--select-input__wrapper"
data-invalid={null}
>
<select
className="bx--select-input"
id="dropdown_id"
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<SelectItem
disabled={false}
hidden={false}
key="0"
label="<Choose>"
text="<Choose>"
value=""
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="<Choose>"
value=""
>
<Choose>
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="1"
label="server1"
text="server1"
value="1"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server1"
value="1"
>
server1
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="2"
label="server2"
text="server2"
value="2"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server2"
value="2"
>
server2
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="3"
label="server3"
text="server3"
value="3"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server3"
value="3"
>
server3
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="4"
label="server4"
text="server4"
value="4"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server4"
value="4"
>
server4
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="5"
label="server5"
text="server5"
value="5"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server5"
value="5"
>
server5
</option>
</SelectItem>
</select>
<ForwardRef(ChevronDown16)
className="bx--select__arrow"
>
<Icon
className="bx--select__arrow"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden={true}
className="bx--select__arrow"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
/>
</svg>
</Icon>
</ForwardRef(ChevronDown16)>
</div>
</div>
</div>
</Select>
</ClearedSelect>
</Select>
</Select>
</SelectWithOnChange>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<SingleField
component="text-field"
id="device_mountpoint"
isRequired={true}
key="device_mountpoint"
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
>
<FormConditionWrapper
field={
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<TextField
component="text-field"
id="device_mountpoint"
isRequired={true}
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
>
<TextInput
id="device_mountpoint"
invalid={false}
invalidText=""
key="device_mountpoint"
labelText={
<IsRequired>
Device Mountpoint
</IsRequired>
}
name="device_mountpoint"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
warn={false}
warnText=""
>
<div
className="bx--form-item bx--text-input-wrapper"
>
<label
className="bx--label"
htmlFor="device_mountpoint"
>
<IsRequired>
<span
aria-hidden="true"
className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
>
*
</span>
Device Mountpoint
</IsRequired>
</label>
<div
className="bx--text-input__field-outer-wrapper"
>
<div
className="bx--text-input__field-wrapper"
data-invalid={null}
>
<input
className="bx--text-input bx--text-input--md"
disabled={false}
id="device_mountpoint"
name="device_mountpoint"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
type="text"
value=""
/>
</div>
</div>
</div>
</TextInput>
</TextField>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<SingleField
component="spy-field"
key="spy-field"
name="spy-field"
>
<FormConditionWrapper
field={
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SpyField
component="spy-field"
name="spy-field"
>
<FormSpy
onChange={[Function]}
subscription={
Object {
"pristine": true,
"valid": true,
}
}
/>
</SpyField>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<FormSpy>
<div
className="custom-button-wrapper"
>
<Button
className="btnRight"
disabled={true}
id="submit"
kind="primary"
type="submit"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--primary bx--btn--disabled"
disabled={true}
id="submit"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="submit"
variant="contained"
>
Attach
</button>
</Button>
<Button
className="btnRight"
disabled={true}
id="reset"
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--secondary bx--btn--disabled"
disabled={true}
id="reset"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Reset
</button>
</Button>
<Button
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--secondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Cancel
</button>
</Button>
</div>
</FormSpy>
</form>
</FormTemplate>
</FormTemplate>
</ReactFinalForm>
</FormRenderer>
</MiqFormRenderer>
</Connect(MiqFormRenderer)>
</div>
</AttachDetachCloudVolumeForm>
</Provider>
`;
exports[`Attach / Detach form component should render Attach Selected Cloud Volume to an Instance form 1`] = `
<Provider
store={
Object {
"asyncReducers": Object {
"FormButtons": [Function],
"miqCustomTabReducer": [Function],
"notificationReducer": [Function],
},
"dispatch": [Function],
"getState": [Function],
"injectReducers": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<AttachDetachCloudVolumeForm
dropdownChoices={
Array [
Array [
"server1",
1,
],
Array [
"server2",
2,
],
Array [
"server3",
3,
],
Array [
"server4",
4,
],
Array [
"server5",
5,
],
]
}
dropdownLabel="Instance"
isAttach={true}
recordId="1"
>
<div
className="tasks-form"
>
<Connect(MiqFormRenderer)
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Attach",
}
}
canReset={true}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
],
}
}
>
<MiqFormRenderer
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Attach",
}
}
canReset={true}
className="form-react"
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
disableSubmit={
Array [
"pristine",
"invalid",
]
}
dispatch={[Function]}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
],
}
}
showFormControls={true}
>
<FormRenderer
FormTemplate={[Function]}
clearOnUnmount={false}
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"spy-field": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
dispatch={[Function]}
initialValues={Object {}}
onCancel={[Function]}
onReset={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<ReactFinalForm
decorators={
Array [
[Function],
]
}
dispatch={[Function]}
initialValues={Object {}}
mutators={
Object {
"concat": [Function],
"insert": [Function],
"move": [Function],
"pop": [Function],
"push": [Function],
"remove": [Function],
"removeBatch": [Function],
"shift": [Function],
"swap": [Function],
"unshift": [Function],
"update": [Function],
}
}
onSubmit={[Function]}
render={[Function]}
subscription={
Object {
"pristine": true,
"submitting": true,
"valid": true,
}
}
>
<FormTemplate
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [
<SingleField
component="text-field"
id="device_mountpoint"
isRequired={true}
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
/>,
],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<FormTemplate
fields={
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
]
}
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [
<SingleField
component="text-field"
id="device_mountpoint"
isRequired={true}
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
/>,
],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
isAttach={true}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<form
onSubmit={[Function]}
>
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
key="dropdown_id"
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
>
<FormConditionWrapper
field={
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SelectWithOnChange
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
component="select"
id="dropdown_id"
isRequired={true}
label="Instance"
loadingMessage="Loading..."
name="dropdown_id"
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
SelectComponent={[Function]}
id="dropdown_id"
invalidText=""
labelText={
<IsRequired>
Instance
</IsRequired>
}
loadOptionsChangeCounter={1}
loadingMessage="Loading..."
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
simpleValue={false}
value=""
>
<ClearedSelect
className=""
closeMenuOnSelect={true}
hideSelectedOptions={false}
id="dropdown_id"
invalidText=""
isClearable={false}
isFetching={false}
isSearchable={false}
labelText={
<IsRequired>
Instance
</IsRequired>
}
name="dropdown_id"
noOptionsMessage={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onInputChange={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
value=""
>
<Select
className=""
disabled={false}
helperText=""
id="dropdown_id"
inline={false}
invalid={false}
invalidText=""
labelText={
<IsRequired>
Instance
</IsRequired>
}
light={false}
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<div
className="bx--form-item"
>
<div
className="bx--select"
>
<label
className="bx--label"
htmlFor="dropdown_id"
>
<IsRequired>
<span
aria-hidden="true"
className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
>
*
</span>
Instance
</IsRequired>
</label>
<div
className="bx--select-input__wrapper"
data-invalid={null}
>
<select
className="bx--select-input"
id="dropdown_id"
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<SelectItem
disabled={false}
hidden={false}
key="0"
label="<Choose>"
text="<Choose>"
value=""
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="<Choose>"
value=""
>
<Choose>
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="1"
label="server1"
text="server1"
value="1"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server1"
value="1"
>
server1
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="2"
label="server2"
text="server2"
value="2"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server2"
value="2"
>
server2
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="3"
label="server3"
text="server3"
value="3"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server3"
value="3"
>
server3
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="4"
label="server4"
text="server4"
value="4"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server4"
value="4"
>
server4
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="5"
label="server5"
text="server5"
value="5"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server5"
value="5"
>
server5
</option>
</SelectItem>
</select>
<ForwardRef(ChevronDown16)
className="bx--select__arrow"
>
<Icon
className="bx--select__arrow"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden={true}
className="bx--select__arrow"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
/>
</svg>
</Icon>
</ForwardRef(ChevronDown16)>
</div>
</div>
</div>
</Select>
</ClearedSelect>
</Select>
</Select>
</SelectWithOnChange>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<SingleField
component="text-field"
id="device_mountpoint"
isRequired={true}
key="device_mountpoint"
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
>
<FormConditionWrapper
field={
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<TextField
component="text-field"
id="device_mountpoint"
isRequired={true}
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
>
<TextInput
id="device_mountpoint"
invalid={false}
invalidText=""
key="device_mountpoint"
labelText={
<IsRequired>
Device Mountpoint
</IsRequired>
}
name="device_mountpoint"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
warn={false}
warnText=""
>
<div
className="bx--form-item bx--text-input-wrapper"
>
<label
className="bx--label"
htmlFor="device_mountpoint"
>
<IsRequired>
<span
aria-hidden="true"
className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
>
*
</span>
Device Mountpoint
</IsRequired>
</label>
<div
className="bx--text-input__field-outer-wrapper"
>
<div
className="bx--text-input__field-wrapper"
data-invalid={null}
>
<input
className="bx--text-input bx--text-input--md"
disabled={false}
id="device_mountpoint"
name="device_mountpoint"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
type="text"
value=""
/>
</div>
</div>
</div>
</TextInput>
</TextField>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<SingleField
component="spy-field"
key="spy-field"
name="spy-field"
>
<FormConditionWrapper
field={
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SpyField
component="spy-field"
name="spy-field"
>
<FormSpy
onChange={[Function]}
subscription={
Object {
"pristine": true,
"valid": true,
}
}
/>
</SpyField>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<FormSpy>
<div
className="custom-button-wrapper"
>
<Button
className="btnRight"
disabled={true}
id="submit"
kind="primary"
type="submit"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--primary bx--btn--disabled"
disabled={true}
id="submit"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="submit"
variant="contained"
>
Attach
</button>
</Button>
<Button
className="btnRight"
disabled={true}
id="reset"
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--secondary bx--btn--disabled"
disabled={true}
id="reset"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Reset
</button>
</Button>
<Button
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--secondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Cancel
</button>
</Button>
</div>
</FormSpy>
</form>
</FormTemplate>
</FormTemplate>
</ReactFinalForm>
</FormRenderer>
</MiqFormRenderer>
</Connect(MiqFormRenderer)>
</div>
</AttachDetachCloudVolumeForm>
</Provider>
`;
exports[`Attach / Detach form component should render Detach Cloud Volume from the Selected Instance form 1`] = `
<Provider
store={
Object {
"asyncReducers": Object {
"FormButtons": [Function],
"miqCustomTabReducer": [Function],
"notificationReducer": [Function],
},
"dispatch": [Function],
"getState": [Function],
"injectReducers": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<AttachDetachCloudVolumeForm
dropdownChoices={
Array [
Array [
"server1",
1,
],
Array [
"server2",
2,
],
Array [
"server3",
3,
],
Array [
"server4",
4,
],
Array [
"server5",
5,
],
]
}
dropdownLabel="Volume"
isAttach={false}
recordId="1"
>
<div
className="tasks-form"
>
<Connect(MiqFormRenderer)
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Detach",
}
}
canReset={true}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
],
}
}
>
<MiqFormRenderer
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Detach",
}
}
canReset={true}
className="form-react"
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
disableSubmit={
Array [
"pristine",
"invalid",
]
}
dispatch={[Function]}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
],
}
}
showFormControls={true}
>
<FormRenderer
FormTemplate={[Function]}
clearOnUnmount={false}
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"spy-field": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
dispatch={[Function]}
initialValues={Object {}}
onCancel={[Function]}
onReset={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<ReactFinalForm
decorators={
Array [
[Function],
]
}
dispatch={[Function]}
initialValues={Object {}}
mutators={
Object {
"concat": [Function],
"insert": [Function],
"move": [Function],
"pop": [Function],
"push": [Function],
"remove": [Function],
"removeBatch": [Function],
"shift": [Function],
"swap": [Function],
"unshift": [Function],
"update": [Function],
}
}
onSubmit={[Function]}
render={[Function]}
subscription={
Object {
"pristine": true,
"submitting": true,
"valid": true,
}
}
>
<FormTemplate
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<FormTemplate
fields={Array []}
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
isAttach={false}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<form
onSubmit={[Function]}
>
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
key="dropdown_id"
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
>
<FormConditionWrapper
field={
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SelectWithOnChange
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
component="select"
id="dropdown_id"
isRequired={true}
label="Volume"
loadingMessage="Loading..."
name="dropdown_id"
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
SelectComponent={[Function]}
id="dropdown_id"
invalidText=""
labelText={
<IsRequired>
Volume
</IsRequired>
}
loadOptionsChangeCounter={1}
loadingMessage="Loading..."
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
simpleValue={false}
value=""
>
<ClearedSelect
className=""
closeMenuOnSelect={true}
hideSelectedOptions={false}
id="dropdown_id"
invalidText=""
isClearable={false}
isFetching={false}
isSearchable={false}
labelText={
<IsRequired>
Volume
</IsRequired>
}
name="dropdown_id"
noOptionsMessage={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onInputChange={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
value=""
>
<Select
className=""
disabled={false}
helperText=""
id="dropdown_id"
inline={false}
invalid={false}
invalidText=""
labelText={
<IsRequired>
Volume
</IsRequired>
}
light={false}
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<div
className="bx--form-item"
>
<div
className="bx--select"
>
<label
className="bx--label"
htmlFor="dropdown_id"
>
<IsRequired>
<span
aria-hidden="true"
className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
>
*
</span>
Volume
</IsRequired>
</label>
<div
className="bx--select-input__wrapper"
data-invalid={null}
>
<select
className="bx--select-input"
id="dropdown_id"
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<SelectItem
disabled={false}
hidden={false}
key="0"
label="<Choose>"
text="<Choose>"
value=""
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="<Choose>"
value=""
>
<Choose>
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="1"
label="server1"
text="server1"
value="1"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server1"
value="1"
>
server1
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="2"
label="server2"
text="server2"
value="2"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server2"
value="2"
>
server2
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="3"
label="server3"
text="server3"
value="3"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server3"
value="3"
>
server3
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="4"
label="server4"
text="server4"
value="4"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server4"
value="4"
>
server4
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="5"
label="server5"
text="server5"
value="5"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server5"
value="5"
>
server5
</option>
</SelectItem>
</select>
<ForwardRef(ChevronDown16)
className="bx--select__arrow"
>
<Icon
className="bx--select__arrow"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden={true}
className="bx--select__arrow"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
/>
</svg>
</Icon>
</ForwardRef(ChevronDown16)>
</div>
</div>
</div>
</Select>
</ClearedSelect>
</Select>
</Select>
</SelectWithOnChange>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<SingleField
component="spy-field"
key="spy-field"
name="spy-field"
>
<FormConditionWrapper
field={
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SpyField
component="spy-field"
name="spy-field"
>
<FormSpy
onChange={[Function]}
subscription={
Object {
"pristine": true,
"valid": true,
}
}
/>
</SpyField>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<FormSpy>
<div
className="custom-button-wrapper"
>
<Button
className="btnRight"
disabled={true}
id="submit"
kind="primary"
type="submit"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--primary bx--btn--disabled"
disabled={true}
id="submit"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="submit"
variant="contained"
>
Detach
</button>
</Button>
<Button
className="btnRight"
disabled={false}
id="reset"
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--secondary"
disabled={false}
id="reset"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Reset
</button>
</Button>
<Button
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--secondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Cancel
</button>
</Button>
</div>
</FormSpy>
</form>
</FormTemplate>
</FormTemplate>
</ReactFinalForm>
</FormRenderer>
</MiqFormRenderer>
</Connect(MiqFormRenderer)>
</div>
</AttachDetachCloudVolumeForm>
</Provider>
`;
exports[`Attach / Detach form component should render Detach Selected Cloud Volume from an Instance form 1`] = `
<Provider
store={
Object {
"asyncReducers": Object {
"FormButtons": [Function],
"miqCustomTabReducer": [Function],
"notificationReducer": [Function],
},
"dispatch": [Function],
"getState": [Function],
"injectReducers": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<AttachDetachCloudVolumeForm
dropdownChoices={
Array [
Array [
"server1",
1,
],
Array [
"server2",
2,
],
Array [
"server3",
3,
],
Array [
"server4",
4,
],
Array [
"server5",
5,
],
]
}
dropdownLabel="Instance"
isAttach={false}
recordId="1"
>
<div
className="tasks-form"
>
<Connect(MiqFormRenderer)
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Detach",
}
}
canReset={true}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
],
}
}
>
<MiqFormRenderer
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Detach",
}
}
canReset={true}
className="form-react"
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
disableSubmit={
Array [
"pristine",
"invalid",
]
}
dispatch={[Function]}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
],
}
}
showFormControls={true}
>
<FormRenderer
FormTemplate={[Function]}
clearOnUnmount={false}
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"spy-field": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
dispatch={[Function]}
initialValues={Object {}}
onCancel={[Function]}
onReset={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<ReactFinalForm
decorators={
Array [
[Function],
]
}
dispatch={[Function]}
initialValues={Object {}}
mutators={
Object {
"concat": [Function],
"insert": [Function],
"move": [Function],
"pop": [Function],
"push": [Function],
"remove": [Function],
"removeBatch": [Function],
"shift": [Function],
"swap": [Function],
"unshift": [Function],
"update": [Function],
}
}
onSubmit={[Function]}
render={[Function]}
subscription={
Object {
"pristine": true,
"submitting": true,
"valid": true,
}
}
>
<FormTemplate
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<FormTemplate
fields={Array []}
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
isAttach={false}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<form
onSubmit={[Function]}
>
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
key="dropdown_id"
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
>
<FormConditionWrapper
field={
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SelectWithOnChange
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
component="select"
id="dropdown_id"
isRequired={true}
label="Instance"
loadingMessage="Loading..."
name="dropdown_id"
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
SelectComponent={[Function]}
id="dropdown_id"
invalidText=""
labelText={
<IsRequired>
Instance
</IsRequired>
}
loadOptionsChangeCounter={1}
loadingMessage="Loading..."
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
simpleValue={false}
value=""
>
<ClearedSelect
className=""
closeMenuOnSelect={true}
hideSelectedOptions={false}
id="dropdown_id"
invalidText=""
isClearable={false}
isFetching={false}
isSearchable={false}
labelText={
<IsRequired>
Instance
</IsRequired>
}
name="dropdown_id"
noOptionsMessage={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onInputChange={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
value=""
>
<Select
className=""
disabled={false}
helperText=""
id="dropdown_id"
inline={false}
invalid={false}
invalidText=""
labelText={
<IsRequired>
Instance
</IsRequired>
}
light={false}
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<div
className="bx--form-item"
>
<div
className="bx--select"
>
<label
className="bx--label"
htmlFor="dropdown_id"
>
<IsRequired>
<span
aria-hidden="true"
className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
>
*
</span>
Instance
</IsRequired>
</label>
<div
className="bx--select-input__wrapper"
data-invalid={null}
>
<select
className="bx--select-input"
id="dropdown_id"
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<SelectItem
disabled={false}
hidden={false}
key="0"
label="<Choose>"
text="<Choose>"
value=""
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="<Choose>"
value=""
>
<Choose>
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="1"
label="server1"
text="server1"
value="1"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server1"
value="1"
>
server1
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="2"
label="server2"
text="server2"
value="2"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server2"
value="2"
>
server2
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="3"
label="server3"
text="server3"
value="3"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server3"
value="3"
>
server3
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="4"
label="server4"
text="server4"
value="4"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server4"
value="4"
>
server4
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="5"
label="server5"
text="server5"
value="5"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server5"
value="5"
>
server5
</option>
</SelectItem>
</select>
<ForwardRef(ChevronDown16)
className="bx--select__arrow"
>
<Icon
className="bx--select__arrow"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden={true}
className="bx--select__arrow"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
/>
</svg>
</Icon>
</ForwardRef(ChevronDown16)>
</div>
</div>
</div>
</Select>
</ClearedSelect>
</Select>
</Select>
</SelectWithOnChange>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<SingleField
component="spy-field"
key="spy-field"
name="spy-field"
>
<FormConditionWrapper
field={
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SpyField
component="spy-field"
name="spy-field"
>
<FormSpy
onChange={[Function]}
subscription={
Object {
"pristine": true,
"valid": true,
}
}
/>
</SpyField>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<FormSpy>
<div
className="custom-button-wrapper"
>
<Button
className="btnRight"
disabled={true}
id="submit"
kind="primary"
type="submit"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--primary bx--btn--disabled"
disabled={true}
id="submit"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="submit"
variant="contained"
>
Detach
</button>
</Button>
<Button
className="btnRight"
disabled={false}
id="reset"
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--secondary"
disabled={false}
id="reset"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Reset
</button>
</Button>
<Button
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--secondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Cancel
</button>
</Button>
</div>
</FormSpy>
</form>
</FormTemplate>
</FormTemplate>
</ReactFinalForm>
</FormRenderer>
</MiqFormRenderer>
</Connect(MiqFormRenderer)>
</div>
</AttachDetachCloudVolumeForm>
</Provider>
`;
exports[`Attach / Detach form component should render form 1`] = `""`;
exports[`Attach / Detach form component should submit Attach API call 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],
}
}
>
<AttachDetachCloudVolumeForm
dropdownChoices={
Array [
Array [
"server1",
1,
],
Array [
"server2",
2,
],
Array [
"server3",
3,
],
Array [
"server4",
4,
],
Array [
"server5",
5,
],
]
}
dropdownLabel="Instance"
isAttach={true}
recordId="1"
>
<div
className="tasks-form"
>
<Connect(MiqFormRenderer)
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Attach",
}
}
canReset={true}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
],
}
}
>
<MiqFormRenderer
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Attach",
}
}
canReset={true}
className="form-react"
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
disableSubmit={
Array [
"pristine",
"invalid",
]
}
dispatch={[Function]}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
],
}
}
showFormControls={true}
>
<FormRenderer
FormTemplate={[Function]}
clearOnUnmount={false}
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"spy-field": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
dispatch={[Function]}
initialValues={Object {}}
onCancel={[Function]}
onReset={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<ReactFinalForm
decorators={
Array [
[Function],
]
}
dispatch={[Function]}
initialValues={Object {}}
mutators={
Object {
"concat": [Function],
"insert": [Function],
"move": [Function],
"pop": [Function],
"push": [Function],
"remove": [Function],
"removeBatch": [Function],
"shift": [Function],
"swap": [Function],
"unshift": [Function],
"update": [Function],
}
}
onSubmit={[Function]}
render={[Function]}
subscription={
Object {
"pristine": true,
"submitting": true,
"valid": true,
}
}
>
<FormTemplate
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [
<SingleField
component="text-field"
id="device_mountpoint"
isRequired={true}
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
/>,
],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<FormTemplate
fields={
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
]
}
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [
<SingleField
component="text-field"
id="device_mountpoint"
isRequired={true}
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
/>,
],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
isAttach={true}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
},
],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<form
onSubmit={[Function]}
>
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
key="dropdown_id"
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
>
<FormConditionWrapper
field={
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Instance",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SelectWithOnChange
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Instance"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
component="select"
id="dropdown_id"
isRequired={true}
label="Instance"
loadingMessage="Loading..."
name="dropdown_id"
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
SelectComponent={[Function]}
id="dropdown_id"
invalidText=""
labelText={
<IsRequired>
Instance
</IsRequired>
}
loadOptionsChangeCounter={1}
loadingMessage="Loading..."
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
simpleValue={false}
value=""
>
<ClearedSelect
className=""
closeMenuOnSelect={true}
hideSelectedOptions={false}
id="dropdown_id"
invalidText=""
isClearable={false}
isFetching={false}
isSearchable={false}
labelText={
<IsRequired>
Instance
</IsRequired>
}
name="dropdown_id"
noOptionsMessage={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onInputChange={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
value=""
>
<Select
className=""
disabled={false}
helperText=""
id="dropdown_id"
inline={false}
invalid={false}
invalidText=""
labelText={
<IsRequired>
Instance
</IsRequired>
}
light={false}
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<div
className="bx--form-item"
>
<div
className="bx--select"
>
<label
className="bx--label"
htmlFor="dropdown_id"
>
<IsRequired>
<span
aria-hidden="true"
className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
>
*
</span>
Instance
</IsRequired>
</label>
<div
className="bx--select-input__wrapper"
data-invalid={null}
>
<select
className="bx--select-input"
id="dropdown_id"
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<SelectItem
disabled={false}
hidden={false}
key="0"
label="<Choose>"
text="<Choose>"
value=""
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="<Choose>"
value=""
>
<Choose>
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="1"
label="server1"
text="server1"
value="1"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server1"
value="1"
>
server1
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="2"
label="server2"
text="server2"
value="2"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server2"
value="2"
>
server2
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="3"
label="server3"
text="server3"
value="3"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server3"
value="3"
>
server3
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="4"
label="server4"
text="server4"
value="4"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server4"
value="4"
>
server4
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="5"
label="server5"
text="server5"
value="5"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server5"
value="5"
>
server5
</option>
</SelectItem>
</select>
<ForwardRef(ChevronDown16)
className="bx--select__arrow"
>
<Icon
className="bx--select__arrow"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden={true}
className="bx--select__arrow"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
/>
</svg>
</Icon>
</ForwardRef(ChevronDown16)>
</div>
</div>
</div>
</Select>
</ClearedSelect>
</Select>
</Select>
</SelectWithOnChange>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<SingleField
component="text-field"
id="device_mountpoint"
isRequired={true}
key="device_mountpoint"
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
>
<FormConditionWrapper
field={
Object {
"component": "text-field",
"id": "device_mountpoint",
"isRequired": true,
"label": "Device Mountpoint",
"name": "device_mountpoint",
"validate": Array [
Object {
"type": "required",
},
],
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<TextField
component="text-field"
id="device_mountpoint"
isRequired={true}
label="Device Mountpoint"
name="device_mountpoint"
validate={
Array [
Object {
"type": "required",
},
]
}
>
<TextInput
id="device_mountpoint"
invalid={false}
invalidText=""
key="device_mountpoint"
labelText={
<IsRequired>
Device Mountpoint
</IsRequired>
}
name="device_mountpoint"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
warn={false}
warnText=""
>
<div
className="bx--form-item bx--text-input-wrapper"
>
<label
className="bx--label"
htmlFor="device_mountpoint"
>
<IsRequired>
<span
aria-hidden="true"
className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
>
*
</span>
Device Mountpoint
</IsRequired>
</label>
<div
className="bx--text-input__field-outer-wrapper"
>
<div
className="bx--text-input__field-wrapper"
data-invalid={null}
>
<input
className="bx--text-input bx--text-input--md"
disabled={false}
id="device_mountpoint"
name="device_mountpoint"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
type="text"
value=""
/>
</div>
</div>
</div>
</TextInput>
</TextField>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<SingleField
component="spy-field"
key="spy-field"
name="spy-field"
>
<FormConditionWrapper
field={
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SpyField
component="spy-field"
name="spy-field"
>
<FormSpy
onChange={[Function]}
subscription={
Object {
"pristine": true,
"valid": true,
}
}
/>
</SpyField>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<FormSpy>
<div
className="custom-button-wrapper"
>
<Button
className="btnRight"
disabled={true}
id="submit"
kind="primary"
type="submit"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--primary bx--btn--disabled"
disabled={true}
id="submit"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="submit"
variant="contained"
>
Attach
</button>
</Button>
<Button
className="btnRight"
disabled={true}
id="reset"
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--secondary bx--btn--disabled"
disabled={true}
id="reset"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Reset
</button>
</Button>
<Button
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--secondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Cancel
</button>
</Button>
</div>
</FormSpy>
</form>
</FormTemplate>
</FormTemplate>
</ReactFinalForm>
</FormRenderer>
</MiqFormRenderer>
</Connect(MiqFormRenderer)>
</div>
</AttachDetachCloudVolumeForm>
</Provider>
`;
exports[`Attach / Detach form component should submit Detach API call 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],
}
}
>
<AttachDetachCloudVolumeForm
dropdownChoices={
Array [
Array [
"server1",
1,
],
Array [
"server2",
2,
],
Array [
"server3",
3,
],
Array [
"server4",
4,
],
Array [
"server5",
5,
],
]
}
dropdownLabel="Volume"
isAttach={false}
recordId="1"
>
<div
className="tasks-form"
>
<Connect(MiqFormRenderer)
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Detach",
}
}
canReset={true}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
],
}
}
>
<MiqFormRenderer
FormTemplate={[Function]}
buttonsLabels={
Object {
"submitLabel": "Detach",
}
}
canReset={true}
className="form-react"
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
disableSubmit={
Array [
"pristine",
"invalid",
]
}
dispatch={[Function]}
onCancel={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
],
}
}
showFormControls={true}
>
<FormRenderer
FormTemplate={[Function]}
clearOnUnmount={false}
componentMapper={
Object {
"checkbox": [Function],
"code-editor": [Function],
"date-picker": [Function],
"dual-list-select": [Function],
"edit-password-field": [Function],
"field-array": [Function],
"file-upload": [Function],
"font-icon-picker": [Function],
"font-icon-picker-ddf": [Function],
"multi-select": [Function],
"password-field": [Function],
"plain-text": [Function],
"radio": [Function],
"select": [Function],
"slider": [Function],
"spy-field": [Function],
"sub-form": [Function],
"switch": [Function],
"tabs": [Function],
"text-field": [Function],
"textarea": [Function],
"time-picker": [Function],
"tree-selector": [Function],
"tree-view": [Function],
"validate-credentials": [Function],
"wizard": [Function],
}
}
dispatch={[Function]}
initialValues={Object {}}
onCancel={[Function]}
onReset={[Function]}
onSubmit={[Function]}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<ReactFinalForm
decorators={
Array [
[Function],
]
}
dispatch={[Function]}
initialValues={Object {}}
mutators={
Object {
"concat": [Function],
"insert": [Function],
"move": [Function],
"pop": [Function],
"push": [Function],
"remove": [Function],
"removeBatch": [Function],
"shift": [Function],
"swap": [Function],
"unshift": [Function],
"update": [Function],
}
}
onSubmit={[Function]}
render={[Function]}
subscription={
Object {
"pristine": true,
"submitting": true,
"valid": true,
}
}
>
<FormTemplate
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<FormTemplate
fields={Array []}
formFields={
Array [
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
/>,
Array [],
<SingleField
component="spy-field"
name="spy-field"
/>,
]
}
isAttach={false}
schema={
Object {
"fields": Array [
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
},
Array [],
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
},
],
}
}
>
<form
onSubmit={[Function]}
>
<SingleField
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
key="dropdown_id"
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
>
<FormConditionWrapper
field={
Object {
"component": "select",
"id": "dropdown_id",
"includeEmpty": true,
"isRequired": true,
"label": "Volume",
"name": "dropdown_id",
"options": Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
],
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SelectWithOnChange
component="select"
id="dropdown_id"
includeEmpty={true}
isRequired={true}
label="Volume"
name="dropdown_id"
options={
Array [
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
component="select"
id="dropdown_id"
isRequired={true}
label="Volume"
loadingMessage="Loading..."
name="dropdown_id"
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
>
<Select
SelectComponent={[Function]}
id="dropdown_id"
invalidText=""
labelText={
<IsRequired>
Volume
</IsRequired>
}
loadOptionsChangeCounter={1}
loadingMessage="Loading..."
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
simpleValue={false}
value=""
>
<ClearedSelect
className=""
closeMenuOnSelect={true}
hideSelectedOptions={false}
id="dropdown_id"
invalidText=""
isClearable={false}
isFetching={false}
isSearchable={false}
labelText={
<IsRequired>
Volume
</IsRequired>
}
name="dropdown_id"
noOptionsMessage={[Function]}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onInputChange={[Function]}
options={
Array [
Object {
"label": "<Choose>",
"value": undefined,
},
Object {
"label": "server1",
"value": "1",
},
Object {
"label": "server2",
"value": "2",
},
Object {
"label": "server3",
"value": "3",
},
Object {
"label": "server4",
"value": "4",
},
Object {
"label": "server5",
"value": "5",
},
]
}
placeholder="<Choose>"
value=""
>
<Select
className=""
disabled={false}
helperText=""
id="dropdown_id"
inline={false}
invalid={false}
invalidText=""
labelText={
<IsRequired>
Volume
</IsRequired>
}
light={false}
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<div
className="bx--form-item"
>
<div
className="bx--select"
>
<label
className="bx--label"
htmlFor="dropdown_id"
>
<IsRequired>
<span
aria-hidden="true"
className="ddorg__carbon-component-mapper_is-required isRequired-0-2-1"
>
*
</span>
Volume
</IsRequired>
</label>
<div
className="bx--select-input__wrapper"
data-invalid={null}
>
<select
className="bx--select-input"
id="dropdown_id"
name="dropdown_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
value=""
>
<SelectItem
disabled={false}
hidden={false}
key="0"
label="<Choose>"
text="<Choose>"
value=""
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="<Choose>"
value=""
>
<Choose>
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="1"
label="server1"
text="server1"
value="1"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server1"
value="1"
>
server1
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="2"
label="server2"
text="server2"
value="2"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server2"
value="2"
>
server2
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="3"
label="server3"
text="server3"
value="3"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server3"
value="3"
>
server3
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="4"
label="server4"
text="server4"
value="4"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server4"
value="4"
>
server4
</option>
</SelectItem>
<SelectItem
disabled={false}
hidden={false}
key="5"
label="server5"
text="server5"
value="5"
>
<option
className="bx--select-option"
disabled={false}
hidden={false}
label="server5"
value="5"
>
server5
</option>
</SelectItem>
</select>
<ForwardRef(ChevronDown16)
className="bx--select__arrow"
>
<Icon
className="bx--select__arrow"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden={true}
className="bx--select__arrow"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
/>
</svg>
</Icon>
</ForwardRef(ChevronDown16)>
</div>
</div>
</div>
</Select>
</ClearedSelect>
</Select>
</Select>
</SelectWithOnChange>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<SingleField
component="spy-field"
key="spy-field"
name="spy-field"
>
<FormConditionWrapper
field={
Object {
"component": "spy-field",
"initialize": undefined,
"name": "spy-field",
}
}
>
<FormFieldHideWrapper
hideField={false}
>
<SpyField
component="spy-field"
name="spy-field"
>
<FormSpy
onChange={[Function]}
subscription={
Object {
"pristine": true,
"valid": true,
}
}
/>
</SpyField>
</FormFieldHideWrapper>
</FormConditionWrapper>
</SingleField>
<FormSpy>
<div
className="custom-button-wrapper"
>
<Button
className="btnRight"
disabled={true}
id="submit"
kind="primary"
type="submit"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--primary bx--btn--disabled"
disabled={true}
id="submit"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="submit"
variant="contained"
>
Detach
</button>
</Button>
<Button
className="btnRight"
disabled={false}
id="reset"
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="btnRight bx--btn bx--btn--secondary"
disabled={false}
id="reset"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Reset
</button>
</Button>
<Button
kind="secondary"
onClick={[Function]}
type="button"
variant="contained"
>
<button
aria-describedby={null}
aria-pressed={null}
className="bx--btn bx--btn--secondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tabIndex={0}
type="button"
variant="contained"
>
Cancel
</button>
</Button>
</div>
</FormSpy>
</form>
</FormTemplate>
</FormTemplate>
</ReactFinalForm>
</FormRenderer>
</MiqFormRenderer>
</Connect(MiqFormRenderer)>
</div>
</AttachDetachCloudVolumeForm>
</Provider>
`;