feat: show alert/prompt when settings changes require restart (#2401)

* fix: correct 'StatusChecker' typo

* feat: add restart required check to StatusChecker

* fix(perms): remove MANAGE_SETTINGS permission

* fix: allow alert to be dismissed

* fix(lang): add missing string in SettingsServices

* fix(frontend): fix modal icon border

* fix(frontend): un-dismiss alert if setting reverted not require server restart

* fix(backend): restart flag only needs to track main settings

* fix: rebase issue

* refactor: appease Prettier

* refactor: swap settings badge order

* fix: type import for MainSettings

* test: add cypress test for restart prompt

src/pages/settings/about.tsx

@@ -6,7 +6,7 @@ import useRouteGuard from '../../hooks/useRouteGuard';
 import { Permission } from '../../hooks/useUser';
 
 const SettingsAboutPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsAbout />

src/pages/settings/index.tsx

@@ -6,7 +6,7 @@ import useRouteGuard from '../../hooks/useRouteGuard';
 import { Permission } from '../../hooks/useUser';
 
 const SettingsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsMain />

src/pages/settings/jobs.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import type { NextPage } from 'next';
-import SettingsLayout from '../../components/Settings/SettingsLayout';
+import React from 'react';
 import SettingsJobs from '../../components/Settings/SettingsJobsCache';
-import { Permission } from '../../hooks/useUser';
+import SettingsLayout from '../../components/Settings/SettingsLayout';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const SettingsMainPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsJobs />

src/pages/settings/logs.tsx

@@ -6,7 +6,7 @@ import useRouteGuard from '../../hooks/useRouteGuard';
 import { Permission } from '../../hooks/useUser';
 
 const SettingsLogsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsLogs />

src/pages/settings/main.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import type { NextPage } from 'next';
 import SettingsLayout from '../../components/Settings/SettingsLayout';
 import SettingsMain from '../../components/Settings/SettingsMain';
-import { Permission } from '../../hooks/useUser';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const SettingsMainPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsMain />

src/pages/settings/notifications/discord.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/email.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/gotify.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/lunasea.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/pushbullet.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/pushover.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/slack.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsSlackPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/telegram.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/webhook.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/notifications/webpush.tsx

@@ -7,7 +7,7 @@ import useRouteGuard from '../../../hooks/useRouteGuard';
 import { Permission } from '../../../hooks/useUser';
 
 const NotificationsWebPushPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsNotifications>

src/pages/settings/plex.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import type { NextPage } from 'next';
+import React from 'react';
 import SettingsLayout from '../../components/Settings/SettingsLayout';
 import SettingsPlex from '../../components/Settings/SettingsPlex';
-import { Permission } from '../../hooks/useUser';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const PlexSettingsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsPlex />

src/pages/settings/services.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
 import type { NextPage } from 'next';
+import React from 'react';
 import SettingsLayout from '../../components/Settings/SettingsLayout';
 import SettingsServices from '../../components/Settings/SettingsServices';
-import { Permission } from '../../hooks/useUser';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const ServicesSettingsPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsServices />

src/pages/settings/users.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import type { NextPage } from 'next';
 import SettingsLayout from '../../components/Settings/SettingsLayout';
 import SettingsUsers from '../../components/Settings/SettingsUsers';
-import { Permission } from '../../hooks/useUser';
 import useRouteGuard from '../../hooks/useRouteGuard';
+import { Permission } from '../../hooks/useUser';
 
 const SettingsUsersPage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_SETTINGS);
+  useRouteGuard(Permission.ADMIN);
   return (
     <SettingsLayout>
       <SettingsUsers />