ui: organize and tweak to flash messages

This commit is contained in:
Matthew Penner 2021-11-17 13:52:06 -07:00
parent d8da79b7fb
commit 9c92d51e28
No known key found for this signature in database
GPG key ID: BAB67850901908A8
18 changed files with 36 additions and 36 deletions

View file

@ -25,7 +25,7 @@ const EggRouter = () => {
useEffect(() => { useEffect(() => {
if (!error) clearFlashes('egg'); if (!error) clearFlashes('egg');
if (error) clearAndAddHttpError({ error, key: 'egg' }); if (error) clearAndAddHttpError({ key: 'egg', error });
}, [ error ]); }, [ error ]);
if (!egg || (error && isValidating)) { if (!egg || (error && isValidating)) {

View file

@ -26,7 +26,7 @@ export default () => {
useEffect(() => { useEffect(() => {
if (!error) clearFlashes('server'); if (!error) clearFlashes('server');
if (error) clearAndAddHttpError({ error, key: 'server' }); if (error) clearAndAddHttpError({ key: 'server', error });
}, [ error ]); }, [ error ]);
if (!server || (error && isValidating)) { if (!server || (error && isValidating)) {

View file

@ -21,7 +21,7 @@ export default () => {
</div> </div>
</div> </div>
<FlashMessageRender byKey={'settings'} css={tw`mb-4`}/> <FlashMessageRender byKey={'admin:settings'} css={tw`mb-4`}/>
<SubNavigation> <SubNavigation>
<SubNavigationLink to="/admin/settings" name="General"> <SubNavigationLink to="/admin/settings" name="General">

View file

@ -30,7 +30,7 @@ const DisableTwoFactorModal = () => {
.catch(error => { .catch(error => {
console.error(error); console.error(error);
clearAndAddHttpError({ error, key: 'account:two-factor' }); clearAndAddHttpError({ key: 'account:two-factor', error });
setSubmitting(false); setSubmitting(false);
setPropOverrides(null); setPropOverrides(null);
}); });

View file

@ -31,7 +31,7 @@ const SetupTwoFactorModal = () => {
.then(setToken) .then(setToken)
.catch(error => { .catch(error => {
console.error(error); console.error(error);
clearAndAddHttpError({ error, key: 'account:two-factor' }); clearAndAddHttpError({ key: 'account:two-factor', error });
}); });
}, []); }, []);
@ -44,7 +44,7 @@ const SetupTwoFactorModal = () => {
.catch(error => { .catch(error => {
console.error(error); console.error(error);
clearAndAddHttpError({ error, key: 'account:two-factor' }); clearAndAddHttpError({ key: 'account:two-factor', error });
}) })
.then(() => { .then(() => {
setSubmitting(false); setSubmitting(false);

View file

@ -25,7 +25,7 @@ const BackupContainer = () => {
return; return;
} }
clearAndAddHttpError({ error, key: 'backups' }); clearAndAddHttpError({ key: 'backups', error });
}, [ error ]); }, [ error ]);
if (!backups || (error && isValidating)) { if (!backups || (error && isValidating)) {

View file

@ -50,7 +50,7 @@ const JavaVersionModalFeature = () => {
const updateJava = () => { const updateJava = () => {
setLoading(true); setLoading(true);
clearFlashes('feature:javaVersion'); clearFlashes('feature:java-version');
setSelectedDockerImage(uuid, selectedVersion) setSelectedDockerImage(uuid, selectedVersion)
.then(() => { .then(() => {
@ -63,39 +63,38 @@ const JavaVersionModalFeature = () => {
}) })
.catch(error => { .catch(error => {
console.error(error); console.error(error);
clearAndAddHttpError({ key: 'feature:javaVersion', error }); clearAndAddHttpError({ key: 'feature:java-version', error });
}) })
.then(() => setLoading(false)); .then(() => setLoading(false));
}; };
useEffect(() => { useEffect(() => {
clearFlashes('feature:javaVersion'); clearFlashes('feature:java-version');
}, []); }, []);
return ( return (
<Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}> <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
<FlashMessageRender key={'feature:javaVersion'} css={tw`mb-4`}/> <FlashMessageRender key={'feature:java-version'} css={tw`mb-4`}/>
<h2 css={tw`text-2xl mb-4 text-neutral-100`}>Invalid Java version, update Docker image?</h2> <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Invalid Java version, update Docker image?</h2>
<p css={tw`mt-4`}>This server is unable to start due to the required Java version not being met.</p> <p css={tw`mt-4`}>This server is unable to start due to the required Java version not being met.</p>
<p css={tw`mt-4`}>By pressing {'"Update Docker Image"'} below you are acknowledging that the Docker image this server uses will be changed to an image below that has the Java version you are requesting.</p> <p css={tw`mt-4`}>By pressing {'"Update Docker Image"'} below you are acknowledging that the Docker image this server uses will be changed to an image below that has the Java version you are requesting.</p>
<div css={tw`sm:flex items-center mt-4`}> <div css={tw`sm:flex items-center mt-4`}>
<p>Please select a Java version from the list below.</p> <p>Please select a Java version from the list below.</p>
<Select <Select onChange={e => setSelectedVersion(e.target.value)}>
onChange={e => setSelectedVersion(e.target.value)} {dockerImageList.map((key, index) => (
> <option key={index} value={key.image}>{key.name}</option>
{dockerImageList.map((key, index) => { ))}
return (
<option key={index} value={key.image}>{key.name}</option>
);
})}
</Select> </Select>
</div> </div>
<div css={tw`mt-8 sm:flex items-center justify-end`}> <div css={tw`mt-8 sm:flex items-center justify-end`}>
<Button isSecondary onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}> <Button isSecondary onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
Cancel Cancel
</Button> </Button>
<Button onClick={updateJava} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}> <Button onClick={updateJava} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}>
Update Docker Image Update Docker Image
</Button> </Button>
</div> </div>
</Modal> </Modal>

View file

@ -73,7 +73,7 @@ export default () => {
}) })
.catch(error => { .catch(error => {
console.error(error); console.error(error);
addError({ message: httpErrorToHuman(error), key: 'files:view' }); addError({ key: 'files:view', message: httpErrorToHuman(error) });
}) })
.then(() => setLoading(false)); .then(() => setLoading(false));
}; };

View file

@ -110,7 +110,7 @@ export default ({ className }: WithClassname) => {
.then(() => mutate()) .then(() => mutate())
.catch(error => { .catch(error => {
console.error(error); console.error(error);
clearAndAddHttpError({ error, key: 'files' }); clearAndAddHttpError({ key: 'files', error });
}); });
}; };

View file

@ -24,7 +24,7 @@ const RunScheduleButton = ({ schedule }: { schedule: Schedule }) => {
}) })
.catch(error => { .catch(error => {
console.error(error); console.error(error);
clearAndAddHttpError({ error, key: 'schedules' }); clearAndAddHttpError({ key: 'schedules', error });
}) })
.then(() => setLoading(false)); .then(() => setLoading(false));
}, []); }, []);

