diff --git a/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx b/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx index e9905eb44..3a4e8d659 100644 --- a/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx +++ b/resources/scripts/components/admin/nests/eggs/EggVariablesContainer.tsx @@ -1,6 +1,7 @@ import deleteEggVariable from '@/api/admin/eggs/deleteEggVariable'; +import ConfirmationModal from '@/components/elements/ConfirmationModal'; import { Form, Formik, FormikHelpers, useFormikContext } from 'formik'; -import React from 'react'; +import React, { useState } from 'react'; import tw from 'twin.macro'; import { array, boolean, object, string } from 'yup'; import getEgg, { Egg, EggVariable } from '@/api/admin/eggs/getEgg'; @@ -12,6 +13,7 @@ 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'; +import { TrashIcon } from '@heroicons/react/outline'; export const validationSchema = object().shape({ name: string().required().min(1).max(191), @@ -84,25 +86,51 @@ export function EggVariableForm ({ prefix }: { prefix: string }) { ); } -function EggVariableBox ({ onDeleteClick, variable, prefix }: { onDeleteClick: () => void, variable: EggVariable, prefix: string }) { +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 ( + <> + setVisible(false)} + > + Are you sure you want to delete this variable? Deleting this variable will delete it from every server + using this egg. + + + + + ); +} + +function EggVariableBox ({ onDeleteClick, variable, prefix }: { onDeleteClick: (success: () => void) => void, variable: EggVariable, prefix: string }) { const { isSubmitting } = useFormikContext(); return ( {variable.name}

} - button={ - - } + button={} > @@ -138,14 +166,17 @@ export default function EggVariablesContainer ({ egg }: { egg: Egg }) { key={i} prefix={`[${i}].`} variable={v} - onDeleteClick={() => { + onDeleteClick={(success) => { deleteEggVariable(egg.id, v.id) - .then(async () => await mutate(egg => ({ - ...egg!, - relations: { - variables: egg!.relations.variables!.filter(v2 => v.id === v2.id), - }, - }))) + .then(async () => { + await mutate(egg => ({ + ...egg!, + relations: { + variables: egg!.relations.variables!.filter(v2 => v.id === v2.id), + }, + })); + success(); + }) .catch(error => clearAndAddHttpError({ key: 'egg', error })); }} /> diff --git a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx index ff9e93423..6646ebb3e 100644 --- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx +++ b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx @@ -13,7 +13,7 @@ import NetworkingBox from '@/components/admin/servers/settings/NetworkingBox'; import ServerResourceBox from '@/components/admin/servers/settings/ServerResourceBox'; export default () => { - const { data: server, mutate } = useServerFromRoute(); + const { data: server } = useServerFromRoute(); const { clearFlashes, clearAndAddHttpError } = useStoreActions(actions => actions.flashes); if (!server) return null; @@ -26,7 +26,7 @@ export default () => { values.limits.oomDisabled = !values.limits.oomDisabled; updateServer(server.id, values) - .then(s => { + .then(() => { // setServer({ ...server, ...s }); // TODO: Figure out how to properly clear react-selects for allocations.