ui(admin): add new egg variable option

2021-10-03 15:51:35 -06:00 · 2021-10-03 15:51:35 -06:00 · b2aa05dc07
commit b2aa05dc07
parent 1eed25dcc7
8 changed files with 168 additions and 102 deletions
--- a/resources/scripts/api/admin/eggs/createEggVariable.ts
+++ b/resources/scripts/api/admin/eggs/createEggVariable.ts
@ -4,7 +4,7 @@ import { EggVariable, rawDataToEggVariable } from '@/api/admin/eggs/getEgg';
 export default (eggId: number, variable: Omit<EggVariable, 'id' | 'eggId' | 'createdAt' | 'updatedAt'>): Promise<EggVariable> => {
    return new Promise((resolve, reject) => {
        http.post(
-            `/api/application/eggs/${eggId}`,
+            `/api/application/eggs/${eggId}/variables`,
            {
                name: variable.name,
                description: variable.description,
--- a/resources/scripts/api/admin/eggs/getEgg.ts
+++ b/resources/scripts/api/admin/eggs/getEgg.ts
@ -1,6 +1,7 @@
 import { Nest } from '@/api/admin/nests/getNests';
 import { rawDataToServer, Server } from '@/api/admin/servers/getServers';
 import http, { FractalResponseData, FractalResponseList } from '@/api/http';
+import useSWR from 'swr';

 export interface EggVariable {
    id: number;
@ -88,10 +89,16 @@ export const rawDataToEgg = ({ attributes }: FractalResponseData): Egg => ({
    },
 });

-export default (id: number, include: string[] = []): Promise<Egg> => {
-    return new Promise((resolve, reject) => {
-        http.get(`/api/application/eggs/${id}`, { params: { include: include.join(',') } })
-            .then(({ data }) => resolve(rawDataToEgg(data)))
-            .catch(reject);
+export const getEgg = async (id: number): Promise<Egg> => {
+    const { data } = await http.get(`/api/application/eggs/${id}`, { params: { include: [ 'variables' ] } });
+
+    return rawDataToEgg(data);
+};
+
+export default (id: number) => {
+    return useSWR<Egg>(`egg:${id}`, async () => {
+        const { data } = await http.get(`/api/application/eggs/${id}`, { params: { include: [ 'variables' ] } });
+
+        return rawDataToEgg(data);
    });
 };
--- a/resources/scripts/api/admin/eggs/updateEggVariables.ts
+++ b/resources/scripts/api/admin/eggs/updateEggVariables.ts
@ -1,12 +1,11 @@
 import http from '@/api/http';
 import { EggVariable, rawDataToEggVariable } from '@/api/admin/eggs/getEgg';

-export default (eggId: number, variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[]): Promise<EggVariable> => {
+export default (eggId: number, variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[]): Promise<EggVariable[]> => {
    return new Promise((resolve, reject) => {
        http.patch(
            `/api/application/eggs/${eggId}/variables`,
-            variables.map(variable => {
-                return {
+            variables.map(variable => ({
                id: variable.id,
                name: variable.name,
                description: variable.description,
@ -15,8 +14,7 @@ export default (eggId: number, variables: Omit<EggVariable, 'eggId' | 'createdAt
                user_viewable: variable.userViewable,
                user_editable: variable.userEditable,
                rules: variable.rules,
-                };
-            }),
+            })),
        )
            .then(({ data }) => resolve((data.data || []).map(rawDataToEggVariable)))
            .catch(reject);
--- a/resources/scripts/components/admin/nests/eggs/EggRouter.tsx
+++ b/resources/scripts/components/admin/nests/eggs/EggRouter.tsx
@ -1,54 +1,23 @@
 import EggInstallContainer from '@/components/admin/nests/eggs/EggInstallContainer';
 import EggVariablesContainer from '@/components/admin/nests/eggs/EggVariablesContainer';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useLocation } from 'react-router';
 import tw from 'twin.macro';
 import { Route, Switch, useRouteMatch } from 'react-router-dom';
-import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy';
-import getEgg, { Egg } from '@/api/admin/eggs/getEgg';
+import getEgg from '@/api/admin/eggs/getEgg';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import Spinner from '@/components/elements/Spinner';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { ApplicationStore } from '@/state';
 import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
 import EggSettingsContainer from '@/components/admin/nests/eggs/EggSettingsContainer';

-interface ctx {
-    egg: Egg | undefined;
-    setEgg: Action<ctx, Egg | undefined>;
-}
-
-export const Context = createContextStore<ctx>({
-    egg: undefined,
-
-    setEgg: action((state, payload) => {
-        state.egg = payload;
-    }),
-});
-
 const EggRouter = () => {
    const location = useLocation();
    const match = useRouteMatch<{ id?: string }>();

-    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
-    const [ loading, setLoading ] = useState(true);
+    const { data: egg } = getEgg(Number(match.params?.id));

-    const egg = Context.useStoreState(state => state.egg);
-    const setEgg = Context.useStoreActions(actions => actions.setEgg);
-
-    useEffect(() => {
-        clearFlashes('egg');
-
-        getEgg(Number(match.params?.id), [ 'variables' ])
-            .then(egg => setEgg(egg))
-            .catch(error => {
-                console.error(error);
-                clearAndAddHttpError({ key: 'egg', error });
-            })
-            .then(() => setLoading(false));
-    }, []);
-
-    if (loading || egg === undefined) {
+    if (egg === undefined) {
        return (
            <AdminContentBlock>
                <FlashMessageRender byKey={'egg'} css={tw`mb-4`}/>
@ -109,9 +78,5 @@ const EggRouter = () => {
 };

 export default () => {
-    return (
-        <Context.Provider>
-            <EggRouter/>
-        </Context.Provider>
-    );
+    return <EggRouter/>;
 };
--- a/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx
+++ b/resources/scripts/components/admin/nests/eggs/EggSettingsContainer.tsx
@ -162,7 +162,7 @@ const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(
            <AdminBox icon={faMicrochip} title={'Process Configuration'} css={tw`relative`} className={className}>
                <SpinnerOverlay visible={isSubmitting}/>

-                <div css={tw`mb-6`}>
+                <div css={tw`mb-5`}>
                    <Label>Startup Configuration</Label>
                    <Editor
                        mode={jsonLanguage}
--- a/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx
+++ b/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx
@ -1,9 +1,10 @@
 import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
-import React, { useEffect } from 'react';
+import React from 'react';
 import tw from 'twin.macro';
 import { array, boolean, object, string } from 'yup';
-import { Egg, EggVariable } from '@/api/admin/eggs/getEgg';
+import getEgg, { Egg, EggVariable } from '@/api/admin/eggs/getEgg';
 import updateEggVariables from '@/api/admin/eggs/updateEggVariables';
+import NewVariableButton from '@/components/admin/nests/eggs/NewVariableButton';
 import AdminBox from '@/components/admin/AdminBox';
 import Button from '@/components/elements/Button';
 import Checkbox from '@/components/elements/Checkbox';
@ -11,91 +12,7 @@ import Field, { FieldRow, TextareaField } from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import useFlash from '@/plugins/useFlash';

-function EggVariableForm ({ variable: { name }, i }: { variable: EggVariable, i: number }) {
-    const { isSubmitting } = useFormikContext();
-
-    return (
-        <AdminBox css={tw`relative w-full`} title={<p css={tw`text-sm uppercase`}>{name}</p>}>
-            <SpinnerOverlay visible={isSubmitting}/>
-
-            <Field
-                id={`[${i}].name`}
-                name={`[${i}].name`}
-                label={'Name'}
-                type={'text'}
-                css={tw`mb-6`}
-            />
-
-            <TextareaField
-                id={`[${i}].description`}
-                name={`[${i}].description`}
-                label={'Description'}
-                rows={3}
-                css={tw`mb-4`}
-            />
-
-            <FieldRow>
-                <Field
-                    id={`[${i}].envVariable`}
-                    name={`[${i}].envVariable`}
-                    label={'Environment Variable'}
-                    type={'text'}
-                />
-
-                <Field
-                    id={`[${i}].defaultValue`}
-                    name={`[${i}].defaultValue`}
-                    label={'Default Value'}
-                    type={'text'}
-                />
-            </FieldRow>
-
-            <div css={tw`flex flex-row mb-6`}>
-                <Checkbox
-                    id={`[${i}].userViewable`}
-                    name={`[${i}].userViewable`}
-                    label={'User Viewable'}
-                />
-
-                <Checkbox
-                    id={`[${i}].userEditable`}
-                    name={`[${i}].userEditable`}
-                    label={'User Editable'}
-                    css={tw`ml-auto`}
-                />
-            </div>
-
-            <Field
-                id={`[${i}].rules`}
-                name={`[${i}].rules`}
-                label={'Validation Rules'}
-                type={'text'}
-                css={tw`mb-2`}
-            />
-        </AdminBox>
-    );
-}
-
-export default function EggVariablesContainer ({ egg }: { egg: Egg }) {
-    const { clearAndAddHttpError } = useFlash();
-
-    const submit = (values: EggVariable[], { setSubmitting }: FormikHelpers<EggVariable[]>) => {
-        updateEggVariables(egg.id, values)
-            .then(variables => console.log(variables))
-            .catch(error => clearAndAddHttpError({ key: 'egg', error }))
-            .then(() => setSubmitting(false));
-    };
-
-    useEffect(() => {
-        console.log(egg.relations?.variables || []);
-    }, []);
-
-    return (
-        <Formik
-            onSubmit={submit}
-            initialValues={egg.relations?.variables || []}
-            validationSchema={array().of(
-                object().shape({
+export const validationSchema = object().shape({
    name: string().required().min(1).max(191),
    description: string(),
    envVariable: string().required().min(1).max(191),
@ -103,19 +20,111 @@ export default function EggVariablesContainer ({ egg }: { egg: Egg }) {
    userViewable: boolean().required(),
    userEditable: boolean().required(),
    rules: string().required(),
-                }),
-            )}
+});
+
+export function EggVariableForm ({ prefix }: { prefix: string }) {
+    return (
+        <>
+            <Field
+                id={`${prefix}name`}
+                name={`${prefix}name`}
+                label={'Name'}
+                type={'text'}
+                css={tw`mb-6`}
+            />
+
+            <TextareaField
+                id={`${prefix}description`}
+                name={`${prefix}description`}
+                label={'Description'}
+                rows={3}
+                css={tw`mb-4`}
+            />
+
+            <FieldRow>
+                <Field
+                    id={`${prefix}envVariable`}
+                    name={`${prefix}envVariable`}
+                    label={'Environment Variable'}
+                    type={'text'}
+                />
+
+                <Field
+                    id={`${prefix}defaultValue`}
+                    name={`${prefix}defaultValue`}
+                    label={'Default Value'}
+                    type={'text'}
+                />
+            </FieldRow>
+
+            <div css={tw`flex flex-row mb-6`}>
+                <Checkbox
+                    id={`${prefix}userViewable`}
+                    name={`${prefix}userViewable`}
+                    label={'User Viewable'}
+                />
+
+                <Checkbox
+                    id={`${prefix}userEditable`}
+                    name={`${prefix}userEditable`}
+                    label={'User Editable'}
+                    css={tw`ml-auto`}
+                />
+            </div>
+
+            <Field
+                id={`${prefix}rules`}
+                name={`${prefix}rules`}
+                label={'Validation Rules'}
+                type={'text'}
+                css={tw`mb-2`}
+            />
+        </>
+    );
+}
+
+function EggVariableBox ({ variable, prefix }: { variable: EggVariable, prefix: string }) {
+    const { isSubmitting } = useFormikContext();
+
+    return (
+        <AdminBox css={tw`relative w-full`} title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}>
+            <SpinnerOverlay visible={isSubmitting}/>
+
+            <EggVariableForm prefix={prefix}/>
+        </AdminBox>
+    );
+}
+
+export default function EggVariablesContainer ({ egg }: { egg: Egg }) {
+    const { clearAndAddHttpError } = useFlash();
+
+    const { mutate } = getEgg(egg.id);
+
+    const submit = (values: EggVariable[], { setSubmitting }: FormikHelpers<EggVariable[]>) => {
+        updateEggVariables(egg.id, values)
+            .then(async (variables) => await mutate(egg => ({ ...egg!, relations: { variables: variables } })))
+            .catch(error => clearAndAddHttpError({ key: 'egg', error }))
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={egg.relations?.variables || []}
+            validationSchema={array().of(validationSchema)}
        >
            {({ isSubmitting, isValid }) => (
                <Form>
                    <div css={tw`flex flex-col mb-16`}>
                        <div css={tw`grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-6`}>
-                            {egg.relations?.variables?.map((v, i) => <EggVariableForm key={v.id} i={i} variable={v}/>)}
+                            {egg.relations?.variables?.map((v, i) => <EggVariableBox key={i} prefix={`[${i}].`} variable={v}/>)}
                        </div>

-                        <div css={tw`bg-neutral-700 rounded shadow-md py-2 pr-6 mt-6`}>
+                        <div css={tw`bg-neutral-700 rounded shadow-md py-2 px-4 mt-6`}>
                            <div css={tw`flex flex-row`}>
-                                <Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                                <NewVariableButton eggId={egg.id}/>
+
+                                <Button type={'submit'} size={'small'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
                                    Save Changes
                                </Button>
                            </div>
--- a/resources/scripts/components/admin/nests/eggs/NewVariableButton.tsx
+++ b/resources/scripts/components/admin/nests/eggs/NewVariableButton.tsx
@ -0,0 +1,87 @@
+import { Form, Formik, FormikHelpers } from 'formik';
+import React, { useState } from 'react';
+import tw from 'twin.macro';
+import createEggVariable from '@/api/admin/eggs/createEggVariable';
+import getEgg from '@/api/admin/eggs/getEgg';
+import { EggVariableForm, validationSchema } from '@/components/admin/nests/eggs/EggVariablesContainer';
+import Modal from '@/components/elements/Modal';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import Button from '@/components/elements/Button';
+import useFlash from '@/plugins/useFlash';
+
+export default function NewVariableButton ({ eggId }: { eggId: number }) {
+    const [ visible, setVisible ] = useState(false);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+
+    const { mutate } = getEgg(eggId);
+
+    const submit = (values: any, { setSubmitting }: FormikHelpers<any>) => {
+        clearFlashes('variable:create');
+
+        createEggVariable(eggId, values)
+            .then(async (v) => {
+                await mutate(egg => ({ ...egg!, relations: { variables: [ ...egg!.relations.variables!, v ] } }));
+                setVisible(false);
+            })
+            .catch(error => {
+                clearAndAddHttpError({ key: 'variable:create', error });
+                setSubmitting(false);
+            });
+    };
+
+    return (
+        <>
+            <Formik
+                onSubmit={submit}
+                initialValues={{
+                    name: '',
+                    description: '',
+                    envVariable: '',
+                    defaultValue: '',
+                    userViewable: false,
+                    userEditable: false,
+                    rules: '',
+                }}
+                validationSchema={validationSchema}
+            >
+                {({ isSubmitting, resetForm }) => (
+                    <Modal
+                        visible={visible}
+                        dismissable={!isSubmitting}
+                        showSpinnerOverlay={isSubmitting}
+                        onDismissed={() => {
+                            resetForm();
+                            setVisible(false);
+                        }}
+                    >
+                        <FlashMessageRender byKey={'variable:create'} css={tw`mb-6`}/>
+
+                        <h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Variable</h2>
+
+                        <Form css={tw`m-0`}>
+                            <EggVariableForm prefix={''}/>
+
+                            <div css={tw`flex flex-wrap justify-end mt-6`}>
+                                <Button
+                                    type={'button'}
+                                    isSecondary
+                                    css={tw`w-full sm:w-auto sm:mr-2`}
+                                    onClick={() => setVisible(false)}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button css={tw`w-full mt-4 sm:w-auto sm:mt-0`} type={'submit'}>
+                                    Create Variable
+                                </Button>
+                            </div>
+                        </Form>
+                    </Modal>
+                )}
+            </Formik>
+
+            <Button type={'button'} color={'green'} onClick={() => setVisible(true)}>
+                Add a fucking variable
+            </Button>
+        </>
+    );
+}
--- a/resources/scripts/components/admin/servers/ServerStartupContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerStartupContainer.tsx
@ -1,4 +1,4 @@
-import getEgg, { Egg, EggVariable } from '@/api/admin/eggs/getEgg';
+import { getEgg, Egg, EggVariable } from '@/api/admin/eggs/getEgg';
 import { Server } from '@/api/admin/servers/getServers';
 import updateServerStartup, { Values } from '@/api/admin/servers/updateServerStartup';
 import EggSelect from '@/components/admin/servers/EggSelect';
@ -187,7 +187,7 @@ export default function ServerStartupContainer ({ server }: { server: Server })
    const setServer = Context.useStoreActions(actions => actions.setServer);

    useEffect(() => {
-        getEgg(server.eggId, [ 'variables' ])
+        getEgg(server.eggId)
            .then(egg => setEgg(egg))
            .catch(error => console.error(error));
    }, []);