From 4a234af7a30c0d53ec78ee8c8bf15e2d5db43ecc Mon Sep 17 00:00:00 2001
From: Charles Morgan <sir3lit@gmail.com>
Date: Sun, 8 Nov 2020 21:09:22 -0500
Subject: [PATCH] Minor changes

Changes CopyOnClick to allow any.
Allows database information to be copied on click.
Changes layouts on database/backups to match the network tab.
Changes text to lighten it one level from 400 to 300 for easier visibility.
Moves database api endpoints to their own folder for some organization.
---
 .../{ => databases}/createServerDatabase.ts   |  2 +-
 .../{ => databases}/deleteServerDatabase.ts   |  0
 .../{ => databases}/getServerDatabases.ts     |  0
 .../{ => databases}/rotateDatabasePassword.ts |  2 +-
 .../components/elements/CopyOnClick.tsx       |  2 +-
 .../server/backups/BackupContainer.tsx        | 22 +++++++-------
 .../server/databases/CreateDatabaseButton.tsx |  2 +-
 .../server/databases/DatabaseRow.tsx          | 29 ++++++++++---------
 .../server/databases/DatabasesContainer.tsx   | 22 +++++++-------
 .../server/databases/RotatePasswordButton.tsx |  4 +--
 .../server/schedules/ScheduleContainer.tsx    |  2 +-
 .../server/users/UsersContainer.tsx           |  2 +-
 resources/scripts/state/server/databases.ts   |  2 +-
 13 files changed, 47 insertions(+), 44 deletions(-)
 rename resources/scripts/api/server/{ => databases}/createServerDatabase.ts (94%)
 rename resources/scripts/api/server/{ => databases}/deleteServerDatabase.ts (100%)
 rename resources/scripts/api/server/{ => databases}/getServerDatabases.ts (100%)
 rename resources/scripts/api/server/{ => databases}/rotateDatabasePassword.ts (92%)

