Add basic support for listing a server's databases

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