Add tooltip and success message after instance was rebooted

CHANGELOG.md

@@ -29,6 +29,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Report notes
 - Ability to moderate users on the statuses page
 - Ability to moderate user on the user's page
+- Ability to restart an application when settings that require instance reboot were changed
 - Mobile UI for Settings tab
 
 ### Fixed

src/lang/en.js

@@ -364,7 +364,9 @@ export default {
     emoji: 'Emoji',
     markup: 'Markup settings',
     corsPlug: 'CORS plug config',
-    instanceReboot: 'Instance Reboot'
+    instanceReboot: 'Instance Reboot',
+    restartApp: 'You must restart the instance to apply settings',
+    restartSuccess: 'Instance rebooted successfully!'
   },
   invites: {
     inviteTokens: 'Invite tokens',

src/views/settings/index.vue

@@ -4,12 +4,14 @@
       <div class="settings-header-container">
         <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
         <div>
-          <el-button v-if="needReboot" class="settings-reboot-button" @click="restartApp">
-            <span>
-              <i class="el-icon-refresh"/>
-              {{ $t('settings.instanceReboot') }}
-            </span>
-          </el-button>
+          <el-tooltip v-if="needReboot" :content="$t('settings.restartApp')" placement="bottom-end">
+            <el-button type="warning" class="settings-reboot-button" @click="restartApp">
+              <span>
+                <i class="el-icon-refresh"/>
+                {{ $t('settings.instanceReboot') }}
+              </span>
+            </el-button>
+          </el-tooltip>
           <el-link
             :underline="false"
             href="https://docs-develop.pleroma.social/backend/administration/CLI_tasks/config/"
@@ -244,8 +246,16 @@ export default {
     this.$store.dispatch('FetchSettings')
   },
   methods: {
-    restartApp() {
-      this.$store.dispatch('RestartApplication')
+    async restartApp() {
+      try {
+        await this.$store.dispatch('RestartApplication')
+      } catch (e) {
+        return
+      }
+      this.$message({
+        type: 'success',
+        message: i18n.t('settings.restartSuccess')
+      })
     }
   }
 }

src/views/settings/styles/main.scss

@@ -275,6 +275,7 @@
     width: 145px;
     text-align: left;
     padding: 10px;
+    margin-right: 5px;
   }
   .single-input {
     margin-right: 10px