@@ -7,17 +7,18 @@ import Field from '@/components/elements/Field';
77import { object , string } from 'yup' ;
88import FlashMessageRender from '@/components/FlashMessageRender' ;
99import { ServerContext } from '@/state/server' ;
10- import deleteServerDatabase from '@/api/server/deleteServerDatabase' ;
10+ import deleteServerDatabase from '@/api/server/databases/ deleteServerDatabase' ;
1111import { httpErrorToHuman } from '@/api/http' ;
1212import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton' ;
1313import Can from '@/components/elements/Can' ;
14- import { ServerDatabase } from '@/api/server/getServerDatabases' ;
14+ import { ServerDatabase } from '@/api/server/databases/ getServerDatabases' ;
1515import useFlash from '@/plugins/useFlash' ;
1616import tw from 'twin.macro' ;
1717import Button from '@/components/elements/Button' ;
1818import Label from '@/components/elements/Label' ;
1919import Input from '@/components/elements/Input' ;
2020import GreyRowBox from '@/components/elements/GreyRowBox' ;
21+ import CopyOnClick from '@/components/elements/CopyOnClick' ;
2122
2223interface Props {
2324 database : ServerDatabase ;
@@ -113,29 +114,31 @@ export default ({ database, className }: Props) => {
113114 < h3 css = { tw `mb-6` } > Database connection details</ h3 >
114115 < div >
115116 < Label > Endpoint</ Label >
116- < Input type = { 'text' } readOnly value = { database . connectionString } />
117+ < CopyOnClick text = { database . connectionString } > < Input type = { 'text' } readOnly value = { database . connectionString } /> </ CopyOnClick >
117118 </ div >
118119 < div css = { tw `mt-6` } >
119120 < Label > Connections from</ Label >
120121 < Input type = { 'text' } readOnly value = { database . allowConnectionsFrom } />
121122 </ div >
122123 < div css = { tw `mt-6` } >
123124 < Label > Username</ Label >
124- < Input type = { 'text' } readOnly value = { database . username } />
125+ < CopyOnClick text = { database . username } > < Input type = { 'text' } readOnly value = { database . username } /> </ CopyOnClick >
125126 </ div >
126127 < Can action = { 'database.view_password' } >
127128 < div css = { tw `mt-6` } >
128129 < Label > Password</ Label >
129- < Input type = { 'text' } readOnly value = { database . password } />
130+ < CopyOnClick text = { database . password ?. valueOf } > < Input type = { 'text' } readOnly value = { database . password } /> </ CopyOnClick >
130131 </ div >
131132 </ Can >
132133 < div css = { tw `mt-6` } >
133134 < Label > JBDC Connection String</ Label >
134- < Input
135- type = { 'text' }
136- readOnly
137- value = { `jdbc:mysql://${ database . username } :${ database . password } @${ database . connectionString } /${ database . name } ` }
138- />
135+ < CopyOnClick text = { `jdbc:mysql://${ database . username } :${ database . password } @${ database . connectionString } /${ database . name } ` } >
136+ < Input
137+ type = { 'text' }
138+ readOnly
139+ value = { `jdbc:mysql://${ database . username } :${ database . password } @${ database . connectionString } /${ database . name } ` }
140+ />
141+ </ CopyOnClick >
139142 </ div >
140143 < div css = { tw `mt-6 text-right` } >
141144 < Can action = { 'database.update' } >
@@ -151,18 +154,18 @@ export default ({ database, className }: Props) => {
151154 < FontAwesomeIcon icon = { faDatabase } fixedWidth />
152155 </ div >
153156 < div css = { tw `flex-1 ml-4` } >
154- < p css = { tw `text-lg` } > { database . name } </ p >
157+ < CopyOnClick text = { database . name } > < p css = { tw `text-lg` } > { database . name } </ p > </ CopyOnClick >
155158 </ div >
156159 < div css = { tw `ml-8 text-center hidden md:block` } >
157- < p css = { tw `text-sm` } > { database . connectionString } </ p >
160+ < CopyOnClick text = { database . connectionString } > < p css = { tw `text-sm` } > { database . connectionString } </ p > </ CopyOnClick >
158161 < p css = { tw `mt-1 text-2xs text-neutral-500 uppercase select-none` } > Endpoint</ p >
159162 </ div >
160163 < div css = { tw `ml-8 text-center hidden md:block` } >
161164 < p css = { tw `text-sm` } > { database . allowConnectionsFrom } </ p >
162165 < p css = { tw `mt-1 text-2xs text-neutral-500 uppercase select-none` } > Connections from</ p >
163166 </ div >
164167 < div css = { tw `ml-8 text-center hidden md:block` } >
165- < p css = { tw `text-sm` } > { database . username } </ p >
168+ < CopyOnClick text = { database . username } > < p css = { tw `text-sm` } > { database . username } </ p > </ CopyOnClick >
166169 < p css = { tw `mt-1 text-2xs text-neutral-500 uppercase select-none` } > Username</ p >
167170 </ div >
168171 < div css = { tw `ml-8` } >
0 commit comments