fix(nc-gui): update csv import extension flow

packages/nc-gui/components/extensions/Extension.vue

@@ -6,15 +6,7 @@ interface Prop {
 
 const { extensionId, error } = defineProps<Prop>()
 
-const {
+const { extensionList, extensionsLoaded, availableExtensions, eventBus } = useExtensions()
-  extensionList,
-  extensionsLoaded,
-  availableExtensions,
-  eventBus,
-  getExtensionAssetsUrl,
-  duplicateExtension,
-  showExtensionDetails,
-} = useExtensions()
 
 const isLoadedExtension = ref<boolean>(false)
 
@@ -40,28 +32,8 @@ const extensionManifest = computed<ExtensionManifest | undefined>(() => {
 
 const { fullscreen, collapsed } = useProvideExtensionHelper(extension, extensionManifest, activeError)
 
-const titleInput = ref<HTMLInputElement | null>(null)
-
-const titleEditMode = ref<boolean>(false)
-
-const tempTitle = ref<string>(extension.value.title)
-
 const { height } = useElementSize(extensionRef)
 
-const enableEditMode = () => {
-  titleEditMode.value = true
-  tempTitle.value = extension.value.title
-  nextTick(() => {
-    titleInput.value?.focus()
-    titleInput.value?.select()
-  })
-}
-
-const updateExtensionTitle = async () => {
-  await extension.value.setTitle(tempTitle.value)
-  titleEditMode.value = false
-}
-
 const component = ref<any>(null)
 
 const extensionHeight = computed(() => {
@@ -85,12 +57,6 @@ const fullscreenModalMaxWidth = computed(() => {
     : modalMaxWidth.lg
 })
 
-const expandExtension = () => {
-  if (!collapsed.value) return
-
-  collapsed.value = false
-}
-
 // close fullscreen on clicking extensionModalRef directly
 const closeFullscreen = (e: MouseEvent) => {
   if (e.target === extensionModalRef.value) {
@@ -98,15 +64,6 @@ const closeFullscreen = (e: MouseEvent) => {
   }
 }
 
-const handleDuplicateExtension = async (id: string, open: boolean = false) => {
-  const duplicatedExt = await duplicateExtension(id)
-
-  if (duplicatedExt?.id && open) {
-    fullscreen.value = false
-    eventBus.emit(ExtensionsEvents.DUPLICATE, duplicatedExt.id)
-  }
-}
-
 onMounted(() => {
   until(extensionsLoaded)
     .toMatch((v) => v)
@@ -225,7 +182,7 @@ eventBus.on((event, payload) => {
               <div
                 v-show="fullscreen || !collapsed"
                 class="extension-content h-full"
-                :class="{ 'fullscreen': fullscreen, 'h-full': !fullscreen }"
+                :class="{ 'fullscreen': fullscreen, 'h-full nc-scrollbar-thin': !fullscreen }"
               >
                 <component :is="component" :key="extension.uiKey" class="h-full" />
               </div>

packages/nc-gui/components/extensions/Extension/Header.vue

@@ -16,7 +16,7 @@ withDefaults(defineProps<Props>(), {
 
 const { eventBus, getExtensionAssetsUrl, duplicateExtension, showExtensionDetails } = useExtensions()
 
-const { fullscreen, collapsed, extension, extensionManifest, activeError } = useExtensionHelperOrThrow()
+const { fullscreen, collapsed, extension, extensionManifest, activeError, showExpandBtn } = useExtensionHelperOrThrow()
 
 const titleInput = ref<HTMLInputElement | null>(null)
 
@@ -24,6 +24,10 @@ const titleEditMode = ref<boolean>(false)
 
 const tempTitle = ref<string>(extension.value.title)
 
+const showExpandButton = computed(() => {
+  return showExpandBtn.value && !activeError.value
+})
+
 const enableEditMode = () => {
   titleEditMode.value = true
   tempTitle.value = extension.value.title
@@ -82,13 +86,22 @@ const handleDuplicateExtension = async (id: string, open: boolean = false) => {
       :src="getExtensionAssetsUrl(extensionManifest.iconUrl)"
       alt="icon"
       class="h-8 w-8 object-contain flex-none"
+      :class="{
+        'mx-1': !isFullscreen,
+      }"
     />
-    <div v-if="titleEditMode" class="flex-1">
+    <div
+      v-if="titleEditMode"
+      class="flex-1"
+      :class="{
+        'mr-1': !isFullscreen,
+      }"
+    >
       <a-input
         ref="titleInput"
         v-model:value="tempTitle"
         type="text"
-        class="flex-1 !h-8 !px-1 !py-1 !-ml-1 !rounded-lg extension-title"
+        class="!h-8 !px-1 !py-1 !-ml-1 !rounded-lg extension-title"
         :class="{
           'w-4/5': !isFullscreen,
           '!text-lg !font-semibold max-w-[420px]': isFullscreen,
@@ -109,6 +122,7 @@ const handleDuplicateExtension = async (id: string, open: boolean = false) => {
         class="extension-title cursor-pointer"
         :class="{
           'text-lg font-semibold ': isFullscreen,
+          'mr-1': !isFullscreen,
         }"
         @dblclick.stop="enableEditMode"
         @click.stop
@@ -126,19 +140,24 @@ const handleDuplicateExtension = async (id: string, open: boolean = false) => {
       @clear-data="extension.clear()"
       @delete="extension.delete()"
     />
+
     <template v-if="!isFullscreen">
-      <NcButton v-if="!activeError" size="xs" type="text" class="nc-extension-expand-btn !px-1" @click.stop="fullscreen = true">
+      <NcButton
+        v-if="showExpandButton"
+        size="xs"
+        type="text"
+        class="nc-extension-expand-btn !px-1"
+        @click.stop="fullscreen = true"
+      >
         <GeneralIcon icon="ncMaximize2" class="h-3.5 w-3.5" />
       </NcButton>
       <NcButton size="xs" type="text" class="!px-1" @click.stop="collapsed = !collapsed">
         <GeneralIcon :icon="collapsed ? 'arrowDown' : 'arrowUp'" class="flex-none" />
       </NcButton>
     </template>
-    <template v-else>
+    <NcButton v-else :size="isFullscreen ? 'small' : 'xs'" type="text" class="flex-none !px-1" @click="fullscreen = false">
-      <NcButton :size="isFullscreen ? 'small' : 'xs'" type="text" class="flex-none !px-1" @click="fullscreen = false">
+      <GeneralIcon icon="close" />
-        <GeneralIcon icon="close" />
+    </NcButton>
-      </NcButton>
-    </template>
   </div>
 </template>
 

packages/nc-gui/components/extensions/Extension/Wrapper.vue

@@ -7,8 +7,8 @@ const { height } = useElementSize(headerRef)
 </script>
 
 <template>
-  <div>
+  <div class="h-full">
-    <div ref="headerRef">
+    <div ref="headerRef" class="extension-header-wrapper">
       <ExtensionsExtensionHeader>
         <template #extra>
           <slot name="headerExtra"></slot>
@@ -16,8 +16,9 @@ const { height } = useElementSize(headerRef)
       </ExtensionsExtensionHeader>
     </div>
     <div
+      class="extension-content-container"
       :class="{
-        'p-6 max': fullscreen,
+        'fullscreen p-6': fullscreen,
         'h-full': !fullscreen,
       }"
       :style="fullscreen ? { height: height ? `calc(100% - ${height}px)` : 'calc(100% - 64px)' } : {}"

packages/nc-gui/composables/useExtensionHelper.ts

@@ -2,7 +2,7 @@ import type { ColumnType, ViewType } from 'nocodb-sdk'
 import type { ExtensionManifest, ExtensionType } from '#imports'
 
 const [useProvideExtensionHelper, useExtensionHelper] = useInjectionState(
-  (extension: Ref<ExtensionType>, extensionManifest: ComputedRef<ExtensionManifest | undefined>, activeError) => {
+  (extension: Ref<ExtensionType>, extensionManifest: ComputedRef<ExtensionManifest | undefined>, activeError: Ref<any>) => {
     const { $api } = useNuxtApp()
 
     const basesStore = useBases()
@@ -23,6 +23,8 @@ const [useProvideExtensionHelper, useExtensionHelper] = useInjectionState(
 
     const fullscreen = ref(false)
 
+    const showExpandBtn = ref(false)
+
     const collapsed = computed({
       get: () => extension.value?.meta?.collapsed ?? false,
       set: (value) => {
@@ -206,6 +208,7 @@ const [useProvideExtensionHelper, useExtensionHelper] = useInjectionState(
       extensionManifest,
       activeError,
       tables,
+      showExpandBtn,
       getViewsForTable,
       getData,
       getTableMeta,