Nc fix: gallery, kanban view cover image load issue if column is hidden (#8290)

* fix(nc-gui): gallery, kanban view cover image load issue if column is hidden

* chore(nc-gui): lint

* fix(nocodb): delete single query cache on update view card cover image

* chore(nc-gui): lint

packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue

@@ -54,7 +54,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex w-full flex-col py-0.9 px-1  border-gray-200 gap-y-1">
+  <div class="flex w-full flex-col py-0.9 px-1 border-gray-200 gap-y-1">
     <NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64">
       <div
         class="flex flex-row py-1 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-8"

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -1973,8 +1973,8 @@ onKeyStroke('ArrowDown', onDown)
             v-e="[isAddNewRecordGridMode ? 'c:row:add:grid' : 'c:row:add:form']"
             class="nc-grid-add-new-row"
             type="secondary"
-            @click="onNewRecordToFormClick()"
             :disabled="isPaginationLoading"
+            @click="onNewRecordToFormClick()"
           >
             {{ $t('activity.newRecord') }}
           </NcButton>
@@ -1983,8 +1983,8 @@ onKeyStroke('ArrowDown', onDown)
             v-e="[isAddNewRecordGridMode ? 'c:row:add:grid:toggle' : 'c:row:add:form:toggle']"
             class="nc-grid-add-new-row"
             placement="top"
-            @click="isAddNewRecordGridMode ? addEmptyRow() : onNewRecordToFormClick()"
             :disabled="isPaginationLoading"
+            @click="isAddNewRecordGridMode ? addEmptyRow() : onNewRecordToFormClick()"
           >
             <div data-testid="nc-pagination-add-record" class="flex items-center px-2 text-gray-600 hover:text-black">
               <span>

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -180,7 +180,15 @@ const updateCoverImage = async (val?: string | null) => {
       })
       ;(activeView.value.view as CalendarType).fk_cover_image_col_id = val
     }
-    reloadViewMetaHook?.trigger()
+
+    await reloadViewMetaHook?.trigger()
+
+    // Load data only if the view column is hidden to fetch cover image column data in records.
+    if (val && !fields.value?.find((f) => f.fk_column_id === val)?.show) {
+      await reloadViewDataHook?.trigger({
+        shouldShowLoading: false,
+      })
+    }
   }
 }
 
@@ -356,7 +364,7 @@ useMenuCloseOnEsc(open)
         @click.stop
       >
         <div
-          v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
+          v-if="!isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
           class="flex flex-col gap-y-2 px-2 mb-6"
         >
           <div class="flex text-sm select-none">Select cover image field</div>

packages/nocodb/src/models/GalleryView.ts

@@ -117,6 +117,15 @@ export default class GalleryView implements GalleryType {
       prepareForResponse(updateObj),
     );
 
+    const view = await View.get(galleryId);
+
+    // on update, delete any optimised single query cache
+    await View.clearSingleQueryCache(
+      view.fk_model_id,
+      [{ id: galleryId }],
+      ncMeta,
+    );
+
     return res;
   }
 }

packages/nocodb/src/models/KanbanView.ts

@@ -125,6 +125,15 @@ export default class KanbanView implements KanbanType {
       prepareForResponse(updateObj),
     );
 
+    const view = await View.get(kanbanId);
+
+    // on update, delete any optimised single query cache
+    await View.clearSingleQueryCache(
+      view.fk_model_id,
+      [{ id: kanbanId }],
+      ncMeta,
+    );
+
     return res;
   }
 }