Add ability to remove instance panel doc

src/lang/en.js

@@ -438,7 +438,8 @@ export default {
     removeSettingConfirmation: 'Are you sure you want to remove this setting\'s value from the database?',
     changeImage: 'Change image',
     uploadImage: 'Upload image',
-    remove: 'Remove'
+    remove: 'Remove',
+    instancePanel: 'Instance Panel Document'
   },
   invites: {
     inviteTokens: 'Invite tokens',

src/store/modules/settings.js

@@ -85,7 +85,7 @@ const settings = {
   actions: {
     async FetchInstanceDocument({ commit, getters }, name) {
       const { data } = await getInstanceDocument(name, getters.authHost, getters.token)
-      commit('SET_INSTANCE_PANEL', data.url)
+      commit('SET_INSTANCE_PANEL', data)
     },
     async FetchSettings({ commit, getters }) {
       commit('SET_LOADING', true)
@@ -105,8 +105,9 @@ const settings = {
       commit('TOGGLE_TABS', false)
       commit('SET_LOADING', false)
     },
-    async RemoveInstanceDocument({ getters }, name) {
+    async RemoveInstanceDocument({ dispatch, getters }, name) {
       await deleteInstanceDocument(name, getters.authHost, getters.token)
+      await dispatch('FetchInstanceDocument', 'instance-panel')
     },
     async RemoveSetting({ commit, getters }, configs) {
       await removeSettings(configs, getters.authHost, getters.token)
@@ -130,7 +131,8 @@ const settings = {
       commit('TOGGLE_REBOOT', response.data.need_reboot)
       commit('CLEAR_UPDATED_SETTINGS')
     },
-    async UpdateInstanceDocs({ getters }, { name, content }) {
+    async UpdateInstanceDocs({ commit, getters }, { name, content }) {
+      commit('SET_INSTANCE_PANEL', content)
       const formData = new FormData()
       const blob = new Blob([content], { type: 'text/html' })
       formData.append('file', blob)

src/views/settings/components/Instance.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="!loading" :class="isSidebarOpen" class="form-container">
-    <editor-input :content="instancePanelContent" @input="handleEditorUpdate"/>
     <el-form :model="instanceData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
+    <editor-input :content="instancePanelContent" @input="handleEditorUpdate"/>
     <el-divider v-if="instance" class="divider thick-line"/>
     <el-form :model="restrictUnauthenticatedData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="restrictUnauthenticated" :data="restrictUnauthenticatedData"/>

src/views/settings/components/inputComponents/EditorInput.vue

@@ -1,6 +1,12 @@
 <template>
   <el-form :label-position="labelPosition" :label-width="labelWidth">
     <el-form-item label="Instance panel doc" class="editor-form-item">
+      <span slot="label">
+        {{ $t('settings.instancePanel') }}
+        <el-tooltip :content="$t('settings.removeFromDB')" placement="bottom-end">
+          <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeInstanceDoc"/>
+        </el-tooltip>
+      </span>
       <div class="editor">
         <editor-menu-bar v-slot="{ commands, isActive }" :editor="editor">
           <div class="menubar">
@@ -165,6 +171,12 @@ export default {
   },
   beforeDestroy() {
     this.editor.destroy()
+  },
+  methods: {
+    async removeInstanceDoc(name) {
+      await this.$store.dispatch('RemoveInstanceDocument', 'instance-panel')
+      this.editor.setContent(this.content)
+    }
   }
 }
 </script>