@@ -28,7 +28,7 @@ const S3Integration = ({ close, value }) => {
2828 const isValue = value && Object . keys ( value ) ?. length !== 0 ;
2929 const s3Configuration = INTEGRATION_LIST [ 'S3' ] ;
3030 const [ creationForm ] = Form . useForm ( ) ;
31- const [ dispatch ] = useContext ( Context ) ;
31+ const [ state , dispatch ] = useContext ( Context ) ;
3232 const [ formFields , setFormFields ] = useState ( {
3333 name : 's3' ,
3434 keys : {
@@ -64,7 +64,6 @@ const S3Integration = ({ close, value }) => {
6464 Promise . all ( promises ) . then ( ( ) => {
6565 setImagesLoaded ( true ) ;
6666 } ) ;
67-
6867 } , [ ] ) ;
6968
7069 const updateKeysState = ( field , value ) => {
@@ -130,6 +129,7 @@ const S3Integration = ({ close, value }) => {
130129 setLoadingSubmit ( false ) ;
131130 }
132131 } ;
132+
133133 const disconnect = async ( ) => {
134134 setLoadingDisconnect ( true ) ;
135135 try {
@@ -192,9 +192,9 @@ const S3Integration = ({ close, value }) => {
192192 < div className = "api-key" >
193193 < p > Secret access key</ p >
194194 < span className = "desc" >
195- When you use S3 compatible storage programmatically, you provide your access keys so that the provider can verify your identity in programmatic calls. Access
196- keys can be either temporary (short-term) credentials or long-term credentials, such as for an IAM user, provider provided keys or credentials. { ' ' }
197- < br />
195+ When you use S3 compatible storage programmatically, you provide your access keys so that the provider can verify your identity in
196+ programmatic calls. Access keys can be either temporary (short-term) credentials or long-term credentials, such as for an IAM user,
197+ provider provided keys or credentials. < br />
198198 < b > Memphis encrypts all stored information using Triple DES algorithm</ b >
199199 </ span >
200200 < Form . Item
@@ -249,106 +249,111 @@ const S3Integration = ({ close, value }) => {
249249 />
250250 </ Form . Item >
251251 </ div >
252- < div className = "select-field" >
253- < p > Region</ p >
254- < Form . Item
255- name = "region"
256- initialValue = { formFields ?. keys ?. region }
257- rules = { [
258- {
259- required : true ,
260- message : 'Please insert region'
261- }
262- ] }
263- >
264- < Input
265- type = "text"
266- placeholder = "us-east-1"
267- fontSize = "12px"
268- colorType = "black"
269- backgroundColorType = "none"
270- borderColorType = "gray"
271- radiusType = "semi-round"
272- height = "40px"
273- value = { formFields ?. keys ?. region }
274- onBlur = { ( e ) => updateKeysState ( 'region' , e . target . value ) }
275- onChange = { ( e ) => updateKeysState ( 'region' , e . target . value ) }
276- />
277- </ Form . Item >
278- </ div >
279- < div className = "input-field" >
280- < p > Bucket name</ p >
281- < Form . Item
282- name = "bucket_name"
283- rules = { [
284- {
285- required : true ,
286- message : 'Please insert bucket name'
287- }
288- ] }
289- initialValue = { formFields ?. keys ?. bucket_name }
290- >
291- < Input
292- placeholder = "Insert your bucket name"
293- type = "text"
294- fontSize = "12px"
295- radiusType = "semi-round"
296- colorType = "black"
297- backgroundColorType = "none"
298- borderColorType = "gray"
299- height = "40px"
300- onBlur = { ( e ) => updateKeysState ( 'bucket_name' , e . target . value ) }
301- onChange = { ( e ) => updateKeysState ( 'bucket_name' , e . target . value ) }
302- value = { formFields . keys ?. bucket_name }
303- />
304- </ Form . Item >
305- </ div >
306- < div className = "input-field" >
307- < p > Endpoint URL (optional)</ p >
308- < Form . Item
309- name = "url"
310- rules = { [
311- {
312- required : false ,
313- }
314- ] }
315- initialValue = { formFields ?. keys ?. url }
316- >
317- < Input
318- placeholder = "Insert custom S3 API endpoint url (Optional; leave empty for AWS)"
319- type = "text"
320- fontSize = "12px"
321- radiusType = "semi-round"
322- colorType = "black"
323- backgroundColorType = "none"
324- borderColorType = "gray"
325- height = "40px"
326- onBlur = { ( e ) => updateKeysState ( 'url' , e . target . value ) }
327- onChange = { ( e ) => updateKeysState ( 'url' , e . target . value ) }
328- value = { formFields . keys ?. url }
329- />
330- </ Form . Item >
252+ < div className = "flex-fields" >
253+ < div className = "input-field" >
254+ < p > Region</ p >
255+ < Form . Item
256+ name = "region"
257+ initialValue = { formFields ?. keys ?. region }
258+ rules = { [
259+ {
260+ required : true ,
261+ message : 'Please insert region'
262+ }
263+ ] }
264+ >
265+ < Input
266+ type = "text"
267+ placeholder = "us-east-1"
268+ fontSize = "12px"
269+ colorType = "black"
270+ backgroundColorType = "none"
271+ borderColorType = "gray"
272+ radiusType = "semi-round"
273+ height = "40px"
274+ value = { formFields ?. keys ?. region }
275+ onBlur = { ( e ) => updateKeysState ( 'region' , e . target . value ) }
276+ onChange = { ( e ) => updateKeysState ( 'region' , e . target . value ) }
277+ />
278+ </ Form . Item >
279+ </ div >
280+ < div className = "input-field" >
281+ < p > Bucket name</ p >
282+ < Form . Item
283+ name = "bucket_name"
284+ rules = { [
285+ {
286+ required : true ,
287+ message : 'Please insert bucket name'
288+ }
289+ ] }
290+ initialValue = { formFields ?. keys ?. bucket_name }
291+ >
292+ < Input
293+ placeholder = "Insert your bucket name"
294+ type = "text"
295+ fontSize = "12px"
296+ radiusType = "semi-round"
297+ colorType = "black"
298+ backgroundColorType = "none"
299+ borderColorType = "gray"
300+ height = "40px"
301+ onBlur = { ( e ) => updateKeysState ( 'bucket_name' , e . target . value ) }
302+ onChange = { ( e ) => updateKeysState ( 'bucket_name' , e . target . value ) }
303+ value = { formFields . keys ?. bucket_name }
304+ />
305+ </ Form . Item >
306+ </ div >
331307 </ div >
332- < div className = "input-field" >
333- < p > Use Path Style</ p >
334- < Form . Item
335- name = "s3_path_style"
336- rules = { [
337- {
338- required : false ,
339- }
340- ] }
341- initialValue = { formFields ?. keys ?. s3_path_style }
342- >
343- < >
344- < Checkbox
345- defaultChecked = { false }
346- checkName = "s3_path_style"
347- checked = { formFields . keys ?. s3_path_style === "1" ? true : false }
348- onChange = { ( e ) => updateKeysState ( 's3_path_style' , e . target . checked ? "1" : "0" ) }
349- /> Enable
350- </ >
351- </ Form . Item >
308+ < div className = "flex-fields" >
309+ < div className = "input-field" >
310+ < p > Endpoint URL (optional)</ p >
311+ < Form . Item
312+ name = "url"
313+ rules = { [
314+ {
315+ required : false
316+ }
317+ ] }
318+ initialValue = { formFields ?. keys ?. url }
319+ >
320+ < Input
321+ placeholder = "Insert custom S3 API endpoint url (Optional; leave empty for AWS)"
322+ type = "text"
323+ fontSize = "12px"
324+ radiusType = "semi-round"
325+ colorType = "black"
326+ backgroundColorType = "none"
327+ borderColorType = "gray"
328+ height = "40px"
329+ onBlur = { ( e ) => updateKeysState ( 'url' , e . target . value ) }
330+ onChange = { ( e ) => updateKeysState ( 'url' , e . target . value ) }
331+ value = { formFields . keys ?. url }
332+ />
333+ </ Form . Item >
334+ </ div >
335+ < div className = "input-field" >
336+ < p > Use Path Style</ p >
337+ < Form . Item
338+ name = "s3_path_style"
339+ rules = { [
340+ {
341+ required : false
342+ }
343+ ] }
344+ initialValue = { formFields ?. keys ?. s3_path_style }
345+ >
346+ < >
347+ < Checkbox
348+ defaultChecked = { false }
349+ checkName = "s3_path_style"
350+ checked = { formFields . keys ?. s3_path_style === '1' ? true : false }
351+ onChange = { ( e ) => updateKeysState ( 's3_path_style' , e . target . checked ? '1' : '0' ) }
352+ /> { ' ' }
353+ Enable
354+ </ >
355+ </ Form . Item >
356+ </ div >
352357 </ div >
353358 </ div >
354359 < Form . Item className = "button-container" >
0 commit comments