From e1550e5e3dc12e0e456cf30b8dc39f34d0494e8b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 12 Aug 2022 15:47:26 +0800
Subject: [PATCH] fix(gui-v2): add isUIAllowed in right nav bar

---
 .../smartsheet/sidebar/MenuBottom.vue         | 98 +++++++++++--------
 .../components/smartsheet/sidebar/index.vue   |  4 +-
 2 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index 4161776e6d..e23b8f3b4b 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -11,7 +11,10 @@ const emits = defineEmits<Emits>()
 
 const { $e } = useNuxtApp()
 
+const { isUIAllowed } = useUIPermission()
+
 const isView = ref(false)
+
 let showApiSnippet = $ref(false)
 
 const showWebhookDrawer = ref(false)
@@ -33,67 +36,76 @@ function onOpenModal(type: ViewTypes, title = '') {
 
 <template>
   <a-menu :selected-keys="[]" class="flex-1 flex flex-col">
-    <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
-      {{ $t('activity.createView') }}
-    </h3>
-
-    <a-menu-item key="grid" class="group !flex !items-center !my-0 !h-[30px]" @click="onOpenModal(ViewTypes.GRID)">
-      <a-tooltip placement="left">
-        <template #title>
-          {{ $t('msg.info.addView.grid') }}
-        </template>
+    <div v-if="isUIAllowed('virtualViewsCreateOrEdit')">
+      <h3 class="px-3 py-1 text-xs font-semibold flex items-center gap-4 text-gray-500">
+        {{ $t('activity.createView') }}
+      </h3>
 
-        <div class="text-xs flex items-center h-full w-full gap-2">
-          <component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" />
+      <a-menu-item key="grid" class="group !flex !items-center !my-0 !h-[30px]" @click="onOpenModal(ViewTypes.GRID)">
+        <a-tooltip placement="left">
+          <template #title>
+            {{ $t('msg.info.addView.grid') }}
+          </template>
 
-          <div>{{ $t('objects.viewType.grid') }}</div>
+          <div class="text-xs flex items-center h-full w-full gap-2">
+            <component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" />
 
-          <div class="flex-1" />
+            <div>{{ $t('objects.viewType.grid') }}</div>
 
-          <mdi-plus class="group-hover:text-primary" />
-        </div>
-      </a-tooltip>
-    </a-menu-item>
+            <div class="flex-1" />
 
-    <a-menu-item key="gallery" class="group !flex !items-center !-my0 !h-[30px]" @click="onOpenModal(ViewTypes.GALLERY)">
-      <a-tooltip placement="left">
-        <template #title>
-          {{ $t('msg.info.addView.gallery') }}
-        </template>
+            <mdi-plus class="group-hover:text-primary" />
+          </div>
+        </a-tooltip>
+      </a-menu-item>
 
-        <div class="text-xs flex items-center h-full w-full gap-2">
-          <component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" />
+      <a-menu-item key="gallery" class="group !flex !items-center !-my0 !h-[30px]" @click="onOpenModal(ViewTypes.GALLERY)">
+        <a-tooltip placement="left">
+          <template #title>
+            {{ $t('msg.info.addView.gallery') }}
+          </template>
 
-          <div>{{ $t('objects.viewType.gallery') }}</div>
+          <div class="text-xs flex items-center h-full w-full gap-2">
+            <component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" />
 
-          <div class="flex-1" />
+            <div>{{ $t('objects.viewType.gallery') }}</div>
 
-          <mdi-plus class="group-hover:text-primary" />
-        </div>
-      </a-tooltip>
-    </a-menu-item>
+            <div class="flex-1" />
 
-    <a-menu-item v-if="!isView" key="form" class="group !flex !items-center !my-0 !h-[30px]" @click="onOpenModal(ViewTypes.FORM)">
-      <a-tooltip placement="left">
-        <template #title>
-          {{ $t('msg.info.addView.form') }}
-        </template>
+            <mdi-plus class="group-hover:text-primary" />
+          </div>
+        </a-tooltip>
+      </a-menu-item>
+
+      <a-menu-item
+        v-if="!isView"
+        key="form"
+        class="group !flex !items-center !my-0 !h-[30px]"
+        @click="onOpenModal(ViewTypes.FORM)"
+      >
+        <a-tooltip placement="left">
+          <template #title>
+            {{ $t('msg.info.addView.form') }}
+          </template>
 
-        <div class="text-xs flex items-center h-full w-full gap-2">
-          <component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" />
+          <div class="text-xs flex items-center h-full w-full gap-2">
+            <component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" />
 
-          <div>{{ $t('objects.viewType.form') }}</div>
+            <div>{{ $t('objects.viewType.form') }}</div>
 
-          <div class="flex-1" />
+            <div class="flex-1" />
 
-          <mdi-plus class="group-hover:text-primary" />
-        </div>
-      </a-tooltip>
-    </a-menu-item>
+            <mdi-plus class="group-hover:text-primary" />
+          </div>
+        </a-tooltip>
+      </a-menu-item>
+    </div>
 
     <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
+
     <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
       <button
+        v-if="isUIAllowed('virtualViewsCreateOrEdit')"
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs"
         @click="onWebhooks"
       >
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 778de0ce1d..25746dc409 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -12,6 +12,8 @@ const activeView = inject(ActiveViewInj, ref())
 
 const { views, loadViews } = useViews(meta)
 
+const { isUIAllowed } = useUIPermission()
+
 const router = useRouter()
 
 const route = useRoute()
@@ -128,7 +130,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     <div v-if="sidebarOpen" class="flex-1 flex flex-col">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 
-      <a-divider class="my-2" />
+      <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" />
 
       <MenuBottom @open-modal="openModal" />
     </div>