From 2e00a0fa2a2f20a5c3187d509fd7be1ae9bcc010 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 25 Nov 2023 04:19:43 +0000
Subject: [PATCH 1/4] fix: Hide export btn on toolbar when on viewer permision

---
 .../nc-gui/components/smartsheet/Toolbar.vue  |  2 +-
 .../smartsheet/toolbar/ViewActionMenu.vue     | 70 ++++++++++---------
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index 7587db85f8..fd1347b27e 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -39,7 +39,7 @@ const { allowCSVDownload } = useSharedView()
 
         <!-- <LazySmartsheetToolbarQrScannerButton v-if="isMobileMode && (isGrid || isKanban || isGallery)" /> -->
 
-        <LazySmartsheetToolbarExport v-if="(!isPublic && !isUIAllowed('dataInsert')) || (isPublic && allowCSVDownload)" />
+        <LazySmartsheetToolbarExport v-if="isPublic && allowCSVDownload" />
 
         <div class="flex-1" />
       </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
index 7616aaf08e..82795110c7 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActionMenu.vue
@@ -239,44 +239,48 @@ const onDelete = async () => {
 
         <LazySmartsheetToolbarExportSubActions />
       </NcSubMenu>
-      <NcDivider />
     </template>
 
-    <NcSubMenu v-if="isUIAllowed('viewCreateOrEdit')" key="lock-type" class="scrollbar-thin-dull max-h-90vh overflow-auto !py-0">
-      <template #title>
-        <div
-          v-e="[
-            'c:navdraw:preview-as',
-            {
-              sidebar: props.inSidebar,
-            },
-          ]"
-          class="flex flex-row items-center gap-x-3"
-        >
-          <div>
-            {{ $t('labels.viewMode') }}
-          </div>
-          <div class="nc-base-menu-item flex !flex-shrink group !py-1 !px-1 rounded-md bg-brand-50">
-            <LazySmartsheetToolbarLockType
-              hide-tick
-              :type="lockType"
-              class="flex nc-view-actions-lock-type !text-brand-500 !flex-shrink"
-            />
+    <template v-if="isUIAllowed('viewCreateOrEdit')">
+      <NcDivider />
+
+      <NcSubMenu key="lock-type" class="scrollbar-thin-dull max-h-90vh overflow-auto !py-0">
+        <template #title>
+          <div
+            v-e="[
+              'c:navdraw:preview-as',
+              {
+                sidebar: props.inSidebar,
+              },
+            ]"
+            class="flex flex-row items-center gap-x-3"
+          >
+            <div>
+              {{ $t('labels.viewMode') }}
+            </div>
+            <div class="nc-base-menu-item flex !flex-shrink group !py-1 !px-1 rounded-md bg-brand-50">
+              <LazySmartsheetToolbarLockType
+                hide-tick
+                :type="lockType"
+                class="flex nc-view-actions-lock-type !text-brand-500 !flex-shrink"
+              />
+            </div>
+            <div class="flex flex-grow"></div>
           </div>
-          <div class="flex flex-grow"></div>
-        </div>
-      </template>
+        </template>
 
-      <template #expandIcon></template>
-      <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('labels.viewMode') }}</div>
-      <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
-        <LazySmartsheetToolbarLockType :type="LockType.Collaborative" @click="changeLockType(LockType.Collaborative)" />
-      </a-menu-item>
+        <template #expandIcon></template>
+        <div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('labels.viewMode') }}</div>
+        <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
+          <LazySmartsheetToolbarLockType :type="LockType.Collaborative" @click="changeLockType(LockType.Collaborative)" />
+        </a-menu-item>
+
+        <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
+          <LazySmartsheetToolbarLockType :type="LockType.Locked" @click="changeLockType(LockType.Locked)" />
+        </a-menu-item>
+      </NcSubMenu>
+    </template>
 
