From c8ad80b79c38381f1a2ba8cb8609d9341f224b2d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 12 Feb 2022 20:05:14 +0000
Subject: [PATCH] :passport_control: Adds access control checks in editor forms
 (#455)

---
 src/components/InteractiveEditor/EditAppConfig.vue  |  8 +++++++-
 src/components/InteractiveEditor/EditItem.vue       | 11 +++++++++--
 src/components/InteractiveEditor/EditPageInfo.vue   |  8 +++++++-
 src/components/InteractiveEditor/EditSection.vue    |  8 +++++++-
 .../InteractiveEditor/ExportConfigMenu.vue          | 13 +++++++++++--
 src/components/InteractiveEditor/MoveItemTo.vue     |  8 +++++++-
 6 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/src/components/InteractiveEditor/EditAppConfig.vue b/src/components/InteractiveEditor/EditAppConfig.vue
index 40fe430c..74f424b7 100644
--- a/src/components/InteractiveEditor/EditAppConfig.vue
+++ b/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 */
diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index 5be36839..2c89bf57 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/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() {
diff --git a/src/components/InteractiveEditor/EditPageInfo.vue b/src/components/InteractiveEditor/EditPageInfo.vue
index 71f978da..1cce90a5 100644
--- a/src/components/InteractiveEditor/EditPageInfo.vue
+++ b/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 */
diff --git a/src/components/InteractiveEditor/EditSection.vue b/src/components/InteractiveEditor/EditSection.vue
index 7e9b2635..7222a7a7 100644
--- a/src/components/InteractiveEditor/EditSection.vue
+++ b/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);
diff --git a/src/components/InteractiveEditor/ExportConfigMenu.vue b/src/components/InteractiveEditor/ExportConfigMenu.vue
index 1032e8bb..3b1bdf10 100644
--- a/src/components/InteractiveEditor/ExportConfigMenu.vue
+++ b/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>
diff --git a/src/components/InteractiveEditor/MoveItemTo.vue b/src/components/InteractiveEditor/MoveItemTo.vue
index 990d7d37..4633d2a2 100644
--- a/src/components/InteractiveEditor/MoveItemTo.vue
+++ b/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;