admin(ui): implement DatabaseEditContainer.tsx

app/Http/Controllers/Api/Application/Databases/DatabaseController.php

@@ -5,6 +5,8 @@ namespace Pterodactyl\Http\Controllers\Api\Application\Databases;
 use Illuminate\Http\JsonResponse;
 use Pterodactyl\Models\DatabaseHost;
 use Spatie\QueryBuilder\QueryBuilder;
+use Pterodactyl\Services\Databases\Hosts\HostUpdateService;
+use Pterodactyl\Services\Databases\Hosts\HostCreationService;
 use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
 use Pterodactyl\Transformers\Api\Application\DatabaseHostTransformer;
 use Pterodactyl\Http\Controllers\Api\Application\ApplicationApiController;
@@ -17,11 +19,27 @@ use Pterodactyl\Http\Requests\Api\Application\Databases\DeleteDatabaseRequest;
 class DatabaseController extends ApplicationApiController
 {
     /**
-     * DatabaseController constructor.
+     * @var \Pterodactyl\Services\Databases\Hosts\HostCreationService
      */
-    public function __construct()
+    private $creationService;
+
+    /**
+     * @var \Pterodactyl\Services\Databases\Hosts\HostUpdateService
+     */
+    private $updateService;
+
+    /**
+     * DatabaseController constructor.
+     *
+     * @param \Pterodactyl\Services\Databases\Hosts\HostCreationService $creationService
+     * @param \Pterodactyl\Services\Databases\Hosts\HostUpdateService $updateService
+     */
+    public function __construct(HostCreationService $creationService, HostUpdateService $updateService)
     {
         parent::__construct();
+
+        $this->creationService = $creationService;
+        $this->updateService = $updateService;
     }
 
     /**
@@ -73,11 +91,11 @@ class DatabaseController extends ApplicationApiController
      * @param \Pterodactyl\Http\Requests\Api\Application\Databases\StoreDatabaseRequest $request
      *
      * @return \Illuminate\Http\JsonResponse
-     * @throws \Illuminate\Contracts\Container\BindingResolutionException
+     * @throws \Throwable
      */
     public function store(StoreDatabaseRequest $request): JsonResponse
     {
-        $databaseHost = DatabaseHost::query()->create($request->validated());
+        $databaseHost = $this->creationService->handle($request->validated());
 
         return $this->fractal->item($databaseHost)
             ->transformWith($this->getTransformer(DatabaseHostTransformer::class))
@@ -91,11 +109,11 @@ class DatabaseController extends ApplicationApiController
      * @param \Pterodactyl\Models\DatabaseHost $databaseHost
      *
      * @return array
-     * @throws \Illuminate\Contracts\Container\BindingResolutionException
+     * @throws \Throwable
      */
     public function update(UpdateDatabaseRequest $request, DatabaseHost $databaseHost): array
     {
-        $databaseHost->update($request->validated());
+        $databaseHost = $this->updateService->handle($databaseHost->id, $request->validated());
 
         return $this->fractal->item($databaseHost)
             ->transformWith($this->getTransformer(DatabaseHostTransformer::class))

resources/scripts/api/admin/databases/createDatabase.ts

@@ -1,10 +1,10 @@
 import http from '@/api/http';
 import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
 
-export default (name: string): Promise<Database> => {
+export default (name: string, host: string, port: number, username: string, password: string): Promise<Database> => {
     return new Promise((resolve, reject) => {
         http.post('/api/application/databases', {
-            name,
+            name, host, port, username, password,
         })
             .then(({ data }) => resolve(rawDataToDatabase(data)))
             .catch(reject);

resources/scripts/api/admin/databases/updateDatabase.ts

@@ -0,0 +1,12 @@
+import http from '@/api/http';
+import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
+
+export default (id: number, name: string, host: string, port: number, username: string, password?: string | undefined): Promise<Database> => {
+    return new Promise((resolve, reject) => {
+        http.patch(`/api/application/databases/${id}`, {
+            name, host, port, username, password,
+        })
+            .then(({ data }) => resolve(rawDataToDatabase(data)))
+            .catch(reject);
+    });
+};

resources/scripts/components/admin/databases/DatabaseEditContainer.tsx

@@ -8,6 +8,13 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ApplicationStore } from '@/state';
+import { number, object, string } from 'yup';
+import AdminBox from '@/components/admin/AdminBox';
+import Button from '@/components/elements/Button';
+import Field from '@/components/elements/Field';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { Form, Formik, FormikHelpers } from 'formik';
+import updateDatabase from '@/api/admin/databases/updateDatabase';
 
 interface ctx {
     database: Database | undefined;
@@ -22,6 +29,125 @@ export const Context = createContextStore<ctx>({
     }),
 });
 
+interface Values {
+    name: string;
+    host: string;
+    port: number;
+    username: string;
+    password: string;
+}
+
+const EditInformationContainer = () => {
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const database = Context.useStoreState(state => state.database);
+    const setDatabase = Context.useStoreActions(actions => actions.setDatabase);
+
+    if (database === undefined) {
+        return (
+            <></>
+        );
+    }
+
+    const submit = ({ name, host, port, username, password }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('database');
+
+        updateDatabase(database.id, name, host, port, username, password || undefined)
+            .then(() => setDatabase({ ...database, name, host, port, username }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'database', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: database.name,
+                host: database.host,
+                port: database.port,
+                username: database.username,
+                password: '',
+            }}
+            validationSchema={object().shape({
+                name: string().required().max(191),
+                host: string().max(255),
+                port: number().min(2).max(65534),
+                username: string().min(1).max(32),
+                password: string(),
+            })}
+        >
+            {
+                ({ isSubmitting, isValid }) => (
+                    <React.Fragment>
+                        <AdminBox title={'Edit Database'} css={tw`relative`}>
+                            <SpinnerOverlay visible={isSubmitting}/>
+
+                            <Form css={tw`mb-0`}>
+                                <div>
+                                    <Field
+                                        id={'name'}
+                                        name={'name'}
+                                        label={'Name'}
+                                        type={'text'}
+                                    />
+                                </div>
+
+                                <div css={tw`w-full flex flex-row mt-6`}>
+                                    <div css={tw`w-full flex flex-col mr-4`}>
+                                        <Field
+                                            id={'host'}
+                                            name={'host'}
+                                            label={'Host'}
+                                            type={'text'}
+                                        />
+                                    </div>
+
+                                    <div css={tw`w-full flex flex-col ml-4`}>
+                                        <Field
+                                            id={'port'}
+                                            name={'port'}
+                                            label={'Port'}
+                                            type={'text'}
+                                        />
+                                    </div>
+                                </div>
+
+                                <div css={tw`w-full flex flex-row mt-6`}>
+                                    <div css={tw`w-full flex flex-col mr-4`}>
+                                        <Field
+                                            id={'username'}
+                                            name={'username'}
+                                            label={'Username'}
+                                            type={'text'}
+                                        />
+                                    </div>
+
+                                    <div css={tw`w-full flex flex-col ml-4`}>
+                                        <Field
+                                            id={'password'}
+                                            name={'password'}
+                                            label={'Password'}
+                                            type={'password'}
+                                        />
+                                    </div>
+                                </div>
+
+                                <div css={tw`mt-6 text-right`}>
+                                    <Button type={'submit'} disabled={isSubmitting || !isValid}>
+                                        Save
+                                    </Button>
+                                </div>
+                            </Form>
+                        </AdminBox>
+                    </React.Fragment>
+                )
+            }
+        </Formik>
+    );
+};
+
 const DatabaseEditContainer = () => {
     const match = useRouteMatch<{ id?: string }>();
 
@@ -65,6 +191,8 @@ const DatabaseEditContainer = () => {
             </div>
 
             <FlashMessageRender byKey={'database'} css={tw`mb-4`}/>
+
+            <EditInformationContainer/>
         </AdminContentBlock>
     );
 };