From ec9f23cef8387f456cc901d2cc0d1c6d60a91fd8 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Nov 2024 06:45:55 +0000
Subject: [PATCH 1/7] feat(nc-gui): bulk update extension manifest

---
 .../extensions/bulk-update/assets/icon.svg    |  12 +
 .../bulk-update/assets/publisher-icon.svg     |  12 +
 .../extensions/bulk-update/description.md     |  39 ++
 .../nc-gui/extensions/bulk-update/index.vue   | 431 ++++++++++++++++++
 .../extensions/bulk-update/manifest.json      |  21 +
 5 files changed, 515 insertions(+)
 create mode 100644 packages/nc-gui/extensions/bulk-update/assets/icon.svg
 create mode 100644 packages/nc-gui/extensions/bulk-update/assets/publisher-icon.svg
 create mode 100644 packages/nc-gui/extensions/bulk-update/description.md
 create mode 100644 packages/nc-gui/extensions/bulk-update/index.vue
 create mode 100644 packages/nc-gui/extensions/bulk-update/manifest.json

diff --git a/packages/nc-gui/extensions/bulk-update/assets/icon.svg b/packages/nc-gui/extensions/bulk-update/assets/icon.svg
new file mode 100644
index 0000000000..2381559164
--- /dev/null
+++ b/packages/nc-gui/extensions/bulk-update/assets/icon.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <path d="M12.3733 3.2002H4.26668C3.67758 3.2002 3.20001 3.67776 3.20001 4.26686V12.3735C3.20001 12.9626 3.67758 13.4402 4.26668 13.4402H12.3733C12.9625 13.4402 13.44 12.9626 13.44 12.3735V4.26686C13.44 3.67776 12.9625 3.2002 12.3733 3.2002Z" fill="#F4F4F5"/>
+  <path d="M13.6533 4.47998H5.54665C4.95754 4.47998 4.47998 4.95754 4.47998 5.54665V13.6533C4.47998 14.2424 4.95754 14.72 5.54665 14.72H13.6533C14.2424 14.72 14.72 14.2424 14.72 13.6533V5.54665C14.72 4.95754 14.2424 4.47998 13.6533 4.47998Z" fill="#D5D5D9"/>
+  <path d="M14.9333 5.75977H6.82668C6.23757 5.75977 5.76001 6.23733 5.76001 6.82643V14.9331C5.76001 15.5222 6.23757 15.9998 6.82668 15.9998H14.9333C15.5224 15.9998 16 15.5222 16 14.9331V6.82643C16 6.23733 15.5224 5.75977 14.9333 5.75977Z" fill="#9AA2AF"/>
+  <path d="M25.1733 16H17.0667C16.4776 16 16 16.4776 16 17.0667V25.1733C16 25.7624 16.4776 26.24 17.0667 26.24H25.1733C25.7624 26.24 26.24 25.7624 26.24 25.1733V17.0667C26.24 16.4776 25.7624 16 25.1733 16Z" fill="#ADC2FF"/>
+  <path d="M26.4534 17.2798H18.3467C17.7576 17.2798 17.28 17.7573 17.28 18.3465V26.4531C17.28 27.0422 17.7576 27.5198 18.3467 27.5198H26.4534C27.0425 27.5198 27.52 27.0422 27.52 26.4531V18.3465C27.52 17.7573 27.0425 17.2798 26.4534 17.2798Z" fill="#5C85FF"/>
+  <path d="M27.7333 18.5601H19.6267C19.0376 18.5601 18.56 19.0376 18.56 19.6267V27.7334C18.56 28.3225 19.0376 28.8001 19.6267 28.8001H27.7333C28.3224 28.8001 28.8 28.3225 28.8 27.7334V19.6267C28.8 19.0376 28.3224 18.5601 27.7333 18.5601Z" fill="#2952CC"/>
+  <path d="M12.5333 19.7334L13.8667 21.0667L12.5333 22.4001" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9.59998 18.1333V20C9.59998 20.2828 9.71235 20.5542 9.9124 20.7542C10.1125 20.9543 10.3838 21.0666 10.6666 21.0666H13.8666" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19.7333 12.5332L21.0667 13.8665L22.4 12.5332" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M18.1334 9.6001H20C20.2829 9.6001 20.5542 9.71247 20.7543 9.91252C20.9543 10.1126 21.0667 10.3839 21.0667 10.6668V13.8668" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/nc-gui/extensions/bulk-update/assets/publisher-icon.svg b/packages/nc-gui/extensions/bulk-update/assets/publisher-icon.svg
new file mode 100644
index 0000000000..2381559164
--- /dev/null
+++ b/packages/nc-gui/extensions/bulk-update/assets/publisher-icon.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <path d="M12.3733 3.2002H4.26668C3.67758 3.2002 3.20001 3.67776 3.20001 4.26686V12.3735C3.20001 12.9626 3.67758 13.4402 4.26668 13.4402H12.3733C12.9625 13.4402 13.44 12.9626 13.44 12.3735V4.26686C13.44 3.67776 12.9625 3.2002 12.3733 3.2002Z" fill="#F4F4F5"/>
+  <path d="M13.6533 4.47998H5.54665C4.95754 4.47998 4.47998 4.95754 4.47998 5.54665V13.6533C4.47998 14.2424 4.95754 14.72 5.54665 14.72H13.6533C14.2424 14.72 14.72 14.2424 14.72 13.6533V5.54665C14.72 4.95754 14.2424 4.47998 13.6533 4.47998Z" fill="#D5D5D9"/>
+  <path d="M14.9333 5.75977H6.82668C6.23757 5.75977 5.76001 6.23733 5.76001 6.82643V14.9331C5.76001 15.5222 6.23757 15.9998 6.82668 15.9998H14.9333C15.5224 15.9998 16 15.5222 16 14.9331V6.82643C16 6.23733 15.5224 5.75977 14.9333 5.75977Z" fill="#9AA2AF"/>
+  <path d="M25.1733 16H17.0667C16.4776 16 16 16.4776 16 17.0667V25.1733C16 25.7624 16.4776 26.24 17.0667 26.24H25.1733C25.7624 26.24 26.24 25.7624 26.24 25.1733V17.0667C26.24 16.4776 25.7624 16 25.1733 16Z" fill="#ADC2FF"/>
+  <path d="M26.4534 17.2798H18.3467C17.7576 17.2798 17.28 17.7573 17.28 18.3465V26.4531C17.28 27.0422 17.7576 27.5198 18.3467 27.5198H26.4534C27.0425 27.5198 27.52 27.0422 27.52 26.4531V18.3465C27.52 17.7573 27.0425 17.2798 26.4534 17.2798Z" fill="#5C85FF"/>
+  <path d="M27.7333 18.5601H19.6267C19.0376 18.5601 18.56 19.0376 18.56 19.6267V27.7334C18.56 28.3225 19.0376 28.8001 19.6267 28.8001H27.7333C28.3224 28.8001 28.8 28.3225 28.8 27.7334V19.6267C28.8 19.0376 28.3224 18.5601 27.7333 18.5601Z" fill="#2952CC"/>
+  <path d="M12.5333 19.7334L13.8667 21.0667L12.5333 22.4001" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9.59998 18.1333V20C9.59998 20.2828 9.71235 20.5542 9.9124 20.7542C10.1125 20.9543 10.3838 21.0666 10.6666 21.0666H13.8666" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19.7333 12.5332L21.0667 13.8665L22.4 12.5332" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M18.1334 9.6001H20C20.2829 9.6001 20.5542 9.71247 20.7543 9.91252C20.9543 10.1126 21.0667 10.3839 21.0667 10.6668V13.8668" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/nc-gui/extensions/bulk-update/description.md b/packages/nc-gui/extensions/bulk-update/description.md
new file mode 100644
index 0000000000..46d29d73fe
--- /dev/null
+++ b/packages/nc-gui/extensions/bulk-update/description.md
@@ -0,0 +1,39 @@
+Bulk update
+</br> </br>
+
+// Todo: update details
+
+The download process is handled asynchronously in the background, ensuring that your workflow remains uninterrupted. Once your file is ready, you’ll receive a notification, allowing you to download the CSV at your convenience.
+</br> </br>
+
+**Key Features**
+
+- Easy CSV downloads for specific tables and views
+- Asynchronous processing for seamless operation
+- Instant notifications when the file is ready for download
+  </br> </br>
+
+Elevate your data handling capabilities with the NocoDB Data Exporter extension!
+</br></br>
+
+<!-- Todo: Add docs link -->
+<a href="" target="_blank" rel="noopener noreferrer" class="!no-underline !hover:underline inline-flex items-center gap-2 ">
+    Learn more
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M10 2H14V6" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M6.66669 9.33333L14 2" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</a>
+
+</br></br>
+
+<div class="flex">
+<!-- Todo: image  -->
+    <img src="" width="50%" class="object-contain rounded-xl"/>
+</div>
+</br>
+<div>
+<!-- Todo: image  -->
+ <img src="" width="100%" class="object-contain rounded-xl"/>
+</div>
diff --git a/packages/nc-gui/extensions/bulk-update/index.vue b/packages/nc-gui/extensions/bulk-update/index.vue
new file mode 100644
index 0000000000..9844273de6
--- /dev/null
+++ b/packages/nc-gui/extensions/bulk-update/index.vue
@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { type ViewType, ViewTypes } from 'nocodb-sdk'
+
+const jobStatusTooltip = {
+  [JobStatus.COMPLETED]: 'Export successful',
+  [JobStatus.FAILED]: 'Export failed',
+} as Record<string, string>
+
+const { $api, $poller } = useNuxtApp()
+
+const { appInfo } = useGlobal()
+
+const { extension, tables, fullscreen, getViewsForTable } = useExtensionHelperOrThrow()
+
+const { jobList, loadJobsForBase } = useJobs()
+
+const views = ref<ViewType[]>([])
+
+const deletedExports = ref<string[]>([])
+
+const dataExporterRef = ref<HTMLDivElement>()
+
+const { width } = useElementSize(dataExporterRef)
+
+const exportedFiles = computed(() => {
+  return jobList.value
+    .filter(
+      (job) =>
+        job.job === 'data-export' && job.result?.extension_id === extension.value.id && !deletedExports.value.includes(job.id),
+    )
+    .map((job) => {
+      return {
+        ...job,
+        result: (job.result || {}) as { url: string; type: 'csv' | 'json' | 'xlsx'; title: string; timestamp: number },
+      }
+    })
+    .sort((a, b) => dayjs(b.created_at).unix() - dayjs(a.created_at).unix())
+})
+
+const exportPayload = ref<{
+  tableId?: string
+  viewId?: string
+}>({})
+
+const tableList = computed(() => {
+  return tables.value.map((table) => {
+    return {
+      label: table.title,
+      value: table.id,
+      meta: table.meta,
+    }
+  })
+})
+
+const viewList = computed(() => {
+  if (!exportPayload.value.tableId) return []
+  return (
+    views.value
+      .filter((view) => view.type === ViewTypes.GRID)
+      .map((view) => {
+        return {
+          label: view.is_default ? `Default View` : view.title,
+          value: view.id,
+          meta: view.meta,
+          type: view.type,
+        }
+      }) || []
+  )
+})
+
+const reloadViews = async () => {
+  if (exportPayload.value.tableId) {
+    views.value = await getViewsForTable(exportPayload.value.tableId)
+  }
+}
+
+const onTableSelect = async (tableId: string) => {
+  exportPayload.value.tableId = tableId
+  await reloadViews()
+  exportPayload.value.viewId = views.value.find((view) => view.is_default)?.id
+  await extension.value.kvStore.set('exportPayload', exportPayload.value)
+}
+
+const onViewSelect = async (viewId: string) => {
+  exportPayload.value.viewId = viewId
+  await extension.value.kvStore.set('exportPayload', exportPayload.value)
+}
+
+const isExporting = ref(false)
+
+async function exportDataAsync() {
+  try {
+    if (isExporting.value || !exportPayload.value.viewId) return
+
+    isExporting.value = true
+
+    const jobData = await $api.export.data(exportPayload.value.viewId, 'csv', { extension_id: extension.value.id })
+    jobList.value.unshift(jobData)
+
+    $poller.subscribe(
+      { id: jobData.id },
+      async (data: {
+        id: string
+        status?: string
+        data?: {
+          error?: {
+            message: string
+          }
+          message?: string
+          result?: any
+        }
+      }) => {
+        if (data.status !== 'close') {
+          if (data.status === JobStatus.COMPLETED) {
+            // Export completed successfully
+            message.info('Successfully exported data!')
+
+            const job = jobList.value.find((j) => j.id === data.id)
+            if (job) {
+              job.status = JobStatus.COMPLETED
+              job.result = data.data?.result
+            }
+
+            isExporting.value = false
+          } else if (data.status === JobStatus.FAILED) {
+            message.error('Failed to export data!')
+
+            const job = jobList.value.find((j) => j.id === data.id)
+            if (job) {
+              job.status = JobStatus.FAILED
+              job.result = data.data?.result
+
+              // Add title if not present in response
+              if (!job.result?.title) {
+                job.result = {
+                  ...(job.result || {}),
+                  title: titleHelper(),
+                }
+              }
+            }
+
+            isExporting.value = false
+          }
+        }
+      },
+    )
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const urlHelper = (url: string) => {
+  if (url.startsWith('http')) {
+    return url
+  } else {
+    return `${appInfo.value.ncSiteUrl || BASE_FALLBACK_URL}/${url}`
+  }
+}
+
+const handleDownload = async (url: string) => {
+  const isExpired = await isLinkExpired(url)
+
+  if (isExpired) {
+    navigateTo(url, {
+      open: navigateToBlankTargetOpenOption,
+    })
+    return
+  }
+
+  const link = document.createElement('a')
+  link.href = url
+  link.style.display = 'none' // Hide the link
+
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+function titleHelper() {
+  const table = tables.value.find((t) => t.id === exportPayload.value.tableId)
+  const view = views.value.find((v) => v.id === exportPayload.value.viewId)
+
+  return `${table?.title} (${view?.is_default ? 'Default View' : view?.title})`
+}
+
+const onRemoveExportedFile = async (exportId: string) => {
+  deletedExports.value.push(exportId)
+
+  await extension.value.kvStore.set('deletedExports', deletedExports.value)
+}
+
+const filterOption = (input: string, option: { key: string }) => {
+  return option.key?.toLowerCase()?.includes(input?.toLowerCase())
+}
+
+onMounted(() => {
+  exportPayload.value = extension.value.kvStore.get('exportPayload') || {}
+  deletedExports.value = extension.value.kvStore.get('deletedExports') || []
+  reloadViews()
+  loadJobsForBase()
+})
+</script>
+
+<template>
+  <ExtensionsExtensionWrapper>
+    <div
+      ref="dataExporterRef"
+      class="data-exporter"
+      :class="{
+        'p-4': fullscreen,
+        'p-3': !fullscreen,
+      }"
+    >
+      <div class="pb-3 flex items-center justify-between gap-2.5 flex-wrap">
+        <div
+          class="flex-1 flex items-center"
+          :class="{
+            'max-w-[min(350px,calc(100%-124px))]': isExporting && !fullscreen && width > 325,
+            'max-w-[min(350px,calc(100%_-_84px))]': !isExporting && !fullscreen && width > 325,
+            'max-w-full': width <= 325,
+            'max-w-[480px]': fullscreen,
+          }"
+        >
+          <div
+            class="flex-1 flex items-center border-1 border-gray-200 rounded-lg focus-within:(border-brand-500 shadow-selected) transition-colors transition-shadow"
+          >
+            <NcSelect
+              v-model:value="exportPayload.tableId"
+              placeholder="-select table-"
+              :disabled="isExporting"
+              class="nc-data-exporter-table-select"
+              :class="{
+                'flex-1 max-w-[240px]': fullscreen,
+                'min-w-1/2 max-w-[175px]': !fullscreen,
+              }"
+              :bordered="false"
+              :filter-option="filterOption"
+              dropdown-class-name="w-[250px]"
+              show-search
+              @change="onTableSelect"
+            >
+              <a-select-option v-for="table of tableList" :key="table.label" :value="table.value">
+                <div class="w-full flex items-center gap-2">
+                  <div class="min-w-5 flex items-center justify-center">
+                    <GeneralTableIcon :meta="{ meta: table.meta }" class="text-gray-500" />
+                  </div>
+                  <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                    <template #title>{{ table.label }}</template>
+                    <span>{{ table.label }}</span>
+                  </NcTooltip>
+                  <component
+                    :is="iconMap.check"
+                    v-if="exportPayload.tableId === table.value"
+                    id="nc-selected-item-icon"
+                    class="flex-none text-primary w-4 h-4"
+                  />
+                </div>
+              </a-select-option>
+            </NcSelect>
+            <div class="flex-none h-8 border-l-1 border-gray-200"></div>
+
+            <NcSelect
+              v-model:value="exportPayload.viewId"
+              placeholder="-select view-"
+              :disabled="isExporting"
+              class="nc-data-exporter-view-select"
+              :class="{
+                'flex-1 max-w-[240px]': fullscreen,
+                'min-w-1/2 max-w-[175px]': !fullscreen,
+              }"
+              :bordered="false"
+              dropdown-class-name="w-[250px]"
+              :filter-option="filterOption"
+              show-search
+              @change="onViewSelect"
+            >
+              <a-select-option v-for="view of viewList" :key="view.label" :value="view.value">
+                <div class="w-full flex items-center gap-2">
+                  <div class="min-w-5 flex items-center justify-center">
+                    <GeneralViewIcon :meta="{ meta: view.meta, type: view.type }" class="flex-none text-gray-500" />
+                  </div>
+                  <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                    <template #title>{{ view.label }}</template>
+                    <span>{{ view.label }}</span>
+                  </NcTooltip>
+                  <component
+                    :is="iconMap.check"
+                    v-if="exportPayload.viewId === view.value"
+                    id="nc-selected-item-icon"
+                    class="flex-none text-primary w-4 h-4"
+                  />
+                </div> </a-select-option
+            ></NcSelect>
+          </div>
+        </div>
+        <div class="flex-none flex justify-end">
+          <NcTooltip class="flex" placement="topRight" :disabled="!isExporting">
+            <template #title> The CSV file is being prepared in the background. You'll be notified once it's ready. </template>
+            <NcButton :disabled="!exportPayload?.viewId" :loading="isExporting" size="xs" @click="exportDataAsync">{{
+              isExporting ? 'Generating' : 'Export'
+            }}</NcButton>
+          </NcTooltip>
+        </div>
+      </div>
+      <div class="data-exporter-body flex-1 flex flex-col">
+        <div class="data-exporter-header">Recent Exports</div>
+        <div v-if="exportedFiles.length" class="flex-1 flex flex-col nc-scrollbar-thin max-h-[calc(100%_-_25px)]">
+          <template v-for="exp of exportedFiles">
+            <div
+              v-if="exp.status === JobStatus.COMPLETED ? exp.result : true"
+              :key="exp.id"
+              class="p-3 flex gap-2 justify-between border-b-1 hover:bg-gray-50"
+              :class="{
+                'px-4 py-3': fullscreen,
+                'px-3 py-2': !fullscreen,
+              }"
+            >
+              <div
+                class="flex-1 flex items-start gap-3"
+                :class="{
+                  'max-w-[calc(100%_-_74px)]': exp.status === JobStatus.COMPLETED,
+                  'max-w-[calc(100%_-_38px)]': exp.status !== JobStatus.COMPLETED,
+                }"
+              >
+                <NcTooltip v-if="[JobStatus.COMPLETED, JobStatus.FAILED].includes(exp.status)" class="flex">
+                  <template #title>
+                    {{ jobStatusTooltip[exp.status] }}
+                  </template>
+                  <GeneralIcon
+                    :icon="exp.status === JobStatus.COMPLETED ? 'circleCheckSolid' : 'alertTriangleSolid'"
+                    class="flex-none h-5 w-5"
+                    :class="{
+                      '!text-green-700': exp.status === JobStatus.COMPLETED,
+                      '!text-red-700': exp.status === JobStatus.FAILED,
+                    }"
+                  />
+                </NcTooltip>
+                <div v-else class="h-5 flex items-center">
+                  <GeneralLoader size="regular" class="flex-none" />
+                </div>
+
+                <div class="flex-1 max-w-[calc(100%_-_28px)] flex flex-col gap-1">
+                  <div class="inline-flex gap-1 text-sm text-gray-800 -ml-[1px]">
+                    <span class="inline-flex items-center h-5">
+                      <GeneralIcon icon="file" class="flex-none text-gray-600/80 h-3.5 w-3.5" />
+                    </span>
+                    <NcTooltip class="truncate max-w-[calc(100%_-_20px)]" show-on-truncate-only>
+                      <template #title>
+                        {{ exp.result.title || titleHelper() }}
+                      </template>
+                      {{ exp.result.title || titleHelper() }}
+                    </NcTooltip>
+                  </div>
+
+                  <div v-if="exp.result.timestamp" name="error" class="text-small leading-[18px] text-nc-content-gray-muted">
+                    {{ timeAgo(dayjs(exp.result.timestamp).toString()) }}
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="exp.status === JobStatus.COMPLETED" class="flex" @click="handleDownload(urlHelper(exp.result.url))">
+                <NcTooltip class="flex">
+                  <template #title>
+                    {{ $t('general.download') }}
+                  </template>
+
+                  <NcButton type="secondary" size="xs" class="!px-[5px]">
+                    <div class="flex items-center gap-2">
+                      <GeneralIcon icon="download" />
+                    </div>
+                  </NcButton>
+                </NcTooltip>
+              </div>
+
+              <div class="flex">
+                <NcTooltip class="flex">
+                  <template #title>
+                    {{ $t('general.remove') }}
+                  </template>
+
+                  <NcButton type="text" size="xs" class="!px-[5px]" @click="onRemoveExportedFile(exp.id)">
+                    <GeneralIcon icon="close" />
+                  </NcButton>
+                </NcTooltip>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div v-else class="px-3 py-2 flex-1 flex items-center justify-center text-gray-600">No exports</div>
+      </div>
+    </div>
+  </ExtensionsExtensionWrapper>
+</template>
+
+<style lang="scss" scoped>
+:deep(.extension-content-container) {
+  @apply !p-0;
+}
+.data-exporter {
+  @apply flex flex-col overflow-hidden h-full;
+  .data-exporter-header {
+    @apply px-3 py-1 bg-gray-100 text-[11px] leading-4 text-gray-600 border-b-1;
+  }
+
+  // .nc-data-exporter-table-select {
+  //   :deep(.ant-select-selector) {
+  //     @apply !border-r-1 rounded-lg !rounded-r-none shadow-none;
+  //   }
+  // }
+  // .nc-data-exporter-view-select {
+  //   :deep(.ant-select-selector) {
+  //     @apply !border-l-0 rounded-lg !rounded-l-none shadow-none;
+  //   }
+  // }
+
+  .data-exporter-body {
+    @apply flex-1 rounded-lg border-1 overflow-hidden;
+  }
+
+  .data-exporter-footer {
+    @apply flex items-center justify-end bg-gray-100;
+  }
+}
+</style>
+
+<style>
+.nc-nc-data-exporter .extension-content {
+  @apply !p-0;
+}
+</style>
diff --git a/packages/nc-gui/extensions/bulk-update/manifest.json b/packages/nc-gui/extensions/bulk-update/manifest.json
new file mode 100644
index 0000000000..e0fce0dda3
--- /dev/null
+++ b/packages/nc-gui/extensions/bulk-update/manifest.json
@@ -0,0 +1,21 @@
+{
+  "id": "nc-bulk-update",
+  "title": "Bulk Update",
+  "subTitle": "Upload multiple records values in a field with a single click",
+  "description": "bulk-update/description.md",
+  "entry": "bulk-update",
+  "version": "0.1",
+  "iconUrl": "bulk-update/assets/icon.svg",
+  "publisher": {
+    "name": "NocoDB",
+    "email": "contact@nocodb.com",
+    "url": "https://www.nocodb.com",
+    "icon": {
+      "src": "bulk-update/assets/publisher-icon.svg",
+      "width": 24,
+      "height": 24
+    }
+  },
+  "links": [],
+  "config": {}
+}