diff --git a/resources/scripts/api/server/createServerDatabase.ts b/resources/scripts/api/server/databases/createServerDatabase.ts
similarity index 94%
rename from resources/scripts/api/server/createServerDatabase.ts
rename to resources/scripts/api/server/databases/createServerDatabase.ts
index 90103337c..cf036f91f 100644
--- a/resources/scripts/api/server/createServerDatabase.ts
+++ b/resources/scripts/api/server/databases/createServerDatabase.ts
@@ -1,4 +1,4 @@
-import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases';
+import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import http from '@/api/http';
 
 export default (uuid: string, data: { connectionsFrom: string; databaseName: string }): Promise<ServerDatabase> => {
diff --git a/resources/scripts/api/server/deleteServerDatabase.ts b/resources/scripts/api/server/databases/deleteServerDatabase.ts
similarity index 100%
rename from resources/scripts/api/server/deleteServerDatabase.ts
rename to resources/scripts/api/server/databases/deleteServerDatabase.ts
diff --git a/resources/scripts/api/server/getServerDatabases.ts b/resources/scripts/api/server/databases/getServerDatabases.ts
similarity index 100%
rename from resources/scripts/api/server/getServerDatabases.ts
rename to resources/scripts/api/server/databases/getServerDatabases.ts
diff --git a/resources/scripts/api/server/rotateDatabasePassword.ts b/resources/scripts/api/server/databases/rotateDatabasePassword.ts
similarity index 92%
rename from resources/scripts/api/server/rotateDatabasePassword.ts
rename to resources/scripts/api/server/databases/rotateDatabasePassword.ts
index c6c9e8aef..0e0619a84 100644
--- a/resources/scripts/api/server/rotateDatabasePassword.ts
+++ b/resources/scripts/api/server/databases/rotateDatabasePassword.ts
@@ -1,4 +1,4 @@
-import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/getServerDatabases';
+import { rawDataToServerDatabase, ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import http from '@/api/http';
 
 export default (uuid: string, database: string): Promise<ServerDatabase> => {
diff --git a/resources/scripts/components/elements/CopyOnClick.tsx b/resources/scripts/components/elements/CopyOnClick.tsx
index f1914ed57..f7e2d4957 100644
--- a/resources/scripts/components/elements/CopyOnClick.tsx
+++ b/resources/scripts/components/elements/CopyOnClick.tsx
@@ -19,7 +19,7 @@ const Toast = styled.div`
     }
 `;
 
-const CopyOnClick: React.FC<{ text: string }> = ({ text, children }) => {
+const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
     const [ copied, setCopied ] = useState(false);
 
     useEffect(() => {
diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx
index b3bfdc945..493c059a5 100644
--- a/resources/scripts/components/server/backups/BackupContainer.tsx
+++ b/resources/scripts/components/server/backups/BackupContainer.tsx
@@ -34,7 +34,7 @@ export default () => {
         <ServerContentBlock title={'Backups'}>
             <FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
             {!backups.items.length ?
-                <p css={tw`text-center text-sm text-neutral-400`}>
+                <p css={tw`text-center text-sm text-neutral-300`}>
                     There are no backups stored for this server.
                 </p>
                 :
@@ -47,21 +47,21 @@ export default () => {
                 </div>
             }
             {backupLimit === 0 &&
-            <p css={tw`text-center text-sm text-neutral-400`}>
+            <p css={tw`text-center text-sm text-neutral-300`}>
                 Backups cannot be created for this server.
             </p>
             }
             <Can action={'backup.create'}>
-                {(backupLimit > 0 && backups.items.length > 0) &&
-                <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
-                    {backups.items.length} of {backupLimit} backups have been created for this server.
-                </p>
-                }
-                {backupLimit > 0 && backupLimit !== backups.items.length &&
-                <div css={tw`mt-6 flex justify-end`}>
-                    <CreateBackupButton/>
+                <div css={tw`mt-6 sm:flex items-center justify-end`}>
+                    {(backupLimit > 0 && backups.items.length > 0) &&
+                    <p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
+                        {backups.items.length} of {backupLimit} backups have been created for this server.
+                    </p>
+                    }
+                    {backupLimit > 0 && backupLimit !== backups.items.length &&
+                        <CreateBackupButton css={tw`w-full sm:w-auto`}/>
+                    }
                 </div>
-                }
             </Can>
         </ServerContentBlock>
     );
diff --git a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
index 044587e6e..2ce843365 100644
--- a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
+++ b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
@@ -3,7 +3,7 @@ import Modal from '@/components/elements/Modal';
 import { Form, Formik, FormikHelpers } from 'formik';
 import Field from '@/components/elements/Field';
 import { object, string } from 'yup';
-import createServerDatabase from '@/api/server/createServerDatabase';
+import createServerDatabase from '@/api/server/databases/createServerDatabase';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx
index 1175aef48..3eeaa981e 100644
--- a/resources/scripts/components/server/databases/DatabaseRow.tsx
+++ b/resources/scripts/components/server/databases/DatabaseRow.tsx
@@ -7,17 +7,18 @@ import Field from '@/components/elements/Field';
 import { object, string } from 'yup';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ServerContext } from '@/state/server';
-import deleteServerDatabase from '@/api/server/deleteServerDatabase';
+import deleteServerDatabase from '@/api/server/databases/deleteServerDatabase';
 import { httpErrorToHuman } from '@/api/http';
 import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
 import Can from '@/components/elements/Can';
-import { ServerDatabase } from '@/api/server/getServerDatabases';
+import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
 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';
+import CopyOnClick from '@/components/elements/CopyOnClick';
 
 interface Props {
     database: ServerDatabase;
@@ -113,7 +114,7 @@ export default ({ database, className }: Props) => {
                 <h3 css={tw`mb-6`}>Database connection details</h3>
                 <div>
                     <Label>Endpoint</Label>
-                    <Input type={'text'} readOnly value={database.connectionString} />
+                    <CopyOnClick text={database.connectionString}><Input type={'text'} readOnly value={database.connectionString} /></CopyOnClick>
                 </div>
                 <div css={tw`mt-6`}>
                     <Label>Connections from</Label>
@@ -121,21 +122,23 @@ export default ({ database, className }: Props) => {
                 </div>
                 <div css={tw`mt-6`}>
                     <Label>Username</Label>
-                    <Input type={'text'} readOnly value={database.username} />
+                    <CopyOnClick text={database.username}><Input type={'text'} readOnly value={database.username} /></CopyOnClick>
                 </div>
                 <Can action={'database.view_password'}>
                     <div css={tw`mt-6`}>
                         <Label>Password</Label>
-                        <Input type={'text'} readOnly value={database.password}/>
+                        <CopyOnClick text={database.password?.valueOf}><Input type={'text'} readOnly value={database.password}/></CopyOnClick>
                     </div>
                 </Can>
                 <div css={tw`mt-6`}>
                     <Label>JBDC Connection String</Label>
-                    <Input
-                        type={'text'}
-                        readOnly
-                        value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
-                    />
+                    <CopyOnClick text={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}>
+                        <Input
+                            type={'text'}
+                            readOnly
+                            value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
+                        />
+                    </CopyOnClick>
                 </div>
                 <div css={tw`mt-6 text-right`}>
                     <Can action={'database.update'}>
@@ -151,10 +154,10 @@ export default ({ database, className }: Props) => {
                     <FontAwesomeIcon icon={faDatabase} fixedWidth/>
                 </div>
                 <div css={tw`flex-1 ml-4`}>
-                    <p css={tw`text-lg`}>{database.name}</p>
+                    <CopyOnClick text={database.name}><p css={tw`text-lg`}>{database.name}</p></CopyOnClick>
                 </div>
                 <div css={tw`ml-8 text-center hidden md:block`}>
-                    <p css={tw`text-sm`}>{database.connectionString}</p>
+                    <CopyOnClick text={database.connectionString}><p css={tw`text-sm`}>{database.connectionString}</p></CopyOnClick>
                     <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p>
                 </div>
                 <div css={tw`ml-8 text-center hidden md:block`}>
@@ -162,7 +165,7 @@ export default ({ database, className }: Props) => {
                     <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p>
                 </div>
                 <div css={tw`ml-8 text-center hidden md:block`}>
-                    <p css={tw`text-sm`}>{database.username}</p>
+                    <CopyOnClick text={database.username}><p css={tw`text-sm`}>{database.username}</p></CopyOnClick>
                     <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p>
                 </div>
                 <div css={tw`ml-8`}>
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index 8ee4b3129..b61d8ed09 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import getServerDatabases from '@/api/server/getServerDatabases';
+import getServerDatabases from '@/api/server/databases/getServerDatabases';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -62,17 +62,17 @@ export default () => {
                             </p>
                         }
                         <Can action={'database.create'}>
-                            {(databaseLimit > 0 && databases.length > 0) &&
-                            <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
-                                {databases.length} of {databaseLimit} databases have been allocated to this
-                                server.
-                            </p>
-                            }
-                            {databaseLimit > 0 && databaseLimit !== databases.length &&
-                            <div css={tw`mt-6 flex justify-end`}>
-                                <CreateDatabaseButton/>
+                            <div css={tw`mt-6 sm:flex items-center justify-end`}>
+                                {(databaseLimit > 0 && databases.length > 0) &&
+                                <p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
+                                    {databases.length} of {databaseLimit} databases have been allocated to this
+                                    server.
+                                </p>
+                                }
+                                {databaseLimit > 0 && databaseLimit !== databases.length &&
+                                    <CreateDatabaseButton css={tw`w-full sm:w-auto`}/>
+                                }
                             </div>
-                            }
                         </Can>
                     </>
                 </Fade>
diff --git a/resources/scripts/components/server/databases/RotatePasswordButton.tsx b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
index 41c116006..68b1e532d 100644
--- a/resources/scripts/components/server/databases/RotatePasswordButton.tsx
+++ b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import rotateDatabasePassword from '@/api/server/rotateDatabasePassword';
+import rotateDatabasePassword from '@/api/server/databases/rotateDatabasePassword';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { ServerContext } from '@/state/server';
-import { ServerDatabase } from '@/api/server/getServerDatabases';
+import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
 import { httpErrorToHuman } from '@/api/http';
 import Button from '@/components/elements/Button';
 import tw from 'twin.macro';
diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
index 54a63a328..04c302917 100644
--- a/resources/scripts/components/server/schedules/ScheduleContainer.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
@@ -43,7 +43,7 @@ export default ({ match, history }: RouteComponentProps) => {
                 <>
                     {
                         schedules.length === 0 ?
-                            <p css={tw`text-sm text-center text-neutral-400`}>
+                            <p css={tw`text-sm text-center text-neutral-300`}>
                                 There are no schedules configured for this server.
                             </p>
                             :
diff --git a/resources/scripts/components/server/users/UsersContainer.tsx b/resources/scripts/components/server/users/UsersContainer.tsx
index f29dc9202..f5589f4a5 100644
--- a/resources/scripts/components/server/users/UsersContainer.tsx
+++ b/resources/scripts/components/server/users/UsersContainer.tsx
@@ -51,7 +51,7 @@ export default () => {
         <ServerContentBlock title={'Subusers'}>
             <FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
             {!subusers.length ?
-                <p css={tw`text-center text-sm text-neutral-400`}>
+                <p css={tw`text-center text-sm text-neutral-300`}>
                     It looks like you don&apos;t have any subusers.
                 </p>
                 :
diff --git a/resources/scripts/state/server/databases.ts b/resources/scripts/state/server/databases.ts
index 7fa697dbd..deee25ffb 100644
--- a/resources/scripts/state/server/databases.ts
+++ b/resources/scripts/state/server/databases.ts
@@ -1,5 +1,5 @@
 import { action, Action } from 'easy-peasy';
-import { ServerDatabase } from '@/api/server/getServerDatabases';
+import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
 
 export interface ServerDatabaseStore {
     data: ServerDatabase[];