View file

@ -31,7 +31,7 @@ export default () => {
getServerSchedules(uuid) getServerSchedules(uuid)
.then(schedules => setSchedules(schedules)) .then(schedules => setSchedules(schedules))
.catch(error => { .catch(error => {
addError({ message: httpErrorToHuman(error), key: 'schedules' }); addError({ key: 'schedules', message: httpErrorToHuman(error) });
console.error(error); console.error(error);
}) })
.then(() => setLoading(false)); .then(() => setLoading(false));

View file

@ -65,7 +65,7 @@ export default () => {
.then(schedule => appendSchedule(schedule)) .then(schedule => appendSchedule(schedule))
.catch(error => { .catch(error => {
console.error(error); console.error(error);
clearAndAddHttpError({ error, key: 'schedules' }); clearAndAddHttpError({ key: 'schedules', error });
}) })
.then(() => setIsLoading(false)); .then(() => setIsLoading(false));
}, [ scheduleId ]); }, [ scheduleId ]);

View file

@ -58,7 +58,7 @@ export default ({ schedule, task }: Props) => {
.catch(error => { .catch(error => {
console.error(error); console.error(error);
setIsLoading(false); setIsLoading(false);
addError({ message: httpErrorToHuman(error), key: 'schedules' }); addError({ key: 'schedules', message: httpErrorToHuman(error) });
}); });
}; };

