feat: data reflection preps (#10227)

* feat: integration hooks * feat: data reflection * feat: improved UX for data reflection * chore: lint * fix(nc-gui): update nocodb integration ui * fix(nocodb): type error * fix(nc-gui): nocodb integration icon and modal gap issue * fix: defer integration hooks * fix: check proper state * refactor(nc-gui): integration modal * refactor(nc-gui): integration modal ui changes * refactor: change default port * fix(nc-gui): add base id copy input * fix(nc-gui): schema dropdown placement and item height issue * fix(nc-gui): nocodb connection bg color issue * fix(nc-gui): update nocodb integration count and user logo * fix: rspack keep class * feat: get connection menu item * chore: rebase issue * fix: hide nc from sources * feat: move data reflection to model level * fix: remove deprecated fn & fix type errors * feat: reflection settings * feat: feature flag for data reflection * refactor: avoid save on feature flags * fix: properly show host * fix: PR requested changes * fix: use named parameters for queries --------- Co-authored-by: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
2026-05-02 10:57:09 +00:00 · 2025-01-14 14:59:45 +03:00
parent 51edd98b9e
commit c2f50efbb9
39 changed files with 1379 additions and 272 deletions
--- a/packages/nc-gui/components/workspace/integrations/connect/SchemaInput.vue
+++ b/packages/nc-gui/components/workspace/integrations/connect/SchemaInput.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const vModel = useVModel(props, 'modelValue', emit)
+
+const { basesList } = storeToRefs(useBases())
+
+const isOpen = ref<boolean>(false)
+
+const { copy } = useCopy()
+
+const { t } = useI18n()
+
+const copied = ref(false)
+
+const copyValue = async () => {
+  await copy(vModel.value ?? '')
+  message.info(t('msg.info.copiedToClipboard'))
+  copied.value = true
+  setTimeout(() => {
+    copied.value = false
+  }, 2000)
+}
+
+onMounted(() => {
+  if (basesList.value?.length && basesList.value[0]?.id) {
+    vModel.value = basesList.value[0].id
+  }
+})
+</script>
+
+<template>
+  <div
+    class="relative group w-full border-1 border-nc-border-gray-medium rounded-lg bg-nc-bg-gray-extralight h-8 flex items-center text-nc-content-gray-muted"
+  >
+    <NcDropdown v-model:visible="isOpen" overlay-class-name="overflow-hidden max-w-[320px]">
+      <div class="h-full flex-1 px-3 mr-8 flex items-center gap-2 cursor-pointer" @click.stop>
+        <div>
+          {{ vModel }}
+        </div>
+        <GeneralIcon
+          icon="chevronDown"
+          class="!text-current opacity-70 flex-none transform transition-transform duration-250 w-3.5 h-3.5"
+          :class="{ '!rotate-180': isOpen }"
+        />
+      </div>
+
+      <template #overlay>
+        <NcList
+          v-model:value="vModel"
+          v-model:open="isOpen"
+          :list="basesList"
+          option-label-key="title"
+          search-input-placeholder="Search"
+          option-value-key="id"
+          close-on-select
+          :item-height="56"
+          class="!w-full"
+          container-class-name="!max-h-[171px]"
+          @update:value="copyValue"
+        >
+          <template #listItemContent="{ option }">
+            <div class="flex-1 flex flex-col truncate">
+              <div class="flex items-center gap-2">
+                <GeneralBaseIconColorPicker
+                  :type="option?.type"
+                  :model-value="parseProp(option.meta).iconColor"
+                  size="xsmall"
+                  readonly
+                >
+                </GeneralBaseIconColorPicker>
+                <div class="truncate text-nc-content-gray">
+                  {{ option.id }}
+                </div>
+              </div>
+              <div class="w-full pl-7 text-nc-content-gray-muted text-small leading-[18px] truncate">
+                <NcTooltip class="truncate max-w-full" show-on-truncate-only>
+                  <template #title>
+                    {{ option?.title }}
+                  </template>
+                  {{ option?.title }}
+                </NcTooltip>
+              </div>
+            </div>
+          </template>
+        </NcList>
+      </template>
+    </NcDropdown>
+
+    <div
+      class="absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer transition-colors text-nc-content-gray-muted group-hover:text-nc-content-gray-subtle"
+      @click="copyValue"
+    >
+      <GeneralIcon v-if="copied" class="max-h-4 min-w-4 !text-current" icon="check" />
+      <GeneralIcon v-else class="max-h-4 min-w-4 !text-current" icon="copy" />
+    </div>
+  </div>
+</template>