🛂 Adds access control options to interatvie editor menu (#485)

src/components/InteractiveEditor/EditModeSaveMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- Intro Info -->
   <div class="edit-mode-bottom-banner">
-    <div class="edit-banner-section intro-container">
+    <div class="edit-banner-section intro-container"  v-if="showEditMsg">
       <p class="section-sub-title edit-mode-intro l-1">
         {{ $t('interactive-editor.menu.edit-mode-subtitle') }}
       </p>
@@ -9,6 +9,9 @@
         {{ $t('interactive-editor.menu.edit-mode-description') }}
       </p>
     </div>
+    <div class="edit-banner-section intro-container" v-else>
+      <AccessError class="no-permission" />
+    </div>
     <div class="edit-banner-section empty-space"></div>
     <!-- Save Buttons -->
     <div class="edit-banner-section save-buttons-container">
@@ -17,7 +20,7 @@
       </p>
       <Button
         :click="saveLocally"
-        :disallow="!allowSaveLocally"
+        :disallow="!permissions.allowSaveLocally"
         v-tooltip="tooltip($t('interactive-editor.menu.save-locally-tooltip'))"
       >
         {{ $t('interactive-editor.menu.save-locally-btn') }}
@@ -25,7 +28,7 @@
       </Button>
       <Button
         :click="writeToDisk"
-        :disallow="!allowWriteToDisk"
+        :disallow="!permissions.allowWriteToDisk"
         v-tooltip="tooltip($t('interactive-editor.menu.save-disk-tooltip'))"
       >
         {{ $t('interactive-editor.menu.save-disk-btn') }}
@@ -33,6 +36,7 @@
       </Button>
       <Button
         :click="openExportConfigMenu"
+        :disallow="!permissions.allowViewConfig"
         v-tooltip="tooltip($t('interactive-editor.menu.export-config-tooltip'))"
       >
         {{ $t('interactive-editor.menu.export-config-btn') }}
@@ -53,6 +57,7 @@
       </p>
       <Button
         :click="openEditPageInfo"
+        :disallow="!permissions.allowViewConfig"
         v-tooltip="tooltip($t('interactive-editor.menu.edit-page-info-tooltip'))"
       >
         {{ $t('interactive-editor.menu.edit-page-info-btn') }}
@@ -60,6 +65,7 @@
       </Button>
       <Button
         :click="openEditAppConfig"
+        :disallow="!permissions.allowViewConfig"
         v-tooltip="tooltip($t('interactive-editor.menu.edit-app-config-tooltip'))"
       >
         {{ $t('interactive-editor.menu.edit-app-config-btn') }}
@@ -83,7 +89,7 @@ import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
 import EditAppConfig from '@/components/InteractiveEditor/EditAppConfig';
 import { modalNames, localStorageKeys, serviceEndpoints } from '@/utils/defaults';
 import ErrorHandler, { InfoHandler } from '@/utils/ErrorHandler';
-import { isUserAdmin } from '@/utils/Auth';
+import AccessError from '@/components/Configuration/AccessError';
 
 import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
 import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
@@ -104,21 +110,18 @@ export default {
     AppConfigIcon,
     PageInfoIcon,
     EditAppConfig,
+    AccessError,
   },
   computed: {
     config() {
       return this.$store.state.config;
     },
-    allowWriteToDisk() {
-      const { appConfig } = this.config;
-      if (appConfig.preventWriteToDisk) return false;
-      if (appConfig.allowConfigEdit === false) return false;
-      if (!isUserAdmin()) return false; // If auth configured, but user NOT admin
-      return true;
+    permissions() {
+      // Returns: { allowWriteToDisk, allowSaveLocally, allowViewConfig }
+      return this.$store.getters.permissions;
     },
-    allowSaveLocally() {
-      if (this.config.appConfig.preventLocalSave) return false;
-      return true;
+    showEditMsg() {
+      return this.permissions.allowWriteToDisk || this.permissions.allowSaveLocally;
     },
   },
   data() {
@@ -157,7 +160,7 @@ export default {
       localStorage.removeItem(localStorageKeys.CONF_SECTIONS);
     },
     saveLocally() {
-      if (!this.allowSaveLocally) {
+      if (!this.permissions.allowSaveLocally) {
         ErrorHandler('Unable to save changes locally, this feature has been disabled');
         return;
       }
@@ -244,11 +247,16 @@ div.edit-mode-bottom-banner {
     }
     /* Intro-text container */
     &.intro-container  {
-        p.edit-mode-intro {
+      p.edit-mode-intro {
         margin: 0;
         color: var(--interactive-editor-color);
         cursor: default;
       }
+      .no-permission {
+        margin: 0;
+        width: auto;
+        padding: 0 0.5rem;
+      }
     }
     /* Button containers */
     &.edit-site-config-buttons,