1- import React from " react" ;
2- import { Flex , Stack , Center , Text , useMediaQuery } from " @chakra-ui/react" ;
1+ import React from ' react' ;
2+ import { Flex , Stack , Center , Text , useMediaQuery } from ' @chakra-ui/react' ;
33
4- import InputField from " ../../components/InputField" ;
5- import { TextInputType } from " ../../constants" ;
4+ import InputField from ' ../../components/InputField' ;
5+ import { TextInputType } from ' ../../constants' ;
66
77const DatabaseCredentials = ( { variables, setVariables } : any ) => {
8- const [ isNotSmallerScreen ] = useMediaQuery ( "(min-width:600px)" ) ;
9- return (
10- < div >
11- { " " }
12- < Text fontSize = "md" paddingTop = "2%" fontWeight = "bold" >
13- Database Credentials
14- </ Text >
15- < Stack spacing = { 6 } padding = "3% 0" >
16- < Text fontStyle = "italic" fontSize = "sm" color = "blackAlpha.500" mt = { 3 } >
17- Note: Database related environment variables cannot be updated from
18- dashboard :(
19- </ Text >
20- < Flex direction = { isNotSmallerScreen ? "row" : "column" } >
21- < Flex
22- w = { isNotSmallerScreen ? "30%" : "40%" }
23- justifyContent = "start"
24- alignItems = "center"
25- >
26- < Text fontSize = "sm" > DataBase Name:</ Text >
27- </ Flex >
28- < Center
29- w = { isNotSmallerScreen ? "70%" : "100%" }
30- mt = { isNotSmallerScreen ? "0" : "3" }
31- >
32- < InputField
33- borderRadius = { 5 }
34- variables = { variables }
35- setVariables = { setVariables }
36- inputType = { TextInputType . DATABASE_NAME }
37- isDisabled = { true }
38- />
39- </ Center >
40- </ Flex >
41- < Flex direction = { isNotSmallerScreen ? "row" : "column" } >
42- < Flex
43- w = { isNotSmallerScreen ? "30%" : "40%" }
44- justifyContent = "start"
45- alignItems = "center"
46- >
47- < Text fontSize = "sm" > DataBase Type:</ Text >
48- </ Flex >
49- < Center
50- w = { isNotSmallerScreen ? "70%" : "100%" }
51- mt = { isNotSmallerScreen ? "0" : "3" }
52- >
53- < InputField
54- borderRadius = { 5 }
55- variables = { variables }
56- setVariables = { setVariables }
57- inputType = { TextInputType . DATABASE_TYPE }
58- isDisabled = { true }
59- />
60- </ Center >
61- </ Flex >
62- < Flex direction = { isNotSmallerScreen ? "row" : "column" } >
63- < Flex
64- w = { isNotSmallerScreen ? "30%" : "40%" }
65- justifyContent = "start"
66- alignItems = "center"
67- >
68- < Text fontSize = "sm" > DataBase URL:</ Text >
69- </ Flex >
70- < Center
71- w = { isNotSmallerScreen ? "70%" : "100%" }
72- mt = { isNotSmallerScreen ? "0" : "3" }
73- >
74- < InputField
75- borderRadius = { 5 }
76- variables = { variables }
77- setVariables = { setVariables }
78- inputType = { TextInputType . DATABASE_URL }
79- isDisabled = { true }
80- />
81- </ Center >
82- </ Flex >
83- </ Stack >
84- </ div >
85- ) ;
8+ const [ isNotSmallerScreen ] = useMediaQuery ( '(min-width:600px)' ) ;
9+ return (
10+ < div >
11+ { ' ' }
12+ < Text fontSize = "md" paddingTop = "2%" fontWeight = "bold" >
13+ Database Credentials
14+ </ Text >
15+ < Stack spacing = { 6 } padding = "3% 0" >
16+ < Text fontStyle = "italic" fontSize = "sm" color = "blackAlpha.500" mt = { 3 } >
17+ Note: Database related environment variables cannot be updated from
18+ dashboard. Please use .env file or OS environment variables to update
19+ it.
20+ </ Text >
21+ < Flex direction = { isNotSmallerScreen ? 'row' : 'column' } >
22+ < Flex
23+ w = { isNotSmallerScreen ? '30%' : '40%' }
24+ justifyContent = "start"
25+ alignItems = "center"
26+ >
27+ < Text fontSize = "sm" > DataBase Name:</ Text >
28+ </ Flex >
29+ < Center
30+ w = { isNotSmallerScreen ? '70%' : '100%' }
31+ mt = { isNotSmallerScreen ? '0' : '3' }
32+ >
33+ < InputField
34+ borderRadius = { 5 }
35+ variables = { variables }
36+ setVariables = { setVariables }
37+ inputType = { TextInputType . DATABASE_NAME }
38+ isDisabled = { true }
39+ />
40+ </ Center >
41+ </ Flex >
42+ < Flex direction = { isNotSmallerScreen ? 'row' : 'column' } >
43+ < Flex
44+ w = { isNotSmallerScreen ? '30%' : '40%' }
45+ justifyContent = "start"
46+ alignItems = "center"
47+ >
48+ < Text fontSize = "sm" > DataBase Type:</ Text >
49+ </ Flex >
50+ < Center
51+ w = { isNotSmallerScreen ? '70%' : '100%' }
52+ mt = { isNotSmallerScreen ? '0' : '3' }
53+ >
54+ < InputField
55+ borderRadius = { 5 }
56+ variables = { variables }
57+ setVariables = { setVariables }
58+ inputType = { TextInputType . DATABASE_TYPE }
59+ isDisabled = { true }
60+ />
61+ </ Center >
62+ </ Flex >
63+ < Flex direction = { isNotSmallerScreen ? 'row' : 'column' } >
64+ < Flex
65+ w = { isNotSmallerScreen ? '30%' : '40%' }
66+ justifyContent = "start"
67+ alignItems = "center"
68+ >
69+ < Text fontSize = "sm" > DataBase URL:</ Text >
70+ </ Flex >
71+ < Center
72+ w = { isNotSmallerScreen ? '70%' : '100%' }
73+ mt = { isNotSmallerScreen ? '0' : '3' }
74+ >
75+ < InputField
76+ borderRadius = { 5 }
77+ variables = { variables }
78+ setVariables = { setVariables }
79+ inputType = { TextInputType . DATABASE_URL }
80+ isDisabled = { true }
81+ />
82+ </ Center >
83+ </ Flex >
84+ </ Stack >
85+ </ div >
86+ ) ;
8687} ;
8788
88- export default DatabaseCredentials ;
89+ export default DatabaseCredentials ;
0 commit comments