@@ -13,20 +13,22 @@ import {
1313 DynamicFormToggle ,
1414 DynamicTextArea ,
1515 DynamicMultiSelect ,
16- } from "./dynamic-form/components" ;
16+ DynamicPublicKey ,
17+ SubFormOverrideTile ,
18+ PowerInterfaces ,
19+ PerCloudConnections ,
20+ } from "./dynamic-form" ;
1721import { 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" ;
2423import {
2524 dynamicIcseFormGroupsProps ,
2625 dynamicIcseHeadingProps ,
2726 dynamicToolTipWrapperProps ,
2827} 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" ;
3032
3133const doNotRenderFields = [
3234 "heading" ,
@@ -55,7 +57,14 @@ class DynamicForm extends React.Component {
5557 ! isBoolean ( this . state [ field ] ) &&
5658 ! contains ( doNotRenderFields , field )
5759 )
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 || "" ;
5968 } ) ;
6069 } ) ;
6170
@@ -154,10 +163,13 @@ class DynamicForm extends React.Component {
154163 ) : group . heading ? (
155164 < IcseHeading { ...dynamicIcseHeadingProps ( group ) } />
156165 ) : (
157- < IcseFormGroup { ...dynamicIcseFormGroupsProps ( this . props , index ) } >
166+ < IcseFormGroup
167+ { ...dynamicIcseFormGroupsProps ( this . props , index , this . state ) }
168+ >
158169 { Object . keys ( group ) . map ( ( key , keyIndex ) => {
159170 let field = group [ key ] ;
160- return ( field . hideWhen && field . hideWhen ( this . state ) ) ||
171+ return ( field . hideWhen &&
172+ field . hideWhen ( this . state , this . props ) ) ||
161173 key === "hideWhen" ? (
162174 ""
163175 ) : (
@@ -178,6 +190,10 @@ class DynamicForm extends React.Component {
178190 ? DynamicTextArea
179191 : field . type === "multiselect"
180192 ? DynamicMultiSelect
193+ : field . type === "public-key"
194+ ? DynamicPublicKey
195+ : field . type === "fetchSelect"
196+ ? DynamicFetchSelect
181197 : DynamicFormTextInput ,
182198 {
183199 name : key ,
@@ -199,99 +215,94 @@ class DynamicForm extends React.Component {
199215 </ IcseFormGroup >
200216 )
201217 ) }
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+ ) }
234236 { this . props . isModal === true || ! this . props . form . subForms
235237 ? ""
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+ ) }
295306 </ div >
296307 ) ;
297308 }
0 commit comments