@@ -104,10 +104,9 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
104104 formData . networks
105105 ?. filter ( ( network ) => network . Target )
106106 . map ( ( network ) => {
107- const entries =
108- ( network . DriverOptsEntries ?? [ ] ) . filter (
109- ( e ) => e . key . trim ( ) !== "" ,
110- ) ;
107+ const entries = ( network . DriverOptsEntries ?? [ ] ) . filter (
108+ ( e ) => e . key . trim ( ) !== "" ,
109+ ) ;
111110 const driverOpts =
112111 entries . length > 0
113112 ? Object . fromEntries (
@@ -194,74 +193,74 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
194193 < div className = "space-y-2" >
195194 < FormLabel > Driver options (optional)</ FormLabel >
196195 < FormDescription >
197- e.g. com.docker.network.driver.mtu, com.docker.network.driver.host_binding
196+ e.g. com.docker.network.driver.mtu,
197+ com.docker.network.driver.host_binding
198198 </ FormDescription >
199- { ( form . watch ( `networks.${ index } .DriverOptsEntries` ) ?? [ ] ) . map (
200- ( _ , optIndex ) => (
201- < div
202- key = { optIndex }
203- className = "flex gap-2 items-end flex-wrap"
204- >
205- < FormField
206- control = { form . control }
207- name = { `networks.${ index } .DriverOptsEntries.${ optIndex } .key` }
208- render = { ( { field } ) => (
209- < FormItem className = "flex-1 min-w-[140px]" >
210- < FormControl >
211- < Input
212- { ...field }
213- placeholder = "com.docker.network.driver.mtu"
214- />
215- </ FormControl >
216- < FormMessage />
217- </ FormItem >
218- ) }
219- />
220- < FormField
221- control = { form . control }
222- name = { `networks.${ index } .DriverOptsEntries.${ optIndex } .value` }
223- render = { ( { field } ) => (
224- < FormItem className = "flex-1 min-w-[100px]" >
225- < FormControl >
226- < Input { ...field } placeholder = "1500" />
227- </ FormControl >
228- < FormMessage />
229- </ FormItem >
230- ) }
231- />
232- < Button
233- type = "button"
234- variant = "ghost"
235- size = "sm"
236- onClick = { ( ) => {
237- const entries =
238- form . getValues (
239- `networks.${ index } .DriverOptsEntries` ,
240- ) ?? [ ] ;
241- form . setValue (
199+ { (
200+ form . watch ( `networks.${ index } .DriverOptsEntries` ) ?? [ ]
201+ ) . map ( ( _ , optIndex ) => (
202+ < div
203+ key = { optIndex }
204+ className = "flex gap-2 items-end flex-wrap"
205+ >
206+ < FormField
207+ control = { form . control }
208+ name = { `networks.${ index } .DriverOptsEntries.${ optIndex } .key` }
209+ render = { ( { field } ) => (
210+ < FormItem className = "flex-1 min-w-[140px]" >
211+ < FormControl >
212+ < Input
213+ { ...field }
214+ placeholder = "com.docker.network.driver.mtu"
215+ />
216+ </ FormControl >
217+ < FormMessage />
218+ </ FormItem >
219+ ) }
220+ />
221+ < FormField
222+ control = { form . control }
223+ name = { `networks.${ index } .DriverOptsEntries.${ optIndex } .value` }
224+ render = { ( { field } ) => (
225+ < FormItem className = "flex-1 min-w-[100px]" >
226+ < FormControl >
227+ < Input { ...field } placeholder = "1500" />
228+ </ FormControl >
229+ < FormMessage />
230+ </ FormItem >
231+ ) }
232+ />
233+ < Button
234+ type = "button"
235+ variant = "ghost"
236+ size = "sm"
237+ onClick = { ( ) => {
238+ const entries =
239+ form . getValues (
242240 `networks.${ index } .DriverOptsEntries` ,
243- entries . filter ( ( _ , i ) => i !== optIndex ) ,
244- ) ;
245- } }
246- >
247- Remove
248- </ Button >
249- </ div >
250- ) ,
251- ) }
241+ ) ?? [ ] ;
242+ form . setValue (
243+ `networks.${ index } .DriverOptsEntries` ,
244+ entries . filter ( ( _ , i ) => i !== optIndex ) ,
245+ ) ;
246+ } }
247+ >
248+ Remove
249+ </ Button >
250+ </ div >
251+ ) ) }
252252 < Button
253253 type = "button"
254254 variant = "outline"
255255 size = "sm"
256256 onClick = { ( ) => {
257257 const entries =
258- form . getValues (
259- `networks.${ index } .DriverOptsEntries` ,
260- ) ?? [ ] ;
261- form . setValue (
262- `networks.${ index } .DriverOptsEntries` ,
263- [ ...entries , { key : "" , value : "" } ] ,
264- ) ;
258+ form . getValues ( `networks.${ index } .DriverOptsEntries` ) ??
259+ [ ] ;
260+ form . setValue ( `networks.${ index } .DriverOptsEntries` , [
261+ ...entries ,
262+ { key : "" , value : "" } ,
263+ ] ) ;
265264 } }
266265 >
267266 Add driver option
@@ -282,12 +281,12 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
282281 variant = "outline"
283282 size = "sm"
284283 onClick = { ( ) =>
285- append ( {
286- Target : "" ,
287- Aliases : "" ,
288- DriverOptsEntries : [ ] ,
289- } )
290- }
284+ append ( {
285+ Target : "" ,
286+ Aliases : "" ,
287+ DriverOptsEntries : [ ] ,
288+ } )
289+ }
291290 >
292291 Add Network
293292 </ Button >
0 commit comments