View file

@ -81,7 +81,7 @@ const TaskDetailsModal = ({ schedule, task }: Props) => {
clearFlashes('schedule:task'); clearFlashes('schedule:task');
if (backupLimit === 0 && values.action === 'backup') { if (backupLimit === 0 && values.action === 'backup') {
setSubmitting(false); setSubmitting(false);
addError({ message: 'A backup task cannot be created when the server\'s backup limit is set to 0.', key: 'schedule:task' }); addError({ key: 'schedule:task', message: 'A backup task cannot be created when the server\'s backup limit is set to 0.' });
} else { } else {
createOrUpdateScheduleTask(uuid, schedule.id, task?.id, values) createOrUpdateScheduleTask(uuid, schedule.id, task?.id, values)
.then(task => { .then(task => {
@ -96,7 +96,7 @@ const TaskDetailsModal = ({ schedule, task }: Props) => {
.catch(error => { .catch(error => {
console.error(error); console.error(error);
setSubmitting(false); setSubmitting(false);
addError({ message: httpErrorToHuman(error), key: 'schedule:task' }); addError({ key: 'schedule:task', message: httpErrorToHuman(error) });
}); });
} }
}; };

View file

@ -16,12 +16,12 @@ export default () => {
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes); const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const reinstall = () => { const reinstall = () => {
clearFlashes('settings'); clearFlashes('server:settings');
setIsSubmitting(true); setIsSubmitting(true);
reinstallServer(uuid) reinstallServer(uuid)
.then(() => { .then(() => {
addFlash({ addFlash({
key: 'settings', key: 'server:settings',
type: 'success', type: 'success',
message: 'Your server has begun the reinstallation process.', message: 'Your server has begun the reinstallation process.',
}); });
@ -29,7 +29,7 @@ export default () => {
.catch(error => { .catch(error => {
console.error(error); console.error(error);
addFlash({ key: 'settings', type: 'error', message: httpErrorToHuman(error) }); addFlash({ key: 'server:settings', type: 'error', message: httpErrorToHuman(error) });
}) })
.then(() => { .then(() => {
setIsSubmitting(false); setIsSubmitting(false);

View file

@ -45,12 +45,12 @@ export default () => {
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes); const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const submit = ({ name }: Values, { setSubmitting }: FormikHelpers<Values>) => { const submit = ({ name }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('settings'); clearFlashes('server:settings');
renameServer(server.uuid, name) renameServer(server.uuid, name)
.then(() => setServer({ ...server, name })) .then(() => setServer({ ...server, name }))
.catch(error => { .catch(error => {
console.error(error); console.error(error);
addError({ key: 'settings', message: httpErrorToHuman(error) }); addError({ key: 'server:settings', message: httpErrorToHuman(error) });
}) })
.then(() => setSubmitting(false)); .then(() => setSubmitting(false));
}; };

View file

@ -23,7 +23,8 @@ export default () => {
return ( return (
<ServerContentBlock title={'Settings'}> <ServerContentBlock title={'Settings'}>
<FlashMessageRender byKey={'settings'} css={tw`mb-4`}/> <FlashMessageRender byKey={'server:settings'} css={tw`mb-4`}/>
<div css={tw`md:flex`}> <div css={tw`md:flex`}>
<div css={tw`w-full md:flex-1 md:mr-10`}> <div css={tw`w-full md:flex-1 md:mr-10`}>
<Can action={'file.sftp'}> <Can action={'file.sftp'}>

View file

@ -38,7 +38,7 @@ const VariableBox = ({ variable }: Props) => {
}), false)) }), false))
.catch(error => { .catch(error => {
console.error(error); console.error(error);
clearAndAddHttpError({ error, key: FLASH_KEY }); clearAndAddHttpError({ key: FLASH_KEY, error });
}) })
.then(() => setLoading(false)); .then(() => setLoading(false));
}, 500); }, 500);