From 3ea811bd7ab82f86eb268c056c64d5ec2210e849 Mon Sep 17 00:00:00 2001
From: Aman Desai <39585600+amandesai01@users.noreply.github.com>
Date: Thu, 5 Dec 2024 23:48:43 +0530
Subject: [PATCH] chore(extensions): fix on extension (#9972)

---
 .../extensions/Extension/Header.vue           | 10 ++++++-
 .../nc-gui/components/extensions/Market.vue   |  2 ++
 .../extensions/Market/ExtensionsTab.vue       | 14 +++++++++-
 .../nc-gui/components/extensions/Pane.vue     |  1 +
 packages/nc-gui/composables/useExtensions.ts  | 28 +++++++++++++------
 .../nc-gui/extensions/data-exporter/index.vue |  9 +++++-
 6 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/extensions/Extension/Header.vue b/packages/nc-gui/components/extensions/Extension/Header.vue
index 8676400abe..34a691b2a3 100644
--- a/packages/nc-gui/components/extensions/Extension/Header.vue
+++ b/packages/nc-gui/components/extensions/Extension/Header.vue
@@ -14,9 +14,12 @@ withDefaults(defineProps<Props>(), {
   isFullscreen: true,
 })
 
+const { $e } = useNuxtApp()
+
 const { eventBus, getExtensionAssetsUrl, duplicateExtension, showExtensionDetails } = useExtensions()
 
 const { fullscreen, collapsed, extension, extensionManifest, activeError, showExpandBtn } = useExtensionHelperOrThrow()
+const EXTENSION_ID = extension.value.extensionId;
 
 const titleInput = ref<HTMLInputElement | null>(null)
 
@@ -65,6 +68,11 @@ const handleDuplicateExtension = async (id: string, open: boolean = false) => {
     })
   }
 }
+
+const toggleFullScreen = () => {
+  fullscreen.value = true
+  $e(`c:extensions:${EXTENSION_ID}:full-screen`)
+}
 </script>
 
 <template>
