ui: organize and tweak to flash messages

resources/scripts/components/admin/nests/eggs/EggRouter.tsx

@@ -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)) {

resources/scripts/components/admin/servers/ServerRouter.tsx

@@ -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)) {

resources/scripts/components/admin/settings/SettingsContainer.tsx

@@ -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">

resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx

@@ -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);
             });

resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx

@@ -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);

resources/scripts/components/server/backups/BackupContainer.tsx

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

resources/scripts/components/server/features/java_version/JavaVersionModalFeature.tsx

@@ -50,7 +50,7 @@ const JavaVersionModalFeature = () => {
 
     const updateJava = () => {
         setLoading(true);
-        clearFlashes('feature:javaVersion');
+        clearFlashes('feature:java-version');
 
         setSelectedDockerImage(uuid, selectedVersion)
             .then(() => {
@@ -63,33 +63,32 @@ 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
+                <Select onChange={e => setSelectedVersion(e.target.value)}>
-                    onChange={e => setSelectedVersion(e.target.value)}
+                    {dockerImageList.map((key, index) => (
-                >
-                    {dockerImageList.map((key, index) => {
-                        return (
                         <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

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -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));
     };

resources/scripts/components/server/files/UploadButton.tsx

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

resources/scripts/components/server/schedules/RunScheduleButton.tsx

@@ -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));
     }, []);

resources/scripts/components/server/schedules/ScheduleContainer.tsx

@@ -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));

resources/scripts/components/server/schedules/ScheduleEditContainer.tsx

@@ -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 ]);

resources/scripts/components/server/schedules/ScheduleTaskRow.tsx

@@ -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) });
             });
     };
 

resources/scripts/components/server/schedules/TaskDetailsModal.tsx

@@ -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) });
                 });
         }
     };

resources/scripts/components/server/settings/ReinstallServerBox.tsx

@@ -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);

resources/scripts/components/server/settings/RenameServerBox.tsx

@@ -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));
     };

resources/scripts/components/server/settings/SettingsContainer.tsx

@@ -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'}>

resources/scripts/components/server/startup/VariableBox.tsx

@@ -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);