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>
This commit is contained in:
Mert E.
2025-01-14 14:59:45 +03:00
committed by GitHub
parent 51edd98b9e
commit c2f50efbb9
39 changed files with 1379 additions and 272 deletions

View File

@@ -2,7 +2,7 @@
import type { VNodeRef } from '@vue/runtime-core'
import { IntegrationCategoryType } from 'nocodb-sdk'
import NcModal from '~/components/nc/Modal.vue'
/* eslint-disable @typescript-eslint/consistent-type-imports */
import { type IntegrationItemType, SyncDataType } from '#imports'
const props = withDefaults(
@@ -30,6 +30,8 @@ const { syncDataUpvotes, updateSyncDataUpvotes } = useGlobal()
const { isFeatureEnabled } = useBetaFeatureToggle()
const { activeWorkspace } = storeToRefs(useWorkspace())
const easterEggToggle = computed(() => isFeatureEnabled(FEATURE_FLAG.INTEGRATIONS))
const router = useRouter()
@@ -166,6 +168,7 @@ const integrationsMapByCategory = computed(() => {
list: IntegrationItemType[]
isAvailable?: boolean
teleEventName?: IntegrationCategoryType
value: IntegrationCategoryType
}
>,
)
@@ -202,7 +205,11 @@ const handleUpvote = (category: IntegrationCategoryType, syncDataType: SyncDataT
const handleAddIntegration = async (category: IntegrationCategoryType, integration: IntegrationItemType) => {
if (!integration.isAvailable) {
handleUpvote(category, integration.subType)
handleUpvote(category, integration.sub_type)
return
}
if (!isFeatureEnabled(FEATURE_FLAG.DATA_REFLECTION) && integration.sub_type === SyncDataType.NOCODB) {
return
}
@@ -229,6 +236,10 @@ onMounted(() => {
}
})
const dataReflectionEnabled = computed(() => {
return !!activeWorkspace.value?.data_reflection_enabled
})
watch(activeViewTab, (value) => {
if (value !== 'integrations' && isOpenFilter.value) {
isOpenFilter.value = false
@@ -386,7 +397,7 @@ watch(activeViewTab, (value) => {
>
</div>
<div v-if="category.list.length" class="integration-type-list">
<template v-for="integration of category.list" :key="integration.subType">
<template v-for="integration of category.list" :key="integration.sub_type">
<NcTooltip
v-if="easterEggToggle || integration.isAvailable"
:disabled="integration?.isAvailable"
@@ -409,14 +420,25 @@ watch(activeViewTab, (value) => {
<div class="name">{{ $t(integration.title) }}</div>
<div v-if="integration.subtitle" class="subtitle flex-1">{{ $t(integration.subtitle) }}</div>
</div>
<div v-if="integration?.isAvailable" class="action-btn">+</div>
<div
v-if="
!isFeatureEnabled(FEATURE_FLAG.DATA_REFLECTION) && integration?.sub_type === SyncDataType.NOCODB
"
></div>
<div v-else-if="integration?.sub_type === SyncDataType.NOCODB" class="flex items-center">
<template v-if="dataReflectionEnabled">
<GeneralIcon icon="check" class="text-primary text-lg" />
</template>
<div v-else class="action-btn !block">+</div>
</div>
<div v-else-if="integration?.isAvailable" class="action-btn">+</div>
<div v-else class="">
<NcButton
type="secondary"
size="xs"
class="integration-upvote-btn !rounded-lg !px-1 !py-0"
:class="{
selected: upvotesData.has(integration.subType),
selected: upvotesData.has(integration.sub_type),
}"
>
<div class="flex items-center gap-2">
@@ -572,7 +594,7 @@ watch(activeViewTab, (value) => {
}
.action-btn {
@apply hidden text-2xl text-gray-500 w-7 h-7 text-center;
@apply hidden text-2xl text-gray-500 w-7 h-7 text-center flex-none;
}
&.is-available {