ui(admin): add "working" React admin ui
This commit is contained in:
Matthew Penner
parent
d1c7494933
commit
5402584508
199 changed files with 13387 additions and 151 deletions
82
resources/scripts/components/admin/nests/ImportEggButton.tsx
Normal file
82
resources/scripts/components/admin/nests/ImportEggButton.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import getEggs from '@/api/admin/nests/getEggs';
|
||||
import importEgg from '@/api/admin/nests/importEgg';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
// import { Editor } from '@/components/elements/editor';
|
||||
import { useState } from 'react';
|
||||
import Button from '@/components/elements/Button';
|
||||
import Modal from '@/components/elements/Modal';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
export default ({ className }: { className?: string }) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
const { clearFlashes } = useFlash();
|
||||
|
||||
const params = useParams<'nestId'>();
|
||||
const { mutate } = getEggs(Number(params.nestId));
|
||||
|
||||
let fetchFileContent: (() => Promise<string>) | null = null;
|
||||
|
||||
const submit = async () => {
|
||||
clearFlashes('egg:import');
|
||||
|
||||
if (fetchFileContent === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const egg = await importEgg(Number(params.nestId), await fetchFileContent());
|
||||
await mutate(data => ({ ...data!, items: [...data!.items!, egg] }));
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
visible={visible}
|
||||
onDismissed={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<FlashMessageRender byKey={'egg:import'} css={tw`mb-6`} />
|
||||
|
||||
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>Import Egg</h2>
|
||||
|
||||
{/*<Editor*/}
|
||||
{/* // overrides={tw`h-64 rounded`}*/}
|
||||
{/* initialContent={''}*/}
|
||||
{/* // language={jsonLanguage}*/}
|
||||
{/* fetchContent={value => {*/}
|
||||
{/* fetchFileContent = value;*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
|
||||
<div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
|
||||
<Button
|
||||
type={'button'}
|
||||
css={tw`w-full sm:w-auto sm:mr-2`}
|
||||
onClick={() => setVisible(false)}
|
||||
isSecondary
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button css={tw`w-full sm:w-auto mt-4 sm:mt-0`} onClick={submit}>
|
||||
Import Egg
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Button
|
||||
type={'button'}
|
||||
size={'large'}
|
||||
css={tw`h-10 px-4 py-0 whitespace-nowrap`}
|
||||
className={className}
|
||||
onClick={() => setVisible(true)}
|
||||
isSecondary
|
||||
>
|
||||
Import
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import type { Actions } from 'easy-peasy';
|
||||
import { useStoreActions } from 'easy-peasy';
|
||||
import { useState } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import deleteNest from '@/api/admin/nests/deleteNest';
|
||||
import Button from '@/components/elements/Button';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import type { ApplicationStore } from '@/state';
|
||||
|
||||
interface Props {
|
||||
nestId: number;
|
||||
onDeleted: () => void;
|
||||
}
|
||||
|
||||
export default ({ nestId, onDeleted }: Props) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions(
|
||||
(actions: Actions<ApplicationStore>) => actions.flashes,
|
||||
);
|
||||
|
||||
const onDelete = () => {
|
||||
setLoading(true);
|
||||
clearFlashes('nest');
|
||||
|
||||
deleteNest(nestId)
|
||||
.then(() => {
|
||||
setLoading(false);
|
||||
onDeleted();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'nest', error });
|
||||
|
||||
setLoading(false);
|
||||
setVisible(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmationModal
|
||||
visible={visible}
|
||||
title={'Delete nest?'}
|
||||
buttonText={'Yes, delete nest'}
|
||||
onConfirmed={onDelete}
|
||||
showSpinnerOverlay={loading}
|
||||
onModalDismissed={() => setVisible(false)}
|
||||
>
|
||||
Are you sure you want to delete this nest? Deleting a nest will delete all eggs assigned to it.
|
||||
</ConfirmationModal>
|
||||
|
||||
<Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
css={tw`h-5 w-5`}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
250
resources/scripts/components/admin/nests/NestEditContainer.tsx
Normal file
250
resources/scripts/components/admin/nests/NestEditContainer.tsx
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
import type { Action, Actions } from 'easy-peasy';
|
||||
import { action, createContextStore, useStoreActions } from 'easy-peasy';
|
||||
import type { FormikHelpers } from 'formik';
|
||||
import { Form, Formik } from 'formik';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { NavLink, useNavigate, useParams } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
import { object, string } from 'yup';
|
||||
|
||||
import ImportEggButton from '@/components/admin/nests/ImportEggButton';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import type { Nest } from '@/api/admin/nests/getNests';
|
||||
import getNest from '@/api/admin/nests/getNest';
|
||||
import updateNest from '@/api/admin/nests/updateNest';
|
||||
import Button from '@/components/elements/Button';
|
||||
import Field from '@/components/elements/Field';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import AdminBox from '@/components/admin/AdminBox';
|
||||
import CopyOnClick from '@/components/elements/CopyOnClick';
|
||||
import Input from '@/components/elements/Input';
|
||||
import Label from '@/components/elements/Label';
|
||||
import NestDeleteButton from '@/components/admin/nests/NestDeleteButton';
|
||||
import NestEggTable from '@/components/admin/nests/NestEggTable';
|
||||
import type { ApplicationStore } from '@/state';
|
||||
|
||||
interface ctx {
|
||||
nest: Nest | undefined;
|
||||
setNest: Action<ctx, Nest | undefined>;
|
||||
|
||||
selectedEggs: number[];
|
||||
|
||||
setSelectedEggs: Action<ctx, number[]>;
|
||||
appendSelectedEggs: Action<ctx, number>;
|
||||
removeSelectedEggs: Action<ctx, number>;
|
||||
}
|
||||
|
||||
export const Context = createContextStore<ctx>({
|
||||
nest: undefined,
|
||||
|
||||
setNest: action((state, payload) => {
|
||||
state.nest = payload;
|
||||
}),
|
||||
|
||||
selectedEggs: [],
|
||||
|
||||
setSelectedEggs: action((state, payload) => {
|
||||
state.selectedEggs = payload;
|
||||
}),
|
||||
|
||||
appendSelectedEggs: action((state, payload) => {
|
||||
state.selectedEggs = state.selectedEggs.filter(id => id !== payload).concat(payload);
|
||||
}),
|
||||
|
||||
removeSelectedEggs: action((state, payload) => {
|
||||
state.selectedEggs = state.selectedEggs.filter(id => id !== payload);
|
||||
}),
|
||||
});
|
||||
|
||||
interface Values {
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const EditInformationContainer = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions(
|
||||
(actions: Actions<ApplicationStore>) => actions.flashes,
|
||||
);
|
||||
|
||||
const nest = Context.useStoreState(state => state.nest);
|
||||
const setNest = Context.useStoreActions(actions => actions.setNest);
|
||||
|
||||
if (nest === undefined) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
clearFlashes('nest');
|
||||
|
||||
updateNest(nest.id, name, description)
|
||||
.then(() => setNest({ ...nest, name, description }))
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'nest', error });
|
||||
})
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
name: nest.name,
|
||||
description: nest.description || '',
|
||||
}}
|
||||
validationSchema={object().shape({
|
||||
name: string().required().min(1),
|
||||
description: string().max(255, ''),
|
||||
})}
|
||||
>
|
||||
{({ isSubmitting, isValid }) => (
|
||||
<>
|
||||
<AdminBox title={'Edit Nest'} css={tw`flex-1 self-start w-full relative mb-8 lg:mb-0 mr-0 lg:mr-4`}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<Form>
|
||||
<Field id={'name'} name={'name'} label={'Name'} type={'text'} css={tw`mb-6`} />
|
||||
|
||||
<Field id={'description'} name={'description'} label={'Description'} type={'text'} />
|
||||
|
||||
<div css={tw`w-full flex flex-row items-center mt-6`}>
|
||||
<div css={tw`flex`}>
|
||||
<NestDeleteButton nestId={nest.id} onDeleted={() => navigate('/admin/nests')} />
|
||||
</div>
|
||||
|
||||
<div css={tw`flex ml-auto`}>
|
||||
<Button type={'submit'} disabled={isSubmitting || !isValid}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</AdminBox>
|
||||
</>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
const ViewDetailsContainer = () => {
|
||||
const nest = Context.useStoreState(state => state.nest);
|
||||
|
||||
if (nest === undefined) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminBox title={'Nest Details'} css={tw`flex-1 w-full relative ml-0 lg:ml-4`}>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<Label>ID</Label>
|
||||
<CopyOnClick text={nest.id.toString()}>
|
||||
<Input type={'text'} value={nest.id} readOnly />
|
||||
</CopyOnClick>
|
||||
</div>
|
||||
|
||||
<div css={tw`mt-6`}>
|
||||
<Label>UUID</Label>
|
||||
<CopyOnClick text={nest.uuid}>
|
||||
<Input type={'text'} value={nest.uuid} readOnly />
|
||||
</CopyOnClick>
|
||||
</div>
|
||||
|
||||
<div css={tw`mt-6 mb-2`}>
|
||||
<Label>Author</Label>
|
||||
<CopyOnClick text={nest.author}>
|
||||
<Input type={'text'} value={nest.author} readOnly />
|
||||
</CopyOnClick>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AdminBox>
|
||||
);
|
||||
};
|
||||
|
||||
const NestEditContainer = () => {
|
||||
const params = useParams<'nestId'>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions(
|
||||
(actions: Actions<ApplicationStore>) => actions.flashes,
|
||||
);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const nest = Context.useStoreState(state => state.nest);
|
||||
const setNest = Context.useStoreActions(actions => actions.setNest);
|
||||
|
||||
useEffect(() => {
|
||||
clearFlashes('nest');
|
||||
|
||||
getNest(Number(params.nestId), ['eggs'])
|
||||
.then(nest => setNest(nest))
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'nest', error });
|
||||
})
|
||||
.then(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
if (loading || nest === undefined) {
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<FlashMessageRender byKey={'nest'} css={tw`mb-4`} />
|
||||
|
||||
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
|
||||
<Spinner size={'base'} />
|
||||
</div>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Nests - ' + nest.name}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{nest.name}</h2>
|
||||
{(nest.description || '').length < 1 ? (
|
||||
<p css={tw`text-base text-neutral-400`}>
|
||||
<span css={tw`italic`}>No description</span>
|
||||
</p>
|
||||
) : (
|
||||
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
|
||||
{nest.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div css={tw`flex flex-row ml-auto pl-4`}>
|
||||
<ImportEggButton css={tw`mr-4`} />
|
||||
|
||||
<NavLink to={`/admin/nests/${params.nestId}/new`}>
|
||||
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`}>
|
||||
New Egg
|
||||
</Button>
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'nest'} css={tw`mb-4`} />
|
||||
|
||||
<div css={tw`flex flex-col lg:flex-row mb-8`}>
|
||||
<EditInformationContainer />
|
||||
<ViewDetailsContainer />
|
||||
</div>
|
||||
|
||||
<NestEggTable />
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Context.Provider>
|
||||
<NestEditContainer />
|
||||
</Context.Provider>
|
||||
);
|
||||
};
|
||||
160
resources/scripts/components/admin/nests/NestEggTable.tsx
Normal file
160
resources/scripts/components/admin/nests/NestEggTable.tsx
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
import type { ChangeEvent } from 'react';
|
||||
import { useContext, useEffect } from 'react';
|
||||
import { NavLink, useParams } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import type { Filters } from '@/api/admin/nests/getEggs';
|
||||
import getEggs, { Context as EggsContext } from '@/api/admin/nests/getEggs';
|
||||
import AdminCheckbox from '@/components/admin/AdminCheckbox';
|
||||
import AdminTable, {
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Pagination,
|
||||
Loading,
|
||||
NoItems,
|
||||
ContentWrapper,
|
||||
useTableHooks,
|
||||
} from '@/components/admin/AdminTable';
|
||||
import { Context } from '@/components/admin/nests/NestEditContainer';
|
||||
import CopyOnClick from '@/components/elements/CopyOnClick';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
|
||||
const RowCheckbox = ({ id }: { id: number }) => {
|
||||
const isChecked = Context.useStoreState(state => state.selectedEggs.indexOf(id) >= 0);
|
||||
const appendSelectedEggs = Context.useStoreActions(actions => actions.appendSelectedEggs);
|
||||
const removeSelectedEggs = Context.useStoreActions(actions => actions.removeSelectedEggs);
|
||||
|
||||
return (
|
||||
<AdminCheckbox
|
||||
name={id.toString()}
|
||||
checked={isChecked}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.currentTarget.checked) {
|
||||
appendSelectedEggs(id);
|
||||
} else {
|
||||
removeSelectedEggs(id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const EggsTable = () => {
|
||||
const params = useParams<'nestId' | 'id'>();
|
||||
|
||||
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(EggsContext);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: eggs, error, isValidating } = getEggs(Number(params.nestId));
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) {
|
||||
clearFlashes('nests');
|
||||
return;
|
||||
}
|
||||
|
||||
clearAndAddHttpError({ key: 'nests', error });
|
||||
}, [error]);
|
||||
|
||||
const length = eggs?.items?.length || 0;
|
||||
|
||||
const setSelectedEggs = Context.useStoreActions(actions => actions.setSelectedEggs);
|
||||
const selectedEggsLength = Context.useStoreState(state => state.selectedEggs.length);
|
||||
|
||||
const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedEggs(e.currentTarget.checked ? eggs?.items?.map(nest => nest.id) || [] : []);
|
||||
};
|
||||
|
||||
const onSearch = (query: string): Promise<void> => {
|
||||
return new Promise(resolve => {
|
||||
if (query.length < 2) {
|
||||
setFilters(null);
|
||||
} else {
|
||||
setFilters({ name: query });
|
||||
}
|
||||
return resolve();
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedEggs([]);
|
||||
}, [page]);
|
||||
|
||||
return (
|
||||
<AdminTable>
|
||||
<ContentWrapper
|
||||
checked={selectedEggsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={eggs} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader
|
||||
name={'ID'}
|
||||
direction={sort === 'id' ? (sortDirection ? 1 : 2) : null}
|
||||
onClick={() => setSort('id')}
|
||||
/>
|
||||
<TableHeader
|
||||
name={'Name'}
|
||||
direction={sort === 'name' ? (sortDirection ? 1 : 2) : null}
|
||||
onClick={() => setSort('name')}
|
||||
/>
|
||||
<TableHeader name={'Description'} />
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{eggs !== undefined &&
|
||||
!error &&
|
||||
!isValidating &&
|
||||
length > 0 &&
|
||||
eggs.items.map(egg => (
|
||||
<TableRow key={egg.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={egg.id} />
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={egg.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
|
||||
{egg.id}
|
||||
</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink
|
||||
to={`/admin/nests/${params.nestId}/eggs/${egg.id}`}
|
||||
css={tw`text-primary-400 hover:text-primary-300`}
|
||||
>
|
||||
{egg.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
{egg.description}
|
||||
</td>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{eggs === undefined || (error && isValidating) ? <Loading /> : length < 1 ? <NoItems /> : null}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const hooks = useTableHooks<Filters>();
|
||||
|
||||
return (
|
||||
<EggsContext.Provider value={hooks}>
|
||||
<EggsTable />
|
||||
</EggsContext.Provider>
|
||||
);
|
||||
};
|
||||
182
resources/scripts/components/admin/nests/NestsContainer.tsx
Normal file
182
resources/scripts/components/admin/nests/NestsContainer.tsx
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
import type { ChangeEvent } from 'react';
|
||||
import { useContext, useEffect } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import type { Filters } from '@/api/admin/nests/getNests';
|
||||
import getNests, { Context as NestsContext } from '@/api/admin/nests/getNests';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import AdminCheckbox from '@/components/admin/AdminCheckbox';
|
||||
import AdminTable, {
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Pagination,
|
||||
Loading,
|
||||
NoItems,
|
||||
ContentWrapper,
|
||||
useTableHooks,
|
||||
} from '@/components/admin/AdminTable';
|
||||
import CopyOnClick from '@/components/elements/CopyOnClick';
|
||||
import NewNestButton from '@/components/admin/nests/NewNestButton';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { AdminContext } from '@/state/admin';
|
||||
|
||||
const RowCheckbox = ({ id }: { id: number }) => {
|
||||
const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0);
|
||||
const appendSelectedNest = AdminContext.useStoreActions(actions => actions.nests.appendSelectedNest);
|
||||
const removeSelectedNest = AdminContext.useStoreActions(actions => actions.nests.removeSelectedNest);
|
||||
|
||||
return (
|
||||
<AdminCheckbox
|
||||
name={id.toString()}
|
||||
checked={isChecked}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.currentTarget.checked) {
|
||||
appendSelectedNest(id);
|
||||
} else {
|
||||
removeSelectedNest(id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const NestsContainer = () => {
|
||||
const { page, setPage, setFilters, sort, setSort, sortDirection } = useContext(NestsContext);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: nests, error, isValidating } = getNests();
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) {
|
||||
clearFlashes('nests');
|
||||
return;
|
||||
}
|
||||
|
||||
clearAndAddHttpError({ key: 'nests', error });
|
||||
}, [error]);
|
||||
|
||||
const length = nests?.items?.length || 0;
|
||||
|
||||
const setSelectedNests = AdminContext.useStoreActions(actions => actions.nests.setSelectedNests);
|
||||
const selectedNestsLength = AdminContext.useStoreState(state => state.nests.selectedNests.length);
|
||||
|
||||
const onSelectAllClick = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setSelectedNests(e.currentTarget.checked ? nests?.items?.map(nest => nest.id) || [] : []);
|
||||
};
|
||||
|
||||
const onSearch = (query: string): Promise<void> => {
|
||||
return new Promise(resolve => {
|
||||
if (query.length < 2) {
|
||||
setFilters(null);
|
||||
} else {
|
||||
setFilters({ name: query });
|
||||
}
|
||||
return resolve();
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedNests([]);
|
||||
}, [page]);
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Nests'}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>Nests</h2>
|
||||
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
|
||||
All nests currently available on this system.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div css={tw`flex ml-auto pl-4`}>
|
||||
<NewNestButton />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'nests'} css={tw`mb-4`} />
|
||||
|
||||
<AdminTable>
|
||||
<ContentWrapper
|
||||
checked={selectedNestsLength === (length === 0 ? -1 : length)}
|
||||
onSelectAllClick={onSelectAllClick}
|
||||
onSearch={onSearch}
|
||||
>
|
||||
<Pagination data={nests} onPageSelect={setPage}>
|
||||
<div css={tw`overflow-x-auto`}>
|
||||
<table css={tw`w-full table-auto`}>
|
||||
<TableHead>
|
||||
<TableHeader
|
||||
name={'ID'}
|
||||
direction={sort === 'id' ? (sortDirection ? 1 : 2) : null}
|
||||
onClick={() => setSort('id')}
|
||||
/>
|
||||
<TableHeader
|
||||
name={'Name'}
|
||||
direction={sort === 'name' ? (sortDirection ? 1 : 2) : null}
|
||||
onClick={() => setSort('name')}
|
||||
/>
|
||||
<TableHeader name={'Description'} />
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{nests !== undefined &&
|
||||
!error &&
|
||||
!isValidating &&
|
||||
length > 0 &&
|
||||
nests.items.map(nest => (
|
||||
<TableRow key={nest.id}>
|
||||
<td css={tw`pl-6`}>
|
||||
<RowCheckbox id={nest.id} />
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<CopyOnClick text={nest.id.toString()}>
|
||||
<code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>
|
||||
{nest.id}
|
||||
</code>
|
||||
</CopyOnClick>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
<NavLink
|
||||
to={`/admin/nests/${nest.id}`}
|
||||
css={tw`text-primary-400 hover:text-primary-300`}
|
||||
>
|
||||
{nest.name}
|
||||
</NavLink>
|
||||
</td>
|
||||
|
||||
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
|
||||
{nest.description}
|
||||
</td>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</table>
|
||||
|
||||
{nests === undefined || (error && isValidating) ? (
|
||||
<Loading />
|
||||
) : length < 1 ? (
|
||||
<NoItems />
|
||||
) : null}
|
||||
</div>
|
||||
</Pagination>
|
||||
</ContentWrapper>
|
||||
</AdminTable>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const hooks = useTableHooks<Filters>();
|
||||
|
||||
return (
|
||||
<NestsContext.Provider value={hooks}>
|
||||
<NestsContainer />
|
||||
</NestsContext.Provider>
|
||||
);
|
||||
};
|
||||
115
resources/scripts/components/admin/nests/NewEggContainer.tsx
Normal file
115
resources/scripts/components/admin/nests/NewEggContainer.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
import type { FormikHelpers } from 'formik';
|
||||
import { Form, Formik } from 'formik';
|
||||
import { useRef } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
import { object } from 'yup';
|
||||
|
||||
import createEgg from '@/api/admin/eggs/createEgg';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import {
|
||||
EggImageContainer,
|
||||
EggInformationContainer,
|
||||
EggLifecycleContainer,
|
||||
EggProcessContainer,
|
||||
EggProcessContainerRef,
|
||||
EggStartupContainer,
|
||||
} from '@/components/admin/nests/eggs/EggSettingsContainer';
|
||||
import Button from '@/components/elements/Button';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
|
||||
interface Values {
|
||||
name: string;
|
||||
description: string;
|
||||
startup: string;
|
||||
dockerImages: string;
|
||||
configStop: string;
|
||||
configStartup: string;
|
||||
configFiles: string;
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const navigate = useNavigate();
|
||||
const params = useParams<{ nestId: string }>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
|
||||
const ref = useRef<EggProcessContainerRef>();
|
||||
|
||||
const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
clearFlashes('egg:create');
|
||||
|
||||
const nestId = Number(params.nestId);
|
||||
|
||||
values.configStartup = (await ref.current?.getStartupConfiguration()) || '';
|
||||
values.configFiles = (await ref.current?.getFilesConfiguration()) || '';
|
||||
|
||||
createEgg({ ...values, dockerImages: values.dockerImages.split('\n'), nestId })
|
||||
.then(egg => navigate(`/admin/nests/${nestId}/eggs/${egg.id}`))
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'egg:create', error });
|
||||
})
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'New Egg'}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>New Egg</h2>
|
||||
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
|
||||
Add a new egg to the panel.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender key={'egg:create'} css={tw`mb-4`} />
|
||||
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
name: '',
|
||||
description: '',
|
||||
startup: '',
|
||||
dockerImages: '',
|
||||
configStop: '',
|
||||
configStartup: '{}',
|
||||
configFiles: '{}',
|
||||
}}
|
||||
validationSchema={object().shape({})}
|
||||
>
|
||||
{({ isSubmitting, isValid }) => (
|
||||
<Form>
|
||||
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
|
||||
<EggInformationContainer />
|
||||
</div>
|
||||
|
||||
<EggStartupContainer css={tw`mb-6`} />
|
||||
|
||||
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
|
||||
<EggImageContainer />
|
||||
<EggLifecycleContainer />
|
||||
</div>
|
||||
|
||||
<EggProcessContainer ref={ref} css={tw`mb-6`} />
|
||||
|
||||
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-6 mb-16`}>
|
||||
<div css={tw`flex flex-row`}>
|
||||
<Button
|
||||
type="submit"
|
||||
size="small"
|
||||
css={tw`ml-auto`}
|
||||
disabled={isSubmitting || !isValid}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
112
resources/scripts/components/admin/nests/NewNestButton.tsx
Normal file
112
resources/scripts/components/admin/nests/NewNestButton.tsx
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import React, { useState } from 'react';
|
||||
import createNest from '@/api/admin/nests/createNest';
|
||||
import getNests from '@/api/admin/nests/getNests';
|
||||
import Button from '@/components/elements/Button';
|
||||
import Field from '@/components/elements/Field';
|
||||
import Modal from '@/components/elements/Modal';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { Form, Formik, FormikHelpers } from 'formik';
|
||||
import { object, string } from 'yup';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
interface Values {
|
||||
name: string,
|
||||
description: string,
|
||||
}
|
||||
|
||||
const schema = object().shape({
|
||||
name: string()
|
||||
.required('A nest name must be provided.')
|
||||
.max(32, 'Nest name must not exceed 32 characters.'),
|
||||
description: string()
|
||||
.max(255, 'Nest description must not exceed 255 characters.'),
|
||||
});
|
||||
|
||||
export default () => {
|
||||
const [ visible, setVisible ] = useState(false);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { mutate } = getNests();
|
||||
|
||||
const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
clearFlashes('nest:create');
|
||||
setSubmitting(true);
|
||||
|
||||
createNest(name, description)
|
||||
.then(async (nest) => {
|
||||
await mutate(data => ({ ...data!, items: data!.items.concat(nest) }), false);
|
||||
setVisible(false);
|
||||
})
|
||||
.catch(error => {
|
||||
clearAndAddHttpError({ key: 'nest:create', error });
|
||||
setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{ name: '', description: '' }}
|
||||
validationSchema={schema}
|
||||
>
|
||||
{
|
||||
({ isSubmitting, resetForm }) => (
|
||||
<Modal
|
||||
visible={visible}
|
||||
dismissable={!isSubmitting}
|
||||
showSpinnerOverlay={isSubmitting}
|
||||
onDismissed={() => {
|
||||
resetForm();
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<FlashMessageRender byKey={'nest:create'} css={tw`mb-6`}/>
|
||||
|
||||
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>New Nest</h2>
|
||||
|
||||
<Form css={tw`m-0`}>
|
||||
<Field
|
||||
type={'text'}
|
||||
id={'name'}
|
||||
name={'name'}
|
||||
label={'Name'}
|
||||
description={'A short name used to identify this nest.'}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<div css={tw`mt-6`}>
|
||||
<Field
|
||||
type={'text'}
|
||||
id={'description'}
|
||||
name={'description'}
|
||||
label={'Description'}
|
||||
description={'A description for this nest.'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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 Nest
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
|
||||
<Button type={'button'} size={'large'} css={tw`h-10 px-4 py-0 whitespace-nowrap`} onClick={() => setVisible(true)}>
|
||||
New Nest
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import type { Actions } from 'easy-peasy';
|
||||
import { useStoreActions } from 'easy-peasy';
|
||||
import { useState } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import deleteEgg from '@/api/admin/eggs/deleteEgg';
|
||||
import Button from '@/components/elements/Button';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import type { ApplicationStore } from '@/state';
|
||||
|
||||
interface Props {
|
||||
eggId: number;
|
||||
onDeleted: () => void;
|
||||
}
|
||||
|
||||
export default ({ eggId, onDeleted }: Props) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions(
|
||||
(actions: Actions<ApplicationStore>) => actions.flashes,
|
||||
);
|
||||
|
||||
const onDelete = () => {
|
||||
setLoading(true);
|
||||
clearFlashes('egg');
|
||||
|
||||
deleteEgg(eggId)
|
||||
.then(() => {
|
||||
setLoading(false);
|
||||
onDeleted();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'egg', error });
|
||||
|
||||
setLoading(false);
|
||||
setVisible(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmationModal
|
||||
visible={visible}
|
||||
title={'Delete egg?'}
|
||||
buttonText={'Yes, delete egg'}
|
||||
onConfirmed={onDelete}
|
||||
showSpinnerOverlay={loading}
|
||||
onModalDismissed={() => setVisible(false)}
|
||||
>
|
||||
Are you sure you want to delete this egg? You may only delete an egg with no servers using it.
|
||||
</ConfirmationModal>
|
||||
|
||||
<Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
css={tw`h-5 w-5`}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import { exportEgg } from '@/api/admin/egg';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
// import { jsonLanguage } from '@codemirror/lang-json';
|
||||
// import Editor from '@/components/elements/Editor';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Button from '@/components/elements/Button';
|
||||
import Modal from '@/components/elements/Modal';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
export default ({ className }: { className?: string }) => {
|
||||
const params = useParams<'id'>();
|
||||
const { clearAndAddHttpError, clearFlashes } = useFlash();
|
||||
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [_content, setContent] = useState<Record<string, any> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearFlashes('egg:export');
|
||||
setLoading(true);
|
||||
|
||||
exportEgg(Number(params.id))
|
||||
.then(setContent)
|
||||
.catch(error => clearAndAddHttpError({ key: 'egg:export', error }))
|
||||
.then(() => setLoading(false));
|
||||
}, [visible]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
visible={visible}
|
||||
onDismissed={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
css={tw`relative`}
|
||||
>
|
||||
<SpinnerOverlay visible={loading} />
|
||||
<h2 css={tw`mb-6 text-2xl text-neutral-100`}>Export Egg</h2>
|
||||
<FlashMessageRender byKey={'egg:export'} css={tw`mb-6`} />
|
||||
|
||||
{/*<Editor*/}
|
||||
{/* overrides={tw`h-[32rem] rounded`}*/}
|
||||
{/* initialContent={content !== null ? JSON.stringify(content, null, '\t') : ''}*/}
|
||||
{/* mode={jsonLanguage}*/}
|
||||
{/*/>*/}
|
||||
|
||||
<div css={tw`flex flex-wrap justify-end mt-4 sm:mt-6`}>
|
||||
<Button
|
||||
type={'button'}
|
||||
css={tw`w-full sm:w-auto sm:mr-2`}
|
||||
onClick={() => setVisible(false)}
|
||||
isSecondary
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
css={tw`w-full sm:w-auto mt-4 sm:mt-0`}
|
||||
// onClick={submit}
|
||||
// TODO: When clicked, save as a JSON file.
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Button
|
||||
type={'button'}
|
||||
size={'small'}
|
||||
css={tw`px-4 py-0 whitespace-nowrap`}
|
||||
className={className}
|
||||
onClick={() => setVisible(true)}
|
||||
isSecondary
|
||||
>
|
||||
Export
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
import updateEgg from '@/api/admin/eggs/updateEgg';
|
||||
import Field from '@/components/elements/Field';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
// import { shell } from '@codemirror/legacy-modes/mode/shell';
|
||||
import { faScroll } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Form, Formik, FormikHelpers } from 'formik';
|
||||
import tw from 'twin.macro';
|
||||
import AdminBox from '@/components/admin/AdminBox';
|
||||
import Button from '@/components/elements/Button';
|
||||
// import Editor from '@/components/elements/Editor';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
|
||||
interface Values {
|
||||
scriptContainer: string;
|
||||
scriptEntry: string;
|
||||
scriptInstall: string;
|
||||
}
|
||||
|
||||
export default function EggInstallContainer() {
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
|
||||
const { data: egg } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let fetchFileContent: (() => Promise<string>) | null = null;
|
||||
|
||||
const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
if (fetchFileContent === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
values.scriptInstall = await fetchFileContent();
|
||||
|
||||
clearFlashes('egg');
|
||||
|
||||
updateEgg(egg.id, values)
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'egg', error });
|
||||
})
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
scriptContainer: egg.scriptContainer,
|
||||
scriptEntry: egg.scriptEntry,
|
||||
scriptInstall: '',
|
||||
}}
|
||||
>
|
||||
{({ isSubmitting, isValid }) => (
|
||||
<AdminBox icon={faScroll} title={'Install Script'} noPadding>
|
||||
<div css={tw`relative pb-4`}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<Form>
|
||||
{/*<Editor*/}
|
||||
{/* overrides={tw`h-96 mb-4`}*/}
|
||||
{/* initialContent={egg.scriptInstall || ''}*/}
|
||||
{/* mode={shell}*/}
|
||||
{/* fetchContent={value => {*/}
|
||||
{/* fetchFileContent = value;*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
|
||||
<div css={tw`mx-6 mb-4`}>
|
||||
<div css={tw`grid grid-cols-3 gap-x-8 gap-y-6`}>
|
||||
<Field
|
||||
id={'scriptContainer'}
|
||||
name={'scriptContainer'}
|
||||
label={'Install Container'}
|
||||
type={'text'}
|
||||
description={'The Docker image to use for running this installation script.'}
|
||||
/>
|
||||
|
||||
<Field
|
||||
id={'scriptEntry'}
|
||||
name={'scriptEntry'}
|
||||
label={'Install Entrypoint'}
|
||||
type={'text'}
|
||||
description={
|
||||
'The command that should be used to run this script inside of the installation container.'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={tw`flex flex-row border-t border-neutral-600`}>
|
||||
<Button
|
||||
type={'submit'}
|
||||
size={'small'}
|
||||
css={tw`ml-auto mr-6 mt-4`}
|
||||
disabled={isSubmitting || !isValid}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</AdminBox>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
90
resources/scripts/components/admin/nests/eggs/EggRouter.tsx
Normal file
90
resources/scripts/components/admin/nests/eggs/EggRouter.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { useEffect } from 'react';
|
||||
import { Route, Routes, useParams } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
import EggInstallContainer from '@/components/admin/nests/eggs/EggInstallContainer';
|
||||
import EggVariablesContainer from '@/components/admin/nests/eggs/EggVariablesContainer';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
|
||||
import EggSettingsContainer from '@/components/admin/nests/eggs/EggSettingsContainer';
|
||||
|
||||
const EggRouter = () => {
|
||||
const { id, nestId } = useParams<'nestId' | 'id'>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
const { data: egg, error, isValidating, mutate } = useEggFromRoute();
|
||||
|
||||
useEffect(() => {
|
||||
mutate();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!error) clearFlashes('egg');
|
||||
if (error) clearAndAddHttpError({ key: 'egg', error });
|
||||
}, [error]);
|
||||
|
||||
if (!egg || (error && isValidating)) {
|
||||
return (
|
||||
<AdminContentBlock showFlashKey={'egg'}>
|
||||
<Spinner size={'large'} centered />
|
||||
</AdminContentBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Egg - ' + egg.name}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-4`}>
|
||||
<div css={tw`flex flex-col flex-shrink`} style={{ minWidth: '0' }}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{egg.name}</h2>
|
||||
<p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>
|
||||
{egg.uuid}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'egg'} css={tw`mb-4`} />
|
||||
|
||||
<SubNavigation>
|
||||
<SubNavigationLink to={`/admin/nests/${nestId ?? ''}/eggs/${id ?? ''}`} name={'About'}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z"
|
||||
/>
|
||||
</svg>
|
||||
</SubNavigationLink>
|
||||
|
||||
<SubNavigationLink to={`/admin/nests/${nestId ?? ''}/eggs/${id ?? ''}/variables`} name={'Variables'}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" />
|
||||
</svg>
|
||||
</SubNavigationLink>
|
||||
|
||||
<SubNavigationLink to={`/admin/nests/${nestId ?? ''}/eggs/${id ?? ''}/install`} name={'Install Script'}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
fillRule="evenodd"
|
||||
d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z"
|
||||
/>
|
||||
</svg>
|
||||
</SubNavigationLink>
|
||||
</SubNavigation>
|
||||
|
||||
<Routes>
|
||||
<Route path="" element={<EggSettingsContainer />} />
|
||||
<Route path="variables" element={<EggVariablesContainer />} />
|
||||
<Route path="install" element={<EggInstallContainer />} />
|
||||
</Routes>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return <EggRouter />;
|
||||
};
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
import updateEgg from '@/api/admin/eggs/updateEgg';
|
||||
import EggDeleteButton from '@/components/admin/nests/eggs/EggDeleteButton';
|
||||
import EggExportButton from '@/components/admin/nests/eggs/EggExportButton';
|
||||
import Button from '@/components/elements/Button';
|
||||
// import Editor from '@/components/elements/Editor';
|
||||
import Field, { TextareaField } from '@/components/elements/Field';
|
||||
import Input from '@/components/elements/Input';
|
||||
import Label from '@/components/elements/Label';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
// import { jsonLanguage } from '@codemirror/lang-json';
|
||||
import { faDocker } from '@fortawesome/free-brands-svg-icons';
|
||||
import { faEgg, faFireAlt, faMicrochip, faTerminal } from '@fortawesome/free-solid-svg-icons';
|
||||
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
||||
import AdminBox from '@/components/admin/AdminBox';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
import { object } from 'yup';
|
||||
import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
|
||||
|
||||
export function EggInformationContainer() {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
return (
|
||||
<AdminBox icon={faEgg} title={'Egg Information'} css={tw`relative`}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<Field id={'name'} name={'name'} label={'Name'} type={'text'} css={tw`mb-6`} />
|
||||
|
||||
<Field id={'description'} name={'description'} label={'Description'} type={'text'} css={tw`mb-2`} />
|
||||
</AdminBox>
|
||||
);
|
||||
}
|
||||
|
||||
function EggDetailsContainer() {
|
||||
const { data: egg } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminBox icon={faEgg} title={'Egg Details'} css={tw`relative`}>
|
||||
<div css={tw`mb-6`}>
|
||||
<Label>UUID</Label>
|
||||
<Input id={'uuid'} name={'uuid'} type={'text'} value={egg.uuid} readOnly />
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-2`}>
|
||||
<Label>Author</Label>
|
||||
<Input id={'author'} name={'author'} type={'text'} value={egg.author} readOnly />
|
||||
</div>
|
||||
</AdminBox>
|
||||
);
|
||||
}
|
||||
|
||||
export function EggStartupContainer({ className }: { className?: string }) {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
return (
|
||||
<AdminBox icon={faTerminal} title={'Startup Command'} css={tw`relative`} className={className}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<Field id={'startup'} name={'startup'} label={'Startup Command'} type={'text'} css={tw`mb-1`} />
|
||||
</AdminBox>
|
||||
);
|
||||
}
|
||||
|
||||
export function EggImageContainer() {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
return (
|
||||
<AdminBox icon={faDocker} title={'Docker'} css={tw`relative`}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<TextareaField id={'dockerImages'} name={'dockerImages'} label={'Docker Images'} rows={5} />
|
||||
</AdminBox>
|
||||
);
|
||||
}
|
||||
|
||||
export function EggLifecycleContainer() {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
return (
|
||||
<AdminBox icon={faFireAlt} title={'Lifecycle'} css={tw`relative`}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<Field id={'configStop'} name={'configStop'} label={'Stop Command'} type={'text'} css={tw`mb-1`} />
|
||||
</AdminBox>
|
||||
);
|
||||
}
|
||||
|
||||
interface EggProcessContainerProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export interface EggProcessContainerRef {
|
||||
getStartupConfiguration: () => Promise<string | null>;
|
||||
getFilesConfiguration: () => Promise<string | null>;
|
||||
}
|
||||
|
||||
export const EggProcessContainer = forwardRef<any, EggProcessContainerProps>(function EggProcessContainer(
|
||||
{ className },
|
||||
ref,
|
||||
) {
|
||||
// const { isSubmitting, values } = useFormikContext<Values>();
|
||||
const { isSubmitting } = useFormikContext<Values>();
|
||||
|
||||
let fetchStartupConfiguration: (() => Promise<string>) | null = null;
|
||||
let fetchFilesConfiguration: (() => Promise<string>) | null = null;
|
||||
|
||||
useImperativeHandle<EggProcessContainerRef, EggProcessContainerRef>(ref, () => ({
|
||||
getStartupConfiguration: async () => {
|
||||
if (fetchStartupConfiguration === null) {
|
||||
return new Promise<null>(resolve => resolve(null));
|
||||
}
|
||||
return await fetchStartupConfiguration();
|
||||
},
|
||||
|
||||
getFilesConfiguration: async () => {
|
||||
if (fetchFilesConfiguration === null) {
|
||||
return new Promise<null>(resolve => resolve(null));
|
||||
}
|
||||
return await fetchFilesConfiguration();
|
||||
},
|
||||
}));
|
||||
|
||||
return (
|
||||
<AdminBox icon={faMicrochip} title={'Process Configuration'} css={tw`relative`} className={className}>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<div css={tw`mb-5`}>
|
||||
<Label>Startup Configuration</Label>
|
||||
{/*<Editor*/}
|
||||
{/* mode={jsonLanguage}*/}
|
||||
{/* initialContent={values.configStartup}*/}
|
||||
{/* overrides={tw`h-32 rounded`}*/}
|
||||
{/* fetchContent={value => {*/}
|
||||
{/* fetchStartupConfiguration = value;*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-1`}>
|
||||
<Label>Configuration Files</Label>
|
||||
{/*<Editor*/}
|
||||
{/* mode={jsonLanguage}*/}
|
||||
{/* initialContent={values.configFiles}*/}
|
||||
{/* overrides={tw`h-48 rounded`}*/}
|
||||
{/* fetchContent={value => {*/}
|
||||
{/* fetchFilesConfiguration = value;*/}
|
||||
{/* }}*/}
|
||||
{/*/>*/}
|
||||
</div>
|
||||
</AdminBox>
|
||||
);
|
||||
});
|
||||
|
||||
interface Values {
|
||||
name: string;
|
||||
description: string;
|
||||
startup: string;
|
||||
dockerImages: string;
|
||||
configStop: string;
|
||||
configStartup: string;
|
||||
configFiles: string;
|
||||
}
|
||||
|
||||
export default function EggSettingsContainer() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const ref = useRef<EggProcessContainerRef>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
|
||||
const { data: egg } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const submit = async (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
clearFlashes('egg');
|
||||
|
||||
values.configStartup = (await ref.current?.getStartupConfiguration()) || '';
|
||||
values.configFiles = (await ref.current?.getFilesConfiguration()) || '';
|
||||
|
||||
updateEgg(egg.id, {
|
||||
...values,
|
||||
// TODO
|
||||
dockerImages: {},
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'egg', error });
|
||||
})
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
name: egg.name,
|
||||
description: egg.description || '',
|
||||
startup: egg.startup,
|
||||
// TODO
|
||||
dockerImages: egg.dockerImages.toString(),
|
||||
configStop: egg.configStop || '',
|
||||
configStartup: JSON.stringify(egg.configStartup, null, '\t') || '',
|
||||
configFiles: JSON.stringify(egg.configFiles, null, '\t') || '',
|
||||
}}
|
||||
validationSchema={object().shape({})}
|
||||
>
|
||||
{({ isSubmitting, isValid }) => (
|
||||
<Form>
|
||||
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
|
||||
<EggInformationContainer />
|
||||
<EggDetailsContainer />
|
||||
</div>
|
||||
|
||||
<EggStartupContainer css={tw`mb-6`} />
|
||||
|
||||
<div css={tw`grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-6`}>
|
||||
<EggImageContainer />
|
||||
<EggLifecycleContainer />
|
||||
</div>
|
||||
|
||||
<EggProcessContainer ref={ref} css={tw`mb-6`} />
|
||||
|
||||
<div css={tw`bg-neutral-700 rounded shadow-md px-4 xl:px-5 py-4 mb-16`}>
|
||||
<div css={tw`flex flex-row`}>
|
||||
<EggDeleteButton eggId={egg.id} onDeleted={() => navigate('/admin/nests')} />
|
||||
<EggExportButton css={tw`ml-auto mr-4`} />
|
||||
<Button type="submit" size="small" disabled={isSubmitting || !isValid}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
import { TrashIcon } from '@heroicons/react/outline';
|
||||
import type { FormikHelpers } from 'formik';
|
||||
import { Form, Formik, useFormikContext } from 'formik';
|
||||
import { useState } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
import { array, boolean, object, string } from 'yup';
|
||||
|
||||
import deleteEggVariable from '@/api/admin/eggs/deleteEggVariable';
|
||||
import updateEggVariables from '@/api/admin/eggs/updateEggVariables';
|
||||
import { NoItems } from '@/components/admin/AdminTable';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import type { EggVariable } from '@/api/admin/egg';
|
||||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
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';
|
||||
import Field, { FieldRow, TextareaField } from '@/components/elements/Field';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
|
||||
export const validationSchema = object().shape({
|
||||
name: string().required().min(1).max(191),
|
||||
description: string(),
|
||||
environmentVariable: string().required().min(1).max(191),
|
||||
defaultValue: string(),
|
||||
isUserViewable: boolean().required(),
|
||||
isUserEditable: 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}environmentVariable`}
|
||||
name={`${prefix}environmentVariable`}
|
||||
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}isUserViewable`} name={`${prefix}isUserViewable`} label={'User Viewable'} />
|
||||
|
||||
<Checkbox
|
||||
id={`${prefix}isUserEditable`}
|
||||
name={`${prefix}isUserEditable`}
|
||||
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 EggVariableDeleteButton({ onClick }: { onClick: (success: () => void) => void }) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const onDelete = () => {
|
||||
setLoading(true);
|
||||
|
||||
onClick(() => {
|
||||
//setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmationModal
|
||||
visible={visible}
|
||||
title={'Delete variable?'}
|
||||
buttonText={'Yes, delete variable'}
|
||||
onConfirmed={onDelete}
|
||||
showSpinnerOverlay={loading}
|
||||
onModalDismissed={() => setVisible(false)}
|
||||
>
|
||||
Are you sure you want to delete this variable? Deleting this variable will delete it from every server
|
||||
using this egg.
|
||||
</ConfirmationModal>
|
||||
|
||||
<button
|
||||
type={'button'}
|
||||
css={tw`ml-auto text-neutral-500 hover:text-neutral-300`}
|
||||
onClick={() => setVisible(true)}
|
||||
>
|
||||
<TrashIcon css={tw`h-5 w-5`} />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function EggVariableBox({
|
||||
onDeleteClick,
|
||||
variable,
|
||||
prefix,
|
||||
}: {
|
||||
onDeleteClick: (success: () => void) => void;
|
||||
variable: EggVariable;
|
||||
prefix: string;
|
||||
}) {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
return (
|
||||
<AdminBox
|
||||
css={tw`relative w-full`}
|
||||
title={<p css={tw`text-sm uppercase`}>{variable.name}</p>}
|
||||
button={<EggVariableDeleteButton onClick={onDeleteClick} />}
|
||||
>
|
||||
<SpinnerOverlay visible={isSubmitting} />
|
||||
|
||||
<EggVariableForm prefix={prefix} />
|
||||
</AdminBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default function EggVariablesContainer() {
|
||||
const { clearAndAddHttpError } = useFlash();
|
||||
|
||||
const { data: egg, mutate } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const submit = (values: EggVariable[], { setSubmitting }: FormikHelpers<EggVariable[]>) => {
|
||||
updateEggVariables(egg.id, values)
|
||||
.then(async () => await mutate())
|
||||
.catch(error => clearAndAddHttpError({ key: 'egg', error }))
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={egg.relationships.variables}
|
||||
validationSchema={array().of(validationSchema)}
|
||||
>
|
||||
{({ isSubmitting, isValid }) => (
|
||||
<Form>
|
||||
<div css={tw`flex flex-col mb-16`}>
|
||||
{egg.relationships.variables?.length === 0 ? (
|
||||
<NoItems css={tw`bg-neutral-700 rounded-md shadow-md`} />
|
||||
) : (
|
||||
<div css={tw`grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-x-8 gap-y-6`}>
|
||||
{egg.relationships.variables.map((v, i) => (
|
||||
<EggVariableBox
|
||||
key={i}
|
||||
prefix={`[${i}].`}
|
||||
variable={v}
|
||||
onDeleteClick={success => {
|
||||
deleteEggVariable(egg.id, v.id)
|
||||
.then(async () => {
|
||||
await mutate(egg => ({
|
||||
...egg!,
|
||||
relationships: {
|
||||
...egg!.relationships,
|
||||
variables: egg!.relationships.variables!.filter(
|
||||
v2 => v.id === v2.id,
|
||||
),
|
||||
},
|
||||
}));
|
||||
success();
|
||||
})
|
||||
.catch(error => clearAndAddHttpError({ key: 'egg', error }));
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div css={tw`bg-neutral-700 rounded shadow-md py-2 px-4 mt-6`}>
|
||||
<div css={tw`flex flex-row`}>
|
||||
<NewVariableButton />
|
||||
|
||||
<Button
|
||||
type={'submit'}
|
||||
size={'small'}
|
||||
css={tw`ml-auto`}
|
||||
disabled={isSubmitting || !isValid}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
import type { FormikHelpers } from 'formik';
|
||||
import { Form, Formik, useFormikContext } from 'formik';
|
||||
import { useState } from 'react';
|
||||
import tw from 'twin.macro';
|
||||
|
||||
import type { CreateEggVariable } from '@/api/admin/eggs/createEggVariable';
|
||||
import createEggVariable from '@/api/admin/eggs/createEggVariable';
|
||||
import { useEggFromRoute } from '@/api/admin/egg';
|
||||
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() {
|
||||
const { setValues } = useFormikContext();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlash();
|
||||
|
||||
const { data: egg, mutate } = useEggFromRoute();
|
||||
|
||||
if (!egg) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const submit = (values: CreateEggVariable, { setSubmitting }: FormikHelpers<CreateEggVariable>) => {
|
||||
clearFlashes('variable:create');
|
||||
|
||||
createEggVariable(egg.id, values)
|
||||
.then(async variable => {
|
||||
setValues([...egg.relationships.variables, variable]);
|
||||
await mutate(egg => ({
|
||||
...egg!,
|
||||
relationships: { ...egg!.relationships, variables: [...egg!.relationships.variables, variable] },
|
||||
}));
|
||||
setVisible(false);
|
||||
})
|
||||
.catch(error => {
|
||||
clearAndAddHttpError({ key: 'variable:create', error });
|
||||
setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
name: '',
|
||||
description: '',
|
||||
environmentVariable: '',
|
||||
defaultValue: '',
|
||||
isUserViewable: false,
|
||||
isUserEditable: false,
|
||||
rules: '',
|
||||
}}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{({ isSubmitting, isValid, 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'}
|
||||
disabled={isSubmitting || !isValid}
|
||||
>
|
||||
Create Variable
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
<Button type={'button'} color={'green'} onClick={() => setVisible(true)}>
|
||||
New Variable
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue