ui(admin): implement NewDatabaseContainer.tsx

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

@@ -30,7 +30,7 @@ export const Context = createContextStore<ctx>({
     }),
 });
 
-interface Values {
+export interface Values {
     name: string;
     host: string;
     port: number;
@@ -38,42 +38,33 @@ interface Values {
     password: string;
 }
 
-const EditInformationContainer = () => {
+export interface Params {
-    const history = useHistory();
+    title: string;
+    initialValues?: Values;
+    children?: React.ReactNode;
 
-    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    onSubmit: (values: Values, helpers: FormikHelpers<Values>) => void;
-
-    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>) => {
+export const InformationContainer = ({ title, initialValues, children, onSubmit }: Params) => {
-        clearFlashes('database');
+    const submit = (values: Values, helpers: FormikHelpers<Values>) => {
-
+        onSubmit(values, helpers);
-        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));
     };
 
+    if (!initialValues) {
+        initialValues = {
+            name: '',
+            host: '',
+            port: 3306,
+            username: '',
+            password: '',
+        };
+    }
+
     return (
         <Formik
             onSubmit={submit}
-            initialValues={{
+            initialValues={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),
@@ -85,7 +76,7 @@ const EditInformationContainer = () => {
             {
                 ({ isSubmitting, isValid }) => (
                     <React.Fragment>
-                        <AdminBox title={'Edit Database'} css={tw`relative`}>
+                        <AdminBox title={title} css={tw`relative`}>
                             <SpinnerOverlay visible={isSubmitting}/>
 
                             <Form css={tw`mb-0`}>
@@ -140,13 +131,7 @@ const EditInformationContainer = () => {
                                 </div>
 
                                 <div css={tw`w-full flex flex-row items-center mt-6`}>
-                                    <div css={tw`flex`}>
+                                    {children}
-                                        <DatabaseDeleteButton
-                                            databaseId={database.id}
-                                            onDeleted={() => history.push('/admin/databases')}
-                                        />
-                                    </div>
-
                                     <div css={tw`flex ml-auto`}>
                                         <Button type={'submit'} disabled={isSubmitting || !isValid}>
                                             Save
@@ -162,6 +147,54 @@ const EditInformationContainer = () => {
     );
 };
 
+const EditInformationContainer = () => {
+    const history = useHistory();
+
+    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 (
+        <InformationContainer
+            title={'Edit Database'}
+            initialValues={{
+                name: database.name,
+                host: database.host,
+                port: database.port,
+                username: database.username,
+                password: '',
+            }}
+            onSubmit={submit}
+        >
+            <div css={tw`flex`}>
+                <DatabaseDeleteButton
+                    databaseId={database.id}
+                    onDeleted={() => history.push('/admin/databases')}
+                />
+            </div>
+        </InformationContainer>
+    );
+};
+
 const DatabaseEditContainer = () => {
     const match = useRouteMatch<{ id?: string }>();
 

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

@@ -1,8 +1,31 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import createDatabase from '@/api/admin/databases/createDatabase';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { FormikHelpers } from 'formik';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { InformationContainer, Values } from '@/components/admin/databases/DatabaseEditContainer';
 
 export default () => {
+    const history = useHistory();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const submit = ({ name, host, port, username, password }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('database:create');
+
+        createDatabase(name, host, port, username, password)
+            .then(database => history.push(`/admin/databases/${database.id}`))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'database:create', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
     return (
         <AdminContentBlock title={'New Database'}>
             <div css={tw`w-full flex flex-row items-center mb-8`}>
@@ -11,6 +34,10 @@ export default () => {
                     <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new database host to the panel.</p>
                 </div>
             </div>
+
+            <FlashMessageRender byKey={'database:create'} css={tw`mb-4`}/>
+
+            <InformationContainer title={'Create Database'} onSubmit={submit}/>
         </AdminContentBlock>
     );
 };

resources/scripts/components/admin/nodes/NodeConfigurationContainer.tsx

@@ -35,7 +35,7 @@ export default () => {
             <AdminBox title={'Configuration'} icon={faCode} css={tw`mb-4`}>
                 <div css={tw`relative`}>
                     <div css={tw`absolute top-0 right-0`}>
-                        <CopyOnClick text={configuration} hideTextInToast={true}>
+                        <CopyOnClick text={configuration} hideTextInToast>
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`h-5 w-5 text-neutral-500 hover:text-neutral-400 cursor-pointer mt-1 mr-1`}>
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                             </svg>