-      <a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction">
-        <LazySmartsheetToolbarLockType :type="LockType.Locked" @click="changeLockType(LockType.Locked)" />
-      </a-menu-item>
-    </NcSubMenu>
     <template v-if="!view.is_default">
       <NcDivider />
       <NcTooltip v-if="lockType === LockType.Locked">

From 4123ff0d12d2412b42a7ae89b51f3095e21231e8 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 25 Nov 2023 04:19:43 +0000
Subject: [PATCH 2/4] fix: Added readonly mode to expanded form cells

---
 packages/nc-gui/components/smartsheet/VirtualCell.vue     | 7 ++++++-
 .../nc-gui/components/smartsheet/expanded-form/index.vue  | 8 ++++++--
 packages/nc-gui/components/virtual-cell/Links.vue         | 3 +--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index 9b11cc2af7..a9b78586be 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/VirtualCell.vue
@@ -31,6 +31,7 @@ const props = defineProps<{
   modelValue: any
   row?: Row
   active?: boolean
+  readOnly?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue', 'navigate', 'save'])
@@ -38,12 +39,14 @@ const emit = defineEmits(['update:modelValue', 'navigate', 'save'])
 const column = toRef(props, 'column')
 const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
+const readOnly = toRef(props, 'readOnly', false)
 
 provide(ColumnInj, column)
 provide(ActiveCellInj, active)
 provide(RowInj, row)
 provide(CellValueInj, toRef(props, 'modelValue'))
 provide(SaveRowInj, () => emit('save'))
+provide(ReadonlyInj, readOnly)
 
 const isGrid = inject(IsGridInj, ref(false))
 
@@ -94,7 +97,9 @@ onUnmounted(() => {
   <div
     ref="elementToObserve"
     class="nc-virtual-cell w-full flex items-center"
-    :class="{ 'text-right justify-end': isGrid && !isForm && isRollup(column) && !isExpandedForm }"
+    :class="{
+      'text-right justify-end': isGrid && !isForm && isRollup(column) && !isExpandedForm,
+    }"
     @keydown.enter.exact="onNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="onNavigate(NavigateDir.PREV, $event)"
   >
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 0d871effbf..4695736513 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -88,6 +88,8 @@ const isRecordLinkCopied = ref(false)
 
 const { isUIAllowed } = useRoles()
 
+const readOnly = computed(() => !isUIAllowed('dataEdit') || isPublic.value)
+
 const reloadTrigger = inject(ReloadRowDataHookInj, createEventHook())
 
 const { addOrEditStackRow } = useKanbanViewStoreOrThrow()
@@ -669,6 +671,7 @@ export default {
                       :class="{
                         'px-1': isReadOnlyVirtualCell(col),
                       }"
+                      :read-only="readOnly"
                     />
 
                     <LazySmartsheetCell
@@ -677,7 +680,7 @@ export default {
                       :column="col"
                       :edit-enabled="true"
                       :active="true"
-                      :read-only="isPublic"
+                      :read-only="readOnly"
                       @update:model-value="changedColumns.add(col.title)"
                     />
                   </SmartsheetDivDataCell>
@@ -737,6 +740,7 @@ export default {
                         v-model="_row.row[col.title]"
                         :row="_row"
                         :column="col"
+                        :read-only="readOnly"
                       />
 
                       <LazySmartsheetCell
@@ -745,7 +749,7 @@ export default {
                         :column="col"
                         :edit-enabled="true"
                         :active="true"
-                        :read-only="isPublic"
+                        :read-only="readOnly"
                         @update:model-value="changedColumns.add(col.title)"
                       />
                     </LazySmartsheetDivDataCell>
diff --git a/packages/nc-gui/components/virtual-cell/Links.vue b/packages/nc-gui/components/virtual-cell/Links.vue
index ba1565d1ac..449b24c565 100644
--- a/packages/nc-gui/components/virtual-cell/Links.vue
+++ b/packages/nc-gui/components/virtual-cell/Links.vue
@@ -112,7 +112,7 @@ const openListDlg = () => {
         v-e="['c:cell:links:modal:open']"
         :title="textVal"
         class="text-center nc-datatype-link underline-transparent"
-        :class="{ '!text-gray-300': !textVal }"
+        :class="{ '!text-gray-300': !textVal, 'pointer-events-none': readOnly }"
         @click.stop.prevent="openChildList"
       >
         {{ textVal }}
@@ -127,7 +127,6 @@ const openListDlg = () => {
         @click.stop="openListDlg"
       />
     </div>
-
     <LazyVirtualCellComponentsListItems
       v-if="listItemsDlg || childListDlg"
       v-model="listItemsDlg"

From 347f882726d24938eeb55fe175f249fa05f160b9 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 25 Nov 2023 04:19:43 +0000
Subject: [PATCH 3/4] fix: Removed abilty to toggle link in links modal in
 readonly mode

---
 packages/nc-gui/components/virtual-cell/Links.vue            | 2 +-
 .../components/virtual-cell/components/ListChildItems.vue    | 1 +
 .../nc-gui/components/virtual-cell/components/ListItem.vue   | 5 +++--
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/Links.vue b/packages/nc-gui/components/virtual-cell/Links.vue
index 449b24c565..9b93da6876 100644
--- a/packages/nc-gui/components/virtual-cell/Links.vue
+++ b/packages/nc-gui/components/virtual-cell/Links.vue
@@ -112,7 +112,7 @@ const openListDlg = () => {
         v-e="['c:cell:links:modal:open']"
         :title="textVal"
         class="text-center nc-datatype-link underline-transparent"
-        :class="{ '!text-gray-300': !textVal, 'pointer-events-none': readOnly }"
+        :class="{ '!text-gray-300': !textVal }"
         @click.stop.prevent="openChildList"
       >
         {{ textVal }}
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 43c8e385f0..8e26b8b41c 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -166,6 +166,7 @@ const isDataExist = computed<boolean>(() => {
 
 const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
   if (isSharedBase.value) return
+  if (readonly.value) return
 
   if (isPublic.value && !isForm.value) return
   if (isNew.value || isChildrenListLinked.value[parseInt(id)]) {
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index d646399231..8dd8ef034a 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -77,6 +77,7 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
       '!bg-white': isLoading,
       '!border-1': isLinked && !isLoading,
       '!hover:border-gray-400': !isLinked,
+      '!cursor-auto !hover:bg-white': readonly,
     }"
     :body-style="{ padding: 0 }"
     :hoverable="false"
@@ -109,7 +110,7 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
             v-if="isLinked && !isLoading"
             class="text-brand-500 text-0.875"
             :class="{
-              '!group-hover:mr-12': fields.length === 0,
+              '!group-hover:mr-12': fields.length === 0 && !readonly,
             }"
           >
             <LinkIcon class="w-4 h-4" />
@@ -118,7 +119,7 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
           <MdiLoading
             v-else-if="isLoading"
             :class="{
-              '!group-hover:mr-8': fields.length === 0,
+              '!group-hover:mr-8': fields.length === 0 && !readonly,
             }"
             class="w-6 h-6 !text-brand-500 animate-spin"
           />

From 826afbf2f9218261d705e370a1390d20d6be805b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 25 Nov 2023 04:19:43 +0000
Subject: [PATCH 4/4] fix: Darkened shadow for Edit/Add column modal

---
 packages/nc-gui/components/smartsheet/column/EditOrAdd.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 506cf59843..67cf1abd6c 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -223,7 +223,7 @@ if (props.fromTableExplorer) {
       '!w-146': isTextArea(formState) && formState.meta.richMode,
       '!w-[600px]': formState.uidt === UITypes.Formula && !props.embedMode,
       '!w-[500px]': formState.uidt === UITypes.Attachment && !props.embedMode && !appInfo.ee,
-      'shadow-lg border-1 border-gray-50 shadow-gray-100 rounded-md p-6': !embedMode,
+      'shadow-lg border-1 border-gray-100 shadow-gray-300 rounded-xl p-6': !embedMode,
     }"
     @keydown="handleEscape"
     @click.stop