From 2970f7e1d3768ab413a4b0cb579046005dfbf64a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Nov 2024 06:45:55 +0000
Subject: [PATCH 2/7] fix(nc-gui): bulk update extension import issue

---
 .../components/extensions/Extension.vue       |  12 +-
 .../extensions/bulk-update/assets/icon.svg    |  12 -
 .../bulk-update/assets/publisher-icon.svg     |  12 -
 .../extensions/bulk-update/description.md     |  39 --
 .../nc-gui/extensions/bulk-update/index.vue   | 431 ------------------
 .../extensions/bulk-update/manifest.json      |  21 -
 .../nc-gui/extensions/json-exporter/index.vue |   8 +-
 7 files changed, 15 insertions(+), 520 deletions(-)
 delete mode 100644 packages/nc-gui/extensions/bulk-update/assets/icon.svg
 delete mode 100644 packages/nc-gui/extensions/bulk-update/assets/publisher-icon.svg
 delete mode 100644 packages/nc-gui/extensions/bulk-update/description.md
 delete mode 100644 packages/nc-gui/extensions/bulk-update/index.vue
 delete mode 100644 packages/nc-gui/extensions/bulk-update/manifest.json

diff --git a/packages/nc-gui/components/extensions/Extension.vue b/packages/nc-gui/components/extensions/Extension.vue
index 0c5063cf85..4b3a98be9b 100644
--- a/packages/nc-gui/components/extensions/Extension.vue
+++ b/packages/nc-gui/components/extensions/Extension.vue
@@ -67,10 +67,14 @@ onMounted(() => {
         return
       }
 
-      import(`../../extensions/${extensionManifest.value.entry}/index.vue`).then((mod) => {
-        component.value = markRaw(mod.default)
-        isLoadedExtension.value = false
-      })
+      import(`../../extensions/${extensionManifest.value.entry}/index.vue`)
+        .then((mod) => {
+          component.value = markRaw(mod.default)
+          isLoadedExtension.value = false
+        })
+        .catch((e) => {
+          throw new Error(e)
+        })
     })
     .catch((err) => {
       if (!extensionManifest.value) {
diff --git a/packages/nc-gui/extensions/bulk-update/assets/icon.svg b/packages/nc-gui/extensions/bulk-update/assets/icon.svg
deleted file mode 100644
index 2381559164..0000000000
--- a/packages/nc-gui/extensions/bulk-update/assets/icon.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-  <path d="M12.3733 3.2002H4.26668C3.67758 3.2002 3.20001 3.67776 3.20001 4.26686V12.3735C3.20001 12.9626 3.67758 13.4402 4.26668 13.4402H12.3733C12.9625 13.4402 13.44 12.9626 13.44 12.3735V4.26686C13.44 3.67776 12.9625 3.2002 12.3733 3.2002Z" fill="#F4F4F5"/>
-  <path d="M13.6533 4.47998H5.54665C4.95754 4.47998 4.47998 4.95754 4.47998 5.54665V13.6533C4.47998 14.2424 4.95754 14.72 5.54665 14.72H13.6533C14.2424 14.72 14.72 14.2424 14.72 13.6533V5.54665C14.72 4.95754 14.2424 4.47998 13.6533 4.47998Z" fill="#D5D5D9"/>
-  <path d="M14.9333 5.75977H6.82668C6.23757 5.75977 5.76001 6.23733 5.76001 6.82643V14.9331C5.76001 15.5222 6.23757 15.9998 6.82668 15.9998H14.9333C15.5224 15.9998 16 15.5222 16 14.9331V6.82643C16 6.23733 15.5224 5.75977 14.9333 5.75977Z" fill="#9AA2AF"/>
-  <path d="M25.1733 16H17.0667C16.4776 16 16 16.4776 16 17.0667V25.1733C16 25.7624 16.4776 26.24 17.0667 26.24H25.1733C25.7624 26.24 26.24 25.7624 26.24 25.1733V17.0667C26.24 16.4776 25.7624 16 25.1733 16Z" fill="#ADC2FF"/>
-  <path d="M26.4534 17.2798H18.3467C17.7576 17.2798 17.28 17.7573 17.28 18.3465V26.4531C17.28 27.0422 17.7576 27.5198 18.3467 27.5198H26.4534C27.0425 27.5198 27.52 27.0422 27.52 26.4531V18.3465C27.52 17.7573 27.0425 17.2798 26.4534 17.2798Z" fill="#5C85FF"/>
-  <path d="M27.7333 18.5601H19.6267C19.0376 18.5601 18.56 19.0376 18.56 19.6267V27.7334C18.56 28.3225 19.0376 28.8001 19.6267 28.8001H27.7333C28.3224 28.8001 28.8 28.3225 28.8 27.7334V19.6267C28.8 19.0376 28.3224 18.5601 27.7333 18.5601Z" fill="#2952CC"/>
-  <path d="M12.5333 19.7334L13.8667 21.0667L12.5333 22.4001" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M9.59998 18.1333V20C9.59998 20.2828 9.71235 20.5542 9.9124 20.7542C10.1125 20.9543 10.3838 21.0666 10.6666 21.0666H13.8666" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M19.7333 12.5332L21.0667 13.8665L22.4 12.5332" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M18.1334 9.6001H20C20.2829 9.6001 20.5542 9.71247 20.7543 9.91252C20.9543 10.1126 21.0667 10.3839 21.0667 10.6668V13.8668" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/packages/nc-gui/extensions/bulk-update/assets/publisher-icon.svg b/packages/nc-gui/extensions/bulk-update/assets/publisher-icon.svg
deleted file mode 100644
index 2381559164..0000000000
--- a/packages/nc-gui/extensions/bulk-update/assets/publisher-icon.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-  <path d="M12.3733 3.2002H4.26668C3.67758 3.2002 3.20001 3.67776 3.20001 4.26686V12.3735C3.20001 12.9626 3.67758 13.4402 4.26668 13.4402H12.3733C12.9625 13.4402 13.44 12.9626 13.44 12.3735V4.26686C13.44 3.67776 12.9625 3.2002 12.3733 3.2002Z" fill="#F4F4F5"/>
-  <path d="M13.6533 4.47998H5.54665C4.95754 4.47998 4.47998 4.95754 4.47998 5.54665V13.6533C4.47998 14.2424 4.95754 14.72 5.54665 14.72H13.6533C14.2424 14.72 14.72 14.2424 14.72 13.6533V5.54665C14.72 4.95754 14.2424 4.47998 13.6533 4.47998Z" fill="#D5D5D9"/>
-  <path d="M14.9333 5.75977H6.82668C6.23757 5.75977 5.76001 6.23733 5.76001 6.82643V14.9331C5.76001 15.5222 6.23757 15.9998 6.82668 15.9998H14.9333C15.5224 15.9998 16 15.5222 16 14.9331V6.82643C16 6.23733 15.5224 5.75977 14.9333 5.75977Z" fill="#9AA2AF"/>
-  <path d="M25.1733 16H17.0667C16.4776 16 16 16.4776 16 17.0667V25.1733C16 25.7624 16.4776 26.24 17.0667 26.24H25.1733C25.7624 26.24 26.24 25.7624 26.24 25.1733V17.0667C26.24 16.4776 25.7624 16 25.1733 16Z" fill="#ADC2FF"/>
-  <path d="M26.4534 17.2798H18.3467C17.7576 17.2798 17.28 17.7573 17.28 18.3465V26.4531C17.28 27.0422 17.7576 27.5198 18.3467 27.5198H26.4534C27.0425 27.5198 27.52 27.0422 27.52 26.4531V18.3465C27.52 17.7573 27.0425 17.2798 26.4534 17.2798Z" fill="#5C85FF"/>
-  <path d="M27.7333 18.5601H19.6267C19.0376 18.5601 18.56 19.0376 18.56 19.6267V27.7334C18.56 28.3225 19.0376 28.8001 19.6267 28.8001H27.7333C28.3224 28.8001 28.8 28.3225 28.8 27.7334V19.6267C28.8 19.0376 28.3224 18.5601 27.7333 18.5601Z" fill="#2952CC"/>
-  <path d="M12.5333 19.7334L13.8667 21.0667L12.5333 22.4001" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M9.59998 18.1333V20C9.59998 20.2828 9.71235 20.5542 9.9124 20.7542C10.1125 20.9543 10.3838 21.0666 10.6666 21.0666H13.8666" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M19.7333 12.5332L21.0667 13.8665L22.4 12.5332" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M18.1334 9.6001H20C20.2829 9.6001 20.5542 9.71247 20.7543 9.91252C20.9543 10.1126 21.0667 10.3839 21.0667 10.6668V13.8668" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
diff --git a/packages/nc-gui/extensions/bulk-update/description.md b/packages/nc-gui/extensions/bulk-update/description.md
deleted file mode 100644
index 46d29d73fe..0000000000
--- a/packages/nc-gui/extensions/bulk-update/description.md
+++ /dev/null
@@ -1,39 +0,0 @@
-Bulk update
-</br> </br>
-
-// Todo: update details
-
-The download process is handled asynchronously in the background, ensuring that your workflow remains uninterrupted. Once your file is ready, you’ll receive a notification, allowing you to download the CSV at your convenience.
-</br> </br>
-
-**Key Features**
-
-- Easy CSV downloads for specific tables and views
-- Asynchronous processing for seamless operation
-- Instant notifications when the file is ready for download
-  </br> </br>
-
-Elevate your data handling capabilities with the NocoDB Data Exporter extension!
-</br></br>
-
-<!-- Todo: Add docs link -->
-<a href="" target="_blank" rel="noopener noreferrer" class="!no-underline !hover:underline inline-flex items-center gap-2 ">
-    Learn more
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-        <path d="M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M10 2H14V6" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M6.66669 9.33333L14 2" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-    </svg>
-</a>
-
-</br></br>
-
-<div class="flex">
-<!-- Todo: image  -->
-    <img src="" width="50%" class="object-contain rounded-xl"/>
-</div>
-</br>
-<div>
-<!-- Todo: image  -->
- <img src="" width="100%" class="object-contain rounded-xl"/>
-</div>
diff --git a/packages/nc-gui/extensions/bulk-update/index.vue b/packages/nc-gui/extensions/bulk-update/index.vue
deleted file mode 100644
index 9844273de6..0000000000
--- a/packages/nc-gui/extensions/bulk-update/index.vue
+++ /dev/null
@@ -1,431 +0,0 @@
-<script setup lang="ts">
-import dayjs from 'dayjs'
-import { type ViewType, ViewTypes } from 'nocodb-sdk'
-
-const jobStatusTooltip = {
-  [JobStatus.COMPLETED]: 'Export successful',
-  [JobStatus.FAILED]: 'Export failed',
-} as Record<string, string>
-
-const { $api, $poller } = useNuxtApp()
-
-const { appInfo } = useGlobal()
-
-const { extension, tables, fullscreen, getViewsForTable } = useExtensionHelperOrThrow()
-
-const { jobList, loadJobsForBase } = useJobs()
-
-const views = ref<ViewType[]>([])
-
-const deletedExports = ref<string[]>([])
-
-const dataExporterRef = ref<HTMLDivElement>()
-
-const { width } = useElementSize(dataExporterRef)
-
-const exportedFiles = computed(() => {
-  return jobList.value
-    .filter(
-      (job) =>
-        job.job === 'data-export' && job.result?.extension_id === extension.value.id && !deletedExports.value.includes(job.id),
-    )
-    .map((job) => {
-      return {
-        ...job,
-        result: (job.result || {}) as { url: string; type: 'csv' | 'json' | 'xlsx'; title: string; timestamp: number },
-      }
-    })
-    .sort((a, b) => dayjs(b.created_at).unix() - dayjs(a.created_at).unix())
-})
-
-const exportPayload = ref<{
-  tableId?: string
-  viewId?: string
-}>({})
-
-const tableList = computed(() => {
-  return tables.value.map((table) => {
-    return {
-      label: table.title,
-      value: table.id,
-      meta: table.meta,
-    }
-  })
-})
-
-const viewList = computed(() => {
-  if (!exportPayload.value.tableId) return []
-  return (
-    views.value
-      .filter((view) => view.type === ViewTypes.GRID)
-      .map((view) => {
-        return {
-          label: view.is_default ? `Default View` : view.title,
-          value: view.id,
-          meta: view.meta,
-          type: view.type,
-        }
-      }) || []
-  )
-})
-
-const reloadViews = async () => {
-  if (exportPayload.value.tableId) {
-    views.value = await getViewsForTable(exportPayload.value.tableId)
-  }
-}
-
-const onTableSelect = async (tableId: string) => {
-  exportPayload.value.tableId = tableId
-  await reloadViews()
-  exportPayload.value.viewId = views.value.find((view) => view.is_default)?.id
-  await extension.value.kvStore.set('exportPayload', exportPayload.value)
-}
-
-const onViewSelect = async (viewId: string) => {
-  exportPayload.value.viewId = viewId
-  await extension.value.kvStore.set('exportPayload', exportPayload.value)
-}
-
-const isExporting = ref(false)
-
-async function exportDataAsync() {
-  try {
-    if (isExporting.value || !exportPayload.value.viewId) return
-
-    isExporting.value = true
-
-    const jobData = await $api.export.data(exportPayload.value.viewId, 'csv', { extension_id: extension.value.id })
-    jobList.value.unshift(jobData)
-
-    $poller.subscribe(
-      { id: jobData.id },
-      async (data: {
-        id: string
-        status?: string
-        data?: {
-          error?: {
-            message: string
-          }
-          message?: string
-          result?: any
-        }
-      }) => {
-        if (data.status !== 'close') {
-          if (data.status === JobStatus.COMPLETED) {
-            // Export completed successfully
-            message.info('Successfully exported data!')
-
-            const job = jobList.value.find((j) => j.id === data.id)
-            if (job) {
-              job.status = JobStatus.COMPLETED
-              job.result = data.data?.result
-            }
-
-            isExporting.value = false
-          } else if (data.status === JobStatus.FAILED) {
-            message.error('Failed to export data!')
-
-            const job = jobList.value.find((j) => j.id === data.id)
-            if (job) {
-              job.status = JobStatus.FAILED
-              job.result = data.data?.result
-
-              // Add title if not present in response
-              if (!job.result?.title) {
-                job.result = {
-                  ...(job.result || {}),
-                  title: titleHelper(),
-                }
-              }
-            }
-
-            isExporting.value = false
-          }
-        }
-      },
-    )
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-const urlHelper = (url: string) => {
-  if (url.startsWith('http')) {
-    return url
-  } else {
-    return `${appInfo.value.ncSiteUrl || BASE_FALLBACK_URL}/${url}`
-  }
-}
-
-const handleDownload = async (url: string) => {
-  const isExpired = await isLinkExpired(url)
-
-  if (isExpired) {
-    navigateTo(url, {
-      open: navigateToBlankTargetOpenOption,
-    })
-    return
-  }
-
-  const link = document.createElement('a')
-  link.href = url
-  link.style.display = 'none' // Hide the link
-
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}
-
-function titleHelper() {
-  const table = tables.value.find((t) => t.id === exportPayload.value.tableId)
-  const view = views.value.find((v) => v.id === exportPayload.value.viewId)
-
-  return `${table?.title} (${view?.is_default ? 'Default View' : view?.title})`
-}
-
-const onRemoveExportedFile = async (exportId: string) => {
-  deletedExports.value.push(exportId)
-
-  await extension.value.kvStore.set('deletedExports', deletedExports.value)
-}
-
-const filterOption = (input: string, option: { key: string }) => {
-  return option.key?.toLowerCase()?.includes(input?.toLowerCase())
-}
-
-onMounted(() => {
-  exportPayload.value = extension.value.kvStore.get('exportPayload') || {}
-  deletedExports.value = extension.value.kvStore.get('deletedExports') || []
-  reloadViews()
-  loadJobsForBase()
-})
-</script>
-
-<template>
-  <ExtensionsExtensionWrapper>
-    <div
-      ref="dataExporterRef"
-      class="data-exporter"
-      :class="{
-        'p-4': fullscreen,
-        'p-3': !fullscreen,
-      }"
-    >
-      <div class="pb-3 flex items-center justify-between gap-2.5 flex-wrap">
-        <div
-          class="flex-1 flex items-center"
-          :class="{
-            'max-w-[min(350px,calc(100%-124px))]': isExporting && !fullscreen && width > 325,
-            'max-w-[min(350px,calc(100%_-_84px))]': !isExporting && !fullscreen && width > 325,
-            'max-w-full': width <= 325,
-            'max-w-[480px]': fullscreen,
-          }"
-        >
-          <div
-            class="flex-1 flex items-center border-1 border-gray-200 rounded-lg focus-within:(border-brand-500 shadow-selected) transition-colors transition-shadow"
-          >
-            <NcSelect
-              v-model:value="exportPayload.tableId"
-              placeholder="-select table-"
-              :disabled="isExporting"
-              class="nc-data-exporter-table-select"
-              :class="{
-                'flex-1 max-w-[240px]': fullscreen,
-                'min-w-1/2 max-w-[175px]': !fullscreen,
-              }"
-              :bordered="false"
-              :filter-option="filterOption"
-              dropdown-class-name="w-[250px]"
-              show-search
-              @change="onTableSelect"
-            >
-              <a-select-option v-for="table of tableList" :key="table.label" :value="table.value">
-                <div class="w-full flex items-center gap-2">
-                  <div class="min-w-5 flex items-center justify-center">
-                    <GeneralTableIcon :meta="{ meta: table.meta }" class="text-gray-500" />
-                  </div>
-                  <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                    <template #title>{{ table.label }}</template>
-                    <span>{{ table.label }}</span>
-                  </NcTooltip>
-                  <component
-                    :is="iconMap.check"
-                    v-if="exportPayload.tableId === table.value"
-                    id="nc-selected-item-icon"
-                    class="flex-none text-primary w-4 h-4"
-                  />
-                </div>
-              </a-select-option>
-            </NcSelect>
-            <div class="flex-none h-8 border-l-1 border-gray-200"></div>
-
-            <NcSelect
-              v-model:value="exportPayload.viewId"
-              placeholder="-select view-"
-              :disabled="isExporting"
-              class="nc-data-exporter-view-select"
-              :class="{
-                'flex-1 max-w-[240px]': fullscreen,
-                'min-w-1/2 max-w-[175px]': !fullscreen,
-              }"
-              :bordered="false"
-              dropdown-class-name="w-[250px]"
-              :filter-option="filterOption"
-              show-search
-              @change="onViewSelect"
-            >
-              <a-select-option v-for="view of viewList" :key="view.label" :value="view.value">
-                <div class="w-full flex items-center gap-2">
-                  <div class="min-w-5 flex items-center justify-center">
-                    <GeneralViewIcon :meta="{ meta: view.meta, type: view.type }" class="flex-none text-gray-500" />
-                  </div>
-                  <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                    <template #title>{{ view.label }}</template>
-                    <span>{{ view.label }}</span>
-                  </NcTooltip>
-                  <component
-                    :is="iconMap.check"
-                    v-if="exportPayload.viewId === view.value"
-                    id="nc-selected-item-icon"
-                    class="flex-none text-primary w-4 h-4"
-                  />
-                </div> </a-select-option
-            ></NcSelect>
-          </div>
-        </div>
-        <div class="flex-none flex justify-end">
-          <NcTooltip class="flex" placement="topRight" :disabled="!isExporting">
-            <template #title> The CSV file is being prepared in the background. You'll be notified once it's ready. </template>
-            <NcButton :disabled="!exportPayload?.viewId" :loading="isExporting" size="xs" @click="exportDataAsync">{{
-              isExporting ? 'Generating' : 'Export'
-            }}</NcButton>
-          </NcTooltip>
-        </div>
-      </div>
-      <div class="data-exporter-body flex-1 flex flex-col">
-        <div class="data-exporter-header">Recent Exports</div>
-        <div v-if="exportedFiles.length" class="flex-1 flex flex-col nc-scrollbar-thin max-h-[calc(100%_-_25px)]">
-          <template v-for="exp of exportedFiles">
-            <div
-              v-if="exp.status === JobStatus.COMPLETED ? exp.result : true"
-              :key="exp.id"
-              class="p-3 flex gap-2 justify-between border-b-1 hover:bg-gray-50"
-              :class="{
-                'px-4 py-3': fullscreen,
-                'px-3 py-2': !fullscreen,
-              }"
-            >
-              <div
-                class="flex-1 flex items-start gap-3"
-                :class="{
-                  'max-w-[calc(100%_-_74px)]': exp.status === JobStatus.COMPLETED,
-                  'max-w-[calc(100%_-_38px)]': exp.status !== JobStatus.COMPLETED,
-                }"
-              >
-                <NcTooltip v-if="[JobStatus.COMPLETED, JobStatus.FAILED].includes(exp.status)" class="flex">
-                  <template #title>
-                    {{ jobStatusTooltip[exp.status] }}
-                  </template>
-                  <GeneralIcon
-                    :icon="exp.status === JobStatus.COMPLETED ? 'circleCheckSolid' : 'alertTriangleSolid'"
-                    class="flex-none h-5 w-5"
-                    :class="{
-                      '!text-green-700': exp.status === JobStatus.COMPLETED,
-                      '!text-red-700': exp.status === JobStatus.FAILED,
-                    }"
-                  />
-                </NcTooltip>
-                <div v-else class="h-5 flex items-center">
-                  <GeneralLoader size="regular" class="flex-none" />
-                </div>
-
-                <div class="flex-1 max-w-[calc(100%_-_28px)] flex flex-col gap-1">
-                  <div class="inline-flex gap-1 text-sm text-gray-800 -ml-[1px]">
-                    <span class="inline-flex items-center h-5">
-                      <GeneralIcon icon="file" class="flex-none text-gray-600/80 h-3.5 w-3.5" />
-                    </span>
-                    <NcTooltip class="truncate max-w-[calc(100%_-_20px)]" show-on-truncate-only>
-                      <template #title>
-                        {{ exp.result.title || titleHelper() }}
-                      </template>
-                      {{ exp.result.title || titleHelper() }}
-                    </NcTooltip>
-                  </div>
-
-                  <div v-if="exp.result.timestamp" name="error" class="text-small leading-[18px] text-nc-content-gray-muted">
-                    {{ timeAgo(dayjs(exp.result.timestamp).toString()) }}
-                  </div>
-                </div>
-              </div>
-
-              <div v-if="exp.status === JobStatus.COMPLETED" class="flex" @click="handleDownload(urlHelper(exp.result.url))">
-                <NcTooltip class="flex">
-                  <template #title>
-                    {{ $t('general.download') }}
-                  </template>
-
-                  <NcButton type="secondary" size="xs" class="!px-[5px]">
-                    <div class="flex items-center gap-2">
-                      <GeneralIcon icon="download" />
-                    </div>
-                  </NcButton>
-                </NcTooltip>
-              </div>
-
-              <div class="flex">
-                <NcTooltip class="flex">
-                  <template #title>
-                    {{ $t('general.remove') }}
-                  </template>
-
-                  <NcButton type="text" size="xs" class="!px-[5px]" @click="onRemoveExportedFile(exp.id)">
-                    <GeneralIcon icon="close" />
-                  </NcButton>
-                </NcTooltip>
-              </div>
-            </div>
-          </template>
-        </div>
-        <div v-else class="px-3 py-2 flex-1 flex items-center justify-center text-gray-600">No exports</div>
-      </div>
-    </div>
-  </ExtensionsExtensionWrapper>
-</template>
-
-<style lang="scss" scoped>
-:deep(.extension-content-container) {
-  @apply !p-0;
-}
-.data-exporter {
-  @apply flex flex-col overflow-hidden h-full;
-  .data-exporter-header {
-    @apply px-3 py-1 bg-gray-100 text-[11px] leading-4 text-gray-600 border-b-1;
-  }
-
-  // .nc-data-exporter-table-select {
-  //   :deep(.ant-select-selector) {
-  //     @apply !border-r-1 rounded-lg !rounded-r-none shadow-none;
-  //   }
-  // }
-  // .nc-data-exporter-view-select {
-  //   :deep(.ant-select-selector) {
-  //     @apply !border-l-0 rounded-lg !rounded-l-none shadow-none;
-  //   }
-  // }
-
-  .data-exporter-body {
-    @apply flex-1 rounded-lg border-1 overflow-hidden;
-  }
-
-  .data-exporter-footer {
-    @apply flex items-center justify-end bg-gray-100;
-  }
-}
-</style>
-
-<style>
-.nc-nc-data-exporter .extension-content {
-  @apply !p-0;
-}
-</style>
diff --git a/packages/nc-gui/extensions/bulk-update/manifest.json b/packages/nc-gui/extensions/bulk-update/manifest.json
deleted file mode 100644
index e0fce0dda3..0000000000
--- a/packages/nc-gui/extensions/bulk-update/manifest.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "id": "nc-bulk-update",
-  "title": "Bulk Update",
-  "subTitle": "Upload multiple records values in a field with a single click",
-  "description": "bulk-update/description.md",
-  "entry": "bulk-update",
-  "version": "0.1",
-  "iconUrl": "bulk-update/assets/icon.svg",
-  "publisher": {
-    "name": "NocoDB",
-    "email": "contact@nocodb.com",
-    "url": "https://www.nocodb.com",
-    "icon": {
-      "src": "bulk-update/assets/publisher-icon.svg",
-      "width": 24,
-      "height": 24
-    }
-  },
-  "links": [],
-  "config": {}
-}
diff --git a/packages/nc-gui/extensions/json-exporter/index.vue b/packages/nc-gui/extensions/json-exporter/index.vue
index 721c263de4..40eb9c4a4c 100644
--- a/packages/nc-gui/extensions/json-exporter/index.vue
+++ b/packages/nc-gui/extensions/json-exporter/index.vue
@@ -101,4 +101,10 @@ onMounted(() => {
   </ExtensionsExtensionWrapper>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.nc-nc-json-exporter .extension-content {
+  &:not(.fullscreen){
+    @apply p-3;
+  }
+}
+</style>

From ea2b8f0f0ac7d7bf3cbe989768ba670b34da50f5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Nov 2024 06:45:55 +0000
Subject: [PATCH 3/7] fix(nc-gui): load only those extensions which are
 available

---
 packages/nc-gui/composables/useExtensions.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/composables/useExtensions.ts b/packages/nc-gui/composables/useExtensions.ts
index 190db1e18a..c9a571b03e 100644
--- a/packages/nc-gui/composables/useExtensions.ts
+++ b/packages/nc-gui/composables/useExtensions.ts
@@ -68,6 +68,10 @@ export const useExtensions = createSharedComposable(() => {
 
   const availableExtensions = ref<ExtensionManifest[]>([])
 
+  const availableExtensionIds = computed(() => {
+    return availableExtensions.value.map((e) => e.id)
+  })
+
   // Object to store description content for each extension
   const descriptionContent = ref<Record<string, string>>({})
 
@@ -85,11 +89,11 @@ export const useExtensions = createSharedComposable(() => {
   })
 
   const extensionList = computed<ExtensionType[]>(() => {
-    return (activeBaseExtensions.value ? activeBaseExtensions.value.extensions : []).sort(
-      (a: ExtensionType, b: ExtensionType) => {
+    return (activeBaseExtensions.value ? activeBaseExtensions.value.extensions : [])
+      .filter((e: ExtensionType) => availableExtensionIds.value.includes(e.extensionId))
+      .sort((a: ExtensionType, b: ExtensionType) => {
         return (a?.order ?? Infinity) - (b?.order ?? Infinity)
-      },
-    )
+      })
   })
 
   const toggleExtensionPanel = () => {

From e002ce67ca1f12627251414774f86d81de9ea95f Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Nov 2024 06:45:56 +0000
Subject: [PATCH 4/7] fix(nc-gui): trigger field reload on adding new field

---
 packages/nc-gui/components/smartsheet/column/EditOrAdd.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 2910a1ba0a..27ddf716fc 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -53,6 +53,8 @@ const { t } = useI18n()
 
 const { isMetaReadOnly } = useRoles()
 
+const { eventBus } = useSmartsheetStoreOrThrow()
+
 const columnLabel = computed(() => props.columnLabel || t('objects.field'))
 
 const { $e } = useNuxtApp()
@@ -179,6 +181,8 @@ const onSelectType = (uidt: UITypes) => {
 const reloadMetaAndData = async () => {
   await getMeta(meta.value?.id as string, true)
 
+  eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD)
+
   if (!isKanban.value) {
     reloadDataTrigger?.trigger()
   }

From 50a2fbbdaedbde38d5af0f2ae0400c7f123e138e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Nov 2024 06:45:57 +0000
Subject: [PATCH 5/7] fix(nc-gui): longtext cell icon color issue

---
 packages/nc-gui/assets/nc-icons/cell-longtext.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/assets/nc-icons/cell-longtext.svg b/packages/nc-gui/assets/nc-icons/cell-longtext.svg
index bfdb92ae92..dcb7c9d8fb 100644
--- a/packages/nc-gui/assets/nc-icons/cell-longtext.svg
+++ b/packages/nc-gui/assets/nc-icons/cell-longtext.svg
@@ -3,6 +3,6 @@
 <path d="M21 6H11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M21 14H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M17 18H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3 10L5.41056 5.17889C5.44741 5.10518 5.55259 5.10518 5.58944 5.17889L8 10" stroke="#1F293A" stroke-width="2" stroke-linecap="round"/>
+<path d="M3 10L5.41056 5.17889C5.44741 5.10518 5.55259 5.10518 5.58944 5.17889L8 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 <path d="M4 9H7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 </svg>

From 47460c52778ae078bdf867f3215be3f8965a2b26 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Nov 2024 06:45:58 +0000
Subject: [PATCH 6/7] chore(nc-gui): lint

---
 packages/nc-gui/components/extensions/Extension.vue | 2 +-
 packages/nc-gui/components/extensions/Market.vue    | 4 +---
 packages/nc-gui/extensions/json-exporter/index.vue  | 2 +-
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/extensions/Extension.vue b/packages/nc-gui/components/extensions/Extension.vue
index 4b3a98be9b..7f0918bfd9 100644
--- a/packages/nc-gui/components/extensions/Extension.vue
+++ b/packages/nc-gui/components/extensions/Extension.vue
@@ -6,7 +6,7 @@ interface Prop {
 
 const { extensionId, error } = defineProps<Prop>()
 
-const { extensionList, extensionsLoaded, availableExtensions, eventBus } = useExtensions()
+const { extensionList, extensionsLoaded, availableExtensions } = useExtensions()
 
 const isLoadedExtension = ref<boolean>(true)
 
diff --git a/packages/nc-gui/components/extensions/Market.vue b/packages/nc-gui/components/extensions/Market.vue
index 7b5772150a..df295da80f 100644
--- a/packages/nc-gui/components/extensions/Market.vue
+++ b/packages/nc-gui/components/extensions/Market.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { VNodeRef } from '@vue/runtime-core'
-
 interface Prop {
   modelValue?: boolean
 }
@@ -73,7 +71,7 @@ const handleSetActiveTab = (tab: TabItem) => {
   handleShowSearchInput()
 }
 
-onClickOutside(searchWrapperRef, (e) => {
+onClickOutside(searchWrapperRef, () => {
   if (searchQuery.value) {
     return
   }
diff --git a/packages/nc-gui/extensions/json-exporter/index.vue b/packages/nc-gui/extensions/json-exporter/index.vue
index 40eb9c4a4c..bd533d330d 100644
--- a/packages/nc-gui/extensions/json-exporter/index.vue
+++ b/packages/nc-gui/extensions/json-exporter/index.vue
@@ -103,7 +103,7 @@ onMounted(() => {
 
 <style lang="scss">
 .nc-nc-json-exporter .extension-content {
-  &:not(.fullscreen){
+  &:not(.fullscreen) {
     @apply p-3;
   }
 }

From 71bbc850277e9a61b026a77116211ae556cfe11a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 12 Nov 2024 06:45:58 +0000
Subject: [PATCH 7/7] fix(nc-gui): add default field validation in bulk updates

---
 packages/nc-gui/composables/useSharedView.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index 54bccf5774..c50d0d9ad3 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -340,7 +340,7 @@ export function useSharedView() {
     )
   }
 
-  const fetchCount = async (param: { filtersArr: FilterType[], where?: string }) => {
+  const fetchCount = async (param: { filtersArr: FilterType[]; where?: string }) => {
     const data = await $api.public.dbViewRowCount(
       sharedView.value.uuid!,
       {