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(() => {
if (!error) clearFlashes('egg');
if (error) clearAndAddHttpError({ error, key: 'egg' });
if (error) clearAndAddHttpError({ key: 'egg', error });
}, [ error ]);
if (!egg || (error && isValidating)) {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -50,7 +50,7 @@ const JavaVersionModalFeature = () => {
const updateJava = () => {
setLoading(true);
clearFlashes('feature:javaVersion');
clearFlashes('feature:java-version');
setSelectedDockerImage(uuid, selectedVersion)
.then(() => {
@ -63,39 +63,38 @@ const JavaVersionModalFeature = () => {
})
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'feature:javaVersion', error });
clearAndAddHttpError({ key: 'feature:java-version', error });
})
.then(() => setLoading(false));
};
useEffect(() => {
clearFlashes('feature:javaVersion');
clearFlashes('feature:java-version');
}, []);
return (
<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>
<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>
<div css={tw`sm:flex items-center mt-4`}>
<p>Please select a Java version from the list below.</p>
<Select
onChange={e => setSelectedVersion(e.target.value)}
>
{dockerImageList.map((key, index) => {
return (
<option key={index} value={key.image}>{key.name}</option>
);
})}
<Select onChange={e => setSelectedVersion(e.target.value)}>
{dockerImageList.map((key, index) => (
<option key={index} value={key.image}>{key.name}</option>
))}
</Select>
</div>
<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`}>
Cancel
Cancel
</Button>
<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>
</div>
</Modal>

View file

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

View file

@ -110,7 +110,7 @@ export default ({ className }: WithClassname) => {
.then(() => mutate())
.catch(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 => {
console.error(error);
clearAndAddHttpError({ error, key: 'schedules' });
clearAndAddHttpError({ key: 'schedules', error });
})
.then(() => setLoading(false));
}, []);

View file

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

View file

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

View file

@ -58,7 +58,7 @@ export default ({ schedule, task }: Props) => {
.catch(error => {
console.error(error);
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');
if (backupLimit === 0 && values.action === 'backup') {
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 {
createOrUpdateScheduleTask(uuid, schedule.id, task?.id, values)
.then(task => {
@ -96,7 +96,7 @@ const TaskDetailsModal = ({ schedule, task }: Props) => {
.catch(error => {
console.error(error);
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 reinstall = () => {
clearFlashes('settings');
clearFlashes('server:settings');
setIsSubmitting(true);
reinstallServer(uuid)
.then(() => {
addFlash({
key: 'settings',
key: 'server:settings',
type: 'success',
message: 'Your server has begun the reinstallation process.',
});
@ -29,7 +29,7 @@ export default () => {
.catch(error => {
console.error(error);
addFlash({ key: 'settings', type: 'error', message: httpErrorToHuman(error) });
addFlash({ key: 'server:settings', type: 'error', message: httpErrorToHuman(error) });
})
.then(() => {
setIsSubmitting(false);

View file

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

View file

@ -23,7 +23,8 @@ export default () => {
return (
<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`w-full md:flex-1 md:mr-10`}>
<Can action={'file.sftp'}>

View file

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