Merge branch 'develop' into develop

app/Http/Middleware/Api/AuthenticateIPAccess.php

@@ -29,7 +29,7 @@ class AuthenticateIPAccess
         }
 
         $find = new IP($request->ip());
-        foreach (json_decode($model->allowed_ips) as $ip) {
+        foreach ($model->allowed_ips as $ip) {
             if (Range::parse($ip)->contains($find)) {
                 return $next($request);
             }

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> => {

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> => {

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(() => {

resources/scripts/components/server/Console.tsx

@@ -80,12 +80,16 @@ export default () => {
         TERMINAL_PRELUDE + 'Server marked as ' + state + '...\u001b[0m',
     );
 
-    const handleCommandKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const handleCommandKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'ArrowUp') {
             const newIndex = Math.min(historyIndex + 1, history!.length - 1);
 
             setHistoryIndex(newIndex);
             e.currentTarget.value = history![newIndex] || '';
+
+            // By default up arrow will also bring the cursor to the start of the line,
+            // so we'll preventDefault to keep it at the end.
+            e.preventDefault();
         }
 
         if (e.key === 'ArrowDown') {
@@ -185,7 +189,7 @@ export default () => {
                         type={'text'}
                         disabled={!instance || !connected}
                         css={tw`bg-transparent text-neutral-100 p-2 pl-0 w-full`}
-                        onKeyDown={e => handleCommandKeydown(e)}
+                        onKeyDown={handleCommandKeyDown}
                     />
                 </div>
             </div>

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>
     );

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';

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`}>

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>

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';

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -45,7 +45,7 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
             </div>
             :
             <NavLink
-                to={`${match.url}/${file.isFile ? 'edit/' : ''}#${destination}`}
+                to={`${match.url}${file.isFile ? '/edit' : ''}#${destination}`}
                 css={tw`flex flex-1 text-neutral-300 no-underline p-3 overflow-hidden truncate`}
                 onClick={onRowClick}
             >

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>
                             :

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>
                 :

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[];

tests/Unit/Http/Middleware/Api/AuthenticateIPAccessTest.php

@@ -26,7 +26,7 @@ class AuthenticateIPAccessTest extends MiddlewareTestCase
      */
     public function testWithValidIP()
     {
-        $model = factory(ApiKey::class)->make(['allowed_ips' => '["127.0.0.1"]']);
+        $model = factory(ApiKey::class)->make(['allowed_ips' => ['127.0.0.1']]);
         $this->setRequestAttribute('api_key', $model);
 
         $this->request->shouldReceive('ip')->withNoArgs()->once()->andReturn('127.0.0.1');
@@ -39,7 +39,7 @@ class AuthenticateIPAccessTest extends MiddlewareTestCase
      */
     public function testValidIPAgainstCIDRRange()
     {
-        $model = factory(ApiKey::class)->make(['allowed_ips' => '["192.168.1.1/28"]']);
+        $model = factory(ApiKey::class)->make(['allowed_ips' => ['192.168.1.1/28']]);
         $this->setRequestAttribute('api_key', $model);
 
         $this->request->shouldReceive('ip')->withNoArgs()->once()->andReturn('192.168.1.15');
@@ -55,7 +55,7 @@ class AuthenticateIPAccessTest extends MiddlewareTestCase
     {
         $this->expectException(AccessDeniedHttpException::class);
 
-        $model = factory(ApiKey::class)->make(['allowed_ips' => '["127.0.0.1"]']);
+        $model = factory(ApiKey::class)->make(['allowed_ips' => ['127.0.0.1']]);
         $this->setRequestAttribute('api_key', $model);
 
         $this->request->shouldReceive('ip')->withNoArgs()->twice()->andReturn('127.0.0.2');