From 7e8a5f12713d36850026f1484dd4a1cb6c65c898 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 17:15:49 -0700
Subject: [PATCH] Update database screens

---
 .../components/elements/GreyRowBox.tsx        |   6 +-
 .../server/databases/CreateDatabaseButton.tsx |  31 +++---
 .../server/databases/DatabaseRow.tsx          | 102 +++++++++---------
 .../server/databases/DatabasesContainer.tsx   |  20 ++--
 .../server/databases/RotatePasswordButton.tsx |   3 +-
 5 files changed, 86 insertions(+), 76 deletions(-)

diff --git a/resources/scripts/components/elements/GreyRowBox.tsx b/resources/scripts/components/elements/GreyRowBox.tsx
index e33dae6ca..e86c61dc2 100644
--- a/resources/scripts/components/elements/GreyRowBox.tsx
+++ b/resources/scripts/components/elements/GreyRowBox.tsx
@@ -1,12 +1,10 @@
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 
-export default styled.div`
+export default styled.div<{ $hoverable?: boolean }>`
     ${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150`};
     
-    &:not(.no-hover):hover {
-        ${tw`border-neutral-500`};
-    }
+    ${props => props.$hoverable !== false && tw`hover:border-neutral-500`};
 
     & > div.icon {
         ${tw`rounded-full bg-neutral-500 p-3`};
diff --git a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
index cf5b8c63d..2b035ce2c 100644
--- a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
+++ b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
@@ -9,6 +9,8 @@ import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
 import useServer from '@/plugins/useServer';
+import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
 
 interface Values {
     databaseName: string;
@@ -48,7 +50,7 @@ export default () => {
     };
 
     return (
-        <React.Fragment>
+        <>
             <Formik
                 onSubmit={submit}
                 initialValues={{ databaseName: '', connectionsFrom: '%' }}
@@ -65,9 +67,9 @@ export default () => {
                                 setVisible(false);
                             }}
                         >
-                            <FlashMessageRender byKey={'database:create'} className={'mb-6'}/>
-                            <h3 className={'mb-6'}>Create new database</h3>
-                            <Form className={'m-0'}>
+                            <FlashMessageRender byKey={'database:create'} css={tw`mb-6`}/>
+                            <h2 css={tw`text-2xl mb-6`}>Create new database</h2>
+                            <Form css={tw`m-0`}>
                                 <Field
                                     type={'string'}
                                     id={'database_name'}
@@ -75,7 +77,7 @@ export default () => {
                                     label={'Database Name'}
                                     description={'A descriptive name for your database instance.'}
                                 />
-                                <div className={'mt-6'}>
+                                <div css={tw`mt-6`}>
                                     <Field
                                         type={'string'}
                                         id={'connections_from'}
@@ -84,26 +86,27 @@ export default () => {
                                         description={'Where connections should be allowed from. Use % for wildcards.'}
                                     />
                                 </div>
-                                <div className={'mt-6 text-right'}>
-                                    <button
+                                <div css={tw`mt-6 text-right`}>
+                                    <Button
                                         type={'button'}
-                                        className={'btn btn-sm btn-secondary mr-2'}
+                                        isSecondary
+                                        css={tw`mr-2`}
                                         onClick={() => setVisible(false)}
                                     >
                                         Cancel
-                                    </button>
-                                    <button className={'btn btn-sm btn-primary'} type={'submit'}>
+                                    </Button>
+                                    <Button type={'submit'}>
                                         Create Database
-                                    </button>
+                                    </Button>
                                 </div>
                             </Form>
                         </Modal>
                     )
                 }
             </Formik>
-            <button className={'btn btn-primary btn-sm'} onClick={() => setVisible(true)}>
+            <Button onClick={() => setVisible(true)}>
                 New Database
-            </button>
-        </React.Fragment>
+            </Button>
+        </>
     );
 };
diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx
index 9adc38519..68559e6ca 100644
--- a/resources/scripts/components/server/databases/DatabaseRow.tsx
+++ b/resources/scripts/components/server/databases/DatabaseRow.tsx
@@ -17,6 +17,11 @@ import Can from '@/components/elements/Can';
 import { ServerDatabase } from '@/api/server/getServerDatabases';
 import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import Label from '@/components/elements/Label';
+import Input from '@/components/elements/Input';
+import GreyRowBox from '@/components/elements/GreyRowBox';
 
 interface Props {
     database: ServerDatabase;
@@ -51,13 +56,14 @@ export default ({ database, className }: Props) => {
                 addError({ key: 'database:delete', message: httpErrorToHuman(error) });
             });
     };
-    
+
     return (
-        <React.Fragment>
+        <>
             <Formik
                 onSubmit={submit}
                 initialValues={{ confirm: '' }}
                 validationSchema={schema}
+                isInitialValid={false}
             >
                 {
                     ({ isSubmitting, isValid, resetForm }) => (
@@ -70,13 +76,13 @@ export default ({ database, className }: Props) => {
                                 resetForm();
                             }}
                         >
-                            <FlashMessageRender byKey={'database:delete'} className={'mb-6'}/>
-                            <h3 className={'mb-6'}>Confirm database deletion</h3>
-                            <p className={'text-sm'}>
+                            <FlashMessageRender byKey={'database:delete'} css={tw`mb-6`}/>
+                            <h2 css={tw`text-2xl mb-6`}>Confirm database deletion</h2>
+                            <p css={tw`text-sm`}>
                                 Deleting a database is a permanent action, it cannot be undone. This will permanetly
                                 delete the <strong>{database.name}</strong> database and remove all associated data.
                             </p>
-                            <Form className={'m-0 mt-6'}>
+                            <Form css={tw`m-0 mt-6`}>
                                 <Field
                                     type={'text'}
                                     id={'confirm_name'}
@@ -84,21 +90,22 @@ export default ({ database, className }: Props) => {
                                     label={'Confirm Database Name'}
                                     description={'Enter the database name to confirm deletion.'}
                                 />
-                                <div className={'mt-6 text-right'}>
-                                    <button
+                                <div css={tw`mt-6 text-right`}>
+                                    <Button
                                         type={'button'}
-                                        className={'btn btn-sm btn-secondary mr-2'}
+                                        isSecondary
+                                        css={tw`mr-2`}
                                         onClick={() => setVisible(false)}
                                     >
                                         Cancel
-                                    </button>
-                                    <button
+                                    </Button>
+                                    <Button
                                         type={'submit'}
-                                        className={'btn btn-sm btn-red'}
+                                        color={'red'}
                                         disabled={!isValid}
                                     >
                                         Delete Database
-                                    </button>
+                                    </Button>
                                 </div>
                             </Form>
                         </Modal>
@@ -106,62 +113,61 @@ export default ({ database, className }: Props) => {
                 }
             </Formik>
             <Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
-                <FlashMessageRender byKey={'database-connection-modal'} className={'mb-6'}/>
-                <h3 className={'mb-6'}>Database connection details</h3>
+                <FlashMessageRender byKey={'database-connection-modal'} css={tw`mb-6`}/>
+                <h3 css={tw`mb-6`}>Database connection details</h3>
                 <Can action={'database.view_password'}>
                     <div>
-                        <label className={'input-dark-label'}>Password</label>
-                        <input type={'text'} className={'input-dark'} readOnly={true} value={database.password}/>
+                        <Label>Password</Label>
+                        <Input type={'text'} readOnly value={database.password}/>
                     </div>
                 </Can>
-                <div className={'mt-6'}>
-                    <label className={'input-dark-label'}>JBDC Connection String</label>
-                    <input
+                <div css={tw`mt-6`}>
+                    <Label>JBDC Connection String</Label>
+                    <Input
                         type={'text'}
-                        className={'input-dark'}
-                        readOnly={true}
+                        readOnly
                         value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
                     />
                 </div>
-                <div className={'mt-6 text-right'}>
+                <div css={tw`mt-6 text-right`}>
                     <Can action={'database.update'}>
                         <RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase}/>
                     </Can>
-                    <button className={'btn btn-sm btn-secondary'} onClick={() => setConnectionVisible(false)}>
+                    <Button isSecondary onClick={() => setConnectionVisible(false)}>
                         Close
-                    </button>
+                    </Button>
                 </div>
             </Modal>
-            <div className={classNames('grey-row-box no-hover', className)}>
-                <div className={'icon'}>
-                    <FontAwesomeIcon icon={faDatabase} fixedWidth={true}/>
+            <GreyRowBox $hoverable={false} className={className}>
+                <div>
+                    <FontAwesomeIcon icon={faDatabase} fixedWidth/>
                 </div>
-                <div className={'flex-1 ml-4'}>
-                    <p className={'text-lg'}>{database.name}</p>
+                <div css={tw`flex-1 ml-4`}>
+                    <p css={tw`text-lg`}>{database.name}</p>
                 </div>
-                <div className={'ml-8 text-center'}>
-                    <p className={'text-sm'}>{database.connectionString}</p>
-                    <p className={'mt-1 text-2xs text-neutral-500 uppercase select-none'}>Endpoint</p>
+                <div css={tw`ml-8 text-center`}>
+                    <p css={tw`text-sm`}>{database.connectionString}</p>
+                    <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p>
                 </div>
-                <div className={'ml-8 text-center'}>
-                    <p className={'text-sm'}>{database.allowConnectionsFrom}</p>
-                    <p className={'mt-1 text-2xs text-neutral-500 uppercase select-none'}>Connections from</p>
+                <div css={tw`ml-8 text-center`}>
+                    <p css={tw`text-sm`}>{database.allowConnectionsFrom}</p>
+                    <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p>
                 </div>
-                <div className={'ml-8 text-center'}>
-                    <p className={'text-sm'}>{database.username}</p>
-                    <p className={'mt-1 text-2xs text-neutral-500 uppercase select-none'}>Username</p>
+                <div css={tw`ml-8 text-center`}>
+                    <p css={tw`text-sm`}>{database.username}</p>
+                    <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p>
                 </div>
-                <div className={'ml-8'}>
-                    <button className={'btn btn-sm btn-secondary mr-2'} onClick={() => setConnectionVisible(true)}>
-                        <FontAwesomeIcon icon={faEye} fixedWidth={true}/>
-                    </button>
+                <div css={tw`ml-8`}>
+                    <Button isSecondary css={tw`mr-2`} onClick={() => setConnectionVisible(true)}>
+                        <FontAwesomeIcon icon={faEye} fixedWidth/>
+                    </Button>
                     <Can action={'database.delete'}>
-                        <button className={'btn btn-sm btn-secondary btn-red'} onClick={() => setVisible(true)}>
-                            <FontAwesomeIcon icon={faTrashAlt} fixedWidth={true}/>
-                        </button>
+                        <Button color={'red'} isSecondary onClick={() => setVisible(true)}>
+                            <FontAwesomeIcon icon={faTrashAlt} fixedWidth/>
+                        </Button>
                     </Can>
                 </div>
-            </div>
-        </React.Fragment>
+            </GreyRowBox>
+        </>
     );
 };
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index 9213347f0..90db7c27c 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -11,6 +11,8 @@ import Can from '@/components/elements/Can';
 import useFlash from '@/plugins/useFlash';
 import useServer from '@/plugins/useServer';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
+import Fade from '@/components/elements/Fade';
 
 export default () => {
     const { uuid, featureLimits } = useServer();
@@ -35,11 +37,11 @@ export default () => {
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'databases'} className={'mb-4'}/>
+            <FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
             {(!databases.length && loading) ?
-                <Spinner size={'large'} centered={true}/>
+                <Spinner size={'large'} centered/>
                 :
-                <CSSTransition classNames={'fade'} timeout={250}>
+                <Fade timeout={250}>
                     <>
                         {databases.length > 0 ?
                             databases.map((database, index) => (
@@ -50,28 +52,28 @@ export default () => {
                                 />
                             ))
                             :
-                            <p className={'text-center text-sm text-neutral-400'}>
+                            <p css={tw`text-center text-sm text-neutral-400`}>
                                 {featureLimits.databases > 0 ?
-                                    `It looks like you have no databases.`
+                                    'It looks like you have no databases.'
                                     :
-                                    `Databases cannot be created for this server.`
+                                    'Databases cannot be created for this server.'
                                 }
                             </p>
                         }
                         <Can action={'database.create'}>
                             {(featureLimits.databases > 0 && databases.length > 0) &&
-                            <p className="text-center text-xs text-neutral-400 mt-2">
+                            <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
                                 {databases.length} of {featureLimits.databases} databases have been allocated to this server.
                             </p>
                             }
                             {featureLimits.databases > 0 && featureLimits.databases !== databases.length &&
-                            <div className={'mt-6 flex justify-end'}>
+                            <div css={tw`mt-6 flex justify-end`}>
                                 <CreateDatabaseButton/>
                             </div>
                             }
                         </Can>
                     </>
-                </CSSTransition>
+                </Fade>
             }
         </PageContentBlock>
     );
diff --git a/resources/scripts/components/server/databases/RotatePasswordButton.tsx b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
index fdb31a1e2..41c116006 100644
--- a/resources/scripts/components/server/databases/RotatePasswordButton.tsx
+++ b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
@@ -6,6 +6,7 @@ import { ServerContext } from '@/state/server';
 import { ServerDatabase } from '@/api/server/getServerDatabases';
 import { httpErrorToHuman } from '@/api/http';
 import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
 
 export default ({ databaseId, onUpdate }: {
     databaseId: string;
@@ -38,7 +39,7 @@ export default ({ databaseId, onUpdate }: {
     };
 
     return (
-        <Button className={'btn-secondary mr-2'} onClick={rotate} isLoading={loading}>
+        <Button isSecondary color={'primary'} css={tw`mr-2`} onClick={rotate} isLoading={loading}>
             Rotate Password
         </Button>
     );