@@ -150,7 +158,7 @@ const handleDuplicateExtension = async (id: string, open: boolean = false) => {
         size="xs"
         type="text"
         class="nc-extension-expand-btn !px-1"
-        @click.stop="fullscreen = true"
+        @click.stop="toggleFullScreen"
       >
         <GeneralIcon icon="ncMaximize2" class="h-3.5 w-3.5" />
       </NcButton>
diff --git a/packages/nc-gui/components/extensions/Market.vue b/packages/nc-gui/components/extensions/Market.vue
index df295da80f..a8a9d1e1e5 100644
--- a/packages/nc-gui/components/extensions/Market.vue
+++ b/packages/nc-gui/components/extensions/Market.vue
@@ -14,6 +14,8 @@ interface TabItem {
 
 const props = defineProps<Prop>()
 
+const { $e } = useNuxtApp()
+
 const emit = defineEmits(['update:modelValue'])
 
 const tabs = [
diff --git a/packages/nc-gui/components/extensions/Market/ExtensionsTab.vue b/packages/nc-gui/components/extensions/Market/ExtensionsTab.vue
index e492c6b0e9..739428d7df 100644
--- a/packages/nc-gui/components/extensions/Market/ExtensionsTab.vue
+++ b/packages/nc-gui/components/extensions/Market/ExtensionsTab.vue
@@ -4,6 +4,8 @@ interface Props {
   isOpen: boolean
 }
 
+const { $e } = useNuxtApp()
+
 const props = withDefaults(defineProps<Props>(), {})
 
 const emits = defineEmits(['update:searchQuery', 'update:isOpen'])
@@ -12,6 +14,16 @@ const searchQuery = useVModel(props, 'searchQuery', emits)
 
 const isOpen = useVModel(props, 'isOpen', emits)
 
+watchDebounced(
+  searchQuery,
+  () => {
+    if (searchQuery.value) {
+      $e('c:extensions:marketplace:search')
+    }
+  },
+  { debounce: 3000 },
+)
+
 const { availableExtensions, addExtension, getExtensionAssetsUrl, showExtensionDetails } = useExtensions()
 
 const filteredAvailableExtensions = computed(() =>
@@ -23,7 +35,7 @@ const filteredAvailableExtensions = computed(() =>
 )
 
 const onExtensionClick = (extensionId: string) => {
-  showExtensionDetails(extensionId)
+  showExtensionDetails(extensionId, 'market')
   isOpen.value = false
 }
 
diff --git a/packages/nc-gui/components/extensions/Pane.vue b/packages/nc-gui/components/extensions/Pane.vue
index 9f44f1dac9..c43f2bf800 100644
--- a/packages/nc-gui/components/extensions/Pane.vue
+++ b/packages/nc-gui/components/extensions/Pane.vue
@@ -59,6 +59,7 @@ const filteredExtensionList = computed(() =>
 )
 
 const toggleMarket = () => {
+  $e('c:extensions:marketplace:open')
   isMarketVisible.value = !isMarketVisible.value
 }
 
diff --git a/packages/nc-gui/composables/useExtensions.ts b/packages/nc-gui/composables/useExtensions.ts
index b053683366..1f18fc9790 100644
--- a/packages/nc-gui/composables/useExtensions.ts
+++ b/packages/nc-gui/composables/useExtensions.ts
@@ -75,7 +75,7 @@ export { ExtensionType }
 export const useExtensions = createSharedComposable(() => {
   const { baseExtensions } = extensionsState()
 
-  const { $api } = useNuxtApp()
+  const { $api, $e } = useNuxtApp()
 
   const { base } = storeToRefs(useBase())
 
@@ -159,6 +159,7 @@ export const useExtensions = createSharedComposable(() => {
 
       nextTick(() => {
         eventBus.emit(ExtensionsEvents.ADD, newExtension?.id)
+        $e('a:extension:add', { extensionId: extensionReq.extension_id })
       })
     }
 
@@ -205,9 +206,13 @@ export const useExtensions = createSharedComposable(() => {
 
     await $api.extensions.delete(extensionId)
 
+    const extensionToDelete = baseExtensions.value[base.value.id].extensions.find((e: any) => e.id === extensionId);
+
     baseExtensions.value[base.value.id].extensions = baseExtensions.value[base.value.id].extensions.filter(
       (ext: any) => ext.id !== extensionId,
     )
+
+    $e('a:extension:delete', { extensionId: extensionToDelete.extensionId })
   }
 
   const duplicateExtension = async (extensionId: string) => {
@@ -229,7 +234,11 @@ export const useExtensions = createSharedComposable(() => {
     })
 
     if (newExtension) {
-      baseExtensions.value[base.value.id].extensions.push(new Extension(newExtension))
+      const duplicatedExtension = new Extension(newExtension);
+      baseExtensions.value[base.value.id].extensions.push(duplicatedExtension)
+      eventBus.emit(ExtensionsEvents.DUPLICATE, duplicatedExtension.id)
+
+      $e('a:extension:duplicate', { extensionId: extension.extensionId })
     }
 
     return newExtension
@@ -291,25 +300,25 @@ export const useExtensions = createSharedComposable(() => {
     }
   }
 
-  class KvStore<T = any> implements IKvStore<T> {
+  class KvStore<T extends Record<string, any> = any> implements IKvStore<T> {
     private _id: string
-    private data: Record<string, T>
+    private data: T
 
-    constructor(id: string, data: Record<string, T>) {
+    constructor(id: string, data: T) {
       this._id = id
       this.data = data || {}
     }
 
-    get(key: string) {
+    get<K extends keyof T = any>(key: K) {
       return this.data[key] || null
     }
 
-    set(key: string, value: any) {
+    set<K extends keyof T = any>(key: K, value: any) {
       this.data[key] = value
       return updateExtension(this._id, { kv_store: this.data })
     }
 
-    async delete(key: string) {
+    async delete<K extends keyof T = any>(key: K) {
       delete this.data[key]
       await updateExtension(this._id, { kv_store: this.data })
     }
@@ -412,6 +421,7 @@ export const useExtensions = createSharedComposable(() => {
 
         nextTick(() => {
           eventBus.emit(ExtensionsEvents.CLEARDATA, this.id)
+          $e('c:extension:clear-data', { extensionId: this._extensionId })
         })
       })
     }
@@ -514,6 +524,8 @@ export const useExtensions = createSharedComposable(() => {
     detailsExtensionId.value = extensionId
     isDetailsVisible.value = true
     detailsFrom.value = from || 'market'
+
+    $e('c:extension:details', { source: from, extensionId })
   }
 
   // Extension market modal
diff --git a/packages/nc-gui/extensions/data-exporter/index.vue b/packages/nc-gui/extensions/data-exporter/index.vue
index 2ccc179a2c..b10ea10254 100644
--- a/packages/nc-gui/extensions/data-exporter/index.vue
+++ b/packages/nc-gui/extensions/data-exporter/index.vue
@@ -7,7 +7,7 @@ const jobStatusTooltip = {
   [JobStatus.FAILED]: 'Export failed',
 } as Record<string, string>
 
-const { $api, $poller } = useNuxtApp()
+const { $api, $poller, $e } = useNuxtApp()
 
 const { appInfo } = useGlobal()
 
@@ -23,6 +23,7 @@ const activeViewTitleOrId = computed(() => {
 const { eventBus } = useExtensions()
 
 const { extension, tables, fullscreen, getViewsForTable } = useExtensionHelperOrThrow()
+const EXTENSION_ID = extension.value.extensionId
 
 const { jobList, loadJobsForBase } = useJobs()
 
@@ -164,6 +165,7 @@ async function exportDataAsync() {
             }
 
             isExporting.value = false
+            $e(`a:extension:${EXTENSION_ID}:export:completed`)
           } else if (data.status === JobStatus.FAILED) {
             message.error('Failed to export data!')
 
@@ -182,12 +184,15 @@ async function exportDataAsync() {
             }
 
             isExporting.value = false
+            $e(`a:extension:${EXTENSION_ID}:export:failed`)
           }
         }
       },
     )
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    $e(`a:extension:${EXTENSION_ID}:export`)
   }
 }
 
@@ -216,6 +221,8 @@ const handleDownload = async (url: string) => {
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
+
+  $e(`a:extension:${EXTENSION_ID}:export:download`)
 }
 
 function titleHelper() {