Add basic support for listing a server's databases

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -9,8 +9,8 @@ import { Link } from 'react-router-dom';
 
 export default () => (
     <div className={'my-10'}>
-        <Link to={'/server/e9d6c836'} className={'flex no-underline text-neutral-200 cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
-            <div className={'rounded-full bg-neutral-500 p-3'}>
+        <Link to={'/server/e9d6c836'} className={'grey-row-box cursor-pointer'}>
+            <div className={'icon'}>
                 <FontAwesomeIcon icon={faServer}/>
             </div>
             <div className={'w-1/2 ml-4'}>
@@ -49,8 +49,8 @@ export default () => (
                 </div>
             </div>
         </Link>
-        <div className={'flex mt-px cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
-            <div className={'rounded-full bg-neutral-500 p-3'}>
+        <div className={'grey-row-box cursor-pointer mt-2'}>
+            <div className={'icon'}>
                 <FontAwesomeIcon icon={faServer}/>
             </div>
             <div className={'w-1/2 ml-4'}>

resources/scripts/components/elements/Spinner.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export default ({ large }: { large?: boolean }) => (
-    <div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
+export default ({ large, centered }: { large?: boolean; centered?: boolean }) => (
+    centered ?
+        <div className={classNames('flex justify-center', { 'm-20': large, 'm-6': !large })}>
+            <div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
+        </div>
+        :
+        <div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
 );

resources/scripts/components/server/ServerDatabases.tsx

@@ -1,24 +0,0 @@
-import React, { useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
-import getServerDatabases from '@/api/server/getServerDatabases';
-import { useStoreState } from 'easy-peasy';
-
-export default () => {
-    useEffect(() => {
-        getServerDatabases('s');
-    }, []);
-
-    return (
-        <div className={'my-10'}>
-            <div className={'flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
-                <div className={'rounded-full bg-neutral-500 p-3'}>
-                    <FontAwesomeIcon icon={faDatabase}/>
-                </div>
-                <div className={'w-1/2 ml-4'}>
-                    <p className={'text-lg'}>sfgsfgd</p>
-                </div>
-            </div>
-        </div>
-    );
-};

resources/scripts/components/server/databases/DatabaseRow.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ServerDatabase } from '@/api/server/getServerDatabases';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
+
+export default ({ database }: { database: ServerDatabase }) => {
+    return (
+        <div className={'grey-row-box no-hover'}>
+            <div className={'icon'}>
+                <FontAwesomeIcon icon={faDatabase}/>
+            </div>
+            <div className={'flex-1 ml-4'}>
+                <p className={'text-lg'}>{database.name}</p>
+            </div>
+            <div className={'ml-6'}>
+                <p className={'text-center text-xs text-neutral-500 uppercase mb-1 select-none'}>Endpoint:</p>
+                <p className={'text-center text-sm'}>{database.connectionString}</p>
+            </div>
+            <div className={'ml-6'}>
+                <p className={'text-center text-xs text-neutral-500 uppercase mb-1 select-none'}>Connections From:</p>
+                <p className={'text-center text-sm'}>{database.allowConnectionsFrom}</p>
+            </div>
+            <div className={'ml-6'}>
+                <p className={'text-center text-xs text-neutral-500 uppercase mb-1 select-none'}>Username:</p>
+                <p className={'text-center text-sm'}>{database.username}</p>
+            </div>
+            <div className={'ml-6'}>
+                <button className={'btn btn-sm btn-secondary mr-2'}>
+                    <FontAwesomeIcon icon={faEye}/>
+                </button>
+                <button className={'btn btn-sm btn-secondary btn-red'}>
+                    <FontAwesomeIcon icon={faTrashAlt}/>
+                </button>
+            </div>
+        </div>
+    );
+};

resources/scripts/components/server/databases/DatabasesContainer.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import getServerDatabases, { ServerDatabase } from '@/api/server/getServerDatabases';
+import { ServerContext } from '@/state/server';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import { httpErrorToHuman } from '@/api/http';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import DatabaseRow from '@/components/server/databases/DatabaseRow';
+import Spinner from '@/components/elements/Spinner';
+import { CSSTransition } from 'react-transition-group';
+
+export default () => {
+    const [ loading, setLoading ] = useState(true);
+    const [ databases, setDatabases ] = useState<ServerDatabase[]>([]);
+    const server = ServerContext.useStoreState(state => state.server.data!);
+    const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    useEffect(() => {
+        clearFlashes('databases');
+        getServerDatabases(server.uuid)
+            .then(databases => {
+                setDatabases(databases);
+                setLoading(false);
+            })
+            .catch(error => addFlash({
+                key: 'databases',
+                title: 'Error',
+                message: httpErrorToHuman(error),
+                type: 'error',
+            }));
+    }, []);
+
+    return (
+        <div className={'my-10'}>
+            <FlashMessageRender byKey={'databases'}/>
+            {loading ?
+                <Spinner large={true} centered={true}/>
+                :
+                <CSSTransition classNames={'fade'} timeout={250}>
+                    <React.Fragment>
+                        {databases.length > 0 ?
+                            databases.map(database => <DatabaseRow key={database.id} database={database}/>)
+                            :
+                            <p className={'text-sm text-neutral-200'}>No databases. :(</p>
+                        }
+                    </React.Fragment>
+                </CSSTransition>
+            }
+        </div>
+    );
+};

resources/scripts/routers/ServerRouter.tsx

@@ -5,9 +5,9 @@ import ServerConsole from '@/components/server/ServerConsole';
 import TransitionRouter from '@/TransitionRouter';
 import Spinner from '@/components/elements/Spinner';
 import WebsocketHandler from '@/components/server/WebsocketHandler';
-import ServerDatabases from '@/components/server/ServerDatabases';
 import { ServerContext } from '@/state/server';
 import { Provider } from 'react-redux';
+import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const server = ServerContext.useStoreState(state => state.server.data);
@@ -45,7 +45,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                 <WebsocketHandler/>
                                 <Switch location={location}>
                                     <Route path={`${match.path}`} component={ServerConsole} exact/>
-                                    <Route path={`${match.path}/databases`} component={ServerDatabases}/>
+                                    <Route path={`${match.path}/databases`} component={DatabasesContainer}/>
                                 </Switch>
                             </React.Fragment>
                         }