@@ -13,20 +13,22 @@ import {
13
13
DynamicFormToggle ,
14
14
DynamicTextArea ,
15
15
DynamicMultiSelect ,
16
- } from "./dynamic-form/components" ;
16
+ DynamicPublicKey ,
17
+ SubFormOverrideTile ,
18
+ PowerInterfaces ,
19
+ PerCloudConnections ,
20
+ } from "./dynamic-form" ;
17
21
import { eachKey , isBoolean , contains } from "lazy-z" ;
18
- import { propsMatchState } from "../../lib" ;
19
- import {
20
- ClassicDisabledTile ,
21
- NoClassicGatewaysTile ,
22
- NoDomainsTile ,
23
- } from "./dynamic-form/tiles" ;
22
+ import { disableSave , propsMatchState } from "../../lib" ;
24
23
import {
25
24
dynamicIcseFormGroupsProps ,
26
25
dynamicIcseHeadingProps ,
27
26
dynamicToolTipWrapperProps ,
28
27
} from "../../lib/forms/dynamic-form-fields" ;
29
- import { Network_3 } from "@carbon/icons-react" ;
28
+ import { edgeRouterEnabledZones } from "../../lib/constants" ;
29
+ import { DynamicFetchSelect } from "./dynamic-form/components" ;
30
+ import { Button } from "@carbon/react" ;
31
+ import { Rocket } from "@carbon/icons-react" ;
30
32
31
33
const doNotRenderFields = [
32
34
"heading" ,
@@ -55,7 +57,14 @@ class DynamicForm extends React.Component {
55
57
! isBoolean ( this . state [ field ] ) &&
56
58
! contains ( doNotRenderFields , field )
57
59
)
58
- this . state [ field ] = group [ field ] . default || "" ;
60
+ // prevent ssh public key from causing propsMatchState to be false
61
+ // when use data is true. also prevent router_hostname from rendering as
62
+ // empty string when null
63
+ this . state [ field ] = isBoolean ( group [ field ] . default )
64
+ ? group [ field ] . default
65
+ : group [ field ] . default === null && field !== "router_hostname"
66
+ ? null
67
+ : group [ field ] . default || "" ;
59
68
} ) ;
60
69
} ) ;
61
70
@@ -154,10 +163,13 @@ class DynamicForm extends React.Component {
154
163
) : group . heading ? (
155
164
< IcseHeading { ...dynamicIcseHeadingProps ( group ) } />
156
165
) : (
157
- < IcseFormGroup { ...dynamicIcseFormGroupsProps ( this . props , index ) } >
166
+ < IcseFormGroup
167
+ { ...dynamicIcseFormGroupsProps ( this . props , index , this . state ) }
168
+ >
158
169
{ Object . keys ( group ) . map ( ( key , keyIndex ) => {
159
170
let field = group [ key ] ;
160
- return ( field . hideWhen && field . hideWhen ( this . state ) ) ||
171
+ return ( field . hideWhen &&
172
+ field . hideWhen ( this . state , this . props ) ) ||
161
173
key === "hideWhen" ? (
162
174
""
163
175
) : (
@@ -178,6 +190,10 @@ class DynamicForm extends React.Component {
178
190
? DynamicTextArea
179
191
: field . type === "multiselect"
180
192
? DynamicMultiSelect
193
+ : field . type === "public-key"
194
+ ? DynamicPublicKey
195
+ : field . type === "fetchSelect"
196
+ ? DynamicFetchSelect
181
197
: DynamicFormTextInput ,
182
198
{
183
199
name : key ,
@@ -199,99 +215,94 @@ class DynamicForm extends React.Component {
199
215
</ IcseFormGroup >
200
216
)
201
217
) }
202
- {
203
- // this is less than elegant, as we add more custom components we can
204
- // figure out the best way to render custom components
205
- this . props . formName === "Power Instances" && (
206
- < div className = "formInSubForm" >
207
- { this . state . network . length === 0
208
- ? "No Network Interfaces Selected"
209
- : this . state . network . map ( ( nw , index ) => {
210
- return (
211
- < IcseFormGroup
212
- key = { nw . name + "-group" }
213
- className = "alignItemsCenter marginBottomSmall"
214
- >
215
- < Network_3 className = "powerIpMargin" />
216
- < div className = "powerIpMargin fieldWidth" >
217
- < p > { nw . name } </ p >
218
- </ div >
219
- < DynamicFormTextInput
220
- name = { "ip_address_" + index }
221
- field = { this . props . craig . power_instances . ip_address }
222
- parentState = { this . state }
223
- parentProps = { this . props }
224
- handleInputChange = { this . handleInputChange }
225
- index = { index }
226
- value = { nw . ip_address }
227
- />
228
- </ IcseFormGroup >
229
- ) ;
230
- } ) }
231
- </ div >
232
- )
233
- }
218
+ < PowerInterfaces
219
+ stateData = { this . state }
220
+ componentProps = { this . props }
221
+ handleInputChange = { this . handleInputChange }
222
+ />
223
+ { this . props . formName === "options" ? (
224
+ < Button
225
+ disabled = { disableSave ( "options" , this . state , this . props ) }
226
+ className = "marginTop"
227
+ onClick = { ( ) => {
228
+ window . location . pathname = "/form/resourceGroups" ;
229
+ } }
230
+ >
231
+ Begin Customizing < Rocket className = "rocketIcon" />
232
+ </ Button >
233
+ ) : (
234
+ ""
235
+ ) }
234
236
{ this . props . isModal === true || ! this . props . form . subForms
235
237
? ""
236
- : this . props . form . subForms . map ( ( subForm ) => (
237
- < IcseFormTemplate
238
- key = { subForm . name }
239
- overrideTile = {
240
- // this is currently messy, we'll need to figure out a better solution
241
- subForm . jsonField === "dns_records" &&
242
- this . props . data . domains . length === 0 ? (
243
- < NoDomainsTile />
244
- ) : subForm . jsonField === "gre_tunnels" &&
245
- ! this . props . craig . store . json . _options . enable_classic ? (
246
- ClassicDisabledTile ( true )
247
- ) : subForm . jsonField === "gre_tunnels" &&
248
- this . props . craig . store . json . classic_gateways . length ===
249
- 0 ? (
250
- < NoClassicGatewaysTile />
251
- ) : undefined
252
- }
253
- hideFormTitleButton = {
254
- subForm . hideFormTitleButton
255
- ? subForm . hideFormTitleButton ( this . state , this . props )
256
- : false
257
- }
258
- name = { subForm . name }
259
- subHeading
260
- addText = { subForm . createText }
261
- arrayData = { this . props . data [ subForm . jsonField ] }
262
- innerForm = { DynamicForm }
263
- disableSave = { this . props . disableSave }
264
- onDelete = {
265
- this . props . craig [ this . props . form . jsonField ] [ subForm . jsonField ]
266
- . delete
267
- }
268
- onSave = {
269
- this . props . craig [ this . props . form . jsonField ] [ subForm . jsonField ]
270
- . save
271
- }
272
- onSubmit = {
273
- this . props . craig [ this . props . form . jsonField ] [ subForm . jsonField ]
274
- . create
275
- }
276
- propsMatchState = { propsMatchState }
277
- innerFormProps = { {
278
- formName : subForm . name ,
279
- craig : this . props . craig ,
280
- form : subForm . form ,
281
- disableSave : this . props . disableSave ,
282
- arrayParentName : this . props . data . name ,
283
- propsMatchState : propsMatchState ,
284
- } }
285
- toggleFormFieldName = { subForm . toggleFormFieldName }
286
- hideAbout
287
- toggleFormProps = { {
288
- hideName : true ,
289
- submissionFieldName : subForm . jsonField ,
290
- disableSave : this . props . disableSave ,
291
- type : "formInSubForm" ,
292
- } }
293
- />
294
- ) ) }
238
+ : this . props . form . subForms . map ( ( subForm ) =>
239
+ // prevent template from rendering when edge router
240
+ subForm . jsonField === "cloud_connections" &&
241
+ contains ( edgeRouterEnabledZones , this . state . zone ) ? (
242
+ < PerCloudConnections />
243
+ ) : subForm . hideWhen &&
244
+ // hide when hidden
245
+ subForm . hideWhen ( this . state , this . props ) ? (
246
+ ""
247
+ ) : (
248
+ < IcseFormTemplate
249
+ key = { subForm . name }
250
+ tooltip = { subForm . tooltip }
251
+ overrideTile = {
252
+ < SubFormOverrideTile
253
+ subForm = { subForm }
254
+ componentProps = { this . props }
255
+ />
256
+ }
257
+ hideFormTitleButton = {
258
+ subForm . hideFormTitleButton
259
+ ? subForm . hideFormTitleButton ( this . state , this . props )
260
+ : false
261
+ }
262
+ name = { subForm . name }
263
+ subHeading
264
+ addText = { subForm . addText }
265
+ arrayData = { this . props . data [ subForm . jsonField ] }
266
+ innerForm = { DynamicForm }
267
+ disableSave = { this . props . disableSave }
268
+ onDelete = {
269
+ this . props . craig [ this . props . form . jsonField ] [
270
+ subForm . jsonField
271
+ ] . delete
272
+ }
273
+ onSave = {
274
+ this . props . craig [ this . props . form . jsonField ] [
275
+ subForm . jsonField
276
+ ] . save
277
+ }
278
+ onSubmit = {
279
+ this . props . craig [ this . props . form . jsonField ] [
280
+ subForm . jsonField
281
+ ] . create
282
+ }
283
+ propsMatchState = { propsMatchState }
284
+ innerFormProps = { {
285
+ formName : subForm . name ,
286
+ craig : this . props . craig ,
287
+ form : subForm . form ,
288
+ disableSave : this . props . disableSave ,
289
+ arrayParentName : this . props . data . name ,
290
+ propsMatchState : propsMatchState ,
291
+ } }
292
+ toggleFormFieldName = { subForm . toggleFormFieldName }
293
+ hideAbout
294
+ toggleFormProps = { {
295
+ hideName : true ,
296
+ submissionFieldName : subForm . jsonField ,
297
+ disableSave : this . props . disableSave ,
298
+ type : "formInSubForm" ,
299
+ noDeleteButton : subForm . noDeleteButton ,
300
+ // here for testing
301
+ // hide: false,
302
+ } }
303
+ />
304
+ )
305
+ ) }
295
306
</ div >
296
307
) ;
297
308
}
0 commit comments