mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-02 05:06:56 +00:00
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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user