🛂 Adds access control checks in editor forms (#455)

src/components/InteractiveEditor/EditAppConfig.vue

@@ -7,7 +7,7 @@
     classes="dashy-modal edit-app-config"
     @closed="modalClosed"
   >
-  <div class="edit-app-config-inner">
+  <div class="edit-app-config-inner" v-if="allowViewConfig">
   <h3>{{ $t('interactive-editor.menu.edit-app-config-btn') }}</h3>
   <!-- Show caution message -->
   <div class="app-config-intro">
@@ -35,6 +35,7 @@
   <!-- Save Button, lower -->
   <SaveCancelButtons :saveClick="saveToState" :cancelClick="cancelEditing" />
   </div>
+  <AccessError v-else />
   </modal>
 </template>
 
@@ -43,6 +44,7 @@ import FormSchema from '@formschema/native';
 import DashySchema from '@/utils/ConfigSchema';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
+import AccessError from '@/components/Configuration/AccessError';
 import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
 
 export default {
@@ -58,6 +60,7 @@ export default {
   components: {
     FormSchema,
     SaveCancelButtons,
+    AccessError,
   },
   mounted() {
     this.formData = this.appConfig;
@@ -66,6 +69,9 @@ export default {
     appConfig() {
       return this.$store.getters.appConfig;
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   methods: {
     /* When form submitteed, update VueX store with new appConfig, and close modal */

src/components/InteractiveEditor/EditItem.vue

@@ -7,7 +7,7 @@
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
-  <div class="edit-item-inner">
+  <div class="edit-item-inner" v-if="allowViewConfig">
     <!-- Title and Item ID -->
     <h3 class="title">Edit Item</h3>
     <p class="sub-title">Editing {{item.title}} (ID: {{itemId}})</p>
@@ -67,6 +67,7 @@
     <!-- Save to state button -->
     <SaveCancelButtons :saveClick="saveItem" :cancelClick="modalClosed" />
     </div>
+    <AccessError v-else />
   </modal>
 </template>
 
@@ -74,6 +75,7 @@
 import AddIcon from '@/assets/interface-icons/interactive-editor-add.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
 import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
+import AccessError from '@/components/Configuration/AccessError';
 import Input from '@/components/FormElements/Input';
 import Radio from '@/components/FormElements/Radio';
 import Select from '@/components/FormElements/Select';
@@ -101,13 +103,18 @@ export default {
     isNew: Boolean,
     parentSectionTitle: String, // If adding new item, which section to add it under
   },
-  computed: {},
+  computed: {
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
+  },
   components: {
     Input,
     Radio,
     Select,
     AddIcon,
     BinIcon,
+    AccessError,
     SaveCancelButtons,
   },
   mounted() {

src/components/InteractiveEditor/EditPageInfo.vue

@@ -4,7 +4,7 @@
     :resizable="true" width="50%" height="80%"
     classes="dashy-modal edit-page-info"
   >
-  <div class="edit-page-info-inner">
+  <div class="edit-page-info-inner" v-if="allowViewConfig">
   <h3>{{ $t('interactive-editor.menu.edit-page-info-btn') }}</h3>
   <FormSchema
     :schema="schema"
@@ -19,6 +19,7 @@
     </Button>
   </FormSchema>
   </div>
+  <AccessError v-else />
   </modal>
 </template>
 
@@ -29,6 +30,7 @@ import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
 import Button from '@/components/FormElements/Button';
 import SaveIcon from '@/assets/interface-icons/save-config.svg';
+import AccessError from '@/components/Configuration/AccessError';
 
 export default {
   name: 'EditPageInfo',
@@ -43,6 +45,7 @@ export default {
     FormSchema,
     Button,
     SaveIcon,
+    AccessError,
   },
   mounted() {
     this.formData = this.pageInfo;
@@ -51,6 +54,9 @@ export default {
     pageInfo() {
       return this.$store.getters.pageInfo;
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   methods: {
     /* When form submitteed, update VueX store with new pageInfo, and close modal */

src/components/InteractiveEditor/EditSection.vue

@@ -4,7 +4,7 @@
     :resizable="true" width="50%" height="80%"
     classes="dashy-modal edit-section"
   >
-  <div class="edit-section-inner">
+  <div class="edit-section-inner" v-if="allowViewConfig">
     <h3>
       {{ $t(`interactive-editor.edit-section.${isAddNew ? 'add' : 'edit'}-section-title`) }}
     </h3>
@@ -19,6 +19,7 @@
       :cancelClick="modalClosed"
     />
     </div>
+    <AccessError v-else />
   </modal>
 </template>
 
@@ -28,6 +29,7 @@ import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
 import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
+import AccessError from '@/components/Configuration/AccessError';
 
 export default {
   name: 'EditSection',
@@ -38,6 +40,7 @@ export default {
   components: {
     SaveCancelButtons,
     FormSchema,
+    AccessError,
   },
   data() {
     return {
@@ -71,6 +74,9 @@ export default {
         },
       };
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   mounted() {
     this.sectionData = this.$store.getters.getSectionByIndex(this.sectionIndex);

src/components/InteractiveEditor/ExportConfigMenu.vue

@@ -4,10 +4,10 @@
     :resizable="true"
     width="50%"
     height="80%"
-    classes="dashy-modal edit-item"
+    classes="dashy-modal export-modal"
     @closed="modalClosed"
   >
-  <div class="export-config-inner">
+  <div class="export-config-inner" v-if="allowViewConfig">
     <!-- Download and Copy to CLipboard Buttons -->
     <h3>{{ $t('interactive-editor.export.export-title') }}</h3>
     <div class="download-button-container">
@@ -26,6 +26,7 @@
     <h3>{{ $t('interactive-editor.export.view-title') }}</h3>
     <tree-view :data="config" class="config-tree-view" />
   </div>
+  <AccessError v-else />
   </modal>
 </template>
 
@@ -34,6 +35,7 @@ import JsYaml from 'js-yaml';
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
+import AccessError from '@/components/Configuration/AccessError';
 import DownloadConfigIcon from '@/assets/interface-icons/config-download-file.svg';
 import CopyConfigIcon from '@/assets/interface-icons/interactive-editor-copy-clipboard.svg';
 import { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
@@ -42,6 +44,7 @@ export default {
   name: 'ExportConfigMenu',
   components: {
     Button,
+    AccessError,
     CopyConfigIcon,
     DownloadConfigIcon,
   },
@@ -55,6 +58,9 @@ export default {
     config() {
       return this.$store.state.config;
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   methods: {
     convertJsonToYaml() {
@@ -123,5 +129,8 @@ export default {
     }
   }
 }
+.export-modal {
+  background: var(--interactive-editor-background);
+}
 
 </style>

src/components/InteractiveEditor/MoveItemTo.vue

@@ -2,7 +2,7 @@
   <modal
     :name="modalName" @closed="close"
     :resizable="true" width="40%" height="40%" classes="dashy-modal">
-    <div class="move-menu-inner">
+    <div class="move-menu-inner" v-if="allowViewConfig">
     <!-- Title and item ID -->
       <h3 class="move-title">Move or Copy Item</h3>
       <p class="item-id">Editing {{ itemId }}</p>
@@ -30,6 +30,7 @@
       <!-- Save and cancel buttons -->
       <SaveCancelButtons :saveClick="save" :cancelClick="close" />
     </div>
+    <AccessError v-else />
   </modal>
 </template>
 
@@ -37,6 +38,7 @@
 import Select from '@/components/FormElements/Select';
 import Radio from '@/components/FormElements/Radio';
 import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
+import AccessError from '@/components/Configuration/AccessError';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
 
@@ -45,6 +47,7 @@ export default {
   components: {
     Select,
     Radio,
+    AccessError,
     SaveCancelButtons,
   },
   props: {
@@ -83,6 +86,9 @@ export default {
       });
       return sectionName;
     },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
   },
   mounted() {
     this.selectedSection = this.currentSection;